调整代码
This commit is contained in:
guanj
@@ -1,310 +1,310 @@
|
||||
<template>
|
||||
<div class="w100">
|
||||
<!-- el-select 的远程下拉只在有搜索词时，才会加载数据（显示出 option 列表） -->
|
||||
<!-- 使用 el-popover 在无数据/无搜索词时，显示一个无数据的提醒 -->
|
||||
<el-popover
|
||||
width="100%"
|
||||
placement="bottom"
|
||||
popper-class="remote-select-popper"
|
||||
:visible="state.focusStatus && !state.loading && !state.keyword && !state.options.length"
|
||||
:teleported="false"
|
||||
:content="$t('utils.No data')"
|
||||
>
|
||||
<template #reference>
|
||||
<el-select
|
||||
ref="selectRef"
|
||||
class="w100"
|
||||
@focus="onFocus"
|
||||
@blur="onBlur"
|
||||
:loading="state.loading || state.accidentBlur"
|
||||
:filterable="true"
|
||||
:remote="true"
|
||||
clearable
|
||||
remote-show-suffix
|
||||
:remote-method="onLogKeyword"
|
||||
v-model="state.value"
|
||||
@change="onChangeSelect"
|
||||
:multiple="multiple"
|
||||
:key="state.selectKey"
|
||||
@clear="onClear"
|
||||
@visible-change="onVisibleChange"
|
||||
v-bind="$attrs"
|
||||
>
|
||||
<el-option
|
||||
class="remote-select-option"
|
||||
v-for="item in state.options"
|
||||
:label="item[field]"
|
||||
:value="item[state.primaryKey].toString()"
|
||||
:key="item[state.primaryKey]"
|
||||
>
|
||||
<el-tooltip placement="right" effect="light" v-if="!isEmpty(tooltipParams)">
|
||||
<template #content>
|
||||
<p v-for="(tooltipParam, key) in tooltipParams" :key="key">{{ key }}: {{ item[tooltipParam] }}</p>
|
||||
</template>
|
||||
<div>{{ item[field] }}</div>
|
||||
</el-tooltip>
|
||||
</el-option>
|
||||
<el-pagination
|
||||
v-if="state.total"
|
||||
:currentPage="state.currentPage"
|
||||
:page-size="state.pageSize"
|
||||
class="select-pagination"
|
||||
layout="->, prev, next"
|
||||
:total="state.total"
|
||||
@current-change="onSelectCurrentPageChange"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-popover>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, watch, onMounted, onUnmounted, ref, nextTick, getCurrentInstance, toRaw } from 'vue'
|
||||
import { getSelectData } from '@/api/common'
|
||||
import { uuid } from '@/utils/random'
|
||||
import type { ElSelect } from 'element-plus'
|
||||
import { isEmpty } from 'lodash-es'
|
||||
import { getArrayKey } from '@/utils/common'
|
||||
|
||||
const selectRef = ref<InstanceType<typeof ElSelect> | undefined>()
|
||||
type ElSelectProps = Partial<InstanceType<typeof ElSelect>['$props']>
|
||||
type valType = string | number | string[] | number[]
|
||||
|
||||
interface Props extends /* @vue-ignore */ ElSelectProps {
|
||||
pk?: string
|
||||
field?: string
|
||||
params?: anyObj
|
||||
multiple?: boolean
|
||||
remoteUrl: string
|
||||
modelValue: valType
|
||||
labelFormatter?: (optionData: anyObj, optionKey: string) => string
|
||||
tooltipParams?: anyObj
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
pk: 'id',
|
||||
field: 'name',
|
||||
params: () => {
|
||||
return {}
|
||||
},
|
||||
remoteUrl: '',
|
||||
modelValue: '',
|
||||
multiple: false,
|
||||
tooltipParams: () => {
|
||||
return {}
|
||||
},
|
||||
})
|
||||
|
||||
const state: {
|
||||
// 主表字段名(不带表别名)
|
||||
primaryKey: string
|
||||
options: anyObj[]
|
||||
loading: boolean
|
||||
total: number
|
||||
currentPage: number
|
||||
pageSize: number
|
||||
params: anyObj
|
||||
keyword: string
|
||||
value: valType
|
||||
selectKey: string
|
||||
initializeData: boolean
|
||||
accidentBlur: boolean
|
||||
focusStatus: boolean
|
||||
} = reactive({
|
||||
primaryKey: props.pk,
|
||||
options: [],
|
||||
loading: false,
|
||||
total: 0,
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
params: props.params,
|
||||
keyword: '',
|
||||
value: props.modelValue ? props.modelValue : '',
|
||||
selectKey: uuid(),
|
||||
initializeData: false,
|
||||
accidentBlur: false,
|
||||
focusStatus: false,
|
||||
})
|
||||
|
||||
let io: null | IntersectionObserver = null
|
||||
const instance = getCurrentInstance()
|
||||
|
||||
const emits = defineEmits<{
|
||||
(e: 'update:modelValue', value: valType): void
|
||||
(e: 'row', value: any): void
|
||||
}>()
|
||||
|
||||
const onChangeSelect = (val: valType) => {
|
||||
emits('update:modelValue', val)
|
||||
if (typeof instance?.vnode.props?.onRow == 'function') {
|
||||
let pkArr = props.pk.split('.')
|
||||
let pk = pkArr[pkArr.length - 1]
|
||||
if (typeof val == 'number' || typeof val == 'string') {
|
||||
const dataKey = getArrayKey(state.options, pk, val.toString())
|
||||
emits('row', dataKey ? toRaw(state.options[dataKey]) : {})
|
||||
} else {
|
||||
const valueArr = []
|
||||
for (const key in val) {
|
||||
let dataKey = getArrayKey(state.options, pk, val[key].toString())
|
||||
if (dataKey) valueArr.push(toRaw(state.options[dataKey]))
|
||||
}
|
||||
emits('row', valueArr)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const onVisibleChange = (val: boolean) => {
|
||||
// 保持面板状态和焦点状态一致
|
||||
if (!val) {
|
||||
nextTick(() => {
|
||||
selectRef.value?.blur()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const onFocus = () => {
|
||||
state.focusStatus = true
|
||||
if (selectRef.value?.query != state.keyword) {
|
||||
state.keyword = ''
|
||||
state.initializeData = false
|
||||
// el-select 自动清理搜索词会产生意外的脱焦
|
||||
state.accidentBlur = true
|
||||
}
|
||||
if (!state.initializeData) {
|
||||
getData()
|
||||
}
|
||||
}
|
||||
|
||||
const onBlur = () => {
|
||||
state.focusStatus = false
|
||||
}
|
||||
|
||||
const onClear = () => {
|
||||
state.keyword = ''
|
||||
state.initializeData = false
|
||||
}
|
||||
|
||||
const onLogKeyword = (q: string) => {
|
||||
if (state.keyword != q) {
|
||||
state.keyword = q
|
||||
getData()
|
||||
}
|
||||
}
|
||||
|
||||
const getData = (initValue: valType = '') => {
|
||||
state.loading = true
|
||||
state.params.page = state.currentPage
|
||||
state.params.initKey = props.pk
|
||||
state.params.initValue = initValue
|
||||
getSelectData(props.remoteUrl, state.keyword, state.params)
|
||||
.then((res) => {
|
||||
let initializeData = true
|
||||
let opts = res.data.options ? res.data.options : res.data.list
|
||||
if (typeof props.labelFormatter == 'function') {
|
||||
for (const key in opts) {
|
||||
opts[key][props.field] = props.labelFormatter(opts[key], key)
|
||||
}
|
||||
}
|
||||
state.options = opts
|
||||
state.total = res.data.total ?? 0
|
||||
if (initValue) {
|
||||
// 重新渲染组件,确保在赋值前,opts已加载到-兼容 modelValue 更新
|
||||
state.selectKey = uuid()
|
||||
initializeData = false
|
||||
}
|
||||
state.loading = false
|
||||
state.initializeData = initializeData
|
||||
if (state.accidentBlur) {
|
||||
nextTick(() => {
|
||||
const inputEl = selectRef.value?.$el.querySelector('.el-select__tags .el-select__input')
|
||||
inputEl && inputEl.focus()
|
||||
state.accidentBlur = false
|
||||
})
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
state.loading = false
|
||||
})
|
||||
}
|
||||
|
||||
const onSelectCurrentPageChange = (val: number) => {
|
||||
state.currentPage = val
|
||||
getData()
|
||||
}
|
||||
|
||||
const initDefaultValue = () => {
|
||||
if (state.value) {
|
||||
// number[]转string[]确保默认值能够选中
|
||||
if (typeof state.value === 'object') {
|
||||
for (const key in state.value as string[]) {
|
||||
state.value[key] = state.value[key].toString()
|
||||
}
|
||||
} else if (typeof state.value === 'number') {
|
||||
state.value = state.value.toString()
|
||||
}
|
||||
getData(state.value)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (props.pk.indexOf('.') > 0) {
|
||||
let pk = props.pk.split('.')
|
||||
state.primaryKey = pk[1] ? pk[1] : pk[0]
|
||||
}
|
||||
initDefaultValue()
|
||||
|
||||
setTimeout(() => {
|
||||
if (window?.IntersectionObserver) {
|
||||
io = new IntersectionObserver((entries) => {
|
||||
for (const key in entries) {
|
||||
if (!entries[key].isIntersecting) selectRef.value?.blur()
|
||||
}
|
||||
})
|
||||
if (selectRef.value?.$el instanceof Element) {
|
||||
io.observe(selectRef.value.$el)
|
||||
}
|
||||
}
|
||||
}, 500)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
io?.disconnect()
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(newVal) => {
|
||||
if (String(state.value) != String(newVal)) {
|
||||
state.value = newVal ? newVal : ''
|
||||
initDefaultValue()
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
const getSelectRef = () => {
|
||||
return selectRef.value
|
||||
}
|
||||
|
||||
const focus = () => {
|
||||
selectRef.value?.focus()
|
||||
}
|
||||
|
||||
const blur = () => {
|
||||
selectRef.value?.blur()
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
blur,
|
||||
focus,
|
||||
getSelectRef,
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.remote-select-popper) {
|
||||
text-align: center;
|
||||
}
|
||||
.remote-select-option {
|
||||
white-space: pre;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="w100">
|
||||
<!-- el-select 的远程下拉只在有搜索词时，才会加载数据（显示出 option 列表） -->
|
||||
<!-- 使用 el-popover 在无数据/无搜索词时，显示一个无数据的提醒 -->
|
||||
<el-popover
|
||||
width="100%"
|
||||
placement="bottom"
|
||||
popper-class="remote-select-popper"
|
||||
:visible="state.focusStatus && !state.loading && !state.keyword && !state.options.length"
|
||||
:teleported="false"
|
||||
:content="$t('utils.No data')"
|
||||
>
|
||||
<template #reference>
|
||||
<el-select
|
||||
ref="selectRef"
|
||||
class="w100"
|
||||
@focus="onFocus"
|
||||
@blur="onBlur"
|
||||
:loading="state.loading || state.accidentBlur"
|
||||
:filterable="true"
|
||||
:remote="true"
|
||||
clearable
|
||||
remote-show-suffix
|
||||
:remote-method="onLogKeyword"
|
||||
v-model="state.value"
|
||||
@change="onChangeSelect"
|
||||
:multiple="multiple"
|
||||
:key="state.selectKey"
|
||||
@clear="onClear"
|
||||
@visible-change="onVisibleChange"
|
||||
v-bind="$attrs"
|
||||
>
|
||||
<el-option
|
||||
class="remote-select-option"
|
||||
v-for="item in state.options"
|
||||
:label="item[field]"
|
||||
:value="item[state.primaryKey].toString()"
|
||||
:key="item[state.primaryKey]"
|
||||
>
|
||||
<el-tooltip placement="right" effect="light" v-if="!isEmpty(tooltipParams)">
|
||||
<template #content>
|
||||
<p v-for="(tooltipParam, key) in tooltipParams" :key="key">{{ key }}: {{ item[tooltipParam] }}</p>
|
||||
</template>
|
||||
<div>{{ item[field] }}</div>
|
||||
</el-tooltip>
|
||||
</el-option>
|
||||
<el-pagination
|
||||
v-if="state.total"
|
||||
:currentPage="state.currentPage"
|
||||
:page-size="state.pageSize"
|
||||
class="select-pagination"
|
||||
layout="->, prev, next"
|
||||
:total="state.total"
|
||||
@current-change="onSelectCurrentPageChange"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-popover>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, watch, onMounted, onUnmounted, ref, nextTick, getCurrentInstance, toRaw } from 'vue'
|
||||
// import { getSelectData } from '@/api/common'
|
||||
import { uuid } from '@/utils/random'
|
||||
import type { ElSelect } from 'element-plus'
|
||||
import { isEmpty } from 'lodash-es'
|
||||
// import { getArrayKey } from '@/utils/common'
|
||||
|
||||
const selectRef = ref<InstanceType<typeof ElSelect> | undefined>()
|
||||
type ElSelectProps = Partial<InstanceType<typeof ElSelect>['$props']>
|
||||
type valType = string | number | string[] | number[]
|
||||
|
||||
interface Props extends /* @vue-ignore */ ElSelectProps {
|
||||
pk?: string
|
||||
field?: string
|
||||
params?: anyObj
|
||||
multiple?: boolean
|
||||
remoteUrl: string
|
||||
modelValue: valType
|
||||
labelFormatter?: (optionData: anyObj, optionKey: string) => string
|
||||
tooltipParams?: anyObj
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
pk: 'id',
|
||||
field: 'name',
|
||||
params: () => {
|
||||
return {}
|
||||
},
|
||||
remoteUrl: '',
|
||||
modelValue: '',
|
||||
multiple: false,
|
||||
tooltipParams: () => {
|
||||
return {}
|
||||
},
|
||||
})
|
||||
|
||||
const state: {
|
||||
// 主表字段名(不带表别名)
|
||||
primaryKey: string
|
||||
options: anyObj[]
|
||||
loading: boolean
|
||||
total: number
|
||||
currentPage: number
|
||||
pageSize: number
|
||||
params: anyObj
|
||||
keyword: string
|
||||
value: valType
|
||||
selectKey: string
|
||||
initializeData: boolean
|
||||
accidentBlur: boolean
|
||||
focusStatus: boolean
|
||||
} = reactive({
|
||||
primaryKey: props.pk,
|
||||
options: [],
|
||||
loading: false,
|
||||
total: 0,
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
params: props.params,
|
||||
keyword: '',
|
||||
value: props.modelValue ? props.modelValue : '',
|
||||
selectKey: uuid(),
|
||||
initializeData: false,
|
||||
accidentBlur: false,
|
||||
focusStatus: false,
|
||||
})
|
||||
|
||||
let io: null | IntersectionObserver = null
|
||||
const instance = getCurrentInstance()
|
||||
|
||||
const emits = defineEmits<{
|
||||
(e: 'update:modelValue', value: valType): void
|
||||
(e: 'row', value: any): void
|
||||
}>()
|
||||
|
||||
const onChangeSelect = (val: valType) => {
|
||||
emits('update:modelValue', val)
|
||||
if (typeof instance?.vnode.props?.onRow == 'function') {
|
||||
let pkArr = props.pk.split('.')
|
||||
let pk = pkArr[pkArr.length - 1]
|
||||
if (typeof val == 'number' || typeof val == 'string') {
|
||||
// const dataKey = getArrayKey(state.options, pk, val.toString())
|
||||
// emits('row', dataKey ? toRaw(state.options[dataKey]) : {})
|
||||
} else {
|
||||
// const valueArr = []
|
||||
// for (const key in val) {
|
||||
// let dataKey = getArrayKey(state.options, pk, val[key].toString())
|
||||
// if (dataKey) valueArr.push(toRaw(state.options[dataKey]))
|
||||
// }
|
||||
// emits('row', valueArr)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const onVisibleChange = (val: boolean) => {
|
||||
// 保持面板状态和焦点状态一致
|
||||
if (!val) {
|
||||
nextTick(() => {
|
||||
selectRef.value?.blur()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const onFocus = () => {
|
||||
state.focusStatus = true
|
||||
if (selectRef.value?.query != state.keyword) {
|
||||
state.keyword = ''
|
||||
state.initializeData = false
|
||||
// el-select 自动清理搜索词会产生意外的脱焦
|
||||
state.accidentBlur = true
|
||||
}
|
||||
if (!state.initializeData) {
|
||||
getData()
|
||||
}
|
||||
}
|
||||
|
||||
const onBlur = () => {
|
||||
state.focusStatus = false
|
||||
}
|
||||
|
||||
const onClear = () => {
|
||||
state.keyword = ''
|
||||
state.initializeData = false
|
||||
}
|
||||
|
||||
const onLogKeyword = (q: string) => {
|
||||
if (state.keyword != q) {
|
||||
state.keyword = q
|
||||
getData()
|
||||
}
|
||||
}
|
||||
|
||||
const getData = (initValue: valType = '') => {
|
||||
state.loading = true
|
||||
state.params.page = state.currentPage
|
||||
state.params.initKey = props.pk
|
||||
state.params.initValue = initValue
|
||||
// getSelectData(props.remoteUrl, state.keyword, state.params)
|
||||
// .then((res) => {
|
||||
// let initializeData = true
|
||||
// let opts = res.data.options ? res.data.options : res.data.list
|
||||
// if (typeof props.labelFormatter == 'function') {
|
||||
// for (const key in opts) {
|
||||
// opts[key][props.field] = props.labelFormatter(opts[key], key)
|
||||
// }
|
||||
// }
|
||||
// state.options = opts
|
||||
// state.total = res.data.total ?? 0
|
||||
// if (initValue) {
|
||||
// // 重新渲染组件,确保在赋值前,opts已加载到-兼容 modelValue 更新
|
||||
// state.selectKey = uuid()
|
||||
// initializeData = false
|
||||
// }
|
||||
// state.loading = false
|
||||
// state.initializeData = initializeData
|
||||
// if (state.accidentBlur) {
|
||||
// nextTick(() => {
|
||||
// const inputEl = selectRef.value?.$el.querySelector('.el-select__tags .el-select__input')
|
||||
// inputEl && inputEl.focus()
|
||||
// state.accidentBlur = false
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
// .catch(() => {
|
||||
// state.loading = false
|
||||
// })
|
||||
}
|
||||
|
||||
const onSelectCurrentPageChange = (val: number) => {
|
||||
state.currentPage = val
|
||||
getData()
|
||||
}
|
||||
|
||||
const initDefaultValue = () => {
|
||||
if (state.value) {
|
||||
// number[]转string[]确保默认值能够选中
|
||||
if (typeof state.value === 'object') {
|
||||
for (const key in state.value as string[]) {
|
||||
state.value[key] = state.value[key].toString()
|
||||
}
|
||||
} else if (typeof state.value === 'number') {
|
||||
state.value = state.value.toString()
|
||||
}
|
||||
getData(state.value)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (props.pk.indexOf('.') > 0) {
|
||||
let pk = props.pk.split('.')
|
||||
state.primaryKey = pk[1] ? pk[1] : pk[0]
|
||||
}
|
||||
initDefaultValue()
|
||||
|
||||
setTimeout(() => {
|
||||
if (window?.IntersectionObserver) {
|
||||
io = new IntersectionObserver((entries) => {
|
||||
for (const key in entries) {
|
||||
if (!entries[key].isIntersecting) selectRef.value?.blur()
|
||||
}
|
||||
})
|
||||
if (selectRef.value?.$el instanceof Element) {
|
||||
io.observe(selectRef.value.$el)
|
||||
}
|
||||
}
|
||||
}, 500)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
io?.disconnect()
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(newVal) => {
|
||||
if (String(state.value) != String(newVal)) {
|
||||
state.value = newVal ? newVal : ''
|
||||
initDefaultValue()
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
const getSelectRef = () => {
|
||||
return selectRef.value
|
||||
}
|
||||
|
||||
const focus = () => {
|
||||
selectRef.value?.focus()
|
||||
}
|
||||
|
||||
const blur = () => {
|
||||
selectRef.value?.blur()
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
blur,
|
||||
focus,
|
||||
getSelectRef,
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.remote-select-popper) {
|
||||
text-align: center;
|
||||
}
|
||||
.remote-select-option {
|
||||
white-space: pre;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,190 +1,190 @@
|
||||
<template>
|
||||
<div v-if="view2">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<span style="font-size: 14px; line-height: 30px">值类型选择:</span>
|
||||
<el-select
|
||||
style="min-width: 200px; width: 200px"
|
||||
@change="changeView"
|
||||
v-model="value"
|
||||
placeholder="请选择值类型"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<!-- <el-button v-if="view2 && senior" class="ml10" type="primary"
|
||||
@click="AdvancedAnalytics">高级分析</el-button> -->
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-button
|
||||
@click="backbxlb"
|
||||
class="el-icon-refresh-right"
|
||||
icon="el-icon-CloseBold"
|
||||
style="float: right"
|
||||
>
|
||||
返回
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div v-loading="loading" style="height: calc(100vh - 190px)">
|
||||
<el-tabs v-if="view4" class="default-main" v-model="bxactiveName" @tab-click="bxhandleClick">
|
||||
<el-tab-pane
|
||||
label="瞬时波形"
|
||||
name="ssbx"
|
||||
class="boxbx pt10 pb10"
|
||||
:style="'height:' + bxecharts + ';overflow-y: scroll;'"
|
||||
>
|
||||
<shushiboxi
|
||||
ref="shushiboxiRef"
|
||||
v-if="bxactiveName == 'ssbx' && showBoxi"
|
||||
:value="value"
|
||||
:parentHeight="parentHeight"
|
||||
:boxoList="boxoList"
|
||||
:wp="wp"
|
||||
></shushiboxi>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane
|
||||
label="RMS波形"
|
||||
class="boxbx pt10 pb10"
|
||||
name="rmsbx"
|
||||
:style="'height:' + bxecharts + ';overflow-y: scroll;'"
|
||||
>
|
||||
<rmsboxi
|
||||
ref="rmsboxiRef"
|
||||
v-if="bxactiveName == 'rmsbx' && showBoxi"
|
||||
:value="value"
|
||||
:parentHeight="parentHeight"
|
||||
:boxoList="boxoList"
|
||||
:wp="wp"
|
||||
></rmsboxi>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<el-empty v-else description="暂无数据" style="height: calc(100vh - 190px)" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="view3" class="pd10">
|
||||
<span style="font-weight: 500; font-size: 22px">高级分析</span>
|
||||
<el-button icon="el-icon-Back" @click="gaoBack" style="float: right">返回</el-button>
|
||||
<analytics :flag="true" :GJList="GJList" :boxoList="boxoList"></analytics>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import shushiboxi from '@/components/echarts/shushiboxi.vue'
|
||||
import rmsboxi from '@/components/echarts/rmsboxi.vue'
|
||||
import analytics from '@/components/echarts/analytics.vue'
|
||||
import { ref, reactive } from 'vue'
|
||||
import { analysis } from '@/api/advance-boot/analyse'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { getMonitorEventAnalyseWave, downloadWaveFile } from '@/api/event-boot/transient'
|
||||
const emit = defineEmits(['backbxlb'])
|
||||
interface Props {
|
||||
// boxoList: any
|
||||
// wp: any,
|
||||
senior?: boolean
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
senior: false
|
||||
})
|
||||
const parentHeight = ref(0)
|
||||
const loading = ref(true)
|
||||
const bxactiveName = ref('ssbx')
|
||||
const rmsboxiRef = ref()
|
||||
const value = ref(1)
|
||||
const options = ref([
|
||||
{
|
||||
value: 1,
|
||||
label: '一次值'
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '二次值'
|
||||
}
|
||||
])
|
||||
const shushiboxiRef = ref()
|
||||
const bxecharts = ref(mainHeight(95).height as any)
|
||||
const view2 = ref(true)
|
||||
const boxoList = ref(null)
|
||||
const wp = ref(null)
|
||||
const showBoxi = ref(true)
|
||||
const view3 = ref(false)
|
||||
const view4 = ref(false)
|
||||
const GJList = ref([])
|
||||
|
||||
const open = async (row: any) => {
|
||||
loading.value = true
|
||||
await getMonitorEventAnalyseWave({ id: row.eventId, systemType: 0 })
|
||||
.then(res => {
|
||||
row.loading = false
|
||||
if (res != undefined) {
|
||||
boxoList.value = row
|
||||
wp.value = res.data
|
||||
loading.value = false
|
||||
view4.value = true
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
const bxhandleClick = (tab: any) => {
|
||||
if (shushiboxiRef.value) shushiboxiRef.value.backbxlb()
|
||||
if (rmsboxiRef.value) rmsboxiRef.value.backbxlb()
|
||||
|
||||
loading.value = true
|
||||
if (tab.name == 'ssbx') {
|
||||
bxactiveName.value = 'ssbx'
|
||||
} else if (tab.name == 'rmsbx') {
|
||||
bxactiveName.value = 'rmsbx'
|
||||
}
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
}, 0)
|
||||
// console.log(tab, event);
|
||||
}
|
||||
const backbxlb = () => {
|
||||
boxoList.value = null
|
||||
wp.value = null
|
||||
if (shushiboxiRef.value) shushiboxiRef.value.backbxlb()
|
||||
if (rmsboxiRef.value) rmsboxiRef.value.backbxlb()
|
||||
|
||||
emit('backbxlb')
|
||||
}
|
||||
const setHeight = (h: any, vh: any) => {
|
||||
if (h != false) {
|
||||
parentHeight.value = h
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
bxecharts.value = mainHeight(vh).height
|
||||
}, 100)
|
||||
}
|
||||
// 高级分析
|
||||
const AdvancedAnalytics = () => {
|
||||
analysis({
|
||||
eventIndex: boxoList.value.eventId
|
||||
}).then(res => {
|
||||
GJList.value = res.data
|
||||
view3.value = true
|
||||
view2.value = false
|
||||
})
|
||||
}
|
||||
const changeView = () => {
|
||||
if (shushiboxiRef.value) shushiboxiRef.value.backbxlb()
|
||||
if (rmsboxiRef.value) rmsboxiRef.value.backbxlb()
|
||||
showBoxi.value = false
|
||||
setTimeout(() => {
|
||||
showBoxi.value = true
|
||||
}, 0)
|
||||
}
|
||||
const gaoBack = () => {
|
||||
view2.value = true
|
||||
view3.value = false
|
||||
}
|
||||
defineExpose({ open, setHeight })
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
<template>
|
||||
<div v-if="view2">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<span style="font-size: 14px; line-height: 30px">值类型选择:</span>
|
||||
<el-select
|
||||
style="min-width: 200px; width: 200px"
|
||||
@change="changeView"
|
||||
v-model="value"
|
||||
placeholder="请选择值类型"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<!-- <el-button v-if="view2 && senior" class="ml10" type="primary"
|
||||
@click="AdvancedAnalytics">高级分析</el-button> -->
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-button
|
||||
@click="backbxlb"
|
||||
class="el-icon-refresh-right"
|
||||
icon="el-icon-Back"
|
||||
style="float: right"
|
||||
>
|
||||
返回
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div v-loading="loading" style="height: calc(100vh - 190px)">
|
||||
<el-tabs v-if="view4" class="default-main" v-model="bxactiveName" @tab-click="bxhandleClick">
|
||||
<el-tab-pane
|
||||
label="瞬时波形"
|
||||
name="ssbx"
|
||||
class="boxbx pt10 pb10"
|
||||
:style="'height:' + bxecharts + ';overflow-y: scroll;'"
|
||||
>
|
||||
<shushiboxi
|
||||
ref="shushiboxiRef"
|
||||
v-if="bxactiveName == 'ssbx' && showBoxi"
|
||||
:value="value"
|
||||
:parentHeight="parentHeight"
|
||||
:boxoList="boxoList"
|
||||
:wp="wp"
|
||||
></shushiboxi>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane
|
||||
label="RMS波形"
|
||||
class="boxbx pt10 pb10"
|
||||
name="rmsbx"
|
||||
:style="'height:' + bxecharts + ';overflow-y: scroll;'"
|
||||
>
|
||||
<rmsboxi
|
||||
ref="rmsboxiRef"
|
||||
v-if="bxactiveName == 'rmsbx' && showBoxi"
|
||||
:value="value"
|
||||
:parentHeight="parentHeight"
|
||||
:boxoList="boxoList"
|
||||
:wp="wp"
|
||||
></rmsboxi>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<el-empty v-else description="暂无数据" style="height: calc(100vh - 190px)" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="view3" class="pd10">
|
||||
<span style="font-weight: 500; font-size: 22px">高级分析</span>
|
||||
<el-button icon="el-icon-Back" @click="gaoBack" style="float: right">返回</el-button>
|
||||
<analytics :flag="true" :GJList="GJList" :boxoList="boxoList"></analytics>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import shushiboxi from '@/components/echarts/shushiboxi.vue'
|
||||
import rmsboxi from '@/components/echarts/rmsboxi.vue'
|
||||
import analytics from '@/components/echarts/analytics.vue'
|
||||
import { ref, reactive } from 'vue'
|
||||
import { analysis } from '@/api/advance-boot/analyse'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { getMonitorEventAnalyseWave, downloadWaveFile } from '@/api/event-boot/transient'
|
||||
const emit = defineEmits(['backbxlb'])
|
||||
interface Props {
|
||||
// boxoList: any
|
||||
// wp: any,
|
||||
senior?: boolean
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
senior: false
|
||||
})
|
||||
const parentHeight = ref(0)
|
||||
const loading = ref(true)
|
||||
const bxactiveName = ref('ssbx')
|
||||
const rmsboxiRef = ref()
|
||||
const value = ref(1)
|
||||
const options = ref([
|
||||
{
|
||||
value: 1,
|
||||
label: '一次值'
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '二次值'
|
||||
}
|
||||
])
|
||||
const shushiboxiRef = ref()
|
||||
const bxecharts = ref(mainHeight(95).height as any)
|
||||
const view2 = ref(true)
|
||||
const boxoList = ref(null)
|
||||
const wp = ref(null)
|
||||
const showBoxi = ref(true)
|
||||
const view3 = ref(false)
|
||||
const view4 = ref(false)
|
||||
const GJList = ref([])
|
||||
|
||||
const open = async (row: any) => {
|
||||
loading.value = true
|
||||
await getMonitorEventAnalyseWave({ id: row.eventId, systemType: 0 })
|
||||
.then(res => {
|
||||
row.loading = false
|
||||
if (res != undefined) {
|
||||
boxoList.value = row
|
||||
wp.value = res.data
|
||||
loading.value = false
|
||||
view4.value = true
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
const bxhandleClick = (tab: any) => {
|
||||
if (shushiboxiRef.value) shushiboxiRef.value.backbxlb()
|
||||
if (rmsboxiRef.value) rmsboxiRef.value.backbxlb()
|
||||
|
||||
loading.value = true
|
||||
if (tab.name == 'ssbx') {
|
||||
bxactiveName.value = 'ssbx'
|
||||
} else if (tab.name == 'rmsbx') {
|
||||
bxactiveName.value = 'rmsbx'
|
||||
}
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
}, 0)
|
||||
// console.log(tab, event);
|
||||
}
|
||||
const backbxlb = () => {
|
||||
boxoList.value = null
|
||||
wp.value = null
|
||||
if (shushiboxiRef.value) shushiboxiRef.value.backbxlb()
|
||||
if (rmsboxiRef.value) rmsboxiRef.value.backbxlb()
|
||||
|
||||
emit('backbxlb')
|
||||
}
|
||||
const setHeight = (h: any, vh: any) => {
|
||||
if (h != false) {
|
||||
parentHeight.value = h
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
bxecharts.value = mainHeight(vh).height
|
||||
}, 100)
|
||||
}
|
||||
// 高级分析
|
||||
const AdvancedAnalytics = () => {
|
||||
analysis({
|
||||
eventIndex: boxoList.value.eventId
|
||||
}).then(res => {
|
||||
GJList.value = res.data
|
||||
view3.value = true
|
||||
view2.value = false
|
||||
})
|
||||
}
|
||||
const changeView = () => {
|
||||
if (shushiboxiRef.value) shushiboxiRef.value.backbxlb()
|
||||
if (rmsboxiRef.value) rmsboxiRef.value.backbxlb()
|
||||
showBoxi.value = false
|
||||
setTimeout(() => {
|
||||
showBoxi.value = true
|
||||
}, 0)
|
||||
}
|
||||
const gaoBack = () => {
|
||||
view2.value = true
|
||||
view3.value = false
|
||||
}
|
||||
defineExpose({ open, setHeight })
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
@@ -1,43 +1,24 @@
|
||||
<template>
|
||||
<div :style="{ height:props.height?props.height: tableStore.table.height }">
|
||||
<vxe-table
|
||||
ref="tableRef"
|
||||
height="auto"
|
||||
:key="key"
|
||||
:data="tableStore.table.data"
|
||||
v-loading="tableStore.table.loading"
|
||||
v-bind="Object.assign({}, defaultAttribute, $attrs)"
|
||||
@checkbox-all="selectChangeEvent"
|
||||
@checkbox-change="selectChangeEvent"
|
||||
:showOverflow="showOverflow"
|
||||
@sort-change="handleSortChange"
|
||||
>
|
||||
<div :style="{ height: typeof props.height === 'string' ? props.height : tableStore.table.height }">
|
||||
<vxe-table ref="tableRef" height="auto" :key="key" :data="tableStore.table.data"
|
||||
v-loading="tableStore.table.loading" v-bind="Object.assign({}, defaultAttribute, $attrs)"
|
||||
@checkbox-all="selectChangeEvent" @checkbox-change="selectChangeEvent" :showOverflow="showOverflow"
|
||||
@sort-change="handleSortChange">
|
||||
<!-- Column 组件内部是 el-table-column -->
|
||||
<template v-if="isGroup">
|
||||
<GroupColumn :column="tableStore.table.column" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<Column
|
||||
:attr="item"
|
||||
:key="key + '-column'"
|
||||
v-for="(item, key) in tableStore.table.column"
|
||||
:tree-node="item.treeNode"
|
||||
>
|
||||
<Column :attr="item" :key="key + '-column'" v-for="(item, key) in tableStore.table.column"
|
||||
:tree-node="item.treeNode">
|
||||
<!-- tableStore 预设的列 render 方案 -->
|
||||
<template v-if="item.render" #default="scope">
|
||||
<FieldRender
|
||||
:field="item"
|
||||
:row="scope.row"
|
||||
:column="scope.column"
|
||||
:index="scope.rowIndex"
|
||||
:key="
|
||||
key +
|
||||
'-' +
|
||||
item.render +
|
||||
'-' +
|
||||
(item.field ? '-' + item.field + '-' + scope.row[item.field] : '')
|
||||
"
|
||||
/>
|
||||
<FieldRender :field="item" :row="scope.row" :column="scope.column" :index="scope.rowIndex" :key="key +
|
||||
'-' +
|
||||
item.render +
|
||||
'-' +
|
||||
(item.field ? '-' + item.field + '-' + scope.row[item.field] : '')
|
||||
" />
|
||||
</template>
|
||||
</Column>
|
||||
</template>
|
||||
@@ -46,16 +27,11 @@
|
||||
</div>
|
||||
|
||||
<div v-if="tableStore.showPage" class="table-pagination">
|
||||
<el-pagination
|
||||
:currentPage="tableStore.table.params!.pageNum"
|
||||
:page-size="tableStore.table.params!.pageSize"
|
||||
:page-sizes="pageSizes"
|
||||
background
|
||||
<el-pagination :currentPage="tableStore.table.params!.pageNum" :page-size="tableStore.table.params!.pageSize"
|
||||
:page-sizes="pageSizes" background
|
||||
:layout="config.layout.shrink ? 'prev, next, jumper' : 'sizes,total, ->, prev, pager, next, jumper'"
|
||||
:total="tableStore.table.total"
|
||||
@size-change="onTableSizeChange"
|
||||
@current-change="onTableCurrentChange"
|
||||
></el-pagination>
|
||||
:total="tableStore.table.total" @size-change="onTableSizeChange"
|
||||
@current-change="onTableCurrentChange"></el-pagination>
|
||||
</div>
|
||||
<slot name="footer"></slot>
|
||||
</template>
|
||||
@@ -80,13 +56,13 @@ const key = ref(0)
|
||||
interface Props extends /* @vue-ignore */ Partial<InstanceType<typeof ElTable>> {
|
||||
isGroup?: boolean
|
||||
showOverflow?: boolean
|
||||
height?: string | boolean
|
||||
height?: string | number
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
isGroup: false,
|
||||
showOverflow: true,
|
||||
height: false
|
||||
height: undefined
|
||||
})
|
||||
onMounted(() => {
|
||||
tableStore.table.ref = tableRef.value as VxeTableInstance
|
||||
|
||||
@@ -1,197 +1,197 @@
|
||||
<template>
|
||||
|
||||
<Tree ref="treRef" :data="tree" style="height: 100%" :width="'100%'" :expanded="expanded" />
|
||||
</template>
|
||||
<!-- <div class="mb10">
|
||||
<el-button type="primary" icon="el-icon-Download" size="small" @click="exportExcelTemplate" :loading="loading">模版下载</el-button>
|
||||
<el-button type="primary" icon="el-icon-Upload" size="small">导入</el-button>
|
||||
<el-button type="primary" icon="el-icon-Download" size="small" @click="ledgerEverywhere" :loading="loading1">导出</el-button>
|
||||
</div> -->
|
||||
<script lang="ts" setup>
|
||||
import { ref, nextTick } from 'vue'
|
||||
import Tree from './index.vue'
|
||||
|
||||
import { getTerminalTree,downTerminalTemplate,exportTerminalBase } from '@/api/device-boot/Business'
|
||||
import { useConfig } from '@/stores/config'
|
||||
const VITE_FLAG = import.meta.env.VITE_NAME == 'jibei'
|
||||
defineOptions({
|
||||
name: 'govern/deviceTree'
|
||||
})
|
||||
const loading = ref(false)
|
||||
const loading1 = ref(false)
|
||||
const emit = defineEmits(['init'])
|
||||
const config = useConfig()
|
||||
const expanded: any = ref([])
|
||||
const tree = ref()
|
||||
const treRef = ref()
|
||||
const info = (id: any) => {
|
||||
expanded.value = [id]
|
||||
getTerminalTree().then(res => {
|
||||
// let arr: any[] = []
|
||||
if (VITE_FLAG) {
|
||||
res.data.forEach((item: any) => {
|
||||
item.icon = 'el-icon-Menu'
|
||||
item.plevel = item.level
|
||||
item.level = 0
|
||||
item.children.forEach((item2: any) => {
|
||||
item2.icon = 'el-icon-HomeFilled'
|
||||
|
||||
item2.plevel = item2.level
|
||||
item2.level = 100
|
||||
expanded.value.push(item2.id)
|
||||
item2.children.forEach((item3: any) => {
|
||||
item3.icon = 'el-icon-CollectionTag'
|
||||
item3.plevel = item3.level
|
||||
item3.level = 200
|
||||
item3.children.forEach((item4: any) => {
|
||||
item4.icon = 'el-icon-Flag'
|
||||
item4.plevel = item4.level
|
||||
item4.level = 300
|
||||
// arr.push(item4)
|
||||
item4.children.forEach((item5: any) => {
|
||||
item5.icon = 'el-icon-OfficeBuilding'
|
||||
item5.plevel = item5.level
|
||||
item5.level = 300
|
||||
// item5.id = item4.id
|
||||
item5.children.forEach((item6: any) => {
|
||||
item6.icon = 'el-icon-HelpFilled'
|
||||
item6.plevel = 4
|
||||
if (item6.name == '电网侧' && item6.children.length == 0) {
|
||||
item6.level = 400
|
||||
} else {
|
||||
item6.level = 400
|
||||
}
|
||||
item6.children.forEach((item7: any) => {
|
||||
item7.icon = 'el-icon-Film'
|
||||
item7.plevel = item7.level
|
||||
item7.level = 400
|
||||
item7.children.forEach((item8: any) => {
|
||||
item8.icon = 'el-icon-Collection'
|
||||
item8.plevel = item8.level
|
||||
item8.level = 500
|
||||
item8.children.forEach((item9: any) => {
|
||||
item9.icon = 'el-icon-Share'
|
||||
item9.plevel = item9.level
|
||||
item9.level = 600
|
||||
item9.children.forEach((item10: any) => {
|
||||
item10.icon = 'el-icon-Location'
|
||||
item10.plevel = item10.level
|
||||
item10.level = 700
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
} else {
|
||||
res.data.forEach((item: any) => {
|
||||
item.icon = 'el-icon-Menu'
|
||||
item.plevel = item.level
|
||||
item.level = (item.level + 1) * 100
|
||||
item.children.forEach((item2: any) => {
|
||||
item2.icon = 'el-icon-HomeFilled'
|
||||
item2.plevel = item2.level
|
||||
item2.level = (item2.level + 1) * 100
|
||||
expanded.value.push(item2.id)
|
||||
item2.children.forEach((item3: any) => {
|
||||
item3.icon = 'el-icon-CollectionTag'
|
||||
item3.plevel = item3.level
|
||||
item3.level = (item3.level + 1) * 100
|
||||
item3.children.forEach((item4: any) => {
|
||||
item4.icon = 'el-icon-Flag'
|
||||
item4.plevel = item4.level
|
||||
item4.level = (item4.level + 1) * 100
|
||||
item4.children.forEach((item5: any) => {
|
||||
item5.icon = 'el-icon-OfficeBuilding'
|
||||
item5.plevel = item5.level
|
||||
item5.level = (item5.level == 7 ? 4 : item5.level + 1) * 100
|
||||
item5.children.forEach((item6: any) => {
|
||||
item6.icon = 'el-icon-Film'
|
||||
item6.plevel = item6.level
|
||||
item6.level = (item6.level + 1) * 100
|
||||
item6.children.forEach((item7: any) => {
|
||||
item7.icon = 'el-icon-Share'
|
||||
item7.plevel = item7.level
|
||||
item7.level = (item7.level + 1) * 100
|
||||
item7.children.forEach((item8: any) => {
|
||||
item8.icon = 'el-icon-Location'
|
||||
item8.plevel = item8.level
|
||||
item8.level = (item8.level + 1) * 100
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
tree.value = res.data
|
||||
|
||||
nextTick(() => {
|
||||
treRef.value.setCurrentKey(id)
|
||||
// if (arr.length) {
|
||||
// treRef.value.treeRef.setCurrentKey(arr[0].id)
|
||||
// // 注册父组件事件
|
||||
// emit('init', {
|
||||
// level: 2,
|
||||
// ...arr[0]
|
||||
// })
|
||||
// } else {
|
||||
// emit('init')
|
||||
// }
|
||||
})
|
||||
})
|
||||
}
|
||||
// 下载模版
|
||||
const exportExcelTemplate = async() => {
|
||||
loading.value = true
|
||||
downTerminalTemplate().then((res: any) => {
|
||||
let blob = new Blob([res], {
|
||||
type: 'application/vnd.ms-excel'
|
||||
})
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
const link = document.createElement('a')
|
||||
link.href = url
|
||||
link.download = '终端台账模版'
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
link.remove()
|
||||
})
|
||||
await setTimeout(() => {
|
||||
loading.value = false
|
||||
}, 0)
|
||||
}
|
||||
// 导出台账
|
||||
const ledgerEverywhere = async() => {
|
||||
loading1.value = true
|
||||
exportTerminalBase().then((res: any) => {
|
||||
let blob = new Blob([res], {
|
||||
type: 'application/vnd.ms-excel'
|
||||
})
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
const link = document.createElement('a')
|
||||
link.href = url
|
||||
link.download = '终端台账'
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
link.remove()
|
||||
})
|
||||
await setTimeout(() => {
|
||||
loading1.value = false
|
||||
}, 0)
|
||||
}
|
||||
info('')
|
||||
|
||||
defineExpose({ info })
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.el-tree {
|
||||
background: #efeff0;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
|
||||
<Tree ref="treRef" :data="tree" style="height: 100%" :width="'100%'" :expanded="expanded" />
|
||||
</template>
|
||||
<!-- <div class="mb10">
|
||||
<el-button type="primary" icon="el-icon-Download" size="small" @click="exportExcelTemplate" :loading="loading">模版下载</el-button>
|
||||
<el-button type="primary" icon="el-icon-Upload" size="small">导入</el-button>
|
||||
<el-button type="primary" icon="el-icon-Download" size="small" @click="ledgerEverywhere" :loading="loading1">导出</el-button>
|
||||
</div> -->
|
||||
<script lang="ts" setup>
|
||||
import { ref, nextTick } from 'vue'
|
||||
import Tree from './index.vue'
|
||||
|
||||
import { getTerminalTree,downTerminalTemplate,exportTerminalBase } from '@/api/device-boot/Business'
|
||||
import { useConfig } from '@/stores/config'
|
||||
const VITE_FLAG = import.meta.env.VITE_NAME == 'jibei'
|
||||
defineOptions({
|
||||
name: 'govern/deviceTree'
|
||||
})
|
||||
const loading = ref(false)
|
||||
const loading1 = ref(false)
|
||||
const emit = defineEmits(['init'])
|
||||
const config = useConfig()
|
||||
const expanded: any = ref([])
|
||||
const tree = ref()
|
||||
const treRef = ref()
|
||||
const info = (id: any) => {
|
||||
expanded.value = [id]
|
||||
getTerminalTree().then(res => {
|
||||
// let arr: any[] = []
|
||||
if (VITE_FLAG) {
|
||||
res.data.forEach((item: any) => {
|
||||
item.icon = 'el-icon-Menu'
|
||||
item.plevel = item.level
|
||||
item.level = 0
|
||||
item.children.forEach((item2: any) => {
|
||||
item2.icon = 'el-icon-HomeFilled'
|
||||
|
||||
item2.plevel = item2.level
|
||||
item2.level = 100
|
||||
expanded.value.push(item2.id)
|
||||
item2.children.forEach((item3: any) => {
|
||||
item3.icon = 'el-icon-CollectionTag'
|
||||
item3.plevel = item3.level
|
||||
item3.level = 200
|
||||
item3.children.forEach((item4: any) => {
|
||||
item4.icon = 'el-icon-Flag'
|
||||
item4.plevel = item4.level
|
||||
item4.level = 300
|
||||
// arr.push(item4)
|
||||
item4.children.forEach((item5: any) => {
|
||||
item5.icon = 'el-icon-OfficeBuilding'
|
||||
item5.plevel = item5.level
|
||||
item5.level = 300
|
||||
// item5.id = item4.id
|
||||
item5.children.forEach((item6: any) => {
|
||||
item6.icon = 'el-icon-HelpFilled'
|
||||
item6.plevel = 4
|
||||
if (item6.name == '电网侧' && item6.children.length == 0) {
|
||||
item6.level = 400
|
||||
} else {
|
||||
item6.level = 400
|
||||
}
|
||||
item6.children.forEach((item7: any) => {
|
||||
item7.icon = 'el-icon-Film'
|
||||
item7.plevel = item7.level
|
||||
item7.level = 400
|
||||
item7.children.forEach((item8: any) => {
|
||||
item8.icon = 'el-icon-Collection'
|
||||
item8.plevel = item8.level
|
||||
item8.level = 500
|
||||
item8.children.forEach((item9: any) => {
|
||||
item9.icon = 'el-icon-Share'
|
||||
item9.plevel = item9.level
|
||||
item9.level = 600
|
||||
item9.children.forEach((item10: any) => {
|
||||
item10.icon = 'el-icon-Location'
|
||||
item10.plevel = item10.level
|
||||
item10.level = 700
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
} else {
|
||||
res.data.forEach((item: any) => {
|
||||
item.icon = 'el-icon-Menu'
|
||||
item.plevel = item.level
|
||||
item.level = (item.level + 1) * 100
|
||||
item.children.forEach((item2: any) => {
|
||||
item2.icon = 'el-icon-HomeFilled'
|
||||
item2.plevel = item2.level
|
||||
item2.level = (item2.level + 1) * 100
|
||||
expanded.value.push(item2.id)
|
||||
item2.children.forEach((item3: any) => {
|
||||
item3.icon = 'el-icon-CollectionTag'
|
||||
item3.plevel = item3.level
|
||||
item3.level = (item3.level + 1) * 100
|
||||
item3.children.forEach((item4: any) => {
|
||||
item4.icon = 'el-icon-Flag'
|
||||
item4.plevel = item4.level
|
||||
item4.level = (item4.level + 1) * 100
|
||||
item4.children.forEach((item5: any) => {
|
||||
item5.icon = 'el-icon-OfficeBuilding'
|
||||
item5.plevel = item5.level
|
||||
item5.level = (item5.level == 7 ? 4 : item5.level + 1) * 100
|
||||
item5.children.forEach((item6: any) => {
|
||||
item6.icon = 'el-icon-Film'
|
||||
item6.plevel = item6.level
|
||||
item6.level = (item6.level + 1) * 100
|
||||
item6.children.forEach((item7: any) => {
|
||||
item7.icon = 'el-icon-Share'
|
||||
item7.plevel = item7.level
|
||||
item7.level = (item7.level + 1) * 100
|
||||
item7.children.forEach((item8: any) => {
|
||||
item8.icon = 'el-icon-Location'
|
||||
item8.plevel = item8.level
|
||||
item8.level = (item8.level + 1) * 100
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
tree.value = res.data
|
||||
|
||||
nextTick(() => {
|
||||
treRef.value.setCurrentKey(id)
|
||||
// if (arr.length) {
|
||||
// treRef.value.treeRef.setCurrentKey(arr[0].id)
|
||||
// // 注册父组件事件
|
||||
// emit('init', {
|
||||
// level: 2,
|
||||
// ...arr[0]
|
||||
// })
|
||||
// } else {
|
||||
// emit('init')
|
||||
// }
|
||||
})
|
||||
})
|
||||
}
|
||||
// 下载模版
|
||||
const exportExcelTemplate = async() => {
|
||||
loading.value = true
|
||||
downTerminalTemplate().then((res: any) => {
|
||||
let blob = new Blob([res], {
|
||||
type: 'application/vnd.ms-excel'
|
||||
})
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
const link = document.createElement('a')
|
||||
link.href = url
|
||||
link.download = '终端台账模版'
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
link.remove()
|
||||
})
|
||||
await setTimeout(() => {
|
||||
loading.value = false
|
||||
}, 0)
|
||||
}
|
||||
// 导出台账
|
||||
const ledgerEverywhere = async() => {
|
||||
loading1.value = true
|
||||
exportTerminalBase().then((res: any) => {
|
||||
let blob = new Blob([res], {
|
||||
type: 'application/vnd.ms-excel'
|
||||
})
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
const link = document.createElement('a')
|
||||
link.href = url
|
||||
link.download = '终端台账'
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
link.remove()
|
||||
})
|
||||
await setTimeout(() => {
|
||||
loading1.value = false
|
||||
}, 0)
|
||||
}
|
||||
info('')
|
||||
|
||||
defineExpose({ info })
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.el-tree {
|
||||
background: #efeff0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user