修改项目树问题 绘制稳态治理分析页面
This commit is contained in:
guanj
@@ -3,15 +3,15 @@
|
||||
<div class="mt10 mr10" style="display: flex; justify-content: end" v-if="showBut">
|
||||
<el-button type="primary" icon="el-icon-Select" @click="save" :loading="loading">保存</el-button>
|
||||
</div>
|
||||
<Icon
|
||||
<!-- <Icon
|
||||
v-show="menuCollapse"
|
||||
@click="onMenuCollapse"
|
||||
:name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
|
||||
:class="menuCollapse ? 'unfold' : ''"
|
||||
size="18"
|
||||
size="18px"
|
||||
class="fold ml10 mt20 menu-collapse"
|
||||
style="cursor: pointer"
|
||||
/>
|
||||
/> -->
|
||||
<div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1 }">
|
||||
<div style="display: flex; align-items: center" class="mb10">
|
||||
<el-input maxlength="32" v-model.trim="filterText" placeholder="请输入内容" clearable>
|
||||
@@ -23,19 +23,15 @@
|
||||
<template #content>
|
||||
<span>台账推送</span>
|
||||
</template>
|
||||
|
||||
<Icon
|
||||
name="el-icon-Promotion"
|
||||
size="20"
|
||||
size="20px"
|
||||
class="fold ml10 menu-collapse"
|
||||
style="cursor: pointer"
|
||||
:style="{ color: config.getColorVal('elementUiPrimary') }"
|
||||
@click="onAdd"
|
||||
/>
|
||||
</el-tooltip>
|
||||
<!-- <Icon @click='onMenuCollapse' :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'" v-else
|
||||
:class="menuCollapse ? 'unfold' : ''" size='18' class='fold ml10 menu-collapse'
|
||||
style='cursor: pointer' v-if='props.canExpand' /> -->
|
||||
</div>
|
||||
|
||||
<el-tree
|
||||
@@ -50,13 +46,13 @@
|
||||
node-key="id"
|
||||
v-bind="$attrs"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<template #default="{ node, data: nodeData }">
|
||||
<span class="custom-tree-node">
|
||||
<Icon
|
||||
:name="data.icon"
|
||||
:name="nodeData.icon"
|
||||
style="font-size: 16px"
|
||||
:style="{ color: data.color }"
|
||||
v-if="data.icon"
|
||||
:style="{ color: nodeData.color }"
|
||||
v-if="nodeData.icon"
|
||||
/>
|
||||
<span style="margin-left: 4px">{{ node.label }}</span>
|
||||
</span>
|
||||
@@ -69,14 +65,11 @@
|
||||
<script lang="ts" setup>
|
||||
import useCurrentInstance from '@/utils/useCurrentInstance'
|
||||
import { ElTree } from 'element-plus'
|
||||
|
||||
import { ref, watch } from 'vue'
|
||||
|
||||
import { useConfig } from '@/stores/config'
|
||||
import { createTreeFilterNode } from './govern/treeFilterUtils'
|
||||
|
||||
defineOptions({
|
||||
name: 'govern/tree'
|
||||
})
|
||||
defineOptions({ name: 'govern/allocation', inheritAttrs: false })
|
||||
|
||||
interface Props {
|
||||
width?: string
|
||||
@@ -85,7 +78,7 @@ interface Props {
|
||||
showBut?: boolean
|
||||
height?: number
|
||||
}
|
||||
const loading = ref(false)
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
width: '280px',
|
||||
canExpand: true,
|
||||
@@ -93,69 +86,34 @@ const props = withDefaults(defineProps<Props>(), {
|
||||
showBut: true,
|
||||
height: 267
|
||||
})
|
||||
|
||||
const emit = defineEmits(['checkTreeNodeChange', 'onAdd', 'checkChange'])
|
||||
|
||||
const config = useConfig()
|
||||
const { proxy } = useCurrentInstance()
|
||||
const menuCollapse = ref(false)
|
||||
const filterText = ref('')
|
||||
const defaultProps = {
|
||||
label: 'name',
|
||||
value: 'id'
|
||||
}
|
||||
const emit = defineEmits(['checkTreeNodeChange', 'onAdd', 'checkChange'])
|
||||
watch(filterText, val => {
|
||||
treeRef.value!.filter(val)
|
||||
})
|
||||
const loading = ref(false)
|
||||
const defaultProps = { label: 'name', value: 'id' }
|
||||
const filterNode = createTreeFilterNode()
|
||||
|
||||
watch(filterText, val => treeRef.value?.filter(val))
|
||||
|
||||
const onMenuCollapse = () => {
|
||||
menuCollapse.value = !menuCollapse.value
|
||||
proxy.eventBus.emit('cnTreeCollapse', menuCollapse)
|
||||
}
|
||||
|
||||
const save = () => {
|
||||
loading.value = true
|
||||
emit('checkChange')
|
||||
}
|
||||
const filterNode = (value: string, data: any, node: any) => {
|
||||
console.log(value, data, node, 'filterNode')
|
||||
if (!value) return true
|
||||
// return data.name.includes(value)
|
||||
if (data.name) {
|
||||
return chooseNode(value, data, node)
|
||||
}
|
||||
}
|
||||
|
||||
// 过滤父节点 / 子节点 (如果输入的参数是父节点且能匹配，则返回该节点以及其下的所有子节点；如果参数是子节点，则返回该节点的父节点。name是中文字符，enName是英文字符.
|
||||
const chooseNode = (value: string, data: any, node: any) => {
|
||||
if (data.name.indexOf(value) !== -1) {
|
||||
return true
|
||||
}
|
||||
const level = node.level
|
||||
// 如果传入的节点本身就是一级节点就不用校验了
|
||||
if (level === 1) {
|
||||
return false
|
||||
}
|
||||
// 先取当前节点的父节点
|
||||
let parentData = node.parent
|
||||
// 遍历当前节点的父节点
|
||||
let index = 0
|
||||
while (index < level - 1) {
|
||||
// 如果匹配到直接返回，此处name值是中文字符，enName是英文字符。判断匹配中英文过滤
|
||||
if (parentData.data.name.indexOf(value) !== -1) {
|
||||
return true
|
||||
}
|
||||
// 否则的话再往上一层做匹配
|
||||
parentData = parentData.parent
|
||||
index++
|
||||
}
|
||||
// 没匹配到返回false
|
||||
return false
|
||||
}
|
||||
const checkTreeNodeChange = () => {
|
||||
// console.log(treeRef.value?.getCheckedNodes(), "ikkkkkiisiiisis");
|
||||
emit('checkTreeNodeChange', treeRef.value?.getCheckedNodes())
|
||||
}
|
||||
|
||||
const onAdd = () => {
|
||||
emit('onAdd')
|
||||
}
|
||||
const onAdd = () => emit('onAdd')
|
||||
|
||||
const treeRef = ref<InstanceType<typeof ElTree>>()
|
||||
defineExpose({ treeRef, loading })
|
||||
|
||||
@@ -1,27 +1,43 @@
|
||||
<template>
|
||||
<div :style="{ width: menuCollapse ? '40px' : props.width }" style='transition: all 0.3s; overflow: hidden;'>
|
||||
<Icon v-show='menuCollapse' @click='onMenuCollapse' :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
|
||||
:class="menuCollapse ? 'unfold' : ''" size='18' class='fold ml10 mt20 menu-collapse'
|
||||
style='cursor: pointer' />
|
||||
<div class='cn-tree' :style='{ opacity: menuCollapse ? 0 : 1 }'>
|
||||
<div style='display: flex; align-items: center' class='mb10'>
|
||||
<el-input maxlength="32" v-model.trim='filterText' placeholder='请输入内容' clearable>
|
||||
<div :style="{ width: menuCollapse ? '40px' : props.width }" style="transition: all 0.3s; overflow: hidden">
|
||||
<!-- <Icon
|
||||
v-show="menuCollapse"
|
||||
@click="onMenuCollapse"
|
||||
:name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
|
||||
:class="menuCollapse ? 'unfold' : ''"
|
||||
size="18px"
|
||||
class="fold ml10 mt20 menu-collapse"
|
||||
style="cursor: pointer"
|
||||
/> -->
|
||||
<div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1 }">
|
||||
<div style="display: flex; align-items: center" class="mb10">
|
||||
<el-input maxlength="32" v-model.trim="filterText" placeholder="请输入内容" clearable>
|
||||
<template #prefix>
|
||||
<Icon name='el-icon-Search' style='font-size: 16px' />
|
||||
<Icon name="el-icon-Search" style="font-size: 16px" />
|
||||
</template>
|
||||
</el-input>
|
||||
<!-- <Icon @click='onMenuCollapse' :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
|
||||
:class="menuCollapse ? 'unfold' : ''" size='18' class='fold ml10 menu-collapse'
|
||||
style='cursor: pointer' v-if='props.canExpand' /> -->
|
||||
</div>
|
||||
<el-tree :style="{ height: 'calc(100vh - 230px)' }"
|
||||
style=' overflow: auto;' ref='treeRef' :props='defaultProps' highlight-current :default-expand-all="false"
|
||||
@check-change="checkTreeNodeChange" :filter-node-method='filterNode' node-key='id' v-bind='$attrs'>
|
||||
<template #default='{ node, data }'>
|
||||
<span class='custom-tree-node'>
|
||||
<Icon :name='data.icon' style='font-size: 16px' :style='{ color: data.color }'
|
||||
v-if='data.icon' />
|
||||
<span style='margin-left: 4px'>{{ node.label }}</span>
|
||||
<el-tree
|
||||
:style="{ height: 'calc(100vh - 230px)' }"
|
||||
style="overflow: auto"
|
||||
ref="treeRef"
|
||||
:props="defaultProps"
|
||||
highlight-current
|
||||
:default-expand-all="false"
|
||||
@check-change="checkTreeNodeChange"
|
||||
:filter-node-method="filterNode"
|
||||
node-key="id"
|
||||
v-bind="$attrs"
|
||||
>
|
||||
<template #default="{ node, data: nodeData }">
|
||||
<span class="custom-tree-node">
|
||||
<Icon
|
||||
:name="nodeData.icon"
|
||||
style="font-size: 16px"
|
||||
:style="{ color: nodeData.color }"
|
||||
v-if="nodeData.icon"
|
||||
/>
|
||||
<span style="margin-left: 4px">{{ node.label }}</span>
|
||||
</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
@@ -29,14 +45,13 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
<script lang="ts" setup>
|
||||
import useCurrentInstance from '@/utils/useCurrentInstance'
|
||||
import { ElTree } from 'element-plus'
|
||||
import { ref, watch } from 'vue'
|
||||
import { createTreeFilterNode } from './govern/treeFilterUtils'
|
||||
|
||||
defineOptions({
|
||||
name: 'govern/tree'
|
||||
})
|
||||
defineOptions({ name: 'govern/cloudDevice', inheritAttrs: false })
|
||||
|
||||
interface Props {
|
||||
width?: string
|
||||
@@ -47,66 +62,31 @@ const props = withDefaults(defineProps<Props>(), {
|
||||
width: '280px',
|
||||
canExpand: true
|
||||
})
|
||||
|
||||
const emit = defineEmits(['checkTreeNodeChange'])
|
||||
|
||||
const { proxy } = useCurrentInstance()
|
||||
const menuCollapse = ref(false)
|
||||
const filterText = ref('')
|
||||
const defaultProps = {
|
||||
label: 'name',
|
||||
value: 'id'
|
||||
}
|
||||
const emit = defineEmits(['checkTreeNodeChange'])
|
||||
watch(filterText, val => {
|
||||
treeRef.value!.filter(val)
|
||||
|
||||
})
|
||||
const defaultProps = { label: 'name', value: 'id' }
|
||||
const filterNode = createTreeFilterNode()
|
||||
|
||||
watch(filterText, val => treeRef.value?.filter(val))
|
||||
|
||||
const onMenuCollapse = () => {
|
||||
menuCollapse.value = !menuCollapse.value
|
||||
proxy.eventBus.emit('cnTreeCollapse', menuCollapse)
|
||||
}
|
||||
const filterNode = (value: string, data: any, node: any) => {
|
||||
if (!value) return true
|
||||
// return data.name.includes(value)
|
||||
if (data.name) {
|
||||
|
||||
return chooseNode(value, data, node)
|
||||
}
|
||||
}
|
||||
|
||||
// 过滤父节点 / 子节点 (如果输入的参数是父节点且能匹配，则返回该节点以及其下的所有子节点；如果参数是子节点，则返回该节点的父节点。name是中文字符，enName是英文字符.
|
||||
const chooseNode = (value: string, data: any, node: any) => {
|
||||
if (data.name.indexOf(value) !== -1) {
|
||||
return true
|
||||
}
|
||||
const level = node.level
|
||||
// 如果传入的节点本身就是一级节点就不用校验了
|
||||
if (level === 1) {
|
||||
return false
|
||||
}
|
||||
// 先取当前节点的父节点
|
||||
let parentData = node.parent
|
||||
// 遍历当前节点的父节点
|
||||
let index = 0
|
||||
while (index < level - 1) {
|
||||
// 如果匹配到直接返回，此处name值是中文字符，enName是英文字符。判断匹配中英文过滤
|
||||
if (parentData.data.name.indexOf(value) !== -1) {
|
||||
return true
|
||||
}
|
||||
// 否则的话再往上一层做匹配
|
||||
parentData = parentData.parent
|
||||
index++
|
||||
}
|
||||
// 没匹配到返回false
|
||||
return false
|
||||
}
|
||||
const checkTreeNodeChange = () => {
|
||||
// console.log(treeRef.value?.getCheckedNodes(), "ikkkkkiisiiisis");
|
||||
emit('checkTreeNodeChange', treeRef.value?.getCheckedNodes())
|
||||
}
|
||||
|
||||
const treeRef = ref<InstanceType<typeof ElTree>>()
|
||||
defineExpose({ treeRef })
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
<style lang="scss" scoped>
|
||||
.cn-tree {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
|
||||
@@ -1,19 +1,17 @@
|
||||
<!-- 设备管理使用折叠面板渲染多个tree -->
|
||||
<template>
|
||||
<div :style="{ width: menuCollapse ? '40px' : props.width }" style="display: flex; overflow: hidden">
|
||||
<Icon
|
||||
<!-- <Icon
|
||||
v-show="menuCollapse"
|
||||
@click="onMenuCollapse"
|
||||
:name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
|
||||
:class="menuCollapse ? 'unfold' : ''"
|
||||
size="18"
|
||||
size="18px"
|
||||
class="fold ml10 mt20 menu-collapse"
|
||||
style="cursor: pointer"
|
||||
/>
|
||||
/> -->
|
||||
<div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1 }">
|
||||
<div style="display: flex; align-items: center" class="mb10">
|
||||
<!-- <el-form-item> -->
|
||||
|
||||
<el-input
|
||||
maxlength="32"
|
||||
v-model.trim="filterText"
|
||||
@@ -36,39 +34,33 @@
|
||||
</template>
|
||||
</el-input>
|
||||
|
||||
<!-- </el-form-item> -->
|
||||
<Icon
|
||||
<!-- <Icon
|
||||
@click="onMenuCollapse"
|
||||
:name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
|
||||
:class="menuCollapse ? 'unfold' : ''"
|
||||
size="18"
|
||||
size="18px"
|
||||
class="fold ml10 menu-collapse"
|
||||
style="cursor: pointer"
|
||||
v-if="props.canExpand"
|
||||
/>
|
||||
/> -->
|
||||
</div>
|
||||
|
||||
<el-collapse
|
||||
:accordion="true"
|
||||
v-model.trim="activeName"
|
||||
v-model="activeName"
|
||||
style="flex: 1; height: 100%"
|
||||
@change="changeDevice"
|
||||
v-if="treeType == '1'"
|
||||
v-loading="loading"
|
||||
>
|
||||
<el-collapse-item title="治理设备" name="0" v-if="zlDeviceData.length != 0">
|
||||
<el-select v-model.trim="process" clearable placeholder="请选择状态" class="mb10">
|
||||
<el-option label="功能调试" value="2"></el-option>
|
||||
<el-option label="出厂调试" value="3"></el-option>
|
||||
<el-option label="正式投运" value="4"></el-option>
|
||||
<el-collapse-item title="治理设备" name="0" v-if="zlDeviceData.length">
|
||||
<el-select v-model="process" clearable placeholder="请选择状态" class="mb10">
|
||||
<el-option label="功能调试" value="2" />
|
||||
<el-option label="出厂调试" value="3" />
|
||||
<el-option label="正式投运" value="4" />
|
||||
</el-select>
|
||||
<el-tree
|
||||
:style="{
|
||||
height:
|
||||
treeType.length != 0
|
||||
? `calc(100vh - 380px - ${props.height}px)`
|
||||
: 'calc(100vh - 278px)'
|
||||
}"
|
||||
:style="{ height: governTreeHeight }"
|
||||
ref="treeRef1"
|
||||
:props="defaultProps"
|
||||
highlight-current
|
||||
@@ -79,27 +71,22 @@
|
||||
:data="zlDevList"
|
||||
style="overflow: auto"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<template #default="{ node, data: nodeData }">
|
||||
<span class="custom-tree-node">
|
||||
<Icon
|
||||
:name="data.icon"
|
||||
:name="nodeData.icon"
|
||||
style="font-size: 16px"
|
||||
:style="{ color: data.color }"
|
||||
v-if="data.icon"
|
||||
:style="{ color: nodeData.color }"
|
||||
v-if="nodeData.icon"
|
||||
/>
|
||||
<span style="margin-left: 4px">{{ node.label }}</span>
|
||||
</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="便携式设备" name="1" v-if="bxsDeviceData.length != 0">
|
||||
<el-collapse-item title="便携式设备" name="1" v-if="bxsDeviceData.length">
|
||||
<el-tree
|
||||
:style="{
|
||||
height:
|
||||
zlDeviceData.length != 0
|
||||
? `calc(100vh - 340px - ${props.height}px)`
|
||||
: 'calc(100vh - 238px)'
|
||||
}"
|
||||
:style="{ height: otherTreeHeight }"
|
||||
ref="treeRef2"
|
||||
:props="defaultProps"
|
||||
highlight-current
|
||||
@@ -110,27 +97,22 @@
|
||||
v-bind="$attrs"
|
||||
style="overflow: auto"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<template #default="{ node, data: nodeData }">
|
||||
<span class="custom-tree-node">
|
||||
<Icon
|
||||
:name="data.icon"
|
||||
:name="nodeData.icon"
|
||||
style="font-size: 16px"
|
||||
:style="{ color: data.color }"
|
||||
v-if="data.icon"
|
||||
:style="{ color: nodeData.color }"
|
||||
v-if="nodeData.icon"
|
||||
/>
|
||||
<span style="margin-left: 4px">{{ node.label }}</span>
|
||||
</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="监测设备" name="2" v-if="frontDeviceData.length != 0">
|
||||
<el-collapse-item title="监测设备" name="2" v-if="frontDeviceData.length">
|
||||
<el-tree
|
||||
:style="{
|
||||
height:
|
||||
zlDeviceData.length != 0
|
||||
? `calc(100vh - 340px - ${props.height}px)`
|
||||
: 'calc(100vh - 238px)'
|
||||
}"
|
||||
:style="{ height: otherTreeHeight }"
|
||||
ref="treeRef3"
|
||||
:props="defaultProps"
|
||||
highlight-current
|
||||
@@ -141,13 +123,13 @@
|
||||
v-bind="$attrs"
|
||||
style="overflow: auto"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<template #default="{ node, data: nodeData }">
|
||||
<span class="custom-tree-node">
|
||||
<Icon
|
||||
:name="data.icon"
|
||||
:name="nodeData.icon"
|
||||
style="font-size: 16px"
|
||||
:style="{ color: data.color }"
|
||||
v-if="data.icon"
|
||||
:style="{ color: nodeData.color }"
|
||||
v-if="nodeData.icon"
|
||||
/>
|
||||
<span style="margin-left: 4px">{{ node.label }}</span>
|
||||
</span>
|
||||
@@ -157,24 +139,24 @@
|
||||
</el-collapse>
|
||||
<div v-if="treeType == '2'" v-loading="loading">
|
||||
<el-tree
|
||||
:style="{ height: `calc(100vh - 188px - ${props.height}px )` }"
|
||||
:style="{ height: engineeringTreeHeight }"
|
||||
ref="treeRef4"
|
||||
:props="defaultProps"
|
||||
highlight-current
|
||||
:filter-node-method="filterNode"
|
||||
node-key="id"
|
||||
v-bind="$attrs"
|
||||
:data="data"
|
||||
:data="props.data"
|
||||
style="overflow: auto"
|
||||
:default-expand-all="false"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<template #default="{ node, data: nodeData }">
|
||||
<span class="custom-tree-node">
|
||||
<Icon
|
||||
:name="data.icon"
|
||||
:name="nodeData.icon"
|
||||
style="font-size: 16px"
|
||||
:style="{ color: data.color }"
|
||||
v-if="data.icon"
|
||||
:style="{ color: nodeData.color }"
|
||||
v-if="nodeData.icon"
|
||||
/>
|
||||
<span style="margin-left: 4px">{{ node.label }}</span>
|
||||
</span>
|
||||
@@ -187,273 +169,218 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import useCurrentInstance from '@/utils/useCurrentInstance'
|
||||
import { ElTree } from 'element-plus'
|
||||
import { ref, watch, defineEmits, onMounted, nextTick } from 'vue'
|
||||
import { ElTree, type CollapseModelValue } from 'element-plus'
|
||||
import { ref, watch, onMounted, nextTick, computed } from 'vue'
|
||||
import { collectDeviceLeaves } from './govern/lineTreeUtils'
|
||||
import { collectDeviceApiLeaves } from './govern/deviceTreeUtils'
|
||||
|
||||
defineOptions({
|
||||
name: 'govern/tree'
|
||||
name: 'govern/tree',
|
||||
inheritAttrs: false
|
||||
})
|
||||
|
||||
const emit = defineEmits(['changeDeviceType', 'changeTreeType'])
|
||||
|
||||
interface Props {
|
||||
width?: string
|
||||
canExpand?: boolean
|
||||
type?: string
|
||||
data?: any
|
||||
data?: any[]
|
||||
height?: number
|
||||
engineering: boolean
|
||||
engineering?: boolean
|
||||
/** line: getLineTree 四层叶子；device: getDeviceTree 三层叶子 */
|
||||
leafMode?: 'line' | 'device'
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
width: '280px',
|
||||
canExpand: true,
|
||||
type: '',
|
||||
data: [],
|
||||
data: () => [],
|
||||
height: 0,
|
||||
engineering: false
|
||||
engineering: false,
|
||||
leafMode: 'line'
|
||||
})
|
||||
|
||||
const treeType = ref('1')
|
||||
const options = [
|
||||
{
|
||||
label: '设备',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
label: '工程',
|
||||
value: '2'
|
||||
}
|
||||
{ label: '设备', value: '1' },
|
||||
{ label: '工程', value: '2' }
|
||||
]
|
||||
|
||||
const { proxy } = useCurrentInstance()
|
||||
const menuCollapse = ref(false)
|
||||
const activeName = ref('0')
|
||||
const filterText = ref('')
|
||||
const defaultProps = {
|
||||
label: 'name',
|
||||
value: 'id'
|
||||
}
|
||||
const process = ref('')
|
||||
//治理设备数据
|
||||
const zlDeviceData = ref([])
|
||||
const zlDevList = ref<any>([])
|
||||
//便携式设备数据
|
||||
const bxsDeviceData = ref([])
|
||||
//前置设备数据
|
||||
const frontDeviceData = ref([])
|
||||
const loading = ref(false)
|
||||
|
||||
const defaultProps = { label: 'name', value: 'id' }
|
||||
|
||||
const zlDeviceData = ref<any[]>([])
|
||||
const zlDevList = ref<any[]>([])
|
||||
const bxsDeviceData = ref<any[]>([])
|
||||
const frontDeviceData = ref<any[]>([])
|
||||
|
||||
const governTreeHeight = computed(() => `calc(100vh - 380px - ${props.height}px)`)
|
||||
const otherTreeHeight = computed(() =>
|
||||
zlDeviceData.value.length ? `calc(100vh - 340px - ${props.height}px)` : `calc(100vh - 238px - ${props.height}px)`
|
||||
)
|
||||
const engineeringTreeHeight = computed(() => `calc(100vh - 188px - ${props.height}px)`)
|
||||
|
||||
const treeRef1 = ref<InstanceType<typeof ElTree>>()
|
||||
const treeRef2 = ref<InstanceType<typeof ElTree>>()
|
||||
const treeRef3 = ref<InstanceType<typeof ElTree>>()
|
||||
const treeRef4 = ref<InstanceType<typeof ElTree>>()
|
||||
|
||||
defineExpose({ treeRef1, treeRef2, treeRef3, treeRef4 })
|
||||
|
||||
function splitTreeData(val: any[]) {
|
||||
zlDeviceData.value = []
|
||||
bxsDeviceData.value = []
|
||||
frontDeviceData.value = []
|
||||
|
||||
val.forEach(item => {
|
||||
if (item.name === '治理设备') {
|
||||
zlDeviceData.value = item.children ?? []
|
||||
} else if (item.name === '便携式设备') {
|
||||
bxsDeviceData.value = item.children ?? []
|
||||
} else if (item.name === '监测设备') {
|
||||
frontDeviceData.value = item.children ?? []
|
||||
}
|
||||
})
|
||||
|
||||
zlDevList.value = filterProcess(JSON.parse(JSON.stringify(zlDeviceData.value)))
|
||||
}
|
||||
|
||||
function filterProcess(nodes: any[]): any[] {
|
||||
if (!process.value) return nodes
|
||||
|
||||
return nodes
|
||||
.map(node => {
|
||||
const children = node.children ? filterProcess(node.children) : []
|
||||
if (node.process == process.value || children.length > 0) {
|
||||
return { ...node, children }
|
||||
}
|
||||
return null
|
||||
})
|
||||
.filter(Boolean)
|
||||
}
|
||||
|
||||
function getActiveTreeRef() {
|
||||
if (treeType.value === '2') return treeRef4.value
|
||||
if (activeName.value === '0') return treeRef1.value
|
||||
if (activeName.value === '1') return treeRef2.value
|
||||
return treeRef3.value
|
||||
}
|
||||
|
||||
function resolveActiveName() {
|
||||
if (zlDeviceData.value.length) return '0'
|
||||
if (bxsDeviceData.value.length) return '1'
|
||||
if (frontDeviceData.value.length) return '2'
|
||||
return ''
|
||||
}
|
||||
|
||||
function selectDevicePanel(panelName: string, node?: any) {
|
||||
if (!node) return
|
||||
emit('changeDeviceType', panelName, node)
|
||||
nextTick(() => {
|
||||
getActiveTreeRef()?.setCurrentKey(node.id)
|
||||
})
|
||||
}
|
||||
|
||||
const changeDevice = (val: CollapseModelValue) => {
|
||||
if (Array.isArray(val) || val == null || val === '') return
|
||||
const panelName = String(val)
|
||||
const collectLeaves = props.leafMode === 'device' ? collectDeviceApiLeaves : collectDeviceLeaves
|
||||
const { govern, portable, monitor } = collectLeaves(
|
||||
zlDevList.value,
|
||||
bxsDeviceData.value,
|
||||
frontDeviceData.value
|
||||
)
|
||||
|
||||
const panelMap: Record<string, { nodes: any[]; clearOthers: any[][] }> = {
|
||||
'0': { nodes: govern, clearOthers: [portable, monitor] },
|
||||
'1': { nodes: portable, clearOthers: [govern, monitor] },
|
||||
'2': { nodes: monitor, clearOthers: [govern, portable] }
|
||||
}
|
||||
|
||||
const panel = panelMap[panelName]
|
||||
if (!panel) return
|
||||
|
||||
panel.clearOthers.forEach(list => list.forEach(item => (item.checked = false)))
|
||||
selectDevicePanel(panelName, panel.nodes[0])
|
||||
}
|
||||
|
||||
const setActiveName = () => {
|
||||
activeName.value = resolveActiveName()
|
||||
if (activeName.value) {
|
||||
nextTick(() => changeDevice(activeName.value))
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.data,
|
||||
(val, oldVal) => {
|
||||
if (val && val.length != 0) {
|
||||
val.map((item: any) => {
|
||||
if (item.name == '治理设备') {
|
||||
zlDeviceData.value = []
|
||||
item.children.map((vv: any) => {
|
||||
zlDeviceData.value.push(vv)
|
||||
})
|
||||
zlDevList.value = JSON.parse(JSON.stringify(zlDeviceData.value))
|
||||
} else if (item.name == '便携式设备') {
|
||||
bxsDeviceData.value = []
|
||||
item.children.map((vv: any) => {
|
||||
bxsDeviceData.value.push(vv)
|
||||
})
|
||||
} else if (item.name == '监测设备') {
|
||||
frontDeviceData.value = []
|
||||
|
||||
item.children.map((vv: any) => {
|
||||
frontDeviceData.value.push(vv)
|
||||
})
|
||||
}
|
||||
})
|
||||
val => {
|
||||
if (!val?.length) return
|
||||
splitTreeData(val)
|
||||
if (treeType.value === '1') {
|
||||
nextTick(() => setActiveName())
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
{ immediate: true, deep: true }
|
||||
)
|
||||
|
||||
watch(filterText, val => {
|
||||
if (treeType.value == '2') {
|
||||
treeRef4.value!.filter(val)
|
||||
} else if (activeName.value == '0') {
|
||||
treeRef1.value!.filter(val)
|
||||
} else if (activeName.value == '1') {
|
||||
treeRef2.value!.filter(val)
|
||||
} else {
|
||||
treeRef3.value!.filter(val)
|
||||
getActiveTreeRef()?.filter(val)
|
||||
})
|
||||
|
||||
watch(process, () => {
|
||||
zlDevList.value = filterProcess(JSON.parse(JSON.stringify(zlDeviceData.value)))
|
||||
if (activeName.value === '0') {
|
||||
nextTick(() => changeDevice(activeName.value))
|
||||
}
|
||||
})
|
||||
watch(process, val => {
|
||||
if (val == '' || val == undefined) {
|
||||
zlDevList.value = JSON.parse(JSON.stringify(zlDeviceData.value))
|
||||
console.log('🚀 ~ zlDevList.value:', zlDeviceData.value)
|
||||
} else {
|
||||
zlDevList.value = filterProcess(JSON.parse(JSON.stringify(zlDeviceData.value)))
|
||||
}
|
||||
setTimeout(() => {
|
||||
changeDevice(activeName.value)
|
||||
}, 0)
|
||||
})
|
||||
function filterProcess(nodes: any) {
|
||||
if (process.value == '') {
|
||||
return nodes
|
||||
}
|
||||
return nodes
|
||||
.map(node => {
|
||||
// 递归处理子节点
|
||||
const children = node.children ? filterProcess(node.children) : []
|
||||
|
||||
// 如果当前节点的process=4，或者有子节点满足条件，则保留当前节点
|
||||
if (node.process == process.value || children.length > 0) {
|
||||
return {
|
||||
...node,
|
||||
children: children
|
||||
}
|
||||
}
|
||||
|
||||
// 否则过滤掉当前节点
|
||||
return null
|
||||
})
|
||||
.filter(Boolean) // 移除null节点
|
||||
}
|
||||
const onMenuCollapse = () => {
|
||||
menuCollapse.value = !menuCollapse.value
|
||||
proxy.eventBus.emit('cnTreeCollapse', menuCollapse)
|
||||
}
|
||||
const filterNode = (value: string, data: any, node: any) => {
|
||||
|
||||
const filterNode = (value: string, data: any, node: any): boolean => {
|
||||
if (!value) return true
|
||||
// return data.name.includes(value)
|
||||
if (data.name) {
|
||||
return chooseNode(value, data, node)
|
||||
}
|
||||
if (!data.name) return false
|
||||
return chooseNode(value, data, node)
|
||||
}
|
||||
|
||||
// 过滤父节点 / 子节点 (如果输入的参数是父节点且能匹配，则返回该节点以及其下的所有子节点；如果参数是子节点，则返回该节点的父节点。name是中文字符，enName是英文字符.
|
||||
const chooseNode = (value: string, data: any, node: any) => {
|
||||
if (data.name.indexOf(value) !== -1) {
|
||||
return true
|
||||
}
|
||||
const chooseNode = (value: string, data: any, node: any): boolean => {
|
||||
if (data.name.indexOf(value) !== -1) return true
|
||||
|
||||
const level = node.level
|
||||
// 如果传入的节点本身就是一级节点就不用校验了
|
||||
if (level === 1) {
|
||||
return false
|
||||
}
|
||||
// 先取当前节点的父节点
|
||||
if (level === 1) return false
|
||||
|
||||
let parentData = node.parent
|
||||
// 遍历当前节点的父节点
|
||||
let index = 0
|
||||
while (index < level - 1) {
|
||||
// 如果匹配到直接返回，此处name值是中文字符，enName是英文字符。判断匹配中英文过滤
|
||||
if (parentData.data.name.indexOf(value) !== -1) {
|
||||
return true
|
||||
}
|
||||
// 否则的话再往上一层做匹配
|
||||
for (let i = 0; i < level - 1; i++) {
|
||||
if (parentData?.data?.name?.indexOf(value) !== -1) return true
|
||||
parentData = parentData.parent
|
||||
index++
|
||||
}
|
||||
// 没匹配到返回false
|
||||
return false
|
||||
}
|
||||
|
||||
const changeDevice = (val: any) => {
|
||||
let arr1: any = []
|
||||
|
||||
//zlDeviceData
|
||||
|
||||
zlDevList.value.forEach((item: any) => {
|
||||
item.children.forEach((item2: any) => {
|
||||
item2.children.forEach((item3: any) => {
|
||||
arr1.push(item3)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
let arr2: any = []
|
||||
bxsDeviceData.value.forEach((item: any) => {
|
||||
// item.children.forEach((item2: any) => {
|
||||
arr2.push(item)
|
||||
// })
|
||||
})
|
||||
let arr3: any = []
|
||||
frontDeviceData.value.forEach((item: any) => {
|
||||
item.children.forEach((item2: any) => {
|
||||
item2.children.forEach((item3: any) => {
|
||||
arr3.push(item3)
|
||||
})
|
||||
})
|
||||
})
|
||||
if (val == '0') {
|
||||
arr2.map((item: any) => {
|
||||
item.checked = false
|
||||
})
|
||||
|
||||
emit('changeDeviceType', activeName.value, arr1[0])
|
||||
setTimeout(() => {
|
||||
treeRef1.value?.setCurrentKey(arr1[0]?.id)
|
||||
}, 100)
|
||||
}
|
||||
if (val == '1') {
|
||||
arr1.map((item: any) => {
|
||||
item.checked = false
|
||||
})
|
||||
emit('changeDeviceType', activeName.value, arr2[0])
|
||||
setTimeout(() => {
|
||||
treeRef2.value?.setCurrentKey(arr2[0]?.id)
|
||||
}, 100)
|
||||
}
|
||||
if (val == '2') {
|
||||
arr3.map((item: any) => {
|
||||
item.checked = false
|
||||
})
|
||||
|
||||
emit('changeDeviceType', activeName.value, arr3[0])
|
||||
setTimeout(() => {
|
||||
treeRef3.value?.setCurrentKey(arr3[0]?.id)
|
||||
}, 100)
|
||||
}
|
||||
}
|
||||
//治理
|
||||
const treeRef1 = ref<InstanceType<typeof ElTree>>()
|
||||
//便携式
|
||||
const treeRef2 = ref<InstanceType<typeof ElTree>>()
|
||||
//前置
|
||||
const treeRef3 = ref<InstanceType<typeof ElTree>>()
|
||||
const treeRef4 = ref<InstanceType<typeof ElTree>>()
|
||||
defineExpose({ treeRef1, treeRef2, treeRef3, treeRef4 })
|
||||
onMounted(() => {
|
||||
treeType.value = props.engineering ? '2' : '1'
|
||||
setTimeout(() => {
|
||||
setActiveName()
|
||||
}, 500)
|
||||
})
|
||||
|
||||
const setActiveName = () => {
|
||||
if (zlDeviceData.value.length != 0) {
|
||||
zlDevList.value = filterProcess(JSON.parse(JSON.stringify(zlDeviceData.value)))
|
||||
activeName.value = '0'
|
||||
}
|
||||
if (zlDeviceData.value.length === 0 && bxsDeviceData.value.length != 0) {
|
||||
activeName.value = '1'
|
||||
}
|
||||
if (zlDeviceData.value.length === 0 && bxsDeviceData.value.length === 0) {
|
||||
activeName.value = '2'
|
||||
}
|
||||
if (!zlDeviceData.value && !bxsDeviceData.value) {
|
||||
activeName.value = ''
|
||||
}
|
||||
nextTick(() => {
|
||||
changeDevice(activeName.value)
|
||||
})
|
||||
}
|
||||
const loading = ref(false)
|
||||
const changeTreeType = (val: string) => {
|
||||
loading.value = true
|
||||
emit('changeTreeType', val)
|
||||
if (val == '1') {
|
||||
setActiveName()
|
||||
if (val === '1') {
|
||||
nextTick(() => setActiveName())
|
||||
}
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
}, 1000)
|
||||
}, 300)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
treeType.value = props.engineering ? '2' : '1'
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@@ -486,4 +413,7 @@ const changeTreeType = (val: string) => {
|
||||
:deep(.el-input-group__prepend) {
|
||||
background-color: var(--el-fill-color-blank);
|
||||
}
|
||||
:deep(.is-disabled) {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
205
src/components/tree/govern/analyzeTree.vue
Normal file
205
src/components/tree/govern/analyzeTree.vue
Normal file
@@ -0,0 +1,205 @@
|
||||
<template>
|
||||
|
||||
<Tree ref="treRef" @check="handleCheck" @check-change="handleCheckChange" :default-checked-keys="defaultCheckedKeys" check-strictly
|
||||
:show-checkbox="props.showCheckbox" :data="tree" :height="props.height" @changeDeviceType="changeDeviceType"
|
||||
@changeTreeType="loadTree" :engineering="props.engineering" />
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
import { ref, nextTick, onMounted } from 'vue'
|
||||
|
||||
import Tree from '../device.vue'
|
||||
|
||||
import { getLineTree } from '@/api/cs-device-boot/csLedger'
|
||||
|
||||
import { useConfig } from '@/stores/config'
|
||||
|
||||
import {
|
||||
|
||||
createLineTreeDecorators,
|
||||
|
||||
decorateLineTree,
|
||||
|
||||
type LineTreeLeaves
|
||||
|
||||
} from './lineTreeUtils'
|
||||
|
||||
|
||||
|
||||
defineOptions({
|
||||
|
||||
name: 'govern/analyzeTree'
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
||||
const props = withDefaults(
|
||||
|
||||
defineProps<{
|
||||
|
||||
showCheckbox?: boolean
|
||||
|
||||
defaultCheckedKeys?: any
|
||||
|
||||
height?: number
|
||||
|
||||
engineering?: boolean
|
||||
|
||||
}>(),
|
||||
|
||||
{
|
||||
|
||||
showCheckbox: false,
|
||||
|
||||
defaultCheckedKeys: () => [],
|
||||
|
||||
height: 0,
|
||||
|
||||
engineering: false
|
||||
|
||||
}
|
||||
|
||||
)
|
||||
|
||||
|
||||
|
||||
const emit = defineEmits(['init', 'checkChange', 'check', 'deviceTypeChange'])
|
||||
|
||||
|
||||
|
||||
const config = useConfig()
|
||||
|
||||
const tree = ref<any[]>([])
|
||||
|
||||
const treRef = ref<InstanceType<typeof Tree>>()
|
||||
|
||||
|
||||
|
||||
const decorators = createLineTreeDecorators(() => config.getColorVal('elementUiPrimary'))
|
||||
|
||||
|
||||
|
||||
const changeDeviceType = (val: any, obj: any) => {
|
||||
|
||||
emit('deviceTypeChange', val, obj)
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
type TreeRefKey = 'treeRef1' | 'treeRef2' | 'treeRef3' | 'treeRef4'
|
||||
|
||||
|
||||
|
||||
async function waitForTreeRef(refKey: TreeRefKey, maxRetries = 20) {
|
||||
|
||||
for (let i = 0; i < maxRetries; i++) {
|
||||
|
||||
await nextTick()
|
||||
|
||||
if (treRef.value?.[refKey]) return treRef.value[refKey]
|
||||
|
||||
await new Promise(resolve => setTimeout(resolve, 50))
|
||||
|
||||
}
|
||||
|
||||
return null
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
async function selectInitialNode(
|
||||
|
||||
type: string | undefined,
|
||||
|
||||
leaves: LineTreeLeaves
|
||||
|
||||
) {
|
||||
|
||||
const candidates: { refKey: TreeRefKey; list: any[]; level: number }[] =
|
||||
|
||||
type === '2'
|
||||
|
||||
? [{ refKey: 'treeRef4', list: leaves.engineering, level: 3 }]
|
||||
|
||||
: [
|
||||
|
||||
{ refKey: 'treeRef1', list: leaves.govern, level: 2 },
|
||||
|
||||
{ refKey: 'treeRef2', list: leaves.portable, level: 2 },
|
||||
|
||||
{ refKey: 'treeRef3', list: leaves.monitor, level: 2 }
|
||||
|
||||
]
|
||||
|
||||
|
||||
|
||||
for (const { refKey, list, level } of candidates) {
|
||||
|
||||
const node = list[0]
|
||||
|
||||
if (!node) continue
|
||||
|
||||
|
||||
|
||||
const treeInstance = await waitForTreeRef(refKey)
|
||||
|
||||
treeInstance?.setCurrentKey(node.id)
|
||||
|
||||
emit('init', { level, ...node })
|
||||
|
||||
return
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
emit('init')
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
const loadTree = (type?: string) => {
|
||||
|
||||
getLineTree({ type: type === '2' ? 'engineering' : '' }).then(res => {
|
||||
|
||||
const leaves = decorateLineTree(res.data, type, decorators)
|
||||
|
||||
tree.value = res.data
|
||||
|
||||
selectInitialNode(type, leaves)
|
||||
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
loadTree(props.engineering ? '2' : '1')
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
||||
const handleCheck = (data: any, state: any) => {
|
||||
emit('check', data, state)
|
||||
}
|
||||
|
||||
const handleCheckChange = (data: any, checked: any, indeterminate: any) => {
|
||||
emit('checkChange', { data, checked, indeterminate })
|
||||
}
|
||||
|
||||
|
||||
|
||||
defineExpose({ treRef })
|
||||
|
||||
</script>
|
||||
@@ -11,102 +11,71 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, nextTick, onMounted, defineProps } from 'vue'
|
||||
import { ref } from 'vue'
|
||||
import Tree from '../index.vue'
|
||||
import { getLineTree, getCldTree } from '@/api/cs-device-boot/csLedger'
|
||||
import { getCldTree } from '@/api/cs-device-boot/csLedger'
|
||||
import { useConfig } from '@/stores/config'
|
||||
import { querySysExcel } from '@/api/harmonic-boot/luckyexcel'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { createLineTreeDecorators } from './lineTreeUtils'
|
||||
import { decorateCloudTree } from './deviceTreeUtils'
|
||||
import { bootstrapWithTemplate, selectTreeNode } from './treeCommonUtils'
|
||||
|
||||
interface Props {
|
||||
template?: boolean
|
||||
showPush?: boolean
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
template: false,
|
||||
showPush: false
|
||||
})
|
||||
defineOptions({
|
||||
name: 'govern/deviceTree'
|
||||
})
|
||||
|
||||
defineOptions({ name: 'govern/cloudDeviceEntryTree' })
|
||||
|
||||
const emit = defineEmits(['init', 'checkChange', 'pointTypeChange', 'Policy', 'onAdd'])
|
||||
|
||||
const config = useConfig()
|
||||
const tree = ref()
|
||||
const dictData = useDictData()
|
||||
const treRef = ref()
|
||||
const tree = ref<any[]>([])
|
||||
const treRef = ref<InstanceType<typeof Tree>>()
|
||||
const width = ref('')
|
||||
|
||||
const info = (selectedNodeId?: string) => {
|
||||
const decorators = createLineTreeDecorators(() => config.getColorVal('elementUiPrimary'))
|
||||
|
||||
const changePointType = (_val: any, obj: any) => {
|
||||
emit('pointTypeChange', _val, obj)
|
||||
}
|
||||
|
||||
const onAdd = () => emit('onAdd')
|
||||
|
||||
async function loadTree() {
|
||||
tree.value = []
|
||||
let arr1: any[] = []
|
||||
getCldTree().then(res => {
|
||||
res.data.icon = 'el-icon-Menu'
|
||||
res.data.color = config.getColorVal('elementUiPrimary')
|
||||
res.data?.children.map((item: any) => {
|
||||
item.icon = 'el-icon-HomeFilled'
|
||||
item.color = config.getColorVal('elementUiPrimary')
|
||||
item.children.forEach((item: any) => {
|
||||
item.icon = 'el-icon-List'
|
||||
item.color = config.getColorVal('elementUiPrimary')
|
||||
item.children.forEach((item2: any) => {
|
||||
// item2.icon = 'el-icon-List'
|
||||
// item2.color = config.getColorVal('elementUiPrimary')
|
||||
item2.icon = 'el-icon-Platform'
|
||||
item2.level = 2
|
||||
item2.color = item2.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
|
||||
item2.children.forEach((item3: any) => {
|
||||
item3.icon = 'el-icon-Platform'
|
||||
item3.color =
|
||||
item3.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
|
||||
arr1.push(item3)
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
tree.value = [res.data]
|
||||
const res = await getCldTree()
|
||||
const leaves = decorateCloudTree(res.data, decorators)
|
||||
tree.value = [res.data]
|
||||
|
||||
nextTick(() => {
|
||||
setTimeout(() => {
|
||||
//初始化选中
|
||||
const node = leaves[0]
|
||||
if (!node) {
|
||||
emit('init')
|
||||
return
|
||||
}
|
||||
|
||||
treRef.value?.treeRef.setCurrentKey(arr1[0].id)
|
||||
// 注册父组件事件
|
||||
emit('init', {
|
||||
level: 3,
|
||||
...arr1[0]
|
||||
})
|
||||
changePointType('4', arr1[0])
|
||||
return
|
||||
}, 500)
|
||||
})
|
||||
await selectTreeNode(treRef.value, node, {
|
||||
level: 3,
|
||||
onSelect: selected => {
|
||||
emit('init', { level: 3, ...selected })
|
||||
changePointType('4', selected)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const changePointType = (val: any, obj: any) => {
|
||||
// emit('pointTypeChange', val, obj)
|
||||
}
|
||||
bootstrapWithTemplate(
|
||||
props.template,
|
||||
loadTree,
|
||||
() => querySysExcel({ id: dictData.state.area[0]?.id }),
|
||||
data => emit('Policy', data)
|
||||
)
|
||||
|
||||
const onAdd = () => {
|
||||
emit('onAdd')
|
||||
}
|
||||
if (props.template) {
|
||||
querySysExcel({ id: dictData.state.area[0]?.id })
|
||||
.then((res: any) => {
|
||||
emit('Policy', res.data)
|
||||
info()
|
||||
})
|
||||
.catch(err => {
|
||||
info()
|
||||
})
|
||||
} else {
|
||||
info()
|
||||
}
|
||||
|
||||
// 暴露 info 方法给父组件调用
|
||||
defineExpose({
|
||||
info
|
||||
})
|
||||
|
||||
onMounted(() => {})
|
||||
defineExpose({ info: loadTree })
|
||||
</script>
|
||||
|
||||
@@ -1,106 +1,70 @@
|
||||
<template>
|
||||
<Tree
|
||||
ref="treRef"
|
||||
:width="width"
|
||||
:showPush="props.showPush"
|
||||
:data="tree"
|
||||
default-expand-all
|
||||
@changePointType="changePointType"
|
||||
@onAdd="onAdd"
|
||||
/>
|
||||
|
||||
<Tree ref="treRef" :width="width" :height="height" :showPush="props.showPush" :data="tree" default-expand-all
|
||||
@changePointType="changePointType" @onAdd="onAdd" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, nextTick, onMounted, defineProps } from 'vue'
|
||||
import { ref } from 'vue'
|
||||
import Tree from '../index.vue'
|
||||
import { getLineTree, objTree } from '@/api/cs-device-boot/csLedger'
|
||||
import { objTree } from '@/api/cs-device-boot/csLedger'
|
||||
import { useConfig } from '@/stores/config'
|
||||
import { querySysExcel } from '@/api/harmonic-boot/luckyexcel'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { createLineTreeDecorators } from './lineTreeUtils'
|
||||
import { decorateObjTree } from './deviceTreeUtils'
|
||||
import { bootstrapWithTemplate, selectTreeNode } from './treeCommonUtils'
|
||||
|
||||
interface Props {
|
||||
template?: boolean
|
||||
showPush?: boolean
|
||||
height?: number
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
template: false,
|
||||
showPush: false
|
||||
})
|
||||
defineOptions({
|
||||
name: 'govern/deviceTree'
|
||||
showPush: false,
|
||||
height: 0
|
||||
})
|
||||
|
||||
defineOptions({ name: 'govern/cloudDeviceEntryTreeZL' })
|
||||
|
||||
const emit = defineEmits(['init', 'checkChange', 'pointTypeChange', 'Policy', 'onAdd'])
|
||||
|
||||
const config = useConfig()
|
||||
const tree = ref()
|
||||
const dictData = useDictData()
|
||||
const treRef = ref()
|
||||
const tree = ref<any[]>([])
|
||||
const treRef = ref<InstanceType<typeof Tree>>()
|
||||
const width = ref('')
|
||||
|
||||
const info = (selectedNodeId?: string) => {
|
||||
const decorators = createLineTreeDecorators(() => config.getColorVal('elementUiPrimary'))
|
||||
|
||||
const changePointType = (val: any, obj: any) => emit('pointTypeChange', val, obj)
|
||||
const onAdd = () => emit('onAdd')
|
||||
|
||||
async function loadTree() {
|
||||
tree.value = []
|
||||
let arr1: any[] = []
|
||||
objTree().then(res => {
|
||||
try {
|
||||
res.data.map((item: any) => {
|
||||
item.icon = 'el-icon-HomeFilled'
|
||||
item.level = 1
|
||||
item.color = config.getColorVal('elementUiPrimary')
|
||||
item.children.forEach((item: any) => {
|
||||
item.icon = 'el-icon-List'
|
||||
item.level = 2
|
||||
item.color = config.getColorVal('elementUiPrimary')
|
||||
item.children.forEach((item2: any) => {
|
||||
arr1.push(item2)
|
||||
item2.icon = 'el-icon-Platform'
|
||||
item2.level = 3
|
||||
item2.color = config.getColorVal('elementUiPrimary')
|
||||
})
|
||||
})
|
||||
})
|
||||
tree.value = res.data
|
||||
nextTick(() => {
|
||||
if (arr1.length) {
|
||||
//初始化选中
|
||||
treRef.value.treeRef.setCurrentKey(arr1[0].id)
|
||||
// 注册父组件事件
|
||||
emit('init', arr1[0])
|
||||
return
|
||||
} else {
|
||||
emit('init')
|
||||
return
|
||||
}
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Error in processing getCldTree response:', error)
|
||||
}
|
||||
const res = await objTree()
|
||||
const leaves = decorateObjTree(res.data, decorators)
|
||||
tree.value = res.data
|
||||
|
||||
const node = leaves[0]
|
||||
if (!node) {
|
||||
emit('init')
|
||||
return
|
||||
}
|
||||
|
||||
await selectTreeNode(treRef.value, node, {
|
||||
onSelect: selected => emit('init', selected)
|
||||
})
|
||||
}
|
||||
|
||||
const changePointType = (val: any, obj: any) => {
|
||||
emit('pointTypeChange', val, obj)
|
||||
}
|
||||
bootstrapWithTemplate(
|
||||
props.template,
|
||||
loadTree,
|
||||
() => querySysExcel({ id: dictData.state.area[0]?.id }),
|
||||
data => emit('Policy', data)
|
||||
)
|
||||
|
||||
const onAdd = () => {
|
||||
emit('onAdd')
|
||||
}
|
||||
if (props.template) {
|
||||
querySysExcel({ id: dictData.state.area[0]?.id })
|
||||
.then((res: any) => {
|
||||
emit('Policy', res.data)
|
||||
info()
|
||||
})
|
||||
.catch(err => {
|
||||
info()
|
||||
})
|
||||
} else {
|
||||
info()
|
||||
}
|
||||
|
||||
// 暴露 info 方法给父组件调用
|
||||
defineExpose({
|
||||
info
|
||||
})
|
||||
|
||||
onMounted(() => {})
|
||||
defineExpose({ info: loadTree })
|
||||
</script>
|
||||
|
||||
@@ -11,177 +11,70 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, nextTick, onMounted, defineProps } from 'vue'
|
||||
import { ref } from 'vue'
|
||||
import Tree from '../index.vue'
|
||||
import { getLineTree, lineTree } from '@/api/cs-device-boot/csLedger'
|
||||
import { lineTree } from '@/api/cs-device-boot/csLedger'
|
||||
import { useConfig } from '@/stores/config'
|
||||
import { querySysExcel } from '@/api/harmonic-boot/luckyexcel'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { createLineTreeDecorators } from './lineTreeUtils'
|
||||
import { decorateLedgerLineTree, resolveMonitorRoot } from './deviceTreeUtils'
|
||||
import { bootstrapWithTemplate, findNodeById, selectTreeNode } from './treeCommonUtils'
|
||||
|
||||
interface Props {
|
||||
template?: boolean
|
||||
showPush?: boolean
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
template: false,
|
||||
showPush: false
|
||||
})
|
||||
defineOptions({
|
||||
name: 'govern/deviceTree'
|
||||
})
|
||||
|
||||
defineOptions({ name: 'govern/csLedgerLineTree' })
|
||||
|
||||
const emit = defineEmits(['init', 'checkChange', 'pointTypeChange', 'Policy', 'onAdd'])
|
||||
|
||||
const config = useConfig()
|
||||
const tree = ref()
|
||||
const dictData = useDictData()
|
||||
const treRef = ref()
|
||||
const tree = ref<any[]>([])
|
||||
const treRef = ref<InstanceType<typeof Tree>>()
|
||||
const width = ref('')
|
||||
|
||||
const info = (selectedNodeId?: string) => {
|
||||
const decorators = createLineTreeDecorators(() => config.getColorVal('elementUiPrimary'))
|
||||
|
||||
const changePointType = (val: any, obj: any) => emit('pointTypeChange', val, obj)
|
||||
const onAdd = () => emit('onAdd')
|
||||
|
||||
async function loadTree(selectedNodeId?: string) {
|
||||
tree.value = []
|
||||
let arr1: any[] = []
|
||||
lineTree().then(res => {
|
||||
try {
|
||||
// 检查响应数据结构
|
||||
let rootData = null
|
||||
if (Array.isArray(res.data)) {
|
||||
// 旧的数据结构 - 数组
|
||||
rootData = res.data.find((item: any) => item.name == '监测设备')
|
||||
} else if (res.data && res.data.name == '监测设备') {
|
||||
// 新的数据结构 - 单个对象
|
||||
rootData = res.data
|
||||
}
|
||||
const res = await lineTree()
|
||||
const rootData = resolveMonitorRoot(res.data)
|
||||
const leaves = decorateLedgerLineTree(rootData, decorators)
|
||||
tree.value = rootData ? [rootData] : []
|
||||
|
||||
// 治理设备
|
||||
if (rootData) {
|
||||
rootData.icon = 'el-icon-Menu'
|
||||
rootData.level = 0
|
||||
rootData.color = config.getColorVal('elementUiPrimary')
|
||||
// 确保根节点的 children 是数组
|
||||
if (!Array.isArray(rootData.children)) {
|
||||
rootData.children = []
|
||||
}
|
||||
rootData.children.forEach((item: any) => {
|
||||
item.icon = 'el-icon-HomeFilled'
|
||||
item.level = 1
|
||||
item.color = config.getColorVal('elementUiPrimary')
|
||||
// 确保 children 是数组
|
||||
if (!Array.isArray(item.children)) {
|
||||
item.children = []
|
||||
}
|
||||
item.children.forEach((item2: any) => {
|
||||
item2.icon = 'el-icon-List'
|
||||
item2.level = 2
|
||||
item2.color = config.getColorVal('elementUiPrimary')
|
||||
if (!leaves.length) {
|
||||
emit('init')
|
||||
return
|
||||
}
|
||||
|
||||
// 确保 children 是数组
|
||||
if (!Array.isArray(item2.children)) {
|
||||
item2.children = []
|
||||
}
|
||||
item2.children.forEach((item3: any) => {
|
||||
item3.icon = 'el-icon-Platform'
|
||||
item3.level = 3
|
||||
item3.color =
|
||||
item3.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
|
||||
const targetNode = selectedNodeId
|
||||
? findNodeById(tree.value, selectedNodeId) ?? leaves[0]
|
||||
: leaves[0]
|
||||
|
||||
// 确保 children 是数组
|
||||
if (!Array.isArray(item3.children)) {
|
||||
item3.children = []
|
||||
}
|
||||
|
||||
item3.children.forEach((item4: any) => {
|
||||
item4.icon = 'el-icon-Platform'
|
||||
item4.level = 4
|
||||
item4.color =
|
||||
item4.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
|
||||
arr1.push(item4)
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
tree.value = [rootData] // 确保 tree.value 是数组
|
||||
} else {
|
||||
tree.value = []
|
||||
}
|
||||
nextTick(() => {
|
||||
if (arr1.length) {
|
||||
// 安全检查 treRef 和 treeRef 是否存在
|
||||
console.log(
|
||||
'🚀 ~ info ~ treRef.value && treRef.value.treeRef && treRef.value.treeRef.setCurrentKey:',
|
||||
treRef.value && treRef.value.treeRef1 && treRef.value.treeRef1.setCurrentKey
|
||||
)
|
||||
|
||||
if (treRef.value && treRef.value.treeRef && treRef.value.treeRef.setCurrentKey) {
|
||||
// 如果传入了要选中的节点ID，则选中该节点，否则选中第一个节点
|
||||
console.log('selectedNodeId:', selectedNodeId)
|
||||
if (selectedNodeId) {
|
||||
treRef.value.treeRef.setCurrentKey(selectedNodeId)
|
||||
// 查找对应的节点数据并触发事件
|
||||
let selectedNode = null
|
||||
const findNode = (nodes: any[]) => {
|
||||
for (const node of nodes) {
|
||||
if (node.id === selectedNodeId) {
|
||||
selectedNode = node
|
||||
return true
|
||||
}
|
||||
if (node.children && findNode(node.children)) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
findNode(tree.value)
|
||||
|
||||
if (selectedNode) {
|
||||
emit('init', {
|
||||
level: selectedNode.level,
|
||||
...selectedNode
|
||||
})
|
||||
}
|
||||
} else {
|
||||
// 初始化选中第一个节点
|
||||
treRef.value.treeRef.setCurrentKey(arr1[0].id)
|
||||
emit('init', {
|
||||
level: 2,
|
||||
...arr1[0]
|
||||
})
|
||||
}
|
||||
}
|
||||
} else {
|
||||
}
|
||||
await selectTreeNode(treRef.value, targetNode, {
|
||||
onSelect: selected =>
|
||||
emit('init', {
|
||||
level: selected.level ?? 2,
|
||||
...selected
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Error in processing getCldTree response:', error)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const changePointType = (val: any, obj: any) => {
|
||||
emit('pointTypeChange', val, obj)
|
||||
}
|
||||
bootstrapWithTemplate(
|
||||
props.template,
|
||||
() => loadTree(),
|
||||
() => querySysExcel({}),
|
||||
data => emit('Policy', data)
|
||||
)
|
||||
|
||||
const onAdd = () => {
|
||||
emit('onAdd')
|
||||
}
|
||||
if (props.template) {
|
||||
// id: dictData.state.area[0]?.id
|
||||
querySysExcel({})
|
||||
.then((res: any) => {
|
||||
emit('Policy', res.data)
|
||||
info()
|
||||
})
|
||||
.catch(err => {
|
||||
info()
|
||||
})
|
||||
} else {
|
||||
info()
|
||||
}
|
||||
|
||||
// 暴露 info 方法给父组件调用
|
||||
defineExpose({
|
||||
info
|
||||
})
|
||||
|
||||
onMounted(() => {})
|
||||
defineExpose({ info: loadTree })
|
||||
</script>
|
||||
|
||||
@@ -1,107 +1,64 @@
|
||||
<template>
|
||||
<Tree
|
||||
ref="treRef"
|
||||
@checkTreeNodeChange="handleCheckChange"
|
||||
:default-checked-keys="defaultCheckedKeys"
|
||||
:show-checkbox="props.showCheckbox"
|
||||
:data="tree"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, nextTick, defineProps } from 'vue'
|
||||
import Tree from '../index.vue'
|
||||
import { getDeviceTree } from '@/api/cs-device-boot/csLedger'
|
||||
import { useConfig } from '@/stores/config'
|
||||
defineOptions({
|
||||
name: 'govern/deviceTree'
|
||||
})
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
showCheckbox?: boolean
|
||||
defaultCheckedKeys?: any
|
||||
}>(),
|
||||
{
|
||||
showCheckbox: false,
|
||||
defaultCheckedKeys: []
|
||||
}
|
||||
)
|
||||
|
||||
const emit = defineEmits(['init', 'checkChange'])
|
||||
const config = useConfig()
|
||||
const tree = ref()
|
||||
const treRef = ref()
|
||||
getDeviceTree().then(res => {
|
||||
return
|
||||
let arr: any[] = []
|
||||
res.data.forEach((item: any) => {
|
||||
item.icon = 'el-icon-HomeFilled'
|
||||
item.color = config.getColorVal('elementUiPrimary')
|
||||
item.children.forEach((item2: any) => {
|
||||
item2.icon = 'el-icon-List'
|
||||
item2.color = config.getColorVal('elementUiPrimary')
|
||||
item2.children.forEach((item3: any) => {
|
||||
item3.icon = 'el-icon-Platform'
|
||||
item3.color = config.getColorVal('elementUiPrimary')
|
||||
if (item3.comFlag === 1) {
|
||||
item3.color = '#e26257 !important'
|
||||
}
|
||||
arr.push(item3)
|
||||
})
|
||||
})
|
||||
})
|
||||
tree.value = res.data
|
||||
nextTick(() => {
|
||||
if (arr.length) {
|
||||
treRef.value.treeRef.setCurrentKey(arr[0].id)
|
||||
// 注册父组件事件
|
||||
emit('init', {
|
||||
level: 2,
|
||||
...arr[0]
|
||||
})
|
||||
} else {
|
||||
emit('init')
|
||||
}
|
||||
})
|
||||
})
|
||||
const getTreeList = (list: any) => {
|
||||
let arr: any[] = []
|
||||
list.forEach((item: any) => {
|
||||
item.icon = 'el-icon-HomeFilled'
|
||||
item.color = config.getColorVal('elementUiPrimary')
|
||||
item.children.forEach((item2: any) => {
|
||||
item2.icon = 'el-icon-List'
|
||||
item2.color = config.getColorVal('elementUiPrimary')
|
||||
item2.children?.forEach((item3: any) => {
|
||||
item3.icon = 'el-icon-Platform'
|
||||
item3.color = config.getColorVal('elementUiPrimary')
|
||||
if (item3.comFlag === 1) {
|
||||
item3.color = '#e26257 !important'
|
||||
item3.color = item3.comFlag == 3 ? '#e26257 !important' : config.getColorVal('elementUiPrimary')
|
||||
}
|
||||
arr.push(item3)
|
||||
})
|
||||
})
|
||||
})
|
||||
tree.value = list
|
||||
nextTick(() => {
|
||||
if (arr.length) {
|
||||
treRef.value.treeRef.setCurrentKey(arr[0].id)
|
||||
// 注册父组件事件
|
||||
emit('init', {
|
||||
level: 2,
|
||||
...arr[0]
|
||||
})
|
||||
} else {
|
||||
emit('init')
|
||||
}
|
||||
})
|
||||
}
|
||||
//接收tree选择的数据后传递给父级组件
|
||||
const handleCheckChange = (data: any) => {
|
||||
emit('checkChange', {
|
||||
data
|
||||
})
|
||||
}
|
||||
defineExpose({ getTreeList })
|
||||
</script>
|
||||
<template>
|
||||
<Tree
|
||||
ref="treRef"
|
||||
@checkTreeNodeChange="handleCheckChange"
|
||||
:default-checked-keys="defaultCheckedKeys"
|
||||
:show-checkbox="props.showCheckbox"
|
||||
:data="tree"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import Tree from '../index.vue'
|
||||
import { getDeviceTree } from '@/api/cs-device-boot/csLedger'
|
||||
import { useConfig } from '@/stores/config'
|
||||
import { createLineTreeDecorators } from './lineTreeUtils'
|
||||
import { decorateDeviceInfoTree } from './deviceTreeUtils'
|
||||
import { selectTreeNode } from './treeCommonUtils'
|
||||
|
||||
defineOptions({ name: 'govern/deviceInfoTree' })
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
showCheckbox?: boolean
|
||||
defaultCheckedKeys?: any[]
|
||||
}>(),
|
||||
{
|
||||
showCheckbox: false,
|
||||
defaultCheckedKeys: () => []
|
||||
}
|
||||
)
|
||||
|
||||
const emit = defineEmits(['init', 'checkChange'])
|
||||
|
||||
const config = useConfig()
|
||||
const tree = ref<any[]>([])
|
||||
const treRef = ref<InstanceType<typeof Tree>>()
|
||||
const decorators = createLineTreeDecorators(() => config.getColorVal('elementUiPrimary'))
|
||||
|
||||
async function initTree(list: any[]) {
|
||||
const leaves = decorateDeviceInfoTree(list, decorators)
|
||||
tree.value = list
|
||||
|
||||
const node = leaves[0]
|
||||
if (!node) {
|
||||
emit('init')
|
||||
return
|
||||
}
|
||||
|
||||
await selectTreeNode(treRef.value, node, {
|
||||
onSelect: selected => emit('init', { level: 2, ...selected })
|
||||
})
|
||||
}
|
||||
|
||||
getDeviceTree().then(res => initTree(res.data))
|
||||
|
||||
const getTreeList = (list: any[]) => initTree(list)
|
||||
|
||||
const handleCheckChange = (data: any) => {
|
||||
emit('checkChange', { data })
|
||||
}
|
||||
|
||||
defineExpose({ getTreeList })
|
||||
</script>
|
||||
|
||||
@@ -7,210 +7,87 @@
|
||||
:data="tree"
|
||||
:height="props.height"
|
||||
@changeDeviceType="changeDeviceType"
|
||||
@changeTreeType="info"
|
||||
@changeTreeType="loadTree"
|
||||
:engineering="props.engineering"
|
||||
leaf-mode="device"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, nextTick } from 'vue'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { throttle } from 'lodash'
|
||||
import Tree from '../device.vue'
|
||||
import { getDeviceTree } from '@/api/cs-device-boot/csLedger'
|
||||
import { useConfig } from '@/stores/config'
|
||||
import { throttle } from 'lodash'
|
||||
import { waitForTreeRef, type TreeRefKey } from './lineTreeUtils'
|
||||
import { createLineTreeDecorators } from './lineTreeUtils'
|
||||
import { decorateDeviceTree } from './deviceTreeUtils'
|
||||
import type { LineTreeLeaves } from './lineTreeUtils'
|
||||
|
||||
defineOptions({ name: 'govern/deviceTree' })
|
||||
|
||||
defineOptions({
|
||||
name: 'govern/deviceTree'
|
||||
})
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
showCheckbox?: boolean
|
||||
defaultCheckedKeys?: any
|
||||
defaultCheckedKeys?: any[]
|
||||
height?: number
|
||||
engineering?: boolean
|
||||
}>(),
|
||||
{
|
||||
showCheckbox: false,
|
||||
defaultCheckedKeys: [],
|
||||
defaultCheckedKeys: () => [],
|
||||
height: 0,
|
||||
engineering: false
|
||||
}
|
||||
)
|
||||
|
||||
const emit = defineEmits(['init', 'checkChange', 'deviceTypeChange'])
|
||||
|
||||
const config = useConfig()
|
||||
const tree = ref()
|
||||
const treRef = ref()
|
||||
const changeDeviceType = (val: any, obj: any) => {
|
||||
emit('deviceTypeChange', val, obj)
|
||||
const tree = ref<any[]>([])
|
||||
const treRef = ref<InstanceType<typeof Tree>>()
|
||||
const decorators = createLineTreeDecorators(() => config.getColorVal('elementUiPrimary'))
|
||||
|
||||
const changeDeviceType = (val: any, obj: any) => emit('deviceTypeChange', val, obj)
|
||||
|
||||
async function selectInitialNode(type: string | undefined, leaves: LineTreeLeaves) {
|
||||
const candidates: { refKey: TreeRefKey; list: any[]; level: number }[] =
|
||||
type === '2'
|
||||
? [{ refKey: 'treeRef4', list: leaves.engineering, level: 2 }]
|
||||
: [
|
||||
{ refKey: 'treeRef1', list: leaves.govern, level: 2 },
|
||||
{ refKey: 'treeRef2', list: leaves.portable, level: 2 },
|
||||
{ refKey: 'treeRef3', list: leaves.monitor, level: 2 }
|
||||
]
|
||||
|
||||
for (const { refKey, list, level } of candidates) {
|
||||
const node = list[0]
|
||||
if (!node) continue
|
||||
const treeInstance = await waitForTreeRef(treRef.value, refKey)
|
||||
treeInstance?.setCurrentKey(node.id)
|
||||
emit('init', { level, ...node })
|
||||
return
|
||||
}
|
||||
emit('init')
|
||||
}
|
||||
|
||||
const info = (type?: string) => {
|
||||
getDeviceTree({ type: type == '2' ? 'engineering' : '' }).then(res => {
|
||||
let arr: any[] = []
|
||||
let arr2: any[] = []
|
||||
let arr3: any[] = []
|
||||
let arr4: any[] = []
|
||||
//治理设备
|
||||
res.data.map((item: any) => {
|
||||
if (type == '2') {
|
||||
item.icon = 'el-icon-HomeFilled'
|
||||
item.color = config.getColorVal('elementUiPrimary')
|
||||
item.children.forEach((item: any) => {
|
||||
item.icon = 'el-icon-List'
|
||||
item.color = config.getColorVal('elementUiPrimary')
|
||||
item.children.forEach((item2: any) => {
|
||||
item2.icon = 'el-icon-Platform'
|
||||
item2.color = config.getColorVal('elementUiPrimary')
|
||||
item2.color =
|
||||
item2.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
|
||||
arr4.push(item2)
|
||||
})
|
||||
})
|
||||
} else {
|
||||
if (item.name == '治理设备') {
|
||||
item.children.forEach((item: any) => {
|
||||
item.icon = 'el-icon-HomeFilled'
|
||||
item.color = config.getColorVal('elementUiPrimary')
|
||||
item.children.forEach((item2: any) => {
|
||||
item2.icon = 'el-icon-List'
|
||||
item2.color = config.getColorVal('elementUiPrimary')
|
||||
item2.children.forEach((item3: any) => {
|
||||
item3.pName = '治理设备'
|
||||
item3.icon = 'el-icon-Platform'
|
||||
item3.level = 2
|
||||
item3.color = config.getColorVal('elementUiPrimary')
|
||||
if (item3.comFlag === 1) {
|
||||
item3.color = '#e26257 !important'
|
||||
}
|
||||
arr.push(item3)
|
||||
})
|
||||
})
|
||||
})
|
||||
} else if (item.name == '便携式设备') {
|
||||
item.children.forEach((item: any) => {
|
||||
item.icon = 'el-icon-Platform'
|
||||
item.color = config.getColorVal('elementUiPrimary')
|
||||
item.color = '#e26257 !important'
|
||||
item.color = item.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
|
||||
// item.disabled =true
|
||||
item.pName = '便携式设备'
|
||||
if (item.type == 'device') {
|
||||
arr2.push(item)
|
||||
}
|
||||
item.children.forEach((item2: any) => {
|
||||
item2.icon = 'el-icon-Platform'
|
||||
item2.color =
|
||||
item2.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
|
||||
item2.pName = '便携式设备'
|
||||
// item2.children.forEach((item3: any) => {
|
||||
// item3.icon = 'el-icon-Platform'
|
||||
// item3.color = config.getColorVal('elementUiPrimary')
|
||||
// if (item3.comFlag === 1) {
|
||||
// item3.color = '#e26257 !important'
|
||||
// }
|
||||
// arr.push(item3)
|
||||
// })
|
||||
})
|
||||
})
|
||||
} else if (item.name == '监测设备') {
|
||||
item.children.forEach((item: any) => {
|
||||
item.icon = 'el-icon-HomeFilled'
|
||||
item.color = config.getColorVal('elementUiPrimary')
|
||||
item.children.forEach((item2: any) => {
|
||||
item2.icon = 'el-icon-List'
|
||||
item2.color = config.getColorVal('elementUiPrimary')
|
||||
item2.children.forEach((item3: any) => {
|
||||
item3.pName = '监测设备'
|
||||
item3.icon = 'el-icon-Platform'
|
||||
item3.color = config.getColorVal('elementUiPrimary')
|
||||
if (item3.comFlag === 1) {
|
||||
item3.color = '#e26257 !important'
|
||||
}
|
||||
arr3.push(item3)
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
const loadTree = (type?: string) => {
|
||||
getDeviceTree({ type: type === '2' ? 'engineering' : '' }).then(res => {
|
||||
const leaves = decorateDeviceTree(res.data, type, decorators)
|
||||
tree.value = res.data
|
||||
|
||||
nextTick(() => {
|
||||
setTimeout(() => {
|
||||
if (type == '2') {
|
||||
//初始化选中
|
||||
|
||||
treRef.value?.treeRef4.setCurrentKey(arr4[0]?.id)
|
||||
// 注册父组件事件
|
||||
emit('init', {
|
||||
level: 2,
|
||||
...arr4[0]
|
||||
})
|
||||
// changePointType('4', arr4[0])
|
||||
return
|
||||
}
|
||||
if (arr.length > 0) {
|
||||
treRef.value.treeRef1.setCurrentKey(arr[0]?.id)
|
||||
// 注册父组件事件
|
||||
emit('init', {
|
||||
level: 2,
|
||||
...arr[0]
|
||||
})
|
||||
return
|
||||
} else if (arr2.length > 0) {
|
||||
treRef.value.treeRef2.setCurrentKey(arr2[0]?.id)
|
||||
// 注册父组件事件
|
||||
emit('init', {
|
||||
level: 2,
|
||||
...arr2[0]
|
||||
})
|
||||
return
|
||||
} else if (arr3.length > 0) {
|
||||
console.log('🚀 ~ arr3:', arr3)
|
||||
|
||||
treRef.value.treeRef3.setCurrentKey(arr3[0].id)
|
||||
// 注册父组件事件
|
||||
emit('init', {
|
||||
level: 2,
|
||||
...arr3[0]
|
||||
})
|
||||
return
|
||||
} else {
|
||||
emit('init')
|
||||
return
|
||||
}
|
||||
}, 500)
|
||||
})
|
||||
selectInitialNode(type, leaves)
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
info(props.engineering ? '2' : '1')
|
||||
})
|
||||
onMounted(() => loadTree(props.engineering ? '2' : '1'))
|
||||
|
||||
throttle(
|
||||
const handleCheckChange = throttle(
|
||||
(data: any, checked: any, indeterminate: any) => {
|
||||
emit('checkChange', {
|
||||
data,
|
||||
checked,
|
||||
indeterminate
|
||||
})
|
||||
emit('checkChange', { data, checked, indeterminate })
|
||||
},
|
||||
300,
|
||||
{
|
||||
leading: true, // 首次触发立即执行（可选，默认 true）
|
||||
trailing: false // 节流结束后是否执行最后一次（可选，默认 true，根据需求调整）
|
||||
}
|
||||
{ leading: true, trailing: false }
|
||||
)
|
||||
|
||||
const handleCheckChange = (data: any, checked: any, indeterminate: any) => {
|
||||
emit('checkChange', {
|
||||
data,
|
||||
checked,
|
||||
indeterminate
|
||||
})
|
||||
}
|
||||
defineExpose({
|
||||
treRef
|
||||
})
|
||||
defineExpose({ treRef })
|
||||
</script>
|
||||
|
||||
222
src/components/tree/govern/deviceTreeUtils.ts
Normal file
222
src/components/tree/govern/deviceTreeUtils.ts
Normal file
@@ -0,0 +1,222 @@
|
||||
import type { LineTreeDecorators, LineTreeLeaves } from './lineTreeUtils'
|
||||
|
||||
/** getDeviceTree 接口专用装饰（与 getLineTree 层级不同） */
|
||||
export function decorateDeviceTree(
|
||||
data: any[],
|
||||
type: string | undefined,
|
||||
decorators: LineTreeDecorators
|
||||
): LineTreeLeaves {
|
||||
const leaves: LineTreeLeaves = { govern: [], portable: [], monitor: [], engineering: [] }
|
||||
const { primary, statusColor, applyMeta } = decorators
|
||||
|
||||
data.forEach(item => {
|
||||
if (type === '2') {
|
||||
applyMeta(item, { icon: 'el-icon-HomeFilled', color: primary() })
|
||||
item.children?.forEach((child: any) => {
|
||||
applyMeta(child, { icon: 'el-icon-List', color: primary() })
|
||||
child.children?.forEach((grand: any) => {
|
||||
applyMeta(grand, {
|
||||
icon: 'el-icon-Platform',
|
||||
color: statusColor(grand.comFlag)
|
||||
})
|
||||
leaves.engineering.push(grand)
|
||||
})
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if (item.name === '治理设备') {
|
||||
item.children?.forEach((l1: any) => {
|
||||
applyMeta(l1, { icon: 'el-icon-HomeFilled', color: primary() })
|
||||
l1.children?.forEach((l2: any) => {
|
||||
applyMeta(l2, { icon: 'el-icon-List', color: primary() })
|
||||
l2.children?.forEach((l3: any) => {
|
||||
l3.pName = '治理设备'
|
||||
applyMeta(l3, {
|
||||
icon: 'el-icon-Platform',
|
||||
level: 2,
|
||||
color: l3.comFlag === 1 ? '#e26257 !important' : primary()
|
||||
})
|
||||
leaves.govern.push(l3)
|
||||
})
|
||||
})
|
||||
})
|
||||
} else if (item.name === '便携式设备') {
|
||||
item.children?.forEach((l1: any) => {
|
||||
applyMeta(l1, {
|
||||
icon: 'el-icon-Platform',
|
||||
color: statusColor(l1.comFlag)
|
||||
})
|
||||
l1.pName = '便携式设备'
|
||||
if (l1.type === 'device') {
|
||||
leaves.portable.push(l1)
|
||||
}
|
||||
l1.children?.forEach((l2: any) => {
|
||||
applyMeta(l2, {
|
||||
icon: 'el-icon-Platform',
|
||||
color: statusColor(l2.comFlag)
|
||||
})
|
||||
l2.pName = '便携式设备'
|
||||
})
|
||||
})
|
||||
} else if (item.name === '监测设备') {
|
||||
item.children?.forEach((l1: any) => {
|
||||
applyMeta(l1, { icon: 'el-icon-HomeFilled', color: primary() })
|
||||
l1.children?.forEach((l2: any) => {
|
||||
applyMeta(l2, { icon: 'el-icon-List', color: primary() })
|
||||
l2.children?.forEach((l3: any) => {
|
||||
l3.pName = '监测设备'
|
||||
applyMeta(l3, {
|
||||
icon: 'el-icon-Platform',
|
||||
color: l3.comFlag === 1 ? '#e26257 !important' : primary()
|
||||
})
|
||||
leaves.monitor.push(l3)
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
return leaves
|
||||
}
|
||||
|
||||
/** 装饰 getDeviceTree 扁平列表（deviceInfoTree） */
|
||||
export function decorateDeviceInfoTree(list: any[], decorators: LineTreeDecorators): any[] {
|
||||
const { primary, applyMeta } = decorators
|
||||
const leaves: any[] = []
|
||||
|
||||
list.forEach(item => {
|
||||
applyMeta(item, { icon: 'el-icon-HomeFilled', color: primary() })
|
||||
item.children?.forEach((l2: any) => {
|
||||
applyMeta(l2, { icon: 'el-icon-List', color: primary() })
|
||||
l2.children?.forEach((l3: any) => {
|
||||
applyMeta(l3, {
|
||||
icon: 'el-icon-Platform',
|
||||
color: l3.comFlag === 1 || l3.comFlag === 3 ? '#e26257 !important' : primary()
|
||||
})
|
||||
leaves.push(l3)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
return leaves
|
||||
}
|
||||
|
||||
/** 装饰云端设备树 getCldTree */
|
||||
export function decorateCloudTree(root: any, decorators: LineTreeDecorators): any[] {
|
||||
const { primary, statusColor, applyMeta } = decorators
|
||||
const leaves: any[] = []
|
||||
|
||||
applyMeta(root, { icon: 'el-icon-Menu', color: primary() })
|
||||
root.children?.forEach((l1: any) => {
|
||||
applyMeta(l1, { icon: 'el-icon-HomeFilled', color: primary() })
|
||||
l1.children?.forEach((l2: any) => {
|
||||
applyMeta(l2, { icon: 'el-icon-List', color: primary() })
|
||||
l2.children?.forEach((l3: any) => {
|
||||
applyMeta(l3, {
|
||||
icon: 'el-icon-Platform',
|
||||
level: 2,
|
||||
color: statusColor(l3.comFlag)
|
||||
})
|
||||
leaves.push(l3)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
return leaves
|
||||
}
|
||||
|
||||
/** 装饰 objTree（治理对象树） */
|
||||
export function decorateObjTree(data: any[], decorators: LineTreeDecorators): any[] {
|
||||
const { primary, applyMeta } = decorators
|
||||
const leaves: any[] = []
|
||||
|
||||
data.forEach(l1 => {
|
||||
applyMeta(l1, { icon: 'el-icon-HomeFilled', color: primary(), level: 1 })
|
||||
l1.children?.forEach((l2: any) => {
|
||||
applyMeta(l2, { icon: 'el-icon-List', color: primary(), level: 2 })
|
||||
l2.children?.forEach((l3: any) => {
|
||||
applyMeta(l3, { icon: 'el-icon-Platform', color: primary(), level: 3 })
|
||||
leaves.push(l3)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
return leaves
|
||||
}
|
||||
|
||||
/** 装饰 lineTree 台账线路树（监测设备根节点） */
|
||||
export function decorateLedgerLineTree(root: any, decorators: LineTreeDecorators): any[] {
|
||||
const { primary, statusColor, applyMeta } = decorators
|
||||
const leaves: any[] = []
|
||||
|
||||
if (!root) return leaves
|
||||
|
||||
applyMeta(root, { icon: 'el-icon-Menu', color: primary(), level: 0 })
|
||||
if (!Array.isArray(root.children)) root.children = []
|
||||
|
||||
root.children.forEach((l1: any) => {
|
||||
applyMeta(l1, { icon: 'el-icon-HomeFilled', color: primary(), level: 1 })
|
||||
if (!Array.isArray(l1.children)) l1.children = []
|
||||
l1.children.forEach((l2: any) => {
|
||||
applyMeta(l2, { icon: 'el-icon-List', color: primary(), level: 2 })
|
||||
if (!Array.isArray(l2.children)) l2.children = []
|
||||
l2.children.forEach((l3: any) => {
|
||||
applyMeta(l3, {
|
||||
icon: 'el-icon-Platform',
|
||||
color: statusColor(l3.comFlag),
|
||||
level: 3
|
||||
})
|
||||
if (!Array.isArray(l3.children)) l3.children = []
|
||||
l3.children.forEach((l4: any) => {
|
||||
applyMeta(l4, {
|
||||
icon: 'el-icon-Platform',
|
||||
color: statusColor(l4.comFlag),
|
||||
level: 4
|
||||
})
|
||||
leaves.push(l4)
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
return leaves
|
||||
}
|
||||
|
||||
/** getDeviceTree 接口叶子收集（3 层结构，便携式为 type=device 节点） */
|
||||
export function collectDeviceApiLeaves(
|
||||
governNodes: any[],
|
||||
portableNodes: any[],
|
||||
monitorNodes: any[]
|
||||
): { govern: any[]; portable: any[]; monitor: any[] } {
|
||||
const govern: any[] = []
|
||||
const portable: any[] = []
|
||||
const monitor: any[] = []
|
||||
|
||||
governNodes.forEach(l1 => {
|
||||
l1.children?.forEach((l2: any) => {
|
||||
l2.children?.forEach((l3: any) => govern.push(l3))
|
||||
})
|
||||
})
|
||||
|
||||
portableNodes.forEach(l1 => {
|
||||
if (l1.type === 'device') portable.push(l1)
|
||||
})
|
||||
|
||||
monitorNodes.forEach(l1 => {
|
||||
l1.children?.forEach((l2: any) => {
|
||||
l2.children?.forEach((l3: any) => monitor.push(l3))
|
||||
})
|
||||
})
|
||||
|
||||
return { govern, portable, monitor }
|
||||
}
|
||||
|
||||
/** 从 lineTree 数据中解析监测设备根节点 */
|
||||
export function resolveMonitorRoot(data: any): any | null {
|
||||
if (Array.isArray(data)) {
|
||||
return data.find(item => item.name === '监测设备') ?? null
|
||||
}
|
||||
if (data?.name === '监测设备') return data
|
||||
return null
|
||||
}
|
||||
@@ -1,31 +1,28 @@
|
||||
<template>
|
||||
<Tree ref="treRef" :data="tree" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { getMarketList } from '@/api/user-boot/user'
|
||||
import Tree from '../cloudDevice.vue'
|
||||
import { useConfig } from '@/stores/config'
|
||||
import { ref, reactive, nextTick } from 'vue'
|
||||
const config = useConfig()
|
||||
const tree = ref()
|
||||
const treRef = ref()
|
||||
import { mapUserTreeNodes, selectTreeNode } from './treeCommonUtils'
|
||||
|
||||
const tree = ref<any[]>([])
|
||||
const treRef = ref<InstanceType<typeof Tree>>()
|
||||
const emit = defineEmits(['selectUser'])
|
||||
getMarketList().then((res: any) => {
|
||||
if (res.code === 'A0000') {
|
||||
tree.value = res.data.map((item: any) => {
|
||||
return {
|
||||
...item,
|
||||
icon: 'el-icon-User',
|
||||
color: 'royalblue'
|
||||
}
|
||||
})
|
||||
console.log("🚀 ~ royalblue:")
|
||||
|
||||
emit('selectUser', tree.value[0])
|
||||
nextTick(() => {
|
||||
treRef.value.treeRef.setCurrentKey(tree.value[0]?.id)
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
async function loadTree() {
|
||||
const res: any = await getMarketList()
|
||||
if (res.code !== 'A0000') return
|
||||
|
||||
tree.value = mapUserTreeNodes(res.data)
|
||||
const first = tree.value[0]
|
||||
if (!first) return
|
||||
|
||||
emit('selectUser', first)
|
||||
await selectTreeNode(treRef.value, first)
|
||||
}
|
||||
|
||||
loadTree()
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
172
src/components/tree/govern/lineTreeUtils.ts
Normal file
172
src/components/tree/govern/lineTreeUtils.ts
Normal file
@@ -0,0 +1,172 @@
|
||||
import { nextTick } from 'vue'
|
||||
|
||||
export interface LineTreeLeaves {
|
||||
govern: any[]
|
||||
portable: any[]
|
||||
monitor: any[]
|
||||
engineering: any[]
|
||||
}
|
||||
|
||||
export interface LineTreeDecorators {
|
||||
primary: () => string
|
||||
statusColor: (comFlag: number) => string
|
||||
applyMeta: (
|
||||
node: any,
|
||||
meta: { icon: string; color?: string; level?: number; disabled?: boolean }
|
||||
) => void
|
||||
}
|
||||
|
||||
export function createLineTreeDecorators(getPrimaryColor: () => string): LineTreeDecorators {
|
||||
const offlineColor = '#e26257 !important'
|
||||
const statusColor = (comFlag: number) => (comFlag === 2 ? getPrimaryColor() : offlineColor)
|
||||
|
||||
const applyMeta = (
|
||||
node: any,
|
||||
meta: { icon: string; color?: string; level?: number; disabled?: boolean }
|
||||
) => {
|
||||
node.icon = meta.icon
|
||||
if (meta.color !== undefined) node.color = meta.color
|
||||
if (meta.level !== undefined) node.level = meta.level
|
||||
if (meta.disabled) node.disabled = true
|
||||
}
|
||||
|
||||
return {
|
||||
primary: getPrimaryColor,
|
||||
statusColor,
|
||||
applyMeta
|
||||
}
|
||||
}
|
||||
|
||||
export type TreeRefKey = 'treeRef1' | 'treeRef2' | 'treeRef3' | 'treeRef4'
|
||||
|
||||
export interface DecorateLineTreeOptions {
|
||||
/** 是否禁用父级节点（分析树隐藏父节点，测点树不禁用） */
|
||||
disableParents?: boolean
|
||||
}
|
||||
|
||||
/** 装饰线路树节点并收集可选叶子节点 */
|
||||
export function decorateLineTree(
|
||||
data: any[],
|
||||
type: string | undefined,
|
||||
decorators: LineTreeDecorators,
|
||||
options: DecorateLineTreeOptions = {}
|
||||
): LineTreeLeaves {
|
||||
const leaves: LineTreeLeaves = { govern: [], portable: [], monitor: [], engineering: [] }
|
||||
const { primary, statusColor, applyMeta } = decorators
|
||||
const disableParents = options.disableParents ?? true
|
||||
const parentDisabled = disableParents ? ({ disabled: true } as const) : {}
|
||||
|
||||
data.forEach(item => {
|
||||
if (type === '2') {
|
||||
applyMeta(item, { icon: 'el-icon-HomeFilled', color: primary(), ...parentDisabled })
|
||||
item.children?.forEach((child: any) => {
|
||||
applyMeta(child, { icon: 'el-icon-List', color: primary(), ...parentDisabled })
|
||||
child.children?.forEach((grand: any) => {
|
||||
applyMeta(grand, {
|
||||
icon: 'el-icon-Platform',
|
||||
color: statusColor(grand.comFlag),
|
||||
level: 2,
|
||||
...parentDisabled
|
||||
})
|
||||
grand.children?.forEach((leaf: any) => {
|
||||
applyMeta(leaf, { icon: 'el-icon-Platform', color: statusColor(leaf.comFlag) })
|
||||
leaves.engineering.push(leaf)
|
||||
})
|
||||
})
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if (item.name === '治理设备') {
|
||||
item.children?.forEach((l1: any) => {
|
||||
applyMeta(l1, { icon: 'el-icon-HomeFilled', color: primary(), level: 1, ...parentDisabled })
|
||||
l1.children?.forEach((l2: any) => {
|
||||
applyMeta(l2, { icon: 'el-icon-List', color: primary(), level: 1, ...parentDisabled })
|
||||
l2.children?.forEach((l3: any) => {
|
||||
applyMeta(l3, {
|
||||
icon: 'el-icon-Platform',
|
||||
color: statusColor(l3.comFlag),
|
||||
level: 2,
|
||||
...parentDisabled
|
||||
})
|
||||
l3.children?.forEach((l4: any) => {
|
||||
applyMeta(l4, { icon: 'el-icon-Platform', color: statusColor(l4.comFlag) })
|
||||
leaves.govern.push(l4)
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
} else if (item.name === '便携式设备') {
|
||||
item.children?.forEach((l1: any) => {
|
||||
applyMeta(l1, { icon: 'el-icon-Platform', color: statusColor(l1.comFlag) })
|
||||
l1.children?.forEach((l2: any) => {
|
||||
applyMeta(l2, { icon: 'el-icon-Platform', color: statusColor(l2.comFlag) })
|
||||
leaves.portable.push(l2)
|
||||
})
|
||||
})
|
||||
} else if (item.name === '监测设备') {
|
||||
item.children?.forEach((l1: any) => {
|
||||
applyMeta(l1, { icon: 'el-icon-HomeFilled', color: primary(), level: 1, ...parentDisabled })
|
||||
l1.children?.forEach((l2: any) => {
|
||||
applyMeta(l2, { icon: 'el-icon-List', color: primary(), level: 1, ...parentDisabled })
|
||||
l2.children?.forEach((l3: any) => {
|
||||
applyMeta(l3, {
|
||||
icon: 'el-icon-Platform',
|
||||
color: statusColor(l3.comFlag),
|
||||
level: 1,
|
||||
...parentDisabled
|
||||
})
|
||||
l3.children?.forEach((l4: any) => {
|
||||
applyMeta(l4, { icon: 'el-icon-Platform', color: statusColor(l4.comFlag) })
|
||||
leaves.monitor.push(l4)
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
return leaves
|
||||
}
|
||||
|
||||
/** 从折叠面板树数据中收集叶子节点（与 decorateLineTree 层级一致） */
|
||||
export function collectDeviceLeaves(
|
||||
governNodes: any[],
|
||||
portableNodes: any[],
|
||||
monitorNodes: any[]
|
||||
): Pick<LineTreeLeaves, 'govern' | 'portable' | 'monitor'> {
|
||||
const govern: any[] = []
|
||||
const portable: any[] = []
|
||||
const monitor: any[] = []
|
||||
|
||||
governNodes.forEach(l1 => {
|
||||
l1.children?.forEach((l2: any) => {
|
||||
l2.children?.forEach((l3: any) => {
|
||||
l3.children?.forEach((l4: any) => govern.push(l4))
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
portableNodes.forEach(l1 => {
|
||||
l1.children?.forEach((l2: any) => portable.push(l2))
|
||||
})
|
||||
|
||||
monitorNodes.forEach(l1 => {
|
||||
l1.children?.forEach((l2: any) => {
|
||||
l2.children?.forEach((l3: any) => {
|
||||
l3.children?.forEach((l4: any) => monitor.push(l4))
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
return { govern, portable, monitor }
|
||||
}
|
||||
|
||||
export async function waitForTreeRef(treRef: any, refKey: TreeRefKey, maxRetries = 20) {
|
||||
for (let i = 0; i < maxRetries; i++) {
|
||||
await nextTick()
|
||||
if (treRef?.[refKey]) return treRef[refKey]
|
||||
await new Promise(resolve => setTimeout(resolve, 50))
|
||||
}
|
||||
return null
|
||||
}
|
||||
@@ -1,29 +1,28 @@
|
||||
<template>
|
||||
<Tree ref="treRef" :data="tree" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { getFormalUserList } from '@/api/user-boot/official'
|
||||
import Tree from '../cloudDevice.vue'
|
||||
import { useConfig } from '@/stores/config'
|
||||
import { ref, reactive, nextTick } from 'vue'
|
||||
const config = useConfig()
|
||||
const tree = ref()
|
||||
const treRef = ref()
|
||||
import { mapUserTreeNodes, selectTreeNode } from './treeCommonUtils'
|
||||
|
||||
const tree = ref<any[]>([])
|
||||
const treRef = ref<InstanceType<typeof Tree>>()
|
||||
const emit = defineEmits(['selectUser'])
|
||||
getFormalUserList().then((res: any) => {
|
||||
if (res.code === 'A0000') {
|
||||
tree.value = res.data.map((item: any) => {
|
||||
return {
|
||||
...item,
|
||||
icon: 'el-icon-User',
|
||||
color: 'royalblue'
|
||||
}
|
||||
})
|
||||
emit('selectUser', tree.value[0])
|
||||
nextTick(() => {
|
||||
treRef.value.treeRef.setCurrentKey(tree.value[0]?.id)
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
async function loadTree() {
|
||||
const res: any = await getFormalUserList()
|
||||
if (res.code !== 'A0000') return
|
||||
|
||||
tree.value = mapUserTreeNodes(res.data)
|
||||
const first = tree.value[0]
|
||||
if (!first) return
|
||||
|
||||
emit('selectUser', first)
|
||||
await selectTreeNode(treRef.value, first)
|
||||
}
|
||||
|
||||
loadTree()
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
@@ -5,204 +5,99 @@
|
||||
:data="tree"
|
||||
default-expand-all
|
||||
@changePointType="changePointType"
|
||||
@changeTreeType="info"
|
||||
@changeTreeType="loadTree"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, nextTick, onMounted, defineProps } from 'vue'
|
||||
import { ref, nextTick } from 'vue'
|
||||
import Tree from '../point.vue'
|
||||
import { getLineTree } from '@/api/cs-device-boot/csLedger'
|
||||
import { useConfig } from '@/stores/config'
|
||||
import { querySysExcel } from '@/api/harmonic-boot/luckyexcel'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
// const props = defineProps(['template'])
|
||||
import {
|
||||
createLineTreeDecorators,
|
||||
decorateLineTree,
|
||||
waitForTreeRef,
|
||||
type LineTreeLeaves,
|
||||
type TreeRefKey
|
||||
} from './lineTreeUtils'
|
||||
|
||||
interface Props {
|
||||
template?: boolean
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
template: false
|
||||
})
|
||||
|
||||
defineOptions({
|
||||
name: 'govern/deviceTree'
|
||||
name: 'govern/pointTree'
|
||||
})
|
||||
|
||||
const emit = defineEmits(['init', 'checkChange', 'pointTypeChange', 'Policy'])
|
||||
|
||||
const config = useConfig()
|
||||
const tree = ref()
|
||||
const dictData = useDictData()
|
||||
const treRef = ref()
|
||||
const tree = ref<any[]>([])
|
||||
const treRef = ref<InstanceType<typeof Tree>>()
|
||||
const width = ref('')
|
||||
|
||||
const info = (type?: string) => {
|
||||
tree.value = []
|
||||
let arr1: any[] = []
|
||||
let arr2: any[] = []
|
||||
let arr3: any[] = []
|
||||
let arr4: any[] = []
|
||||
getLineTree({ type: type == '2' ? 'engineering' : '' }).then(res => {
|
||||
//治理设备
|
||||
const decorators = createLineTreeDecorators(() => config.getColorVal('elementUiPrimary'))
|
||||
|
||||
res.data.map((item: any) => {
|
||||
if (type == '2') {
|
||||
item.icon = 'el-icon-HomeFilled'
|
||||
item.color = config.getColorVal('elementUiPrimary')
|
||||
item.children.forEach((item: any) => {
|
||||
item.icon = 'el-icon-List'
|
||||
item.color = config.getColorVal('elementUiPrimary')
|
||||
item.children.forEach((item2: any) => {
|
||||
// item2.icon = 'el-icon-List'
|
||||
// item2.color = config.getColorVal('elementUiPrimary')
|
||||
item2.icon = 'el-icon-Platform'
|
||||
item2.level = 2
|
||||
item2.color =
|
||||
item2.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
|
||||
item2.children.forEach((item3: any) => {
|
||||
item3.icon = 'el-icon-Platform'
|
||||
|
||||
item3.color =
|
||||
item3.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
|
||||
arr4.push(item3)
|
||||
// item3.children.forEach((item4: any) => {
|
||||
// item4.icon = 'el-icon-Platform'
|
||||
// item4.color =
|
||||
// item4.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
|
||||
|
||||
// })
|
||||
})
|
||||
})
|
||||
})
|
||||
} else {
|
||||
if (item.name == '治理设备') {
|
||||
item.children.forEach((item: any) => {
|
||||
item.icon = 'el-icon-HomeFilled'
|
||||
item.level = 1
|
||||
item.color = config.getColorVal('elementUiPrimary')
|
||||
item.children.forEach((item2: any) => {
|
||||
item2.icon = 'el-icon-List'
|
||||
item2.level = 1
|
||||
item2.color = config.getColorVal('elementUiPrimary')
|
||||
item2.children.forEach((item3: any) => {
|
||||
item3.icon = 'el-icon-Platform'
|
||||
item3.level = 2
|
||||
item3.color =
|
||||
item3.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
|
||||
item3.children.forEach((item4: any) => {
|
||||
item4.icon = 'el-icon-Platform'
|
||||
item4.color =
|
||||
item4.comFlag === 2
|
||||
? config.getColorVal('elementUiPrimary')
|
||||
: '#e26257 !important'
|
||||
// item4.color = '#e26257 !important'
|
||||
arr1.push(item4)
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
} else if (item.name == '便携式设备') {
|
||||
item.children.forEach((item: any) => {
|
||||
item.icon = 'el-icon-Platform'
|
||||
item.color = config.getColorVal('elementUiPrimary')
|
||||
item.color = item.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
|
||||
item.children.forEach((item2: any) => {
|
||||
item2.icon = 'el-icon-Platform'
|
||||
item2.color =
|
||||
item2.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
|
||||
arr2.push(item2)
|
||||
})
|
||||
})
|
||||
} else if (item.name == '监测设备') {
|
||||
item.children.forEach((item: any) => {
|
||||
item.icon = 'el-icon-HomeFilled'
|
||||
item.level = 1
|
||||
item.color = config.getColorVal('elementUiPrimary')
|
||||
item.children.forEach((item2: any) => {
|
||||
item2.icon = 'el-icon-List'
|
||||
item2.level = 1
|
||||
item2.color = config.getColorVal('elementUiPrimary')
|
||||
item2.children.forEach((item3: any) => {
|
||||
item3.icon = 'el-icon-Platform'
|
||||
item3.level = 1
|
||||
item3.color =
|
||||
item3.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
|
||||
item3.children.forEach((item4: any) => {
|
||||
item4.icon = 'el-icon-Platform'
|
||||
item4.color =
|
||||
item4.comFlag === 2
|
||||
? config.getColorVal('elementUiPrimary')
|
||||
: '#e26257 !important'
|
||||
// item4.color = '#e26257 !important'
|
||||
arr3.push(item4)
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
tree.value = res.data
|
||||
|
||||
nextTick(() => {
|
||||
setTimeout(() => {
|
||||
if (type == '2') {
|
||||
//初始化选中
|
||||
|
||||
treRef.value?.treeRef4.setCurrentKey(arr4[0].id)
|
||||
// 注册父组件事件
|
||||
emit('init', {
|
||||
level: 3,
|
||||
...arr4[0]
|
||||
})
|
||||
changePointType('4', arr4[0])
|
||||
return
|
||||
} else if (arr1.length > 0) {
|
||||
//初始化选中
|
||||
treRef.value?.treeRef1.setCurrentKey(arr1[0].id)
|
||||
// 注册父组件事件
|
||||
emit('init', {
|
||||
level: 2,
|
||||
...arr1[0]
|
||||
})
|
||||
return
|
||||
} else if (arr2.length > 0) {
|
||||
//初始化选中
|
||||
treRef.value?.treeRef2.setCurrentKey(arr2[0].id)
|
||||
// 注册父组件事件
|
||||
emit('init', {
|
||||
level: 2,
|
||||
...arr2[0]
|
||||
})
|
||||
return
|
||||
} else if (arr3.length > 0) {
|
||||
treRef.value?.treeRef3?.setCurrentKey(arr3[0].id)
|
||||
emit('init', {
|
||||
level: 2,
|
||||
...arr3[0]
|
||||
})
|
||||
return
|
||||
} else {
|
||||
emit('init')
|
||||
return
|
||||
}
|
||||
}, 500)
|
||||
})
|
||||
})
|
||||
}
|
||||
const changePointType = (val: any, obj: any) => {
|
||||
emit('pointTypeChange', val, obj)
|
||||
}
|
||||
if (props.template) {
|
||||
// id: dictData.state.area[0]?.id
|
||||
querySysExcel({})
|
||||
.then((res: any) => {
|
||||
emit('Policy', res.data)
|
||||
info()
|
||||
})
|
||||
.catch(err => {
|
||||
info()
|
||||
})
|
||||
} else {
|
||||
info()
|
||||
|
||||
async function selectInitialNode(type: string | undefined, leaves: LineTreeLeaves) {
|
||||
const candidates: { refKey: TreeRefKey; list: any[]; level: number }[] =
|
||||
type === '2'
|
||||
? [{ refKey: 'treeRef4', list: leaves.engineering, level: 3 }]
|
||||
: [
|
||||
{ refKey: 'treeRef1', list: leaves.govern, level: 2 },
|
||||
{ refKey: 'treeRef2', list: leaves.portable, level: 2 },
|
||||
{ refKey: 'treeRef3', list: leaves.monitor, level: 2 }
|
||||
]
|
||||
|
||||
for (const { refKey, list, level } of candidates) {
|
||||
const node = list[0]
|
||||
if (!node) continue
|
||||
|
||||
const treeInstance = await waitForTreeRef(treRef.value, refKey)
|
||||
treeInstance?.setCurrentKey(node.id)
|
||||
emit('init', { level, ...node })
|
||||
|
||||
if (type === '2') {
|
||||
changePointType('4', node)
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
emit('init')
|
||||
}
|
||||
onMounted(() => {})
|
||||
|
||||
const loadTree = (type?: string) => {
|
||||
tree.value = []
|
||||
getLineTree({ type: type === '2' ? 'engineering' : '' }).then(res => {
|
||||
const leaves = decorateLineTree(res.data, type, decorators, { disableParents: false })
|
||||
tree.value = res.data
|
||||
nextTick(() => selectInitialNode(type, leaves))
|
||||
})
|
||||
}
|
||||
|
||||
function bootstrap() {
|
||||
if (props.template) {
|
||||
querySysExcel({})
|
||||
.then((res: any) => {
|
||||
emit('Policy', res.data)
|
||||
loadTree()
|
||||
})
|
||||
.catch(() => loadTree())
|
||||
} else {
|
||||
loadTree()
|
||||
}
|
||||
}
|
||||
|
||||
bootstrap()
|
||||
|
||||
defineExpose({ treRef })
|
||||
</script>
|
||||
|
||||
@@ -22,14 +22,14 @@
|
||||
@node-click="clickNode"
|
||||
:expand-on-click-node="false"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<template #default="{ node, data: nodeData }">
|
||||
<span class="custom-tree-node">
|
||||
<div class="left" style="display: flex; align-items: center">
|
||||
<Icon
|
||||
:name="data.icon"
|
||||
:name="nodeData.icon"
|
||||
style="font-size: 16px"
|
||||
:style="{ color: data.color }"
|
||||
v-if="data.icon"
|
||||
:style="{ color: nodeData.color }"
|
||||
v-if="nodeData.icon"
|
||||
/>
|
||||
<span style="margin-left: 5px">{{ node.label }}</span>
|
||||
</div>
|
||||
@@ -42,128 +42,83 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, nextTick, watch, defineProps, defineEmits } from 'vue'
|
||||
import { getSchemeTree, getTestRecordInfo } from '@/api/cs-device-boot/planData'
|
||||
import { ref, watch } from 'vue'
|
||||
import { getSchemeTree } from '@/api/cs-device-boot/planData'
|
||||
import { useConfig } from '@/stores/config'
|
||||
import useCurrentInstance from '@/utils/useCurrentInstance'
|
||||
import { ElTree } from 'element-plus'
|
||||
import { querySysExcel } from '@/api/harmonic-boot/luckyexcel'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
defineOptions({
|
||||
name: 'govern/schemeTree'
|
||||
})
|
||||
import { createLineTreeDecorators } from './lineTreeUtils'
|
||||
import { bootstrapWithTemplate } from './treeCommonUtils'
|
||||
import { createTreeFilterNode } from './treeFilterUtils'
|
||||
|
||||
defineOptions({ name: 'govern/schemeTree', inheritAttrs: false })
|
||||
|
||||
interface Props {
|
||||
template?: boolean
|
||||
}
|
||||
const dictData = useDictData()
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
template: false
|
||||
})
|
||||
const filterText = ref('')
|
||||
watch(filterText, val => {
|
||||
treRef.value!.filter(val)
|
||||
})
|
||||
|
||||
const filterNode = (value: string, data: any, node: any) => {
|
||||
if (!value) return true
|
||||
// return data.name.includes(value)
|
||||
if (data.name) {
|
||||
return chooseNode(value, data, node)
|
||||
}
|
||||
}
|
||||
const chooseNode = (value: string, data: any, node: any) => {
|
||||
if (data.name.indexOf(value) !== -1) {
|
||||
return true
|
||||
}
|
||||
const level = node.level
|
||||
// 如果传入的节点本身就是一级节点就不用校验了
|
||||
if (level === 1) {
|
||||
return false
|
||||
}
|
||||
// 先取当前节点的父节点
|
||||
let parentData = node.parent
|
||||
// 遍历当前节点的父节点
|
||||
let index = 0
|
||||
while (index < level - 1) {
|
||||
// 如果匹配到直接返回，此处name值是中文字符，enName是英文字符。判断匹配中英文过滤
|
||||
if (parentData.data.name.indexOf(value) !== -1) {
|
||||
return true
|
||||
}
|
||||
// 否则的话再往上一层做匹配
|
||||
parentData = parentData.parent
|
||||
index++
|
||||
}
|
||||
// 没匹配到返回false
|
||||
return false
|
||||
}
|
||||
/** 树形结构数据 */
|
||||
const defaultProps = {
|
||||
children: 'children',
|
||||
label: 'name',
|
||||
value: 'id'
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), { template: false })
|
||||
|
||||
const emit = defineEmits(['init', 'checkChange', 'nodeChange', 'editNode', 'getChart', 'Policy'])
|
||||
const config = useConfig()
|
||||
const tree = ref()
|
||||
const treRef = ref()
|
||||
const id: any = ref(null)
|
||||
const treeData = ref({})
|
||||
//获取方案树形数据
|
||||
const getTreeList = () => {
|
||||
getSchemeTree().then(res => {
|
||||
let arr: any[] = []
|
||||
|
||||
res.data.forEach((item: any) => {
|
||||
item.icon = 'el-icon-Menu'
|
||||
item.color = config.getColorVal('elementUiPrimary')
|
||||
item?.children.forEach((item2: any) => {
|
||||
item2.icon = 'el-icon-Document'
|
||||
item2.color = config.getColorVal('elementUiPrimary')
|
||||
arr.push(item2)
|
||||
})
|
||||
const config = useConfig()
|
||||
const tree = ref<any[]>([])
|
||||
const treRef = ref<InstanceType<typeof ElTree>>()
|
||||
const filterText = ref('')
|
||||
const id = ref<string | null>(null)
|
||||
const planId = ref('')
|
||||
|
||||
const defaultProps = { children: 'children', label: 'name', value: 'id' }
|
||||
const decorators = createLineTreeDecorators(() => config.getColorVal('elementUiPrimary'))
|
||||
const filterNode = createTreeFilterNode()
|
||||
|
||||
watch(filterText, val => treRef.value?.filter(val))
|
||||
|
||||
function decorateSchemeTree(data: any[]): any[] {
|
||||
const { primary, applyMeta } = decorators
|
||||
const leaves: any[] = []
|
||||
|
||||
data.forEach(item => {
|
||||
applyMeta(item, { icon: 'el-icon-Menu', color: primary() })
|
||||
item.children?.forEach((child: any) => {
|
||||
applyMeta(child, { icon: 'el-icon-Document', color: primary() })
|
||||
leaves.push(child)
|
||||
})
|
||||
})
|
||||
|
||||
return leaves
|
||||
}
|
||||
|
||||
function getTreeList() {
|
||||
getSchemeTree().then(res => {
|
||||
const leaves = decorateSchemeTree(res.data)
|
||||
tree.value = res.data
|
||||
nextTick(() => {
|
||||
if (arr.length) {
|
||||
treRef.value.setCurrentKey(id.value || arr[0].id)
|
||||
let list = id.value ? arr.find((item: any) => item.id == id.value) : arr[0]
|
||||
// 注册父组件事件
|
||||
emit('init', {
|
||||
level: 2,
|
||||
...list
|
||||
})
|
||||
} else {
|
||||
emit('init')
|
||||
}
|
||||
})
|
||||
|
||||
const node = id.value ? leaves.find(item => item.id == id.value) : leaves[0]
|
||||
if (!node) {
|
||||
emit('init')
|
||||
return
|
||||
}
|
||||
|
||||
treRef.value?.setCurrentKey(node.id)
|
||||
emit('init', { level: 2, ...node })
|
||||
})
|
||||
}
|
||||
|
||||
//方案id
|
||||
const planId: any = ref('')
|
||||
|
||||
const clickNode = (e: anyObj) => {
|
||||
e?.children ? (planId.value = e.id) : (planId.value = e.pid)
|
||||
const clickNode = (e: any) => {
|
||||
planId.value = e?.children ? e.id : e.pid
|
||||
id.value = e.id
|
||||
emit('nodeChange', e)
|
||||
}
|
||||
|
||||
if (props.template) {
|
||||
// id: dictData.state.area[0]?.id
|
||||
querySysExcel({})
|
||||
.then((res: any) => {
|
||||
emit('Policy', res.data)
|
||||
getTreeList()
|
||||
})
|
||||
.catch(err => {
|
||||
getTreeList()
|
||||
})
|
||||
} else {
|
||||
getTreeList()
|
||||
}
|
||||
bootstrapWithTemplate(
|
||||
props.template,
|
||||
getTreeList,
|
||||
() => querySysExcel({}),
|
||||
data => emit('Policy', data)
|
||||
)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.cn-tree {
|
||||
flex-shrink: 0;
|
||||
|
||||
@@ -1,105 +1,64 @@
|
||||
<template>
|
||||
<Tree ref="treRef" :width="width" :data="tree" default-expand-all @checkedNodesChange="handleCheckedNodesChange"/>
|
||||
<Tree
|
||||
ref="treRef"
|
||||
:width="width"
|
||||
:data="tree"
|
||||
default-expand-all
|
||||
@checkedNodesChange="handleCheckedNodesChange"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, nextTick, onMounted, defineProps } from 'vue'
|
||||
import { ref } from 'vue'
|
||||
import Tree from '../select.vue'
|
||||
import { getLineTree } from '@/api/cs-device-boot/csLedger'
|
||||
import { useConfig } from '@/stores/config'
|
||||
import { getTemplateByDept } from '@/api/harmonic-boot/luckyexcel'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
// const props = defineProps(['template'])
|
||||
import { createLineTreeDecorators, decorateLineTree } from './lineTreeUtils'
|
||||
import { bootstrapWithTemplate, selectTreeNode } from './treeCommonUtils'
|
||||
|
||||
interface Props {
|
||||
template?: boolean
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
template: false
|
||||
})
|
||||
defineOptions({
|
||||
name: 'govern/deviceTree'
|
||||
})
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), { template: false })
|
||||
|
||||
defineOptions({ name: 'govern/selectTree' })
|
||||
|
||||
const emit = defineEmits(['init', 'checkChange', 'pointTypeChange', 'Policy'])
|
||||
|
||||
const config = useConfig()
|
||||
const tree = ref()
|
||||
const dictData = useDictData()
|
||||
const treRef = ref()
|
||||
const tree = ref<any[]>([])
|
||||
const treRef = ref<InstanceType<typeof Tree>>()
|
||||
const width = ref('')
|
||||
|
||||
const info = () => {
|
||||
const decorators = createLineTreeDecorators(() => config.getColorVal('elementUiPrimary'))
|
||||
|
||||
const handleCheckedNodesChange = (nodes: any[]) => emit('checkChange', nodes)
|
||||
|
||||
async function loadTree() {
|
||||
tree.value = []
|
||||
let arr3: any[] = []
|
||||
getLineTree().then(res => {
|
||||
//治理设备
|
||||
res.data.map((item: any) => {
|
||||
if (item.name == '监测设备') {
|
||||
item.children.forEach((item: any) => {
|
||||
item.icon = 'el-icon-HomeFilled'
|
||||
item.level = 1
|
||||
item.color = config.getColorVal('elementUiPrimary')
|
||||
item.children.forEach((item2: any) => {
|
||||
item2.icon = 'el-icon-List'
|
||||
item2.level = 1
|
||||
item2.color = config.getColorVal('elementUiPrimary')
|
||||
item2.children.forEach((item3: any) => {
|
||||
item3.icon = 'el-icon-Platform'
|
||||
item3.level = 1
|
||||
item3.color =
|
||||
item3.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
|
||||
item3.children.forEach((item4: any) => {
|
||||
item4.icon = 'el-icon-Platform'
|
||||
item4.color =
|
||||
item4.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
|
||||
// item4.color = '#e26257 !important'
|
||||
arr3.push(item4)
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
tree.value = res.data.filter(item => item.name == '监测设备')
|
||||
nextTick(() => {
|
||||
if (arr3.length) {
|
||||
//初始化选中
|
||||
treRef.value.treeRef.setCurrentKey(arr3[0].id)
|
||||
// 注册父组件事件
|
||||
emit('init', {
|
||||
level: 2,
|
||||
...arr3[0]
|
||||
})
|
||||
return
|
||||
}
|
||||
else {
|
||||
emit('init')
|
||||
return
|
||||
}
|
||||
})
|
||||
const res = await getLineTree()
|
||||
const leaves = decorateLineTree(res.data, '1', decorators, { disableParents: false })
|
||||
tree.value = res.data.filter((item: any) => item.name === '监测设备')
|
||||
|
||||
const node = leaves.monitor[0]
|
||||
if (!node) {
|
||||
emit('init')
|
||||
return
|
||||
}
|
||||
|
||||
await selectTreeNode(treRef.value, node, {
|
||||
onSelect: selected => emit('init', { level: 2, ...selected })
|
||||
})
|
||||
}
|
||||
|
||||
// 处理子组件传递的勾选节点变化，并转发给父组件
|
||||
const handleCheckedNodesChange = (nodes: any[]) => {
|
||||
// 先给父组件
|
||||
emit('checkChange', nodes)
|
||||
}
|
||||
|
||||
|
||||
if (props.template) {
|
||||
getTemplateByDept({ id: dictData.state.area[0]?.id })
|
||||
.then((res: any) => {
|
||||
emit('Policy', res.data)
|
||||
info()
|
||||
})
|
||||
.catch(err => {
|
||||
info()
|
||||
})
|
||||
} else {
|
||||
info()
|
||||
}
|
||||
|
||||
|
||||
|
||||
onMounted(() => {})
|
||||
bootstrapWithTemplate(
|
||||
props.template,
|
||||
loadTree,
|
||||
() => getTemplateByDept({ id: dictData.state.area[0]?.id }),
|
||||
data => emit('Policy', data)
|
||||
)
|
||||
</script>
|
||||
|
||||
58
src/components/tree/govern/treeCommonUtils.ts
Normal file
58
src/components/tree/govern/treeCommonUtils.ts
Normal file
@@ -0,0 +1,58 @@
|
||||
import { nextTick } from 'vue'
|
||||
import { createLineTreeDecorators, type LineTreeDecorators } from './lineTreeUtils'
|
||||
|
||||
export { createLineTreeDecorators, type LineTreeDecorators }
|
||||
|
||||
export function findNodeById(nodes: any[], id: string): any | null {
|
||||
for (const node of nodes) {
|
||||
if (node.id === id) return node
|
||||
if (node.children?.length) {
|
||||
const found = findNodeById(node.children, id)
|
||||
if (found) return found
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
export async function waitForSingleTreeRef(treRef: any, maxRetries = 20) {
|
||||
for (let i = 0; i < maxRetries; i++) {
|
||||
await nextTick()
|
||||
if (treRef?.treeRef) return treRef.treeRef
|
||||
await new Promise(resolve => setTimeout(resolve, 50))
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
export async function selectTreeNode(
|
||||
treRef: any,
|
||||
node: any | undefined,
|
||||
options?: { level?: number; onSelect?: (node: any) => void }
|
||||
) {
|
||||
if (!node) return false
|
||||
const treeInstance = await waitForSingleTreeRef(treRef)
|
||||
treeInstance?.setCurrentKey(node.id)
|
||||
options?.onSelect?.(node)
|
||||
return true
|
||||
}
|
||||
|
||||
export function bootstrapWithTemplate(
|
||||
template: boolean,
|
||||
loadFn: () => void,
|
||||
fetchTemplate: () => Promise<any>,
|
||||
onPolicy: (data: any) => void
|
||||
) {
|
||||
if (template) {
|
||||
fetchTemplate()
|
||||
.then(res => {
|
||||
onPolicy(res.data)
|
||||
loadFn()
|
||||
})
|
||||
.catch(() => loadFn())
|
||||
} else {
|
||||
loadFn()
|
||||
}
|
||||
}
|
||||
|
||||
export function mapUserTreeNodes(data: any[], icon = 'el-icon-User', color = 'royalblue') {
|
||||
return data.map(item => ({ ...item, icon, color }))
|
||||
}
|
||||
20
src/components/tree/govern/treeFilterUtils.ts
Normal file
20
src/components/tree/govern/treeFilterUtils.ts
Normal file
@@ -0,0 +1,20 @@
|
||||
/** 树节点搜索：匹配当前节点或任一祖先节点名称 */
|
||||
export function matchTreeNodeName(value: string, data: any, node: any): boolean {
|
||||
if (!value) return true
|
||||
if (!data?.name) return false
|
||||
if (data.name.indexOf(value) !== -1) return true
|
||||
|
||||
const level = node.level
|
||||
if (level === 1) return false
|
||||
|
||||
let parentData = node.parent
|
||||
for (let i = 0; i < level - 1; i++) {
|
||||
if (parentData?.data?.name?.indexOf(value) !== -1) return true
|
||||
parentData = parentData.parent
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
export function createTreeFilterNode() {
|
||||
return (value: string, data: any, node: any): boolean => matchTreeNodeName(value, data, node)
|
||||
}
|
||||
@@ -1,44 +1,50 @@
|
||||
<template>
|
||||
<div :style="{ width: menuCollapse ? '40px' : props.width }" style="transition: all 0.3s; overflow: hidden">
|
||||
<Icon
|
||||
<div
|
||||
class="cn-tree-root"
|
||||
:class="{ 'is-collapsed': menuCollapse, 'is-fill-height': props.fillHeight }"
|
||||
:style="{ width: menuCollapse ? '40px' : props.width }"
|
||||
>
|
||||
<!-- <Icon
|
||||
v-show="menuCollapse"
|
||||
@click="onMenuCollapse"
|
||||
:name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
|
||||
:class="menuCollapse ? 'unfold' : ''"
|
||||
size="18"
|
||||
class="fold ml10 mt20 menu-collapse"
|
||||
style="cursor: pointer"
|
||||
/>
|
||||
<div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1 }">
|
||||
<div style="display: flex; align-items: center" class="mb10">
|
||||
<el-input maxlength="32" v-model.trim="filterText" placeholder="请输入内容" clearable>
|
||||
size="18px"
|
||||
class="cn-tree-root__collapse-btn cn-tree-root__collapse-btn--float"
|
||||
/> -->
|
||||
<div class="cn-tree" :class="{ 'is-hidden': menuCollapse }">
|
||||
<div class="cn-tree__toolbar">
|
||||
<el-input
|
||||
maxlength="32"
|
||||
v-model.trim="filterText"
|
||||
placeholder="请输入内容"
|
||||
clearable
|
||||
class="cn-tree__search"
|
||||
>
|
||||
<template #prefix>
|
||||
<Icon name="el-icon-Search" style="font-size: 16px" />
|
||||
</template>
|
||||
</el-input>
|
||||
<el-tooltip placement="bottom" :hide-after="0" v-if="props.showPush">
|
||||
<template #content>
|
||||
<span>台账推送</span>
|
||||
</template>
|
||||
|
||||
<el-tooltip v-if="props.showPush" placement="bottom" :hide-after="0" content="台账推送">
|
||||
<Icon
|
||||
name="el-icon-Promotion"
|
||||
size="20"
|
||||
class="fold ml10 mr10 menu-collapse"
|
||||
style="cursor: pointer"
|
||||
size="20px"
|
||||
class="cn-tree__push-btn"
|
||||
:style="{ color: config.getColorVal('elementUiPrimary') }"
|
||||
@click="onAdd"
|
||||
/>
|
||||
</el-tooltip>
|
||||
<!-- <Icon @click='onMenuCollapse' :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'" v-else
|
||||
:class="menuCollapse ? 'unfold' : ''" size='18' class='fold ml10 menu-collapse'
|
||||
style='cursor: pointer' v-if='props.canExpand' /> -->
|
||||
<!-- <Icon
|
||||
v-if="props.canExpand"
|
||||
@click="onMenuCollapse"
|
||||
name="el-icon-Fold"
|
||||
size="18px"
|
||||
class="cn-tree__collapse-btn"
|
||||
/> -->
|
||||
</div>
|
||||
|
||||
<el-tree
|
||||
:style="{ height: 'calc(100vh - 190px)' }"
|
||||
style="overflow: auto"
|
||||
ref="treeRef"
|
||||
:style="{ height: treeHeight }"
|
||||
:props="defaultProps"
|
||||
highlight-current
|
||||
:default-expand-all="false"
|
||||
@@ -47,15 +53,15 @@
|
||||
node-key="id"
|
||||
v-bind="$attrs"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<template #default="{ node, data: nodeData }">
|
||||
<span class="custom-tree-node">
|
||||
<Icon
|
||||
:name="data.icon"
|
||||
v-if="nodeData.icon"
|
||||
:name="nodeData.icon"
|
||||
style="font-size: 16px"
|
||||
:style="{ color: data.color }"
|
||||
v-if="data.icon"
|
||||
:style="{ color: nodeData.color }"
|
||||
/>
|
||||
<span style="margin-left: 4px">{{ node.label }}</span>
|
||||
<span class="custom-tree-node__label">{{ node.label }}</span>
|
||||
</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
@@ -66,113 +72,155 @@
|
||||
<script lang="ts" setup>
|
||||
import useCurrentInstance from '@/utils/useCurrentInstance'
|
||||
import { ElTree } from 'element-plus'
|
||||
import { ref, watch } from 'vue'
|
||||
import { ref, watch, computed } from 'vue'
|
||||
import { useConfig } from '@/stores/config'
|
||||
import { createTreeFilterNode } from './govern/treeFilterUtils'
|
||||
|
||||
defineOptions({
|
||||
name: 'govern/tree'
|
||||
})
|
||||
defineOptions({ name: 'govern/indexTree', inheritAttrs: false })
|
||||
|
||||
interface Props {
|
||||
width?: string
|
||||
canExpand?: boolean
|
||||
showPush?: boolean
|
||||
/** 默认高度基准偏移（100vh - baseOffset） */
|
||||
baseOffset?: number
|
||||
/** 在 baseOffset 基础上额外减去的高度 */
|
||||
height?: number
|
||||
/** 自定义树高度，优先级最高 */
|
||||
treeHeight?: string
|
||||
/** 撑满父容器高度 */
|
||||
fillHeight?: boolean
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
width: '280px',
|
||||
canExpand: true,
|
||||
showPush: false
|
||||
showPush: false,
|
||||
baseOffset: 190,
|
||||
height: 0,
|
||||
treeHeight: '',
|
||||
fillHeight: false
|
||||
})
|
||||
|
||||
const emit = defineEmits(['checkTreeNodeChange', 'onAdd', 'changePointType'])
|
||||
|
||||
const config = useConfig()
|
||||
const { proxy } = useCurrentInstance()
|
||||
const menuCollapse = ref(false)
|
||||
const filterText = ref('')
|
||||
const defaultProps = {
|
||||
label: 'name',
|
||||
value: 'id'
|
||||
}
|
||||
const emit = defineEmits(['checkTreeNodeChange', 'onAdd'])
|
||||
watch(filterText, val => {
|
||||
treeRef.value!.filter(val)
|
||||
const defaultProps = { label: 'name', value: 'id' }
|
||||
const filterNode = createTreeFilterNode()
|
||||
|
||||
const SEARCH_BAR_HEIGHT = 42
|
||||
|
||||
const treeHeight = computed(() => {
|
||||
if (props.treeHeight) return props.treeHeight
|
||||
if (props.fillHeight) return `calc(100% - ${SEARCH_BAR_HEIGHT}px)`
|
||||
return `calc(100vh - ${props.baseOffset}px - ${props.height}px)`
|
||||
})
|
||||
|
||||
watch(filterText, val => treeRef.value?.filter(val))
|
||||
|
||||
const onMenuCollapse = () => {
|
||||
menuCollapse.value = !menuCollapse.value
|
||||
proxy.eventBus.emit('cnTreeCollapse', menuCollapse)
|
||||
}
|
||||
const filterNode = (value: string, data: any, node: any) => {
|
||||
console.log(value, data, node, 'filterNode')
|
||||
if (!value) return true
|
||||
// return data.name.includes(value)
|
||||
if (data.name) {
|
||||
return chooseNode(value, data, node)
|
||||
}
|
||||
}
|
||||
|
||||
// 过滤父节点 / 子节点 (如果输入的参数是父节点且能匹配，则返回该节点以及其下的所有子节点；如果参数是子节点，则返回该节点的父节点。name是中文字符，enName是英文字符.
|
||||
const chooseNode = (value: string, data: any, node: any) => {
|
||||
if (data.name.indexOf(value) !== -1) {
|
||||
return true
|
||||
}
|
||||
const level = node.level
|
||||
// 如果传入的节点本身就是一级节点就不用校验了
|
||||
if (level === 1) {
|
||||
return false
|
||||
}
|
||||
// 先取当前节点的父节点
|
||||
let parentData = node.parent
|
||||
// 遍历当前节点的父节点
|
||||
let index = 0
|
||||
while (index < level - 1) {
|
||||
// 如果匹配到直接返回，此处name值是中文字符，enName是英文字符。判断匹配中英文过滤
|
||||
if (parentData.data.name.indexOf(value) !== -1) {
|
||||
return true
|
||||
}
|
||||
// 否则的话再往上一层做匹配
|
||||
parentData = parentData.parent
|
||||
index++
|
||||
}
|
||||
// 没匹配到返回false
|
||||
return false
|
||||
}
|
||||
const checkTreeNodeChange = () => {
|
||||
// console.log(treeRef.value?.getCheckedNodes(), "ikkkkkiisiiisis");
|
||||
emit('checkTreeNodeChange', treeRef.value?.getCheckedNodes())
|
||||
}
|
||||
|
||||
const onAdd = () => {
|
||||
emit('onAdd')
|
||||
}
|
||||
const onAdd = () => emit('onAdd')
|
||||
|
||||
const treeRef = ref<InstanceType<typeof ElTree>>()
|
||||
defineExpose({ treeRef })
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.cn-tree {
|
||||
flex-shrink: 0;
|
||||
.cn-tree-root {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
// padding: 10px;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
transition: width 0.3s;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.is-fill-height {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&__collapse-btn {
|
||||
color: var(--el-color-primary);
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
|
||||
&--float {
|
||||
margin: 20px 0 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cn-tree {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
transition: opacity 0.3s;
|
||||
|
||||
&.is-hidden {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&__toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__search {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__push-btn,
|
||||
&__collapse-btn {
|
||||
color: var(--el-color-primary);
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__body {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:deep(.el-tree) {
|
||||
border: 1px solid var(--el-border-color);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
:deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
|
||||
background-color: var(--el-color-primary-light-7);
|
||||
}
|
||||
|
||||
.menu-collapse {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.custom-tree-node {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
|
||||
&__label {
|
||||
margin-left: 4px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,24 +1,19 @@
|
||||
<!-- 设备监控使用折叠面板渲染多个tree -->
|
||||
<template>
|
||||
<div :style="{ width: menuCollapse ? '40px' : props.width }" style="display: flex; overflow: hidden">
|
||||
<Icon
|
||||
<!-- <Icon
|
||||
v-show="menuCollapse"
|
||||
@click="onMenuCollapse"
|
||||
:name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
|
||||
:class="menuCollapse ? 'unfold' : ''"
|
||||
size="18"
|
||||
size="18px"
|
||||
class="fold ml10 mt20 menu-collapse"
|
||||
style="cursor: pointer"
|
||||
v-if="route.path != '/admin/govern/reportCore/statistics/index'"
|
||||
/>
|
||||
/> -->
|
||||
<div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1, display: menuCollapse ? 'none' : '' }">
|
||||
<div style="display: flex; align-items: center" class="mb10">
|
||||
<!-- <el-input maxlength="32" v-model.trim="filterText" placeholder="请输入内容" clearable>
|
||||
<template #prefix>
|
||||
<Icon name="el-icon-Search" style="font-size: 16px" />
|
||||
</template>
|
||||
</el-input> -->
|
||||
<el-input maxlength="32" v-model.trim="filterText" placeholder="请输入内容" clearable>
|
||||
<el-input maxlength="32" v-model.trim="filterText" placeholder="请输入内容" clearable>
|
||||
<template #prepend>
|
||||
<el-select v-model="treeType" @change="changeTreeType" style="min-width: 75px">
|
||||
<el-option
|
||||
@@ -33,35 +28,33 @@
|
||||
<Icon name="el-icon-Search" style="font-size: 16px" />
|
||||
</template>
|
||||
</el-input>
|
||||
<!-- -->
|
||||
<Icon
|
||||
<!-- <Icon
|
||||
@click="onMenuCollapse"
|
||||
:name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
|
||||
:class="menuCollapse ? 'unfold' : ''"
|
||||
size="18"
|
||||
size="18px"
|
||||
class="fold ml10 menu-collapse"
|
||||
style="cursor: pointer"
|
||||
v-if="props.canExpand && route.path != '/admin/govern/reportCore/statistics/index'"
|
||||
/>
|
||||
/> -->
|
||||
</div>
|
||||
|
||||
<el-collapse
|
||||
:accordion="true"
|
||||
v-model.trim="activeName"
|
||||
v-model="activeName"
|
||||
style="flex: 1; height: 100%"
|
||||
@change="changeDevice"
|
||||
v-if="treeType == '1'"
|
||||
v-loading="loading"
|
||||
>
|
||||
<el-collapse-item title="治理设备" name="0" v-if="zlDeviceData.length != 0">
|
||||
<el-select v-model.trim="process" clearable placeholder="请选择状态" class="mb10">
|
||||
<el-option label="功能调试" value="2"></el-option>
|
||||
<el-option label="出厂调试" value="3"></el-option>
|
||||
<el-option label="正式投运" value="4"></el-option>
|
||||
<el-collapse-item title="治理设备" name="0" v-if="zlDeviceData.length">
|
||||
<el-select v-model="process" clearable placeholder="请选择状态" class="mb10">
|
||||
<el-option label="功能调试" value="2" />
|
||||
<el-option label="出厂调试" value="3" />
|
||||
<el-option label="正式投运" value="4" />
|
||||
</el-select>
|
||||
|
||||
<el-tree
|
||||
:style="{ height: treeType.length != 0 ? 'calc(100vh - 380px)' : 'calc(100vh - 278px)' }"
|
||||
:style="{ height: governTreeHeight }"
|
||||
ref="treeRef1"
|
||||
:props="defaultProps"
|
||||
highlight-current
|
||||
@@ -72,22 +65,22 @@
|
||||
style="overflow: auto"
|
||||
:default-expand-all="false"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<template #default="{ node, data: nodeData }">
|
||||
<span class="custom-tree-node">
|
||||
<Icon
|
||||
:name="data.icon"
|
||||
:name="nodeData.icon"
|
||||
style="font-size: 16px"
|
||||
:style="{ color: data.color }"
|
||||
v-if="data.icon"
|
||||
:style="{ color: nodeData.color }"
|
||||
v-if="nodeData.icon"
|
||||
/>
|
||||
<span style="margin-left: 4px">{{ node.label }}</span>
|
||||
</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="便携式设备" name="1" v-if="bxsDeviceData.length != 0">
|
||||
<el-collapse-item title="便携式设备" name="1" v-if="bxsDeviceData.length">
|
||||
<el-tree
|
||||
:style="{ height: zlDeviceData.length != 0 ? 'calc(100vh - 340px)' : 'calc(100vh - 238px)' }"
|
||||
:style="{ height: otherTreeHeight }"
|
||||
ref="treeRef2"
|
||||
:props="defaultProps"
|
||||
highlight-current
|
||||
@@ -98,22 +91,22 @@
|
||||
v-bind="$attrs"
|
||||
style="overflow: auto"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<template #default="{ node, data: nodeData }">
|
||||
<span class="custom-tree-node">
|
||||
<Icon
|
||||
:name="data.icon"
|
||||
:name="nodeData.icon"
|
||||
style="font-size: 16px"
|
||||
:style="{ color: data.color }"
|
||||
v-if="data.icon"
|
||||
:style="{ color: nodeData.color }"
|
||||
v-if="nodeData.icon"
|
||||
/>
|
||||
<span style="margin-left: 4px">{{ node.label }}</span>
|
||||
</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="监测设备" name="2" v-if="yqfDeviceData.length != 0">
|
||||
<el-collapse-item title="监测设备" name="2" v-if="yqfDeviceData.length">
|
||||
<el-tree
|
||||
:style="{ height: zlDeviceData.length != 0 ? 'calc(100vh - 340px)' : 'calc(100vh - 238px)' }"
|
||||
:style="{ height: otherTreeHeight }"
|
||||
ref="treeRef3"
|
||||
:props="defaultProps"
|
||||
highlight-current
|
||||
@@ -124,13 +117,13 @@
|
||||
v-bind="$attrs"
|
||||
style="overflow: auto"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<template #default="{ node, data: nodeData }">
|
||||
<span class="custom-tree-node">
|
||||
<Icon
|
||||
:name="data.icon"
|
||||
:name="nodeData.icon"
|
||||
style="font-size: 16px"
|
||||
:style="{ color: data.color }"
|
||||
v-if="data.icon"
|
||||
:style="{ color: nodeData.color }"
|
||||
v-if="nodeData.icon"
|
||||
/>
|
||||
<span style="margin-left: 4px">{{ node.label }}</span>
|
||||
</span>
|
||||
@@ -140,7 +133,7 @@
|
||||
</el-collapse>
|
||||
<div v-if="treeType == '2'" v-loading="loading">
|
||||
<el-tree
|
||||
:style="{ height: 'calc(100vh - 188px)' }"
|
||||
:style="{ height: engineeringTreeHeight }"
|
||||
class="pt10"
|
||||
ref="treeRef4"
|
||||
:props="defaultProps"
|
||||
@@ -148,17 +141,17 @@
|
||||
:filter-node-method="filterNode"
|
||||
node-key="id"
|
||||
v-bind="$attrs"
|
||||
:data="data"
|
||||
:data="props.data"
|
||||
style="overflow: auto"
|
||||
:default-expand-all="false"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<template #default="{ node, data: nodeData }">
|
||||
<span class="custom-tree-node">
|
||||
<Icon
|
||||
:name="data.icon"
|
||||
:name="nodeData.icon"
|
||||
style="font-size: 16px"
|
||||
:style="{ color: data.color }"
|
||||
v-if="data.icon"
|
||||
:style="{ color: nodeData.color }"
|
||||
v-if="nodeData.icon"
|
||||
/>
|
||||
<span style="margin-left: 4px">{{ node.label }}</span>
|
||||
</span>
|
||||
@@ -171,308 +164,217 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import useCurrentInstance from '@/utils/useCurrentInstance'
|
||||
import { ElTree } from 'element-plus'
|
||||
import { el, fa } from 'element-plus/es/locale'
|
||||
import { ref, watch, defineEmits, onMounted, nextTick, computed } from 'vue'
|
||||
import { ElTree, type CollapseModelValue } from 'element-plus'
|
||||
import { ref, watch, nextTick, computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { collectDeviceLeaves } from './govern/lineTreeUtils'
|
||||
|
||||
defineOptions({
|
||||
name: 'govern/tree'
|
||||
name: 'govern/point',
|
||||
inheritAttrs: false
|
||||
})
|
||||
|
||||
const emit = defineEmits(['changePointType', 'changeTreeType'])
|
||||
|
||||
interface Props {
|
||||
width?: string
|
||||
canExpand?: boolean
|
||||
type?: string
|
||||
data?: any
|
||||
data?: any[]
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
width: '100%',
|
||||
canExpand: true,
|
||||
type: '',
|
||||
data: []
|
||||
data: () => []
|
||||
})
|
||||
const process = ref('')
|
||||
|
||||
const route = useRoute()
|
||||
const { proxy } = useCurrentInstance()
|
||||
|
||||
const treeType = ref('1')
|
||||
const options = [
|
||||
{ label: '设备', value: '1' },
|
||||
{ label: '工程', value: '2' }
|
||||
]
|
||||
|
||||
const menuCollapse = ref(false)
|
||||
const activeName = ref('0')
|
||||
const filterText = ref('')
|
||||
const defaultProps = {
|
||||
label: 'name',
|
||||
value: 'id'
|
||||
}
|
||||
const treeType = ref('1')
|
||||
const options = [
|
||||
{
|
||||
label: '设备',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
label: '工程',
|
||||
value: '2'
|
||||
}
|
||||
]
|
||||
//治理设备数据
|
||||
const zlDeviceData = ref<any>([])
|
||||
const zlDevList = ref<any>([])
|
||||
//便携式设备数据
|
||||
const bxsDeviceData = ref<any>([])
|
||||
//监测设备数据
|
||||
const yqfDeviceData = ref<any>([])
|
||||
watch(
|
||||
() => props.data,
|
||||
(val, oldVal) => {
|
||||
if (val && val.length != 0) {
|
||||
val.map((item: any) => {
|
||||
if (item.name == '治理设备') {
|
||||
zlDeviceData.value = []
|
||||
item.children.map((vv: any) => {
|
||||
zlDeviceData.value.push(vv)
|
||||
})
|
||||
zlDevList.value = JSON.parse(JSON.stringify(zlDeviceData.value))
|
||||
} else if (item.name == '便携式设备') {
|
||||
bxsDeviceData.value = []
|
||||
item.children.map((vv: any) => {
|
||||
bxsDeviceData.value.push(vv)
|
||||
})
|
||||
} else if (item.name == '监测设备') {
|
||||
yqfDeviceData.value = []
|
||||
item.children.map((vv: any) => {
|
||||
yqfDeviceData.value.push(vv)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
const process = ref('')
|
||||
const loading = ref(false)
|
||||
|
||||
const defaultProps = { label: 'name', value: 'id' }
|
||||
|
||||
const zlDeviceData = ref<any[]>([])
|
||||
const zlDevList = ref<any[]>([])
|
||||
const bxsDeviceData = ref<any[]>([])
|
||||
const yqfDeviceData = ref<any[]>([])
|
||||
|
||||
const governTreeHeight = computed(() => 'calc(100vh - 380px)')
|
||||
const otherTreeHeight = computed(() =>
|
||||
zlDeviceData.value.length ? 'calc(100vh - 340px)' : 'calc(100vh - 238px)'
|
||||
)
|
||||
const engineeringTreeHeight = computed(() => 'calc(100vh - 188px)')
|
||||
|
||||
watch(filterText, val => {
|
||||
if (treeType.value == '2') {
|
||||
treeRef4.value!.filter(val)
|
||||
} else if (activeName.value == '0') {
|
||||
treeRef1.value!.filter(val)
|
||||
} else if (activeName.value == '1') {
|
||||
treeRef2.value!.filter(val)
|
||||
} else {
|
||||
treeRef3.value!.filter(val)
|
||||
}
|
||||
})
|
||||
watch(process, val => {
|
||||
if (val == '' || val == undefined) {
|
||||
zlDevList.value = JSON.parse(JSON.stringify(zlDeviceData.value))
|
||||
} else {
|
||||
zlDevList.value = filterProcess(JSON.parse(JSON.stringify(zlDeviceData.value)))
|
||||
}
|
||||
const treeRef1 = ref<InstanceType<typeof ElTree>>()
|
||||
const treeRef2 = ref<InstanceType<typeof ElTree>>()
|
||||
const treeRef3 = ref<InstanceType<typeof ElTree>>()
|
||||
const treeRef4 = ref<InstanceType<typeof ElTree>>()
|
||||
|
||||
setTimeout(() => {
|
||||
changeDevice(activeName.value)
|
||||
}, 0)
|
||||
})
|
||||
defineExpose({ treeRef1, treeRef2, treeRef3, treeRef4 })
|
||||
|
||||
const changeDevice = (val: any) => {
|
||||
let arr1: any = []
|
||||
//zlDeviceData
|
||||
zlDevList.value.forEach((item: any) => {
|
||||
item.children.forEach((item2: any) => {
|
||||
item2.children.forEach((item3: any) => {
|
||||
item3.children.forEach((item4: any) => {
|
||||
arr1.push(item4)
|
||||
})
|
||||
})
|
||||
})
|
||||
function splitTreeData(val: any[]) {
|
||||
zlDeviceData.value = []
|
||||
bxsDeviceData.value = []
|
||||
yqfDeviceData.value = []
|
||||
|
||||
val.forEach(item => {
|
||||
if (item.name === '治理设备') {
|
||||
zlDeviceData.value = item.children ?? []
|
||||
} else if (item.name === '便携式设备') {
|
||||
bxsDeviceData.value = item.children ?? []
|
||||
} else if (item.name === '监测设备') {
|
||||
yqfDeviceData.value = item.children ?? []
|
||||
}
|
||||
})
|
||||
let arr2: any = []
|
||||
bxsDeviceData.value.forEach((item: any) => {
|
||||
item.children.forEach((item2: any) => {
|
||||
arr2.push(item2)
|
||||
})
|
||||
})
|
||||
let arr3: any = []
|
||||
yqfDeviceData.value.forEach((item: any) => {
|
||||
item.children.forEach((item2: any) => {
|
||||
item2.children.forEach((item3: any) => {
|
||||
item3.children.forEach((item4: any) => {
|
||||
arr3.push(item4)
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
activeName.value = val
|
||||
if (val == '0') {
|
||||
arr2.map((item: any) => {
|
||||
item.checked = false
|
||||
})
|
||||
emit('changePointType', activeName.value, arr1[0])
|
||||
setTimeout(() => {
|
||||
treeRef1.value?.setCurrentKey(arr1[0]?.id)
|
||||
}, 100)
|
||||
}
|
||||
if (val == '1') {
|
||||
arr1.map((item: any) => {
|
||||
item.checked = false
|
||||
})
|
||||
emit('changePointType', activeName.value, arr2[0])
|
||||
setTimeout(() => {
|
||||
treeRef2.value?.setCurrentKey(arr2[0]?.id)
|
||||
}, 100)
|
||||
}
|
||||
if (val == '2') {
|
||||
arr3.map((item: any) => {
|
||||
item.checked = false
|
||||
})
|
||||
emit('changePointType', activeName.value, arr3[0])
|
||||
setTimeout(() => {
|
||||
treeRef3.value?.setCurrentKey(arr3[0]?.id)
|
||||
}, 100)
|
||||
}
|
||||
// if(activeName.value){
|
||||
// emit('changePointType', activeName.value)
|
||||
// }
|
||||
}
|
||||
const onMenuCollapse = () => {
|
||||
menuCollapse.value = !menuCollapse.value
|
||||
proxy.eventBus.emit('cnTreeCollapse', menuCollapse)
|
||||
}
|
||||
const filterNode = (value: string, data: any, node: any) => {
|
||||
if (!value) return true
|
||||
// return data.name.includes(value)
|
||||
if (data.name) {
|
||||
return chooseNode(value, data, node)
|
||||
}
|
||||
|
||||
zlDevList.value = filterProcess(JSON.parse(JSON.stringify(zlDeviceData.value)))
|
||||
}
|
||||
|
||||
function filterProcess(nodes: any) {
|
||||
if (process.value == '') {
|
||||
return nodes
|
||||
}
|
||||
/** 测点树专用：level=2 按 process 过滤，其余层级保留有子节点或匹配的节点 */
|
||||
function filterProcess(nodes: any[]): any[] {
|
||||
if (!process.value) return nodes
|
||||
|
||||
return nodes
|
||||
.map(node => {
|
||||
// 递归处理子节点
|
||||
const children = node.children ? filterProcess(node.children) : []
|
||||
|
||||
// 对于设备层级（level=2），只保留 process 值匹配的节点
|
||||
if (node.level === 2) {
|
||||
if (node.process == process.value) {
|
||||
return {
|
||||
...node,
|
||||
children: children
|
||||
}
|
||||
return { ...node, children }
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
// 对于其他节点：
|
||||
// 1. 如果有满足条件的子节点则保留
|
||||
// 2. 如果本身 process 值匹配则保留
|
||||
// 3. 如果是叶子节点也保留（监测点通常没有子节点）
|
||||
if (children.length > 0 || node.process == process.value || !node.children || node.children.length === 0) {
|
||||
return {
|
||||
...node,
|
||||
children: children
|
||||
}
|
||||
if (children.length > 0 || node.process == process.value || !node.children?.length) {
|
||||
return { ...node, children }
|
||||
}
|
||||
|
||||
return null
|
||||
})
|
||||
.filter(Boolean) // 移除null节点
|
||||
.filter(Boolean)
|
||||
}
|
||||
|
||||
// function filterProcess(nodes: any) {
|
||||
// if (process.value == '') {
|
||||
// return nodes
|
||||
// }
|
||||
// return nodes
|
||||
// .map(node => {
|
||||
// // 递归处理子节点
|
||||
// const children = node.children ? filterProcess(node.children) : []
|
||||
|
||||
// // 如果当前节点的process=4，或者有子节点满足条件，则保留当前节点
|
||||
|
||||
// if (node.process == process.value || children.length > 0) {
|
||||
// return {
|
||||
// ...node,
|
||||
// children: node.children
|
||||
// }
|
||||
// }
|
||||
|
||||
// // 否则过滤掉当前节点
|
||||
// return null
|
||||
// })
|
||||
// .filter(Boolean) // 移除null节点
|
||||
// }
|
||||
// 过滤父节点 / 子节点 (如果输入的参数是父节点且能匹配，则返回该节点以及其下的所有子节点；如果参数是子节点，则返回该节点的父节点。name是中文字符，enName是英文字符.
|
||||
const chooseNode = (value: string, data: any, node: any) => {
|
||||
if (data.name.indexOf(value) !== -1) {
|
||||
return true
|
||||
}
|
||||
const level = node.level
|
||||
// 如果传入的节点本身就是一级节点就不用校验了
|
||||
if (level === 1) {
|
||||
return false
|
||||
}
|
||||
// 先取当前节点的父节点
|
||||
let parentData = node.parent
|
||||
// 遍历当前节点的父节点
|
||||
let index = 0
|
||||
while (index < level - 1) {
|
||||
// 如果匹配到直接返回，此处name值是中文字符，enName是英文字符。判断匹配中英文过滤
|
||||
if (parentData.data.name.indexOf(value) !== -1) {
|
||||
return true
|
||||
}
|
||||
// 否则的话再往上一层做匹配
|
||||
parentData = parentData.parent
|
||||
index++
|
||||
}
|
||||
// 没匹配到返回false
|
||||
return false
|
||||
function getActiveTreeRef() {
|
||||
if (treeType.value === '2') return treeRef4.value
|
||||
if (activeName.value === '0') return treeRef1.value
|
||||
if (activeName.value === '1') return treeRef2.value
|
||||
return treeRef3.value
|
||||
}
|
||||
//治理
|
||||
const treeRef1 = ref<InstanceType<typeof ElTree>>()
|
||||
//便携式
|
||||
const treeRef2 = ref<InstanceType<typeof ElTree>>()
|
||||
//在线
|
||||
const treeRef3 = ref<InstanceType<typeof ElTree>>()
|
||||
// 工程
|
||||
const treeRef4 = ref<InstanceType<typeof ElTree>>()
|
||||
defineExpose({ treeRef1, treeRef2, treeRef3, treeRef4 })
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
setActiveName()
|
||||
}, 500)
|
||||
})
|
||||
const setActiveName = () => {
|
||||
if (zlDeviceData.value.length != 0) {
|
||||
zlDevList.value = filterProcess(JSON.parse(JSON.stringify(zlDeviceData.value)))
|
||||
activeName.value = '0'
|
||||
}
|
||||
if (zlDeviceData.value.length === 0 && bxsDeviceData.value.length != 0) {
|
||||
activeName.value = '1'
|
||||
}
|
||||
if (zlDeviceData.value.length === 0 && bxsDeviceData.value.length === 0) {
|
||||
activeName.value = '2'
|
||||
}
|
||||
if (!zlDeviceData.value && !bxsDeviceData.value) {
|
||||
activeName.value = '2'
|
||||
}
|
||||
|
||||
function resolveActiveName() {
|
||||
if (zlDeviceData.value.length) return '0'
|
||||
if (bxsDeviceData.value.length) return '1'
|
||||
if (yqfDeviceData.value.length) return '2'
|
||||
return ''
|
||||
}
|
||||
|
||||
function selectPointPanel(panelName: string, node?: any) {
|
||||
if (!node) return
|
||||
emit('changePointType', panelName, node)
|
||||
nextTick(() => {
|
||||
changeDevice(activeName.value)
|
||||
getActiveTreeRef()?.setCurrentKey(node.id)
|
||||
})
|
||||
}
|
||||
const loading = ref(false)
|
||||
|
||||
const changeDevice = (val: CollapseModelValue) => {
|
||||
if (Array.isArray(val) || val == null || val === '') return
|
||||
const panelName = String(val)
|
||||
const { govern, portable, monitor } = collectDeviceLeaves(
|
||||
zlDevList.value,
|
||||
bxsDeviceData.value,
|
||||
yqfDeviceData.value
|
||||
)
|
||||
|
||||
const panelMap: Record<string, { nodes: any[]; clearOthers: any[][] }> = {
|
||||
'0': { nodes: govern, clearOthers: [portable, monitor] },
|
||||
'1': { nodes: portable, clearOthers: [govern, monitor] },
|
||||
'2': { nodes: monitor, clearOthers: [govern, portable] }
|
||||
}
|
||||
|
||||
const panel = panelMap[panelName]
|
||||
if (!panel) return
|
||||
|
||||
panel.clearOthers.forEach(list => list.forEach(item => (item.checked = false)))
|
||||
selectPointPanel(panelName, panel.nodes[0])
|
||||
}
|
||||
|
||||
const setActiveName = () => {
|
||||
activeName.value = resolveActiveName()
|
||||
if (activeName.value) {
|
||||
nextTick(() => changeDevice(activeName.value))
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.data,
|
||||
val => {
|
||||
if (!val?.length) return
|
||||
splitTreeData(val)
|
||||
if (treeType.value === '1') {
|
||||
nextTick(() => setActiveName())
|
||||
}
|
||||
},
|
||||
{ immediate: true, deep: true }
|
||||
)
|
||||
|
||||
watch(filterText, val => {
|
||||
getActiveTreeRef()?.filter(val)
|
||||
})
|
||||
|
||||
watch(process, () => {
|
||||
zlDevList.value = filterProcess(JSON.parse(JSON.stringify(zlDeviceData.value)))
|
||||
if (activeName.value === '0') {
|
||||
nextTick(() => changeDevice(activeName.value))
|
||||
}
|
||||
})
|
||||
|
||||
const onMenuCollapse = () => {
|
||||
menuCollapse.value = !menuCollapse.value
|
||||
proxy.eventBus.emit('cnTreeCollapse', menuCollapse)
|
||||
}
|
||||
|
||||
const filterNode = (value: string, data: any, node: any): boolean => {
|
||||
if (!value) return true
|
||||
if (!data.name) return false
|
||||
return chooseNode(value, data, node)
|
||||
}
|
||||
|
||||
const chooseNode = (value: string, data: any, node: any): boolean => {
|
||||
if (data.name.indexOf(value) !== -1) return true
|
||||
|
||||
const level = node.level
|
||||
if (level === 1) return false
|
||||
|
||||
let parentData = node.parent
|
||||
for (let i = 0; i < level - 1; i++) {
|
||||
if (parentData?.data?.name?.indexOf(value) !== -1) return true
|
||||
parentData = parentData.parent
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
const changeTreeType = (val: string) => {
|
||||
loading.value = true
|
||||
emit('changeTreeType', val)
|
||||
if (val == '1') {
|
||||
setActiveName()
|
||||
if (val === '1') {
|
||||
nextTick(() => setActiveName())
|
||||
}
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
}, 1000)
|
||||
}, 300)
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,36 +1,45 @@
|
||||
<template>
|
||||
<div :style="{ width: menuCollapse ? '40px' : props.width }" style='transition: all 0.3s; overflow: hidden;'>
|
||||
<Icon v-show='menuCollapse' @click='onMenuCollapse' :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
|
||||
:class="menuCollapse ? 'unfold' : ''" size='18' class='fold ml10 mt20 menu-collapse'
|
||||
style='cursor: pointer' />
|
||||
<div class='cn-tree' :style='{ opacity: menuCollapse ? 0 : 1 }'>
|
||||
<div style='display: flex; align-items: center' class='mb10'>
|
||||
<el-input maxlength="32" v-model.trim='filterText' placeholder='请输入内容' clearable>
|
||||
<div :style="{ width: menuCollapse ? '40px' : props.width }" style="transition: all 0.3s; overflow: hidden">
|
||||
<!-- <Icon
|
||||
v-show="menuCollapse"
|
||||
@click="onMenuCollapse"
|
||||
:name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
|
||||
:class="menuCollapse ? 'unfold' : ''"
|
||||
size="18px"
|
||||
class="fold ml10 mt20 menu-collapse"
|
||||
style="cursor: pointer"
|
||||
/> -->
|
||||
<div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1 }">
|
||||
<div style="display: flex; align-items: center" class="mb10">
|
||||
<el-input maxlength="32" v-model.trim="filterText" placeholder="请输入内容" clearable>
|
||||
<template #prefix>
|
||||
<Icon name='el-icon-Search' style='font-size: 16px' />
|
||||
<Icon name="el-icon-Search" style="font-size: 16px" />
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<el-tree
|
||||
:style="{ height: 'calc(100vh)' }"
|
||||
style='overflow: auto;'
|
||||
ref='treeRef'
|
||||
:props='defaultProps'
|
||||
highlight-current
|
||||
:filter-node-method='filterNode'
|
||||
node-key='id'
|
||||
show-checkbox
|
||||
@check="handleCheckChange"
|
||||
@node-click="handleNodeClick"
|
||||
<el-tree
|
||||
:style="{ height: 'calc(100vh - 120px)' }"
|
||||
style="overflow: auto"
|
||||
ref="treeRef"
|
||||
:props="defaultProps"
|
||||
highlight-current
|
||||
:filter-node-method="filterNode"
|
||||
node-key="id"
|
||||
show-checkbox
|
||||
@check="handleCheckChange"
|
||||
:default-checked-keys="defaultCheckedKeys"
|
||||
v-bind='$attrs'
|
||||
v-bind="$attrs"
|
||||
:default-expand-all="false"
|
||||
>
|
||||
<template #default='{ node, data }'>
|
||||
<span class='custom-tree-node'>
|
||||
<Icon :name='data.icon' style='font-size: 16px' :style='{ color: data.color }'
|
||||
v-if='data.icon' />
|
||||
<span style='margin-left: 4px'>{{ node.label }}</span>
|
||||
>
|
||||
<template #default="{ node, data: nodeData }">
|
||||
<span class="custom-tree-node">
|
||||
<Icon
|
||||
:name="nodeData.icon"
|
||||
style="font-size: 16px"
|
||||
:style="{ color: nodeData.color }"
|
||||
v-if="nodeData.icon"
|
||||
/>
|
||||
<span style="margin-left: 4px">{{ node.label }}</span>
|
||||
</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
@@ -38,15 +47,13 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
<script lang="ts" setup>
|
||||
import useCurrentInstance from '@/utils/useCurrentInstance'
|
||||
import { ElMessage, ElTree } from 'element-plus'
|
||||
import { emit } from 'process';
|
||||
import { ref, watch } from 'vue'
|
||||
import { createTreeFilterNode } from './govern/treeFilterUtils'
|
||||
|
||||
defineOptions({
|
||||
name: 'govern/tree'
|
||||
})
|
||||
defineOptions({ name: 'govern/select', inheritAttrs: false })
|
||||
|
||||
interface Props {
|
||||
width?: string
|
||||
@@ -57,174 +64,66 @@ const props = withDefaults(defineProps<Props>(), {
|
||||
width: '280px',
|
||||
canExpand: true
|
||||
})
|
||||
|
||||
const emit = defineEmits(['changePointType', 'checkedNodesChange'])
|
||||
|
||||
const { proxy } = useCurrentInstance()
|
||||
const menuCollapse = ref(false)
|
||||
const filterText = ref('')
|
||||
const defaultProps = {
|
||||
label: 'name',
|
||||
value: 'id'
|
||||
}
|
||||
const emit = defineEmits(['changePointType', 'checkedNodesChange'])
|
||||
const defaultProps = { label: 'name', value: 'id' }
|
||||
const filterNode = createTreeFilterNode()
|
||||
const checkedNodes = ref<any[]>([])
|
||||
const defaultCheckedKeys = ref<string[]>([])
|
||||
const MAX_CHECK = 5
|
||||
const MONITOR_LEVEL = 3
|
||||
|
||||
watch(filterText, val => treeRef.value?.filter(val))
|
||||
|
||||
watch(filterText, val => {
|
||||
treeRef.value!.filter(val)
|
||||
|
||||
})
|
||||
const onMenuCollapse = () => {
|
||||
menuCollapse.value = !menuCollapse.value
|
||||
proxy.eventBus.emit('cnTreeCollapse', menuCollapse)
|
||||
}
|
||||
const filterNode = (value: string, data: any, node: any) => {
|
||||
if (!value) return true
|
||||
// return data.name.includes(value)
|
||||
if (data.name) {
|
||||
|
||||
return chooseNode(value, data, node)
|
||||
}
|
||||
}
|
||||
const handleCheckChange = (_data: any, checkInfo: any) => {
|
||||
const monitoringPointNodes = (checkInfo.checkedNodes as any[]).filter(node => node.level === MONITOR_LEVEL)
|
||||
|
||||
// 过滤父节点 / 子节点 (如果输入的参数是父节点且能匹配，则返回该节点以及其下的所有子节点；如果参数是子节点，则返回该节点的父节点。name是中文字符，enName是英文字符.
|
||||
const chooseNode = (value: string, data: any, node: any) => {
|
||||
|
||||
if (data.name.indexOf(value) !== -1) {
|
||||
return true
|
||||
}
|
||||
const level = node.level
|
||||
// 如果传入的节点本身就是一级节点就不用校验了
|
||||
if (level === 1) {
|
||||
return false
|
||||
}
|
||||
// 先取当前节点的父节点
|
||||
let parentData = node.parent
|
||||
// 遍历当前节点的父节点
|
||||
let index = 0
|
||||
while (index < level - 1) {
|
||||
// 如果匹配到直接返回，此处name值是中文字符，enName是英文字符。判断匹配中英文过滤
|
||||
if (parentData.data.name.indexOf(value) !== -1) {
|
||||
return true
|
||||
}
|
||||
// 否则的话再往上一层做匹配
|
||||
parentData = parentData.parent
|
||||
index++
|
||||
}
|
||||
// 没匹配到返回false
|
||||
return false
|
||||
}
|
||||
|
||||
|
||||
// 处理节点点击事件
|
||||
const handleNodeClick = (data: any, node: any, event: any) => {
|
||||
|
||||
}
|
||||
|
||||
// 存储所有勾选的节点
|
||||
const checkedNodes = ref<any[]>([])
|
||||
const defaultCheckedKeys = ref<string[]>([])
|
||||
|
||||
// 处理节点勾选变化
|
||||
const handleCheckChange = (data: any, checkInfo: any) => {
|
||||
const { checkedNodes: nodes } = checkInfo
|
||||
// 过滤出监测点层级(level=3)的节点
|
||||
const monitoringPointNodes = nodes.filter((node: any) => {
|
||||
return node.level === 3
|
||||
})
|
||||
|
||||
|
||||
// 限制最多只能勾选5个监测点
|
||||
if (monitoringPointNodes.length > 5) {
|
||||
// 获取之前选中的节点
|
||||
const previousCheckedNodes = checkedNodes.value || []
|
||||
|
||||
// 计算新增的节点
|
||||
if (monitoringPointNodes.length > MAX_CHECK) {
|
||||
const previousCheckedNodes = checkedNodes.value
|
||||
const newNodes = monitoringPointNodes.filter(
|
||||
(node: any) => !previousCheckedNodes.some((prev: any) => prev.id === node.id)
|
||||
node => !previousCheckedNodes.some(prev => prev.id === node.id)
|
||||
)
|
||||
|
||||
// 如果是从父级勾选导致超过限制，保留前几个直到达到限制数量
|
||||
|
||||
if (newNodes.length > 0) {
|
||||
const allowedNewCount = 5 - previousCheckedNodes.length
|
||||
const allowedNewCount = MAX_CHECK - previousCheckedNodes.length
|
||||
if (allowedNewCount > 0) {
|
||||
// 允许添加allowedNewCount个新节点
|
||||
const allowedNewNodes = newNodes.slice(0, allowedNewCount)
|
||||
const finalNodes = [...previousCheckedNodes, ...allowedNewNodes]
|
||||
|
||||
const finalNodes = [...previousCheckedNodes, ...newNodes.slice(0, allowedNewCount)]
|
||||
checkedNodes.value = finalNodes
|
||||
|
||||
// 设置树的勾选状态为正确的节点
|
||||
treeRef.value?.setCheckedNodes(finalNodes)
|
||||
|
||||
// 将勾选的监测点节点暴露出去
|
||||
emit('checkedNodesChange', finalNodes)
|
||||
|
||||
// 更新节点的可勾选状态
|
||||
updateNodeCheckStatus(finalNodes.length)
|
||||
|
||||
// 只有在真正超过5个时才提示警告
|
||||
if (monitoringPointNodes.length > 5) {
|
||||
ElMessage.warning('最多只能选择5个监测点')
|
||||
if (monitoringPointNodes.length > MAX_CHECK) {
|
||||
ElMessage.warning(`最多只能选择${MAX_CHECK}个监测点`)
|
||||
}
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
// 其他情况回滚到之前的状态
|
||||
ElMessage.warning('最多只能选择5个监测点')
|
||||
|
||||
ElMessage.warning(`最多只能选择${MAX_CHECK}个监测点`)
|
||||
treeRef.value?.setCheckedNodes(checkedNodes.value)
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
checkedNodes.value = monitoringPointNodes
|
||||
|
||||
// 将勾选的监测点节点暴露出去
|
||||
emit('checkedNodesChange', monitoringPointNodes)
|
||||
|
||||
// 更新节点的可勾选状态
|
||||
updateNodeCheckStatus(monitoringPointNodes.length)
|
||||
}
|
||||
// 处理节点勾选变化
|
||||
const handleCheckChange2 = (data: any, checkInfo: any) => {
|
||||
const { checkedNodes: nodes } = checkInfo
|
||||
// 过滤出监测点层级(level=3)的节点
|
||||
const monitoringPointNodes = nodes.filter((node: any) => {
|
||||
// 监测点节点通常具有 comFlag 属性或其他标识
|
||||
return node.level === 3
|
||||
})
|
||||
// 限制最多只能勾选5个监测点
|
||||
if (monitoringPointNodes.length > 5) {
|
||||
ElMessage.warning('最多只能选择5个监测点')
|
||||
// 保持之前勾选的状态
|
||||
treeRef.value?.setCheckedNodes(checkedNodes.value)
|
||||
return
|
||||
}
|
||||
|
||||
checkedNodes.value = monitoringPointNodes
|
||||
|
||||
// 将勾选的监测点节点暴露出去
|
||||
emit('checkedNodesChange', monitoringPointNodes)
|
||||
|
||||
// 更新节点的可勾选状态
|
||||
updateNodeCheckStatus(monitoringPointNodes.length)
|
||||
}
|
||||
|
||||
|
||||
// 更新节点的可勾选状态
|
||||
const updateNodeCheckStatus = (currentCount: number) => {
|
||||
if (!treeRef.value) return
|
||||
|
||||
// 如果已经选了5个，则禁用其他未选中的监测点节点
|
||||
const isMaxSelected = currentCount >= 5
|
||||
|
||||
// 获取所有节点并更新状态
|
||||
const allNodes = treeRef.value.store._getAllNodes()
|
||||
allNodes.forEach((node: any) => {
|
||||
if (node.level === 3) { // 监测点层级
|
||||
|
||||
// 如果已达到最大数量且该节点未被选中，则禁用勾选
|
||||
if (isMaxSelected && !node.data.checked) {
|
||||
node.data.disabled = true
|
||||
} else {
|
||||
node.data.disabled = false
|
||||
}
|
||||
const isMaxSelected = currentCount >= MAX_CHECK
|
||||
treeRef.value.store._getAllNodes().forEach((node: any) => {
|
||||
if (node.level === MONITOR_LEVEL) {
|
||||
node.data.disabled = isMaxSelected && !node.checked
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -233,8 +132,7 @@ const treeRef = ref<InstanceType<typeof ElTree>>()
|
||||
defineExpose({ treeRef })
|
||||
</script>
|
||||
|
||||
|
||||
<style lang='scss' scoped>
|
||||
<style lang="scss" scoped>
|
||||
.cn-tree {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
|
||||
Reference in New Issue
Block a user