diff --git a/src/components/cockpit/transientDetails/components/transientList.vue b/src/components/cockpit/transientDetails/components/transientList.vue index 251d804..64fd8e7 100644 --- a/src/components/cockpit/transientDetails/components/transientList.vue +++ b/src/components/cockpit/transientDetails/components/transientList.vue @@ -167,14 +167,15 @@ const tableStore: any = new TableStore({ type: 'primary', icon: 'el-icon-DataLine', render: 'basicButton', + loading: 'loading1', disabled: row => { return !row.wavePath }, click: async row => { row.loading1 = true - loading.value = true - isWaveCharts.value = true + + dialogVisible.value = false // 在打开弹窗时立即设置高度 nextTick(() => { @@ -185,6 +186,8 @@ const tableStore: any = new TableStore({ }) await analyseWave(row.id) .then(res => { + isWaveCharts.value = true + loading.value = true row.loading1 = false if (res != undefined) { boxoList.value = row diff --git a/src/components/cockpit/transientStatistics/components/transientStatisticsDetail.vue b/src/components/cockpit/transientStatistics/components/transientStatisticsDetail.vue index 2a61d5f..33de7fd 100644 --- a/src/components/cockpit/transientStatistics/components/transientStatisticsDetail.vue +++ b/src/components/cockpit/transientStatistics/components/transientStatisticsDetail.vue @@ -160,15 +160,14 @@ const tableStore: any = new TableStore({ type: 'primary', icon: 'el-icon-DataLine', render: 'basicButton', + loading: 'loading1', disabled: row => { return !row.wavePath }, click: async row => { row.loading1 = true - loading.value = true - isWaveCharts.value = true - dialogVisible.value = false + // 在打开弹窗时立即设置高度 nextTick(() => { if (waveFormAnalysisRef.value) { @@ -178,6 +177,10 @@ const tableStore: any = new TableStore({ }) await analyseWave(row.id) .then(res => { + loading.value = true + isWaveCharts.value = true + dialogVisible.value = false + row.loading1 = false if (res != undefined) { boxoList.value = row diff --git a/src/components/tree/allocation.vue b/src/components/tree/allocation.vue index 815bd77..0feb246 100644 --- a/src/components/tree/allocation.vue +++ b/src/components/tree/allocation.vue @@ -3,15 +3,15 @@
保存
- + /> -->
@@ -23,19 +23,15 @@ - -
- diff --git a/src/components/tree/govern/deviceInfoTree.vue b/src/components/tree/govern/deviceInfoTree.vue index 0817a59..d0e24db 100644 --- a/src/components/tree/govern/deviceInfoTree.vue +++ b/src/components/tree/govern/deviceInfoTree.vue @@ -1,107 +1,64 @@ - - - + + + diff --git a/src/components/tree/govern/deviceTree.vue b/src/components/tree/govern/deviceTree.vue index d16ec3a..c7a127e 100644 --- a/src/components/tree/govern/deviceTree.vue +++ b/src/components/tree/govern/deviceTree.vue @@ -7,210 +7,87 @@ :data="tree" :height="props.height" @changeDeviceType="changeDeviceType" - @changeTreeType="info" + @changeTreeType="loadTree" :engineering="props.engineering" + leaf-mode="device" /> diff --git a/src/components/tree/govern/deviceTreeUtils.ts b/src/components/tree/govern/deviceTreeUtils.ts new file mode 100644 index 0000000..8c9b0e1 --- /dev/null +++ b/src/components/tree/govern/deviceTreeUtils.ts @@ -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 +} diff --git a/src/components/tree/govern/getMarketList.vue b/src/components/tree/govern/getMarketList.vue index 439e99c..b39066f 100644 --- a/src/components/tree/govern/getMarketList.vue +++ b/src/components/tree/govern/getMarketList.vue @@ -1,31 +1,28 @@ + - diff --git a/src/components/tree/govern/lineTreeUtils.ts b/src/components/tree/govern/lineTreeUtils.ts new file mode 100644 index 0000000..55c9ee9 --- /dev/null +++ b/src/components/tree/govern/lineTreeUtils.ts @@ -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 { + 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 +} diff --git a/src/components/tree/govern/officialUserTree.vue b/src/components/tree/govern/officialUserTree.vue index e6da327..cec2c6d 100644 --- a/src/components/tree/govern/officialUserTree.vue +++ b/src/components/tree/govern/officialUserTree.vue @@ -1,29 +1,28 @@ + - diff --git a/src/components/tree/govern/pointTree.vue b/src/components/tree/govern/pointTree.vue index cb96ea3..270d0a0 100644 --- a/src/components/tree/govern/pointTree.vue +++ b/src/components/tree/govern/pointTree.vue @@ -5,204 +5,99 @@ :data="tree" default-expand-all @changePointType="changePointType" - @changeTreeType="info" + @changeTreeType="loadTree" /> diff --git a/src/components/tree/govern/pointTreeWx.vue b/src/components/tree/govern/pointTreeWx.vue index 03e0259..3e37123 100644 --- a/src/components/tree/govern/pointTreeWx.vue +++ b/src/components/tree/govern/pointTreeWx.vue @@ -22,14 +22,14 @@ @node-click="clickNode" :expand-on-click-node="false" > -