修改测试问题

src/App.vue

@@ -12,7 +12,7 @@ import { provide, onMounted, ref } from 'vue'
 
 // let buildUrl = 'wss://pqmcn.com:8087/mqtt'//102
 // let buildUrl = 'ws://pqmcn.com:8073/mqtt' //27
-let buildUrl = 'ws://192.168.1.103:8083/mqtt' //27
+let buildUrl = 'ws://112.4.144.18:38083/mqtt' //27
 
 // 从 Nginx 获取 MQTT URL
 const fetchMqttUrl = async () => {

src/api/algorithm-boot/scopeConfig.ts

@@ -0,0 +1,42 @@
+import createAxios from '@/utils/request'
+
+/**
+ * 删除数据合理范围
+ **/
+export const pqDelete = (data: any) => {
+    return createAxios({
+        url: '/algorithm-boot/pqReasonableRange/delete',
+        method: 'post',
+        params: data
+    })
+}
+/**
+ * 按条件获取数据合理范围
+ **/
+export const getData = (data: any) => {
+    return createAxios({
+        url: '/algorithm-boot/pqReasonableRange/getData',
+        method: 'post',
+        data
+    })
+}
+/**
+ * 新增数据合理范围
+ **/
+export const save = (data: any) => {
+    return createAxios({
+        url: '/algorithm-boot/pqReasonableRange/save',
+        method: 'post',
+         data
+    })
+}
+/**
+ * 更新数据合理范围
+ **/
+export const update = (data: any) => {
+    return createAxios({
+        url: '/algorithm-boot/pqReasonableRange/update',
+        method: 'post',
+         data
+    })
+}

src/api/cs-device-boot/EquipmentDelivery.ts

@@ -150,3 +150,4 @@ export function getRawData(data?: any) {
          data
     })
 }
+

src/api/cs-device-boot/cloudDeviceEntry.ts

@@ -144,3 +144,11 @@ export function queryPushResult() {
         method: 'post'
     })
 }
+//查询升级日志
+export function getByDevId(data: any) {
+    return createAxios({
+        url: '/cs-device-boot/csUpgradeLogs/getByDevId',
+        method: 'get',
+        params:data
+    })
+}

src/api/cs-device-boot/csLedger.ts

@@ -25,7 +25,6 @@ export function objTree() {
     })
 }
 
-
 //云设备录入树
 export function getCldTree() {
     return createAxios({
@@ -40,4 +39,11 @@ export function lineTree() {
         method: 'POST'
     })
 }
-
+//APF报表树
+export function getUserDevTree(data) {
+    return createAxios({
+        url: '/cs-harmonic-boot/pqSensitiveUser/getUserDevTree',
+        method: 'POST',
+        params: data
+    })
+}

src/api/cs-device-boot/sensitiveLoadMange.ts

@@ -26,3 +26,30 @@ export function deleteUser(data: any) {
         data: data
     })
 }
+
+// 新增治理方案绑定
+export function saveGovernPlan(data: any) {
+    return request({
+        url: '/cs-harmonic-boot/pqGovernPlan/save',
+        method: 'post',
+        data
+    })
+}
+
+// 修改治理方案绑定
+export function updateGovernPlan(data: any) {
+    return request({
+        url: '/cs-harmonic-boot/pqGovernPlan/update',
+        method: 'post',
+        data
+    })
+}
+
+// 删除治理方案绑定
+export function deleteGovernPlan(data: any) {
+    return request({
+        url: '/cs-harmonic-boot/pqGovernPlan/delete',
+        method: 'post',
+        data
+    })
+}

src/api/cs-harmonic-boot/mxgraph.ts

@@ -65,3 +65,35 @@ export function savePageIdWithUser(data: any) {
         params: data
     })
 }
+//新增稳态指标方案
+export function save(data: any) {
+    return createAxios({
+        url: '/cs-harmonic-boot/csHarmonicPlan/save',
+        method: 'post',
+        data: data
+    })
+}
+//修改稳态指标方案
+export function update(data: any) {
+    return createAxios({
+        url: '/cs-harmonic-boot/csHarmonicPlan/update',
+        method: 'post',
+        data: data
+    })
+}
+//新增稳态指标方案
+export function deletePlan(data: any) {
+    return createAxios({
+        url: '/cs-harmonic-boot/csHarmonicPlan/delete',
+        method: 'post',
+        data: data
+    })
+}
+//根据ID查询稳态指标方案
+export function getById(data: any) {
+    return createAxios({
+        url: '/cs-harmonic-boot/csHarmonicPlan/getById',
+        method: 'GET',
+        params: data
+    })
+}

src/api/cs-system-boot/appinfo.ts

@@ -1,30 +1,69 @@
-import createAxios from '@/utils/request'
-
-/**
- * 查询app个人中心信息详情
- * @param id
- */
-export const queryAppInfo = (type: string) => {
-    let form = new FormData()
-    form.append('type', type)
-    return createAxios({
-        url: '/cs-system-boot/appinfo/queryAppInfoByType',
-        method: 'post',
-        headers: {
-            'Content-Type': 'application/x-www-form-urlencoded'
-        },
-        data: form
-    })
-}
-
-
-/**
- * 新增app基础信息
- **/
-export const addAppInfo = (data: { type: string, content: string }) => {
-    return createAxios({
-        url: '/cs-system-boot/appinfo/addAppInfo',
-        method: 'post',
-        data: data
-    })
-}
+import createAxios from '@/utils/request'
+
+/**
+ * 查询app个人中心信息详情
+ * @param id
+ */
+export const queryAppInfo = (type: string) => {
+    let form = new FormData()
+    form.append('type', type)
+    return createAxios({
+        url: '/cs-system-boot/appinfo/queryAppInfoByType',
+        method: 'post',
+        headers: {
+            'Content-Type': 'application/x-www-form-urlencoded'
+        },
+        data: form
+    })
+}
+
+/**
+ * 新增app基础信息
+ **/
+export const addAppInfo = (data: { type: string; content: string }) => {
+    return createAxios({
+        url: '/cs-system-boot/appinfo/addAppInfo',
+        method: 'post',
+        data: data
+    })
+}
+/**
+ * 切换告警配置启用状态
+ **/
+export const toggleActive = (data: any) => {
+    return createAxios({
+        url: '/cs-system-boot/csAlarmSet/toggleActive',
+        method: 'post',
+        params: data
+    })
+}
+/**
+ * 切换告警配置启用状态
+ **/
+export const csDelete = (data: any) => {
+    return createAxios({
+        url: '/cs-system-boot/csAlarmSet/delete',
+        method: 'post',
+        params: data
+    })
+}
+/**
+ * 新增告警配置
+ **/
+export const add = (data: any) => {
+    return createAxios({
+        url: '/cs-system-boot/csAlarmSet/add',
+        method: 'post',
+        data: data
+    })
+}
+/**
+ * 修改告警配置
+ **/
+export const update = (data: any) => {
+    return createAxios({
+        url: '/cs-system-boot/csAlarmSet/update',
+        method: 'post',
+        data: data
+    })
+}

src/api/cs-system-boot/device.ts

@@ -35,7 +35,7 @@ export const editEquipmentDelivery = (data: any) => {
     return createAxios({
         url: '/cs-device-boot/EquipmentDelivery/updateEquipmentDelivery',
         method: 'POST',
-        data: data
+        data
     })
 }
 
@@ -103,3 +103,27 @@ export function engineeringProject() {
         method: 'post'
     })
 }
+//监测设备接入
+export function onlineRegister(data: any) {
+    return createAxios({
+        url: '/access-boot/device/onlineRegister',
+        method: 'post',
+        params: data
+    })
+}
+//重启设备
+export function resetFactory(data: any) {
+    return createAxios({
+        url: '/access-boot/device/resetFactory',
+        method: 'post',
+        params: data
+    })
+}
+//修改mac后接入
+export function accessByUpdateMac(data: any) {
+    return createAxios({
+        url: '/access-boot/device/accessByUpdateMac',
+        method: 'post',
+        params: data
+    })
+}

src/api/cs-system-boot/official.ts

@@ -27,3 +27,23 @@ export const removeUserDev = (data: any) => {
         data: data
     })
 }
+/**
+ * 短信配置
+ */
+export const addUserDevices = (data: any) => {
+    return createAxios({
+        url: '/cs-system-boot/appMsgSet/addUserDevices',
+        method: 'post',
+        data: data
+    })
+}
+/**
+ * 短信配置
+ */
+export const queryDeviceIdsByUserId = (data: any) => {
+    return createAxios({
+        url: '/cs-system-boot/appMsgSet/queryDeviceIdsByUserId',
+        method: 'post',
+        params: data
+    })
+}

src/api/system-boot/csDictData.ts

@@ -84,7 +84,7 @@ export const updateTimer = (data: any) => {
         data
     })
 }
-// 补招配置
+//补召配置
 export const runTimer = (data: any) => {
     return request({
         url: '/system-boot/timer/run',

src/api/system-boot/dictTree.ts

@@ -94,3 +94,19 @@ export function codeDicTree(data: any) {
         params: data
     })
 }
+// 根据装置型号获取装置类型
+export function findByDevTypeId(data: any) {
+    return createAxios({
+        url: '/cs-device-boot/edData/queryEdDataPage',
+        method: 'post',
+        data
+    })
+}
+// 装置升级
+export function upgrade(params: any) {
+    return createAxios({
+        url: '/zl-event-boot/device/upgrade',
+        method: 'get',
+        params
+    })
+}

src/api/systerm.ts

@@ -1,45 +1,59 @@
-import createAxios from '@/utils/request'
-
-// 菜单修改
-export function updateMenu(params: anyObj) {
-    return createAxios({
-        url: '/user-boot/function/update',
-        method: 'PUT',
-        data: params
-    })
-}
-
-export function addMenu(params: anyObj) {
-    return createAxios({
-        url: '/user-boot/function/add',
-        method: 'POST',
-        data: params
-    })
-}
-
-export function delMenu(id: string) {
-    return createAxios({
-        url: '/user-boot/function/delete?id=' + id,
-        method: 'delete'
-    })
-}
-export function getTheme() {
-    return createAxios({
-        url: '/system-boot/theme/getTheme',
-        method: 'get'
-    })
-}
-export function addVersion(data:any) {
-    return createAxios({
-        url: '/cs-system-boot/appVersion/add',
-        method: 'post',
-        data
-    })
-}
-export function getLastData(data:any) {
-    return createAxios({
-        url: '/cs-system-boot/appVersion/getLastData',
-        method: 'post',
-        params:data
-    })
-}
+import createAxios from '@/utils/request'
+
+// 菜单修改
+export function updateMenu(params: anyObj) {
+    return createAxios({
+        url: '/user-boot/function/update',
+        method: 'PUT',
+        data: params
+    })
+}
+
+export function addMenu(params: anyObj) {
+    return createAxios({
+        url: '/user-boot/function/add',
+        method: 'POST',
+        data: params
+    })
+}
+
+export function delMenu(id: string) {
+    return createAxios({
+        url: '/user-boot/function/delete?id=' + id,
+        method: 'delete'
+    })
+}
+export function getTheme() {
+    return createAxios({
+        url: '/system-boot/theme/getTheme',
+        method: 'get'
+    })
+}
+export function addVersion(data:any) {
+    return createAxios({
+        url: '/cs-system-boot/appVersion/add',
+        method: 'post',
+        data
+    })
+}
+export function updateVersion(data: any) {
+    return createAxios({
+        url: '/cs-system-boot/appVersion/update',
+        method: 'post',
+        data
+    })
+}
+export function deleteVersion(data: any) {
+    return createAxios({
+        url: '/cs-system-boot/appVersion/delete',
+        method: 'post',
+        params:data
+    })
+}
+export function getLastData(data:any) {
+    return createAxios({
+        url: '/cs-system-boot/appVersion/getLastData',
+        method: 'post',
+        params:data
+    })
+}

src/components/CnDialog/CnDialog.vue

@@ -0,0 +1,81 @@
+<template>
+    <ElDialogInner
+        v-bind="dialogAttrs"
+        :width="resolvedWidth"
+        :class="dialogClass"
+        :draggable="resolvedDraggable"
+        :close-on-click-modal="closeOnClickModal"
+    >
+        <template v-for="(_, name) in $slots" #[name]="slotData">
+            <slot :name="name" v-bind="slotData || {}" />
+        </template>
+    </ElDialogInner>
+</template>
+
+<script setup lang="ts">
+import { ElDialog as ElDialogInner } from 'element-plus'
+import { computed, useAttrs } from 'vue'
+import {
+    getDialogPreset,
+    resolveDialogSize,
+    resolveDialogSizeByClass,
+    type DialogSize
+} from '@/config/dialog'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps<{
+    /** 显式指定弹框尺寸：small | middle | big */
+    dialogSize?: DialogSize
+}>()
+
+const attrs = useAttrs()
+
+const resolvedSize = computed<DialogSize>(() => {
+    if (props.dialogSize) return props.dialogSize
+
+    const width = attrs.width as string | number | undefined
+    if (width !== undefined && width !== null && width !== '') {
+        return resolveDialogSize(width)
+    }
+
+    return resolveDialogSizeByClass(attrs.class)
+})
+
+const dialogPreset = computed(() => getDialogPreset(resolvedSize.value))
+
+const resolvedWidth = computed(() => dialogPreset.value.width)
+
+const dialogClass = computed(() => [
+    'cn-dialog',
+    `cn-dialog--${resolvedSize.value}`,
+    dialogPreset.value.class,
+    attrs.class
+])
+
+const dialogAttrs = computed(() => {
+    const {
+        width: _width,
+        class: _class,
+        draggable: _draggable,
+        closeOnClickModal: _closeOnClickModal,
+        ...rest
+    } = attrs
+    const { 'close-on-click-modal': _closeOnClickModalKebab, ...restWithoutKebab } = rest as Record<
+        string,
+        unknown
+    >
+    return restWithoutKebab
+})
+
+const resolvedDraggable = computed(() => {
+    if (attrs.draggable !== undefined) return attrs.draggable as boolean
+    return dialogPreset.value.draggable
+})
+
+const closeOnClickModal = computed(() => {
+    if (attrs.closeOnClickModal !== undefined) return attrs.closeOnClickModal as boolean
+    if (attrs['close-on-click-modal'] !== undefined) return attrs['close-on-click-modal'] as boolean
+    return dialogPreset.value.closeOnClickModal
+})
+</script>

src/components/baInput/components/array.vue

@@ -6,10 +6,10 @@
         </el-row>
         <el-row class="ba-array-item" v-for="(item, idx) in state.value" :gutter="10" :key="idx">
             <el-col :span="10">
-                <el-input v-model="item.key"></el-input>
+                <el-input maxlength="32" show-word-limit  v-model="item.key"></el-input>
             </el-col>
             <el-col :span="10">
-                <el-input v-model="item.value"></el-input>
+                <el-input maxlength="32" show-word-limit  v-model="item.value"></el-input>
             </el-col>
             <el-col :span="4">
                 <el-button @click="onDelArrayItem(idx)" size="small" icon="el-icon-Delete" circle />

src/components/baInput/components/iconSelector.vue

@@ -61,7 +61,7 @@
             </transition>
         </div>
         <template #reference>
-            <el-input
+            <el-input maxlength="32" show-word-limit 
                 v-model="state.inputValue"
                 :size="size"
                 :disabled="disabled"

src/components/cockpit/F47Curve/index.vue

@@ -1,38 +1,21 @@
 <template>
     <div>
         <!--F47曲线 -->
-        <TableHeader
-            ref="TableHeaderRef"
-            :showReset="false"
-            :timeKeyList="prop.timeKey"
-            @selectChange="selectChange"
-            datePicker
-            v-if="fullscreen"
-        ></TableHeader>
+        <TableHeader ref="TableHeaderRef" :showReset="false" :timeKeyList="prop.timeKey" @selectChange="selectChange"
+            datePicker v-if="fullscreen"></TableHeader>
         <el-descriptions class="mt2" direction="vertical" :column="4" border>
             <el-descriptions-item align="center" label="名称">{{ data.name }}</el-descriptions-item>
             <el-descriptions-item align="center" label="事件总数">{{ data.gs }}</el-descriptions-item>
             <el-descriptions-item align="center" label="可容忍">{{ data.krr }}</el-descriptions-item>
             <el-descriptions-item align="center" label="不可容忍">{{ data.bkrr }}</el-descriptions-item>
         </el-descriptions>
-        <my-echart
-            v-loading="tableStore.table.loading"
-            ref="chartRef"
-            class="tall"
-            :options="echartList"
-            :style="{
-                width: prop.width,
-                height: `calc(${prop.height} - 80px - ${headerHeight}px + ${fullscreen ? 0 : 56}px)`
-            }"
-            @chart-click="handleChartClick"
-        />
+        <my-echart v-loading="tableStore.table.loading" ref="chartRef" class="tall" :options="echartList" :style="{
+            width: prop.width,
+            height: `calc(${prop.height} - 80px - ${headerHeight}px + ${fullscreen ? 0 : 56}px)`
+        }" @chart-click="handleChartClick" />
         <el-dialog v-model="isWaveCharts" v-if="isWaveCharts" draggable :title="dialogTitle" append-to-body width="70%">
-            <waveFormAnalysis
-                v-loading="loading"
-                ref="waveFormAnalysisRef"
-                @handleHideCharts="isWaveCharts = false"
-                :wp="wp"
-            />
+            <waveFormAnalysis v-loading="loading" ref="waveFormAnalysisRef" @handleHideCharts="isWaveCharts = false"
+                :wp="wp" />
         </el-dialog>
     </div>
 </template>
@@ -123,9 +106,9 @@ const tableStore: any = new TableStore({
                 text: `F47曲线`
             },
             legend: {
-                data: ['可容忍事件', '不可容忍事件'],
-                itemWidth: 10,
-                itemHeight: 10,
+                data: ['分割线', '可容忍事件', '不可容忍事件'],
+                // itemWidth: 10,
+                // itemHeight: 10,
                 itemGap: 15
             },
             tooltip: {
@@ -149,9 +132,14 @@ const tableStore: any = new TableStore({
                 formatter: function (a: any) {
                     var relVal = `<strong>${a.seriesName}</strong><br/>`
 
-                    relVal += "<font style='color:" + "'>发生时间:" + a.value[2] + '</font><br/>'
-                    relVal += "<font style='color:" + "'>持续时间:" + a.value[0] + 's</font><br/>'
-                    relVal += "<font style='color:" + "'>特征幅值:" + a.value[1].toFixed(2) + '%</font>'
+                    relVal += "<font style='color:" + "'>发生时间：" + a.value[2] + '</font><br/>'
+                    relVal += "<font style='color:" + "'>特征幅值：" + Math.floor(a.value[1] * 100) / 100 + '%</font><br/>'
+                    relVal += "<font style='color:" + "'>持续时间：" + a.value[0] + 's</font><br/>'
+                    relVal += "<font style='color:" + "'>监测点名称：" + (a.value[4] || '/') + '</font><br/>'
+                    relVal += "<font style='color:" + "'>设备名称：" + (a.value[5] || '/') + '</font><br/>'
+                    relVal += "<font style='color:" + "'>项目名称：" + (a.value[6] || '/') + '</font><br/>'
+                    relVal += "<font style='color:" + "'>工程名称：" + (a.value[7] || '/') + '</font>'
+
                     return relVal
                 }
             },
@@ -173,10 +161,10 @@ const tableStore: any = new TableStore({
                     // max: function (value: any) {
                     //     return value.max + 20
                     // },
-                    max: function (value) {
-                        // 先取原始最大值+20，再向上取整到最近的10的倍数，确保刻度够用且规整
-                        return Math.ceil((value.max + 20) / 10) * 10
-                    },
+                    // max: function (value) {
+                    //     // 先取原始最大值+20，再向上取整到最近的10的倍数，确保刻度够用且规整
+                    //     return Math.ceil((value.max + 20) / 10) * 10
+                    // },
                     // splitNumber: 10,
                     // interval: 10,
                     // minInterval: 10,
@@ -188,7 +176,7 @@ const tableStore: any = new TableStore({
                 dataZoom: null,
                 series: [
                     {
-                        name: '边界线',
+                        name: '分割线',
                         type: 'line',
                         data: [
                             [0.05, 0],
@@ -201,6 +189,7 @@ const tableStore: any = new TableStore({
                             [1000, 80]
                         ],
                         showSymbol: false,
+             
                         tooltips: {
                             show: false
                         }
@@ -285,8 +274,11 @@ function gongfunction(arr: any) {
             let time = arr[i].time
             let eventId = arr[i].eventId
             let lineName = arr[i].lineName
+            let equipmentName = arr[i].equipmentName
+            let projectName = arr[i].projectName
+            let engineeringName = arr[i].engineeringName
             // let index =arr[i].eventDetailIndex;
-            point = [xx, yy, time, eventId, lineName]
+            point = [xx, yy, time, eventId, lineName, equipmentName, projectName, engineeringName]
 
             if (xx <= 0.003) {
                 let line = 0
@@ -461,9 +453,10 @@ const handleTolerableEventClick = async (row: any) => {
             if (res != undefined) {
                 boxoList.value = {
                     persistTime: row.value[0], //持续时间
-                    featureAmplitude: (row.value[1] / 100).toFixed(2), //残余电压
+                    featureAmplitude: (row.value[1] / 100), //残余电压
                     startTime: row.value[2], //时间
-                    lineName: row.value[4] //监测点名称
+                    lineName: row.value[4], //监测点名称
+                    engineeringName: row.value[6],
                 }
                 boxoList.value.systemType = 'YPT'
                 wp.value = res.data
@@ -484,10 +477,6 @@ const handleTolerableEventClick = async (row: any) => {
     })
 }
 
-// 不可容忍事件点击处理函数
-const handleIntolerableEventClick = (params: any) => {
-    console.log('不可容忍事件详情:', params)
-}
 
 watch(
     () => prop.timeKey,
@@ -510,6 +499,6 @@ watch(
     }
 )
 
-const addMenu = () => {}
+const addMenu = () => { }
 </script>
 <style lang="scss" scoped></style>

src/components/cockpit/ITICurve/index.vue

@@ -0,0 +1,436 @@
+<template>
+    <div>
+        <!--ITIC曲线 -->
+        <TableHeader ref="TableHeaderRef" :showReset="false" :timeKeyList="prop.timeKey" @selectChange="selectChange"
+            datePicker v-if="fullscreen"></TableHeader>
+        <el-descriptions class="mt2" direction="vertical" :column="4" border>
+            <el-descriptions-item align="center" label="名称">{{ data.name }}</el-descriptions-item>
+            <el-descriptions-item align="center" label="事件总数">{{ data.gs }}</el-descriptions-item>
+            <el-descriptions-item align="center" label="可容忍">{{ data.krr }}</el-descriptions-item>
+            <el-descriptions-item align="center" label="不可容忍">{{ data.bkrr }}</el-descriptions-item>
+        </el-descriptions>
+        <my-echart v-loading="tableStore.table.loading" ref="chartRef" class="tall" :options="echartList" :style="{
+            width: prop.width,
+            height: `calc(${prop.height} - 80px - ${headerHeight}px + ${fullscreen ? 0 : 56}px)`
+        }" @chart-click="handleChartClick" />
+        <el-dialog v-model="isWaveCharts" v-if="isWaveCharts" draggable :title="dialogTitle" append-to-body width="70%">
+            <waveFormAnalysis v-loading="loading" ref="waveFormAnalysisRef" @handleHideCharts="isWaveCharts = false"
+                :wp="wp" />
+        </el-dialog>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, provide, reactive, watch, computed, nextTick } from 'vue'
+import TableStore from '@/utils/tableStore'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import waveFormAnalysis from '@/views/govern/device/control/tabs/components/waveFormAnalysis.vue'
+import TableHeader from '@/components/table/header/index.vue'
+import { analyseWave } from '@/api/common'
+import { ElMessage } from 'element-plus'
+import { getTime } from '@/utils/formatTime'
+
+const prop = defineProps({
+    w: { type: [String, Number] },
+    h: { type: [String, Number] },
+    width: { type: [String, Number] },
+    height: { type: [String, Number] },
+    timeKey: { type: Array as () => string[] },
+    timeValue: { type: Object },
+    interval: { type: Number }
+})
+
+const TableHeaderRef = ref()
+
+const headerHeight = ref(57)
+
+const dialogTitle = ref('波形分析')
+const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
+    headerHeight.value = height
+
+    if (datePickerValue && datePickerValue.timeValue) {
+        // 更新时间参数
+        tableStore.table.params.searchBeginTime = datePickerValue.timeValue[0]
+        tableStore.table.params.searchEndTime = datePickerValue.timeValue[1]
+    }
+}
+
+// 计算是否全屏展示
+const fullscreen = computed(() => {
+    const w = Number(prop.w)
+    const h = Number(prop.h)
+    if (!isNaN(w) && !isNaN(h) && w === 12 && h === 6) {
+        // 执行相应逻辑
+        return true
+    } else {
+        return false
+    }
+})
+
+const echartList = ref()
+
+const chartRef = ref()
+// 波形
+const isWaveCharts = ref(false)
+
+const loading = ref(false)
+
+const wp = ref({})
+
+const boxoList: any = ref({})
+
+const waveFormAnalysisRef: any = ref(null)
+
+const data = reactive({
+    name: '事件个数',
+    gs: 0,
+    krr: 0,
+    bkrr: 0
+})
+const tableStore: any = new TableStore({
+    url: '/cs-harmonic-boot/csevent/f47Curve',
+    method: 'POST',
+
+    showPage: false,
+
+    column: [],
+    beforeSearchFun: () => {
+        setTime()
+    },
+    loadCallback: () => {
+        const gongData = gongfunction(tableStore.table.data)
+        data.gs = tableStore.table.data.length
+        data.krr = gongData.pointI.length
+        data.bkrr = gongData.pointIun.length
+        echartList.value = {
+            title: {
+                text: `ITIC曲线`
+            },
+            legend: {
+                data: ['上限', '下限', '可容忍事件', '不可容忍事件'],
+                // itemWidth: 10,
+                // itemHeight: 10,
+                itemGap: 15
+            },
+            tooltip: {
+                trigger: 'item',
+                show: true,
+                axisPointer: {
+                    type: 'shadow',
+                    label: {
+                        color: '#fff',
+                        fontSize: 16
+                    }
+                },
+                textStyle: {
+                    color: '#fff',
+                    fontStyle: 'normal',
+                    opacity: 0.35,
+                    fontSize: 14
+                },
+                backgroundColor: 'rgba(0,0,0,0.55)',
+                borderWidth: 0,
+                formatter: function (a: any) {
+                    var relVal = `<strong>${a.seriesName}</strong><br/>`
+
+                    relVal += "<font style='color:" + "'>发生时间：" + a.value[2] + '</font><br/>'
+                    relVal += "<font style='color:" + "'>特征幅值：" + Math.floor(a.value[1] * 100) / 100 + '%</font><br/>'
+                    relVal += "<font style='color:" + "'>持续时间：" + a.value[0] + 's</font><br/>'
+                    relVal += "<font style='color:" + "'>监测点名称：" + (a.value[4] || '/') + '</font><br/>'
+                    relVal += "<font style='color:" + "'>设备名称：" + (a.value[5] || '/') + '</font><br/>'
+                    relVal += "<font style='color:" + "'>项目名称：" + (a.value[6] || '/') + '</font><br/>'
+                    relVal += "<font style='color:" + "'>工程名称：" + (a.value[7] || '/') + '</font>'
+
+                    return relVal
+                }
+            },
+
+            xAxis: [
+                {
+                    type: 'log',
+                    min: 0.001,
+                    max: 1000,
+                    splitLine: {
+                        show: false
+                    },
+                    name: 's'
+                }
+            ],
+            yAxis: [
+                {
+                    type: 'value',
+                    splitNumber: 10,
+                    minInterval: 3,
+                    name: '%'
+                }
+            ],
+            color: ['#FF8C00', '#00BFFF', 'green', 'red'],
+            options: {
+                dataZoom: null,
+                series: [
+                    {
+                        name: '上限',
+                        type: 'line',
+                        data: [
+                            [0.001, 200],
+                            [0.003, 140],
+                            [0.003, 120],
+                            [0.5, 120],
+                            [0.5, 110],
+                            [10, 110],
+                            [1000, 110]
+                        ],
+                        showSymbol: false,
+                        tooltips: {
+                            show: false
+                        }
+                    },
+                    {
+                        name: '下限',
+                        type: 'line',
+                        data: [
+                            [0.02, 0],
+                            [0.02, 70],
+                            [0.5, 70],
+                            [0.5, 80],
+                            [10, 80],
+                            [10, 90],
+                            [1000, 90]
+                        ],
+                        showSymbol: false,
+                        tooltips: {
+                            show: false
+                        }
+                    },
+                    {
+                        name: '可容忍事件',
+                        type: 'scatter',
+                        symbol: 'circle',
+                        symbolSize: 8,
+                        data: gongData.pointI,
+                        legendSymbol: 'circle'
+                    },
+                    {
+                        name: '不可容忍事件',
+                        type: 'scatter',
+                        symbol: 'circle',
+                        symbolSize: 8,
+                        data: gongData.pointIun,
+                        legendSymbol: 'rect'
+                    }
+                ]
+            }
+        }
+    }
+})
+
+const tableRef = ref()
+provide('tableRef', tableRef)
+provide('tableStore', tableStore)
+
+const setTime = () => {
+    const time = getTime(
+        (TableHeaderRef.value?.datePickerRef.interval || prop.interval) ?? 0,
+        prop.timeKey,
+        fullscreen.value
+            ? [tableStore.table.params.searchBeginTime, tableStore.table.params.searchEndTime]
+            : prop.timeValue
+    )
+
+    if (Array.isArray(time)) {
+        tableStore.table.params.searchBeginTime = time[0]
+        tableStore.table.params.searchEndTime = time[1]
+        TableHeaderRef.value?.setInterval(time[2] - 0)
+        TableHeaderRef.value?.setTimeInterval([time[0], time[1]])
+    } else {
+        console.warn('获取时间失败，time 不是一个有效数组')
+    }
+}
+
+function gongfunction(arr: any) {
+    let standI = 0
+    let unstandI = 0
+    let pointIun: any[] = []
+    let pointI: any[] = []
+    const total = arr.length
+
+    if (total > 0) {
+        for (let i = 0; i < arr.length; i++) {
+            const xx = arr[i].persistTime
+            const yy = arr[i].eventValue
+            const time = arr[i].time
+            const eventId = arr[i].eventId
+            const lineName = arr[i].lineName
+            let equipmentName = arr[i].equipmentName
+            let projectName = arr[i].projectName
+            let engineeringName = arr[i].engineeringName
+            // let index =arr[i].eventDetailIndex;
+            const point = [xx, yy, time, eventId, lineName, equipmentName, projectName, engineeringName]
+
+            if (xx <= 0.003) {
+                const line = 230 - 30000 * xx
+                if (yy > line) {
+                    unstandI++
+                    pointIun.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'red' } }
+                    })
+                } else {
+                    standI++
+                    pointI.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'green' } }
+                    })
+                }
+            } else if (xx <= 0.02) {
+                if (yy > 120) {
+                    unstandI++
+                    pointIun.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'red' } }
+                    })
+                } else {
+                    standI++
+                    pointI.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'green' } }
+                    })
+                }
+            } else if (xx <= 0.5) {
+                if (yy > 120 || yy < 70) {
+                    unstandI++
+                    pointIun.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'red' } }
+                    })
+                } else {
+                    standI++
+                    pointI.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'green' } }
+                    })
+                }
+            } else if (xx <= 10) {
+                if (yy > 110 || yy < 80) {
+                    unstandI++
+                    pointIun.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'red' } }
+                    })
+                } else {
+                    standI++
+                    pointI.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'green' } }
+                    })
+                }
+            } else {
+                if (yy > 110 || yy < 90) {
+                    unstandI++
+                    pointIun.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'red' } }
+                    })
+                } else {
+                    standI++
+                    pointI.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'green' } }
+                    })
+                }
+            }
+        }
+    }
+
+    return {
+        standI,
+        unstandI,
+        pointI,
+        pointIun
+    }
+}
+
+onMounted(() => {
+    setTimeout(() => {
+        tableStore.index()
+    }, 100)
+})
+
+// 点击事件处理函数
+const handleChartClick = (params: any) => {
+    if (params.seriesName === '可容忍事件') {
+        // 处理可容忍事件点击
+        dialogTitle.value = '可容忍事件波形分析'
+        handleTolerableEventClick(params)
+    } else if (params.seriesName === '不可容忍事件') {
+        dialogTitle.value = '不可容忍事件波形分析'
+        // 处理不可容忍事件点击
+        // ElMessage.info(`点击了不可容忍事件: 持续时间${params.value[0]}s, 幅值${params.value[1].toFixed(2)}%`)
+        handleTolerableEventClick(params)
+    }
+}
+
+// 可容忍事件点击处理函数
+const handleTolerableEventClick = async (row: any) => {
+    loading.value = true
+    nextTick(() => {
+        if (waveFormAnalysisRef.value) {
+            //waveFormAnalysisRef.value.setHeight(false, 360)
+            // waveFormAnalysisRef.value.setHeight(999, 130, 1.6666666)
+        }
+    })
+    const messageInstance = ElMessage.info(`正在加载，请稍等...`)
+    await analyseWave(row.value[3]) //eventId
+        .then(res => {
+            row.loading1 = false
+            if (res != undefined) {
+                boxoList.value = {
+                    persistTime: row.value[0], //持续时间
+                    featureAmplitude: (row.value[1] / 100), //残余电压
+                    startTime: row.value[2], //时间
+                    lineName: row.value[4], //监测点名称
+                    engineeringName: row.value[6],
+                }
+                boxoList.value.systemType = 'YPT'
+                wp.value = res.data
+            }
+
+            isWaveCharts.value = true
+            loading.value = false
+        })
+        .catch(() => {
+            messageInstance.close()
+            row.loading1 = false
+            loading.value = false
+        })
+
+    nextTick(() => {
+        waveFormAnalysisRef.value && waveFormAnalysisRef.value.setHeight(999, 130, 1.6666666)
+        waveFormAnalysisRef.value && waveFormAnalysisRef.value.getWpData(wp.value, boxoList.value, true)
+    })
+}
+
+
+watch(
+    () => prop.timeKey,
+    val => {
+        tableStore.index()
+    }
+)
+watch(
+    () => prop.timeValue,
+    (newVal, oldVal) => {
+        // 当外部时间值变化时，更新表格的时间参数
+        if (newVal && (!oldVal || newVal[0] !== oldVal[0] || newVal[1] !== oldVal[1])) {
+            tableStore.table.params.searchBeginTime = newVal[0]
+            tableStore.table.params.searchEndTime = newVal[1]
+            tableStore.index()
+        }
+    },
+    {
+        deep: true
+    }
+)
+
+const addMenu = () => { }
+</script>
+<style lang="scss" scoped></style>

src/components/cockpit/directionStatistics/index.vue

@@ -1,20 +1,10 @@
 <template>
     <div>
         <!--暂降方向统计 -->
-        <TableHeader
-            ref="TableHeaderRef"
-            :showReset="false"
-            @selectChange="selectChange"
-            datePicker
-             :timeKeyList="prop.timeKey"
-            v-if="fullscreen"
-        ></TableHeader>
-        <my-echart
-            v-loading="tableStore.table.loading"
-            class="tall"
-            :options="echartList"
-            :style="{ width: prop.width, height: `calc(${prop.height} )` }"
-        />
+        <TableHeader ref="TableHeaderRef" :showReset="false" @selectChange="selectChange" datePicker
+            :timeKeyList="prop.timeKey" v-if="fullscreen"></TableHeader>
+        <my-echart v-loading="tableStore.table.loading" class="tall" :options="echartList"
+            :style="{ width: prop.width, height: `calc(${prop.height} )` }" />
     </div>
 </template>
 <script setup lang="ts">
@@ -29,7 +19,7 @@ const prop = defineProps({
     h: { type: [String, Number] },
     width: { type: [String, Number] },
     height: { type: [String, Number] },
-   timeKey: { type: Array as () => string[] },
+    timeKey: { type: Array as () => string[] },
     timeValue: { type: Object },
     interval: { type: Number }
 })
@@ -126,7 +116,11 @@ const tableStore: any = new TableStore({
                 title: [
                     {
                         text: '暂降方向统计',
-                        left: 'center'
+                        left: 'center',
+                        textStyle: {
+                            color: '#000',
+                            fontSize: '15'
+                        },
                     },
                     {
                         text: total + '次',
@@ -205,6 +199,6 @@ watch(
     }
 )
 
-const addMenu = () => {}
+const addMenu = () => { }
 </script>
 <style lang="scss" scoped></style>

src/components/cockpit/exceedanceLevel/index.vue

@@ -1,25 +1,12 @@
 <template>
     <div>
         <!--指标越限程度 -->
-        <TableHeader
-            ref="TableHeaderRef"
-            :showReset="false"
-            @selectChange="selectChange"
-            datePicker
-            :timeKeyList="prop.timeKey"
-            v-if="fullscreen"
-        ></TableHeader>
-        <my-echart
-            class="tall"
-            :options="echartList"
-            :style="{ width: prop.width, height: `calc(${prop.height} / 2 )` }"
-        />
-        <Table
-            ref="tableRef"
-            @cell-click="cellClickEvent"
-            :height="`calc(${prop.height} / 2 - ${headerHeight}px + ${fullscreen ? 0 : 56}px )`"
-            isGroup
-        ></Table>
+        <TableHeader ref="TableHeaderRef" :showReset="false" @selectChange="selectChange" datePicker
+            :timeKeyList="prop.timeKey" v-if="fullscreen"></TableHeader>
+        <my-echart class="tall" :options="echartList"
+            :style="{ width: prop.width, height: `calc(${prop.height} / 2 )` }" />
+        <Table ref="tableRef" @cell-click="cellClickEvent"
+            :height="`calc(${prop.height} / 2 - ${headerHeight}px + ${fullscreen ? 0 : 56}px )`" isGroup></Table>
         <!-- 指标日趋势图 -->
         <HarmonicRatio‌ ref="harmonicRatio‌Ref" v-if="dialogFlag" @close="onHarmonicRatioClose" :showIndex="false" />
         <!-- <DailyTrendChart v-if="dialogTrendChart" ref="dailyTrendChartRef" @close="dialogTrendChart = false" /> -->
@@ -94,51 +81,70 @@ const tableStore: any = new TableStore({
         {
             title: '指标名称',
             field: 'name',
-            minWidth: '90'
+            minWidth: 120
+        }, {
+            title: '越限时间',
+            field: 'time',
+            minWidth: 100,
+            formatter: (row: any) => {
+                return row.cellValue || '/'
+            }
+        },
+        {
+            title: '越限最高监测点名称',
+            field: 'lineName',
+            minWidth: 140,
+            formatter: (row: any) => {
+                return row.cellValue || '/'
+            }
+        },
+        {
+            title: '越限程度(%)',
+            field: 'extent',
+            minWidth: 100,
+            formatter: (row: any) => {
+                return row.cellValue ? Math.floor(row.cellValue * 100) / 100 : '/'
+            }
         },
-
         {
             title: '越限最大值',
             field: 'maxValue',
-            minWidth: '70',
+            minWidth: 100,
             render: 'customTemplate',
             customTemplate: (row: any) => {
                 const extentValue =
                     row.maxValue !== null && row.maxValue !== undefined && row.maxValue !== ''
                         ? Math.floor(row.maxValue * 100) / 100
                         : '/'
-                return `<span style='cursor: pointer;text-decoration: underline;'>${extentValue}</span>`
+                return extentValue == '/' ? '/' : `<span style='cursor: pointer;text-decoration: underline;'>${extentValue}</span>`
             }
         },
         {
             title: '国标限值',
             field: 'internationalValue',
-            minWidth: '60'
-        },
-        {
-            title: '越限程度(%)',
-            field: 'extent',
-            minWidth: '70',
-            formatter: (row: any) => {
-                return Math.floor(row.cellValue * 100) / 100
-            }
-        },
-        {
-            title: '越限时间',
-            field: 'time',
-            minWidth: '60',
-            formatter: (row: any) => {
+            minWidth: 100, formatter: (row: any) => {
                 return row.cellValue || '/'
             }
         },
         {
-            title: '越限最高监测点',
-            field: 'lineName',
-            minWidth: '90',
-            formatter: (row: any) => {
+            title: '设备名称', field: 'devName', minWidth: 130, align: 'center', formatter: (row: any) => {
                 return row.cellValue || '/'
             }
-        }
+        },
+        {
+            title: '项目名称', field: 'projectName', minWidth: 130, align: 'center', formatter: (row: any) => {
+                return row.cellValue || '/'
+            }
+        },
+        {
+            title: '工程名称', field: 'engineeringName', minWidth: 130, align: 'center', formatter: (row: any) => {
+                return row.cellValue || '/'
+            }
+        },
+
+
+
+
     ],
     beforeSearchFun: () => {
         setTime()
@@ -148,7 +154,7 @@ const tableStore: any = new TableStore({
 
         echartList.value = {
             title: {
-                text: '指标越限严重度'
+                text: '指标越限程度'
             },
 
             xAxis: {
@@ -167,8 +173,8 @@ const tableStore: any = new TableStore({
                 series: [
                     {
                         type: 'bar',
-                        name: '越限占比',
-                        data: tableStore.table.data.map((item: any) =>  Math.floor(item.extent * 100) / 100),
+                        name: '指标越限程度',
+                        data: tableStore.table.data.map((item: any) => Math.floor(item.extent * 100) / 100),
                         barMaxWidth: 30
                     }
                 ]
@@ -182,29 +188,29 @@ provide('tableRef', tableRef)
 
 provide('tableStore', tableStore)
 const codeMap = [
-  { key: '闪变', code: 'flickerOvertime' },
-  { key: '电压偏差', code: 'voltageDevOvertime' },
-  { key: '三相', code: 'ubalanceOvertime' },
-  { key: '谐波电压', code: 'uharm' },
-  { key: '谐波电流', code: 'iharm' },
+    { key: '闪变', code: 'flickerOvertime' },
+    { key: '电压偏差', code: 'voltageDevOvertime' },
+    { key: '三相', code: 'ubalanceOvertime' },
+    { key: '谐波电压', code: 'uharm' },
+    { key: '谐波电流', code: 'iharm' },
 ];
 // 点击行
 const cellClickEvent = ({ row, column }: any) => {
     dialogTrendChart.value = true
 
-    if (column.field == 'maxValue' ) {
-        if(row.lineId==null){
-ElMessage.info('暂无越限监测点！')
-        }else{
- nextTick(() => {
-            // dailyTrendChartRef.value.open(row)
-              dialogFlag.value = true
-               nextTick(() => {
+    if (column.field == 'maxValue') {
+        if (row.lineId == null) {
+            ElMessage.info('暂无越限监测点！')
+        } else {
+            nextTick(() => {
+                // dailyTrendChartRef.value.open(row)
+                dialogFlag.value = true
+                nextTick(() => {
 
-const code = codeMap.find(item => row.name.includes(item.key))?.code || '';
-           harmonicRatio‌Ref.value.openDialog(row,code,column.title.replace(/次/g, ""))
-               })
-        })
+                    const code = codeMap.find(item => row.name.includes(item.key))?.code || '';
+                    harmonicRatio‌Ref.value.openDialog(row, code, column.title.replace(/次/g, ""))
+                })
+            })
         }
 
     }
@@ -228,10 +234,10 @@ const setTime = () => {
         console.warn('获取时间失败，time 不是一个有效数组')
     }
 }
-const dialogFlag=ref(false)
+const dialogFlag = ref(false)
 // 谐波弹窗关闭时的回调
 const onHarmonicRatioClose = () => {
-     dialogFlag.value = false
+    dialogFlag.value = false
     // 重新打开指标越限详情弹窗
 
 }
@@ -256,6 +262,6 @@ watch(
     }
 )
 
-const addMenu = () => {}
+const addMenu = () => { }
 </script>
 <style lang="scss" scoped></style>

src/components/cockpit/governanceReport/index.vue

@@ -1,75 +1,101 @@
 <template>
-    <div>
+    <div class="device-control">
         <!--治理效果报表 -->
-        <TableHeader :showReset="false"  :timeKeyList="prop.timeKey" ref="TableHeaderRef" datePicker @selectChange="selectChange" v-if="fullscreen">
-            <template v-slot:select>
-                <el-form-item label="模板策略">
-                    <el-select filterable v-model="tableStore.table.params.tempId" placeholder="请选择模板策略" clearable>
-                        <el-option v-for="item in templateList" :key="item.id" :label="item.excelName" :value="item.id" />
-                    </el-select>
-                </el-form-item>
-                <el-form-item label="监测对象">
-                    <el-select filterable v-model="tableStore.table.params.sensitiveUserId" placeholder="请选择监测对象" clearable>
-                        <el-option v-for="item in idList" :key="item.id" :label="item.name" :value="item.id" />
-                    </el-select>
-                </el-form-item>
-            </template>
-            <template v-slot:operation>
-                <el-button @click="downloadExcel" class="" type="primary" icon="el-icon-Download">导出</el-button>
-            </template>
-        </TableHeader>
-        <div style="display: flex">
-            <div
-                id="luckysheet"
-                :style="{
-                    width: `calc(${prop.width} )`,
-                    height: `calc(${prop.height} - 57px + ${fullscreen ? 0 : 56}px)`
-                }"
-            ></div>
+        <div v-show="fullscreen">
+            <!-- <PointTree :height="flag ? 106 : 50" @node-click="nodeClick" @pointTypeChange="pointTypeChange"></PointTree> -->
+            <APFTree :height="flag ? 126 : 70" @node-click="handleNodeClick" template @init="handleNodeClick"></APFTree>
         </div>
+        <div>
+            <TableHeader :showReset="false" :timeKeyList="prop.timeKey" ref="TableHeaderRef" datePicker
+                @selectChange="selectChange" v-if="fullscreen">
+                <template v-slot:select>
+                    <el-form-item label="模板策略">
+                        <el-select filterable v-model="tableStore.table.params.tempId" placeholder="请选择模板策略" clearable>
+                            <el-option v-for="item in templateList" :key="item.id" :label="item.excelName"
+                                :value="item.id" />
+                        </el-select>
+                    </el-form-item>
+                    <!-- <el-form-item label="监测对象">
+                        <el-select filterable v-model="tableStore.table.params.sensitiveUserId" placeholder="请选择监测对象"
+                            clearable>
+                            <el-option v-for="item in idList" :key="item.id" :label="item.name" :value="item.id" />
+                        </el-select>
+                    </el-form-item> -->
+                </template>
+                <template v-slot:operation>
+                    <el-button @click="downloadExcel" class="" type="primary" icon="el-icon-Download">导出</el-button>
+                </template>
+            </TableHeader>
+
+            <div style="display: flex">
+                <div id="luckysheet" :style="{
+                    width: `calc(${prop.width} - ${fullscreen ? 290 : 0}px)`,
+                    height: `calc(${prop.height} - 57px + ${fullscreen ? 0 : 56}px)`
+                }" v-if="tableStore.table.data.length"></div>
+                <el-empty description="暂无报表" v-else style="flex: 1" :style="{
+                    width: `calc(${prop.width} - ${fullscreen ? 290 : 0}px)`,
+                    height: `calc(${prop.height} - 57px + ${fullscreen ? 0 : 56}px)`
+                }"></el-empty>
+            </div>
+        </div>
+
     </div>
 </template>
 <script setup lang="ts">
-import { ref, onMounted, provide, reactive, watch, h, computed, nextTick } from 'vue'
+import { ref, onMounted, onUnmounted, provide, reactive, watch, h, computed, nextTick } from 'vue'
 import TableStore from '@/utils/tableStore'
 import { exportExcel } from '@/views/govern/reportForms/export.js'
+import { destroyLuckysheet, renderLuckysheetReport } from '@/utils/luckysheetHelper'
+import { buildExportBaseName } from '@/utils/echartMethod'
 import TableHeader from '@/components/table/header/index.vue'
 import { querySysExcel } from '@/api/harmonic-boot/luckyexcel'
 import { getListByIds } from '@/api/harmonic-boot/cockpit/cockpit'
 import { getTime } from '@/utils/formatTime'
 import { ElMessage } from 'element-plus'
+import APFTree from '@/components/tree/govern/APFTree.vue'
 const prop = defineProps({
     w: { type: [String, Number] },
     h: { type: [String, Number] },
     width: { type: [String, Number] },
     height: { type: [String, Number] },
-   timeKey: { type: Array as () => string[] },
+    timeKey: { type: Array as () => string[] },
     timeValue: { type: Object },
-    interval: { type: Number }
+    interval: { type: Number },
+    flag: { type: Boolean }
 })
 
 const TableHeaderRef = ref()
 
 // 报表模板列表
-const templateList = ref()
+const templateList = ref([])
 
 // 监测对象
 const idList = ref()
 
-// 监测对象
-const initListByIds = () => {
-    getListByIds({}).then((res: any) => {
-        if (res.data.length > 0) {
-            idList.value = res.data
 
-            if (!tableStore.table.params.sensitiveUserId && idList.value?.length > 0) {
-                tableStore.table.params.sensitiveUserId = idList.value[0].id
+const exportSubjectName = ref('')
+
+const handleNodeClick = async (data: any) => {
+    if (templateList.value.length == 0) {
+        await querySysExcel({}).then(res => {
+            templateList.value = res.data.filter(item => item.excelType == 4)
+            if (!tableStore.table.params.tempId && templateList.value?.length > 0) {
+                tableStore.table.params.tempId = templateList.value[0].id
             }
-            templateListData()
-        }
-    })
+        })
+    }
+
+    if (data?.level == 3 || data?.level == 2) {
+        exportSubjectName.value = data.name || ''
+        tableStore.exportName = { subject: exportSubjectName.value, feature: '治理效果报表' }
+        tableStore.table.params.sensitiveUserId = data.id
+        await tableStore.index()
+    } else {
+        tableStore.table.loading = false
+    }
 }
 
+
 const templateListData = () => {
     querySysExcel({}).then(res => {
         templateList.value = res.data.filter(item => item.excelType == 4)
@@ -83,11 +109,22 @@ const templateListData = () => {
 }
 // 下载表格
 const downloadExcel = () => {
-    exportExcel(luckysheet.getAllSheets(), '治理效果报表')
+    exportExcel(
+        luckysheet.getAllSheets(),
+        buildExportBaseName({
+            subject: exportSubjectName.value,
+            feature: '治理效果报表',
+            date: tableStore.table.params.searchEndTime || tableStore.table.params.searchBeginTime
+        })
+    )
 }
 
 onMounted(() => {
-    initListByIds()
+
+    // initListByIds()
+})
+onUnmounted(() => {
+    destroyLuckysheet()
 })
 
 const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
@@ -129,16 +166,7 @@ const tableStore: any = new TableStore({
         // }
     },
     loadCallback: () => {
-        luckysheet.create({
-            container: 'luckysheet',
-            title: '', // 表 头名
-            lang: 'zh', // 中文
-            showtoolbar: false, // 是否显示工具栏
-            showinfobar: false, // 是否显示顶部信息栏
-            showsheetbar: true, // 是否显示底部sheet按钮
-            allowEdit: false, // 禁止所有编辑操作（必填）
-            data: tableStore.table.data
-        })
+        renderLuckysheetReport('luckysheet', tableStore.table.data, { allowEdit: false })
     }
 })
 
@@ -174,6 +202,12 @@ watch(
         tableStore.index()
     }
 )
+watch(
+    () => prop.height,
+    val => {
+        renderLuckysheetReport('luckysheet', tableStore.table.data, { allowEdit: false })
+    }
+)
 watch(
     () => prop.timeValue,
     (newVal, oldVal) => {
@@ -188,4 +222,11 @@ watch(
 // :deep(.el-select) {
 //     min-width: 80px;
 // }
+.device-control {
+    display: flex;
+}
+
+:deep(.cn-tree) {
+    padding: 0 10px 0 0 !important;
+}
 </style>

src/components/cockpit/gridSideStatistics/components/harmonicRatio‌.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-dialog draggable title="趋势图" v-model="dialogVisible" append-to-body width="70%">
+    <el-dialog draggable :title="dialogTitle" v-model="dialogVisible" append-to-body width="70%">
         <!-- 总体指标占比详情谐波含有率 -->
         <div>
             <TableHeader ref="tableHeaderRef" :showSearch="false" @selectChange="selectChange">
@@ -8,22 +8,10 @@
                         <DatePicker ref="datePickerRef"></DatePicker>
                     </el-form-item>
                     <el-form-item label="统计指标" label-width="80px">
-                        <el-select
-                            multiple
-                            :multiple-limit="2"
-                            collapse-tags
-                            collapse-tags-tooltip
-                            v-model="searchForm.index"
-                            placeholder="请选择统计指标"
-                            @change="onIndexChange($event)"
-                            filterable
-                        >
-                            <el-option
-                                v-for="item in indexOptions"
-                                :key="item.id"
-                                :label="item.name"
-                                :value="item.id"
-                            ></el-option>
+                        <el-select multiple :multiple-limit="2" collapse-tags collapse-tags-tooltip
+                            v-model="searchForm.index" placeholder="请选择统计指标" @change="onIndexChange($event)" filterable>
+                            <el-option v-for="item in indexOptions" :key="item.id" :label="item.name"
+                                :value="item.id"></el-option>
                         </el-select>
                     </el-form-item>
                     <el-form-item>
@@ -33,12 +21,8 @@
                         </el-radio-group>
                     </el-form-item>
                     <el-form-item label="统计类型">
-                        <el-select
-                            style="min-width: 90px !important"
-                            placeholder="请选择"
-                            v-model="searchForm.valueType"
-                            filterable
-                        >
+                        <el-select style="min-width: 90px !important" placeholder="请选择" v-model="searchForm.valueType"
+                            filterable>
                             <el-option value="max" label="最大值"></el-option>
                             <el-option value="min" label="最小值"></el-option>
                             <el-option value="avg" label="平均值"></el-option>
@@ -46,38 +30,21 @@
                         </el-select>
                     </el-form-item>
                     <el-form-item>
-                        <div
-                            class="history_count"
-                            v-for="(item, index) in countData"
-                            :key="index"
-                            v-show="item.countOptions.length != 0"
-                        >
+                        <div class="history_count" v-for="(item, index) in countData" :key="index"
+                            v-show="item.countOptions.length != 0">
                             <span class="mr12">
                                 {{ item.name.includes('次数') ? item.name : item.name + '谐波次数' }}
                             </span>
-                            <el-select
-                                v-model="item.count"
-                                @change="onCountChange($event, index)"
-                                placeholder="请选择谐波次数"
-                                style="width: 100px"
-                                class="mr20"
-                                filterable
-                            >
-                                <el-option
-                                    v-for="vv in item.countOptions"
-                                    :key="vv"
-                                    :label="item.name.includes('间谐波') ? vv - 0.5 : vv"
-                                    :value="vv"
-                                ></el-option>
+                            <el-select v-model="item.count" @change="onCountChange($event, index)" placeholder="请选择谐波次数"
+                                style="width: 100px" class="mr20" filterable>
+                                <el-option v-for="vv in item.countOptions" :key="vv"
+                                    :label="item.name.includes('间谐波') ? vv - 0.5 : vv" :value="vv"></el-option>
                             </el-select>
                         </div>
                     </el-form-item>
                 </template>
                 <template #operation>
                     <el-button type="primary" icon="el-icon-Search" @click="init()">查询</el-button>
-                    <el-button :type="timeControl ? 'primary' : ''" icon="el-icon-Sort" @click="setTimeControl">
-                        缺失数据
-                    </el-button>
                 </template>
             </TableHeader>
         </div>
@@ -94,7 +61,7 @@ import { ref, onMounted, watch } from 'vue'
 import MyEchart from '@/components/echarts/MyEchart.vue'
 import { useDictData } from '@/stores/dictData'
 import { queryStatistical } from '@/api/system-boot/csstatisticalset'
-import { yMethod, exportCSV, completeTimeSeries } from '@/utils/echartMethod'
+import { yMethod, exportSeriesCSV, completeTimeSeries } from '@/utils/echartMethod'
 import TableHeader from '@/components/table/header/index.vue'
 import { trendData } from '@/api/harmonic-boot/cockpit/cockpit'
 import DatePicker from '@/components/form/datePicker/index.vue'
@@ -109,6 +76,7 @@ const props = defineProps({
         type: Array
     }
 })
+const dialogTitle = ref('趋势图')
 
 const dialogVisible: any = ref(false)
 // console.log("🚀 ~ props:", props.TrendList)
@@ -165,14 +133,14 @@ const initCode = (field: string, title: string) => {
             let codeKey = field.includes('flickerOvertime')
                 ? '闪变'
                 : field.includes('uharm')
-                ? '谐波电压'
-                : field.includes('iharm')
-                ? '谐波电流'
-                : field.includes('voltageDevOvertime')
-                ? '电压偏差'
-                : field.includes('ubalanceOvertime')
-                ? '不平衡'
-                : ''
+                    ? '谐波电压'
+                    : field.includes('iharm')
+                        ? '谐波电流'
+                        : field.includes('voltageDevOvertime')
+                            ? '电压偏差'
+                            : field.includes('ubalanceOvertime')
+                                ? '不平衡'
+                                : ''
 
             // const titleMap: Record<string, number> = {
             //     flickerOvertime: 0,
@@ -375,14 +343,18 @@ const setEchart = () => {
     }
 
     echartsData.value = {
+        exportFileName: {
+            subject: trendRequestData.value?.lineName,
+            feature: '趋势图',
+            date: datePickerRef.value?.timeValue?.[1] || datePickerRef.value?.timeValue?.[0]
+        },
         legend: {
             itemWidth: 20,
             itemHeight: 20,
             itemStyle: { opacity: 0 }, //去圆点
             type: 'scroll', // 开启滚动分页
             // orient: 'vertical', // 垂直排列
-            top: 5,
-            right: 70
+      
             // width: 550,
             // height: 50
         },
@@ -442,26 +414,18 @@ const setEchart = () => {
                 myTool1: {
                     show: true,
                     title: '下载csv',
-                    icon: 'path://M588.8 551.253333V512H352v39.253333h236.373333z m0 78.933334v-39.253334H352v39.253334h236.373333z m136.533333 78.933333V334.933333l-157.866666-157.866666H273.066667A59.306667 59.306667 0 0 0 213.333333 236.373333v551.253334a59.306667 59.306667 0 0 0 59.306667 59.306666h274.773333v42.666667H853.333333v-180.48zM568.746667 234.666667l100.266666 100.693333h-81.066666a20.053333 20.053333 0 0 1-19.626667-20.053333z m-20.48 573.013333H273.066667a19.2 19.2 0 0 1-17.493334-19.626667V236.373333a19.2 19.2 0 0 1 19.626667-19.626666h256v98.133333a58.88 58.88 0 0 0 58.88 59.306667h96.426667v334.933333h-98.133334v-39.68H352v39.68h196.266667z m100.266666 23.04a37.973333 37.973333 0 0 1-32 15.786667 38.826667 38.826667 0 0 1-32.426666-15.786667 53.76 53.76 0 0 1-10.24-32.853333 42.666667 42.666667 0 0 1 42.666666-47.786667 35.84 35.84 0 0 1 37.546667 29.866667h-12.8a23.893333 23.893333 0 0 0-24.746667-19.2c-17.066667 0-29.013333 14.08-29.013333 35.84s11.52 37.546667 28.586667 37.546666a26.453333 26.453333 0 0 0 26.453333-25.6h12.8a39.253333 39.253333 0 0 1-7.253333 22.186667z m59.733334 15.786667a35.84 35.84 0 0 1-40.106667-34.56H682.666667a23.893333 23.893333 0 0 0 26.88 23.04c12.8 0 22.613333-6.4 22.613333-15.786667s-4.266667-11.52-14.506667-13.653333l-21.333333-5.12c-17.066667-4.266667-24.32-11.52-24.32-23.893334s12.8-26.453333 34.133333-26.453333a31.573333 31.573333 0 0 1 35.413334 30.293333h-13.653334a19.626667 19.626667 0 0 0-22.613333-18.773333c-12.8 0-20.48 5.12-20.48 12.8s5.12 11.093333 17.066667 13.653333l14.933333 2.986667a42.666667 42.666667 0 0 1 20.906667 8.96 23.893333 23.893333 0 0 1 7.68 17.92c-0.426667 17.066667-14.506667 28.16-37.12 28.16z m88.746666 0h-14.506666l-32.426667-92.16h14.08l19.626667 59.733333 6.4 20.053333c0-9.386667 3.413333-12.8 5.546666-20.053333l19.2-59.733333h14.08z',
-                    onclick: e => {
-                        // console.log("🚀 ~ init ~ echartsData.value:", echartsData.value.options.series.map(item => item.data))
-
-                        let list = echartsData.value.options.series?.map((item: any) => item.data)
-                        let dataList = list[0]?.map((item: any, index: any) => {
-                            let value = [item[0], item[1]]
-                            list.forEach((item1: any, index1: any) => {
-                                if (index1 > 0) {
-                                    value.push(item1 && item1[index] ? item1[index][1] : null)
-                                }
-                            })
-
-                            return value
-                        })
-                        exportCSV(
-                            echartsData.value.options.series.map((item: any) => item.name),
-                            dataList,
-                            '监测点指标趋势.csv'
-                        )
+                    icon: 'path://M642 673.1H301.6c-9.9 0-17.9-8-17.9-17.9s8-17.9 17.9-17.9H642c9.9 0 17.9 8 17.9 17.9s-8 17.9-17.9 17.9zM642 511.8H301.6c-9.9 0-17.9-8-17.9-17.9 0-9.9 8-17.9 17.9-17.9H642c9.9 0 17.9 8 17.9 17.9 0 9.9-8 17.9-17.9 17.9zM480.7 350.6H301.6c-9.9 0-17.9-8-17.9-17.9s8-17.9 17.9-17.9h179.2c9.9 0 17.9 8 17.9 17.9s-8.1 17.9-18 17.9zM874.9 350.6H695.7c-49.4 0-89.6-40.2-89.6-89.6V81.9c0-9.9 8-17.9 17.9-17.9 9.9 0 17.9 8 17.9 17.9V261c0 29.6 24.1 53.7 53.7 53.7h179.2c9.9 0 17.9 8 17.9 17.9s-7.9 18-17.8 18zM794.3 959.7H221c-49.4 0-89.6-40.2-89.6-89.6V153.5c0-49.4 40.2-89.6 89.6-89.6h403.1c4.8 0 9.3 1.9 12.7 5.2L887.6 320c3.4 3.4 5.2 7.9 5.2 12.7v537.5c0 52.7-51.9 89.5-98.5 89.5zM221 99.8c-29.6 0-53.7 24.1-53.7 53.7v716.6c0 29.6 24.1 53.7 53.7 53.7h573.3c29 0 62.7-23.5 62.7-53.7v-530L616.7 99.8H221z',
+                    onclick: () => {
+                        exportSeriesCSV(echartsData.value.options.series, echartsData.value.exportFileName)
+                    }
+                },
+                myTool2: {
+                    show: true,
+                    title: timeControl.value ? '关闭缺失数据' : '缺失数据',
+                    icon: 'path://M832 512l-192-192v128H128v128h512v128l192-192zM192 512l192 192v-128h512v-128H384V320L192 512z',
+                    iconStyle: timeControl.value ? { borderColor: '#409EFF' } : {},
+                    onclick: () => {
+                        setTimeControl()
                     }
                 }
             }
@@ -506,10 +470,10 @@ const setEchart = () => {
                     return item.anotherName == '电压负序分量'
                         ? '电压不平衡'
                         : item.anotherName == '电压正序分量'
-                        ? '电压不平衡'
-                        : item.anotherName == '电压零序分量'
-                        ? '电压不平衡'
-                        : item.anotherName
+                            ? '电压不平衡'
+                            : item.anotherName == '电压零序分量'
+                                ? '电压不平衡'
+                                : item.anotherName
                 })
             )
         ]
@@ -543,10 +507,10 @@ const setEchart = () => {
                         (kk[0].anotherName == '电压负序分量'
                             ? '电压不平衡'
                             : kk[0].anotherName == '电压正序分量'
-                            ? '电压不平衡'
-                            : kk[0].anotherName == '电压零序分量'
-                            ? '电压不平衡'
-                            : kk[0].anotherName)
+                                ? '电压不平衡'
+                                : kk[0].anotherName == '电压零序分量'
+                                    ? '电压不平衡'
+                                    : kk[0].anotherName)
                 )
 
                 let seriesList: any = []
@@ -644,7 +608,7 @@ const onIndexChange = (val: any) => {
 }
 watch(
     () => searchForm.value.index,
-    (val: any, oldval: any) => {},
+    (val: any, oldval: any) => { },
     {
         deep: true,
         immediate: true
@@ -652,6 +616,7 @@ watch(
 )
 
 const openDialog = async (row: any, field: any, title: any) => {
+    dialogTitle.value = row?.lineName + '_趋势图'
     dialogVisible.value = true
     trendRequestData.value = row
 

src/components/cockpit/gridSideStatistics/components/overLimitDetails.vue

@@ -1,10 +1,10 @@
 <template>
     <div>
         <!-- 指标越限详情  -->
-        <el-dialog draggable title="指标越限详情" v-model="dialogVisible" append-to-body width="70%">
+        <el-dialog draggable :title="title"  v-model="dialogVisible" append-to-body width="70%">
             <TableHeader datePicker showExport :showReset="false" ref="tableHeaderRef">
                 <template v-slot:select>
-                    <el-form-item label="监测点">
+                    <!-- <el-form-item label="监测点">
                         <el-select
                             v-model="tableStore.table.params.lineId"
                             placeholder="请选择监测点"
@@ -18,7 +18,7 @@
                                 :value="item.lineId"
                             />
                         </el-select>
-                    </el-form-item>
+                    </el-form-item> -->
                 </template>
             </TableHeader>
             <Table ref="tableRef" @cell-click="cellClickEvent" isGroup :height="height"></Table>
@@ -38,7 +38,7 @@ import { cslineList } from '@/api/harmonic-boot/cockpit/cockpit'
 
 const dialogVisible: any = ref(false)
 const harmonicRatio‌Ref: any = ref(null)
-
+const title = ref('指标越限详情')
 const options = ref()
 const height = mainHeight(0, 2).height as any
 const tableHeaderRef = ref()
@@ -76,13 +76,13 @@ const tableStore: any = new TableStore({
         {
             title: '日期',
             field: 'time',
-            width: '150',
+            width: '120',
             sortable: true
         },
         {
             title: '名称',
             field: 'lineName',
-            width: '150'
+            width: '120'
         },
         {
             title: '长时闪变越限(%)',
@@ -143,6 +143,7 @@ tableStore.table.params.sortBy = ''
 tableStore.table.params.orderBy = ''
 const open = async (row: any,searchBeginTime:any,searchEndTime:any,interval:any,list:any) => {
     dialogVisible.value = true
+       title.value = row.lineName + '_指标越限详情'
      options.value = list
     // initCSlineList()
     tableStore.table.params.lineId = row.lineId
@@ -161,7 +162,7 @@ const open = async (row: any,searchBeginTime:any,searchEndTime:any,interval:any,
 
 // 点击行
 const cellClickEvent = ({ row, column }: any) => {
-    if (column.field != 'name' && column.field != 'time') {
+    if (column.field != 'lineName' &&column.field != 'name' && column.field != 'time') {
         dialogFlag.value = true
         dialogVisible.value = false
         nextTick(() => {

src/components/cockpit/gridSideStatistics/index.vue

@@ -1,28 +1,14 @@
 <template>
     <div>
         <!--电网侧指标越限统计 -->
-        <TableHeader
-            :showReset="false"
-            ref="TableHeaderRef"
-            @selectChange="selectChange"
-            datePicker
-            :timeKeyList="prop.timeKey"
-            v-if="fullscreen"
-        ></TableHeader>
-        <my-echart
-            class="tall"
-            :options="echartList"
-            :style="{
-                width: prop.width,
-                height: `calc(${prop.height} / 2 )`
-            }"
-        />
-        <Table
-            ref="tableRef"
-            @cell-click="cellClickEvent"
-            :height="`calc(${prop.height} / 2 - ${headerHeight}px + ${fullscreen ? 0 : 56}px )`"
-            isGroup
-        ></Table>
+        <TableHeader :showReset="false" ref="TableHeaderRef" @selectChange="selectChange" datePicker
+            :timeKeyList="prop.timeKey" v-if="fullscreen"></TableHeader>
+        <my-echart class="tall" :options="echartList" :style="{
+            width: prop.width,
+            height: `calc(${prop.height} / 2 )`
+        }" />
+        <Table ref="tableRef" @cell-click="cellClickEvent"
+            :height="`calc(${prop.height} / 2 - ${headerHeight}px + ${fullscreen ? 0 : 56}px )`" isGroup></Table>
         <!-- 指标越限详情 -->
         <OverLimitDetails ref="OverLimitDetailsRef" />
     </div>
@@ -141,17 +127,20 @@ const tableStore: any = new TableStore({
             }
         },
         {
-            title: '名称',
+            title: '监测点名称',
             field: 'lineName',
-            minWidth: '90'
+            minWidth: 150
         },
+        { title: '设备名称', field: 'devName', minWidth: 150, align: 'center', },
+        { title: '项目名称', field: 'projectName', minWidth: 150, align: 'center' },
+        { title: '工程名称', field: 'engineeringName', minWidth: 150, align: 'center' },
         {
             title: '越限占比(%)',
             children: [
                 {
                     title: '长时闪变',
                     field: 'flicker',
-                    minWidth: '70',
+                    minWidth: '80',
                     render: 'customTemplate',
                     customTemplate: (row: any) => {
                         return `<span style='cursor: pointer;text-decoration: underline;'>${row.flicker}</span>`
@@ -218,7 +207,7 @@ const cellClickEvent = ({ row, column }: any) => {
         tableStore.table.params.searchBeginTime || prop.timeValue?.[0],
         tableStore.table.params.searchEndTime || prop.timeValue?.[1],
         tableStore.table.params.interval || prop.interval,
-         tableStore.table.data
+        tableStore.table.data
     )
 }
 
@@ -261,6 +250,6 @@ watch(
     }
 )
 
-const addMenu = () => {}
+const addMenu = () => { }
 </script>
 <style lang="scss" scoped></style>

src/components/cockpit/indicatorCrossingTime/index.vue

@@ -1,47 +1,32 @@
 <template>
-    <div>
+    <div class="device-control">
         <!--指标越限时间分布
          -->
-        <TableHeader
-            :showReset="false"
-            :timeKeyList="prop.timeKey"
-            ref="TableHeaderRef"
-            @selectChange="selectChange"
-            datePicker
-            v-if="fullscreen"
-        >
-            <template v-slot:select>
-                <el-form-item label="监测点">
-                    <el-select size="small" filterable v-model="tableStore.table.params.lineId">
-                        <el-option
-                            v-for="item in lineList"
-                            :key="item.lineId"
-                            :label="item.name"
-                            :value="item.lineId"
-                        />
-                    </el-select>
-                </el-form-item>
-            </template>
-        </TableHeader>
-        <div v-loading="tableStore.table.loading">
-            <my-echart
-                class="tall"
-                v-if="lineShow"
-                :options="echartList1"
-                :style="{
-                    width: prop.width,
+        <div v-show="fullscreen">
+            <PointTree :height="flag ? 106 : 50" @node-click="nodeClick" @pointTypeChange="pointTypeChange"></PointTree>
+        </div>
+        <div>
+            <TableHeader :showReset="false" :timeKeyList="prop.timeKey" ref="TableHeaderRef"
+                @selectChange="selectChange" datePicker v-if="fullscreen">
+                <!-- <template v-slot:select>
+                    <el-form-item label="监测点">
+                        <el-select size="small" filterable v-model="tableStore.table.params.lineId">
+                            <el-option v-for="item in lineList" :key="item.lineId" :label="item.name"
+                                :value="item.lineId" />
+                        </el-select>
+                    </el-form-item>
+                </template> -->
+            </TableHeader>
+            <div v-loading="tableStore.table.loading">
+                <my-echart class="tall" v-if="lineShow" :options="echartList1" :style="{
+                   width: `calc(${prop.width} - ${fullscreen ? 290 : 0}px)`,
                     height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px)`
-                }"
-            />
-            <el-empty
-                v-else
-                description="暂无监测点"
-                :style="{
-                    width: prop.width,
+                }" />
+                <el-empty v-else description="暂无监测点" :style="{
+                   width: `calc(${prop.width} - ${fullscreen ? 290 : 0}px)`,
                     height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px)`
-                }"
-            />
-            <!-- <my-echart
+                }" />
+                <!-- <my-echart
                 class="mt10"
                 :options="echartList1"
                 :style="{
@@ -49,6 +34,7 @@
                     height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`
                 }"
             /> -->
+            </div>
         </div>
     </div>
 </template>
@@ -59,7 +45,7 @@ import TableHeader from '@/components/table/header/index.vue'
 import MyEchart from '@/components/echarts/MyEchart.vue'
 import { limitProbabilityData, cslineList } from '@/api/harmonic-boot/cockpit/cockpit'
 import { getTime } from '@/utils/formatTime'
-
+import PointTree from '@/components/tree/govern/pointTree.vue'
 const prop = defineProps({
     w: { type: [String, Number] },
     h: { type: [String, Number] },
@@ -67,7 +53,8 @@ const prop = defineProps({
     height: { type: [String, Number] },
     timeKey: { type: Array as () => string[] },
     timeValue: { type: Object },
-    interval: { type: Number }
+    interval: { type: Number },
+    flag: { type: Boolean }
 })
 
 // const options = ref(JSON.parse(window.localStorage.getItem('lineIdList') || '[]'))
@@ -106,17 +93,28 @@ const echartList1 = ref()
 
 const probabilityData = ref()
 
-const initLineList = async () => {
-    cslineList({}).then(res => {
-        if (res.data.length == 0) {
-            lineShow.value = false
-            return (tableStore.table.loading = false)
-        }
-        lineShow.value = true
-        lineList.value = res.data
-        tableStore.table.params.lineId = lineList.value[0].lineId
+// const initLineList = async () => {
+//     cslineList({}).then(res => {
+//         if (res.data.length == 0) {
+//             lineShow.value = false
+//             return (tableStore.table.loading = false)
+//         }
+//         lineShow.value = true
+//         lineList.value = res.data
+//         tableStore.table.params.lineId = lineList.value[0].lineId
+//         tableStore.index()
+//     })
+// }
+const nodeClick = (e: any) => {
+    if (e == undefined) {
+    }
+    if (e.level == 3) {
+        tableStore.table.params.lineId = e.id
         tableStore.index()
-    })
+    }
+}
+const pointTypeChange = (val: any, obj: any) => {
+    nodeClick(obj)
 }
 
 // 越限程度概率分布
@@ -438,7 +436,7 @@ const tableStore: any = new TableStore({
 provide('tableStore', tableStore)
 
 onMounted(() => {
-    initLineList()
+    // initLineList()
 })
 
 const setTime = () => {
@@ -475,6 +473,14 @@ watch(
     }
 )
 
-const addMenu = () => {}
+const addMenu = () => { }
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.device-control {
+    display: flex;
+}
+
+:deep(.cn-tree) {
+    padding: 0 10px 0 0 !important;
+}
+</style>

src/components/cockpit/indicatorDetails/index.vue

@@ -101,7 +101,7 @@ const tableStore: any = new TableStore({
         setTime()
     },
     loadCallback: () => {
-        value.value = tableStore.table.params.searchBeginTime
+        value.value = dayjs(tableStore.table.params.searchBeginTime).toDate()
         if (tableStore.table.data && tableStore.table.data.length > 0) {
             list.value = tableStore.table.data.map((item: any) => {
                 // 将 items 数组转换为带换行的文本

src/components/cockpit/indicatorDistribution/index.vue

@@ -1,46 +1,31 @@
 <template>
-    <div>
+    <div class="device-control">
         <!--指标越限概率分布 -->
-        <TableHeader
-            :showReset="false"
-            :timeKeyList="prop.timeKey"
-            ref="TableHeaderRef"
-            @selectChange="selectChange"
-            datePicker
-            v-if="fullscreen"
-        >
-            <template v-slot:select>
-                <el-form-item label="监测点">
-                    <el-select size="small" filterable v-model="tableStore.table.params.lineId">
-                        <el-option
-                            v-for="item in lineList"
-                            :key="item.lineId"
-                            :label="item.name"
-                            :value="item.lineId"
-                        />
-                    </el-select>
-                </el-form-item>
-            </template>
-        </TableHeader>
-        <div v-loading="tableStore.table.loading">
-            <my-echart
-                v-if="lineShow"
-                class="tall"
-                :options="echartList"
-                :style="{
-                    width: prop.width,
+        <div v-show="fullscreen">
+            <PointTree :height="flag ? 106 : 50" @node-click="nodeClick" @pointTypeChange="pointTypeChange"></PointTree>
+        </div>
+        <div>
+            <TableHeader :showReset="false" :timeKeyList="prop.timeKey" ref="TableHeaderRef"
+                @selectChange="selectChange" datePicker v-if="fullscreen">
+                <!-- <template v-slot:select>
+                    <el-form-item label="监测点">
+                        <el-select size="small" filterable v-model="tableStore.table.params.lineId">
+                            <el-option v-for="item in lineList" :key="item.lineId" :label="item.name"
+                                :value="item.lineId" />
+                        </el-select>
+                    </el-form-item>
+                </template> -->
+            </TableHeader>
+            <div v-loading="tableStore.table.loading">
+                <my-echart v-if="lineShow" class="tall" :options="echartList" :style="{
+                    width: `calc(${prop.width} - ${fullscreen ? 290 : 0}px)`,
                     height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px)`
-                }"
-            />
-            <el-empty
-                v-else
-                description="暂无监测点"
-                :style="{
-                    width: prop.width,
+                }" />
+                <el-empty v-else description="暂无监测点" :style="{
+                    width: `calc(${prop.width} - ${fullscreen ? 290 : 0}px)`,
                     height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px)`
-                }"
-            />
-            <!-- <my-echart
+                }" />
+                <!-- <my-echart
                 class="mt10"
                 :options="echartList1"
                 :style="{
@@ -48,7 +33,9 @@
                     height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`
                 }"
             /> -->
+            </div>
         </div>
+
     </div>
 </template>
 <script setup lang="ts">
@@ -58,7 +45,7 @@ import TableHeader from '@/components/table/header/index.vue'
 import MyEchart from '@/components/echarts/MyEchart.vue'
 import { limitProbabilityData, cslineList } from '@/api/harmonic-boot/cockpit/cockpit'
 import { getTime } from '@/utils/formatTime'
-
+import PointTree from '@/components/tree/govern/pointTree.vue'
 const prop = defineProps({
     w: { type: [String, Number] },
     h: { type: [String, Number] },
@@ -66,7 +53,8 @@ const prop = defineProps({
     height: { type: [String, Number] },
     timeKey: { type: Array as () => string[] },
     timeValue: { type: Object },
-    interval: { type: Number }
+    interval: { type: Number },
+    flag: { type: Boolean }
 })
 const lineShow = ref(true)
 // const options = ref(JSON.parse(window.localStorage.getItem('lineIdList') || '[]'))
@@ -105,18 +93,31 @@ const echartList1 = ref()
 
 const probabilityData = ref()
 
-const initLineList = async () => {
-    cslineList({}).then(res => {
-        if (res.data.length == 0) {
-            lineShow.value = false
-            return (tableStore.table.loading = false)
-        }
-        lineShow.value = true
-        lineList.value = res.data
-        tableStore.table.params.lineId = lineList.value[0].lineId
+// const initLineList = async () => {
+//     cslineList({}).then(res => {
+//         if (res.data.length == 0) {
+//             lineShow.value = false
+//             return (tableStore.table.loading = false)
+//         }
+//         lineShow.value = true
+//         lineList.value = res.data
+//         tableStore.table.params.lineId = lineList.value[0].lineId
+//         tableStore.index()
+//     })
+// }
+
+const nodeClick = (e: any) => {
+    if (e == undefined) {
+    }
+    if (e.level == 3) {
+        tableStore.table.params.lineId = e.id
         tableStore.index()
-    })
+    }
 }
+const pointTypeChange = (val: any, obj: any) => {
+    nodeClick(obj)
+}
+
 
 // 越限程度概率分布
 const initProbabilityData = () => {
@@ -437,7 +438,7 @@ const tableStore: any = new TableStore({
 provide('tableStore', tableStore)
 
 onMounted(() => {
-    initLineList()
+    // initLineList()
 })
 
 const setTime = () => {
@@ -474,6 +475,13 @@ watch(
     }
 )
 
-const addMenu = () => {}
+const addMenu = () => { }
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.device-control {
+    display: flex;
+}
+:deep(.cn-tree) {
+    padding: 0 10px 0 0 !important;
+}
+</style>

src/components/cockpit/indicatorFittingChart/components/harmonicRatio‌.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-dialog draggable title="趋势图" v-model="dialogVisible" append-to-body width="70%">
+    <el-dialog draggable :title="dialogTitle" v-model="dialogVisible" append-to-body width="70%">
         <!-- 总体指标占比详情谐波含有率 -->
         <div>
             <TableHeader ref="tableHeaderRef" :showSearch="false" @selectChange="selectChange">
@@ -8,22 +8,10 @@
                         <DatePicker ref="datePickerRef"></DatePicker>
                     </el-form-item>
                     <el-form-item label="统计指标" label-width="80px">
-                        <el-select
-                            multiple
-                            :multiple-limit="2"
-                            collapse-tags
-                            collapse-tags-tooltip
-                            v-model="searchForm.index"
-                            placeholder="请选择统计指标"
-                            @change="onIndexChange($event)"
-                            filterable
-                        >
-                            <el-option
-                                v-for="item in indexOptions"
-                                :key="item.id"
-                                :label="item.name"
-                                :value="item.id"
-                            ></el-option>
+                        <el-select multiple :multiple-limit="2" collapse-tags collapse-tags-tooltip
+                            v-model="searchForm.index" placeholder="请选择统计指标" @change="onIndexChange($event)" filterable>
+                            <el-option v-for="item in indexOptions" :key="item.id" :label="item.name"
+                                :value="item.id"></el-option>
                         </el-select>
                     </el-form-item>
                     <el-form-item>
@@ -33,12 +21,8 @@
                         </el-radio-group>
                     </el-form-item>
                     <el-form-item label="统计类型">
-                        <el-select
-                            style="min-width: 120px !important"
-                            placeholder="请选择"
-                            v-model="searchForm.valueType"
-                            filterable
-                        >
+                        <el-select style="min-width: 120px !important" placeholder="请选择" v-model="searchForm.valueType"
+                            filterable>
                             <el-option value="max" label="最大值"></el-option>
                             <el-option value="min" label="最小值"></el-option>
                             <el-option value="avg" label="平均值"></el-option>
@@ -46,38 +30,21 @@
                         </el-select>
                     </el-form-item>
                     <el-form-item>
-                        <div
-                            class="history_count"
-                            v-for="(item, index) in countData"
-                            :key="index"
-                            v-show="item.countOptions.length != 0"
-                        >
+                        <div class="history_count" v-for="(item, index) in countData" :key="index"
+                            v-show="item.countOptions.length != 0">
                             <span class="mr12">
                                 {{ item.name.includes('次数') ? item.name : item.name + '谐波次数' }}
                             </span>
-                            <el-select
-                                v-model="item.count"
-                                @change="onCountChange($event, index)"
-                                placeholder="请选择谐波次数"
-                                style="width: 100px"
-                                class="mr20"
-                                filterable
-                            >
-                                <el-option
-                                    v-for="vv in item.countOptions"
-                                    :key="vv"
-                                    :label="item.name.includes('间谐波') ? vv - 0.5 : vv"
-                                    :value="vv"
-                                ></el-option>
+                            <el-select v-model="item.count" @change="onCountChange($event, index)" placeholder="请选择谐波次数"
+                                style="width: 100px" class="mr20" filterable>
+                                <el-option v-for="vv in item.countOptions" :key="vv"
+                                    :label="item.name.includes('间谐波') ? vv - 0.5 : vv" :value="vv"></el-option>
                             </el-select>
                         </div>
                     </el-form-item>
                 </template>
                 <template #operation>
                     <el-button type="primary" icon="el-icon-Search" @click="init()">查询</el-button>
-                    <el-button :type="timeControl ? 'primary' : ''" icon="el-icon-Sort" @click="setTimeControl">
-                        缺失数据
-                    </el-button>
                 </template>
             </TableHeader>
         </div>
@@ -94,7 +61,7 @@ import { ref, onMounted, watch } from 'vue'
 import MyEchart from '@/components/echarts/MyEchart.vue'
 import { useDictData } from '@/stores/dictData'
 import { queryStatistical } from '@/api/system-boot/csstatisticalset'
-import { yMethod, exportCSV, completeTimeSeries } from '@/utils/echartMethod'
+import { yMethod, exportSeriesCSV, completeTimeSeries } from '@/utils/echartMethod'
 import TableHeader from '@/components/table/header/index.vue'
 import { trendData } from '@/api/harmonic-boot/cockpit/cockpit'
 import DatePicker from '@/components/form/datePicker/index.vue'
@@ -109,6 +76,7 @@ const props = defineProps({
         type: Array
     }
 })
+const dialogTitle = ref('趋势图')
 
 const dialogVisible: any = ref(false)
 // console.log("🚀 ~ props:", props.TrendList)
@@ -181,14 +149,14 @@ const initCode = (field: string, title: string) => {
             let codeKey = field.includes('flickerOvertime')
                 ? '闪变'
                 : field.includes('uharm')
-                ? '谐波电压'
-                : field.includes('iharm')
-                ? '谐波电流'
-                : field.includes('voltageDevOvertime')
-                ? '电压偏差'
-                : field.includes('ubalanceOvertime')
-                ? '不平衡'
-                : ''
+                    ? '谐波电压'
+                    : field.includes('iharm')
+                        ? '谐波电流'
+                        : field.includes('uaberrance')
+                            ? '电压偏差'
+                            : field.includes('ubalanceOvertime')
+                                ? '不平衡'
+                                : ''
             let defaultIndex = indexOptions.value.findIndex((item: any) => item.name.includes(codeKey)) || 0
 
             searchForm.value.index[0] = indexOptions.value[defaultIndex].id
@@ -374,14 +342,18 @@ const setEchart = () => {
     }
 
     echartsData.value = {
+        exportFileName: {
+            subject: trendRequestData.value?.lineName,
+            feature: '趋势图',
+            date: datePickerRef.value?.timeValue?.[1] || datePickerRef.value?.timeValue?.[0]
+        },
         legend: {
             itemWidth: 20,
             itemHeight: 20,
             itemStyle: { opacity: 0 }, //去圆点
             type: 'scroll', // 开启滚动分页
             // orient: 'vertical', // 垂直排列
-            top: 5,
-            right: 70
+           
             // width: 550,
             // height: 50
         },
@@ -441,26 +413,18 @@ const setEchart = () => {
                 myTool1: {
                     show: true,
                     title: '下载csv',
-                    icon: 'path://M588.8 551.253333V512H352v39.253333h236.373333z m0 78.933334v-39.253334H352v39.253334h236.373333z m136.533333 78.933333V334.933333l-157.866666-157.866666H273.066667A59.306667 59.306667 0 0 0 213.333333 236.373333v551.253334a59.306667 59.306667 0 0 0 59.306667 59.306666h274.773333v42.666667H853.333333v-180.48zM568.746667 234.666667l100.266666 100.693333h-81.066666a20.053333 20.053333 0 0 1-19.626667-20.053333z m-20.48 573.013333H273.066667a19.2 19.2 0 0 1-17.493334-19.626667V236.373333a19.2 19.2 0 0 1 19.626667-19.626666h256v98.133333a58.88 58.88 0 0 0 58.88 59.306667h96.426667v334.933333h-98.133334v-39.68H352v39.68h196.266667z m100.266666 23.04a37.973333 37.973333 0 0 1-32 15.786667 38.826667 38.826667 0 0 1-32.426666-15.786667 53.76 53.76 0 0 1-10.24-32.853333 42.666667 42.666667 0 0 1 42.666666-47.786667 35.84 35.84 0 0 1 37.546667 29.866667h-12.8a23.893333 23.893333 0 0 0-24.746667-19.2c-17.066667 0-29.013333 14.08-29.013333 35.84s11.52 37.546667 28.586667 37.546666a26.453333 26.453333 0 0 0 26.453333-25.6h12.8a39.253333 39.253333 0 0 1-7.253333 22.186667z m59.733334 15.786667a35.84 35.84 0 0 1-40.106667-34.56H682.666667a23.893333 23.893333 0 0 0 26.88 23.04c12.8 0 22.613333-6.4 22.613333-15.786667s-4.266667-11.52-14.506667-13.653333l-21.333333-5.12c-17.066667-4.266667-24.32-11.52-24.32-23.893334s12.8-26.453333 34.133333-26.453333a31.573333 31.573333 0 0 1 35.413334 30.293333h-13.653334a19.626667 19.626667 0 0 0-22.613333-18.773333c-12.8 0-20.48 5.12-20.48 12.8s5.12 11.093333 17.066667 13.653333l14.933333 2.986667a42.666667 42.666667 0 0 1 20.906667 8.96 23.893333 23.893333 0 0 1 7.68 17.92c-0.426667 17.066667-14.506667 28.16-37.12 28.16z m88.746666 0h-14.506666l-32.426667-92.16h14.08l19.626667 59.733333 6.4 20.053333c0-9.386667 3.413333-12.8 5.546666-20.053333l19.2-59.733333h14.08z',
-                    onclick: e => {
-                        // console.log("🚀 ~ init ~ echartsData.value:", echartsData.value.options.series.map(item => item.data))
-
-                        let list = echartsData.value.options.series?.map((item: any) => item.data)
-                        let dataList = list[0]?.map((item: any, index: any) => {
-                            let value = [item[0], item[1]]
-                            list.forEach((item1: any, index1: any) => {
-                                if (index1 > 0) {
-                                    value.push(item1 && item1[index] ? item1[index][1] : null)
-                                }
-                            })
-
-                            return value
-                        })
-                        exportCSV(
-                            echartsData.value.options.series.map((item: any) => item.name),
-                            dataList,
-                            '历史趋势.csv'
-                        )
+                    icon: 'path://M642 673.1H301.6c-9.9 0-17.9-8-17.9-17.9s8-17.9 17.9-17.9H642c9.9 0 17.9 8 17.9 17.9s-8 17.9-17.9 17.9zM642 511.8H301.6c-9.9 0-17.9-8-17.9-17.9 0-9.9 8-17.9 17.9-17.9H642c9.9 0 17.9 8 17.9 17.9 0 9.9-8 17.9-17.9 17.9zM480.7 350.6H301.6c-9.9 0-17.9-8-17.9-17.9s8-17.9 17.9-17.9h179.2c9.9 0 17.9 8 17.9 17.9s-8.1 17.9-18 17.9zM874.9 350.6H695.7c-49.4 0-89.6-40.2-89.6-89.6V81.9c0-9.9 8-17.9 17.9-17.9 9.9 0 17.9 8 17.9 17.9V261c0 29.6 24.1 53.7 53.7 53.7h179.2c9.9 0 17.9 8 17.9 17.9s-7.9 18-17.8 18zM794.3 959.7H221c-49.4 0-89.6-40.2-89.6-89.6V153.5c0-49.4 40.2-89.6 89.6-89.6h403.1c4.8 0 9.3 1.9 12.7 5.2L887.6 320c3.4 3.4 5.2 7.9 5.2 12.7v537.5c0 52.7-51.9 89.5-98.5 89.5zM221 99.8c-29.6 0-53.7 24.1-53.7 53.7v716.6c0 29.6 24.1 53.7 53.7 53.7h573.3c29 0 62.7-23.5 62.7-53.7v-530L616.7 99.8H221z',
+                    onclick: () => {
+                        exportSeriesCSV(echartsData.value.options.series, echartsData.value.exportFileName)
+                    }
+                },
+                myTool2: {
+                    show: true,
+                    title: timeControl.value ? '关闭缺失数据' : '缺失数据',
+                    icon: 'path://M832 512l-192-192v128H128v128h512v128l192-192zM192 512l192 192v-128h512v-128H384V320L192 512z',
+                    iconStyle: timeControl.value ? { borderColor: '#409EFF' } : {},
+                    onclick: () => {
+                        setTimeControl()
                     }
                 }
             }
@@ -505,10 +469,10 @@ const setEchart = () => {
                     return item.anotherName == '电压负序分量'
                         ? '电压不平衡'
                         : item.anotherName == '电压正序分量'
-                        ? '电压不平衡'
-                        : item.anotherName == '电压零序分量'
-                        ? '电压不平衡'
-                        : item.anotherName
+                            ? '电压不平衡'
+                            : item.anotherName == '电压零序分量'
+                                ? '电压不平衡'
+                                : item.anotherName
                 })
             )
         ]
@@ -542,10 +506,10 @@ const setEchart = () => {
                         (kk[0].anotherName == '电压负序分量'
                             ? '电压不平衡'
                             : kk[0].anotherName == '电压正序分量'
-                            ? '电压不平衡'
-                            : kk[0].anotherName == '电压零序分量'
-                            ? '电压不平衡'
-                            : kk[0].anotherName)
+                                ? '电压不平衡'
+                                : kk[0].anotherName == '电压零序分量'
+                                    ? '电压不平衡'
+                                    : kk[0].anotherName)
                 )
 
                 let seriesList: any = []
@@ -643,7 +607,7 @@ const onIndexChange = (val: any) => {
 }
 watch(
     () => searchForm.value.index,
-    (val: any, oldval: any) => {},
+    (val: any, oldval: any) => { },
     {
         deep: true,
         immediate: true
@@ -652,6 +616,8 @@ watch(
 
 const openDialog = async (row: any, field: any, title: any) => {
     dialogVisible.value = true
+
+    dialogTitle.value = row?.lineName + '_趋势图'
     trendRequestData.value = row
 
     nextTick(() => {

src/components/cockpit/indicatorFittingChart/components/overLimitDetails.vue

@@ -1,9 +1,9 @@
 <template>
     <div>
         <!-- 指标越限详情  -->
-        <el-dialog draggable title="指标越限详情" v-model="dialogVisible" append-to-body width="70%">
+        <el-dialog draggable :title="title" v-model="dialogVisible" append-to-body width="70%">
             <TableHeader datePicker showExport :showReset="false" ref="tableHeaderRef">
-                <template v-slot:select>
+                <!-- <template v-slot:select>
                     <el-form-item label="监测点">
                         <el-select
                             v-model="tableStore.table.params.lineId"
@@ -19,7 +19,7 @@
                             />
                         </el-select>
                     </el-form-item>
-                </template>
+                </template> -->
             </TableHeader>
             <Table ref="tableRef" @cell-click="cellClickEvent" isGroup :height="height"></Table>
         </el-dialog>
@@ -28,7 +28,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { ref, provide,nextTick } from 'vue'
+import { ref, provide, nextTick } from 'vue'
 import Table from '@/components/table/index.vue'
 import TableHeader from '@/components/table/header/index.vue'
 import TableStore from '@/utils/tableStore'
@@ -40,7 +40,7 @@ const dialogVisible: any = ref(false)
 const harmonicRatio‌Ref: any = ref(null)
 
 const dialogFlag = ref(false)
-
+const title = ref('指标越限详情')
 const options = ref()
 const height = mainHeight(0, 2).height as any
 const tableHeaderRef = ref()
@@ -77,18 +77,18 @@ const tableStore: any = new TableStore({
         {
             title: '日期',
             field: 'time',
-            width: '150',
+            width: '120',
             sortable: true
         },
         {
-            title: '名称',
+            title: '监测点名称',
             field: 'lineName',
             width: '150'
         },
         {
-            title: '越限(分钟)',
+            title: '长时闪变越限(分钟)',
             field: 'flickerOvertime',
-            width: '90',
+            width: '100',
             render: 'customTemplate',
             customTemplate: (row: any) => {
                 return `<span style='cursor: pointer;text-decoration: underline;'>${row.flickerOvertime}</span>`
@@ -130,7 +130,7 @@ const tableStore: any = new TableStore({
         //     }
         // }
     ],
-     beforeSearchFun: () => {
+    beforeSearchFun: () => {
     },
     loadCallback: () => {
     }
@@ -140,15 +140,16 @@ const tableStore: any = new TableStore({
 provide('tableStore', tableStore)
 tableStore.table.params.sortBy = ''
 tableStore.table.params.orderBy = ''
-const open = async (row: any,searchBeginTime:any,searchEndTime:any,data:any=[]) => {
+const open = async (row: any, searchBeginTime: any, searchEndTime: any, data: any = []) => {
     dialogVisible.value = true
     // initCSlineList()
     options.value = data
+    title.value = row.lineName + '_指标越限详情'
     tableStore.table.params.lineId = row.lineId
 
     nextTick(() => {
         tableHeaderRef.value.setTimeInterval([searchBeginTime, searchEndTime])
-        tableStore.table.params.searchBeginTime =searchBeginTime
+        tableStore.table.params.searchBeginTime = searchBeginTime
         tableStore.table.params.searchEndTime = searchEndTime
         tableStore.index()
     })
@@ -157,11 +158,11 @@ const open = async (row: any,searchBeginTime:any,searchEndTime:any,data:any=[])
 
 // 点击行
 const cellClickEvent = ({ row, column }: any) => {
-    if (column.field != 'name' && column.field != 'time') {
+    if (column.field != 'lineName' && column.field != 'name' && column.field != 'time') {
         dialogFlag.value = true
         dialogVisible.value = false
         nextTick(() => {
-            harmonicRatio‌Ref.value.openDialog(row,column.field,column.title.replace(/次/g, ""))
+            harmonicRatio‌Ref.value.openDialog(row, column.field, column.title.replace(/次/g, ""))
         })
 
     }

src/components/cockpit/indicatorFittingChart/index.vue

@@ -1,31 +1,23 @@
 <template>
     <div>
         <!--主要监测点列表 -->
-        <TableHeader
-            :showReset="false"
-            :timeKeyList="prop.timeKey"
-            @selectChange="selectChange"
-            v-if="fullscreen"
-            
-            ref="TableHeaderRef"
-        >
+        <TableHeader :showReset="false" showExport :timeKeyList="prop.timeKey" @selectChange="selectChange"
+            v-if="fullscreen" ref="TableHeaderRef">
             <template v-slot:select>
                 <el-form-item label="关键字筛选">
-                    <el-input v-model="tableStore.table.params.keywords" clearable placeholder="请输入监测点名称" />
+                    <el-input maxlength="32" show-word-limit v-model="tableStore.table.params.keywords" clearable
+                        placeholder="请输入监测点名称" />
                 </el-form-item>
             </template>
         </TableHeader>
-        <Table
-            ref="tableRef"
-            @cell-click="cellClickEvent"
-            :height="`calc(${prop.height} - ${headerHeight}px + ${fullscreen ? -58 : 56}px )`"
-        ></Table>
+        <Table ref="tableRef" @cell-click="cellClickEvent"
+            :height="`calc(${prop.height} - ${headerHeight}px + ${fullscreen ? -58 : 56}px )`"></Table>
         <!-- 指标越限详情 -->
         <OverLimitDetails ref="OverLimitDetailsRef" />
     </div>
 </template>
 <script setup lang="ts">
-import { ref, onMounted, provide, reactive, watch, nextTick } from 'vue'
+import { ref, onMounted, provide, watch, computed } from 'vue'
 import TableStore from '@/utils/tableStore'
 import Table from '@/components/table/index.vue'
 import TableHeader from '@/components/table/header/index.vue'
@@ -41,7 +33,8 @@ const prop = defineProps({
     height: { type: [String, Number] },
     timeKey: { type: Array as () => string[] },
     timeValue: { type: Object },
-    interval: { type: Number }
+    interval: { type: Number },
+    flag: { type: Boolean }
 })
 const OverLimitDetailsRef = ref()
 const headerHeight = ref(57)
@@ -90,17 +83,17 @@ const tableStore: any = new TableStore({
         {
             title: '监测点名称',
             field: 'lineName',
-            minWidth: '90',
-            render: 'customTemplate',
-            customTemplate: (row: any) => {
-                return `<span style='cursor: pointer;text-decoration: underline;'>${row.lineName}</span>`
-            }
-        },
+            minWidth: 150,
 
+
+        },
+        { title: '设备名称', field: 'devName', minWidth: 150, align: 'center' },
+        { title: '项目名称', field: 'projectName', minWidth: 150, align: 'center' },
+        { title: '工程名称', field: 'engineeringName', minWidth: 150, align: 'center' },
         {
             title: '监测对象类型',
             field: 'objType',
-            minWidth: '90',
+            minWidth: '100',
             formatter: (row: any) => {
                 return row.cellValue || '/'
             }
@@ -114,7 +107,11 @@ const tableStore: any = new TableStore({
             }
         },
 
-        { title: '主要存在的电能质量问题', field: 'problems', minWidth: '150', showOverflow: true }
+        {
+            title: '主要存在的电能质量问题', field: 'problems', minWidth: '250', render: 'customTemplate', customTemplate: (row: any) => {
+                return `<span style='cursor: pointer;text-decoration: underline;'>${row.problems}</span>`
+            }
+        }
     ],
     beforeSearchFun: () => {
         setTime()
@@ -131,12 +128,12 @@ provide('tableStore', tableStore)
 
 // 点击行
 const cellClickEvent = ({ row, column }: any) => {
-    if (column.field == 'lineName') {
-       
-        let  time = getTimeOfTheMonth('3');
+    if (column.field == 'problems') {
+
+        let time = getTimeOfTheMonth('3');
         OverLimitDetailsRef.value.open(
             row,
-           time[0],
+            time[0],
             time[1],
             tableStore.table.data
         )
@@ -176,7 +173,13 @@ watch(
         deep: true
     }
 )
+watch(
+    () => prop.flag,
+    val => {
+        tableStore.showPage = fullscreen.value ? true : false
+    }
+)
 
-const addMenu = () => {}
+const addMenu = () => { }
 </script>
 <style lang="scss" scoped></style>

src/components/cockpit/listOfMainMonitoringPoints/components/overLimitDetails.vue

@@ -148,7 +148,6 @@ const open = async (row: any) => {
 
 // 点击行
 const cellClickEvent = ({ row, column }: any) => {
-    console.log(row, '1111')
     if (column.field != 'name' && column.field != 'time') {
         harmonicRatio‌Ref.value.openDialog(row)
     }

src/components/cockpit/listOfMainMonitoringPoints/index.vue

@@ -1,95 +1,64 @@
 <template>
-    <div>
+    <div class="device-control">
         <!--指标拟合图 -->
-        <TableHeader
-            datePicker
-            @selectChange="selectChange"
-            v-if="fullscreen"
-            ref="TableHeaderRef"
-            :timeKeyList="prop.timeKey"
-        >
-            <template v-slot:select>
-                <el-form-item label="监测点">
-                    <el-select filterable v-model="tableStore.table.params.lineId" placeholder="请选择监测点" clearable>
-                        <el-option
-                            v-for="item in lineList"
-                            :key="item.lineId"
-                            :label="item.name"
-                            :value="item.lineId"
-                        />
-                    </el-select>
-                </el-form-item>
-                <el-form-item label="用户功率">
-                    <el-select
-                        filterable
-                        v-model="tableStore.table.params.power"
-                        placeholder="请选择用户功率"
-                        clearable
-                    >
-                        <el-option v-for="item in powerList" :key="item.id" :label="item.name" :value="item.id" />
-                    </el-select>
-                </el-form-item>
-                <el-form-item label="统计类型">
-                    <el-select
-                        style="min-width: 120px !important"
-                        placeholder="请选择"
-                        v-model="tableStore.table.params.valueType"
-                        filterable
-                    >
-                        <el-option value="max" label="最大值"></el-option>
-                        <el-option value="min" label="最小值"></el-option>
-                        <el-option value="avg" label="平均值"></el-option>
-                        <el-option value="cp95" label="cp95"></el-option>
-                    </el-select>
-                </el-form-item>
-                <el-form-item label="电能质量指标">
-                    <el-select
-                        filterable
-                        v-model="tableStore.table.params.indicator"
-                        placeholder="请选择电能质量指标"
-                        clearable
-                    >
-                        <el-option v-for="item in indicatorList" :key="item.id" :label="item.name" :value="item.id" />
-                    </el-select>
-                </el-form-item>
-                <el-form-item>
-                    <div v-if="shouldShowHarmonicCount()" style="display: flex; color: var(--el-text-color-regular)">
-                        <span style="width: 160px">{{ getHarmonicTypeName() }}谐波次数</span>
-                        <el-select
-                            v-model="tableStore.table.params.harmonicCount"
-                            placeholder="请选择谐波次数"
-                            style="min-width: 80px !important"
-                            filterable
-                        >
-                            <el-option
-                                v-for="num in harmonicCountOptions"
-                                :key="num"
-                                :label="num"
-                                :value="num"
-                            ></el-option>
+        <div v-show="fullscreen">
+            <PointTree :height="flag ? 106 : 50" @node-click="nodeClick" @pointTypeChange="pointTypeChange"></PointTree>
+        </div>
+        <div>
+            <TableHeader datePicker @selectChange="selectChange" v-if="fullscreen" ref="TableHeaderRef"
+                :timeKeyList="prop.timeKey">
+                <template v-slot:select>
+                    <!-- <el-form-item label="监测点">
+                        <el-select filterable v-model="tableStore.table.params.lineId" placeholder="请选择监测点" clearable>
+                            <el-option v-for="item in lineList" :key="item.lineId" :label="item.name"
+                                :value="item.lineId" />
                         </el-select>
-                    </div>
-                </el-form-item>
-            </template>
-        </TableHeader>
-        <div v-loading="tableStore.table.loading">
-            <my-echart
-                class="tall"
-                v-if="lineShow"
-                :options="echartList"
-                :style="{
-                    width: prop.width,
+                    </el-form-item> -->
+                    <el-form-item label="用户功率">
+                        <el-select filterable v-model="tableStore.table.params.power" placeholder="请选择用户功率" clearable>
+                            <el-option v-for="item in powerList" :key="item.id" :label="item.name" :value="item.id" />
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="统计类型">
+                        <el-select style="min-width: 120px !important" placeholder="请选择"
+                            v-model="tableStore.table.params.valueType" filterable>
+                            <el-option value="max" label="最大值"></el-option>
+                            <el-option value="min" label="最小值"></el-option>
+                            <el-option value="avg" label="平均值"></el-option>
+                            <el-option value="cp95" label="cp95"></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="电能质量指标">
+                        <el-select filterable v-model="tableStore.table.params.indicator" placeholder="请选择电能质量指标"
+                            clearable>
+                            <el-option v-for="item in indicatorList" :key="item.id" :label="item.name"
+                                :value="item.id" />
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item>
+                        <div v-if="shouldShowHarmonicCount()"
+                            style="display: flex; color: var(--el-text-color-regular)">
+                            <span style="width: 160px">{{ getHarmonicTypeName() }}谐波次数</span>
+                            <el-select v-model="tableStore.table.params.harmonicCount" placeholder="请选择谐波次数"
+                                style="min-width: 80px !important" filterable>
+                                <el-option v-for="num in harmonicCountOptions" :key="num" :label="num"
+                                    :value="num"></el-option>
+                            </el-select>
+                        </div>
+                    </el-form-item>
+                </template>
+            </TableHeader>
+
+            <div v-loading="tableStore.table.loading">
+                <my-echart class="tall" v-if="lineShow" :options="echartList" :style="{
+                    width: `calc(${prop.width} - ${fullscreen ? 290 : 0}px)`,
                     height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px )`
-                }"
-            />
-            <el-empty
-                v-else
-                description="暂无监测点"
-                :style="{
-                    width: prop.width,
+                }" />
+                <el-empty v-else description="暂无监测点" :style="{
+                    width: `calc(${prop.width} - ${fullscreen ? 290 : 0}px)`,
                     height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px)`
-                }"
-            />
+                }" />
+            </div>
         </div>
     </div>
 </template>
@@ -103,6 +72,9 @@ import { cslineList, fittingData } from '@/api/harmonic-boot/cockpit/cockpit'
 import { queryByCode, queryCsDictTree } from '@/api/system-boot/dictTree'
 import { ElMessage } from 'element-plus'
 import { getTime } from '@/utils/formatTime'
+import { exportSeriesCSV } from '@/utils/echartMethod'
+import PointTree from '@/components/tree/govern/pointTree.vue'
+
 
 const prop = defineProps({
     w: { type: [String, Number] },
@@ -111,7 +83,8 @@ const prop = defineProps({
     height: { type: [String, Number] },
     timeKey: { type: Array as () => string[] },
     timeValue: { type: Object },
-    interval: { type: Number }
+    interval: { type: Number },
+    flag: { type: Boolean }
 })
 
 const TableHeaderRef = ref()
@@ -128,6 +101,8 @@ const lineShow = ref(true)
 const fullscreen = computed(() => {
     const w = Number(prop.w)
     const h = Number(prop.h)
+
+
     if (!isNaN(w) && !isNaN(h) && w === 12 && h === 6) {
         // 执行相应逻辑
         return true
@@ -148,17 +123,32 @@ const exceedingTheLimitList: any = ref([
 
 const indicatorList = ref()
 
-const initLineList = async () => {
-    cslineList({}).then(res => {
-        if (res.data.length == 0) {
-            lineShow.value = false
-            return (tableStore.table.loading = false)
-        }
-        lineShow.value = true
-        lineList.value = res.data
-        tableStore.table.params.lineId = lineList.value[0].lineId
+// const initLineList = async () => {
+//     cslineList({}).then(res => {
+//         setTime()
+//         if (res.data.length == 0) {
+//             lineShow.value = false
+//             return (tableStore.table.loading = false)
+//         }
+//         lineShow.value = true
+//         lineList.value = res.data
+//         tableStore.table.params.lineId = lineList.value[0].lineId
+//         initCode()
+//     })
+// }
+const exportSubjectName = ref('')
+const nodeClick = (e: any) => {
+    if (e == undefined) {
+    }
+    if (e.level == 3) {
+        exportSubjectName.value = e.name || ''
+        tableStore.table.params.lineId = e.id
+        tableStore.exportName = { subject: exportSubjectName.value, feature: '主要监测点列表' }
         initCode()
-    })
+    }
+}
+const pointTypeChange = (val: any, obj: any) => {
+    nodeClick(obj)
 }
 
 const echartList = ref()
@@ -173,37 +163,139 @@ const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
     }
 }
 
+const formatExceedanceValue = (value: any) => {
+    if (value == 0) return '不越限'
+    if (value == 1) return '越限'
+    return value
+}
+
+const COLOR_NOT_EXCEED = '#2ab914'
+const COLOR_EXCEED = '#e26257'
+
+const mapExceedanceChartValue = (val: number) => {
+    if (val == 1) return 1
+    if (val == 0) return 10
+    return val
+}
+
+const getExceedanceChartText = (val: number | string) => {
+    if (val === 1 || val === '1') return '越限'
+    if (val === 10 || val === '10') return '不越限'
+    return formatExceedanceValue(val)
+}
+
+/** 越限阶梯线分段着色：不越限绿色，越限红色 */
+const buildColoredExceedanceSeries = (data: any[], seriesName: string) => {
+    const points = data.filter(item => item[1] != null).map(item => [item[0], mapExceedanceChartValue(item[1])])
+    if (points.length === 0) return []
+
+    const series: any[] = []
+    let i = 0
+
+    while (i < points.length) {
+        const value = points[i][1]
+        const color = value === 1 ? COLOR_EXCEED : COLOR_NOT_EXCEED
+        const segment: any[] = []
+
+        if (i > 0 && points[i][1] !== points[i - 1][1]) {
+            segment.push([points[i][0], points[i - 1][1]])
+        }
+
+        segment.push(points[i])
+        let j = i + 1
+
+        while (j < points.length && points[j][1] === value) {
+            segment.push(points[j])
+            j++
+        }
+
+        if (j < points.length) {
+            segment.push([points[j][0], value])
+        }
+
+        series.push({
+            name: seriesName,
+            type: 'line',
+            step: 'end',
+            showSymbol: false,
+            clip: true,
+            data: segment,
+            yAxisIndex: 1,
+            lineStyle: { color, width: 2 }
+        })
+
+        i = j
+    }
+
+    return series
+}
+
+const qualityChartData = ref<any[]>([])
+
+const getSeriesForCsvExport = () => {
+    const indicatorSeriesName = indicatorList.value?.find(
+        (item: any) => item.id === tableStore.table.params.indicator
+    )?.name
+    const powerName = powerList.value?.find((item: any) => item.id === tableStore.table.params.power)?.name
+    const powerSeries = echartList.value.options.series.find((item: any) => item.type === 'bar')
+    return [
+        {
+            name: powerSeries?.name || powerName,
+            data: powerSeries?.data || []
+        },
+        {
+            name: indicatorSeriesName,
+            data: qualityChartData.value.map(point => [point[0], formatExceedanceValue(point[1]), point[2]])
+        }
+    ]
+}
+
+const getChartExportFileName = () => ({
+    subject: exportSubjectName.value,
+    feature: '负荷曲线拟合图',
+    date: tableStore.table.params.searchEndTime || tableStore.table.params.searchBeginTime
+})
+
 const setEchart = () => {
     // 获取当前选择的功率和指标名称
     const powerName = powerList.value?.find((item: any) => item.id === tableStore.table.params.power)?.name || '功率'
     const indicatorName =
         indicatorList.value?.find((item: any) => item.id === tableStore.table.params.indicator)?.name || '电能质量指标'
 
+    const chartTitle = `${indicatorName}与${powerName}负荷曲线拟合图`
+
     echartList.value = {
+        exportFileName: getChartExportFileName(),
         title: {
-            text: `${indicatorName}与${powerName}负荷曲线拟合图`
+            text: chartTitle
+        },
+        toolbox: {
+            featureProps: {
+                myTool1: {
+                    show: true,
+                    title: '下载csv',
+                    icon: 'path://M642 673.1H301.6c-9.9 0-17.9-8-17.9-17.9s8-17.9 17.9-17.9H642c9.9 0 17.9 8 17.9 17.9s-8 17.9-17.9 17.9zM642 511.8H301.6c-9.9 0-17.9-8-17.9-17.9 0-9.9 8-17.9 17.9-17.9H642c9.9 0 17.9 8 17.9 17.9 0 9.9-8 17.9-17.9 17.9zM480.7 350.6H301.6c-9.9 0-17.9-8-17.9-17.9s8-17.9 17.9-17.9h179.2c9.9 0 17.9 8 17.9 17.9s-8.1 17.9-18 17.9zM874.9 350.6H695.7c-49.4 0-89.6-40.2-89.6-89.6V81.9c0-9.9 8-17.9 17.9-17.9 9.9 0 17.9 8 17.9 17.9V261c0 29.6 24.1 53.7 53.7 53.7h179.2c9.9 0 17.9 8 17.9 17.9s-7.9 18-17.8 18zM794.3 959.7H221c-49.4 0-89.6-40.2-89.6-89.6V153.5c0-49.4 40.2-89.6 89.6-89.6h403.1c4.8 0 9.3 1.9 12.7 5.2L887.6 320c3.4 3.4 5.2 7.9 5.2 12.7v537.5c0 52.7-51.9 89.5-98.5 89.5zM221 99.8c-29.6 0-53.7 24.1-53.7 53.7v716.6c0 29.6 24.1 53.7 53.7 53.7h573.3c29 0 62.7-23.5 62.7-53.7v-530L616.7 99.8H221z',
+                    onclick: () => {
+                        exportSeriesCSV(getSeriesForCsvExport(), echartList.value.exportFileName)
+                    }
+                }
+            }
         },
         tooltip: {
             trigger: 'axis',
             formatter: function (params: any) {
                 let result = params[0].axisValueLabel
-                params.forEach((item: any) => {
-                    if (item.seriesName === indicatorName) {
-                        // 对于电能质量指标，格式化Y轴值显示
-                        let valueText = ''
-                        if (item.value[1] == 0) {
-                            valueText = '不越限'
-                        } else if (item.value[1] == 1) {
-                            valueText = '越限'
-                        } else {
-                            valueText = item.value[1]
-                        }
-                        result += `<br/>${item.marker}${item.seriesName}: ${valueText}`
-                    } else {
-                        // 对于功率数据，正常显示数值
-                        result += `<br/>${item.marker}${item.seriesName}: ${item.value[1]} ${item.value[2]}`
-                    }
-                })
+                const powerItem = params.find((item: any) => item.seriesName === powerName)
+                if (powerItem) {
+                    result += `<br/>${powerItem.marker}${powerItem.seriesName}: ${powerItem.value[1]} ${powerItem.value[2] || ''}`
+                }
+                const indicatorItems = params.filter(
+                    (item: any) => item.seriesName === indicatorName && item?.data?.[1] != null
+                )
+                if (indicatorItems.length) {
+                    const item = indicatorItems[indicatorItems.length - 1]
+                    result += `<br/>${item.marker}${indicatorName}: ${getExceedanceChartText(item.data[1])}`
+                }
                 return result
             }
         },
@@ -217,35 +309,76 @@ const setEchart = () => {
                 }
             }
         },
+        dataZoom: [
+            {
+                type: 'inside',
+                height: 13,
+                start: 0,
+                bottom: '20px',
+                end: 100,
+                filterMode: 'filter'
+            },
+            {
+                start: 0,
+                height: 13,
+                bottom: '20px',
+                end: 100,
+                filterMode: 'filter'
+            }
+
+        ],
         yAxis: [
             {},
             indicatorName
                 ? {
+                      position: 'right',
                       min: 0,
-                      max: 1,
+                      max: 11,
+                      interval: 1,
+                      splitLine: {
+                          lineStyle: {
+                              color: ['#ccc'],
+                              type: 'dashed',
+                              opacity: 0
+                          }
+                      },
                       axisLabel: {
                           formatter: function (value: number) {
-                              if (value === 0) {
-                                  return '不越限'
-                              } else if (value === 1) {
-                                  return '越限'
-                              }
-                              return value
+                              if (value === 1) return '越限'
+                              if (value === 10) return '不越限'
+                              return ''
                           }
                       }
                   }
                 : {}
         ],
-        grid: {
-            left: '10px',
-            right: '20px'
-        },
+        // grid: {
+        //     left: '10px',
+        //     right: '30px',
+        // },
         options: {
+            // dataZoom: [
+            //     {
+            //         type: 'inside',
+            //         start: 0,
+            //         end: 100,
+            //         filterMode: 'filter'
+            //     },
+            //     {
+            //         type: 'slider',
+            //         start: 0,
+            //         end: 100,
+            //         height: 13,
+            //         bottom: '20px',
+            //         filterMode: 'filter'
+            //     }
+            // ],
             series: [
                 {
                     type: 'bar',
-                    name: powerName, // 动态设置功率名称
+                    name: powerName,
                     data: [],
+                    clip: true,
                     itemStyle: {
                         normal: {
                             color: function (params: any) {
@@ -258,15 +391,6 @@ const setEchart = () => {
                         }
                     },
                     yAxisIndex: 0
-                },
-                {
-                    name: indicatorName, // 动态设置指标名称
-                    type: 'line',
-                    step: 'end',
-                    showSymbol: false,
-                    // smooth: true,
-                    data: [],
-                    yAxisIndex: 1
                 }
             ]
         }
@@ -312,9 +436,12 @@ const setEchart = () => {
         const hasPowerData = processedPowerData.length > 0 && processedPowerData.some(item => item[1] !== null)
         const hasQualityData = processedQualityData.length > 0 && processedQualityData.some(item => item[1] !== null)
 
-        // 更新图表配置
+        qualityChartData.value = processedQualityData
+        echartList.value.options.series = [
+            echartList.value.options.series[0],
+            ...buildColoredExceedanceSeries(processedQualityData, indicatorName)
+        ]
         echartList.value.options.series[0].data = processedPowerData
-        echartList.value.options.series[1].data = processedQualityData
     } catch (error) {
         console.error('处理图表数据时出错:', error)
     }
@@ -450,7 +577,7 @@ watch(
 )
 
 onMounted(async () => {
-    await initLineList()
+    // await initCode()
 })
 
 watch(
@@ -492,4 +619,11 @@ watch(
 // :deep(.el-select) {
 //     min-width: 80px;
 // }
+.device-control {
+    display: flex;
+}
+
+:deep(.cn-tree) {
+    padding: 0 10px 0 0 !important;
+}
 </style>

src/components/cockpit/monitoringPointList/components/overLimitDetails.vue

@@ -1,10 +1,10 @@
 <template>
     <div>
         <!-- 指标越限详情  -->
-        <el-dialog draggable title="指标越限详情" v-model="dialogVisible" append-to-body width="70%">
+        <el-dialog draggable :title="title"  v-model="dialogVisible" append-to-body width="70%">
             <TableHeader datePicker showExport :showReset="false" ref="tableHeaderRef">
                 <template v-slot:select>
-                    <el-form-item label="监测点">
+                    <!-- <el-form-item label="监测点">
                         <el-select
                             v-model="tableStore.table.params.lineId"
                             placeholder="请选择监测点"
@@ -18,7 +18,7 @@
                                 :value="item.lineId"
                             />
                         </el-select>
-                    </el-form-item>
+                    </el-form-item> -->
                 </template>
             </TableHeader>
             <Table ref="tableRef" @cell-click="cellClickEvent" isGroup :height="height"></Table>
@@ -38,7 +38,7 @@ import { cslineList ,governLineList} from '@/api/harmonic-boot/cockpit/cockpit'
 
 const dialogVisible: any = ref(false)
 const harmonicRatio‌Ref: any = ref(null)
-
+const title = ref('指标越限详情')
 const options = ref()
 const height = mainHeight(0, 2).height as any
 const tableHeaderRef = ref()
@@ -76,13 +76,13 @@ const tableStore: any = new TableStore({
         {
             title: '日期',
             field: 'time',
-            width: '150',
+            width: '120',
             sortable: true
         },
         {
             title: '名称',
             field: 'lineName',
-            width: '150'
+            width: '120'
         },
         {
             title: '长时闪变越限(%)',
@@ -144,6 +144,7 @@ tableStore.table.params.orderBy = ''
 const time:any=ref([])
 const open = async (row: any,searchBeginTime:any,searchEndTime:any) => {
     dialogVisible.value = true
+     title.value = row.lineName + '_指标越限详情'
     time.value=[searchBeginTime,searchEndTime]
     initCSlineList()
     tableStore.table.params.lineId = row.lineId
@@ -159,7 +160,7 @@ const open = async (row: any,searchBeginTime:any,searchEndTime:any) => {
 
 // 点击行
 const cellClickEvent = ({ row, column }: any) => {
-    if (column.field != 'name' && column.field != 'time') {
+    if (column.field != 'lineName' && column.field != 'name' && column.field != 'time') {
         dialogFlag.value = true
         dialogVisible.value = false
         nextTick(() => {

src/components/cockpit/monitoringPointList/index.vue

@@ -1,55 +1,26 @@
 <template>
     <div>
+
         <!-- 监测点列表 -->
-        <TableHeader
-            ref="TableHeaderRef"
-            :showReset="false"
-            @selectChange="selectChange"
-            v-if="fullscreen"
-            :timeKeyList="prop.timeKey"
-        >
+        <TableHeader ref="TableHeaderRef" :showReset="false" showExport @selectChange="selectChange" v-if="fullscreen"
+            :timeKeyList="prop.timeKey">
             <template #select>
                 <el-form-item label="关键字筛选">
-                    <el-input
-                        maxlength="32"
-                        show-word-limit
-                        style="width: 240px"
-                        v-model.trim="tableStore.table.params.searchValue"
-                        clearable
-                        placeholder="请输入监测点名称"
-                    />
+                    <el-input maxlength="32" show-word-limit style="width: 240px"
+                        v-model.trim="tableStore.table.params.searchValue" clearable placeholder="请输入监测点名称" />
                 </el-form-item>
             </template>
         </TableHeader>
-        <Table
-            ref="tableRef"
-            @cell-click="cellClickEvent"
-            :height="`calc(${prop.height} - ${headerHeight}px + ${fullscreen ? -58 : 56}px )`"
-        ></Table>
+        <Table ref="tableRef" @cell-click="cellClickEvent"
+            :height="`calc(${prop.height} - ${headerHeight}px + ${fullscreen ? -58 : 56}px )`"></Table>
         <!-- 指标越限详情 -->
         <OverLimitDetails ref="OverLimitDetailsRef" />
 
         <!-- 上传对话框 -->
-        <el-dialog
-            v-model="uploadDialogVisible"
-            title="上传报告"
-            append-to-body
-            width="500px"
-            @closed="handleDialogClosed"
-        >
-            <el-upload
-                ref="uploadRef"
-                class="upload-demo"
-                action=""
-                accept=".doc,.docx,.PDF"
-                :on-change="handleChange"
-                :before-upload="beforeUpload"
-                :limit="1"
-                :auto-upload="false"
-                :on-exceed="handleExceed"
-                :on-remove="handleRemove"
-                :file-list="fileList"
-            >
+        <el-dialog v-model="uploadDialogVisible" title="上传报告" append-to-body width="500px" @closed="handleDialogClosed">
+            <el-upload ref="uploadRef" class="upload-demo" action="" accept=".doc,.docx,.PDF" :on-change="handleChange"
+                :before-upload="beforeUpload" :limit="1" :auto-upload="false" :on-exceed="handleExceed"
+                :on-remove="handleRemove" :file-list="fileList">
                 <el-button type="primary">点击上传</el-button>
                 <template #tip>
                     <div class="el-upload__tip">请上传Word或PDF文件</div>
@@ -58,7 +29,7 @@
             <template #footer>
                 <span class="dialog-footer">
                     <el-button @click="uploadDialogVisible = false">取消</el-button>
-                    <el-button type="primary" @click="handleUpload">确定</el-button>
+                    <el-button type="primary" @click="handleUpload" :loading="loading">确定</el-button>
                 </span>
             </template>
         </el-dialog>
@@ -66,15 +37,15 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, provide, reactive, watch, h } from 'vue'
+import { ref, onMounted, provide, watch, computed } from 'vue'
 import TableStore from '@/utils/tableStore'
 import Table from '@/components/table/index.vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import OverLimitDetails from '@/components/cockpit/monitoringPointList/components/overLimitDetails.vue'
 import TableHeader from '@/components/table/header/index.vue'
 import { uploadReport, getReportUrl } from '@/api/harmonic-boot/cockpit/cockpit'
-import { getTime } from '@/utils/formatTime'
 
+import { downLoadFile } from '@/api/cs-system-boot/manage'
 const prop = defineProps({
     w: { type: [String, Number] },
     h: { type: [String, Number] },
@@ -82,7 +53,8 @@ const prop = defineProps({
     height: { type: [String, Number] },
     timeKey: { type: Array as () => string[] },
     timeValue: { type: Object },
-    interval: { type: Number }
+    interval: { type: Number },
+    flag: { type: Boolean }
 })
 
 const headerHeight = ref(57)
@@ -94,7 +66,7 @@ const uploadDialogVisible = ref(false)
 const currentUploadRow = ref<any>(null)
 const uploadRef = ref()
 const fileList = ref([])
-
+const loading = ref(false)
 const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
     headerHeight.value = height
 
@@ -135,20 +107,23 @@ const tableStore: any = new TableStore({
         {
             title: '监测点名称',
             field: 'lineName',
-            minWidth: '120',
+            minWidth: 150,
             render: 'customTemplate',
             customTemplate: (row: any) => {
-                return `<span style='cursor: pointer;text-decoration: underline;'>${row.lineName}</span>`
-            }
-        },
-        {
-            title: '监测类型',
-            field: 'position',
-            minWidth: '80',
-            formatter: (row: any) => {
-                return row.cellValue || '/'
+                return `<span style='cursor: pointer;text-decoration: underline;'>${row?.cellValue || '/'}</span>`
             }
         },
+        { title: '设备名称', field: 'devName', minWidth: 150, align: 'center' },
+        { title: '项目名称', field: 'projectName', minWidth: 150, align: 'center' },
+        { title: '工程名称', field: 'engineeringName', minWidth: 150, align: 'center' },
+        // {
+        //     title: '监测类型',
+        //     field: 'position',
+        //     minWidth: '100',
+        //     formatter: (row: any) => {
+        //         return row.cellValue || '/'
+        //     }
+        // },
         // {
         //     title: '监测点状态',
         //     field: 'runStatus',
@@ -162,50 +137,38 @@ const tableStore: any = new TableStore({
             title: '监测点状态',
             field: 'runStatus',
             render: 'tag',
-
-            width: 100,
+            width: 90,
             custom: {
-                停运: 'danger',
-                退运: 'danger',
-                运行: 'success',
-                在线: 'success',
-                中断: 'warning',
-                离线: 'danger',
-                检修: 'warning',
-                调试: 'warning',
+                0: 'success',
+                2: 'danger',
                 null: 'info'
             },
             replaceValue: {
-                运行: '运行',
-                在线: '在线',
-                退运: '退运',
-                停运: '停运',
-                中断: '中断',
-                检修: '检修',
-                离线: '离线',
-                调试: '调试',
+                0: '在线',
+                2: '离线',
                 null: '/'
             }
         },
+        {
+            title: '电压等级(kV)',
+            field: 'volGrade',
+            minWidth: '100',
+            formatter: (row: any) => {
+                return row.cellValue == 0 ? '/' : row.cellValue || '/'
+            }
+        },
         {
             title: '治理对象',
             field: 'sensitiveUser',
-            minWidth: '90',
+            minWidth: '100',
             formatter: (row: any) => {
                 return row.cellValue || '/'
             }
         },
 
+
         {
-            title: '电压等级',
-            field: 'volGrade',
-            minWidth: '80',
-            formatter: (row: any) => {
-                return row.cellValue == 0 ? '/' : row.cellValue + 'kV' || '/'
-            }
-        },
-        {
-            title: '是否治理',
+            title: '治理方案',
             field: 'govern',
             minWidth: '80',
             formatter: (row: any) => {
@@ -240,9 +203,9 @@ const tableStore: any = new TableStore({
         //     }
         // },
         {
-            title: '报告',
+            title: '治理前报告',
             field: 'reportFilePath',
-            minWidth: '120',
+            minWidth: '150',
             formatter: (row: any) => {
                 return row.cellValue == null ? '/' : row.cellValue.split('/').pop()
             }
@@ -274,7 +237,7 @@ const tableStore: any = new TableStore({
                     icon: 'el-icon-EditPen',
                     render: 'basicButton',
                     click: row => {
-                        downloadTheReport(row.lineId, row.reportFilePath)
+                        downloadTheReport(row.reportFilePath)
                     },
                     disabled: row => {
                         return row.reportFilePath == null || row.reportFilePath.length == 0
@@ -339,42 +302,32 @@ const cellClickEvent = ({ row, column }: any) => {
     }
 }
 
-// 下载报告
-const downloadTheReport = (lineId: string, name: string) => {
-    getReportUrl({ lineId: lineId }).then((res: any) => {
-        forceDownloadPdf(res.data, name.split('/').pop() || '')
-    })
-}
-const forceDownloadPdf = async (pdfUrl, fileName = '文件.pdf') => {
+// 下载报告（支持 doc/docx/pdf）
+const downloadTheReport = async (reportFilePath: string) => {
+    if (!reportFilePath) {
+        ElMessage.warning('暂无报告可下载')
+        return
+    }
+    ElMessage.info('下载中......')
     try {
-        // 1. 请求 PDF 并转为 Blob（关键：绕开浏览器直接解析）
-        const response = await fetch(pdfUrl, {
-            method: 'GET'
-            // 若需要鉴权，添加请求头（如 token）
-        })
-
-        // 校验响应是否成功
-        if (!response.ok) throw new Error(`请求失败：${response.status}`)
-
-        // 2. 将响应转为 Blob（指定类型为 PDF，确保兼容性）
-        const blob = await response.blob()
-        const pdfBlob = new Blob([blob], { type: 'application/pdf' })
-
-        // 3. 创建临时 URL 并触发下载
-        const blobUrl = URL.createObjectURL(pdfBlob)
-        const a = document.createElement('a')
-        a.href = blobUrl
-        a.download = fileName // 此时 Blob URL 是同源的，download 必生效
-        a.style.display = 'none'
-        document.body.appendChild(a)
-        a.click() // 触发下载
-
-        // 4. 清理资源（避免内存泄漏）
-        document.body.removeChild(a)
-        URL.revokeObjectURL(blobUrl)
-    } catch (error) {
-        console.error('PDF 下载失败：', error)
-        // ElMessage.error('文件下载失败，请检查网络或文件地址') // 适配 Element Plus
+        const resp = (await downLoadFile(reportFilePath)) as unknown as Blob
+        if (resp?.type === 'application/json') {
+            ElMessage.error('下载失败')
+            return
+        }
+        const fileName = reportFilePath.split('/').pop() || '报告'
+        const blob = new Blob([resp], { type: resp.type || 'application/octet-stream' })
+        const url = window.URL.createObjectURL(blob)
+        const link = document.createElement('a')
+        link.href = url
+        link.download = fileName
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
+        window.URL.revokeObjectURL(url)
+        ElMessage.success('下载成功')
+    } catch (error: any) {
+        ElMessage.error('下载失败: ' + (error.message || '未知错误'))
     }
 }
 
@@ -431,7 +384,7 @@ const beforeUpload = (file: any) => {
 
 const handleUpload = async () => {
     // return
-
+    loading.value = true
     const formData = new FormData()
     formData.append('file', fileList.value[0]?.raw)
     formData.append('lineId', currentUploadRow.value?.lineId || currentUploadRow.value?.id || '')
@@ -442,15 +395,24 @@ const handleUpload = async () => {
         uploadDialogVisible.value = false
         tableStore.index()
         return Promise.resolve(result)
+
     } catch (error: any) {
         ElMessage.error('上传失败: ' + (error.message || '未知错误'))
         return Promise.reject(error)
+    } finally {
+        loading.value = false
     }
 }
 
 onMounted(() => {
     tableStore.index()
 })
+watch(
+    () => prop.flag,
+    val => {
+        tableStore.showPage = fullscreen.value ? true : false
+    }
+)
 watch(
     () => prop.timeKey,
     val => {

src/components/cockpit/overLimitStatistics/components/harmonicRatio‌.vue

@@ -75,9 +75,6 @@
                 </template>
                 <template #operation>
                     <el-button type="primary" icon="el-icon-Search" @click="init()">查询</el-button>
-                    <el-button :type="timeControl ? 'primary' : ''" icon="el-icon-Sort" @click="setTimeControl">
-                        缺失数据
-                    </el-button>
                 </template>
             </TableHeader>
         </div>
@@ -94,7 +91,7 @@ import { ref, onMounted, watch } from 'vue'
 import MyEchart from '@/components/echarts/MyEchart.vue'
 import { useDictData } from '@/stores/dictData'
 import { queryStatistical } from '@/api/system-boot/csstatisticalset'
-import { yMethod, exportCSV, completeTimeSeries } from '@/utils/echartMethod'
+import { yMethod, exportSeriesCSV, completeTimeSeries } from '@/utils/echartMethod'
 import TableHeader from '@/components/table/header/index.vue'
 import { trendData } from '@/api/harmonic-boot/cockpit/cockpit'
 import DatePicker from '@/components/form/datePicker/index.vue'
@@ -380,14 +377,18 @@ const setEchart = () => {
     }
 
     echartsData.value = {
+        exportFileName: {
+            subject: trendRequestData.value?.lineName,
+            feature: '趋势图',
+            date: datePickerRef.value?.timeValue?.[1] || datePickerRef.value?.timeValue?.[0]
+        },
         legend: {
             itemWidth: 20,
             itemHeight: 20,
             itemStyle: { opacity: 0 }, //去圆点
             type: 'scroll', // 开启滚动分页
             // orient: 'vertical', // 垂直排列
-            top: 5,
-            right: 70
+           
             // width: 550,
             // height: 50
         },
@@ -448,26 +449,18 @@ const setEchart = () => {
                 myTool1: {
                     show: true,
                     title: '下载csv',
-                    icon: 'path://M588.8 551.253333V512H352v39.253333h236.373333z m0 78.933334v-39.253334H352v39.253334h236.373333z m136.533333 78.933333V334.933333l-157.866666-157.866666H273.066667A59.306667 59.306667 0 0 0 213.333333 236.373333v551.253334a59.306667 59.306667 0 0 0 59.306667 59.306666h274.773333v42.666667H853.333333v-180.48zM568.746667 234.666667l100.266666 100.693333h-81.066666a20.053333 20.053333 0 0 1-19.626667-20.053333z m-20.48 573.013333H273.066667a19.2 19.2 0 0 1-17.493334-19.626667V236.373333a19.2 19.2 0 0 1 19.626667-19.626666h256v98.133333a58.88 58.88 0 0 0 58.88 59.306667h96.426667v334.933333h-98.133334v-39.68H352v39.68h196.266667z m100.266666 23.04a37.973333 37.973333 0 0 1-32 15.786667 38.826667 38.826667 0 0 1-32.426666-15.786667 53.76 53.76 0 0 1-10.24-32.853333 42.666667 42.666667 0 0 1 42.666666-47.786667 35.84 35.84 0 0 1 37.546667 29.866667h-12.8a23.893333 23.893333 0 0 0-24.746667-19.2c-17.066667 0-29.013333 14.08-29.013333 35.84s11.52 37.546667 28.586667 37.546666a26.453333 26.453333 0 0 0 26.453333-25.6h12.8a39.253333 39.253333 0 0 1-7.253333 22.186667z m59.733334 15.786667a35.84 35.84 0 0 1-40.106667-34.56H682.666667a23.893333 23.893333 0 0 0 26.88 23.04c12.8 0 22.613333-6.4 22.613333-15.786667s-4.266667-11.52-14.506667-13.653333l-21.333333-5.12c-17.066667-4.266667-24.32-11.52-24.32-23.893334s12.8-26.453333 34.133333-26.453333a31.573333 31.573333 0 0 1 35.413334 30.293333h-13.653334a19.626667 19.626667 0 0 0-22.613333-18.773333c-12.8 0-20.48 5.12-20.48 12.8s5.12 11.093333 17.066667 13.653333l14.933333 2.986667a42.666667 42.666667 0 0 1 20.906667 8.96 23.893333 23.893333 0 0 1 7.68 17.92c-0.426667 17.066667-14.506667 28.16-37.12 28.16z m88.746666 0h-14.506666l-32.426667-92.16h14.08l19.626667 59.733333 6.4 20.053333c0-9.386667 3.413333-12.8 5.546666-20.053333l19.2-59.733333h14.08z',
-                    onclick: e => {
-                        // console.log("🚀 ~ init ~ echartsData.value:", echartsData.value.options.series.map(item => item.data))
-
-                        let list = echartsData.value.options.series?.map((item: any) => item.data)
-                        let dataList = list[0]?.map((item: any, index: any) => {
-                            let value = [item[0], item[1]]
-                            list.forEach((item1: any, index1: any) => {
-                                if (index1 > 0) {
-                                    value.push(item1 && item1[index] ? item1[index][1] : null)
-                                }
-                            })
-
-                            return value
-                        })
-                        exportCSV(
-                            echartsData.value.options.series.map((item: any) => item.name),
-                            dataList,
-                            '监测点指标趋势.csv'
-                        )
+                    icon: 'path://M642 673.1H301.6c-9.9 0-17.9-8-17.9-17.9s8-17.9 17.9-17.9H642c9.9 0 17.9 8 17.9 17.9s-8 17.9-17.9 17.9zM642 511.8H301.6c-9.9 0-17.9-8-17.9-17.9 0-9.9 8-17.9 17.9-17.9H642c9.9 0 17.9 8 17.9 17.9 0 9.9-8 17.9-17.9 17.9zM480.7 350.6H301.6c-9.9 0-17.9-8-17.9-17.9s8-17.9 17.9-17.9h179.2c9.9 0 17.9 8 17.9 17.9s-8.1 17.9-18 17.9zM874.9 350.6H695.7c-49.4 0-89.6-40.2-89.6-89.6V81.9c0-9.9 8-17.9 17.9-17.9 9.9 0 17.9 8 17.9 17.9V261c0 29.6 24.1 53.7 53.7 53.7h179.2c9.9 0 17.9 8 17.9 17.9s-7.9 18-17.8 18zM794.3 959.7H221c-49.4 0-89.6-40.2-89.6-89.6V153.5c0-49.4 40.2-89.6 89.6-89.6h403.1c4.8 0 9.3 1.9 12.7 5.2L887.6 320c3.4 3.4 5.2 7.9 5.2 12.7v537.5c0 52.7-51.9 89.5-98.5 89.5zM221 99.8c-29.6 0-53.7 24.1-53.7 53.7v716.6c0 29.6 24.1 53.7 53.7 53.7h573.3c29 0 62.7-23.5 62.7-53.7v-530L616.7 99.8H221z',
+                    onclick: () => {
+                        exportSeriesCSV(echartsData.value.options.series, echartsData.value.exportFileName)
+                    }
+                },
+                myTool2: {
+                    show: true,
+                    title: timeControl.value ? '关闭缺失数据' : '缺失数据',
+                    icon: 'path://M832 512l-192-192v128H128v128h512v128l192-192zM192 512l192 192v-128h512v-128H384V320L192 512z',
+                    iconStyle: timeControl.value ? { borderColor: '#409EFF' } : {},
+                    onclick: () => {
+                        setTimeControl()
                     }
                 }
             }

src/components/cockpit/overLimitStatistics/components/overLimitDetails.vue

@@ -1,10 +1,10 @@
 <template>
     <div>
         <!-- 指标越限详情  -->
-        <el-dialog draggable title="指标越限详情" v-model="dialogVisible" append-to-body width="70%">
+        <el-dialog draggable :title="title"  v-model="dialogVisible" append-to-body width="1200">
             <TableHeader datePicker showExport :showReset="false" ref="tableHeaderRef">
                 <template v-slot:select>
-                    <el-form-item label="监测点">
+                    <!-- <el-form-item label="监测点">
                         <el-select
                             v-model="tableStore.table.params.lineId"
                             placeholder="请选择监测点"
@@ -18,7 +18,7 @@
                                 :value="item.lineId"
                             />
                         </el-select>
-                    </el-form-item>
+                    </el-form-item> -->
                 </template>
             </TableHeader>
             <Table ref="tableRef" @cell-click="cellClickEvent" isGroup :height="height"></Table>
@@ -38,7 +38,7 @@ import { cslineList } from '@/api/harmonic-boot/cockpit/cockpit'
 
 const dialogVisible: any = ref(false)
 const harmonicRatio‌Ref: any = ref(null)
-
+const title = ref('指标越限详情')
 const options = ref()
 const height = mainHeight(0, 2).height as any
 const tableHeaderRef = ref()
@@ -76,13 +76,13 @@ const tableStore: any = new TableStore({
         {
             title: '日期',
             field: 'time',
-            width: '150',
+            width: '120',
             sortable: true
         },
         {
             title: '名称',
             field: 'lineName',
-            width: '150'
+            width: '120'
         },
         {
             title: '长时闪变越限(%)',
@@ -144,6 +144,7 @@ tableStore.table.params.orderBy = ''
 const open = async (row: any,searchBeginTime:any,searchEndTime:any,data: any) => {
     dialogVisible.value = true
     // initCSlineList()
+       title.value = row.lineName + '_指标越限详情'
      options.value = data
     tableStore.table.params.lineId = row.lineId
 
@@ -158,7 +159,7 @@ const open = async (row: any,searchBeginTime:any,searchEndTime:any,data: any) =>
 
 // 点击行
 const cellClickEvent = ({ row, column }: any) => {
-    if (column.field != 'name' && column.field != 'time') {
+    if (column.field != 'lineName' && column.field != 'name' && column.field != 'time') {
         dialogFlag.value = true
         dialogVisible.value = false
         nextTick(() => {

src/components/cockpit/overLimitStatistics/index.vue

@@ -142,17 +142,20 @@ const tableStore: any = new TableStore({
             }
         },
         {
-            title: '名称',
+            title: '监测点名称',
             field: 'lineName',
-            minWidth: '90'
+            minWidth: 150
         },
+        { title: '设备名称', field: 'devName', minWidth: 150, align: 'center' },
+        { title: '项目名称', field: 'projectName', minWidth: 150, align: 'center' },
+        { title: '工程名称', field: 'engineeringName', minWidth: 150, align: 'center' },
         {
             title: '越限占比(%)',
             children: [
                 {
                     title: '长时闪变',
                     field: 'flicker',
-                    minWidth: '70',
+                    minWidth: '80',
                     render: 'customTemplate',
                     customTemplate: (row: any) => {
                         return `<span style='cursor: pointer;text-decoration: underline;'>${row.flicker}</span>`

src/components/cockpit/sensitiveLoad/index.vue

@@ -1,32 +1,17 @@
 <template>
     <div>
         <!--敏感负荷列表 -->
-        <TableHeader
-            ref="TableHeaderRef"
-            :showReset="false"
-            @selectChange="selectChange"
-            v-if="fullscreen"
-            :timeKeyList="prop.timeKey"
-        >
+        <TableHeader ref="TableHeaderRef" :showReset="false" @selectChange="selectChange" v-if="fullscreen"
+            :timeKeyList="prop.timeKey">
             <template #select>
                 <el-form-item label="关键字筛选">
-                    <el-input
-                        maxlength="32"
-                        show-word-limit
-                        style="width: 240px"
-                        v-model.trim="tableStore.table.params.searchValue"
-                        clearable
-                        placeholder="请输入敏感负荷名称"
-                    />
+                    <el-input maxlength="32" show-word-limit style="width: 240px"
+                        v-model.trim="tableStore.table.params.searchValue" clearable placeholder="请输入用户名称" />
                 </el-form-item>
             </template>
         </TableHeader>
-        <Table
-            ref="tableRef"
-            @cell-click="cellClickEvent"
-            :height="`calc(${prop.height} - ${headerHeight}px + ${fullscreen ? -58 : 56}px  )`"
-            isGroup
-        ></Table>
+        <Table ref="tableRef" @cell-click="cellClickEvent"
+            :height="`calc(${prop.height} - ${headerHeight}px + ${fullscreen ? -58 : 56}px  )`" isGroup></Table>
     </div>
 </template>
 <script setup lang="ts">
@@ -44,7 +29,8 @@ const prop = defineProps({
     height: { type: [String, Number] },
     timeKey: { type: Array as () => string[] },
     timeValue: { type: Object },
-    interval: { type: Number }
+    interval: { type: Number },
+    flag: { type: Boolean }
 })
 
 const headerHeight = ref(57)
@@ -91,13 +77,13 @@ const tableStore: any = new TableStore({
             }
         },
         {
-            title: '敏感负荷名称',
+            title: '用户名称',
             field: 'name',
             minWidth: '90'
         },
 
         {
-            title: '敏感负荷类型',
+            title: '用户类型',
             field: 'loadType',
             minWidth: '70',
             formatter: row => {
@@ -125,7 +111,7 @@ const tableStore: any = new TableStore({
         setTime()
     },
 
-    loadCallback: () => {}
+    loadCallback: () => { }
 })
 tableStore.table.params.searchValue = ''
 const tableRef = ref()
@@ -136,7 +122,6 @@ provide('tableStore', tableStore)
 // 点击行
 const cellClickEvent = ({ row, column }: any) => {
     if (column.field != 'name') {
-        console.log(row)
         OverLimitDetailsRef.value.open(row)
     }
 }
@@ -179,5 +164,11 @@ watch(
         deep: true
     }
 )
+watch(
+    () => prop.flag,
+    val => {
+        tableStore.showPage = fullscreen.value ? true : false
+    }
+)
 </script>
 <style lang="scss" scoped></style>

src/components/cockpit/transientDetails/components/transientList.vue

@@ -1,200 +1,156 @@
 <template>
     <div>
-        <!-- 暂态事件详情 -->
-        <el-dialog draggable title="暂态事件详情 " v-model="dialogVisible" append-to-body width="70%">
-            <TableHeader datePicker showExport :showReset="false" ref="tableHeaderRef" @selectChange="selectChange">
-                <template v-slot:select>
-                    <el-form-item label="监测点" v-if="props.showLine">
-                        <el-select v-model="tableStore.table.params.lineId" filterable placeholder="请选择监测点名称">
-                            <el-option
-                                v-for="item in options"
-                                :key="item.value"
-                                :label="item.label"
-                                :value="item.value"
-                            />
-                        </el-select>
-                    </el-form-item>
-                    <el-form-item label="暂态类型">
-                        <el-select
-                            v-model="tableStore.table.params.eventType"
-                            style="min-width: 150px"
-                            clearable
-                            placeholder="请选择暂态类型"
-                        >
-                            <el-option
-                                v-for="item in eventList"
-                                :key="item.value"
-                                :label="item.label"
-                                :value="item.value"
-                            />
-                        </el-select>
-                    </el-form-item>
+        <el-dialog draggable title="暂态事件" v-model="dialogVisible" append-to-body width="70%">
+            <TableHeader datePicker showExport ref="tableHeaderRef" @selectChange="selectChange"
+                @onResetForm="onResetForm">
+                <template v-slot:operation>
+                    <el-button type="primary" icon="el-icon-Operation" @click="openFilterDialog">事件筛选</el-button>
                 </template>
             </TableHeader>
+
+            <MultiCondition v-model:visible="filterVisible" :params="tableStore.table.params" ref="multiConditionRef"
+                @confirm="onFilterConfirm" />
+
             <Table ref="tableRef" isGroup :height="heightRef"></Table>
         </el-dialog>
-        <!-- 查看波形 -->
-        <el-dialog
-            v-model="isWaveCharts"
-            draggable
-            title="波形分析"
-            append-to-body
-            v-if="isWaveCharts"
-            width="70%"
-            @close="handleHideCharts"
-        >
-            <waveFormAnalysis
-                v-loading="loading"
-                ref="waveFormAnalysisRef"
-                @handleHideCharts="handleHideCharts"
-                :wp="wp"
-            />
+
+        <el-dialog v-model="isWaveCharts" draggable title="波形分析" append-to-body width="70%" @close="handleHideCharts">
+            <waveFormAnalysis v-loading="loading" v-if="isWaveCharts" ref="waveFormAnalysisRef"
+                @handleHideCharts="handleHideCharts" :wp="wp" />
         </el-dialog>
     </div>
 </template>
+
 <script setup lang="ts">
-import { ref, provide } from 'vue'
+import { ref, provide, nextTick } from 'vue'
+import { ElMessage } from 'element-plus'
 import Table from '@/components/table/index.vue'
 import TableHeader from '@/components/table/header/index.vue'
 import TableStore from '@/utils/tableStore'
 import { mainHeight } from '@/utils/layout'
+import MultiCondition from '@/views/govern/alarm/multiCondition.vue'
 import waveFormAnalysis from '@/views/govern/device/control/tabs/components/waveFormAnalysis.vue'
 import { analyseWave } from '@/api/common'
-import { getSimpleLine } from '@/api/harmonic-boot/cockpit/cockpit'
-interface Props {
-    showLine?: boolean
-}
+import { getFileZip } from '@/api/cs-harmonic-boot/datatrend'
+import { buildWaveExportFileName, getExportSubjectFromRow } from '@/utils/echartMethod'
+import { useDictData } from '@/stores/dictData'
 
-const props = withDefaults(defineProps<Props>(), {
-    showLine: true
-})
-
-const dialogVisible: any = ref(false)
-const waveFormAnalysisRef: any = ref(null)
-// 波形
+const dialogVisible = ref(false)
+const waveFormAnalysisRef = ref()
 const isWaveCharts = ref(false)
 const loading = ref(false)
 const wp = ref({})
 const boxoList: any = ref({})
-
 const tableHeaderRef = ref()
+const filterVisible = ref(false)
+const multiConditionRef = ref<InstanceType<typeof MultiCondition>>()
+const currentOpenTime = ref('')
+
+const dictData = useDictData()
+const ReasonList: any = dictData.getBasicData('Event_Reason')
+const EventTypeList: any = dictData.getBasicData('Event_Type')
 
-const options = ref()
 const heightRef = ref(mainHeight(168, 2.1).height)
-const selectChange = (flag: boolean, h: any) => {
+const selectChange = (_flag: boolean, h: number) => {
     heightRef.value = mainHeight(h, 2.1).height
 }
-const eventList = [
-    { label: '电压暂降', value: '1' },
-    { label: '电压中断', value: '2' },
-    { label: '电压暂升', value: '3' }
-]
-const getSimpleLineList = async () => {
-    const res = await getSimpleLine()
-    options.value = res.data
-}
 
 const tableStore: any = new TableStore({
-    url: '/cs-harmonic-boot/event/pageEvent',
+    url: '/cs-harmonic-boot/eventUser/queryEventpageWeb',
     method: 'POST',
     showPage: true,
-    exportName: '暂态事件详情',
+    exportName: '暂态事件',
     column: [
         {
-            field: 'index',
             title: '序号',
-            width: '80',
+            width: 80,
             formatter: (row: any) => {
                 return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
             }
         },
-        {
-            title: '暂态时间',
-            field: 'startTime',
-            minWidth: '180'
-        },
-        {
-            title: '测点名称',
-            field: 'lineName',
-            minWidth: '150'
-        },
-        {
-            title: '暂态类型',
-            field: 'tag',
-            minWidth: '100'
-        },
-        {
-            title: '特征幅值(%)',
-            field: 'amplitude',
-            minWidth: '100'
-        },
-        {
-            title: '暂降深度(%)',
-            field: 'depth',
-            minWidth: '100',
-            formatter: (row: any) => {
-                // 当暂态类型不是电压暂升时，计算暂降深度 = 100 - 特征幅值
-                if (row.row.tag !== '电压暂升') {
-                    const amplitude = parseFloat(row.row.amplitude)
-                    if (!isNaN(amplitude)) {
-                        return 100 - amplitude
-                    }
-                    return '-'
-                } else {
-                    // 电压暂升时不显示暂降深度
-                    return '/'
-                }
-            }
-        },
-        {
-            title: '持续时间(S)',
-            field: 'persistTime',
-            minWidth: '100'
-        },
+        { title: '发生时刻', field: 'startTime', align: 'center', minWidth: 180, sortable: true },
+        { title: '暂降幅值(%)', minWidth: 120, field: 'evtParamVVaDepth', align: 'center', sortable: true },
+        { title: '持续时间(s)', field: 'evtParamTm', minWidth: 110, align: 'center', sortable: true },
         {
             title: '严重度',
             field: 'severity',
-            minWidth: '80'
+            minWidth: 80,
+            align: 'center',
+            sortable: true,
+            formatter: (row: any) => row.cellValue ? row.cellValue : '/'
+        },
+        { title: '相别', field: 'evtParamPhase', minWidth: 80, align: 'center' },
+        { title: '触发类型', field: 'showName', minWidth: 100, align: 'center' },
+        {
+            title: '暂降原因',
+            field: 'advanceReason',
+            minWidth: 100,
+            align: 'center',
+            formatter: (row: any) => ReasonList.find((item: any) => item.id == row.cellValue)?.name || '其他'
         },
         {
-            title: '波形',
-            minWidth: '100',
+            title: '暂降类型',
+            field: 'advanceType',
+            minWidth: 100,
+            align: 'center',
+            formatter: (row: any) => EventTypeList.find((item: any) => item.id == row.cellValue)?.name || '其他'
+        },
+        { title: '监测点名称', field: 'lineName', minWidth: 150, align: 'center' },
+        { title: '电压等级(kV)', field: 'lineVoltage', minWidth: 120, align: 'center', sortable: true },
+        { title: '设备名称', field: 'equipmentName', minWidth: 150, align: 'center' },
+        { title: '项目名称', field: 'projectName', minWidth: 150, align: 'center' },
+        { title: '工程名称', field: 'engineeringName', minWidth: 150, align: 'center' },
+        {
+            title: '发生位置',
+            field: 'sagSource',
+            minWidth: 120,
+            align: 'center',
+            formatter: (row: any) => row.cellValue == 1 ? '上游' : row.cellValue == 2 ? '下游' : '暂无'
+        },
+        {
+            title: '操作',
+            fixed: 'right',
+            align: 'center',
+            width: 150,
             render: 'buttons',
             buttons: [
                 {
                     name: 'edit',
-                    text: '波形分析',
-                    type: 'primary',
+                    text: '暂无波形',
+                    type: 'info',
                     icon: 'el-icon-DataLine',
                     render: 'basicButton',
                     disabled: row => {
-                        return !row.wavePath
+
+                        return row.wavePath
                     },
 
-                    click: async row => {
+                },
+                {
+                    name: 'edit',
+                    title: '波形分析',
+                    type: 'primary',
+                    icon: 'el-icon-DataLine',
+                    render: 'basicButton',
+                    loading: 'loading1',
+                    disabled: (row: any) => !row.wavePath,
+                    click: async (row: any) => {
                         row.loading1 = true
-                        loading.value = true
-                        isWaveCharts.value = true
                         dialogVisible.value = false
-                        // 在打开弹窗时立即设置高度
-                        nextTick(() => {
-                            if (waveFormAnalysisRef.value) {
-                                // waveFormAnalysisRef.value.setHeight(false, 360)
-                                waveFormAnalysisRef.value.setHeight(999, 130, 1.6666666)
-                            }
-                        })
                         await analyseWave(row.id)
                             .then(res => {
                                 row.loading1 = false
                                 if (res != undefined) {
-                                    boxoList.value = row
-                                    // boxoList.value = {
-                                    //     ...row,
-                                    //     duration: row.persistTime // 将 persistTime 值赋给 duration
-                                    // }
-                                    boxoList.value.featureAmplitude = (row.amplitude - 0) / 100
-                                    // row.evtParamVVaDepth != '-' ? row.evtParamVVaDepth - 0 : null
-                                    boxoList.value.systemType = 'YPT'
+                                    loading.value = true
+                                    isWaveCharts.value = true
+                                    boxoList.value = {
+                                        ...row,
+                                        engineeringName: row.projectName,
+                                        persistTime: row.evtParamTm,
+                                        featureAmplitude:
+                                            row.evtParamVVaDepth != '-' ? (row.evtParamVVaDepth - 0) / 100 : null,
+                                        systemType: 'YPT',
+                                    }
                                     wp.value = res.data
                                 }
                                 loading.value = false
@@ -205,40 +161,142 @@ const tableStore: any = new TableStore({
                             })
 
                         nextTick(() => {
-                            waveFormAnalysisRef.value &&
+                            if (waveFormAnalysisRef.value) {
                                 waveFormAnalysisRef.value.getWpData(wp.value, boxoList.value, true)
+                                waveFormAnalysisRef.value.setHeight(999, 130, 1.6666666)
+                            }
                         })
                     }
                 },
                 {
                     name: 'edit',
-                    text: '暂无波形',
-                    type: 'info',
-                    icon: 'el-icon-DataLine',
+                    title: '波形下载',
+                    type: 'primary',
+                    icon: 'el-icon-Check',
+                    loading: 'loading2',
                     render: 'basicButton',
-                    disabled: row => {
-                        return !!row.wavePath
+                    disabled: (row: any) => !row.wavePath,
+                    click: (row: any) => {
+                        row.loading2 = true
+                        ElMessage.info('下载中......')
+                        getFileZip({ eventId: row.id }).then(res => {
+                            const blob = new Blob([res as unknown as BlobPart], { type: 'application/zip' })
+                            const url = window.URL.createObjectURL(blob)
+                            const link = document.createElement('a')
+                            link.href = url
+                            link.download = buildWaveExportFileName(getExportSubjectFromRow(row))
+                            document.body.appendChild(link)
+                            link.click()
+                            document.body.removeChild(link)
+                            ElMessage.success('波形下载成功')
+                            row.loading2 = false
+                        }).catch(() => {
+                            row.loading2 = false
+                        })
                     }
                 }
             ]
         }
     ],
-    beforeSearchFun: () => {},
-    loadCallback: () => {}
+    beforeSearchFun: () => { },
+    resetCallback: () => {
+        restoreOpenDayTime()
+    },
+    loadCallback: () => {
+        tableStore.table.data.forEach((item: any) => {
+            item.loading = false
+            item.evtParamTm =
+                item.evtParamTm.split('s')[0] != '-' ? (item.evtParamTm.split('s')[0] - 0).toFixed(2) : '-'
+            item.evtParamVVaDepth =
+                item.evtParamVVaDepth.split('%')[0] != '-'
+                    ? (item.evtParamVVaDepth.split('%')[0] - 0).toFixed(2)
+                    : '-'
+        })
+    }
 })
-tableStore.table.params.eventType = ''
+
+tableStore.table.params.type = 0
+Object.assign(tableStore.table.params, {
+    featureAmplitudeMin: undefined,
+    featureAmplitudeMax: undefined,
+    evtParamTmMin: undefined,
+    evtParamTmMax: undefined,
+    severityMin: undefined,
+    severityMax: undefined,
+    fileFlag: ''
+})
+
 provide('tableStore', tableStore)
-const open = async (time: any) => {
-    tableStore.table.params.eventType = ''
-    dialogVisible.value = true
-    getSimpleLineList()
-    tableStore.table.params.lineId = ''
+
+const resetFilterParams = () => {
+    Object.assign(tableStore.table.params, {
+        featureAmplitudeMin: undefined,
+        featureAmplitudeMax: undefined,
+        evtParamTmMin: undefined,
+        evtParamTmMax: undefined,
+        severityMin: undefined,
+        severityMax: undefined,
+        fileFlag: ''
+    })
+}
+
+const restoreOpenDayTime = () => {
+    if (!currentOpenTime.value || !tableHeaderRef.value) return
+    tableHeaderRef.value.setInterval(5)
+    tableHeaderRef.value.setTimeInterval([currentOpenTime.value, currentOpenTime.value])
+    tableStore.table.params.searchBeginTime = currentOpenTime.value
+    tableStore.table.params.searchEndTime = currentOpenTime.value
+}
+
+const syncInitDataForReset = () => {
+    if (!tableStore.initData) return
+    Object.assign(tableStore.initData, {
+        searchBeginTime: currentOpenTime.value,
+        searchEndTime: currentOpenTime.value,
+        startTime: currentOpenTime.value,
+        endTime: currentOpenTime.value,
+        featureAmplitudeMin: undefined,
+        featureAmplitudeMax: undefined,
+        evtParamTmMin: undefined,
+        evtParamTmMax: undefined,
+        severityMin: undefined,
+        severityMax: undefined,
+        fileFlag: ''
+    })
+}
+
+const openFilterDialog = () => {
+    filterVisible.value = true
+}
+
+const onFilterConfirm = () => {
+    tableStore.onTableAction('search', {})
+}
+
+const onResetForm = () => {
+    filterVisible.value = false
+    resetFilterParams()
+    multiConditionRef.value?.reset()
+    syncInitDataForReset()
     nextTick(() => {
-        tableHeaderRef.value.setInterval(5)
-        tableHeaderRef.value.setTimeInterval([time, time])
-        tableStore.table.params.searchBeginTime = time
-        tableStore.table.params.searchEndTime = time
+        restoreOpenDayTime()
+    })
+}
+
+const open = (time: string) => {
+    currentOpenTime.value = time
+    dialogVisible.value = true
+    filterVisible.value = false
+    resetFilterParams()
+    multiConditionRef.value?.reset()
+    tableStore.table.params.pageNum = 1
+
+    nextTick(() => {
+        restoreOpenDayTime()
         tableStore.index()
+        nextTick(() => {
+            syncInitDataForReset()
+        })
     })
 }
 
@@ -249,4 +307,5 @@ const handleHideCharts = () => {
 
 defineExpose({ open })
 </script>
+
 <style lang="scss" scoped></style>

src/components/cockpit/transientDetails/index.vue

@@ -32,9 +32,9 @@
                         <template #content>
                             <!-- <span v-html="list?.filter(item => item.time == data.day)[0]?.type || ''"></span> -->
                             <div v-for="item in list?.filter((item:any) => item.name == data.day)">
-                                <div>电压暂降：{{ item.eventDown || 0 }}</div>
-                                <div>电压中断：{{ item.eventOff || 0 }}</div>
-                                <div>电压暂升：{{ item.eventUp || 0 }}</div>
+                                <div>暂降: {{ item.eventDown || 0 }}</div>
+                                <div>中断: {{ item.eventOff || 0 }}</div>
+                                <div>暂升: {{ item.eventUp || 0 }}</div>
                             </div>
                         </template>
                         <div
@@ -43,13 +43,13 @@
                             v-for="item in list?.filter((item:any) => item.name == data.day)"
                             @click="descentClick(item)"
                         >
-                            <!-- <div>电压暂降:{{ item.eventDown || 0 }}</div>
-                                <div>电压中断:{{ item.eventOff || 0 }}</div>
-                                <div>电压暂升:{{ item.eventUp || 0 }}</div> -->
+                            <!-- <div>暂降:{{ item.eventDown || 0 }}</div>
+                                <div>中断:{{ item.eventOff || 0 }}</div>
+                                <div>暂升:{{ item.eventUp || 0 }}</div> -->
                             <template v-if="fullscreen">
-                                <div>电压暂降:{{ item.eventDown || 0 }}</div>
-                                <div>电压中断:{{ item.eventOff || 0 }}</div>
-                                <div>电压暂升:{{ item.eventUp || 0 }}</div>
+                                <div>暂降: {{ item.eventDown || 0 }}</div>
+                                <div>中断: {{ item.eventOff || 0 }}</div>
+                                <div>暂升: {{ item.eventUp || 0 }}</div>
                             </template>
                             <template v-else>暂态事件</template>
                         </div>
@@ -58,7 +58,7 @@
             </template>
         </el-calendar>
         <!-- 暂态事件列表  -->
-        <TransientList ref="transientListRef" :showLine="false" />
+        <TransientList ref="transientListRef" />
     </div>
 </template>
 <script setup lang="ts">
@@ -131,7 +131,7 @@ const tableStore: any = new TableStore({
     },
 
     loadCallback: () => {
-        value.value = tableStore.table.params.searchBeginTime
+        value.value = dayjs(tableStore.table.params.searchBeginTime).toDate()
         list.value = tableStore.table.data
     }
 })

src/components/cockpit/transientDistribution/index.vue

@@ -1,22 +1,12 @@
 <template>
     <div>
         <!--暂态事件概率分布 -->
-        <TableHeader
-            ref="TableHeaderRef"
-            :timeKeyList="prop.timeKey"
-            :showReset="false"
-            @selectChange="selectChange"
-            datePicker
-            v-if="fullscreen"
-        ></TableHeader>
-        <my-echart
-            class="tall"
-            :options="echartList"
-            :style="{
-                width: prop.width,
-                height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px)`
-            }"
-        />
+        <TableHeader ref="TableHeaderRef" :timeKeyList="prop.timeKey" :showReset="false" @selectChange="selectChange"
+            datePicker v-if="fullscreen"></TableHeader>
+        <my-echart class="tall" :options="echartList" :style="{
+            width: prop.width,
+            height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px)`
+        }" />
         <!-- <my-echart
             class="mt10"
             :options="echartList1"
@@ -170,7 +160,11 @@ const tableStore: any = new TableStore({
                 },
                 title: {
                     text: '暂态事件概率分布',
-                    x: 'center'
+                    x: 'center',
+                    textStyle: {
+                        color: '#000',
+                        fontSize: '15'
+                    },
                 },
                 visualMap: {
                     max: 500,
@@ -206,22 +200,22 @@ const tableStore: any = new TableStore({
                 },
                 grid3D: {
                     viewControl: {
-                            projection: 'perspective',
-                            distance: 260,
-                            rotateSensitivity: 10,
-                            zoomSensitivity: 2
+                        projection: 'perspective',
+                        distance: 260,
+                        rotateSensitivity: 10,
+                        zoomSensitivity: 2
+                    },
+                    boxWidth: 150,
+                    boxDepth: 100,
+                    boxHeight: 100,
+                    light: {
+                        main: {
+                            intensity: 1.2
                         },
-                        boxWidth: 150,
-                        boxDepth: 100,
-                        boxHeight: 100,
-                        light: {
-                            main: {
-                                intensity: 1.2
-                            },
-                            ambient: {
-                                intensity: 0.4
-                            }
+                        ambient: {
+                            intensity: 0.4
                         }
+                    }
                 },
                 series: [
                     {
@@ -242,7 +236,7 @@ const tableStore: any = new TableStore({
 
         echartList1.value = {
             title: {
-                text: '越限时间概率分布'
+                text: '暂态事件概率分布',
             },
             xAxis: {
                 type: 'category',

src/components/cockpit/transientStatistics/components/transientStatisticsDetail.vue

@@ -1,194 +1,179 @@
 <template>
     <div>
-        <!-- 暂态事件详情 -->
-        <el-dialog draggable title="暂态事件详情 " v-model="dialogVisible" append-to-body width="70%">
-            <TableHeader datePicker showExport :showReset="false" ref="tableHeaderRef" @selectChange="selectChange">
-                <template v-slot:select>
-                    <el-form-item label="监测点">
-                        <el-select filterable v-model="tableStore.table.params.lineId" placeholder="请选择监测点名称">
-                            <el-option
-                                v-for="item in options"
-                                :key="item.lineId"
-                                :label="item.name"
-                                :value="item.lineId"
-                            />
-                        </el-select>
-                    </el-form-item>
-                    <el-form-item label="暂态类型">
-                        <el-select
-                            v-model="tableStore.table.params.eventType"
-                            style="min-width: 150px"
-                            clearable
-                            placeholder="请选择暂态类型"
-                        >
-                            <el-option
-                                v-for="item in eventList"
-                                :key="item.value"
-                                :label="item.label"
-                                :value="item.value"
-                            />
-                        </el-select>
-                    </el-form-item>
+        <el-dialog draggable :title="title" v-model="dialogVisible" append-to-body width="70%">
+            <TableHeader datePicker showExport ref="tableHeaderRef" @selectChange="selectChange"
+                @onResetForm="onResetForm">
+                <template v-slot:operation>
+                    <el-button type="primary" icon="el-icon-Operation" @click="openFilterDialog">事件筛选</el-button>
                 </template>
             </TableHeader>
+
+            <MultiCondition
+                v-model:visible="filterVisible"
+                :fixed-target="filterTarget"
+                :params="tableStore.table.params"
+                ref="multiConditionRef"
+                @confirm="onFilterConfirm"
+            />
+
             <Table ref="tableRef" isGroup :height="heightRef"></Table>
         </el-dialog>
-        <!-- 查看波形 -->
-        <el-dialog
-            v-model="isWaveCharts"
-            draggable
-            title="波形分析"
-            append-to-body
-            width="70%"
-            @close="handleHideCharts"
-        >
-            <waveFormAnalysis
-                v-loading="loading"
-                v-if="isWaveCharts"
-                ref="waveFormAnalysisRef"
-                @handleHideCharts="handleHideCharts"
-                :wp="wp"
-            />
+
+        <el-dialog v-model="isWaveCharts" draggable title="波形分析" append-to-body width="70%" @close="handleHideCharts">
+            <waveFormAnalysis v-loading="loading" v-if="isWaveCharts" ref="waveFormAnalysisRef"
+                @handleHideCharts="handleHideCharts" :wp="wp" />
         </el-dialog>
     </div>
 </template>
+
 <script setup lang="ts">
-import { ref, provide } from 'vue'
+import { ref, provide, nextTick } from 'vue'
+import { ElMessage } from 'element-plus'
 import Table from '@/components/table/index.vue'
 import TableHeader from '@/components/table/header/index.vue'
 import TableStore from '@/utils/tableStore'
 import { mainHeight } from '@/utils/layout'
+import MultiCondition from '@/views/govern/alarm/multiCondition.vue'
 import waveFormAnalysis from '@/views/govern/device/control/tabs/components/waveFormAnalysis.vue'
 import { analyseWave } from '@/api/common'
-import { getSimpleLine } from '@/api/harmonic-boot/cockpit/cockpit'
+import { getFileZip } from '@/api/cs-harmonic-boot/datatrend'
+import { buildWaveExportFileName, getExportSubjectFromRow } from '@/utils/echartMethod'
+import { useDictData } from '@/stores/dictData'
 
-const dialogVisible: any = ref(false)
-const waveFormAnalysisRef: any = ref(null)
-// 波形
+const dialogVisible = ref(false)
+const waveFormAnalysisRef = ref()
 const isWaveCharts = ref(false)
 const loading = ref(false)
 const wp = ref({})
 const boxoList: any = ref({})
-
+const title = ref('暂态事件')
 const tableHeaderRef = ref()
+const filterVisible = ref(false)
+const filterTarget = ref('')
+const multiConditionRef = ref<InstanceType<typeof MultiCondition>>()
+
+const dictData = useDictData()
+const ReasonList: any = dictData.getBasicData('Event_Reason')
+const EventTypeList: any = dictData.getBasicData('Event_Type')
 
-const options = ref()
 const heightRef = ref(mainHeight(168, 2.2).height)
-const selectChange = (flag: boolean, h: any) => {
+const tableParams = ref<any>({})
+const selectChange = (_flag: boolean, h: number) => {
     heightRef.value = mainHeight(h, 2.2).height
 }
-const eventList = [
-    { label: '电压暂降', value: '1' },
-    { label: '电压中断', value: '2' },
-    { label: '电压暂升', value: '3' }
-]
-const getSimpleLineList = async () => {
-    const res = await getSimpleLine()
-    options.value = res.data
-}
 
 const tableStore: any = new TableStore({
-    url: '/cs-harmonic-boot/event/pageEvent',
+    url: '/cs-device-boot/csGroup/deviceDataByType',
     method: 'POST',
     showPage: true,
-    exportName: '主要监测点列表',
+    exportName: '暂态事件',
     column: [
         {
-            field: 'index',
             title: '序号',
-            width: '80',
+            width: 80,
             formatter: (row: any) => {
                 return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
             }
         },
+        { field: 'startTime', title: '发生时刻', minWidth: 180, sortable: true },
         {
-            title: '暂态时间',
-            field: 'startTime',
-            minWidth: '180'
-        },
-        {
-            title: '测点名称',
-            field: 'lineName',
-            minWidth: '150'
-        },
-        {
-            title: '暂态类型',
-            field: 'tag',
-            minWidth: '100'
-        },
-        {
-            title: '特征幅值(%)',
-            field: 'amplitude',
-            minWidth: '100'
-        },
-        {
-            title: '暂降深度(%)',
-            field: 'depth',
-            minWidth: '100',
+            field: 'featureAmplitude',
+            title: '暂降幅值(%)',
+            minWidth: 120,
+            sortable: true,
             formatter: (row: any) => {
-                // 当暂态类型不是电压暂升时，计算暂降深度 = 100 - 特征幅值
-                if (row.row.tag !== '电压暂升') {
-                    const amplitude = parseFloat(row.row.amplitude)
-                    if (!isNaN(amplitude)) {
-                        return 100 - amplitude
-                    }
-                    return '-'
-                } else {
-                    // 电压暂升时不显示暂降深度
-                    return '/'
+                row.cellValue = row.cellValue != null ? Number(row.cellValue).toFixed(2) : '/'
+                if (String(row.cellValue).split('.')[1] == '00') {
+                    row.cellValue = String(row.cellValue).split('.')[0]
                 }
+                return row.cellValue
             }
         },
         {
-            title: '持续时间(S)',
             field: 'persistTime',
-            minWidth: '100'
+            title: '持续时间(s)',
+            minWidth: 110,
+            formatter: (row: any) => row.cellValue ? (row.cellValue - 0).toFixed(2) : '/',
+            sortable: true
+        },
+        {
+            field: 'phaseType',
+            title: '相别',
+            minWidth: 80,
+            formatter: (row: any) => row.cellValue || '/'
         },
         {
             title: '严重度',
             field: 'severity',
-            minWidth: '80'
+            minWidth: 80,
+            align: 'center',
+            sortable: true,
+            formatter: (row: any) => row.cellValue ? row.cellValue : '/'
+        },
+        { field: 'showName', title: '触发类型', minWidth: 100 },
+        {
+            title: '暂降原因',
+            field: 'advanceReason',
+            minWidth: 100,
+            align: 'center',
+            formatter: (row: any) => ReasonList.find((item: any) => item.id == row.cellValue)?.name || '其他'
         },
         {
-            title: '波形',
-            width: '90',
+            title: '暂降类型',
+            field: 'advanceType',
+            minWidth: 100,
+            align: 'center',
+            formatter: (row: any) => EventTypeList.find((item: any) => item.id == row.cellValue)?.name || '其他'
+        },
+        { title: '电压等级(kV)', field: 'lineVoltage', minWidth: 120, align: 'center', sortable: true },
+        {
+            title: '发生位置',
+            field: 'sagSource',
+            minWidth: 120,
+            align: 'center',
+            formatter: (row: any) => row.cellValue == 1 ? '上游' : row.cellValue == 2 ? '下游' : '暂无'
+        },
+        {
+            title: '操作',
+            fixed: 'right',
+            width: 150,
             render: 'buttons',
             buttons: [
                 {
                     name: 'edit',
-                    text: '波形分析',
-                    type: 'primary',
+                    text: '暂无波形',
+                    type: 'info',
                     icon: 'el-icon-DataLine',
                     render: 'basicButton',
                     disabled: row => {
-                        return !row.wavePath
-                    },
-
-                    click: async row => {
+                        return row.wavePath
+                    }
+                },
+                {
+                    name: 'edit',
+                    title: '波形分析',
+                    type: 'primary',
+                    icon: 'el-icon-Check',
+                    render: 'basicButton',
+                    loading: 'loading1',
+                    disabled: (row: any) => !row.wavePath,
+                    click: async (row: any) => {
                         row.loading1 = true
-                        loading.value = true
-                        isWaveCharts.value = true
-                        dialogVisible.value = false
-                        // 在打开弹窗时立即设置高度
-                        nextTick(() => {
-                            if (waveFormAnalysisRef.value) {
-                                // waveFormAnalysisRef.value.setHeight(false, 360)
-                                waveFormAnalysisRef.value.setHeight(999, 130, 1.6666666)
-                            }
-                        })
                         await analyseWave(row.id)
                             .then(res => {
                                 row.loading1 = false
                                 if (res != undefined) {
-                                    boxoList.value = row
-                                    // boxoList.value = {
-                                    //     ...row,
-                                    //     duration: row.persistTime // 将 persistTime 值赋给 duration
-                                    // }
-                                    // boxoList.value.featureAmplitude =
-                                    //     row.evtParamVVaDepth != '-' ? row.evtParamVVaDepth - 0 : null
-                                    boxoList.value.featureAmplitude = (row.amplitude - 0) / 100
-                                    boxoList.value.systemType = 'YPT'
+                                    loading.value = true
+                                    isWaveCharts.value = true
+                                    dialogVisible.value = false
+                                    boxoList.value = {
+                                        ...row,
+                                        systemType: 'YPT',
+                                        engineeringName: tableParams.value.projectName,
+                                        featureAmplitude:
+                                            row.featureAmplitude != null ? Number(row.featureAmplitude / 100) : '-',
+                                        persistTime: row.persistTime ? row.persistTime.toFixed(2) : '-',
+                                    }
                                     wp.value = res.data
                                 }
                                 loading.value = false
@@ -199,34 +184,108 @@ const tableStore: any = new TableStore({
                             })
 
                         nextTick(() => {
-                            waveFormAnalysisRef.value &&
-                                waveFormAnalysisRef.value.getWpData(wp.value, boxoList.value, true)
+                            if (waveFormAnalysisRef.value) {
+                                waveFormAnalysisRef.value.getWpData(wp.value, boxoList.value)
+                                waveFormAnalysisRef.value.setHeight(999, 130, 1.6666666)
+                            }
                         })
                     }
                 },
                 {
                     name: 'edit',
-                    text: '暂无波形',
-                    type: 'info',
-                    icon: 'el-icon-DataLine',
+                    title: '波形下载',
+                    type: 'primary',
+                    loading: 'loading2',
+                    icon: 'el-icon-Check',
                     render: 'basicButton',
-                    disabled: row => {
-                        return !!row.wavePath
+                    disabled: (row: any) => !row.wavePath,
+                    click: (row: any) => {
+                        row.loading2 = true
+                        ElMessage.info('下载中......')
+                        getFileZip({ eventId: row.id }).then(res => {
+                            const blob = new Blob([res as unknown as BlobPart], { type: 'application/zip' })
+                            const url = window.URL.createObjectURL(blob)
+                            const link = document.createElement('a')
+                            link.href = url
+                            link.download = buildWaveExportFileName(getExportSubjectFromRow(row))
+                            document.body.appendChild(link)
+                            link.click()
+                            document.body.removeChild(link)
+                            ElMessage.success('波形下载成功')
+                            row.loading2 = false
+                        }).catch(() => {
+                            row.loading2 = false
+                        })
                     }
                 }
             ]
         }
     ],
-    beforeSearchFun: () => {},
-    loadCallback: () => {}
+    beforeSearchFun: () => {
+        tableStore.table.params.devId = tableParams.value.devId
+        tableStore.table.params.lineId = tableParams.value.lineId
+        tableStore.table.params.list = tableParams.value.list
+        tableStore.table.params.type = 3
+    },
+    loadCallback: () => { }
 })
-tableStore.table.params.eventType = ''
+tableStore.table.params.type = 3
+Object.assign(tableStore.table.params, {
+    featureAmplitudeMin: undefined,
+    featureAmplitudeMax: undefined,
+    evtParamTmMin: undefined,
+    evtParamTmMax: undefined,
+    severityMin: undefined,
+    severityMax: undefined,
+    fileFlag: ''
+})
+
 provide('tableStore', tableStore)
-const open = async (row: any, searchBeginTime: any, searchEndTime: any) => {
-    tableStore.table.params.eventType = ''
+
+const resetFilterParams = () => {
+    Object.assign(tableStore.table.params, {
+        featureAmplitudeMin: undefined,
+        featureAmplitudeMax: undefined,
+        evtParamTmMin: undefined,
+        evtParamTmMax: undefined,
+        severityMin: undefined,
+        severityMax: undefined,
+        fileFlag: ''
+    })
+}
+
+const openFilterDialog = () => {
+    filterVisible.value = true
+}
+
+const onFilterConfirm = () => {
+    tableStore.onTableAction('search', {})
+}
+
+const onResetForm = () => {
+    filterVisible.value = false
+    resetFilterParams()
+    multiConditionRef.value?.reset()
+    tableStore.index()
+}
+
+const open = (row: any, searchBeginTime: any, searchEndTime: any, type?: string) => {
+    filterTarget.value = type || ''
+    title.value = row.name + '_暂态事件'
     dialogVisible.value = true
-    getSimpleLineList()
-    tableStore.table.params.lineId = row.id
+    filterVisible.value = false
+    resetFilterParams()
+    multiConditionRef.value?.reset()
+
+    const lineId = row.id || row.lineId
+    tableParams.value = {
+        lineId,
+        devId: row.devId,
+        engineeringName: row.engineeringName,
+        list: row.devId ? [{ lineId, devId: row.devId }] : undefined,
+    }
+    tableStore.table.params.pageNum = 1
+
     nextTick(() => {
         tableHeaderRef.value.setTimeInterval([searchBeginTime, searchEndTime])
         tableStore.table.params.searchBeginTime = searchBeginTime
@@ -242,4 +301,5 @@ const handleHideCharts = () => {
 
 defineExpose({ open })
 </script>
+
 <style lang="scss" scoped></style>

src/components/cockpit/transientStatistics/index.vue

@@ -1,27 +1,14 @@
 <template>
     <div>
         <!--暂态事件统计 -->
-        <TableHeader
-            ref="TableHeaderRef"
-            :showReset="false"
-            @selectChange="selectChange"
-            datePicker
-            v-if="fullscreen"  :timeKeyList="prop.timeKey"
-        ></TableHeader>
-        <my-echart
-            class="tall"
-            :options="echartList"
-            :style="{
-                width: prop.width,
-                height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`
-            }"
-        />
-        <Table
-            ref="tableRef"
-            @cell-click="cellClickEvent"
-            :height="`calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`"
-            isGroup
-        ></Table>
+        <TableHeader ref="TableHeaderRef" :showReset="false" @selectChange="selectChange" datePicker v-if="fullscreen"
+            :timeKeyList="prop.timeKey"></TableHeader>
+        <my-echart class="tall" :options="echartList" :style="{
+            width: prop.width,
+            height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`
+        }" />
+        <Table ref="tableRef" @cell-click="cellClickEvent"
+            :height="`calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`" isGroup></Table>
         <TransientStatisticsDetail ref="transientStatisticsDetailRef"></TransientStatisticsDetail>
     </div>
 </template>
@@ -41,7 +28,7 @@ const prop = defineProps({
     h: { type: [String, Number] },
     width: { type: [String, Number] },
     height: { type: [String, Number] },
-   timeKey: { type: Array as () => string[] },
+    timeKey: { type: Array as () => string[] },
     timeValue: { type: Object },
     interval: { type: Number }
 })
@@ -129,7 +116,11 @@ const eventEcharts = () => {
                 title: [
                     {
                         text: '暂态事件统计',
-                        left: 'center'
+                        left: 'center',
+                        textStyle: {
+                            color: '#000',
+                            fontSize: '15'
+                        },
                     },
                     {
                         text: rawData.eventOff + rawData.eventDown + rawData.eventUp + '次',
@@ -173,15 +164,30 @@ const tableStore: any = new TableStore({
             }
         },
         {
-            title: '名称',
+            title: '监测点名称',
             field: 'name',
-            minWidth: '90'
+            minWidth: 150
+        },
+        {
+            title: '设备名称', field: 'devName', minWidth: 150, align: 'center', formatter: (row: any) => {
+                return row.cellValue || '/'
+            }
+        },
+        {
+            title: '项目名称', field: 'projectName', minWidth: 150, align: 'center', formatter: (row: any) => {
+                return row.cellValue || '/'
+            }
+        },
+        {
+            title: '工程名称', field: 'engineeringName', minWidth: 150, align: 'center', formatter: (row: any) => {
+                return row.cellValue || '/'
+            }
         },
 
         {
             title: '电压中断(次)',
             field: 'eventOff',
-            minWidth: '70',
+            minWidth: '90',
             sortable: true,
             render: 'customTemplate',
             customTemplate: (row: any) => {
@@ -191,7 +197,7 @@ const tableStore: any = new TableStore({
         {
             title: '电压暂降(次)',
             field: 'eventDown',
-            minWidth: '80',
+            minWidth: '90',
             sortable: true,
             render: 'customTemplate',
             customTemplate: (row: any) => {
@@ -201,7 +207,7 @@ const tableStore: any = new TableStore({
         {
             title: '电压暂升(次)',
             field: 'eventUp',
-            minWidth: '80',
+            minWidth: '90',
             sortable: true,
             render: 'customTemplate',
             customTemplate: (row: any) => {
@@ -224,11 +230,13 @@ provide('tableStore', tableStore)
 
 // 点击行
 const cellClickEvent = ({ row, column }: any) => {
-    if (column.field != 'name') {
+    if (column.field != 'name' && column.field != 'devName' && column.field != 'projectName' && column.field != 'engineeringName') {
         transientStatisticsDetailRef.value.open(
             row,
             tableStore.table.params.searchBeginTime || prop.timeValue?.[0],
-            tableStore.table.params.searchEndTime || prop.timeValue?.[1]
+            tableStore.table.params.searchEndTime || prop.timeValue?.[1],
+            column.field=='eventOff'?'中断':column.field=='eventDown'?'暂降':column.field=='eventUp'?'暂升':''
+
         )
     }
 }

src/components/echarts/MyEchart.vue

@@ -13,6 +13,7 @@ import 'echarts-liquidfill'
 import 'echarts/lib/component/dataZoom'
 import { color, gradeColor3 } from './color'
 import { useConfig } from '@/stores/config'
+import { buildExportBaseName, formatExportDateTime } from '@/utils/echartMethod'
 // import { nextTick } from 'process'
 
 const emit = defineEmits(['chartClick'])
@@ -43,9 +44,10 @@ const initChart = () => {
             left: 'center',
             // textStyle: {
             color: '#000',
+            top: 5,
             textStyle: {
                 color: '#000',
-                fontSize: '18'
+                fontSize: '15'
             },
             // },
             ...(props.options?.title || null)
@@ -66,10 +68,13 @@ const initChart = () => {
         },
         toolbox: {
             right: 20,
-            top: 15,
+            top: props.options?.title?.text ? 20 : 0,
             feature: {
                 saveAsImage: {
-                    title: '保存图片'
+                    title: '下载图片',
+                    name: props.options?.exportFileName
+                        ? buildExportBaseName(props.options.exportFileName)
+                        : ((props.options?.title?.text || '图表') + '_' + formatExportDateTime())
                 },
                 ...(props.options?.toolbox?.featureProps || null)
             },
@@ -77,10 +82,11 @@ const initChart = () => {
             ...(props.options?.toolbox || null)
         },
         legend: {
-            right: 50,
-            top: 25,
+            right: 100,
+            top: props.options?.title?.text ? 25 : 5,
             itemGap: 10,
             itemStyle: {},
+            type: 'scroll', // 开启滚动分页
             // textStyle: {
             fontSize: 12,
             // padding: [2, 0, 0, 0], //[上、右、下、左]
@@ -90,7 +96,7 @@ const initChart = () => {
             ...(props.options?.legend || null)
         },
         grid: {
-            top: '50px',
+            top: props.options?.title?.text ? '50px' : '25px',
             left: '30px',
             right: '70px',
             bottom: props.options?.options?.dataZoom === null ? '10px' : '40px',
@@ -127,7 +133,7 @@ const initChart = () => {
         ],
         color: props.options?.color || color,
         series: props.options?.series,
-        ...props.options?.options
+        ...setStep(props.options?.options)
     }
     // console.log(options.series,"获取x轴");
     handlerBar(options)
@@ -245,6 +251,21 @@ const handlerXAxis = () => {
         }
     }
 }
+// const setStep = (name: string) => {
+//     const isShanBian = name.includes('闪变')
+//     return isShanBian ? { step: 'end' as const } : { }
+// }
+const setStep = (options: any) => {
+    if(options?.series){
+        options.series.forEach((item: any) => {
+            if(item.type === 'line' && item.name.includes('闪变')){
+                item.step = 'end'
+            }
+        })
+    }
+
+    return options
+}
 
 let throttle: ReturnType<typeof setTimeout>
 // 动态计算table高度

src/components/echarts/color.ts

@@ -1,4 +1,19 @@
-export let color = [  '#07CCCA','#00BFF5', '#FFBF00', '#77DA63',  '#Ff6600', '#FF9100', '#5B6E96', '#66FFCC', '#B3B3B3']
-export const gradeColor3 = ['#339966', '#FFCC33', '#A52a2a']
-export const gradeColor5 = ['#00CC00', '#99CC99', '#FF9900','#996600','#A52a2a']
-
+export let color = ['#07CCCA', '#00BFF5', '#FFBF00', '#77DA63', '#Ff6600', '#FF9100', '#5B6E96', '#66FFEC', '#B3B3B3',  '#9B59B6', '#3498DB',  '#2ECC71']
+export let color1 = [
+   
+    '#3B7DD8', // 蓝
+    '#5B5FC7', // 靛
+    '#8B5CF6', // 紫
+    '#B07CC6', // 淡紫
+    '#C060A8', // 玫红
+    '#D4A017', // 金
+    '#6AAF50', // 草绿
+    '#00A878', // 翠绿
+    '#7C9EB2', // 烟蓝
+    '#6B7B8C', // 板岩灰
+    '#00A8B5', // 青
+    '#A8A8A8'  // 灰
+]
+export const gradeColor3 = ['#339966', '#FFCC33', '#A52a2a']
+export const gradeColor5 = ['#00CC00', '#99CC99', '#FF9900','#996600','#A52a2a']
+

src/components/echarts/rmsWorker.js

@@ -236,7 +236,7 @@ const fliteWaveData = (wp, step, iphasicValue, isOpen) => {
 
 // 监听消息
 self.onmessage = function (e) {
-    const { wp, isOpen, value, boxoList } = JSON.parse(e.data)
+    const { wp, isOpen, value, boxoList, requestId } = e.data
 
     try {
         const iphasicValue = wp.iphasic || 1
@@ -258,8 +258,8 @@ self.onmessage = function (e) {
                 boxoList.measurementPointName +
                 '　发生时刻:' +
                 boxoList.startTime +
-                '　暂降(骤升)幅值:' +
-                (boxoList.featureAmplitude * 100).toFixed(2) +
+                '　暂降幅值:' +
+                 Math.floor(boxoList.featureAmplitude * 10000) / 100  +
                 '% 　持续时间:' +
                 boxoList.duration +
                 's'
@@ -270,7 +270,7 @@ self.onmessage = function (e) {
                 boxoList.equipmentName +
                 '　发生时刻:' +
                 boxoList.startTime +
-                '　暂降(骤升)幅值:' +
+                '　暂降幅值:' +
                 boxoList.evtParamVVaDepth +
                 '%　持续时间:' +
                 boxoList.evtParamTm +
@@ -282,8 +282,8 @@ self.onmessage = function (e) {
                 boxoList.lineName +
                 '　发生时刻:' +
                 boxoList.startTime +
-                '　暂降(骤升)幅值:' +
-                (boxoList.featureAmplitude * 100).toFixed(2) +
+                '　暂降幅值:' +
+                 Math.floor(boxoList.featureAmplitude * 10000) / 100  +
                 '%　持续时间:' +
                 boxoList.persistTime +
                 's'
@@ -295,14 +295,15 @@ self.onmessage = function (e) {
                 boxoList.lineName +
                 '　发生时刻:' +
                 boxoList.startTime +
-                '　暂降(骤升)幅值:' +
-                (boxoList.featureAmplitude * 100).toFixed(2) +
+                '　暂降幅值:' +
+                 Math.floor(boxoList.featureAmplitude * 10000) / 100  +
                 '%　持续时间:' +
                 boxoList.duration +
                 's'
         }
         // 发送处理结果回主线程
         self.postMessage({
+            requestId,
             titles: titles,
             success: true,
             waveDatas,
@@ -313,6 +314,7 @@ self.onmessage = function (e) {
         })
     } catch (error) {
         self.postMessage({
+            requestId,
             success: false,
             error: error.message
         })

src/components/echarts/rmsboxi.vue

@@ -14,9 +14,15 @@ import html2canvas from 'html2canvas'
 import $ from 'jquery'
 import * as echarts from 'echarts'
 import { mainHeight } from '@/utils/layout'
+import { calcRmsYAxisRange, formatAxisLabel } from '@/utils/chartAxisHelper'
 import url from '@/assets/img/point.png'
 import url2 from '@/assets/img/dw.png'
-const worker = ref<Worker | null>(null)
+import { buildWaveCacheKey, getWaveCache, setWaveCache } from '@/utils/waveCache'
+import { getRmsWorker, buildWorkerPayload } from '@/utils/waveWorkerPool'
+import { buildExportBaseName, formatExportDateTime } from '@/utils/echartMethod'
+let waveRequestId = 0
+const pendingCacheKeys = new Map<number, string>()
+let rmsWorker: Worker | null = null
 interface WaveData {
     instantF: { max: number; min: number }
     instantS: { max: number; min: number }
@@ -125,52 +131,61 @@ const vw = computed(() => '100%')
 
 watch(
     () => props.value,
-    newVal => {
-        if (newVal == 2) {
-            initWaves()
-        } else {
-            $('#wave1').remove()
-            initWaves()
-        }
+    () => {
+        query()
     }
 )
 
+watch(
+    () => props.wp,
+    () => {
+        query()
+    }
+)
+
+const applyWorkerResult = (data: any) => {
+    titles.value = data.titles
+    waveDatas.value = data.waveDatas
+    time.value = data.time
+    type.value = data.type
+    severity.value = data.severity
+    iphasic.value = data.iphasic
+
+    if (Number(severity.value) < 0) {
+        severity.value = '/'
+        type.value = '/'
+    }
+
+    initWave(waveDatas.value, time.value, type.value, severity.value, isOpen.value)
+    loading.value = false
+}
+
 onMounted(() => {
     const zoomValue = document.body.style.getPropertyValue('zoom')
     zoom.value = 1 / (zoomValue ? parseFloat(zoomValue) : 1)
     window.addEventListener('resize', handleResize)
 
-    // 初始化 Web Worker
-    worker.value = new Worker(new URL('./rmsWorker.js', import.meta.url))
-    worker.value.onmessage = e => {
-        if (e.data.success) {
-            const data = e.data
-            titles.value = data.titles
-            waveDatas.value = data.waveDatas
-            time.value = data.time
-            type.value = data.type
-            severity.value = data.severity
-            iphasic.value = data.iphasic
-
-            // 初始化波形图
-            initWave(waveDatas.value, time.value, type.value, severity.value, isOpen.value)
-        } else {
-            console.error('Worker error:', e.data.error)
+    rmsWorker = getRmsWorker(data => {
+        if (data.requestId !== waveRequestId) return
+        if (!data.success) {
+            console.error('Worker error:', data.error)
             loading.value = false
+            return
         }
-    }
+        const cacheKey = pendingCacheKeys.get(data.requestId)
+        if (cacheKey) {
+            setWaveCache(cacheKey, data)
+            pendingCacheKeys.delete(data.requestId)
+        }
+        applyWorkerResult(data)
+    })
 
     nextTick(() => {
-        setTimeout(() => {
-            query()
-        }, 500)
+        query()
     })
 })
 
 onBeforeUnmount(() => {
-    if (worker.value) {
-        worker.value.terminate()
-    }
     backbxlb()
     window.removeEventListener('resize', handleResize)
 })
@@ -187,7 +202,7 @@ const download = () => {
             scale: 2
         }).then(function (canvas) {
             const creatIMg = document.createElement('a')
-            creatIMg.download = 'rms波形.png'
+            creatIMg.download = (props.boxoList.lineName || props.boxoList.measurementPointName || props.boxoList.equipmentName) + '_RMS波形_' + formatExportDateTime() + '.png'
             creatIMg.href = canvas.toDataURL()
             creatIMg.click()
             creatIMg.remove()
@@ -195,23 +210,15 @@ const download = () => {
     }
 }
 
+const EXTRA_PANEL_CLASS = 'wave-extra-panel'
+
+const resetWaveDom = () => {
+    backbxlb()
+    $('#rmsp').nextAll(`.${EXTRA_PANEL_CLASS}`).remove()
+}
+
 const query = () => {
-    loading.value = true
-    if (props.wp) {
-        // 使用 Worker 处理数据
-        if (worker.value) {
-            worker.value.postMessage(
-                JSON.stringify({
-                    wp: props.wp,
-                    isOpen: isOpen.value,
-                    value: props.value,
-                    boxoList: props.boxoList
-                })
-            )
-        }
-    } else {
-        initWave(null, null, null, null, null)
-    }
+    initWaves()
 }
 
 const waveData = (
@@ -245,29 +252,31 @@ const waveData = (
 }
 
 const initWaves = () => {
-    if (props.wp) {
-        iphasic.value = props.wp.iphasic || 1
-        const picCounts = (props.wp.waveTitle.length - 1) / iphasic.value
-        waveDatas.value = []
-
-        for (let i = 0; i < picCounts; i++) {
-            const data = fliteWaveData(props.wp, i)
-            waveDatas.value.push(data)
-        }
-
-        time.value = props.wp.time
-        type.value = props.wp.waveType
-        severity.value = props.wp.yzd
-
-        if (Number(severity.value) < 0) {
-            severity.value = '/'
-            type.value = '/'
-        }
-
-        initWave(waveDatas.value, time.value, type.value, severity.value, isOpen.value)
-    } else {
+    if (!props.wp?.listRmsData?.length) {
         initWave(null, null, null, null, null)
+        loading.value = false
+        return
     }
+
+    const cacheKey = buildWaveCacheKey('rms', props.wp, props.value, isOpen.value, props.boxoList)
+    const cached = getWaveCache<any>(cacheKey)
+    if (cached) {
+        applyWorkerResult(cached)
+        return
+    }
+
+    loading.value = true
+    iphasic.value = props.wp.iphasic || 1
+    const currentRequestId = ++waveRequestId
+    pendingCacheKeys.set(currentRequestId, cacheKey)
+
+    rmsWorker?.postMessage(
+        buildWorkerPayload('rms', props.wp, props.boxoList, {
+            requestId: currentRequestId,
+            value: props.value,
+            isOpen: isOpen.value
+        })
+    )
 }
 
 const fliteWaveData = (wp: any, step: number): WaveData => {
@@ -482,7 +491,7 @@ const initWave = (
     severity: string | null,
     isOpen: boolean | null
 ) => {
-    $('div.bx').remove()
+    resetWaveDom()
 
     let picHeight = vh.value
     const show = !isOpen
@@ -594,19 +603,25 @@ const initWave = (
         for (let step = waveDatas.length - 1; step > 0 && step < waveDatas.length; step--) {
             const rmsId = 'rms' + step
             const newDivRms = $(
-                `<div style="height:${vh.value};overflow: hidden;min-height: 200px;"><div class='bx' id='${rmsId}'></div></div>`
+                `<div class="${EXTRA_PANEL_CLASS}" style="height:${vh.value};overflow: hidden;min-height: 200px;"><div class='bx' id='${rmsId}'></div></div>`
             )
             newDivRms.insertAfter($('#rmsp'))
             $(`#${rmsId}`).css('height', picHeight).css('width', vw.value).css('min-height', '200px')
         }
     } else {
-        titleText = `变电站名称：${subName.value} 监测点名称：${lineName.value} 发生时刻：${time} 暂降(骤升)幅值：${(
+        titleText = `变电站名称：${subName.value} 监测点名称：${lineName.value} 发生时刻：${time} 暂降幅值：${(
             Number(eventValue.value) * 1
         ).toFixed(0)}% 持续时间：${persistTime.value}s`
     }
     const rms = document.getElementById('rmsp')
 
     if (!rms) return
+
+    const yRange = calcRmsYAxisRange(rmscu[0]?.[1] ?? 0, rmscm[0]?.[1] ?? 0)
+
+    const existingChart = echarts.getInstanceByDom(rms)
+    if (existingChart) existingChart.dispose()
+
     const myChartes = echarts.init(rms)
     const echartsColor = {
         WordColor: '#000',
@@ -632,7 +647,15 @@ const initWave = (
         rms.style.width = '100%'
         rms.style.height = vh.value
     }, 0)
-
+    let titlename = ''
+    if (props.boxoList.systemType == 'ZL' || props.boxoList.systemType == 'YPT') {
+        if (props.wp.channelNames[1].includes('L')) {
+            titlename = '电网侧'
+        }
+        if (props.wp.channelNames[1].includes('S')) {
+            titlename = '负载侧'
+        }
+    }
     const option = {
         tooltip: {
             top: '10px',
@@ -669,7 +692,7 @@ const initWave = (
                 align: 'left'
             },
             textStyle: {
-                fontSize: '16px',
+                fontSize: '14px',
                 color: props.DColor ? '#000' : echartsColor.WordColor
             }
         },
@@ -740,7 +763,7 @@ const initWave = (
         },
         yAxis: {
             type: 'value',
-            name: unit,
+            name: unit + (titlename ? '_' + titlename : ''),
             title: {
                 align: 'high',
                 offset: 0,
@@ -750,8 +773,11 @@ const initWave = (
             },
             // max: rmscm[0]?.[1] * 1.06 || 0,
             // min: rmscu[0]?.[1] - rmscu[0]?.[1] * 0.2 || 0,
-            max: Math.floor((rmscm[0]?.[1] * 1.06 || 0) * 1.1 * 10) / 10,
-            min: Math.floor((rmscu[0]?.[1] - rmscu[0]?.[1] * 0.2 || 0) * 10) / 10,
+            max: yRange.max,
+            min: yRange.min,
+            interval: yRange.interval,
+            minInterval: yRange.interval,
+            scale: false,
             boundaryGap: [0, '100%'],
             showLastLabel: true,
             opposite: false,
@@ -770,7 +796,7 @@ const initWave = (
                 fontSize: '12px',
                 color: props.DColor ? '#000' : echartsColor.WordColor,
                 formatter: function (value: number) {
-                    return Math.floor(value * 1000) / 1000
+                    return formatAxisLabel(value)
                 }
             },
             splitLine: {
@@ -784,7 +810,7 @@ const initWave = (
         grid: {
             left: '60px',
             right: '45px',
-            bottom: '40px',
+            bottom: '45px',
             top: '60px'
             // containLabel: true
         },
@@ -793,14 +819,17 @@ const initWave = (
                 type: 'inside',
                 height: 13,
                 start: 0,
-                bottom: '20px',
-                end: 100
+
+                bottom: '10px',
+                end: 100,
+                filterMode: 'none'
             },
             {
                 start: 0,
                 height: 13,
-                bottom: '20px',
-                end: 100
+                bottom: '10px',
+                end: 100,
+                filterMode: 'none'
             }
         ],
         series: [
@@ -839,7 +868,7 @@ const initWave = (
                 data: rmscu
             },
             {
-                name: '最小暂降(骤升)幅值',
+                name: '最小暂降幅值',
                 type: 'scatter',
                 symbol: 'image://' + url2,
                 itemStyle: { width: 45, height: 45 },
@@ -927,34 +956,49 @@ const drawPics = (
     }
 
     let titlename = ''
-    if (props.boxoList.systemType == 'ZL') {
+    if (props.boxoList.systemType == 'ZL' || props.boxoList.systemType == 'YPT') {
         const str = rmsId.split('s')
         const str1 = Number(str[1])
 
         props.wp.channelNames.forEach((element: string, i: number) => {
-            if (i == 4 || i == 7 || i == 10) {
-                if (str1 == 1 && i == 4) {
-                    const s = element.split('A')
-                    const s1 = s[0] == 'LI' ? '电网侧-电流' : s[0] + '侧' + s[1]
-                    titlename = s1 + '    ' + title
+            if ((str1 == 1 && i == 4) || (str1 == 2 && i == 7) || (str1 == 3 && i == 10)) {
+                if (element.includes('L')) {
+                    titlename = '电网侧'
                 }
-                if (str1 == 2 && i == 7) {
-                    const s = element.split('A')
-                    const s1 = s[0] == 'SU' ? '负载侧-电压' : s[0] + '侧' + s[1]
-                    titlename = s1 + '    ' + title
-                }
-                if (str1 == 3 && i == 10) {
-                    const s = element.split('A')
-                    const s1 = s[0] == 'SI' ? '负载侧-电流' : s[0] + '侧' + s[1]
-                    titlename = s1 + '    ' + title
+                if (element.includes('S')) {
+                    titlename = '负载侧'
                 }
             }
+
+            // if (i == 4 || i == 7 || i == 10) {
+            //     if (i == 4 || i == 7 || i == 10) {
+            //         if (str1 == 1 && i == 4) {
+            //             const s = element.split('A')
+            //             const s1 = s[0] == 'LI' ? '电网侧' : ''//s[0] + '侧' + s[1]
+            //             titlename = s1 //+ '    ' + title
+            //         }
+            //         if (str1 == 2 && i == 7) {
+            //             const s = element.split('A')
+            //             const s1 = s[0] == 'SU' ? '负载侧' : ''//s[0] + '侧' + s[1]
+            //             titlename = s1 //+ '    ' + title
+            //         }
+            //         if (str1 == 3 && i == 10) {
+            //             const s = element.split('A')
+            //             const s1 = s[0] == 'SI' ? '负载侧' : ''//s[0] + '侧' + s[1]
+            //             titlename = s1 //+ '    ' + title
+            //         }
+            //     }
+            // }
         })
     }
 
     const rmsIds = document.getElementById(rmsId)
     if (!rmsIds) return
 
+    const subMin = props.value === 1 ? waveDataTemp.RMSF.min : waveDataTemp.RMSS.min
+    const subMax = props.value === 1 ? waveDataTemp.RMSF.max : waveDataTemp.RMSS.max
+    const yRange = calcRmsYAxisRange(subMin, subMax)
+
     const myChartes = echarts.init(rmsIds)
     const echartsColor = {
         WordColor: '#000',
@@ -1008,7 +1052,7 @@ const drawPics = (
             left: 'center',
             text: '', //titlename || title,
             textStyle: {
-                fontSize: '16px',
+                fontSize: '15px',
                 color: props.DColor ? '#000' : echartsColor.WordColor
             }
         },
@@ -1068,7 +1112,7 @@ const drawPics = (
         },
         yAxis: {
             type: 'value',
-            name: unit,
+            name: unit + (titlename ? '_' + titlename : ''),
             title: {
                 align: 'high',
                 offset: 0,
@@ -1078,6 +1122,11 @@ const drawPics = (
             },
             boundaryGap: [0, '100%'],
             showLastLabel: true,
+            max: yRange.max,
+            min: yRange.min,
+            interval: yRange.interval,
+            minInterval: yRange.interval,
+            scale: false,
             opposite: false,
             // max: Math.floor((rmscm[0]?.[1] * 1.06 || 0) * 1.1 * 10) / 10,
             // min: Math.floor((rmscu[0]?.[1] - rmscu[0]?.[1] * 0.2 || 0) * 10) / 10,
@@ -1096,8 +1145,7 @@ const drawPics = (
                 fontSize: '12px',
                 color: props.DColor ? '#000' : echartsColor.WordColor,
                 formatter: function (value: number) {
-                    // return (value - 0).toFixed(2)
-                    return Math.floor(value * 1000) / 1000
+                    return formatAxisLabel(value)
                 }
             },
             splitLine: {
@@ -1111,7 +1159,7 @@ const drawPics = (
         grid: {
             left: '60px',
             right: '45px',
-            bottom: '40px',
+            bottom: '45px',
             top: '60px'
             // containLabel: true
         },
@@ -1120,14 +1168,17 @@ const drawPics = (
                 type: 'inside',
                 height: 13,
                 start: 0,
-                bottom: '20px',
-                end: 100
+
+                bottom: '10px',
+                end: 100,
+                filterMode: 'none'
             },
             {
                 start: 0,
                 height: 13,
-                bottom: '20px',
-                end: 100
+                bottom: '10px',
+                end: 100,
+                filterMode: 'none'
             }
         ],
         series: [
@@ -1213,12 +1264,7 @@ const backbxlb = () => {
     myChartess4.value = null
     myChartess5.value = null
 
-    // echarts.disconnect(charts.filter(Boolean) as echarts.ECharts[])
-    charts.filter(Boolean).forEach(chart => {
-        if (chart && typeof chart.dispose === 'function') {
-            chart.dispose()
-        }
-    })
+    $('#rmsp').nextAll(`.${EXTRA_PANEL_CLASS}`).remove()
 }
 
 const getMax = (temp: number, tempA: number, tempB: number, tempC: number): number => {

src/components/echarts/shuWorker.js

@@ -1,6 +1,6 @@
 // waveData.worker.js
 self.addEventListener('message', function (e) {
-    const { wp, value, iphasic, isOpen, boxoList } = JSON.parse(e.data)
+    const { wp, value, iphasic, isOpen, boxoList, requestId } = e.data
 
     // 处理波形数据的函数
     const fliteWaveData = (wp, step) => {
@@ -131,8 +131,8 @@ self.addEventListener('message', function (e) {
             boxoList.measurementPointName +
             '　发生时刻:' +
             boxoList.startTime +
-            '　暂降(骤升)幅值:' +
-            (boxoList.featureAmplitude * 100).toFixed(2) +
+            '　暂降幅值:' +
+            Math.floor(boxoList.featureAmplitude * 10000) / 100 +
             '%　持续时间:' +
             boxoList.duration +
             's'
@@ -143,7 +143,7 @@ self.addEventListener('message', function (e) {
             boxoList.equipmentName +
             '　发生时刻:' +
             boxoList.startTime +
-            '　暂降(骤升)幅值:' +
+            '　暂降幅值:' +
             boxoList.evtParamVVaDepth +
             '%　持续时间:' +
             boxoList.evtParamTm +
@@ -155,8 +155,8 @@ self.addEventListener('message', function (e) {
             boxoList.lineName +
             '　发生时刻:' +
             boxoList.startTime +
-            '　暂降(骤升)幅值:' +
-            (boxoList.featureAmplitude * 100).toFixed(2) +
+            '　暂降幅值:' +
+            Math.floor(boxoList.featureAmplitude * 10000) / 100 +
             '%　持续时间:' +
             boxoList.persistTime +
             's'
@@ -168,8 +168,8 @@ self.addEventListener('message', function (e) {
             boxoList.lineName +
             '　发生时刻:' +
             boxoList.startTime +
-            '　暂降(骤升)幅值:' +
-            (boxoList.featureAmplitude * 100).toFixed(2) +
+            '　暂降幅值:' +
+            Math.floor(boxoList.featureAmplitude * 10000) / 100 +
             '%　持续时间:' +
             boxoList.duration +
             's'
@@ -195,6 +195,8 @@ self.addEventListener('message', function (e) {
 
     // 将处理结果发送回主线程
     self.postMessage({
+        requestId,
+        success: true,
         waveDatas,
         time,
         type,

src/components/echarts/shushiboxi.vue

@@ -1,8 +1,8 @@
 <template>
     <div v-loading="loading" class="boxbx" style="position: relative; height: 100%">
         <div id="boxsj">
-            <div id="shushi" :style="`height:${vh};overflow: hidden;min-height: 200px;`">
-                <div class="bx" id="wave" style="min-height: 200px"></div>
+            <div id="shushi" :style="containerStyle">
+                <div class="bx" id="wave" :style="waveStyle"></div>
             </div>
         </div>
     </div>
@@ -14,9 +14,15 @@ import html2canvas from 'html2canvas'
 import $ from 'jquery'
 import * as echarts from 'echarts'
 import { mainHeight } from '@/utils/layout'
+import { calcShuYAxisRange, formatAxisLabel } from '@/utils/chartAxisHelper'
 import url from '@/assets/img/point.png'
-// 创建Worker
-let waveDataWorker: Worker | null = null
+import { buildWaveCacheKey, getWaveCache, setWaveCache } from '@/utils/waveCache'
+import { getShuWorker, buildWorkerPayload } from '@/utils/waveWorkerPool'
+import { buildExportBaseName, formatExportDateTime } from '@/utils/echartMethod'
+
+let waveRequestId = 0
+const pendingCacheKeys = new Map<number, string>()
+let shuWorker: Worker | null = null
 interface WaveData {
     instantF: { max: number; min: number }
     instantS: { max: number; min: number }
@@ -110,38 +116,82 @@ const vh = computed(() => {
 
 const vw = computed(() => '100%')
 
+const containerStyle = computed(() => ({
+    height: vh.value,
+    overflow: 'hidden',
+    minHeight: '200px'
+}))
+
+const waveStyle = computed(() => ({
+    width: '100%',
+    height: '100%',
+    minHeight: '200px'
+}))
+
+const applyChartSize = (el: HTMLElement) => {
+    el.style.width = '100%'
+    el.style.height = vh.value
+}
+
+const finishChartRender = (chart: echarts.ECharts, endLoading = false) => {
+    nextTick(() => {
+        chart.resize()
+        if (endLoading) {
+            loading.value = false
+        }
+    })
+}
+
 watch(
     () => props.value,
-    newVal => {
-        if (newVal == 2) {
-            initWaves()
-        } else {
-            $('#wave1').remove()
-            initWaves()
-        }
+    () => {
+        query()
     }
 )
 
+watch(
+    () => props.wp,
+    () => {
+        query()
+    }
+)
+
+const applyWorkerResult = (data: any) => {
+    titles.value = data.titles
+    iphasic.value = data.iphasic
+    time.value = data.time
+    type.value = data.type
+    severity.value = data.severity
+    initWave(data.waveDatas, data.time, data.type, data.severity, isOpen.value)
+    loading.value = false
+}
+
 onMounted(() => {
     const zoomValue = document.body.style.getPropertyValue('zoom')
     zoom.value = 1 / (zoomValue ? parseFloat(zoomValue) : 1)
 
     window.addEventListener('resize', handleResize)
+    shuWorker = getShuWorker(data => {
+        if (data.requestId !== waveRequestId) return
+        if (!data.success) {
+            console.error('Worker error:', data.error)
+            loading.value = false
+            return
+        }
+        const cacheKey = pendingCacheKeys.get(data.requestId)
+        if (cacheKey) {
+            setWaveCache(cacheKey, data)
+            pendingCacheKeys.delete(data.requestId)
+        }
+        applyWorkerResult(data)
+    })
+
     nextTick(() => {
-        setTimeout(() => {
-            query()
-        }, 500)
+        query()
     })
 })
 
 onBeforeUnmount(() => {
-    console.log('组件卸载')
-
-    if (waveDataWorker) {
-        waveDataWorker.terminate()
-        waveDataWorker = null
-    }
-
     backbxlb()
     window.removeEventListener('resize', handleResize)
 })
@@ -158,7 +208,7 @@ const download = () => {
             scale: 2
         }).then(function (canvas) {
             const creatIMg = document.createElement('a')
-            creatIMg.download = '瞬间波形.png'
+            creatIMg.download = (props.boxoList.lineName || props.boxoList.measurementPointName || props.boxoList.equipmentName) + '_瞬间波形_' + formatExportDateTime() + '.png'
             creatIMg.href = canvas.toDataURL()
             creatIMg.click()
             creatIMg.remove()
@@ -166,6 +216,13 @@ const download = () => {
     }
 }
 
+const EXTRA_PANEL_CLASS = 'wave-extra-panel'
+
+const resetWaveDom = () => {
+    backbxlb()
+    $('#shushi').nextAll(`.${EXTRA_PANEL_CLASS}`).remove()
+}
+
 const query = () => {
     loading.value = true
     initWaves()
@@ -184,48 +241,32 @@ const waveData = (instantF: any, instantS: any, shunshiF: any, shunshiS: any, ti
 
 // 在组件中修改initWaves函数
 const initWaves = () => {
-    if (props.wp) {
-        loading.value = true
-        iphasic.value = props.wp.iphasic || 1
-        // 使用Web Worker处理数据
-        if (!waveDataWorker) {
-            waveDataWorker = new Worker(new URL('./shuWorker.js', import.meta.url))
-
-            waveDataWorker.onmessage = function (e) {
-                const data = e.data
-
-                titles.value = data.titles
-                iphasic.value = data.iphasic
-                time.value = data.time
-                type.value = data.type
-                severity.value = data.severity
-
-                initWave(data.waveDatas, data.time, data.type, data.severity, isOpen.value)
-
-                loading.value = false
-            }
-
-            waveDataWorker.onerror = function (error) {
-                console.error('Worker error:', error)
-                loading.value = false
-                // 备用方案：在主线程处理数据
-                // processDataInMainThread();
-            }
-        }
-
-        // 发送数据到Worker
-        waveDataWorker.postMessage(
-            JSON.stringify({
-                wp: props.wp,
-                value: props.value,
-                iphasic: iphasic.value,
-                isOpen: isOpen.value,
-                boxoList: props.boxoList
-            })
-        )
-    } else {
+    if (!props.wp?.listWaveData?.length) {
         initWave(null, null, null, null, null)
+        loading.value = false
+        return
     }
+
+    const cacheKey = buildWaveCacheKey('shu', props.wp, props.value, isOpen.value, props.boxoList)
+    const cached = getWaveCache<any>(cacheKey)
+    if (cached) {
+        applyWorkerResult(cached)
+        return
+    }
+
+    loading.value = true
+    iphasic.value = props.wp.iphasic || 1
+    const currentRequestId = ++waveRequestId
+    pendingCacheKeys.set(currentRequestId, cacheKey)
+
+    shuWorker?.postMessage(
+        buildWorkerPayload('shu', props.wp, props.boxoList, {
+            requestId: currentRequestId,
+            value: props.value,
+            isOpen: isOpen.value,
+            iphasic: iphasic.value
+        })
+    )
 }
 
 const initWave = (
@@ -235,6 +276,7 @@ const initWave = (
     severity: string | null,
     isOpen: boolean | null
 ) => {
+    resetWaveDom()
     $('div.bx1').remove()
 
     let picHeight = vh.value
@@ -327,14 +369,14 @@ const initWave = (
 
         for (let step = waveDatas.length - 1; step > 0 && step < waveDatas.length; step--) {
             const waveId = 'wave' + step
-            const newDivShunshi = $(`<div style="height:${vh.value};overflow: hidden;min-height: 200px;">
+            const newDivShunshi = $(`<div class="${EXTRA_PANEL_CLASS}" style="height:${vh.value};overflow: hidden;min-height: 200px;">
         <div class='bx1' id='${waveId}'></div>
       </div>`)
             newDivShunshi.insertAfter($('#shushi'))
             $(`#${waveId}`).css('height', picHeight).css('width', vw.value).css('min-height', '200px')
         }
     } else {
-        titleText = `变电站名称：${subName.value} 监测点名称：${lineName.value} 发生时刻：${time} 暂降(骤升)幅值：${(
+        titleText = `变电站名称：${subName.value} 监测点名称：${lineName.value} 发生时刻：${time} 暂降幅值：${(
             Number(eventValue.value) * 1
         ).toFixed(0)}% 持续时间：${persistTime.value}s`
     }
@@ -342,6 +384,13 @@ const initWave = (
     const wave = document.getElementById('wave')
     if (!wave) return
 
+    applyChartSize(wave)
+
+    const yRange = calcShuYAxisRange(Number(min), Number(max))
+
+    const existingChart = echarts.getInstanceByDom(wave)
+    if (existingChart) existingChart.dispose()
+
     const myChartes = echarts.init(wave)
     const echartsColor = {
         WordColor: '#000',
@@ -362,11 +411,20 @@ const initWave = (
             '#FF9999'
         ]
     }
+    let titlename = ''
+    if (props.boxoList.systemType == 'ZL' || props.boxoList.systemType == 'YPT') {
 
-    setTimeout(() => {
-        wave.style.width = '100%'
-        wave.style.height = vh.value
-    }, 0)
+
+        if (props.wp.channelNames[1].includes('L')) {
+            titlename = '电网侧'
+        }
+        if (props.wp.channelNames[1].includes('S')) {
+            titlename = '负载侧'
+        }
+
+
+
+    }
 
     const option = {
         tooltip: {
@@ -405,7 +463,7 @@ const initWave = (
             left: 'center',
             text: titleText,
             textStyle: {
-                fontSize: '16px',
+                fontSize: '14px',
                 color: props.DColor ? '#000' : echartsColor.WordColor
             }
         },
@@ -471,7 +529,7 @@ const initWave = (
         },
         yAxis: {
             type: 'value',
-            name: unit,
+            name: unit + (titlename ? '_' + titlename : ''),
             title: {
                 align: 'high',
                 offset: 0,
@@ -481,10 +539,11 @@ const initWave = (
             },
             boundaryGap: [0, '100%'],
             showLastLabel: true,
-            // max: max.toFixed(2) * 1.1,
-            // min: min.toFixed(2) > 0 ? min.toFixed(2) - min.toFixed(2) * 0.1 : min.toFixed(2) * 1.1,
-               max: Math.floor(max.toFixed(2) * 1.1 * 10) / 10,
-            min: Math.floor(min.toFixed(2) > 0 ? min.toFixed(2) - min.toFixed(2) * 0.1 : min.toFixed(2) * 1.1 * 10) / 10  ,
+            max: yRange.max,
+            min: yRange.min,
+            interval: yRange.interval,
+            minInterval: yRange.interval,
+            scale: false,
             opposite: false,
             nameTextStyle: {
                 fontSize: '12px',
@@ -501,8 +560,7 @@ const initWave = (
                 fontSize: '12px',
                 color: props.DColor ? '#000' : echartsColor.WordColor,
                 formatter: function (value: number) {
-                    // return (value - 0).toFixed(2)
-                    return Math.floor(value * 1000) / 1000
+                    return formatAxisLabel(value)
                 }
             },
             splitLine: {
@@ -516,23 +574,25 @@ const initWave = (
         grid: {
             left: '60px',
             right: '45px',
-            bottom: '40px',
+            bottom: '45px',
             top: '60px'
-            // containLabel: true
         },
         dataZoom: [
             {
                 type: 'inside',
                 height: 13,
                 start: 0,
-                bottom: '20px',
-                end: 100
+
+                bottom: '10px',
+                end: 100,
+                filterMode: 'none'
             },
             {
                 start: 0,
                 height: 13,
-                bottom: '20px',
-                end: 100
+                bottom: '10px',
+                end: 100,
+                filterMode: 'none'
             }
         ],
         series: [
@@ -578,11 +638,7 @@ const initWave = (
 
     myChartes.setOption(option)
     myChartess.value = myChartes
-
-    setTimeout(() => {
-        myChartes.resize()
-        loading.value = false
-    }, 400)
+    finishChartRender(myChartes, true)
 
     if (waveDatas && waveDatas.length > 1) {
         const waveDatasTemp = waveDatas.slice(1)
@@ -652,33 +708,52 @@ const drawPics = (
     }
 
     let titlename = ''
-    if (props.boxoList.systemType == 'ZL') {
+    if (props.boxoList.systemType == 'ZL' || props.boxoList.systemType == 'YPT') {
         const str = waveId.split('e')
         const str1 = Number(str[1])
+
         props.wp.channelNames.forEach((element: string, i: number) => {
-            if (i == 4 || i == 7 || i == 10) {
-                if (str1 == 1 && i == 4) {
-                    const s = element.split('A')
-                    const s1 = s[0] == 'LI' ? '电网侧-电流' : s[0] + '侧' + s[1]
-                    titlename = s1 + '    ' + title
+            if ((str1 == 1 && i == 4) || (str1 == 2 && i == 7) || (str1 == 3 && i == 10)) {
+
+
+                if (element.includes('L')) {
+                    titlename = '电网侧'
                 }
-                if (str1 == 2 && i == 7) {
-                    const s = element.split('A')
-                    const s1 = s[0] == 'SU' ? '负载侧-电压' : s[0] + '侧' + s[1]
-                    titlename = s1 + '    ' + title
-                }
-                if (str1 == 3 && i == 10) {
-                    const s = element.split('A')
-                    const s1 = s[0] == 'SI' ? '负载侧-电流' : s[0] + '侧' + s[1]
-                    titlename = s1 + '    ' + title
+                if (element.includes('S')) {
+                    titlename = '负载侧'
                 }
+              
+                // if (str1 == 1 && i == 4) {
+                //     const s = element.split('A')
+                //     const s1 = s[0] == 'LI' ? '电网侧' : ''//s[0] + '侧' + s[1]
+                //     titlename = s1 //+ '    ' + title
+                // }
+                // if (str1 == 2 && i == 7) {
+                //     const s = element.split('A')
+                //     const s1 = s[0] == 'SU' ? '负载侧' : ''//s[0] + '侧' + s[1]
+                //     titlename = s1 //+ '    ' + title
+                // }
+                // if (str1 == 3 && i == 10) {
+                //     const s = element.split('A')
+                //     const s1 = s[0] == 'SI' ? '负载侧' : ''//s[0] + '侧' + s[1]
+                //     titlename = s1 //+ '    ' + title
+                // }
             }
         })
+
+
     }
 
     const waveIds = document.getElementById(waveId)
     if (!waveIds) return
 
+    applyChartSize(waveIds)
+
+    const yRange = calcShuYAxisRange(Number(min), Number(max))
+
+    const existingChart = echarts.getInstanceByDom(waveIds)
+    if (existingChart) existingChart.dispose()
+
     const myChartes = echarts.init(waveIds)
     const echartsColor = {
         WordColor: '#000',
@@ -781,7 +856,7 @@ const drawPics = (
         },
         yAxis: {
             type: 'value',
-            name: unit,
+            name: unit + (titlename ? '_' + titlename : ''),
             title: {
                 align: 'high',
                 offset: 0,
@@ -791,8 +866,11 @@ const drawPics = (
             },
             boundaryGap: [0, '100%'],
             showLastLabel: true,
-            max: Math.floor(max.toFixed(2) * 1.1 * 10) / 10,
-            min: Math.floor(min.toFixed(2) > 0 ? min.toFixed(2) - min.toFixed(2) * 0.1 : min.toFixed(2) * 1.1 * 10) / 10  ,
+            max: yRange.max,
+            min: yRange.min,
+            interval: yRange.interval,
+            minInterval: yRange.interval,
+            scale: false,
             opposite: false,
             nameTextStyle: {
                 fontSize: '12px',
@@ -809,8 +887,7 @@ const drawPics = (
                 fontSize: '12px',
                 color: props.DColor ? '#000' : echartsColor.WordColor,
                 formatter: function (value: number) {
-                    // return (value - 0).toFixed(2)
-                    return Math.floor(value * 1000) / 1000
+                    return formatAxisLabel(value)
                 }
             },
             splitLine: {
@@ -824,7 +901,7 @@ const drawPics = (
         grid: {
             left: '60px',
             right: '45px',
-            bottom: '40px',
+            bottom: '45px',
             top: '60px'
             // containLabel: true
         },
@@ -833,14 +910,17 @@ const drawPics = (
                 type: 'inside',
                 height: 13,
                 start: 0,
-                bottom: '20px',
-                end: 100
+
+                bottom: '10px',
+                end: 100,
+                filterMode: 'none'
             },
             {
                 start: 0,
                 height: 13,
-                bottom: '20px',
-                end: 100
+                bottom: '10px',
+                end: 100,
+                filterMode: 'none'
             }
         ],
         series: [
@@ -897,10 +977,7 @@ const drawPics = (
             break
     }
 
-    setTimeout(() => {
-        myChartes.resize()
-        loading.value = false
-    }, 400)
+    finishChartRender(myChartes)
 
     echarts.connect([myChartes1, myChartes])
 }
@@ -929,12 +1006,8 @@ const backbxlb = () => {
     myChartess4.value = null
     myChartess5.value = null
 
-    // echarts.disconnect(charts.filter(Boolean) as echarts.ECharts[])
-    charts.filter(Boolean).forEach(chart => {
-        if (chart && typeof chart.dispose === 'function') {
-            chart.dispose()
-        }
-    })
+    $('#shushi').nextAll(`.${EXTRA_PANEL_CLASS}`).remove()
+    $('div.bx1').remove()
 }
 
 const getMax = (temp: number, tempA: number, tempB: number, tempC: number): number => {

src/components/form/datePicker/index.vue

@@ -1,25 +1,12 @@
 <template>
     <div style="width: 540px">
-        <el-select
-            v-model.trim="interval"
-            style="min-width: 90px; width: 90px; margin-right: 10px"
-            @change="timeChange"
-        >
+        <el-select v-model.trim="interval" style="min-width: 90px; width: 90px; margin-right: 10px"
+            @change="timeChange">
             <el-option v-for="item in filteredTimeOptions" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
-        <el-date-picker
-            v-model.trim="timeValue"
-            type="daterange"
-            :disabled="disabledPicker"
-            style="width: 220px; margin-right: 10px"
-            unlink-panels
-            :clearable="false"
-            range-separator="至"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-            value-format="YYYY-MM-DD"
-            :shortcuts="shortcuts"
-        />
+        <el-date-picker v-model.trim="timeValue" type="daterange" :disabled="disabledPicker"
+            style="width: 220px; margin-right: 10px" unlink-panels :clearable="false" range-separator="至"
+            start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" :shortcuts="shortcuts" />
 
         <el-button :disabled="backDisabled" type="primary" :icon="DArrowLeft" @click="preClick"></el-button>
         <el-button type="primary" :icon="VideoPause" @click="nowTime">当前</el-button>
@@ -95,9 +82,15 @@ const shortcuts = [
 
 // 计算过滤后的 timeOptions
 const filteredTimeOptions = computed(() => {
+
+    if (props.timeKeyList.length > 0 && !props.timeKeyList.includes(interval.value.toString())) {
+        interval.value = Number(props.timeKeyList[0])
+
+    }
     if (!props.timeKeyList || props.timeKeyList.length === 0) {
         return timeOptions.value
     }
+    nowTime()
 
     return timeOptions.value.filter((option: any) => props.timeKeyList.includes(option.value.toString()))
 })
@@ -181,10 +174,10 @@ const timeChange = (e: number) => {
         timeFlag.value = 1
     }
 
-   nextTick(() => {
+    nextTick(() => {
         // 检查按钮状态
-    checkInitialButtonStatus()
-   })
+        checkInitialButtonStatus()
+    })
 
     // 触发 change 事件
     emitChange()

src/components/form/mac/MacAddressInput.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="mac-address-input" :class="{ disabled: disabled }">
-        <el-input
+        <el-input  show-word-limit 
             ref="inputRef"
             placeholder="请输入设备mac地址"
             v-model="macValue"

src/components/table/fieldRender/index.vue

@@ -146,7 +146,7 @@ import { ElMessageBox, type TagProps } from 'element-plus'
 import type TableStoreClass from '@/utils/tableStore'
 import { fullUrl, timeFormat } from '@/utils/common'
 import type { VxeColumnProps } from 'vxe-table'
-import { getFileUrl } from '@/api/system-boot/file'
+import { downLoadFile } from '@/api/cs-system-boot/manage'
 const TableStore = inject('tableStore') as TableStoreClass
 
 interface Props {
@@ -228,8 +228,12 @@ const handlerCommand = (item: OptButton) => {
 }
 const imgList: any = ref({})
 const getUrl = (url: string) => {
-    getFileUrl({ filePath: url }).then(res => {
-        imgList.value[url] = res.data
+    if (imgList.value[url]) return true
+    downLoadFile(url).then(res => {
+        const blob = res as unknown as Blob
+        if (blob?.type && blob.type !== 'application/json') {
+            imgList.value[url] = window.URL.createObjectURL(blob)
+        }
     })
     return true
 }

src/components/table/header/index.vue

@@ -31,7 +31,7 @@
                 </el-button>
                 <el-button
                     @click="onComSearch"
-                    v-if="showSearch"
+                    v-if="showSearch &&showQuery"
                     :loading="tableStore.table.loading"
                     type="primary"
                     :icon="Search"
@@ -81,7 +81,7 @@ import { defineProps } from 'vue'
 import { useTimeCacheStore } from '@/stores/timeCache'
 import { useRoute } from 'vue-router'
 
-const emit = defineEmits(['selectChange'])
+const emit = defineEmits(['selectChange','onResetForm'])
 
 const tableStore = inject('tableStore') as TableStore
 const tableHeader = ref()
@@ -102,6 +102,7 @@ interface Props {
     showSearch?: boolean
     nextFlag?: boolean //控制时间是否可以往后推
     theCurrentTime?: boolean //控制时间前3天展示上个月时间
+    showQuery?: boolean //是否显示查詢
     showReset?: boolean //是否显示重置
     showExport?: boolean //导出控制
     timeCacheFlag?: boolean //是否取缓存时间
@@ -115,6 +116,7 @@ const props = withDefaults(defineProps<Props>(), {
     nextFlag: false,
     theCurrentTime: true,
     showReset: true,
+    showQuery: true,
     showExport: false,
     timeCacheFlag: true,
     timeKeyList: () => ['1', '2', '3', '4', '5'] // 修改为箭头函数返回空数组
@@ -244,6 +246,7 @@ const setDatePicker = (list: any) => {
 const onResetForm = () => {
     //时间重置成默认值
     datePickerRef.value?.setInterval(3)
+    emit('onResetForm')
     tableStore.onTableAction('reset', {})
 }
 const setInterval = (val: any) => {

src/components/table/index.vue

@@ -10,10 +10,11 @@
             @checkbox-all="selectChangeEvent"
             @checkbox-change="selectChangeEvent"
             :showOverflow="showOverflow"
-            :sort-config="{ remote: true }"
-            @sort-change="handleSortChange"
+            
+          
         >
-        
+        <!-- :sort-config="{ remote: true }" -->
+        <!-- @sort-change="handleSortChange" -->
             <!-- Column 组件内部是 el-table-column -->
             <template v-if="isGroup">
                 <GroupColumn :column="tableStore.table.column" />
@@ -73,6 +74,7 @@ import { useConfig } from '@/stores/config'
 import type TableStoreClass from '@/utils/tableStore'
 import { useRouter } from 'vue-router'
 import { defaultAttribute } from '@/components/table/defaultAttribute'
+import { buildExportBaseName,formatExportDateTime } from '@/utils/echartMethod'
 
 const config = useConfig()
 const tableRef = ref<VxeTableInstance>()
@@ -149,14 +151,24 @@ const selectChangeEvent: VxeTableEvents.CheckboxChange<any> = ({ checked }) => {
 const getRef = () => {
     return tableRef.value
 }
+const getTableExportFilename = () => {
+    const exportName = tableStore.exportName
+    if (exportName && typeof exportName === 'object') {
+        return buildExportBaseName(exportName)
+    }
+    const feature =
+        exportName || (document.querySelectorAll('.ba-nav-tab.active')[0] as HTMLElement | undefined)?.textContent || '导出'
+    return buildExportBaseName({ feature })
+}
+
 watch(
     () => tableStore.table.allFlag,
     newVal => {
         if (tableStore.table.allFlag) {
-            console.log('🚀 ~ tableStore.table.allData:', tableStore.table.allData)
+            // console.log('🚀 ~ tableStore.table.allData:', tableStore.table.allData)
 
             tableRef.value?.exportData({
-                filename: tableStore.exportName || document.querySelectorAll('.ba-nav-tab.active')[0].textContent || '', // 文件名字
+                filename: getTableExportFilename(), // 文件名字
                 sheetName: 'Sheet1',
                 type: 'xlsx', //导出文件类型 xlsx 和 csv
                 useStyle: true,

src/components/tree/allocation.vue

@@ -1,20 +1,20 @@
 <template>
     <div :style="{ width: menuCollapse ? '40px' : props.width }" style="transition: all 0.3s; overflow: hidden">
-        <div class="mt10 mr10" style="display: flex; justify-content: end">
+        <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>
+                <el-input maxlength="32" show-word-limit   v-model.trim="filterText" placeholder="请输入内容" clearable>
                     <template #prefix>
                         <Icon name="el-icon-Search" style="font-size: 16px" />
                     </template>
@@ -23,23 +23,19 @@
                     <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
-                :style="{ height: 'calc(100vh - 267px)' }"
+                :style="{ height: `calc(100vh - ${height}px)` }"
                 style="overflow: auto"
                 ref="treeRef"
                 :props="defaultProps"
@@ -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,89 +65,55 @@
 <script lang="ts" setup>
 import useCurrentInstance from '@/utils/useCurrentInstance'
 import { ElTree } from 'element-plus'
-import { emit } from 'process'
 import { ref, watch } from 'vue'
-import { t } from 'vxe-table'
 import { useConfig } from '@/stores/config'
+import { createTreeFilterNode } from './govern/treeFilterUtils'
 
-defineOptions({
-    name: 'govern/tree'
-})
+defineOptions({ name: 'govern/allocation', inheritAttrs: false })
 
 interface Props {
     width?: string
     canExpand?: boolean
     showPush?: boolean
+    showBut?: boolean
+    height?: number
 }
-const loading = ref(false)
+
 const props = withDefaults(defineProps<Props>(), {
     width: '280px',
     canExpand: true,
-    showPush: false
+    showPush: false,
+    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 })
@@ -183,7 +145,5 @@ defineExpose({ treeRef, loading })
 .custom-tree-node {
     display: flex;
     align-items: center;
-   
-
 }
 </style>

src/components/tree/cloudDevice.vue

@@ -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" show-word-limit   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;

src/components/tree/device.vue

@@ -1,21 +1,19 @@
 <!-- 设备管理使用折叠面板渲染多个tree -->
 <template>
-    <div :style="{ width: menuCollapse ? '40px' : props.width }" style="display: flex; overflow: hidden">
-        <Icon
+    <div :style="{ width: menuCollapse ? '40px' : props.width }" class="device-tree-root">
+        <!-- <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"
+            <div class="tree-search mb10">
+                <el-input maxlength="32" show-word-limit 
+                    
                     v-model.trim="filterText"
                     autocomplete="off"
                     placeholder="请输入内容"
@@ -36,145 +34,131 @@
                     </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"
-                style="flex: 1; height: 100%"
+                v-model="activeName"
+                class="device-collapse"
                 @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-select>
-                    <el-tree
-                        :style="{
-                            height:
-                                treeType.length != 0
-                                    ? `calc(100vh - 380px - ${props.height}px)`
-                                    : 'calc(100vh - 278px)'
-                        }"
-                        ref="treeRef1"
-                        :props="defaultProps"
-                        highlight-current
-                        :filter-node-method="filterNode"
-                        node-key="id"
-                        :default-expand-all="false"
-                        v-bind="$attrs"
-                        :data="zlDevList"
-                        style="overflow: auto"
-                    >
-                        <template #default="{ node, data }">
+                <el-collapse-item title="治理设备" name="0" v-if="zlDeviceData.length">
+                    <div class="collapse-tree-panel collapse-tree-panel--govern">
+                        <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
+                            ref="treeRef1"
+                            :props="defaultProps"
+                            highlight-current
+                            :filter-node-method="filterNode"
+                            node-key="id"
+                            :default-expand-all="false"
+                            v-bind="$attrs"
+                            :data="zlDevList"
+                            class="collapse-tree"
+                        >
+                        <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>
+                    </div>
                 </el-collapse-item>
-                <el-collapse-item title="便携式设备" name="1" v-if="bxsDeviceData.length != 0">
-                    <el-tree
-                        :style="{
-                            height:
-                                zlDeviceData.length != 0
-                                    ? `calc(100vh - 340px - ${props.height}px)`
-                                    : 'calc(100vh - 238px)'
-                        }"
-                        ref="treeRef2"
-                        :props="defaultProps"
-                        highlight-current
-                        :default-expand-all="false"
-                        :filter-node-method="filterNode"
-                        node-key="id"
-                        :data="bxsDeviceData"
-                        v-bind="$attrs"
-                        style="overflow: auto"
-                    >
-                        <template #default="{ node, data }">
+                <el-collapse-item title="便携式设备" name="1" v-if="bxsDeviceData.length">
+                    <div class="collapse-tree-panel">
+                        <el-tree
+                            ref="treeRef2"
+                            :props="defaultProps"
+                            highlight-current
+                            :default-expand-all="false"
+                            :filter-node-method="filterNode"
+                            node-key="id"
+                            :data="bxsDeviceData"
+                            v-bind="$attrs"
+                            class="collapse-tree"
+                        >
+                        <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>
+                    </div>
                 </el-collapse-item>
-                <el-collapse-item title="监测设备" name="2" v-if="frontDeviceData.length != 0">
-                    <el-tree
-                        :style="{
-                            height:
-                                zlDeviceData.length != 0
-                                    ? `calc(100vh - 340px - ${props.height}px)`
-                                    : 'calc(100vh - 238px)'
-                        }"
-                        ref="treeRef3"
-                        :props="defaultProps"
-                        highlight-current
-                        :default-expand-all="false"
-                        :filter-node-method="filterNode"
-                        node-key="id"
-                        :data="frontDeviceData"
-                        v-bind="$attrs"
-                        style="overflow: auto"
-                    >
-                        <template #default="{ node, data }">
+                <el-collapse-item title="监测设备" name="2" v-if="frontDeviceData.length">
+                    <div class="collapse-tree-panel">
+                        <el-tree
+                            ref="treeRef3"
+                            :props="defaultProps"
+                            highlight-current
+                            :default-expand-all="false"
+                            :filter-node-method="filterNode"
+                            node-key="id"
+                            :data="frontDeviceData"
+                            v-bind="$attrs"
+                            class="collapse-tree"
+                        >
+                        <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>
+                    </div>
                 </el-collapse-item>
             </el-collapse>
-            <div v-if="treeType == '2'" v-loading="loading">
+            <div v-if="treeType == '2'" class="engineering-tree-wrap" v-loading="loading">
                 <el-tree
-                    :style="{ height: `calc(100vh - 188px - ${props.height}px )` }"
                     ref="treeRef4"
                     :props="defaultProps"
                     highlight-current
                     :filter-node-method="filterNode"
                     node-key="id"
                     v-bind="$attrs"
-                    :data="data"
-                    style="overflow: auto"
+                    :data="props.data"
+                    class="engineering-tree"
                     :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,276 +171,222 @@
 
 <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 } 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 treeType = ref('2')
 const options = [
-    {
-        label: '设备',
-        value: '1'
-    },
-    {
-        label: '工程',
-        value: '2'
-    }
+    { label: '工程', value: '2' },
+    { label: '设备', value: '1' },
 ]
+
 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 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>
+.device-tree-root {
+    display: flex;
+    overflow: hidden;
+    height: 100%;
+    min-height: 0;
+}
+
 .cn-tree {
     flex-shrink: 0;
     display: flex;
@@ -464,7 +394,10 @@ const changeTreeType = (val: string) => {
     box-sizing: border-box;
     padding: 10px;
     height: 100%;
+    min-height: 0;
+    max-height: 100%;
     width: 100%;
+    overflow: hidden;
 
     :deep(.el-tree) {
         border: 1px solid var(--el-border-color);
@@ -474,6 +407,85 @@ const changeTreeType = (val: string) => {
         background-color: var(--el-color-primary-light-7);
     }
 
+    .tree-search {
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+    }
+
+    .device-collapse {
+        flex: 1;
+        min-height: 0;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        border: none;
+
+        :deep(.el-collapse-item) {
+            flex-shrink: 0;
+
+            .el-collapse-item__header {
+                height: 48px;
+                line-height: 48px;
+            }
+
+            &.is-active {
+                flex: 1;
+                min-height: 0;
+                display: flex;
+                flex-direction: column;
+                overflow: hidden;
+
+                .el-collapse-item__wrap {
+                    flex: 1;
+                    min-height: 0;
+                }
+
+                .el-collapse-item__content {
+                    display: flex;
+                    flex-direction: column;
+                    height: 100%;
+                    min-height: 0;
+                    padding-bottom: 0;
+                    box-sizing: border-box;
+                }
+            }
+        }
+    }
+
+    .engineering-tree-wrap {
+        flex: 1;
+        min-height: 0;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .engineering-tree {
+        flex: 1;
+        min-height: 0;
+        overflow: auto;
+    }
+
+    .collapse-tree-panel {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        min-height: 0;
+        height: 100%;
+        overflow: hidden;
+
+        &--govern > .el-select {
+            flex-shrink: 0;
+        }
+    }
+
+    .collapse-tree {
+        flex: 1;
+        min-height: 0;
+        overflow: auto;
+    }
+
     .menu-collapse {
         color: var(--el-color-primary);
     }
@@ -486,4 +498,7 @@ const changeTreeType = (val: string) => {
 :deep(.el-input-group__prepend) {
     background-color: var(--el-fill-color-blank);
 }
+:deep(.is-disabled) {
+    display: none !important;
+}
 </style>

src/components/tree/govern/APFTree.vue

@@ -0,0 +1,169 @@
+<template>
+    <div class="apf-tree">
+        <div class="cn-tree" :style="{ height: `calc(100vh - 125px - ${height}px)` }">
+            <div style="display: flex; align-items: center" class="mb10">
+                <el-input maxlength="32" show-word-limit v-model.trim="filterText" placeholder="请输入内容" clearable>
+                    <template #prefix>
+                        <Icon name="el-icon-Search" style="font-size: 16px" />
+                    </template>
+                </el-input>
+            </div>
+            <el-tree style="flex: 1; overflow: auto" :props="defaultProps" highlight-current
+                :filter-node-method="filterNode" node-key="id" default-expand-all :data="tree" ref="treRef"
+                @node-click="clickNode" :expand-on-click-node="false">
+                <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: 5px">{{ node.label }}</span>
+                    </span>
+                </template>
+            </el-tree>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, nextTick } from 'vue'
+import { ElTree } from 'element-plus'
+import { getUserDevTree } 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 { bootstrapWithTemplate } from './treeCommonUtils'
+import { createTreeFilterNode } from './treeFilterUtils'
+
+interface Props {
+    template?: boolean
+    type?: string
+    height?: number
+}
+
+const props = withDefaults(defineProps<Props>(), { template: false, type: 'apf', height: 0 })
+
+defineOptions({ name: 'govern/APFTree', inheritAttrs: false })
+
+const emit = defineEmits(['init', 'node-click', 'deviceTypeChange', 'Policy'])
+
+const config = useConfig()
+const dictData = useDictData()
+const tree = ref<any[]>([])
+const treRef = ref<InstanceType<typeof ElTree>>()
+const filterText = ref('')
+
+const defaultProps = { children: 'children', label: 'governName', value: 'id' }
+const decorators = createLineTreeDecorators(() => config.getColorVal('elementUiPrimary'))
+const filterNode = createTreeFilterNode()
+
+watch(filterText, val => treRef.value?.filter(val))
+
+/** 将 { 用户名: 设备[] | null } 转为两级树 */
+function transformUserDevTree(data: Record<string, any[] | null>) {
+    const nodes: any[] = []
+    const devices: any[] = []
+    const { primary, statusColor, applyMeta } = decorators
+
+    if (!data || typeof data !== 'object') {
+        return { nodes, devices }
+    }
+
+    Object.entries(data).forEach(([userName, deviceList]) => {
+        const hasDevices = Array.isArray(deviceList) && deviceList.length > 0
+        const userId = hasDevices ? deviceList[0]?.monitorUser || userName : `apf-user-${userName}`
+
+        const children = hasDevices
+            ? deviceList.map((device: any) => {
+                const node = {
+                    ...device,
+                    level: 2,
+                    pid: userId,
+                    pname: userName,
+                   
+                }
+                applyMeta(node, {
+                    icon: 'el-icon-Document',
+                    color: primary(), 
+                })
+                devices.push(node)
+                return node
+            })
+            : undefined
+
+        const userNode: any = {
+            id: userId,
+            governName: userName,
+            level: 1,
+            ...(children ? { children } : {})
+        }
+        applyMeta(userNode, { icon: 'el-icon-User', color: primary(), disabled: true })
+        nodes.push(userNode)
+    })
+
+    return { nodes, devices }
+}
+
+async function selectFirstDevice(devices: any[]) {
+    const node = devices[0]
+    if (!node) {
+        emit('init', { ...node })
+        return
+    }
+
+    await nextTick()
+    treRef.value?.setCurrentKey(node.id)
+    emit('init', { level: 2, ...node })
+}
+
+async function loadTree() {
+    tree.value = []
+    const res = await getUserDevTree({ type: props.type })
+    const { nodes, devices } = transformUserDevTree(res.data)
+    tree.value = nodes
+    await selectFirstDevice(devices)
+}
+
+const clickNode = (node: any) => {
+    if (node?.children?.length) return
+    emit('node-click', node)
+}
+
+bootstrapWithTemplate(
+    props.template,
+    loadTree,
+    () => querySysExcel({ id: dictData.state.area[0]?.id }),
+    data => emit('Policy', data)
+)
+
+watch(() => props.type, () => {
+    loadTree()
+})
+</script>
+
+<style lang="scss" scoped>
+.apf-tree {
+    width: 280px;
+    flex-shrink: 0;
+}
+
+.cn-tree {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    padding: 10px;
+
+    overflow-y: auto;
+
+    :deep(.el-tree) {
+        border: 1px solid var(--el-border-color);
+    }
+
+    :deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
+        background-color: var(--el-color-primary-light-7);
+    }
+
+    .custom-tree-node {
+        display: flex;
+    }
+}
+</style>

src/components/tree/govern/analyzeTree.vue

@@ -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', { ...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>

src/components/tree/govern/cloudDeviceEntryTree.vue

@@ -1,6 +1,7 @@
 <template>
     <Tree
         ref="treRef"
+        
         :width="width"
         :showPush="props.showPush"
         :expand-on-click-node="false"
@@ -11,102 +12,70 @@
 </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, {
+        onSelect: selected => {
+            emit('init', { ...selected, level: selected.level ?? 3 })
+            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>

src/components/tree/govern/cloudDeviceEntryTreeZL.vue

@@ -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>

src/components/tree/govern/csLedgerLineTree.vue

@@ -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>

src/components/tree/govern/deviceInfoTree.vue

@@ -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', { ...selected, level: 2 })
+    })
+}
+
+getDeviceTree().then(res => initTree(res.data))
+
+const getTreeList = (list: any[]) => initTree(list)
+
+const handleCheckChange = (data: any) => {
+    emit('checkChange', { data })
+}
+
+defineExpose({ getTreeList })
+</script>

src/components/tree/govern/deviceTree.vue

@@ -1,216 +1,85 @@
 <template>
-    <Tree
-        ref="treRef"
-        @check-change="handleCheckChange"
-        :default-checked-keys="defaultCheckedKeys"
-        :show-checkbox="props.showCheckbox"
-        :data="tree"
-        :height="props.height"
-        @changeDeviceType="changeDeviceType"
-        @changeTreeType="info"
-        :engineering="props.engineering"
-    />
+    <Tree ref="treRef" @check-change="handleCheckChange" :default-checked-keys="defaultCheckedKeys" default-expand-all
+        :show-checkbox="props.showCheckbox" :data="tree" :height="props.height" @changeDeviceType="changeDeviceType"
+        @changeTreeType="loadTree" :engineering="props.engineering" leaf-mode="device" />
 </template>
 
 <script lang="ts" setup>
-import { ref, nextTick } from 'vue'
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { debounce } from 'lodash-es'
 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) => {
+const tree = ref<any[]>([])
+const treRef = ref<InstanceType<typeof Tree>>()
+const decorators = createLineTreeDecorators(() => config.getColorVal('elementUiPrimary'))
+
+const changeDeviceType = debounce((val: any, obj: any) => {
     emit('deviceTypeChange', val, obj)
-}
+}, 300)
 
-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)
-                            })
-                        })
-                    })
-                }
-            }
-        })
-        tree.value = res.data
+onBeforeUnmount(() => changeDeviceType.cancel())
 
-        nextTick(() => {
-            setTimeout(() => {
-                if (type == '2') {
-                    //初始化选中
+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 }
+            ]
 
-                    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)
-        })
-    })
-}
-
-onMounted(() => {
-    info(props.engineering ? '2' : '1')
-})
-
-throttle(
-    (data: any, checked: any, indeterminate: any) => {
-        emit('checkChange', {
-            data,
-            checked,
-            indeterminate
-        })
-    },
-    300,
-    {
-        leading: true, // 首次触发立即执行（可选，默认 true）
-        trailing: false // 节流结束后是否执行最后一次（可选，默认 true，根据需求调整）
+    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', { ...node })
+        return
     }
-)
+    emit('init')
+}
 
-const handleCheckChange = (data: any, checked: any, indeterminate: any) => {
-    emit('checkChange', {
-        data,
-        checked,
-        indeterminate
+const loadTree = (type?: string) => {
+    getDeviceTree({ type: type === '2' ? 'engineering' : '' }).then(res => {
+        const leaves = decorateDeviceTree(res.data, type, decorators)
+        tree.value = res.data
+        selectInitialNode(type, leaves)
     })
 }
-defineExpose({
-    treRef
-})
+
+onMounted(() => loadTree( '2' ))
+
+const handleCheckChange =
+    (data: any, checked: any, indeterminate: any) => {
+        emit('checkChange', { data, checked, indeterminate })
+    }
+
+defineExpose({ treRef })
 </script>

src/components/tree/govern/deviceTreeUtils.ts

@@ -0,0 +1,228 @@
+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)
+                })
+               l3.children?.forEach((l4: any) => {
+                applyMeta(l4, {
+                    icon: 'local-监测点',
+                    color: statusColor(l4.comFlag)
+                })
+                leaves.push(l4)
+               })
+            })
+        })
+    })
+
+    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
+}

src/components/tree/govern/getMarketList.vue

@@ -1,29 +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'
-            }
-        })
-        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>

src/components/tree/govern/lineTreeUtils.ts

@@ -0,0 +1,208 @@
+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; pname?: string }
+    ) => void
+}
+
+export function createLineTreeDecorators(getPrimaryColor: () => string): LineTreeDecorators {
+    const offlineColor = '#e26257 !important'
+    // const statusColor = (comFlag: number) => (comFlag === 2 ? getPrimaryColor() : offlineColor)
+    const statusColor = (comFlag: number) => (comFlag === 2 ? '#2ab914' : 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 const LINE_LEAF_META = { level: 3, type: 'line' as const }
+
+/** 是否为线路树可选叶子（监测点/线路） */
+export function isLineTreeLeaf(node: any): boolean {
+    if (!node?.id) return false
+    return node.type === 'line' || node.level === 3
+}
+
+/** 是否为报告/导出可选监测点 */
+export function isReportMonitorPoint(node: any): boolean {
+    if (!node?.id) return false
+    return isLineTreeLeaf(node) || node.level === 3 || (!node.children?.length && !!node.pid)
+}
+
+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: 'local-监测点',
+                            color: statusColor(leaf.comFlag),
+
+                            ...LINE_LEAF_META
+                        })
+                        ;(leaf.pname = item.name), 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: 'local-监测点',
+                                color: statusColor(l4.comFlag),
+
+                                ...LINE_LEAF_META
+                            })
+                            ;(l4.pname = item.name), (l4.devConType = l3.devConType), leaves.govern.push(l4)
+                        })
+                    })
+                })
+            })
+        } else if (item.name === '便携式设备') {
+            item.pname = item.name
+            item.children?.forEach((l1: any) => {
+               
+                applyMeta(l1, { icon: 'el-icon-Platform', color: statusColor(l1.comFlag) })
+                l1.pname = item.name
+                l1.children?.forEach((l2: any) => {
+                    applyMeta(l2, {
+                        icon: 'local-监测点',
+                        color: statusColor(l2.comFlag),
+
+                        ...LINE_LEAF_META
+                    })
+                    ;(l2.pname = item.name), (l2.devConType = l1.devConType), 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: 'local-监测点',
+                                color: statusColor(l4.comFlag),
+
+                                ...LINE_LEAF_META
+                            })
+                            ;(l4.pname = item.name), (l4.devConType = l3.devConType), 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
+}

src/components/tree/govern/officialUserTree.vue

@@ -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>

src/components/tree/govern/pointTree.vue

@@ -1,208 +1,102 @@
 <template>
-    <Tree
-        ref="treRef"
-        :width="width"
-        :data="tree"
-        default-expand-all
-        @changePointType="changePointType"
-        @changeTreeType="info"
-    />
+    <Tree ref="treRef" :width="width" :data="tree" default-expand-all @changePointType="changePointType"
+        @changeTreeType="loadTree" :height="height" />
 </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
+    height?: number
 }
+
 const props = withDefaults(defineProps<Props>(), {
-    template: false
+    template: false,
+    height: 0
 })
+
 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', { ...node })
+
+        if (type === '2') {
+            changePointType('4', node)
+        }
+        return
+    }
+
+    emit('init')
 }
-onMounted(() => {})
+
+const loadTree = (type?: string) => {
+    // console.log("🚀 ~ loadTree ~ type:", type)
+    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('2')
+            })
+            .catch(() => loadTree())
+    } else {
+
+
+        loadTree('2')
+    }
+}
+
+bootstrap()
+
+defineExpose({ treRef })
 </script>

src/components/tree/govern/pointTreeWx.vue

@@ -3,7 +3,7 @@
         <div style="transition: all 0.3s; overflow: hidden; height: 100%">
             <div class="cn-tree">
                 <div style="display: flex; align-items: center" class="mb10">
-                    <el-input maxlength="32" v-model.trim="filterText" placeholder="请输入内容" clearable>
+                    <el-input maxlength="32" show-word-limit   v-model.trim="filterText" placeholder="请输入内容" clearable>
                         <template #prefix>
                             <Icon name="el-icon-Search" style="font-size: 16px" />
                         </template>
@@ -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,84 @@
 </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', 'node-click', 'editNode', 'getChart', 'Policy'])
 
-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[] = []
+const tree = ref<any[]>([])
+const treRef = ref<InstanceType<typeof ElTree>>()
+const filterText = ref('')
+const id = ref<string | null>(null)
+const planId = ref('')
 
-        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 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)
+    emit('node-click', 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;

src/components/tree/govern/selectTree.vue

@@ -1,105 +1,72 @@
 <template>
-    <Tree ref="treRef" :width="width" :data="tree" default-expand-all  @checkedNodesChange="handleCheckedNodesChange"/>
+    <Tree ref="treRef" :width="width" :data="tree" :expand-on-click-node="false" 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)
+
+function markPortableNoCheckbox(node: any) {
+    node.noCheckbox = true
+    node.children?.forEach(markPortableNoCheckbox)
+}
+
+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 === '监测设备'||item.name === '便携式设备'))
+
+    const monitorRoot = res.data.find((item: any) => item.name === '监测设备')
+    const portableRoot = res.data.find((item: any) => item.name === '便携式设备')
+
+    if (portableRoot) {
+        markPortableNoCheckbox(portableRoot)
+    }
+
+    tree.value = [monitorRoot, portableRoot].filter(Boolean)
+    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>

src/components/tree/govern/treeCommonUtils.ts

@@ -0,0 +1,74 @@
+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)
+    if (!treeInstance) return false
+
+    await nextTick()
+    expandTreeNodePath(treeInstance, node.id)
+    treeInstance.setCurrentKey(node.id)
+    options?.onSelect?.(node)
+    return true
+}
+
+/** 展开到目标节点的全部祖先，保证深层节点可见 */
+export function expandTreeNodePath(treeInstance: any, nodeId: string) {
+    const target = treeInstance.getNode?.(nodeId)
+    if (!target) return
+
+    let parent = target.parent
+    while (parent && parent.level > 0) {
+        parent.expanded = true
+        parent = parent.parent
+    }
+}
+
+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 }))
+}

src/components/tree/govern/treeFilterUtils.ts

@@ -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)
+}

src/components/tree/index.vue

@@ -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" show-word-limit 
+                    
+                    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,overflowY: 'auto' }"
                 :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,158 @@
 <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',
+    width: '270px',
     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 {
+    // width: 280px;
     display: flex;
     flex-direction: column;
-    box-sizing: border-box;
-    // padding: 10px;
+    overflow: hidden;
     height: 100%;
+    width: 270px;
+    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>

src/components/tree/point.vue

@@ -1,165 +1,101 @@
 <!-- 设备监控使用折叠面板渲染多个tree -->
 <template>
-    <div :style="{ width: menuCollapse ? '40px' : props.width }" style="display: flex; overflow: hidden">
-        <Icon
+    <div :style="{ width: menuCollapse ? '40px' : props.width }" class="point-tree-root">
+        <!-- <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>
+            <div class="tree-search mb10">
+                <el-input v-model.trim="filterText" placeholder="请输入内容" clearable>
                     <template #prepend>
                         <el-select v-model="treeType" @change="changeTreeType" style="min-width: 75px">
-                            <el-option
-                                v-for="item in options"
-                                :key="item.value"
-                                :label="item.label"
-                                :value="item.value"
-                            />
+                            <el-option v-for="item in options" :key="item.value" :label="item.label"
+                                :value="item.value" />
                         </el-select>
                     </template>
                     <template #prefix>
                         <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"
-                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-select>
-
-                    <el-tree
-                        :style="{ height: treeType.length != 0 ? 'calc(100vh - 380px)' : 'calc(100vh - 278px)' }"
-                        ref="treeRef1"
-                        :props="defaultProps"
-                        highlight-current
-                        :filter-node-method="filterNode"
-                        node-key="id"
-                        v-bind="$attrs"
-                        :data="zlDevList"
-                        style="overflow: auto"
-                        :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>
-                            </span>
-                        </template>
-                    </el-tree>
+            <el-collapse :accordion="true" v-model="activeName" class="device-collapse" @change="changeDevice"
+                v-if="treeType == '1'" v-loading="loading">
+                <el-collapse-item title="治理设备" name="0" v-if="zlDeviceData.length">
+                    <div class="collapse-tree-panel collapse-tree-panel--govern">
+                        <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 ref="treeRef1" :props="defaultProps" highlight-current :filter-node-method="filterNode"
+                            node-key="id" v-bind="$attrs" :data="zlDevList" class="collapse-tree"
+                            :default-expand-all="false">
+                            <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>
+                    </div>
                 </el-collapse-item>
-                <el-collapse-item title="便携式设备" name="1" v-if="bxsDeviceData.length != 0">
-                    <el-tree
-                        :style="{ height: zlDeviceData.length != 0 ? 'calc(100vh - 340px)' : 'calc(100vh - 238px)' }"
-                        ref="treeRef2"
-                        :props="defaultProps"
-                        highlight-current
-                        :default-expand-all="false"
-                        :filter-node-method="filterNode"
-                        node-key="id"
-                        :data="bxsDeviceData"
-                        v-bind="$attrs"
-                        style="overflow: auto"
-                    >
-                        <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>
-                            </span>
-                        </template>
-                    </el-tree>
+                <el-collapse-item title="便携式设备" name="1" v-if="bxsDeviceData.length">
+                    <div class="collapse-tree-panel">
+                        <el-tree ref="treeRef2" :props="defaultProps" highlight-current :default-expand-all="false"
+                            :filter-node-method="filterNode" node-key="id" :data="bxsDeviceData" v-bind="$attrs"
+                            class="collapse-tree">
+                            <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>
+                    </div>
                 </el-collapse-item>
-                <el-collapse-item title="监测设备" name="2" v-if="yqfDeviceData.length != 0">
-                    <el-tree
-                        :style="{ height: zlDeviceData.length != 0 ? 'calc(100vh - 340px)' : 'calc(100vh - 238px)' }"
-                        ref="treeRef3"
-                        :props="defaultProps"
-                        highlight-current
-                        :default-expand-all="false"
-                        :filter-node-method="filterNode"
-                        node-key="id"
-                        :data="yqfDeviceData"
-                        v-bind="$attrs"
-                        style="overflow: auto"
-                    >
-                        <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>
-                            </span>
-                        </template>
-                    </el-tree>
+                <el-collapse-item title="监测设备" name="2" v-if="yqfDeviceData.length">
+                    <div class="collapse-tree-panel">
+                        <el-tree ref="treeRef3" :props="defaultProps" highlight-current :default-expand-all="false"
+                            :filter-node-method="filterNode" node-key="id" :data="yqfDeviceData" v-bind="$attrs"
+                            class="collapse-tree">
+                            <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>
+                    </div>
                 </el-collapse-item>
             </el-collapse>
-            <div v-if="treeType == '2'" v-loading="loading">
-                <el-tree
-                    :style="{ height: 'calc(100vh - 188px)' }"
-                    class="pt10"
-                    ref="treeRef4"
-                    :props="defaultProps"
-                    highlight-current
-                    :filter-node-method="filterNode"
-                    node-key="id"
-                    v-bind="$attrs"
-                    :data="data"
-                    style="overflow: auto"
-                    :default-expand-all="false"
-                >
-                    <template #default="{ node, data }">
+            <div v-if="treeType == '2'" class="engineering-tree-wrap" v-loading="loading">
+                <el-tree class="engineering-tree pt10 collapse-tree" ref="treeRef4" :props="defaultProps"
+                    highlight-current :filter-node-method="filterNode" node-key="id" v-bind="$attrs" :data="props.data"
+                    :default-expand-all="false">
+                    <template #default="{ node, data: nodeData }">
                         <span class="custom-tree-node">
-                            <Icon
-                                :name="data.icon"
-                                style="font-size: 16px"
-                                :style="{ color: data.color }"
-                                v-if="data.icon"
-                            />
+                            <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>
@@ -171,312 +107,228 @@
 
 <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 } 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[]
+    height?: number
 }
 
 const props = withDefaults(defineProps<Props>(), {
     width: '100%',
     canExpand: true,
     type: '',
-    data: []
+    data: () => [],
+    height: 0
 })
-const process = ref('')
+
 const route = useRoute()
 const { proxy } = useCurrentInstance()
+
+const treeType = ref('2')
+const options = [
+    { label: '工程', value: '2' },
+    { label: '设备', value: '1' },
+]
+
 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)
-                    })
-                }
-            })
+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 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 = []
+    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 ?? []
         }
-    },
-    {
-        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)
-    }
-})
-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)))
-    }
-
-    setTimeout(() => {
-        changeDevice(activeName.value)
-    }, 0)
-})
-
-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)
-                })
-            })
-        })
     })
-    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>
 
 <style lang="scss" scoped>
+:deep(.el-tree-node) {
+    white-space: none;
+}
+
+.point-tree-root {
+    display: flex;
+    overflow: hidden;
+    height: 100%;
+    min-height: 0;
+}
+
 .cn-tree {
     flex-shrink: 0;
     display: flex;
@@ -484,8 +336,11 @@ const changeTreeType = (val: string) => {
     box-sizing: border-box;
     padding: 10px;
     height: 100%;
+    min-height: 0;
+    max-height: 100%;
     width: 280px;
     background: #fff;
+    overflow: hidden;
 
     :deep(.el-tree) {
         border: 1px solid var(--el-border-color);
@@ -495,6 +350,85 @@ const changeTreeType = (val: string) => {
         background-color: var(--el-color-primary-light-7);
     }
 
+    .tree-search {
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+    }
+
+    .device-collapse {
+        flex: 1;
+        min-height: 0;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        border: none;
+
+        :deep(.el-collapse-item) {
+            flex-shrink: 0;
+
+            .el-collapse-item__header {
+                height: 48px;
+                line-height: 48px;
+            }
+
+            &.is-active {
+                flex: 1;
+                min-height: 0;
+                display: flex;
+                flex-direction: column;
+                overflow: hidden;
+
+                .el-collapse-item__wrap {
+                    flex: 1;
+                    min-height: 0;
+                }
+
+                .el-collapse-item__content {
+                    display: flex;
+                    flex-direction: column;
+                    height: 100%;
+                    min-height: 0;
+                    padding-bottom: 0;
+                    box-sizing: border-box;
+                }
+            }
+        }
+    }
+
+    .engineering-tree-wrap {
+        flex: 1;
+        min-height: 0;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .engineering-tree {
+        flex: 1;
+        min-height: 0;
+        overflow: auto;
+    }
+
+    .collapse-tree-panel {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        min-height: 0;
+        height: 100%;
+        overflow: hidden;
+
+        &--govern>.el-select {
+            flex-shrink: 0;
+        }
+    }
+
+    .collapse-tree {
+        flex: 1;
+        min-height: 0;
+        overflow: auto;
+    }
+
     .menu-collapse {
         color: var(--el-color-primary);
     }
@@ -504,7 +438,9 @@ const changeTreeType = (val: string) => {
     display: flex;
     align-items: center;
 }
+
 :deep(.el-input-group__prepend) {
     background-color: var(--el-fill-color-blank);
 }
+
 </style>

src/components/tree/select.vue

@@ -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" show-word-limit   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,14 @@
     </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'
+import { isLineTreeLeaf } from './govern/lineTreeUtils'
 
-defineOptions({
-    name: 'govern/tree'
-})
+defineOptions({ name: 'govern/select', inheritAttrs: false })
 
 interface Props {
     width?: string
@@ -57,174 +65,71 @@ 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'
+    value: 'id',
+    class: (data: any) => (data.noCheckbox ? 'is-no-checkbox' : '')
 }
-const emit = defineEmits(['changePointType', 'checkedNodesChange'])
+const filterNode = createTreeFilterNode()
+const checkedNodes = ref<any[]>([])
+const defaultCheckedKeys = ref<string[]>([])
+const MAX_CHECK = 5
+
+const isMonitorLeaf = (node: any) => isLineTreeLeaf(node)
+
+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(isMonitorLeaf)
 
-// 过滤父节点 / 子节点 (如果输入的参数是父节点且能匹配，则返回该节点以及其下的所有子节点；如果参数是子节点，则返回该节点的父节点。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 (isMonitorLeaf(node.data)) {
+            node.data.disabled = isMaxSelected && !node.checked
         }
     })
 }
@@ -233,8 +138,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;
@@ -252,6 +156,10 @@ defineExpose({ treeRef })
         background-color: var(--el-color-primary-light-7);
     }
 
+    :deep(.el-tree-node.is-no-checkbox > .el-tree-node__content .el-checkbox) {
+        display: none;
+    }
+
     .menu-collapse {
         color: var(--el-color-primary);
     }

src/components/wangEditor/index.vue

@@ -1,74 +1,136 @@
-<template>
-    <div style='border: 1px solid #e4e4e4;height: 100%'>
-        <Toolbar
-            style='border-bottom: 1px solid #e4e4e4;border-top: 1px solid #e4e4e4'
-            :editor='editorRef'
-            :defaultConfig='toolbarConfig'
-            mode='default'
-        />
-        <Editor
-            v-bind='$attrs'
-            :defaultConfig='editorConfig'
-            mode='default'
-            @onCreated='handleCreated'
-            style='height: calc(100% - 42px); '
-        />
-    </div>
-</template>
-<script lang='ts' setup>
-import '@wangeditor/editor/dist/css/style.css' // 引入 css
-
-import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
-import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
-// 编辑器实例，必须用 shallowRef
-const editorRef = shallowRef()
-
-// 内容 HTML
-const valueHtml = ref('<p>hello</p>')
-
-// 模拟 ajax 异步获取内容
-onMounted(() => {
-    setTimeout(() => {
-        valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
-    }, 1500)
-})
-
-const toolbarConfig = {
-    excludeKeys: ['fullScreen', 'emotion']
-}
-let sever = '/cs-harmonic-boot/csconfiguration/uploadImage'
-// 本地加api
-if (process.env.NODE_ENV === 'development') {
-    sever = '/api' + sever
-}
-const editorConfig = {
-    placeholder: '请输入内容...',
-    MENU_CONF: {
-        uploadImage: {
-            server: sever,
-            fieldName: 'file',
-            compress: true,
-            uploadFileName: 'file',
-            withCredentials: true,
-            headers: {},
-            timeout: 0,
-            customInsert: (insertImg, result, editor) => {
-                const url = result.data.url
-                insertImg(url)
-            }
-        }
-    }
-}
-
-// 组件销毁时，也及时销毁编辑器
-onBeforeUnmount(() => {
-    const editor = editorRef.value
-    if (editor == null) return
-    editor.destroy()
-})
-
-const handleCreated = (editor) => {
-    editorRef.value = editor // 记录 editor 实例，重要！
-}
-
-</script>
+<template>
+    <div style="border: 1px solid #e4e4e4; height: 100%">
+        <Toolbar
+            style="border-bottom: 1px solid #e4e4e4; border-top: 1px solid #e4e4e4"
+            :editor="editorRef"
+            :defaultConfig="toolbarConfig"
+            mode="default"
+        />
+        <Editor
+            v-model="innerHtml"
+            :defaultConfig="editorConfig"
+            mode="default"
+            @onCreated="handleCreated"
+            @onChange="handleChange"
+            style="height: calc(100% - 42px)"
+        />
+    </div>
+</template>
+
+<script lang="ts" setup>
+import '@wangeditor/editor/dist/css/style.css'
+
+import { nextTick, onBeforeUnmount, ref, shallowRef, watch } from 'vue'
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+
+const props = withDefaults(defineProps<{ modelValue?: string | null }>(), {
+    modelValue: ''
+})
+
+const emit = defineEmits<{
+    'update:modelValue': [value: string]
+}>()
+
+const editorRef = shallowRef<any>()
+const innerHtml = ref('<p><br></p>')
+const isApplyingExternal = ref(false)
+
+/** 清理 HTML，避免标签间空白文本节点导致 Slate 解析失败 */
+function sanitizeEditorHtml(html: string | null | undefined): string {
+    if (html == null || html === '') return '<p><br></p>'
+    const cleaned = html
+        .replace(/>\s+</g, '><')
+        .replace(/(<\/li>)\s+(<li>)/g, '$1$2')
+        .trim()
+    return cleaned || '<p><br></p>'
+}
+
+function toSaveHtml(html: string): string {
+    return html === '<p><br></p>' ? '' : html
+}
+
+function applyHtmlToEditor(html: string | null | undefined) {
+    const content = sanitizeEditorHtml(html)
+    const editor = editorRef.value
+    if (!editor || editor.isDestroyed) return
+
+    try {
+        const current = editor.getHtml()
+        if (current === content) return
+    } catch {
+        // ignore getHtml error on half-destroyed editor
+    }
+
+    isApplyingExternal.value = true
+    try {
+        editor.setHtml(content)
+        innerHtml.value = content
+    } catch {
+        try {
+            editor.setHtml('<p><br></p>')
+            innerHtml.value = '<p><br></p>'
+        } catch {
+            // editor may already be destroyed
+        }
+    } finally {
+        nextTick(() => {
+            isApplyingExternal.value = false
+        })
+    }
+}
+
+watch(
+    () => props.modelValue,
+    val => {
+        applyHtmlToEditor(val)
+    }
+)
+
+const toolbarConfig = {
+    excludeKeys: ['fullScreen', 'emotion']
+}
+
+let sever = '/cs-harmonic-boot/csconfiguration/uploadImage'
+if (process.env.NODE_ENV === 'development') {
+    sever = '/api' + sever
+}
+
+const editorConfig = {
+    placeholder: '请输入内容...',
+    MENU_CONF: {
+        uploadImage: {
+            server: sever,
+            fieldName: 'file',
+            compress: true,
+            uploadFileName: 'file',
+            withCredentials: true,
+            headers: {},
+            timeout: 0,
+            customInsert: (insertImg: (url: string) => void, result: { data: { url: string } }) => {
+                insertImg(result.data.url)
+            }
+        }
+    }
+}
+
+onBeforeUnmount(() => {
+    const editor = editorRef.value
+    editorRef.value = undefined
+    if (editor == null || editor.isDestroyed) return
+    editor.destroy()
+})
+
+const handleCreated = (editor: any) => {
+    editorRef.value = editor
+    nextTick(() => {
+        applyHtmlToEditor(props.modelValue)
+    })
+}
+
+const handleChange = (editor: { getHtml: () => string }) => {
+    if (isApplyingExternal.value) return
+    const html = editor.getHtml()
+    innerHtml.value = html
+    emit('update:modelValue', toSaveHtml(html))
+}
+</script>

src/config/dialog.ts

@@ -0,0 +1,125 @@
+/**
+ * 系统弹框尺寸配置（大 / 中 / 小）
+ * 修改此处即可全局统一弹框宽度与默认行为
+ */
+export interface DialogPreset {
+    width: string
+    maxWidth: string
+    minWidth: string
+    closeOnClickModal: boolean
+    draggable: boolean
+    class: string
+}
+
+export const dialogSmall: DialogPreset = {
+    width: '26vw',
+    maxWidth: '500px',
+    minWidth: '300px',
+    closeOnClickModal: false,
+    draggable: true,
+    class: 'dialog-small'
+}
+
+export const dialogMiddle: DialogPreset = {
+    width: '42vw',
+    maxWidth: '800px',
+    minWidth: '600px',
+    closeOnClickModal: false,
+    draggable: true,
+    class: 'dialog-middle'
+}
+
+export const dialogBig: DialogPreset = {
+    width: '62vw',
+    maxWidth: '1200px',
+    minWidth: '800px',
+    closeOnClickModal: false,
+    draggable: true,
+    class: 'dialog-big'
+}
+
+export const DIALOG_PRESETS = {
+    small: dialogSmall,
+    middle: dialogMiddle,
+    big: dialogBig
+} as const
+
+export type DialogSize = keyof typeof DIALOG_PRESETS
+
+export function getDialogPreset(size: DialogSize = 'small'): DialogPreset {
+    return DIALOG_PRESETS[size]
+}
+
+export function getDialogWidth(size: DialogSize = 'small'): string {
+    return DIALOG_PRESETS[size].width
+}
+
+/** 将配置同步到 CSS 变量，供全局样式使用 */
+export function applyDialogCssVars(): void {
+    ;(Object.keys(DIALOG_PRESETS) as DialogSize[]).forEach(size => {
+        const preset = DIALOG_PRESETS[size]
+        document.documentElement.style.setProperty(`--cn-dialog-width-${size}`, preset.width)
+        document.documentElement.style.setProperty(`--cn-dialog-max-width-${size}`, preset.maxWidth)
+        document.documentElement.style.setProperty(`--cn-dialog-min-width-${size}`, preset.minWidth)
+    })
+}
+
+/**
+ * 根据原有 width 推断弹框尺寸（兼容现有 el-dialog 的 width 写法）
+ */
+export function resolveDialogSize(width: string | number): DialogSize {
+    const raw = String(width).trim().toLowerCase()
+
+    if (raw.endsWith('%')) {
+        const percent = parseFloat(raw)
+        if (Number.isNaN(percent)) return 'small'
+        if (percent >= 60) return 'big'
+        if (percent >= 40) return 'middle'
+        return 'small'
+    }
+
+    if (raw.endsWith('vw')) {
+        const vw = parseFloat(raw)
+        if (Number.isNaN(vw)) return 'middle'
+        if (vw >= 55) return 'big'
+        if (vw >= 35) return 'middle'
+        return 'small'
+    }
+
+    const numeric = parseFloat(raw.replace(/px/g, ''))
+    if (Number.isNaN(numeric)) return 'small'
+    if (numeric >= 850) return 'big'
+    if (numeric >= 550) return 'middle'
+    return 'small'
+}
+
+/** 无 width 时根据 class 推断尺寸 */
+export function resolveDialogSizeByClass(classValue: unknown): DialogSize {
+    const classStr = normalizeClass(classValue)
+
+    if (classStr.includes('dialog-big')) return 'big'
+    if (classStr.includes('dialog-middle')) return 'middle'
+    if (classStr.includes('dialog-small')) return 'small'
+
+    if (classStr.includes('transient-filter-dialog')) return 'small'
+    if (classStr.includes('cn-operate-dialog')) return 'small'
+
+    if (classStr.includes('device-manage-popup') || classStr.includes('analysisList')) {
+        return 'big'
+    }
+
+    return 'middle'
+}
+
+function normalizeClass(classValue: unknown): string {
+    if (!classValue) return ''
+    if (typeof classValue === 'string') return classValue
+    if (Array.isArray(classValue)) return classValue.filter(Boolean).join(' ')
+    if (typeof classValue === 'object') {
+        return Object.entries(classValue as Record<string, boolean>)
+            .filter(([, active]) => active)
+            .map(([name]) => name)
+            .join(' ')
+    }
+    return String(classValue)
+}

src/layouts/admin/components/config.vue

@@ -63,7 +63,7 @@
                                     :model-value="configStore.getColorVal('menuTopBarBackground')" />
                             </el-form-item>
                             <el-form-item label="侧边菜单宽度(展开时)">
-                                <el-input maxlength="32" show-word-limit @input="onCommitState($event, 'menuWidth')"
+                                <el-input maxlength="32" show-word-limit    @input="onCommitState($event, 'menuWidth')"
                                     type="number" :step="10" :model-value="configStore.layout.menuWidth">
                                     <template #append>px</template>
                                 </el-input>

src/layouts/admin/components/logo.vue

@@ -1,79 +1,79 @@
-<template>
-    <div class="layout-logo">
-        <img v-if="!config.layout.menuCollapse" class="logo-img" :src="getTheme.logoUrl" />
-        <!--        <div-->
-        <!--            v-if="!config.layout.menuCollapse"-->
-        <!--            :style="{ color: config.getColorVal('menuActiveColor') }"-->
-        <!--            class="website-name"-->
-        <!--        >-->
-        <!--            灿能-->
-        <!--        </div>-->
-        <Icon
-            v-if="config.layout.layoutMode != 'Streamline'"
-            @click="onMenuCollapse"
-            :name="config.layout.menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
-            :class="config.layout.menuCollapse ? 'unfold' : ''"
-            :color="config.getColorVal('menuActiveColor')"
-            style="margin: 15px;"
-            size="18"
-            class="fold"
-        />
-    </div>
-</template>
-
-<script setup lang="ts">
-import { useConfig } from '@/stores/config'
-import { closeShade } from '@/utils/pageShade'
-import { Session } from '@/utils/storage'
-import { setNavTabsWidth } from '@/utils/layout'
-
-const config = useConfig()
-const getTheme = JSON.parse(window.localStorage.getItem('getTheme') as string)
-const onMenuCollapse = function () {
-    if (config.layout.shrink && !config.layout.menuCollapse) {
-        closeShade()
-    }
-
-    config.setLayout('menuCollapse', !config.layout.menuCollapse)
-
-    // 等待侧边栏动画结束后重新计算导航栏宽度
-    setTimeout(() => {
-        setNavTabsWidth()
-    }, 350)
-}
-</script>
-
-<style scoped lang="scss">
-.layout-logo {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    padding: 5px 10px;
-    background: v-bind(
-        'config.layout.layoutMode != "Streamline" ?  config.getColorVal("menuTopBarBackground"):"transparent"'
-    );
-}
-.logo-img {
-    height: 50px;
-    object-fit: cover;
-    margin: auto;
-}
-.website-name {
-    display: block;
-    width: 180px;
-    padding-left: 4px;
-    font-size: var(--el-font-size-extra-large);
-    font-weight: 600;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-.fold {
-    margin-left: auto;
-}
-.unfold {
-    margin: 0 auto;
-}
-</style>
+<template>
+    <div class="layout-logo">
+        <img v-if="!config.layout.menuCollapse && getTheme.logoUrl" class="logo-img" :src="getTheme.logoUrl" />
+        <!--        <div-->
+        <!--            v-if="!config.layout.menuCollapse"-->
+        <!--            :style="{ color: config.getColorVal('menuActiveColor') }"-->
+        <!--            class="website-name"-->
+        <!--        >-->
+        <!--            灿能-->
+        <!--        </div>-->
+        <Icon
+            v-if="config.layout.layoutMode != 'Streamline'"
+            @click="onMenuCollapse"
+            :name="config.layout.menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
+            :class="config.layout.menuCollapse ? 'unfold' : ''"
+            :color="config.getColorVal('menuActiveColor')"
+            style="margin: 15px;"
+            size="18"
+            class="fold"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useConfig } from '@/stores/config'
+import { closeShade } from '@/utils/pageShade'
+import { getStoredTheme } from '@/utils/storage'
+import { setNavTabsWidth } from '@/utils/layout'
+
+const config = useConfig()
+const getTheme = getStoredTheme()
+const onMenuCollapse = function () {
+    if (config.layout.shrink && !config.layout.menuCollapse) {
+        closeShade()
+    }
+
+    config.setLayout('menuCollapse', !config.layout.menuCollapse)
+
+    // 等待侧边栏动画结束后重新计算导航栏宽度
+    setTimeout(() => {
+        setNavTabsWidth()
+    }, 350)
+}
+</script>
+
+<style scoped lang="scss">
+.layout-logo {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    padding: 5px 10px;
+    background: v-bind(
+        'config.layout.layoutMode != "Streamline" ?  config.getColorVal("menuTopBarBackground"):"transparent"'
+    );
+}
+.logo-img {
+    height: 50px;
+    object-fit: cover;
+    margin: auto;
+}
+.website-name {
+    display: block;
+    width: 180px;
+    padding-left: 4px;
+    font-size: var(--el-font-size-extra-large);
+    font-weight: 600;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.fold {
+    margin-left: auto;
+}
+.unfold {
+    margin: 0 auto;
+}
+</style>

src/layouts/admin/components/navBar/classic.vue

@@ -1,111 +1,112 @@
-<template>
-    <div class="nav-bar">
-        <div v-if="config.layout.shrink && config.layout.menuCollapse" class="unfold">
-            <Icon @click="onMenuCollapse" name="fa fa-indent" :color="config.getColorVal('menuActiveColor')"
-                size="18" />
-        </div>
-        <span class="nav-bar-title">{{ getTheme.name }} <span style="font-size: 14px;" v-if="Version?.versionName">
-                ({{ Version?.versionName }})
-            </span></span>
-        <NavMenus />
-    </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import { useConfig } from '@/stores/config'
-import NavTabs from '@/layouts/admin/components/navBar/tabs.vue'
-import NavMenus from '../navMenus.vue'
-import { showShade } from '@/utils/pageShade'
-import { onMounted } from 'vue'
-import { getLastData } from '@/api/systerm'
-const config = useConfig()
-const getTheme = JSON.parse(window.localStorage.getItem('getTheme') as string)
-const Version: any = ref({})
-const onMenuCollapse = () => {
-    showShade('ba-aside-menu-shade', () => {
-        config.setLayout('menuCollapse', true)
-    })
-    config.setLayout('menuCollapse', false)
-}
-onMounted(() => {
-    getLastData({ versionType: 'WEB' }).then(res => {
-        Version.value = res.data
-
-    })
-    document.title = getTheme.name
-})
-</script>
-
-<style scoped lang="scss">
-.nav-bar {
-    display: flex;
-    align-items: center;
-    height: 60px;
-    width: 100%;
-    background-color: v-bind('config.getColorVal("headerBarBackground")');
-
-    .nav-bar-title {
-        color: v-bind('config.getColorVal("headerBarTabColor")');
-        font-size: 24px;
-        margin-left: 10px;
-        font-weight: 700;
-    }
-
-    :deep(.nav-tabs) {
-        display: flex;
-        height: 100%;
-        position: relative;
-
-        .ba-nav-tab {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 0 20px;
-            cursor: pointer;
-            z-index: 1;
-            height: 100%;
-            user-select: none;
-            color: v-bind('config.getColorVal("headerBarTabColor")');
-            transition: all 0.2s;
-            -webkit-transition: all 0.2s;
-
-            .close-icon {
-                padding: 2px;
-                margin: 2px 0 0 4px;
-                color: v-bind('config.getColorVal("headerBarTabColor")') !important;
-            }
-
-            &.active {
-                color: v-bind('config.getColorVal("headerBarTabActiveColor")');
-
-                .close-icon {
-                    color: v-bind('config.getColorVal("headerBarTabActiveColor")') !important;
-                }
-            }
-
-            &:hover {
-                color: v-bind('config.getColorVal("headerBarTabActiveColor")');
-                background-color: v-bind('config.getColorVal("headerBarHoverBackground")');
-
-                .close-icon {
-                    color: v-bind('config.getColorVal("headerBarTabActiveColor")') !important;
-                }
-            }
-        }
-
-        .nav-tabs-active-box {
-            position: absolute;
-            height: 50px;
-            background-color: v-bind('config.getColorVal("headerBarTabActiveBackground")');
-            transition: all 0.2s;
-            -webkit-transition: all 0.2s;
-        }
-    }
-}
-
-.unfold {
-    align-self: center;
-    padding-left: var(--ba-main-space);
-}
-</style>
+<template>
+    <div class="nav-bar">
+        <div v-if="config.layout.shrink && config.layout.menuCollapse" class="unfold">
+            <!-- <Icon @click="onMenuCollapse" name="fa fa-indent" :color="config.getColorVal('menuActiveColor')"
+                size="18" /> -->
+        </div>
+        <span class="nav-bar-title">{{ themeName }} <span style="font-size: 14px;" v-if="Version?.versionName">
+                ({{ Version?.versionName }})
+            </span></span>
+        <NavMenus />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useConfig } from '@/stores/config'
+import NavTabs from '@/layouts/admin/components/navBar/tabs.vue'
+import NavMenus from '../navMenus.vue'
+import { showShade } from '@/utils/pageShade'
+import { onMounted } from 'vue'
+import { getLastData } from '@/api/systerm'
+import { getStoredThemeName } from '@/utils/storage'
+const config = useConfig()
+const themeName = getStoredThemeName()
+const Version: any = ref({})
+const onMenuCollapse = () => {
+    showShade('ba-aside-menu-shade', () => {
+        config.setLayout('menuCollapse', true)
+    })
+    config.setLayout('menuCollapse', false)
+}
+onMounted(() => {
+    getLastData({ versionType: 'WEB' }).then(res => {
+        Version.value = res.data
+
+    })
+    document.title = themeName
+})
+</script>
+
+<style scoped lang="scss">
+.nav-bar {
+    display: flex;
+    align-items: center;
+    height: 60px;
+    width: 100%;
+    background-color: v-bind('config.getColorVal("headerBarBackground")');
+
+    .nav-bar-title {
+        color: v-bind('config.getColorVal("headerBarTabColor")');
+        font-size: 24px;
+        margin-left: 10px;
+        font-weight: 700;
+    }
+
+    :deep(.nav-tabs) {
+        display: flex;
+        height: 100%;
+        position: relative;
+
+        .ba-nav-tab {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0 20px;
+            cursor: pointer;
+            z-index: 1;
+            height: 100%;
+            user-select: none;
+            color: v-bind('config.getColorVal("headerBarTabColor")');
+            transition: all 0.2s;
+            -webkit-transition: all 0.2s;
+
+            .close-icon {
+                padding: 2px;
+                margin: 2px 0 0 4px;
+                color: v-bind('config.getColorVal("headerBarTabColor")') !important;
+            }
+
+            &.active {
+                color: v-bind('config.getColorVal("headerBarTabActiveColor")');
+
+                .close-icon {
+                    color: v-bind('config.getColorVal("headerBarTabActiveColor")') !important;
+                }
+            }
+
+            &:hover {
+                color: v-bind('config.getColorVal("headerBarTabActiveColor")');
+                background-color: v-bind('config.getColorVal("headerBarHoverBackground")');
+
+                .close-icon {
+                    color: v-bind('config.getColorVal("headerBarTabActiveColor")') !important;
+                }
+            }
+        }
+
+        .nav-tabs-active-box {
+            position: absolute;
+            height: 50px;
+            background-color: v-bind('config.getColorVal("headerBarTabActiveBackground")');
+            transition: all 0.2s;
+            -webkit-transition: all 0.2s;
+        }
+    }
+}
+
+.unfold {
+    align-self: center;
+    padding-left: var(--ba-main-space);
+}
+</style>

src/layouts/admin/components/navMenus.vue

@@ -116,11 +116,11 @@ const handleCommand = async (key: string) => {
             popupPwd.value.open()
             break
         case 'layout':
-            await window.location.reload()
+            navTabs.closeTabs()
+            window.localStorage.clear()
+            adminInfo.reset()
             setTimeout(() => {
-                navTabs.closeTabs()
-                window.localStorage.clear()
-                adminInfo.reset()
+                window.location.reload()
                 router.push({ name: 'login' })
             }, 0)
             break
@@ -231,9 +231,11 @@ const handleCommand = async (key: string) => {
     0% {
         transform: scale(0);
     }
+
     80% {
         transform: scale(1.2);
     }
+
     100% {
         transform: scale(1);
     }

src/layouts/admin/components/popup/adminInfo.vue

@@ -1,51 +1,51 @@
-<template>
-    <el-dialog draggable width="600px" v-model.trim="dialogVisible" :title="title">
-  
-            <el-form :inline="false" :model="form" label-width="auto" class="form-one">
-                <el-form-item label="用户名称:">
-                    <el-input v-model.trim="form.name" :disabled="true"></el-input>
-                </el-form-item>
-                <el-form-item label="登录名称:" class="top">
-                    <el-input v-model.trim="form.loginName" :disabled="true"></el-input>
-                </el-form-item>
-                <!-- <el-form-item label="归属部门名称:" class="top">
-                    <el-input v-model.trim="form.deptName" :disabled="true"></el-input>
-                </el-form-item> -->
-                <el-form-item label="拥有的角色:" class="top">
-                    <el-input v-model.trim="form.role" :disabled="true"></el-input>
-                </el-form-item>
-                <el-form-item label="电话号码:" class="top">
-                    <el-input v-model.trim="form.phone" :disabled="true"></el-input>
-                </el-form-item>
-                <el-form-item label="电子邮箱:" class="top">
-                    <el-input v-model.trim="form.email" :disabled="true"></el-input>
-                </el-form-item>
-            </el-form>
-    </el-dialog>
-</template>
-<script lang="ts" setup>
-import { ref, inject } from 'vue'
-import { reactive } from 'vue'
-import { useAdminInfo } from '@/stores/adminInfo'
-
-const dialogVisible = ref(false)
-const title = ref('用户信息')
-const adminInfo = useAdminInfo()
-const formRef = ref()
-const form = reactive({
-    name: '',
-    deptName: '',
-    phone: '',
-    email: '',
-    role: '',
-    loginName: ''
-})
-
-const open = () => {
-    dialogVisible.value = true
-    for (const key in form) {
-        form[key] = Array.isArray(adminInfo.$state[key]) ? adminInfo.$state[key].join(',') : adminInfo.$state[key]
-    }
-}
-defineExpose({ open })
-</script>
+<template>
+    <el-dialog draggable width="500px" v-model.trim="dialogVisible" :title="title">
+  
+            <el-form :inline="false" :model="form" label-width="auto" class="form-one">
+                <el-form-item label="用户名称">
+                    <el-input maxlength="32" show-word-limit  v-model.trim="form.name" :disabled="true"></el-input>
+                </el-form-item>
+                <el-form-item label="登录名称" class="top">
+                    <el-input maxlength="32" show-word-limit  v-model.trim="form.loginName" :disabled="true"></el-input>
+                </el-form-item>
+                <!-- <el-form-item label="归属部门名称" class="top">
+                    <el-input maxlength="32" show-word-limit  v-model.trim="form.deptName" :disabled="true"></el-input>
+                </el-form-item> -->
+                <el-form-item label="拥有的角色" class="top">
+                    <el-input maxlength="32" show-word-limit  v-model.trim="form.role" :disabled="true"></el-input>
+                </el-form-item>
+                <el-form-item label="电话号码" class="top">
+                    <el-input maxlength="32" show-word-limit  v-model.trim="form.phone" :disabled="true"></el-input>
+                </el-form-item>
+                <el-form-item label="电子邮箱" class="top">
+                    <el-input maxlength="32" show-word-limit  v-model.trim="form.email" :disabled="true"></el-input>
+                </el-form-item>
+            </el-form>
+    </el-dialog>
+</template>
+<script lang="ts" setup>
+import { ref, inject } from 'vue'
+import { reactive } from 'vue'
+import { useAdminInfo } from '@/stores/adminInfo'
+
+const dialogVisible = ref(false)
+const title = ref('用户信息')
+const adminInfo = useAdminInfo()
+const formRef = ref()
+const form = reactive({
+    name: '',
+    deptName: '',
+    phone: '',
+    email: '',
+    role: '',
+    loginName: ''
+})
+
+const open = () => {
+    dialogVisible.value = true
+    for (const key in form) {
+        form[key] = Array.isArray(adminInfo.$state[key]) ? adminInfo.$state[key].join(',') : adminInfo.$state[key]
+    }
+}
+defineExpose({ open })
+</script>

src/layouts/admin/components/popup/password.vue

@@ -2,26 +2,24 @@
     <el-dialog draggable width="500px" v-model.trim="dialogVisible" :title="title">
         <el-scrollbar>
             <el-form :inline="false" :model="form" label-width="120px" :rules="rules" class="form-one" ref="formRef">
-                <el-form-item label="校验密码:" prop="password">
-                    <el-input v-model.trim="form.password" type="password" placeholder="请输入校验密码" show-password />
+                <el-form-item label="校验密码" prop="password">
+                    <el-input maxlength="32" show-word-limit v-model.trim="form.password" type="password"
+                        placeholder="请输入校验密码" show-password />
                 </el-form-item>
-                <el-form-item label="新密码:" prop="newPwd">
-                    <el-input v-model.trim="form.newPwd" type="password" placeholder="请输入新密码" show-password />
+                <el-form-item label="新密码" prop="newPwd">
+                    <el-input maxlength="32" show-word-limit v-model.trim="form.newPwd" type="password"
+                        placeholder="请输入新密码" show-password />
                 </el-form-item>
-                <el-form-item label="确认密码:" prop="confirmPwd">
-                    <el-input
-                        v-model.trim="form.confirmPwd"
-                        type="password"
-                        placeholder="请输入确认密码"
-                        show-password
-                    />
+                <el-form-item label="确认密码" prop="confirmPwd">
+                    <el-input maxlength="32" show-word-limit v-model.trim="form.confirmPwd" type="password"
+                        placeholder="请输入确认密码" show-password />
                 </el-form-item>
             </el-form>
         </el-scrollbar>
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="dialogVisible = false">取消</el-button>
-                <el-button type="primary" @click="submit">确认</el-button>
+                <el-button type="primary" @click="submit" :loading="loading">确定</el-button>
             </span>
         </template>
     </el-dialog>
@@ -46,6 +44,7 @@ const form = reactive({
     newPwd: '',
     confirmPwd: ''
 })
+const loading = ref(false)
 const rules = {
     password: [
         { required: true, message: '请输入校验密码', trigger: 'blur' },
@@ -99,6 +98,7 @@ const open = () => {
 const submit = () => {
     formRef.value.validate(async (valid: boolean) => {
         if (valid) {
+            loading.value = true
             passwordConfirm(form.password).then(res => {
                 updatePassword({
                     id: adminInfo.$state.userIndex,
@@ -106,14 +106,18 @@ const submit = () => {
                 }).then(async (res: any) => {
                     ElMessage.success('密码修改成功')
                     dialogVisible.value = false
-                    
+
                     setTimeout(() => {
-                         navTabs.closeTabs()
+                        navTabs.closeTabs()
                         window.localStorage.clear()
                         adminInfo.reset()
                         router.push({ name: 'login' })
                     }, 0)
+                }).finally(() => {
+                    loading.value = false
                 })
+            }).finally(() => {
+                loading.value = false
             })
         }
     })

src/layouts/admin/index.vue

@@ -51,11 +51,11 @@ onBeforeMount(() => {
 })
 
 const init = async () => {
-    await Promise.all([getAreaList(), dictDataCache(), getUserById(), areaSelect(),getAllUserSimpleList()]).then(res => {
-        dictData.state.area = res[0].data
-        dictData.state.basic = res[1].data
+    await Promise.all([ dictDataCache(), getUserById(), areaSelect(),getAllUserSimpleList()]).then(res => {
+        // dictData.state.area = res[0].data
+        dictData.state.basic = res[0].data
         // dictData.state.userList=res[4].data
-        adminInfo.dataFill(res[2].data)
+        adminInfo.dataFill(res[1].data)
         // dictData.state.areaTree = res[3].data
     })
     /**

src/layouts/components/UserInfo/src/components/LockDialog.vue

@@ -1,88 +1,88 @@
-<script setup lang="ts">
-import { ref, computed, reactive } from 'vue'
-import { useValidator } from '@/hooks/web/useValidator'
-import { useDesign } from '@/hooks/web/useDesign'
-import { useLockStore } from '@/stores/modules/lock'
-import avatarImg from '@/assets/imgs/avatar.gif'
-import { useUserStore } from '@/stores/modules/user'
-import { useI18n } from 'vue-i18n'
-const { getPrefixCls } = useDesign()
-const prefixCls = getPrefixCls('lock-dialog')
-
-const { required } = useValidator()
-
-const { t } = useI18n()
-
-const lockStore = useLockStore()
-
-const props = defineProps({
-    modelValue: {
-        type: Boolean
-    }
-})
-
-const userStore = useUserStore()
-const avatar = computed(() => userStore.user.avatar ?? avatarImg)
-const userName = computed(() => userStore.user.nickname ?? 'Admin')
-
-const emit = defineEmits(['update:modelValue'])
-
-const dialogVisible = computed({
-    get: () => props.modelValue,
-    set: val => {
-        // console.log('set: ', val)
-        emit('update:modelValue', val)
-    }
-})
-
-const dialogTitle = ref(t('lock.lockScreen'))
-
-const formData = ref({
-    password: undefined
-})
-const formRules = reactive({
-    password: [required()]
-})
-
-const formRef = ref() // 表单 Ref
-const handleLock = async () => {
-    // 校验表单
-    if (!formRef) return
-    const valid = await formRef.value.validate()
-    if (!valid) return
-    // 提交请求
-    dialogVisible.value = false
-    lockStore.setLockInfo({
-        ...formData.value,
-        isLock: true
-    })
-}
-</script>
-
-<template>
-    <Dialog v-model.trim="dialogVisible" width="500px" max-height="170px" :class="prefixCls" :title="dialogTitle">
-        <div class="flex flex-col items-center">
-            <img :src="avatar" alt="" class="w-70px h-70px rounded-[50%]" />
-            <span class="text-14px my-10px text-[var(--top-header-text-color)]">
-                {{ userName }}
-            </span>
-        </div>
-        <el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px">
-            <el-form-item :label="t('lock.lockPassword')" prop="password">
-                <el-input maxlength="32" show-word-limit type="password" v-model.trim="formData.password"
-                    :placeholder="'请输入' + t('lock.lockPassword')" clearable show-password />
-            </el-form-item>
-        </el-form>
-        <template #footer>
-            <ElButton type="primary" @click="handleLock">{{ t('lock.lock') }}</ElButton>
-        </template>
-    </Dialog>
-</template>
-
-<style lang="scss" scoped>
-:global(.v-lock-dialog) {
-    @media (max-width: 767px) {
-        max-width: calc(100vw - 16px);
-    }
-}
-</style>
+<script setup lang="ts">
+import { ref, computed, reactive } from 'vue'
+import { useValidator } from '@/hooks/web/useValidator'
+import { useDesign } from '@/hooks/web/useDesign'
+import { useLockStore } from '@/stores/modules/lock'
+import avatarImg from '@/assets/imgs/avatar.gif'
+import { useUserStore } from '@/stores/modules/user'
+import { useI18n } from 'vue-i18n'
+const { getPrefixCls } = useDesign()
+const prefixCls = getPrefixCls('lock-dialog')
+
+const { required } = useValidator()
+
+const { t } = useI18n()
+
+const lockStore = useLockStore()
+
+const props = defineProps({
+    modelValue: {
+        type: Boolean
+    }
+})
+
+const userStore = useUserStore()
+const avatar = computed(() => userStore.user.avatar ?? avatarImg)
+const userName = computed(() => userStore.user.nickname ?? 'Admin')
+
+const emit = defineEmits(['update:modelValue'])
+
+const dialogVisible = computed({
+    get: () => props.modelValue,
+    set: val => {
+        // console.log('set: ', val)
+        emit('update:modelValue', val)
+    }
+})
+
+const dialogTitle = ref(t('lock.lockScreen'))
+
+const formData = ref({
+    password: undefined
+})
+const formRules = reactive({
+    password: [required()]
+})
+
+const formRef = ref() // 表单 Ref
+const handleLock = async () => {
+    // 校验表单
+    if (!formRef) return
+    const valid = await formRef.value.validate()
+    if (!valid) return
+    // 提交请求
+    dialogVisible.value = false
+    lockStore.setLockInfo({
+        ...formData.value,
+        isLock: true
+    })
+}
+</script>
+
+<template>
+    <Dialog v-model.trim="dialogVisible" width="500px" max-height="170px" :class="prefixCls" :title="dialogTitle">
+        <div class="flex flex-col items-center">
+            <img :src="avatar" alt="" class="w-70px h-70px rounded-[50%]" />
+            <span class="text-14px my-10px text-[var(--top-header-text-color)]">
+                {{ userName }}
+            </span>
+        </div>
+        <el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px">
+            <el-form-item :label="t('lock.lockPassword')" prop="password">
+                <el-input maxlength="32" show-word-limit    type="password" v-model.trim="formData.password"
+                    :placeholder="'请输入' + t('lock.lockPassword')" clearable show-password />
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <ElButton type="primary" @click="handleLock">{{ t('lock.lock') }}</ElButton>
+        </template>
+    </Dialog>
+</template>
+
+<style lang="scss" scoped>
+:global(.v-lock-dialog) {
+    @media (max-width: 767px) {
+        max-width: calc(100vw - 16px);
+    }
+}
+</style>

src/main.ts

@@ -13,7 +13,8 @@ import 'element-plus/theme-chalk/display.css'
 import '@fortawesome/fontawesome-free/css/all.css'
 import '@/styles/index.scss'
 import '@/assets/font/iconfont.css'
-import { ElDialog } from 'element-plus'
+import CnDialog from '@/components/CnDialog/CnDialog.vue'
+import { applyDialogCssVars } from '@/config/dialog'
 import ExcelJS from 'exceljs'
 import VXETablePluginExportXLSX from 'vxe-table-plugin-export-xlsx'
 VXETable.use(VXETablePluginExportXLSX, {
@@ -21,13 +22,14 @@ VXETable.use(VXETablePluginExportXLSX, {
 })
 window.XEUtils = XEUtils
 
+applyDialogCssVars()
 
 const app = createApp(App)
 
 app.use(router)
 app.use(pinia)
-app.use(ElementPlus);
-(app._context.components.ElDialog as typeof ElDialog).props.closeOnClickModal.default = false
+app.use(ElementPlus)
+app.component('ElDialog', CnDialog)
 app.use(VXETable)
 registerIcons(app) // icons
 

src/router/static.ts

@@ -36,14 +36,15 @@ export const adminBaseRoute = {
             }
         },
         {
-            // 在线补召
-            path: '/versionMaintenance',
-            name: 'versionMaintenance',
-            component: () => import('@/views/govern/manage/programVersion/comp/versionMaintenance.vue'),
+            // 版本维护
+            path: '/version',
+            name: 'version',
+            component: () => import('@/views/govern/manage/basic/version.vue'),
             meta: {
-                title: pageTitle('router.versionMaintenance')
+                title: pageTitle('router.version')
             }
         },
+        
         {
             path: 'cockpit',
             name: '项目管理',

src/styles/app.scss

@@ -346,12 +346,6 @@ body,
     }
 }
 
-@media screen and (max-width: 1024px) {
-    .cn-operate-dialog {
-        width: 96%;
-    }
-}
-
 @media screen and (max-width: 991px) {
     .user-views {
         padding: 0;

src/styles/dialog.scss

@@ -0,0 +1,53 @@
+/* 弹框尺寸 - CSS 变量由 config/dialog.ts 在启动时注入 */
+:root {
+    --cn-dialog-width-small: 26vw;
+    --cn-dialog-max-width-small: 500px;
+    --cn-dialog-min-width-small: 300px;
+
+    --cn-dialog-width-middle: 42vw;
+    --cn-dialog-max-width-middle: 800px;
+    --cn-dialog-min-width-middle: 600px;
+
+    --cn-dialog-width-big: 62vw;
+    --cn-dialog-max-width-big: 1200px;
+    --cn-dialog-min-width-big: 800px;
+}
+
+.cn-dialog.el-dialog {
+    max-width: calc(100vw - 32px);
+}
+
+.cn-dialog--small.el-dialog,
+.dialog-small.el-dialog {
+    width: var(--cn-dialog-width-small) !important;
+    max-width: var(--cn-dialog-max-width-small) !important;
+    min-width: var(--cn-dialog-min-width-small) !important;
+}
+
+.cn-dialog--middle.el-dialog,
+.dialog-middle.el-dialog {
+    width: var(--cn-dialog-width-middle) !important;
+    max-width: var(--cn-dialog-max-width-middle) !important;
+    min-width: var(--cn-dialog-min-width-middle) !important;
+}
+
+.cn-dialog--big.el-dialog,
+.dialog-big.el-dialog {
+    width: var(--cn-dialog-width-big) !important;
+    max-width: var(--cn-dialog-max-width-big) !important;
+    min-width: var(--cn-dialog-min-width-big) !important;
+}
+
+@media screen and (max-width: 1024px) {
+    .cn-dialog--small.el-dialog,
+    .cn-dialog--middle.el-dialog,
+    .cn-dialog--big.el-dialog,
+    .dialog-small.el-dialog,
+    .dialog-middle.el-dialog,
+    .dialog-big.el-dialog,
+    .cn-operate-dialog.el-dialog {
+        width: 96% !important;
+        min-width: unset !important;
+        max-width: calc(100vw - 32px) !important;
+    }
+}

src/styles/element.scss

@@ -103,7 +103,7 @@
         border-radius: var(--el-border-radius-base);
         box-shadow: none;
         -webkit-box-shadow: none;
-          cursor: pointer !important;
+        cursor: pointer !important;
     }
 
     &:hover {
@@ -228,11 +228,19 @@
     }
 }
 
-.el-collapse-item__content{
+.el-collapse-item__content {
     padding-bottom: 0;
 }
 
 //解决打开dialog body容器宽度变为 calc(100% - 8px)问题
-.el-popup-parent--hidden{
+.el-popup-parent--hidden {
     width: 100% !important;
-}
+}
+// 树x轴滚动、
+.el-scrollbar .el-scrollbar__wrap {
+    overflow-x: hidden !important;
+}
+.el-tree > .el-tree-node {
+    min-width: 100% !important;
+    // display: inline-block !important;
+}

src/styles/index.scss

@@ -1,5 +1,6 @@
-@use '@/styles/app';
-@use '@/styles/vxeTable';
-@use '@/styles/element';
-@use '@/styles/var';
-@use '@/styles/map';
+@use '@/styles/app';
+@use '@/styles/vxeTable';
+@use '@/styles/element';
+@use '@/styles/var';
+@use '@/styles/map';
+@use '@/styles/dialog';

src/styles/var.scss

@@ -1,36 +1,38 @@
-@use 'sass:map';
-@use 'mixins' as *;
-
-// 后台主体窗口左右间距
-$main-space: 10px;
-$primary-light: #3f6ad8;
-
-// --ba-background
-$bg-color: () !default;
-$bg-color: map.merge(
-                (
-                        '': #edf0f3,
-                        'overlay': #ffffff,
-                ),
-                $bg-color
-);
-
-// --ba-border-color
-$border-color: () !default;
-$border-color: map.merge(
-                (
-                        '': #f6f6f6,
-                ),
-                $border-color
-);
-
-:root {
-  @include set-css-var-value('main-space', $main-space);
-  @include set-css-var-value('color-primary-light', $primary-light);
-  @include set-component-css-var('bg-color', $bg-color);
-  @include set-component-css-var('border-color', $border-color);
-//   --vxe-table-row-current-background-color: var(--el-color-primary-light-7);
-//   --vxe-table-row-hover-background-color: var(--el-color-primary-light-9);
-//   --vxe-table-row-hover-current-background-color: var(--el-color-primary-light-7);
-//   --vxe-table-row-hover-striped-background-color: var(--el-color-primary-light-9);
-}
+@use 'sass:map';
+@use 'mixins' as *;
+
+// 后台主体窗口左右间距
+$main-space: 10px;
+$primary-light: #3f6ad8;
+
+// --ba-background
+$bg-color: () !default;
+$bg-color: map.merge(
+    (
+        '': #edf0f3,
+        'overlay': #ffffff
+    ),
+    $bg-color
+);
+
+// --ba-border-color
+$border-color: () !default;
+$border-color: map.merge(
+    (
+        '': #f6f6f6
+    ),
+    $border-color
+);
+
+:root {
+    @include set-css-var-value('main-space', $main-space);
+    @include set-css-var-value('color-primary-light', $primary-light);
+    @include set-component-css-var('bg-color', $bg-color);
+    @include set-component-css-var('border-color', $border-color);
+    --el-color-danger: #e26257;
+    --el-color-success: #2ab914;
+    //   --vxe-table-row-current-background-color: var(--el-color-primary-light-7);
+    //   --vxe-table-row-hover-background-color: var(--el-color-primary-light-9);
+    //   --vxe-table-row-hover-current-background-color: var(--el-color-primary-light-7);
+    //   --vxe-table-row-hover-striped-background-color: var(--el-color-primary-light-9);
+}

src/styles/vxeTable.css

@@ -42,7 +42,7 @@
 
 .vxe-table--render-default .vxe-body--row.row--current,
 .vxe-table--render-default .vxe-body--row.row--current:hover {
-  background-color: var(--el-color-primary-light-8);
+  background-color: var(--el-color-primary-light-9);
 }
 
 .vxe-table--tooltip-wrapper {

src/styles/vxeTable.min.css

@@ -1 +1 @@
-.vxe-header--row{background:var(--vxe-table-header-background-color);color:var(--vxe-table-header-font-color)}.is--checked.vxe-checkbox,.is--checked.vxe-checkbox .vxe-checkbox--icon,.is--checked.vxe-custom--checkbox-option,.is--checked.vxe-custom--checkbox-option .vxe-checkbox--icon,.is--checked.vxe-export--panel-column-option,.is--checked.vxe-export--panel-column-option .vxe-checkbox--icon,.is--checked.vxe-table--filter-option,.is--checked.vxe-table--filter-option .vxe-checkbox--icon,.is--indeterminate.vxe-checkbox,.is--indeterminate.vxe-checkbox .vxe-checkbox--icon,.is--indeterminate.vxe-custom--checkbox-option,.is--indeterminate.vxe-custom--checkbox-option .vxe-checkbox--icon,.is--indeterminate.vxe-export--panel-column-option,.is--indeterminate.vxe-export--panel-column-option .vxe-checkbox--icon,.is--indeterminate.vxe-table--filter-option,.is--indeterminate.vxe-table--filter-option .vxe-checkbox--icon,.vxe-table--render-default .is--checked.vxe-cell--checkbox,.vxe-table--render-default .is--checked.vxe-cell--checkbox .vxe-checkbox--icon,.vxe-table--render-default .is--indeterminate.vxe-cell--checkbox,.vxe-table--render-default .is--indeterminate.vxe-cell--checkbox .vxe-checkbox--icon,.vxe-table--render-default .is--checked.vxe-cell--radio .vxe-radio--icon{color:var(--el-color-primary-light-3)}.vxe-checkbox:not(.is--disabled):hover .vxe-checkbox--icon,.vxe-custom--checkbox-option:not(.is--disabled):hover .vxe-checkbox--icon,.vxe-export--panel-column-option:not(.is--disabled):hover .vxe-checkbox--icon,.vxe-table--filter-option:not(.is--disabled):hover .vxe-checkbox--icon,.vxe-table--render-default .vxe-cell--checkbox:not(.is--disabled):hover .vxe-checkbox--icon,.vxe-radio:not(.is--disabled):hover .vxe-radio--icon,.vxe-custom--radio-option:not(.is--disabled):hover .vxe-radio--icon,.vxe-export--panel-column-option:not(.is--disabled):hover .vxe-radio--icon,.vxe-table--filter-option:not(.is--disabled):hover .vxe-radio--icon,.vxe-table--render-default .vxe-cell--radio:not(.is--disabled):hover .vxe-radio--icon{color:var(--el-color-primary-light-5)}.vxe-table--render-default .vxe-body--row.row--current,.vxe-table--render-default .vxe-body--row.row--current:hover{background-color:var(--el-color-primary-light-8)}.vxe-table--tooltip-wrapper{z-index:10000 !important}.is--disabled{background-color:var(--vxe-input-disabled-color)}.vxe-modal--wrapper{z-index:5000 !important}
+.vxe-header--row{background:var(--vxe-table-header-background-color);color:var(--vxe-table-header-font-color)}.is--checked.vxe-checkbox,.is--checked.vxe-checkbox .vxe-checkbox--icon,.is--checked.vxe-custom--checkbox-option,.is--checked.vxe-custom--checkbox-option .vxe-checkbox--icon,.is--checked.vxe-export--panel-column-option,.is--checked.vxe-export--panel-column-option .vxe-checkbox--icon,.is--checked.vxe-table--filter-option,.is--checked.vxe-table--filter-option .vxe-checkbox--icon,.is--indeterminate.vxe-checkbox,.is--indeterminate.vxe-checkbox .vxe-checkbox--icon,.is--indeterminate.vxe-custom--checkbox-option,.is--indeterminate.vxe-custom--checkbox-option .vxe-checkbox--icon,.is--indeterminate.vxe-export--panel-column-option,.is--indeterminate.vxe-export--panel-column-option .vxe-checkbox--icon,.is--indeterminate.vxe-table--filter-option,.is--indeterminate.vxe-table--filter-option .vxe-checkbox--icon,.vxe-table--render-default .is--checked.vxe-cell--checkbox,.vxe-table--render-default .is--checked.vxe-cell--checkbox .vxe-checkbox--icon,.vxe-table--render-default .is--indeterminate.vxe-cell--checkbox,.vxe-table--render-default .is--indeterminate.vxe-cell--checkbox .vxe-checkbox--icon,.vxe-table--render-default .is--checked.vxe-cell--radio .vxe-radio--icon{color:var(--el-color-primary-light-3)}.vxe-checkbox:not(.is--disabled):hover .vxe-checkbox--icon,.vxe-custom--checkbox-option:not(.is--disabled):hover .vxe-checkbox--icon,.vxe-export--panel-column-option:not(.is--disabled):hover .vxe-checkbox--icon,.vxe-table--filter-option:not(.is--disabled):hover .vxe-checkbox--icon,.vxe-table--render-default .vxe-cell--checkbox:not(.is--disabled):hover .vxe-checkbox--icon,.vxe-radio:not(.is--disabled):hover .vxe-radio--icon,.vxe-custom--radio-option:not(.is--disabled):hover .vxe-radio--icon,.vxe-export--panel-column-option:not(.is--disabled):hover .vxe-radio--icon,.vxe-table--filter-option:not(.is--disabled):hover .vxe-radio--icon,.vxe-table--render-default .vxe-cell--radio:not(.is--disabled):hover .vxe-radio--icon{color:var(--el-color-primary-light-5)}.vxe-table--render-default .vxe-body--row.row--current,.vxe-table--render-default .vxe-body--row.row--current:hover{background-color:var(--el-color-primary-light-9)}.vxe-table--tooltip-wrapper{z-index:10000 !important}.is--disabled{background-color:var(--vxe-input-disabled-color)}.vxe-modal--wrapper{z-index:5000 !important}

src/styles/vxeTable.scss

@@ -62,7 +62,7 @@
 }
 .vxe-table--render-default .vxe-body--row.row--current,
 .vxe-table--render-default .vxe-body--row.row--current:hover {
-    background-color: var(--el-color-primary-light-8);
+    background-color: var(--el-color-primary-light-9);
 }
 // .vxe-table--render-default .is--disabled.vxe-cell--checkbox .vxe-checkbox--icon{
 //     color: #fff0;