修改项目树问题 绘制稳态治理分析页面
This commit is contained in:
guanj
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)
|
||||
}
|
||||
Reference in New Issue
Block a user