修改项目树问题 绘制稳态治理分析页面

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

@@ -103,3 +103,19 @@ 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
+    })
+}

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/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/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" /> -->
@@ -168,7 +155,7 @@ const tableStore: any = new TableStore({
                     {
                         type: 'bar',
                         name: '越限占比',
-                        data: tableStore.table.data.map((item: any) =>  Math.floor(item.extent * 100) / 100),
+                        data: tableStore.table.data.map((item: any) => Math.floor(item.extent * 100) / 100),
                         barMaxWidth: 30
                     }
                 ]
@@ -182,29 +169,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 +215,10 @@ const setTime = () => {
         console.warn('获取时间失败，time 不是一个有效数组')
     }
 }
-const dialogFlag=ref(false)
+const dialogFlag = ref(false)
 // 谐波弹窗关闭时的回调
 const onHarmonicRatioClose = () => {
-     dialogFlag.value = false
+    dialogFlag.value = false
     // 重新打开指标越限详情弹窗
 
 }
@@ -256,6 +243,6 @@ watch(
     }
 )
 
-const addMenu = () => {}
+const addMenu = () => { }
 </script>
 <style lang="scss" scoped></style>

src/components/cockpit/governanceReport/index.vue

@@ -1,15 +1,37 @@
 <template>
     <div>
         <!--治理效果报表 -->
-        <TableHeader :showReset="false"  :timeKeyList="prop.timeKey" ref="TableHeaderRef" datePicker @selectChange="selectChange" v-if="fullscreen">
+        <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
+                        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-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>
@@ -43,7 +65,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 }
 })
@@ -59,13 +81,21 @@ const idList = ref()
 // 监测对象
 const initListByIds = () => {
     getListByIds({}).then((res: any) => {
-        if (res.data.length > 0) {
+        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
             }
             templateListData()
+        } else {
+            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
+                }
+            })
+            tableStore.table.loading = false
         }
     })
 }

src/components/cockpit/listOfMainMonitoringPoints/index.vue

@@ -150,6 +150,7 @@ const indicatorList = ref()
 
 const initLineList = async () => {
     cslineList({}).then(res => {
+        setTime()
         if (res.data.length == 0) {
             lineShow.value = false
             return (tableStore.table.loading = false)

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

@@ -167,14 +167,15 @@ const tableStore: any = new TableStore({
                     type: 'primary',
                     icon: 'el-icon-DataLine',
                     render: 'basicButton',
+                    loading: 'loading1',
                     disabled: row => {
                         return !row.wavePath
                     },
 
                     click: async row => {
                         row.loading1 = true
-                        loading.value = true
-                        isWaveCharts.value = true
+                       
+                       
                         dialogVisible.value = false
                         // 在打开弹窗时立即设置高度
                         nextTick(() => {
@@ -185,6 +186,8 @@ const tableStore: any = new TableStore({
                         })
                         await analyseWave(row.id)
                             .then(res => {
+                                isWaveCharts.value = true
+                                loading.value = true
                                 row.loading1 = false
                                 if (res != undefined) {
                                     boxoList.value = row

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

@@ -160,15 +160,14 @@ const tableStore: any = new TableStore({
                     type: 'primary',
                     icon: 'el-icon-DataLine',
                     render: 'basicButton',
+                    loading: 'loading1', 
                     disabled: row => {
                         return !row.wavePath
                     },
 
                     click: async row => {
                         row.loading1 = true
-                        loading.value = true
-                        isWaveCharts.value = true
-                        dialogVisible.value = false
+                      
                         // 在打开弹窗时立即设置高度
                         nextTick(() => {
                             if (waveFormAnalysisRef.value) {
@@ -178,6 +177,10 @@ const tableStore: any = new TableStore({
                         })
                         await analyseWave(row.id)
                             .then(res => {
+                                loading.value = true
+                                isWaveCharts.value = true
+                        dialogVisible.value = false
+
                                 row.loading1 = false
                                 if (res != undefined) {
                                     boxoList.value = row

src/components/echarts/MyEchart.vue

@@ -69,7 +69,8 @@ const initChart = () => {
             top: 15,
             feature: {
                 saveAsImage: {
-                    title: '保存图片'
+                    title: '下载图片',
+                    name: props.options?.title?.text || '图表'
                 },
                 ...(props.options?.toolbox?.featureProps || null)
             },

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" 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" 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,19 +1,17 @@
 <!-- 设备管理使用折叠面板渲染多个tree -->
 <template>
     <div :style="{ width: menuCollapse ? '40px' : props.width }" style="display: flex; overflow: hidden">
-        <Icon
+        <!-- <Icon
             v-show="menuCollapse"
             @click="onMenuCollapse"
             :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
             :class="menuCollapse ? 'unfold' : ''"
-            size="18"
+            size="18px"
             class="fold ml10 mt20 menu-collapse"
             style="cursor: pointer"
-        />
+        /> -->
         <div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1 }">
             <div style="display: flex; align-items: center" class="mb10">
-                <!-- <el-form-item> -->
-
                 <el-input
                     maxlength="32"
                     v-model.trim="filterText"
@@ -36,39 +34,33 @@
                     </template>
                 </el-input>
 
-                <!-- </el-form-item> -->
-                <Icon
+                <!-- <Icon
                     @click="onMenuCollapse"
                     :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
                     :class="menuCollapse ? 'unfold' : ''"
-                    size="18"
+                    size="18px"
                     class="fold ml10 menu-collapse"
                     style="cursor: pointer"
                     v-if="props.canExpand"
-                />
+                /> -->
             </div>
 
             <el-collapse
                 :accordion="true"
-                v-model.trim="activeName"
+                v-model="activeName"
                 style="flex: 1; height: 100%"
                 @change="changeDevice"
                 v-if="treeType == '1'"
                 v-loading="loading"
             >
-                <el-collapse-item title="治理设备" name="0" v-if="zlDeviceData.length != 0">
-                    <el-select v-model.trim="process" clearable placeholder="请选择状态" class="mb10">
-                        <el-option label="功能调试" value="2"></el-option>
-                        <el-option label="出厂调试" value="3"></el-option>
-                        <el-option label="正式投运" value="4"></el-option>
+                <el-collapse-item title="治理设备" name="0" v-if="zlDeviceData.length">
+                    <el-select v-model="process" clearable placeholder="请选择状态" class="mb10">
+                        <el-option label="功能调试" value="2" />
+                        <el-option label="出厂调试" value="3" />
+                        <el-option label="正式投运" value="4" />
                     </el-select>
                     <el-tree
-                        :style="{
-                            height:
-                                treeType.length != 0
-                                    ? `calc(100vh - 380px - ${props.height}px)`
-                                    : 'calc(100vh - 278px)'
-                        }"
+                        :style="{ height: governTreeHeight }"
                         ref="treeRef1"
                         :props="defaultProps"
                         highlight-current
@@ -79,27 +71,22 @@
                         :data="zlDevList"
                         style="overflow: auto"
                     >
-                        <template #default="{ node, data }">
+                        <template #default="{ node, data: nodeData }">
                             <span class="custom-tree-node">
                                 <Icon
-                                    :name="data.icon"
+                                    :name="nodeData.icon"
                                     style="font-size: 16px"
-                                    :style="{ color: data.color }"
-                                    v-if="data.icon"
+                                    :style="{ color: nodeData.color }"
+                                    v-if="nodeData.icon"
                                 />
                                 <span style="margin-left: 4px">{{ node.label }}</span>
                             </span>
                         </template>
                     </el-tree>
                 </el-collapse-item>
-                <el-collapse-item title="便携式设备" name="1" v-if="bxsDeviceData.length != 0">
+                <el-collapse-item title="便携式设备" name="1" v-if="bxsDeviceData.length">
                     <el-tree
-                        :style="{
-                            height:
-                                zlDeviceData.length != 0
-                                    ? `calc(100vh - 340px - ${props.height}px)`
-                                    : 'calc(100vh - 238px)'
-                        }"
+                        :style="{ height: otherTreeHeight }"
                         ref="treeRef2"
                         :props="defaultProps"
                         highlight-current
@@ -110,27 +97,22 @@
                         v-bind="$attrs"
                         style="overflow: auto"
                     >
-                        <template #default="{ node, data }">
+                        <template #default="{ node, data: nodeData }">
                             <span class="custom-tree-node">
                                 <Icon
-                                    :name="data.icon"
+                                    :name="nodeData.icon"
                                     style="font-size: 16px"
-                                    :style="{ color: data.color }"
-                                    v-if="data.icon"
+                                    :style="{ color: nodeData.color }"
+                                    v-if="nodeData.icon"
                                 />
                                 <span style="margin-left: 4px">{{ node.label }}</span>
                             </span>
                         </template>
                     </el-tree>
                 </el-collapse-item>
-                <el-collapse-item title="监测设备" name="2" v-if="frontDeviceData.length != 0">
+                <el-collapse-item title="监测设备" name="2" v-if="frontDeviceData.length">
                     <el-tree
-                        :style="{
-                            height:
-                                zlDeviceData.length != 0
-                                    ? `calc(100vh - 340px - ${props.height}px)`
-                                    : 'calc(100vh - 238px)'
-                        }"
+                        :style="{ height: otherTreeHeight }"
                         ref="treeRef3"
                         :props="defaultProps"
                         highlight-current
@@ -141,13 +123,13 @@
                         v-bind="$attrs"
                         style="overflow: auto"
                     >
-                        <template #default="{ node, data }">
+                        <template #default="{ node, data: nodeData }">
                             <span class="custom-tree-node">
                                 <Icon
-                                    :name="data.icon"
+                                    :name="nodeData.icon"
                                     style="font-size: 16px"
-                                    :style="{ color: data.color }"
-                                    v-if="data.icon"
+                                    :style="{ color: nodeData.color }"
+                                    v-if="nodeData.icon"
                                 />
                                 <span style="margin-left: 4px">{{ node.label }}</span>
                             </span>
@@ -157,24 +139,24 @@
             </el-collapse>
             <div v-if="treeType == '2'" v-loading="loading">
                 <el-tree
-                    :style="{ height: `calc(100vh - 188px - ${props.height}px )` }"
+                    :style="{ height: engineeringTreeHeight }"
                     ref="treeRef4"
                     :props="defaultProps"
                     highlight-current
                     :filter-node-method="filterNode"
                     node-key="id"
                     v-bind="$attrs"
-                    :data="data"
+                    :data="props.data"
                     style="overflow: auto"
                     :default-expand-all="false"
                 >
-                    <template #default="{ node, data }">
+                    <template #default="{ node, data: nodeData }">
                         <span class="custom-tree-node">
                             <Icon
-                                :name="data.icon"
+                                :name="nodeData.icon"
                                 style="font-size: 16px"
-                                :style="{ color: data.color }"
-                                v-if="data.icon"
+                                :style="{ color: nodeData.color }"
+                                v-if="nodeData.icon"
                             />
                             <span style="margin-left: 4px">{{ node.label }}</span>
                         </span>
@@ -187,273 +169,218 @@
 
 <script lang="ts" setup>
 import useCurrentInstance from '@/utils/useCurrentInstance'
-import { ElTree } from 'element-plus'
-import { ref, watch, defineEmits, onMounted, nextTick } from 'vue'
+import { ElTree, type CollapseModelValue } from 'element-plus'
+import { ref, watch, onMounted, nextTick, computed } from 'vue'
+import { collectDeviceLeaves } from './govern/lineTreeUtils'
+import { collectDeviceApiLeaves } from './govern/deviceTreeUtils'
 
 defineOptions({
-    name: 'govern/tree'
+    name: 'govern/tree',
+    inheritAttrs: false
 })
+
 const emit = defineEmits(['changeDeviceType', 'changeTreeType'])
+
 interface Props {
     width?: string
     canExpand?: boolean
     type?: string
-    data?: any
+    data?: any[]
     height?: number
-    engineering: boolean
+    engineering?: boolean
+    /** line: getLineTree 四层叶子；device: getDeviceTree 三层叶子 */
+    leafMode?: 'line' | 'device'
 }
 
 const props = withDefaults(defineProps<Props>(), {
     width: '280px',
     canExpand: true,
     type: '',
-    data: [],
+    data: () => [],
     height: 0,
-    engineering: false
+    engineering: false,
+    leafMode: 'line'
 })
+
 const treeType = ref('1')
 const options = [
-    {
-        label: '设备',
-        value: '1'
-    },
-    {
-        label: '工程',
-        value: '2'
-    }
+    { label: '设备', value: '1' },
+    { label: '工程', value: '2' }
 ]
+
 const { proxy } = useCurrentInstance()
 const menuCollapse = ref(false)
 const activeName = ref('0')
 const filterText = ref('')
-const defaultProps = {
-    label: 'name',
-    value: 'id'
-}
 const process = ref('')
-//治理设备数据
-const zlDeviceData = ref([])
-const zlDevList = ref<any>([])
-//便携式设备数据
-const bxsDeviceData = ref([])
-//前置设备数据
-const frontDeviceData = ref([])
+const loading = ref(false)
+
+const defaultProps = { label: 'name', value: 'id' }
+
+const zlDeviceData = ref<any[]>([])
+const zlDevList = ref<any[]>([])
+const bxsDeviceData = ref<any[]>([])
+const frontDeviceData = ref<any[]>([])
+
+const governTreeHeight = computed(() => `calc(100vh - 380px - ${props.height}px)`)
+const otherTreeHeight = computed(() =>
+    zlDeviceData.value.length ? `calc(100vh - 340px - ${props.height}px)` : `calc(100vh - 238px - ${props.height}px)`
+)
+const engineeringTreeHeight = computed(() => `calc(100vh - 188px - ${props.height}px)`)
+
+const treeRef1 = ref<InstanceType<typeof ElTree>>()
+const treeRef2 = ref<InstanceType<typeof ElTree>>()
+const treeRef3 = ref<InstanceType<typeof ElTree>>()
+const treeRef4 = ref<InstanceType<typeof ElTree>>()
+
+defineExpose({ treeRef1, treeRef2, treeRef3, treeRef4 })
+
+function splitTreeData(val: any[]) {
+    zlDeviceData.value = []
+    bxsDeviceData.value = []
+    frontDeviceData.value = []
+
+    val.forEach(item => {
+        if (item.name === '治理设备') {
+            zlDeviceData.value = item.children ?? []
+        } else if (item.name === '便携式设备') {
+            bxsDeviceData.value = item.children ?? []
+        } else if (item.name === '监测设备') {
+            frontDeviceData.value = item.children ?? []
+        }
+    })
+
+    zlDevList.value = filterProcess(JSON.parse(JSON.stringify(zlDeviceData.value)))
+}
+
+function filterProcess(nodes: any[]): any[] {
+    if (!process.value) return nodes
+
+    return nodes
+        .map(node => {
+            const children = node.children ? filterProcess(node.children) : []
+            if (node.process == process.value || children.length > 0) {
+                return { ...node, children }
+            }
+            return null
+        })
+        .filter(Boolean)
+}
+
+function getActiveTreeRef() {
+    if (treeType.value === '2') return treeRef4.value
+    if (activeName.value === '0') return treeRef1.value
+    if (activeName.value === '1') return treeRef2.value
+    return treeRef3.value
+}
+
+function resolveActiveName() {
+    if (zlDeviceData.value.length) return '0'
+    if (bxsDeviceData.value.length) return '1'
+    if (frontDeviceData.value.length) return '2'
+    return ''
+}
+
+function selectDevicePanel(panelName: string, node?: any) {
+    if (!node) return
+    emit('changeDeviceType', panelName, node)
+    nextTick(() => {
+        getActiveTreeRef()?.setCurrentKey(node.id)
+    })
+}
+
+const changeDevice = (val: CollapseModelValue) => {
+    if (Array.isArray(val) || val == null || val === '') return
+    const panelName = String(val)
+    const collectLeaves = props.leafMode === 'device' ? collectDeviceApiLeaves : collectDeviceLeaves
+    const { govern, portable, monitor } = collectLeaves(
+        zlDevList.value,
+        bxsDeviceData.value,
+        frontDeviceData.value
+    )
+
+    const panelMap: Record<string, { nodes: any[]; clearOthers: any[][] }> = {
+        '0': { nodes: govern, clearOthers: [portable, monitor] },
+        '1': { nodes: portable, clearOthers: [govern, monitor] },
+        '2': { nodes: monitor, clearOthers: [govern, portable] }
+    }
+
+    const panel = panelMap[panelName]
+    if (!panel) return
+
+    panel.clearOthers.forEach(list => list.forEach(item => (item.checked = false)))
+    selectDevicePanel(panelName, panel.nodes[0])
+}
+
+const setActiveName = () => {
+    activeName.value = resolveActiveName()
+    if (activeName.value) {
+        nextTick(() => changeDevice(activeName.value))
+    }
+}
+
 watch(
     () => props.data,
-    (val, oldVal) => {
-        if (val && val.length != 0) {
-            val.map((item: any) => {
-                if (item.name == '治理设备') {
-                    zlDeviceData.value = []
-                    item.children.map((vv: any) => {
-                        zlDeviceData.value.push(vv)
-                    })
-                    zlDevList.value = JSON.parse(JSON.stringify(zlDeviceData.value))
-                } else if (item.name == '便携式设备') {
-                    bxsDeviceData.value = []
-                    item.children.map((vv: any) => {
-                        bxsDeviceData.value.push(vv)
-                    })
-                } else if (item.name == '监测设备') {
-                    frontDeviceData.value = []
-
-                    item.children.map((vv: any) => {
-                        frontDeviceData.value.push(vv)
-                    })
-                }
-            })
+    val => {
+        if (!val?.length) return
+        splitTreeData(val)
+        if (treeType.value === '1') {
+            nextTick(() => setActiveName())
         }
     },
-    {
-        immediate: true,
-        deep: true
-    }
+    { immediate: true, deep: true }
 )
 
 watch(filterText, val => {
-    if (treeType.value == '2') {
-        treeRef4.value!.filter(val)
-    } else if (activeName.value == '0') {
-        treeRef1.value!.filter(val)
-    } else if (activeName.value == '1') {
-        treeRef2.value!.filter(val)
-    } else {
-        treeRef3.value!.filter(val)
+    getActiveTreeRef()?.filter(val)
+})
+
+watch(process, () => {
+    zlDevList.value = filterProcess(JSON.parse(JSON.stringify(zlDeviceData.value)))
+    if (activeName.value === '0') {
+        nextTick(() => changeDevice(activeName.value))
     }
 })
-watch(process, val => {
-    if (val == '' || val == undefined) {
-        zlDevList.value = JSON.parse(JSON.stringify(zlDeviceData.value))
-        console.log('🚀 ~ zlDevList.value:', zlDeviceData.value)
-    } else {
-        zlDevList.value = filterProcess(JSON.parse(JSON.stringify(zlDeviceData.value)))
-    }
-    setTimeout(() => {
-        changeDevice(activeName.value)
-    }, 0)
-})
-function filterProcess(nodes: any) {
-    if (process.value == '') {
-        return nodes
-    }
-    return nodes
-        .map(node => {
-            // 递归处理子节点
-            const children = node.children ? filterProcess(node.children) : []
 
-            // 如果当前节点的process=4，或者有子节点满足条件，则保留当前节点
-            if (node.process == process.value || children.length > 0) {
-                return {
-                    ...node,
-                    children: children
-                }
-            }
-
-            // 否则过滤掉当前节点
-            return null
-        })
-        .filter(Boolean) // 移除null节点
-}
 const onMenuCollapse = () => {
     menuCollapse.value = !menuCollapse.value
     proxy.eventBus.emit('cnTreeCollapse', menuCollapse)
 }
-const filterNode = (value: string, data: any, node: any) => {
+
+const filterNode = (value: string, data: any, node: any): boolean => {
     if (!value) return true
-    // return data.name.includes(value)
-    if (data.name) {
-        return chooseNode(value, data, node)
-    }
+    if (!data.name) return false
+    return chooseNode(value, data, node)
 }
 
-// 过滤父节点 / 子节点 (如果输入的参数是父节点且能匹配，则返回该节点以及其下的所有子节点；如果参数是子节点，则返回该节点的父节点。name是中文字符，enName是英文字符.
-const chooseNode = (value: string, data: any, node: any) => {
-    if (data.name.indexOf(value) !== -1) {
-        return true
-    }
+const chooseNode = (value: string, data: any, node: any): boolean => {
+    if (data.name.indexOf(value) !== -1) return true
+
     const level = node.level
-    // 如果传入的节点本身就是一级节点就不用校验了
-    if (level === 1) {
-        return false
-    }
-    // 先取当前节点的父节点
+    if (level === 1) return false
+
     let parentData = node.parent
-    // 遍历当前节点的父节点
-    let index = 0
-    while (index < level - 1) {
-        // 如果匹配到直接返回，此处name值是中文字符，enName是英文字符。判断匹配中英文过滤
-        if (parentData.data.name.indexOf(value) !== -1) {
-            return true
-        }
-        // 否则的话再往上一层做匹配
+    for (let i = 0; i < level - 1; i++) {
+        if (parentData?.data?.name?.indexOf(value) !== -1) return true
         parentData = parentData.parent
-        index++
     }
-    // 没匹配到返回false
     return false
 }
 
-const changeDevice = (val: any) => {
-    let arr1: any = []
-
-    //zlDeviceData
-
-    zlDevList.value.forEach((item: any) => {
-        item.children.forEach((item2: any) => {
-            item2.children.forEach((item3: any) => {
-                arr1.push(item3)
-            })
-        })
-    })
-
-    let arr2: any = []
-    bxsDeviceData.value.forEach((item: any) => {
-        // item.children.forEach((item2: any) => {
-        arr2.push(item)
-        // })
-    })
-    let arr3: any = []
-    frontDeviceData.value.forEach((item: any) => {
-        item.children.forEach((item2: any) => {
-            item2.children.forEach((item3: any) => {
-                arr3.push(item3)
-            })
-        })
-    })
-    if (val == '0') {
-        arr2.map((item: any) => {
-            item.checked = false
-        })
-
-        emit('changeDeviceType', activeName.value, arr1[0])
-        setTimeout(() => {
-            treeRef1.value?.setCurrentKey(arr1[0]?.id)
-        }, 100)
-    }
-    if (val == '1') {
-        arr1.map((item: any) => {
-            item.checked = false
-        })
-        emit('changeDeviceType', activeName.value, arr2[0])
-        setTimeout(() => {
-            treeRef2.value?.setCurrentKey(arr2[0]?.id)
-        }, 100)
-    }
-    if (val == '2') {
-        arr3.map((item: any) => {
-            item.checked = false
-        })
-
-        emit('changeDeviceType', activeName.value, arr3[0])
-        setTimeout(() => {
-            treeRef3.value?.setCurrentKey(arr3[0]?.id)
-        }, 100)
-    }
-}
-//治理
-const treeRef1 = ref<InstanceType<typeof ElTree>>()
-//便携式
-const treeRef2 = ref<InstanceType<typeof ElTree>>()
-//前置
-const treeRef3 = ref<InstanceType<typeof ElTree>>()
-const treeRef4 = ref<InstanceType<typeof ElTree>>()
-defineExpose({ treeRef1, treeRef2, treeRef3, treeRef4 })
-onMounted(() => {
-    treeType.value = props.engineering ? '2' : '1'
-    setTimeout(() => {
-        setActiveName()
-    }, 500)
-})
-
-const setActiveName = () => {
-    if (zlDeviceData.value.length != 0) {
-        zlDevList.value = filterProcess(JSON.parse(JSON.stringify(zlDeviceData.value)))
-        activeName.value = '0'
-    }
-    if (zlDeviceData.value.length === 0 && bxsDeviceData.value.length != 0) {
-        activeName.value = '1'
-    }
-    if (zlDeviceData.value.length === 0 && bxsDeviceData.value.length === 0) {
-        activeName.value = '2'
-    }
-    if (!zlDeviceData.value && !bxsDeviceData.value) {
-        activeName.value = ''
-    }
-    nextTick(() => {
-        changeDevice(activeName.value)
-    })
-}
-const loading = ref(false)
 const changeTreeType = (val: string) => {
     loading.value = true
     emit('changeTreeType', val)
-    if (val == '1') {
-        setActiveName()
+    if (val === '1') {
+        nextTick(() => setActiveName())
     }
     setTimeout(() => {
         loading.value = false
-    }, 1000)
+    }, 300)
 }
+
+onMounted(() => {
+    treeType.value = props.engineering ? '2' : '1'
+})
 </script>
 
 <style lang="scss" scoped>
@@ -486,4 +413,7 @@ const changeTreeType = (val: string) => {
 :deep(.el-input-group__prepend) {
     background-color: var(--el-fill-color-blank);
 }
+:deep(.is-disabled) {
+    display: none !important;
+}
 </style>

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', { level, ...node })
+
+        return
+
+    }
+
+
+
+    emit('init')
+
+}
+
+
+
+const loadTree = (type?: string) => {
+
+    getLineTree({ type: type === '2' ? 'engineering' : '' }).then(res => {
+
+        const leaves = decorateLineTree(res.data, type, decorators)
+
+        tree.value = res.data
+
+        selectInitialNode(type, leaves)
+
+    })
+
+}
+
+
+
+onMounted(() => {
+
+    loadTree(props.engineering ? '2' : '1')
+
+})
+
+
+
+const handleCheck = (data: any, state: any) => {
+    emit('check', data, state)
+}
+
+const handleCheckChange = (data: any, checked: any, indeterminate: any) => {
+    emit('checkChange', { data, checked, indeterminate })
+}
+
+
+
+defineExpose({ treRef })
+
+</script>

src/components/tree/govern/cloudDeviceEntryTree.vue

@@ -11,102 +11,71 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, nextTick, onMounted, defineProps } from 'vue'
+import { ref } from 'vue'
 import Tree from '../index.vue'
-import { getLineTree, getCldTree } from '@/api/cs-device-boot/csLedger'
+import { getCldTree } from '@/api/cs-device-boot/csLedger'
 import { useConfig } from '@/stores/config'
 import { querySysExcel } from '@/api/harmonic-boot/luckyexcel'
 import { useDictData } from '@/stores/dictData'
+import { createLineTreeDecorators } from './lineTreeUtils'
+import { decorateCloudTree } from './deviceTreeUtils'
+import { bootstrapWithTemplate, selectTreeNode } from './treeCommonUtils'
 
 interface Props {
     template?: boolean
     showPush?: boolean
 }
+
 const props = withDefaults(defineProps<Props>(), {
     template: false,
     showPush: false
 })
-defineOptions({
-    name: 'govern/deviceTree'
-})
+
+defineOptions({ name: 'govern/cloudDeviceEntryTree' })
 
 const emit = defineEmits(['init', 'checkChange', 'pointTypeChange', 'Policy', 'onAdd'])
+
 const config = useConfig()
-const tree = ref()
 const dictData = useDictData()
-const treRef = ref()
+const tree = ref<any[]>([])
+const treRef = ref<InstanceType<typeof Tree>>()
 const width = ref('')
 
-const info = (selectedNodeId?: string) => {
+const decorators = createLineTreeDecorators(() => config.getColorVal('elementUiPrimary'))
+
+const changePointType = (_val: any, obj: any) => {
+    emit('pointTypeChange', _val, obj)
+}
+
+const onAdd = () => emit('onAdd')
+
+async function loadTree() {
     tree.value = []
-    let arr1: any[] = []
-    getCldTree().then(res => {
-        res.data.icon = 'el-icon-Menu'
-        res.data.color = config.getColorVal('elementUiPrimary')
-        res.data?.children.map((item: any) => {
-            item.icon = 'el-icon-HomeFilled'
-            item.color = config.getColorVal('elementUiPrimary')
-            item.children.forEach((item: any) => {
-                item.icon = 'el-icon-List'
-                item.color = config.getColorVal('elementUiPrimary')
-                item.children.forEach((item2: any) => {
-                    // item2.icon = 'el-icon-List'
-                    // item2.color = config.getColorVal('elementUiPrimary')
-                    item2.icon = 'el-icon-Platform'
-                    item2.level = 2
-                    item2.color = item2.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
-                    item2.children.forEach((item3: any) => {
-                        item3.icon = 'el-icon-Platform' 
-                        item3.color =
-                            item3.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
-                        arr1.push(item3)
-                    })
-                })
-            })
-        })
-        tree.value = [res.data]
+    const res = await getCldTree()
+    const leaves = decorateCloudTree(res.data, decorators)
+    tree.value = [res.data]
 
-        nextTick(() => {
-            setTimeout(() => {
-                //初始化选中
+    const node = leaves[0]
+    if (!node) {
+        emit('init')
+        return
+    }
 
-                treRef.value?.treeRef.setCurrentKey(arr1[0].id)
-                // 注册父组件事件
-                emit('init', {
-                    level: 3,
-                    ...arr1[0]
-                })
-                changePointType('4', arr1[0])
-                return
-            }, 500)
-        })
+    await selectTreeNode(treRef.value, node, {
+        level: 3,
+        onSelect: selected => {
+            emit('init', { level: 3, ...selected })
+            changePointType('4', selected)
+        }
     })
 }
 
-const changePointType = (val: any, obj: any) => {
-    // emit('pointTypeChange', val, obj)
-}
+bootstrapWithTemplate(
+    props.template,
+    loadTree,
+    () => querySysExcel({ id: dictData.state.area[0]?.id }),
+    data => emit('Policy', data)
+)
 
-const onAdd = () => {
-    emit('onAdd')
-}
-if (props.template) {
-    querySysExcel({ id: dictData.state.area[0]?.id })
-        .then((res: any) => {
-            emit('Policy', res.data)
-            info()
-        })
-        .catch(err => {
-            info()
-        })
-} else {
-    info()
-}
-
-// 暴露 info 方法给父组件调用
-defineExpose({
-    info
-})
-
-onMounted(() => {})
+defineExpose({ info: loadTree })
 </script>

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

src/components/tree/govern/deviceTree.vue

@@ -7,210 +7,87 @@
         :data="tree"
         :height="props.height"
         @changeDeviceType="changeDeviceType"
-        @changeTreeType="info"
+        @changeTreeType="loadTree"
         :engineering="props.engineering"
+        leaf-mode="device"
     />
 </template>
 
 <script lang="ts" setup>
-import { ref, nextTick } from 'vue'
+import { ref, onMounted } from 'vue'
+import { throttle } from 'lodash'
 import Tree from '../device.vue'
 import { getDeviceTree } from '@/api/cs-device-boot/csLedger'
 import { useConfig } from '@/stores/config'
-import { throttle } from 'lodash'
+import { waitForTreeRef, type TreeRefKey } from './lineTreeUtils'
+import { createLineTreeDecorators } from './lineTreeUtils'
+import { decorateDeviceTree } from './deviceTreeUtils'
+import type { LineTreeLeaves } from './lineTreeUtils'
+
+defineOptions({ name: 'govern/deviceTree' })
 
-defineOptions({
-    name: 'govern/deviceTree'
-})
 const props = withDefaults(
     defineProps<{
         showCheckbox?: boolean
-        defaultCheckedKeys?: any
+        defaultCheckedKeys?: any[]
         height?: number
         engineering?: boolean
     }>(),
     {
         showCheckbox: false,
-        defaultCheckedKeys: [],
+        defaultCheckedKeys: () => [],
         height: 0,
         engineering: false
     }
 )
+
 const emit = defineEmits(['init', 'checkChange', 'deviceTypeChange'])
+
 const config = useConfig()
-const tree = ref()
-const treRef = ref()
-const changeDeviceType = (val: any, obj: any) => {
-    emit('deviceTypeChange', val, obj)
+const tree = ref<any[]>([])
+const treRef = ref<InstanceType<typeof Tree>>()
+const decorators = createLineTreeDecorators(() => config.getColorVal('elementUiPrimary'))
+
+const changeDeviceType = (val: any, obj: any) => emit('deviceTypeChange', val, obj)
+
+async function selectInitialNode(type: string | undefined, leaves: LineTreeLeaves) {
+    const candidates: { refKey: TreeRefKey; list: any[]; level: number }[] =
+        type === '2'
+            ? [{ refKey: 'treeRef4', list: leaves.engineering, level: 2 }]
+            : [
+                  { refKey: 'treeRef1', list: leaves.govern, level: 2 },
+                  { refKey: 'treeRef2', list: leaves.portable, level: 2 },
+                  { refKey: 'treeRef3', list: leaves.monitor, level: 2 }
+              ]
+
+    for (const { refKey, list, level } of candidates) {
+        const node = list[0]
+        if (!node) continue
+        const treeInstance = await waitForTreeRef(treRef.value, refKey)
+        treeInstance?.setCurrentKey(node.id)
+        emit('init', { level, ...node })
+        return
+    }
+    emit('init')
 }
 
-const info = (type?: string) => {
-    getDeviceTree({ type: type == '2' ? 'engineering' : '' }).then(res => {
-        let arr: any[] = []
-        let arr2: any[] = []
-        let arr3: any[] = []
-        let arr4: any[] = []
-        //治理设备
-        res.data.map((item: any) => {
-            if (type == '2') {
-                item.icon = 'el-icon-HomeFilled'
-                item.color = config.getColorVal('elementUiPrimary')
-                item.children.forEach((item: any) => {
-                    item.icon = 'el-icon-List'
-                    item.color = config.getColorVal('elementUiPrimary')
-                    item.children.forEach((item2: any) => {
-                        item2.icon = 'el-icon-Platform'
-                        item2.color = config.getColorVal('elementUiPrimary')
-                        item2.color =
-                            item2.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
-                        arr4.push(item2)
-                    })
-                })
-            } else {
-                if (item.name == '治理设备') {
-                    item.children.forEach((item: any) => {
-                        item.icon = 'el-icon-HomeFilled'
-                        item.color = config.getColorVal('elementUiPrimary')
-                        item.children.forEach((item2: any) => {
-                            item2.icon = 'el-icon-List'
-                            item2.color = config.getColorVal('elementUiPrimary')
-                            item2.children.forEach((item3: any) => {
-                                item3.pName = '治理设备'
-                                item3.icon = 'el-icon-Platform'
-                                item3.level = 2
-                                item3.color = config.getColorVal('elementUiPrimary')
-                                if (item3.comFlag === 1) {
-                                    item3.color = '#e26257 !important'
-                                }
-                                arr.push(item3)
-                            })
-                        })
-                    })
-                } else if (item.name == '便携式设备') {
-                    item.children.forEach((item: any) => {
-                        item.icon = 'el-icon-Platform'
-                        item.color = config.getColorVal('elementUiPrimary')
-                        item.color = '#e26257 !important'
-                        item.color = item.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
-                        // item.disabled =true
-                        item.pName = '便携式设备'
-                        if (item.type == 'device') {
-                            arr2.push(item)
-                        }
-                        item.children.forEach((item2: any) => {
-                            item2.icon = 'el-icon-Platform'
-                            item2.color =
-                                item2.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
-                            item2.pName = '便携式设备'
-                            // item2.children.forEach((item3: any) => {
-                            //     item3.icon = 'el-icon-Platform'
-                            //     item3.color = config.getColorVal('elementUiPrimary')
-                            //     if (item3.comFlag === 1) {
-                            //         item3.color = '#e26257 !important'
-                            //     }
-                            //     arr.push(item3)
-                            // })
-                        })
-                    })
-                } else if (item.name == '监测设备') {
-                    item.children.forEach((item: any) => {
-                        item.icon = 'el-icon-HomeFilled'
-                        item.color = config.getColorVal('elementUiPrimary')
-                        item.children.forEach((item2: any) => {
-                            item2.icon = 'el-icon-List'
-                            item2.color = config.getColorVal('elementUiPrimary')
-                            item2.children.forEach((item3: any) => {
-                                item3.pName = '监测设备'
-                                item3.icon = 'el-icon-Platform'
-                                item3.color = config.getColorVal('elementUiPrimary')
-                                if (item3.comFlag === 1) {
-                                    item3.color = '#e26257 !important'
-                                }
-                                arr3.push(item3)
-                            })
-                        })
-                    })
-                }
-            }
-        })
+const loadTree = (type?: string) => {
+    getDeviceTree({ type: type === '2' ? 'engineering' : '' }).then(res => {
+        const leaves = decorateDeviceTree(res.data, type, decorators)
         tree.value = res.data
-
-        nextTick(() => {
-            setTimeout(() => {
-                if (type == '2') {
-                    //初始化选中
-
-                    treRef.value?.treeRef4.setCurrentKey(arr4[0].id)
-                    // 注册父组件事件
-                    emit('init', {
-                        level: 2,
-                        ...arr4[0]
-                    })
-                    // changePointType('4', arr4[0])
-                    return
-                }
-                if (arr.length > 0) {
-                    treRef.value.treeRef1.setCurrentKey(arr[0].id)
-                    // 注册父组件事件
-                    emit('init', {
-                        level: 2,
-                        ...arr[0]
-                    })
-                    return
-                } else if (arr2.length > 0) {
-                    treRef.value.treeRef2.setCurrentKey(arr2[0].id)
-                    // 注册父组件事件
-                    emit('init', {
-                        level: 2,
-                        ...arr2[0]
-                    })
-                    return
-                } else if (arr3.length > 0) {
-                    console.log('🚀 ~ arr3:', arr3)
-
-                    treRef.value.treeRef3.setCurrentKey(arr3[0].id)
-                    // 注册父组件事件
-                    emit('init', {
-                        level: 2,
-                        ...arr3[0]
-                    })
-                    return
-                } else {
-                    emit('init')
-                    return
-                }
-            }, 500)
-        })
+        selectInitialNode(type, leaves)
     })
 }
 
-onMounted(() => {
-    info(props.engineering ? '2' : '1')
-})
+onMounted(() => loadTree(props.engineering ? '2' : '1'))
 
-throttle(
+const handleCheckChange = throttle(
     (data: any, checked: any, indeterminate: any) => {
-        emit('checkChange', {
-            data,
-            checked,
-            indeterminate
-        })
+        emit('checkChange', { data, checked, indeterminate })
     },
     300,
-    {
-        leading: true, // 首次触发立即执行（可选，默认 true）
-        trailing: false // 节流结束后是否执行最后一次（可选，默认 true，根据需求调整）
-    }
+    { leading: true, trailing: false }
 )
 
-const handleCheckChange = (data: any, checked: any, indeterminate: any) => {
-    emit('checkChange', {
-        data,
-        checked,
-        indeterminate
-    })
-}
-defineExpose({
-    treRef
-})
+defineExpose({ treRef })
 </script>

src/components/tree/govern/deviceTreeUtils.ts

@@ -0,0 +1,222 @@
+import type { LineTreeDecorators, LineTreeLeaves } from './lineTreeUtils'
+
+/** getDeviceTree 接口专用装饰（与 getLineTree 层级不同） */
+export function decorateDeviceTree(
+    data: any[],
+    type: string | undefined,
+    decorators: LineTreeDecorators
+): LineTreeLeaves {
+    const leaves: LineTreeLeaves = { govern: [], portable: [], monitor: [], engineering: [] }
+    const { primary, statusColor, applyMeta } = decorators
+
+    data.forEach(item => {
+        if (type === '2') {
+            applyMeta(item, { icon: 'el-icon-HomeFilled', color: primary() })
+            item.children?.forEach((child: any) => {
+                applyMeta(child, { icon: 'el-icon-List', color: primary() })
+                child.children?.forEach((grand: any) => {
+                    applyMeta(grand, {
+                        icon: 'el-icon-Platform',
+                        color: statusColor(grand.comFlag)
+                    })
+                    leaves.engineering.push(grand)
+                })
+            })
+            return
+        }
+
+        if (item.name === '治理设备') {
+            item.children?.forEach((l1: any) => {
+                applyMeta(l1, { icon: 'el-icon-HomeFilled', color: primary() })
+                l1.children?.forEach((l2: any) => {
+                    applyMeta(l2, { icon: 'el-icon-List', color: primary() })
+                    l2.children?.forEach((l3: any) => {
+                        l3.pName = '治理设备'
+                        applyMeta(l3, {
+                            icon: 'el-icon-Platform',
+                            level: 2,
+                            color: l3.comFlag === 1 ? '#e26257 !important' : primary()
+                        })
+                        leaves.govern.push(l3)
+                    })
+                })
+            })
+        } else if (item.name === '便携式设备') {
+            item.children?.forEach((l1: any) => {
+                applyMeta(l1, {
+                    icon: 'el-icon-Platform',
+                    color: statusColor(l1.comFlag)
+                })
+                l1.pName = '便携式设备'
+                if (l1.type === 'device') {
+                    leaves.portable.push(l1)
+                }
+                l1.children?.forEach((l2: any) => {
+                    applyMeta(l2, {
+                        icon: 'el-icon-Platform',
+                        color: statusColor(l2.comFlag)
+                    })
+                    l2.pName = '便携式设备'
+                })
+            })
+        } else if (item.name === '监测设备') {
+            item.children?.forEach((l1: any) => {
+                applyMeta(l1, { icon: 'el-icon-HomeFilled', color: primary() })
+                l1.children?.forEach((l2: any) => {
+                    applyMeta(l2, { icon: 'el-icon-List', color: primary() })
+                    l2.children?.forEach((l3: any) => {
+                        l3.pName = '监测设备'
+                        applyMeta(l3, {
+                            icon: 'el-icon-Platform',
+                            color: l3.comFlag === 1 ? '#e26257 !important' : primary()
+                        })
+                        leaves.monitor.push(l3)
+                    })
+                })
+            })
+        }
+    })
+
+    return leaves
+}
+
+/** 装饰 getDeviceTree 扁平列表（deviceInfoTree） */
+export function decorateDeviceInfoTree(list: any[], decorators: LineTreeDecorators): any[] {
+    const { primary, applyMeta } = decorators
+    const leaves: any[] = []
+
+    list.forEach(item => {
+        applyMeta(item, { icon: 'el-icon-HomeFilled', color: primary() })
+        item.children?.forEach((l2: any) => {
+            applyMeta(l2, { icon: 'el-icon-List', color: primary() })
+            l2.children?.forEach((l3: any) => {
+                applyMeta(l3, {
+                    icon: 'el-icon-Platform',
+                    color: l3.comFlag === 1 || l3.comFlag === 3 ? '#e26257 !important' : primary()
+                })
+                leaves.push(l3)
+            })
+        })
+    })
+
+    return leaves
+}
+
+/** 装饰云端设备树 getCldTree */
+export function decorateCloudTree(root: any, decorators: LineTreeDecorators): any[] {
+    const { primary, statusColor, applyMeta } = decorators
+    const leaves: any[] = []
+
+    applyMeta(root, { icon: 'el-icon-Menu', color: primary() })
+    root.children?.forEach((l1: any) => {
+        applyMeta(l1, { icon: 'el-icon-HomeFilled', color: primary() })
+        l1.children?.forEach((l2: any) => {
+            applyMeta(l2, { icon: 'el-icon-List', color: primary() })
+            l2.children?.forEach((l3: any) => {
+                applyMeta(l3, {
+                    icon: 'el-icon-Platform',
+                    level: 2,
+                    color: statusColor(l3.comFlag)
+                })
+                leaves.push(l3)
+            })
+        })
+    })
+
+    return leaves
+}
+
+/** 装饰 objTree（治理对象树） */
+export function decorateObjTree(data: any[], decorators: LineTreeDecorators): any[] {
+    const { primary, applyMeta } = decorators
+    const leaves: any[] = []
+
+    data.forEach(l1 => {
+        applyMeta(l1, { icon: 'el-icon-HomeFilled', color: primary(), level: 1 })
+        l1.children?.forEach((l2: any) => {
+            applyMeta(l2, { icon: 'el-icon-List', color: primary(), level: 2 })
+            l2.children?.forEach((l3: any) => {
+                applyMeta(l3, { icon: 'el-icon-Platform', color: primary(), level: 3 })
+                leaves.push(l3)
+            })
+        })
+    })
+
+    return leaves
+}
+
+/** 装饰 lineTree 台账线路树（监测设备根节点） */
+export function decorateLedgerLineTree(root: any, decorators: LineTreeDecorators): any[] {
+    const { primary, statusColor, applyMeta } = decorators
+    const leaves: any[] = []
+
+    if (!root) return leaves
+
+    applyMeta(root, { icon: 'el-icon-Menu', color: primary(), level: 0 })
+    if (!Array.isArray(root.children)) root.children = []
+
+    root.children.forEach((l1: any) => {
+        applyMeta(l1, { icon: 'el-icon-HomeFilled', color: primary(), level: 1 })
+        if (!Array.isArray(l1.children)) l1.children = []
+        l1.children.forEach((l2: any) => {
+            applyMeta(l2, { icon: 'el-icon-List', color: primary(), level: 2 })
+            if (!Array.isArray(l2.children)) l2.children = []
+            l2.children.forEach((l3: any) => {
+                applyMeta(l3, {
+                    icon: 'el-icon-Platform',
+                    color: statusColor(l3.comFlag),
+                    level: 3
+                })
+                if (!Array.isArray(l3.children)) l3.children = []
+                l3.children.forEach((l4: any) => {
+                    applyMeta(l4, {
+                        icon: 'el-icon-Platform',
+                        color: statusColor(l4.comFlag),
+                        level: 4
+                    })
+                    leaves.push(l4)
+                })
+            })
+        })
+    })
+
+    return leaves
+}
+
+/** getDeviceTree 接口叶子收集（3 层结构，便携式为 type=device 节点） */
+export function collectDeviceApiLeaves(
+    governNodes: any[],
+    portableNodes: any[],
+    monitorNodes: any[]
+): { govern: any[]; portable: any[]; monitor: any[] } {
+    const govern: any[] = []
+    const portable: any[] = []
+    const monitor: any[] = []
+
+    governNodes.forEach(l1 => {
+        l1.children?.forEach((l2: any) => {
+            l2.children?.forEach((l3: any) => govern.push(l3))
+        })
+    })
+
+    portableNodes.forEach(l1 => {
+        if (l1.type === 'device') portable.push(l1)
+    })
+
+    monitorNodes.forEach(l1 => {
+        l1.children?.forEach((l2: any) => {
+            l2.children?.forEach((l3: any) => monitor.push(l3))
+        })
+    })
+
+    return { govern, portable, monitor }
+}
+
+/** 从 lineTree 数据中解析监测设备根节点 */
+export function resolveMonitorRoot(data: any): any | null {
+    if (Array.isArray(data)) {
+        return data.find(item => item.name === '监测设备') ?? null
+    }
+    if (data?.name === '监测设备') return data
+    return null
+}

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,172 @@
+import { nextTick } from 'vue'
+
+export interface LineTreeLeaves {
+    govern: any[]
+    portable: any[]
+    monitor: any[]
+    engineering: any[]
+}
+
+export interface LineTreeDecorators {
+    primary: () => string
+    statusColor: (comFlag: number) => string
+    applyMeta: (
+        node: any,
+        meta: { icon: string; color?: string; level?: number; disabled?: boolean }
+    ) => void
+}
+
+export function createLineTreeDecorators(getPrimaryColor: () => string): LineTreeDecorators {
+    const offlineColor = '#e26257 !important'
+    const statusColor = (comFlag: number) => (comFlag === 2 ? getPrimaryColor() : offlineColor)
+
+    const applyMeta = (
+        node: any,
+        meta: { icon: string; color?: string; level?: number; disabled?: boolean }
+    ) => {
+        node.icon = meta.icon
+        if (meta.color !== undefined) node.color = meta.color
+        if (meta.level !== undefined) node.level = meta.level
+        if (meta.disabled) node.disabled = true
+    }
+
+    return {
+        primary: getPrimaryColor,
+        statusColor,
+        applyMeta
+    }
+}
+
+export type TreeRefKey = 'treeRef1' | 'treeRef2' | 'treeRef3' | 'treeRef4'
+
+export interface DecorateLineTreeOptions {
+    /** 是否禁用父级节点（分析树隐藏父节点，测点树不禁用） */
+    disableParents?: boolean
+}
+
+/** 装饰线路树节点并收集可选叶子节点 */
+export function decorateLineTree(
+    data: any[],
+    type: string | undefined,
+    decorators: LineTreeDecorators,
+    options: DecorateLineTreeOptions = {}
+): LineTreeLeaves {
+    const leaves: LineTreeLeaves = { govern: [], portable: [], monitor: [], engineering: [] }
+    const { primary, statusColor, applyMeta } = decorators
+    const disableParents = options.disableParents ?? true
+    const parentDisabled = disableParents ? ({ disabled: true } as const) : {}
+
+    data.forEach(item => {
+        if (type === '2') {
+            applyMeta(item, { icon: 'el-icon-HomeFilled', color: primary(), ...parentDisabled })
+            item.children?.forEach((child: any) => {
+                applyMeta(child, { icon: 'el-icon-List', color: primary(), ...parentDisabled })
+                child.children?.forEach((grand: any) => {
+                    applyMeta(grand, {
+                        icon: 'el-icon-Platform',
+                        color: statusColor(grand.comFlag),
+                        level: 2,
+                        ...parentDisabled
+                    })
+                    grand.children?.forEach((leaf: any) => {
+                        applyMeta(leaf, { icon: 'el-icon-Platform', color: statusColor(leaf.comFlag) })
+                        leaves.engineering.push(leaf)
+                    })
+                })
+            })
+            return
+        }
+
+        if (item.name === '治理设备') {
+            item.children?.forEach((l1: any) => {
+                applyMeta(l1, { icon: 'el-icon-HomeFilled', color: primary(), level: 1, ...parentDisabled })
+                l1.children?.forEach((l2: any) => {
+                    applyMeta(l2, { icon: 'el-icon-List', color: primary(), level: 1, ...parentDisabled })
+                    l2.children?.forEach((l3: any) => {
+                        applyMeta(l3, {
+                            icon: 'el-icon-Platform',
+                            color: statusColor(l3.comFlag),
+                            level: 2,
+                            ...parentDisabled
+                        })
+                        l3.children?.forEach((l4: any) => {
+                            applyMeta(l4, { icon: 'el-icon-Platform', color: statusColor(l4.comFlag) })
+                            leaves.govern.push(l4)
+                        })
+                    })
+                })
+            })
+        } else if (item.name === '便携式设备') {
+            item.children?.forEach((l1: any) => {
+                applyMeta(l1, { icon: 'el-icon-Platform', color: statusColor(l1.comFlag) })
+                l1.children?.forEach((l2: any) => {
+                    applyMeta(l2, { icon: 'el-icon-Platform', color: statusColor(l2.comFlag) })
+                    leaves.portable.push(l2)
+                })
+            })
+        } else if (item.name === '监测设备') {
+            item.children?.forEach((l1: any) => {
+                applyMeta(l1, { icon: 'el-icon-HomeFilled', color: primary(), level: 1, ...parentDisabled })
+                l1.children?.forEach((l2: any) => {
+                    applyMeta(l2, { icon: 'el-icon-List', color: primary(), level: 1, ...parentDisabled })
+                    l2.children?.forEach((l3: any) => {
+                        applyMeta(l3, {
+                            icon: 'el-icon-Platform',
+                            color: statusColor(l3.comFlag),
+                            level: 1,
+                            ...parentDisabled
+                        })
+                        l3.children?.forEach((l4: any) => {
+                            applyMeta(l4, { icon: 'el-icon-Platform', color: statusColor(l4.comFlag) })
+                            leaves.monitor.push(l4)
+                        })
+                    })
+                })
+            })
+        }
+    })
+
+    return leaves
+}
+
+/** 从折叠面板树数据中收集叶子节点（与 decorateLineTree 层级一致） */
+export function collectDeviceLeaves(
+    governNodes: any[],
+    portableNodes: any[],
+    monitorNodes: any[]
+): Pick<LineTreeLeaves, 'govern' | 'portable' | 'monitor'> {
+    const govern: any[] = []
+    const portable: any[] = []
+    const monitor: any[] = []
+
+    governNodes.forEach(l1 => {
+        l1.children?.forEach((l2: any) => {
+            l2.children?.forEach((l3: any) => {
+                l3.children?.forEach((l4: any) => govern.push(l4))
+            })
+        })
+    })
+
+    portableNodes.forEach(l1 => {
+        l1.children?.forEach((l2: any) => portable.push(l2))
+    })
+
+    monitorNodes.forEach(l1 => {
+        l1.children?.forEach((l2: any) => {
+            l2.children?.forEach((l3: any) => {
+                l3.children?.forEach((l4: any) => monitor.push(l4))
+            })
+        })
+    })
+
+    return { govern, portable, monitor }
+}
+
+export async function waitForTreeRef(treRef: any, refKey: TreeRefKey, maxRetries = 20) {
+    for (let i = 0; i < maxRetries; i++) {
+        await nextTick()
+        if (treRef?.[refKey]) return treRef[refKey]
+        await new Promise(resolve => setTimeout(resolve, 50))
+    }
+    return null
+}

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

@@ -5,204 +5,99 @@
         :data="tree"
         default-expand-all
         @changePointType="changePointType"
-        @changeTreeType="info"
+        @changeTreeType="loadTree"
     />
 </template>
 
 <script lang="ts" setup>
-import { ref, nextTick, onMounted, defineProps } from 'vue'
+import { ref, nextTick } from 'vue'
 import Tree from '../point.vue'
 import { getLineTree } from '@/api/cs-device-boot/csLedger'
 import { useConfig } from '@/stores/config'
 import { querySysExcel } from '@/api/harmonic-boot/luckyexcel'
-import { useDictData } from '@/stores/dictData'
-// const props = defineProps(['template'])
+import {
+    createLineTreeDecorators,
+    decorateLineTree,
+    waitForTreeRef,
+    type LineTreeLeaves,
+    type TreeRefKey
+} from './lineTreeUtils'
+
 interface Props {
     template?: boolean
 }
+
 const props = withDefaults(defineProps<Props>(), {
     template: false
 })
+
 defineOptions({
-    name: 'govern/deviceTree'
+    name: 'govern/pointTree'
 })
 
 const emit = defineEmits(['init', 'checkChange', 'pointTypeChange', 'Policy'])
+
 const config = useConfig()
-const tree = ref()
-const dictData = useDictData()
-const treRef = ref()
+const tree = ref<any[]>([])
+const treRef = ref<InstanceType<typeof Tree>>()
 const width = ref('')
 
-const info = (type?: string) => {
-    tree.value = []
-    let arr1: any[] = []
-    let arr2: any[] = []
-    let arr3: any[] = []
-    let arr4: any[] = []
-    getLineTree({ type: type == '2' ? 'engineering' : '' }).then(res => {
-        //治理设备
+const decorators = createLineTreeDecorators(() => config.getColorVal('elementUiPrimary'))
 
-        res.data.map((item: any) => {
-            if (type == '2') {
-                item.icon = 'el-icon-HomeFilled'
-                item.color = config.getColorVal('elementUiPrimary')
-                item.children.forEach((item: any) => {
-                    item.icon = 'el-icon-List'
-                    item.color = config.getColorVal('elementUiPrimary')
-                    item.children.forEach((item2: any) => {
-                        // item2.icon = 'el-icon-List'
-                        // item2.color = config.getColorVal('elementUiPrimary')
-                        item2.icon = 'el-icon-Platform'
-                        item2.level = 2
-                        item2.color =
-                            item2.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
-                        item2.children.forEach((item3: any) => {
-                            item3.icon = 'el-icon-Platform'
-
-                            item3.color =
-                                item3.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
-                            arr4.push(item3)
-                            // item3.children.forEach((item4: any) => {
-                            //     item4.icon = 'el-icon-Platform'
-                            //     item4.color =
-                            //         item4.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
-
-                            // })
-                        })
-                    })
-                })
-            } else {
-                if (item.name == '治理设备') {
-                    item.children.forEach((item: any) => {
-                        item.icon = 'el-icon-HomeFilled'
-                        item.level = 1
-                        item.color = config.getColorVal('elementUiPrimary')
-                        item.children.forEach((item2: any) => {
-                            item2.icon = 'el-icon-List'
-                            item2.level = 1
-                            item2.color = config.getColorVal('elementUiPrimary')
-                            item2.children.forEach((item3: any) => {
-                                item3.icon = 'el-icon-Platform'
-                                item3.level = 2
-                                item3.color =
-                                    item3.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
-                                item3.children.forEach((item4: any) => {
-                                    item4.icon = 'el-icon-Platform'
-                                    item4.color =
-                                        item4.comFlag === 2
-                                            ? config.getColorVal('elementUiPrimary')
-                                            : '#e26257 !important'
-                                    // item4.color = '#e26257 !important'
-                                    arr1.push(item4)
-                                })
-                            })
-                        })
-                    })
-                } else if (item.name == '便携式设备') {
-                    item.children.forEach((item: any) => {
-                        item.icon = 'el-icon-Platform'
-                        item.color = config.getColorVal('elementUiPrimary')
-                        item.color = item.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
-                        item.children.forEach((item2: any) => {
-                            item2.icon = 'el-icon-Platform'
-                            item2.color =
-                                item2.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
-                            arr2.push(item2)
-                        })
-                    })
-                } else if (item.name == '监测设备') {
-                    item.children.forEach((item: any) => {
-                        item.icon = 'el-icon-HomeFilled'
-                        item.level = 1
-                        item.color = config.getColorVal('elementUiPrimary')
-                        item.children.forEach((item2: any) => {
-                            item2.icon = 'el-icon-List'
-                            item2.level = 1
-                            item2.color = config.getColorVal('elementUiPrimary')
-                            item2.children.forEach((item3: any) => {
-                                item3.icon = 'el-icon-Platform'
-                                item3.level = 1
-                                item3.color =
-                                    item3.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
-                                item3.children.forEach((item4: any) => {
-                                    item4.icon = 'el-icon-Platform'
-                                    item4.color =
-                                        item4.comFlag === 2
-                                            ? config.getColorVal('elementUiPrimary')
-                                            : '#e26257 !important'
-                                    // item4.color = '#e26257 !important'
-                                    arr3.push(item4)
-                                })
-                            })
-                        })
-                    })
-                }
-            }
-        })
-        tree.value = res.data
-
-        nextTick(() => {
-            setTimeout(() => {
-                if (type == '2') {
-                    //初始化选中
-
-                    treRef.value?.treeRef4.setCurrentKey(arr4[0].id)
-                    // 注册父组件事件
-                    emit('init', {
-                        level: 3,
-                        ...arr4[0]
-                    })
-                    changePointType('4', arr4[0])
-                    return
-                } else if (arr1.length > 0) {
-                    //初始化选中
-                    treRef.value?.treeRef1.setCurrentKey(arr1[0].id)
-                    // 注册父组件事件
-                    emit('init', {
-                        level: 2,
-                        ...arr1[0]
-                    })
-                    return
-                } else if (arr2.length > 0) {
-                    //初始化选中
-                    treRef.value?.treeRef2.setCurrentKey(arr2[0].id)
-                    // 注册父组件事件
-                    emit('init', {
-                        level: 2,
-                        ...arr2[0]
-                    })
-                    return
-                } else if (arr3.length > 0) {
-                    treRef.value?.treeRef3?.setCurrentKey(arr3[0].id)
-                    emit('init', {
-                        level: 2,
-                        ...arr3[0]
-                    })
-                    return
-                } else {
-                    emit('init')
-                    return
-                }
-            }, 500)
-        })
-    })
-}
 const changePointType = (val: any, obj: any) => {
     emit('pointTypeChange', val, obj)
 }
-if (props.template) {
-    // id: dictData.state.area[0]?.id
-    querySysExcel({})
-        .then((res: any) => {
-            emit('Policy', res.data)
-            info()
-        })
-        .catch(err => {
-            info()
-        })
-} else {
-    info()
+
+async function selectInitialNode(type: string | undefined, leaves: LineTreeLeaves) {
+    const candidates: { refKey: TreeRefKey; list: any[]; level: number }[] =
+        type === '2'
+            ? [{ refKey: 'treeRef4', list: leaves.engineering, level: 3 }]
+            : [
+                  { refKey: 'treeRef1', list: leaves.govern, level: 2 },
+                  { refKey: 'treeRef2', list: leaves.portable, level: 2 },
+                  { refKey: 'treeRef3', list: leaves.monitor, level: 2 }
+              ]
+
+    for (const { refKey, list, level } of candidates) {
+        const node = list[0]
+        if (!node) continue
+
+        const treeInstance = await waitForTreeRef(treRef.value, refKey)
+        treeInstance?.setCurrentKey(node.id)
+        emit('init', { level, ...node })
+
+        if (type === '2') {
+            changePointType('4', node)
+        }
+        return
+    }
+
+    emit('init')
 }
-onMounted(() => {})
+
+const loadTree = (type?: string) => {
+    tree.value = []
+    getLineTree({ type: type === '2' ? 'engineering' : '' }).then(res => {
+        const leaves = decorateLineTree(res.data, type, decorators, { disableParents: false })
+        tree.value = res.data
+        nextTick(() => selectInitialNode(type, leaves))
+    })
+}
+
+function bootstrap() {
+    if (props.template) {
+        querySysExcel({})
+            .then((res: any) => {
+                emit('Policy', res.data)
+                loadTree()
+            })
+            .catch(() => loadTree())
+    } else {
+        loadTree()
+    }
+}
+
+bootstrap()
+
+defineExpose({ treRef })
 </script>

src/components/tree/govern/pointTreeWx.vue

@@ -22,14 +22,14 @@
                     @node-click="clickNode"
                     :expand-on-click-node="false"
                 >
-                    <template #default="{ node, data }">
+                    <template #default="{ node, data: nodeData }">
                         <span class="custom-tree-node">
                             <div class="left" style="display: flex; align-items: center">
                                 <Icon
-                                    :name="data.icon"
+                                    :name="nodeData.icon"
                                     style="font-size: 16px"
-                                    :style="{ color: data.color }"
-                                    v-if="data.icon"
+                                    :style="{ color: nodeData.color }"
+                                    v-if="nodeData.icon"
                                 />
                                 <span style="margin-left: 5px">{{ node.label }}</span>
                             </div>
@@ -42,128 +42,83 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, nextTick, watch, defineProps, defineEmits } from 'vue'
-import { getSchemeTree, getTestRecordInfo } from '@/api/cs-device-boot/planData'
+import { ref, watch } from 'vue'
+import { getSchemeTree } from '@/api/cs-device-boot/planData'
 import { useConfig } from '@/stores/config'
-import useCurrentInstance from '@/utils/useCurrentInstance'
 import { ElTree } from 'element-plus'
 import { querySysExcel } from '@/api/harmonic-boot/luckyexcel'
-import { useDictData } from '@/stores/dictData'
-defineOptions({
-    name: 'govern/schemeTree'
-})
+import { createLineTreeDecorators } from './lineTreeUtils'
+import { bootstrapWithTemplate } from './treeCommonUtils'
+import { createTreeFilterNode } from './treeFilterUtils'
+
+defineOptions({ name: 'govern/schemeTree', inheritAttrs: false })
 
 interface Props {
     template?: boolean
 }
-const dictData = useDictData()
-const props = withDefaults(defineProps<Props>(), {
-    template: false
-})
-const filterText = ref('')
-watch(filterText, val => {
-    treRef.value!.filter(val)
-})
 
-const filterNode = (value: string, data: any, node: any) => {
-    if (!value) return true
-    // return data.name.includes(value)
-    if (data.name) {
-        return chooseNode(value, data, node)
-    }
-}
-const chooseNode = (value: string, data: any, node: any) => {
-    if (data.name.indexOf(value) !== -1) {
-        return true
-    }
-    const level = node.level
-    // 如果传入的节点本身就是一级节点就不用校验了
-    if (level === 1) {
-        return false
-    }
-    // 先取当前节点的父节点
-    let parentData = node.parent
-    // 遍历当前节点的父节点
-    let index = 0
-    while (index < level - 1) {
-        // 如果匹配到直接返回，此处name值是中文字符，enName是英文字符。判断匹配中英文过滤
-        if (parentData.data.name.indexOf(value) !== -1) {
-            return true
-        }
-        // 否则的话再往上一层做匹配
-        parentData = parentData.parent
-        index++
-    }
-    // 没匹配到返回false
-    return false
-}
-/** 树形结构数据 */
-const defaultProps = {
-    children: 'children',
-    label: 'name',
-    value: 'id'
-}
+const props = withDefaults(defineProps<Props>(), { template: false })
 
 const emit = defineEmits(['init', 'checkChange', 'nodeChange', 'editNode', 'getChart', 'Policy'])
-const config = useConfig()
-const tree = ref()
-const treRef = ref()
-const id: any = ref(null)
-const treeData = ref({})
-//获取方案树形数据
-const getTreeList = () => {
-    getSchemeTree().then(res => {
-        let arr: any[] = []
 
-        res.data.forEach((item: any) => {
-            item.icon = 'el-icon-Menu'
-            item.color = config.getColorVal('elementUiPrimary')
-            item?.children.forEach((item2: any) => {
-                item2.icon = 'el-icon-Document'
-                item2.color = config.getColorVal('elementUiPrimary')
-                arr.push(item2)
-            })
+const config = useConfig()
+const tree = ref<any[]>([])
+const treRef = ref<InstanceType<typeof ElTree>>()
+const filterText = ref('')
+const id = ref<string | null>(null)
+const planId = ref('')
+
+const defaultProps = { children: 'children', label: 'name', value: 'id' }
+const decorators = createLineTreeDecorators(() => config.getColorVal('elementUiPrimary'))
+const filterNode = createTreeFilterNode()
+
+watch(filterText, val => treRef.value?.filter(val))
+
+function decorateSchemeTree(data: any[]): any[] {
+    const { primary, applyMeta } = decorators
+    const leaves: any[] = []
+
+    data.forEach(item => {
+        applyMeta(item, { icon: 'el-icon-Menu', color: primary() })
+        item.children?.forEach((child: any) => {
+            applyMeta(child, { icon: 'el-icon-Document', color: primary() })
+            leaves.push(child)
         })
+    })
+
+    return leaves
+}
+
+function getTreeList() {
+    getSchemeTree().then(res => {
+        const leaves = decorateSchemeTree(res.data)
         tree.value = res.data
-        nextTick(() => {
-            if (arr.length) {
-                treRef.value.setCurrentKey(id.value || arr[0].id)
-                let list = id.value ? arr.find((item: any) => item.id == id.value) : arr[0]
-                // 注册父组件事件
-                emit('init', {
-                    level: 2,
-                    ...list
-                })
-            } else {
-                emit('init')
-            }
-        })
+
+        const node = id.value ? leaves.find(item => item.id == id.value) : leaves[0]
+        if (!node) {
+            emit('init')
+            return
+        }
+
+        treRef.value?.setCurrentKey(node.id)
+        emit('init', { level: 2, ...node })
     })
 }
 
-//方案id
-const planId: any = ref('')
-
-const clickNode = (e: anyObj) => {
-    e?.children ? (planId.value = e.id) : (planId.value = e.pid)
+const clickNode = (e: any) => {
+    planId.value = e?.children ? e.id : e.pid
     id.value = e.id
     emit('nodeChange', e)
 }
 
-if (props.template) {
-    // id: dictData.state.area[0]?.id
-    querySysExcel({})
-        .then((res: any) => {
-            emit('Policy', res.data)
-            getTreeList()
-        })
-        .catch(err => {
-            getTreeList()
-        })
-} else {
-    getTreeList()
-}
+bootstrapWithTemplate(
+    props.template,
+    getTreeList,
+    () => querySysExcel({}),
+    data => emit('Policy', data)
+)
 </script>
+
 <style lang="scss" scoped>
 .cn-tree {
     flex-shrink: 0;

src/components/tree/govern/selectTree.vue

@@ -1,105 +1,64 @@
 <template>
-    <Tree ref="treRef" :width="width" :data="tree" default-expand-all  @checkedNodesChange="handleCheckedNodesChange"/>
+    <Tree
+        ref="treRef"
+        :width="width"
+        :data="tree"
+        default-expand-all
+        @checkedNodesChange="handleCheckedNodesChange"
+    />
 </template>
 
 <script lang="ts" setup>
-import { ref, nextTick, onMounted, defineProps } from 'vue'
+import { ref } from 'vue'
 import Tree from '../select.vue'
 import { getLineTree } from '@/api/cs-device-boot/csLedger'
 import { useConfig } from '@/stores/config'
 import { getTemplateByDept } from '@/api/harmonic-boot/luckyexcel'
 import { useDictData } from '@/stores/dictData'
-// const props = defineProps(['template'])
+import { createLineTreeDecorators, decorateLineTree } from './lineTreeUtils'
+import { bootstrapWithTemplate, selectTreeNode } from './treeCommonUtils'
+
 interface Props {
     template?: boolean
 }
-const props = withDefaults(defineProps<Props>(), {
-    template: false
-})
-defineOptions({
-    name: 'govern/deviceTree'
-})
+
+const props = withDefaults(defineProps<Props>(), { template: false })
+
+defineOptions({ name: 'govern/selectTree' })
 
 const emit = defineEmits(['init', 'checkChange', 'pointTypeChange', 'Policy'])
+
 const config = useConfig()
-const tree = ref()
 const dictData = useDictData()
-const treRef = ref()
+const tree = ref<any[]>([])
+const treRef = ref<InstanceType<typeof Tree>>()
 const width = ref('')
 
-const info = () => {
+const decorators = createLineTreeDecorators(() => config.getColorVal('elementUiPrimary'))
+
+const handleCheckedNodesChange = (nodes: any[]) => emit('checkChange', nodes)
+
+async function loadTree() {
     tree.value = []
-    let arr3: any[] = []
-    getLineTree().then(res => {
-        //治理设备
-        res.data.map((item: any) => {
-           if (item.name == '监测设备') {
-                item.children.forEach((item: any) => {
-                    item.icon = 'el-icon-HomeFilled'
-                    item.level = 1
-                    item.color = config.getColorVal('elementUiPrimary')
-                    item.children.forEach((item2: any) => {
-                        item2.icon = 'el-icon-List'
-                        item2.level = 1
-                        item2.color = config.getColorVal('elementUiPrimary')
-                        item2.children.forEach((item3: any) => {
-                            item3.icon = 'el-icon-Platform'
-                            item3.level = 1
-                            item3.color =
-                                item3.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
-                            item3.children.forEach((item4: any) => {
-                                item4.icon = 'el-icon-Platform'
-                                item4.color =
-                                    item4.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
-                                // item4.color = '#e26257 !important'
-                                arr3.push(item4)
-                            })
-                        })
-                    })
-                })
-            }
-        })
-        tree.value = res.data.filter(item => item.name == '监测设备')
-        nextTick(() => {
-            if (arr3.length) {
-                //初始化选中
-                treRef.value.treeRef.setCurrentKey(arr3[0].id)
-                // 注册父组件事件
-                emit('init', {
-                    level: 2,
-                    ...arr3[0]
-                })
-                return
-            }
-            else {
-                emit('init')
-                return
-            }
-        })
+    const res = await getLineTree()
+    const leaves = decorateLineTree(res.data, '1', decorators, { disableParents: false })
+    tree.value = res.data.filter((item: any) => item.name === '监测设备')
+
+    const node = leaves.monitor[0]
+    if (!node) {
+        emit('init')
+        return
+    }
+
+    await selectTreeNode(treRef.value, node, {
+        onSelect: selected => emit('init', { level: 2, ...selected })
     })
 }
 
-// 处理子组件传递的勾选节点变化，并转发给父组件
-const handleCheckedNodesChange = (nodes: any[]) => {
-    // 先给父组件
-    emit('checkChange', nodes)
-}
-
-
-if (props.template) {
-    getTemplateByDept({ id: dictData.state.area[0]?.id })
-        .then((res: any) => {
-            emit('Policy', res.data)
-            info()
-        })
-        .catch(err => {
-            info()
-        })
-} else {
-    info()
-}
-
-
-
-onMounted(() => {})
+bootstrapWithTemplate(
+    props.template,
+    loadTree,
+    () => getTemplateByDept({ id: dictData.state.area[0]?.id }),
+    data => emit('Policy', data)
+)
 </script>

src/components/tree/govern/treeCommonUtils.ts

@@ -0,0 +1,58 @@
+import { nextTick } from 'vue'
+import { createLineTreeDecorators, type LineTreeDecorators } from './lineTreeUtils'
+
+export { createLineTreeDecorators, type LineTreeDecorators }
+
+export function findNodeById(nodes: any[], id: string): any | null {
+    for (const node of nodes) {
+        if (node.id === id) return node
+        if (node.children?.length) {
+            const found = findNodeById(node.children, id)
+            if (found) return found
+        }
+    }
+    return null
+}
+
+export async function waitForSingleTreeRef(treRef: any, maxRetries = 20) {
+    for (let i = 0; i < maxRetries; i++) {
+        await nextTick()
+        if (treRef?.treeRef) return treRef.treeRef
+        await new Promise(resolve => setTimeout(resolve, 50))
+    }
+    return null
+}
+
+export async function selectTreeNode(
+    treRef: any,
+    node: any | undefined,
+    options?: { level?: number; onSelect?: (node: any) => void }
+) {
+    if (!node) return false
+    const treeInstance = await waitForSingleTreeRef(treRef)
+    treeInstance?.setCurrentKey(node.id)
+    options?.onSelect?.(node)
+    return true
+}
+
+export function bootstrapWithTemplate(
+    template: boolean,
+    loadFn: () => void,
+    fetchTemplate: () => Promise<any>,
+    onPolicy: (data: any) => void
+) {
+    if (template) {
+        fetchTemplate()
+            .then(res => {
+                onPolicy(res.data)
+                loadFn()
+            })
+            .catch(() => loadFn())
+    } else {
+        loadFn()
+    }
+}
+
+export function mapUserTreeNodes(data: any[], icon = 'el-icon-User', color = 'royalblue') {
+    return data.map(item => ({ ...item, icon, color }))
+}

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"
+                    v-model.trim="filterText"
+                    placeholder="请输入内容"
+                    clearable
+                    class="cn-tree__search"
+                >
                     <template #prefix>
                         <Icon name="el-icon-Search" style="font-size: 16px" />
                     </template>
                 </el-input>
-                <el-tooltip placement="bottom" :hide-after="0" v-if="props.showPush">
-                    <template #content>
-                        <span>台账推送</span>
-                    </template>
-
+                <el-tooltip v-if="props.showPush" placement="bottom" :hide-after="0" content="台账推送">
                     <Icon
                         name="el-icon-Promotion"
-                        size="20"
-                        class="fold ml10 mr10 menu-collapse"
-                        style="cursor: pointer"
+                        size="20px"
+                        class="cn-tree__push-btn"
                         :style="{ color: config.getColorVal('elementUiPrimary') }"
                         @click="onAdd"
                     />
                 </el-tooltip>
-                <!-- <Icon @click='onMenuCollapse' :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'" v-else
-                    :class="menuCollapse ? 'unfold' : ''" size='18' class='fold ml10 menu-collapse'
-                    style='cursor: pointer' v-if='props.canExpand' /> -->
+                <!-- <Icon
+                    v-if="props.canExpand"
+                    @click="onMenuCollapse"
+                    name="el-icon-Fold"
+                    size="18px"
+                    class="cn-tree__collapse-btn"
+                /> -->
             </div>
 
             <el-tree
-                :style="{ height: 'calc(100vh - 190px)' }"
-                style="overflow: auto"
                 ref="treeRef"
+                :style="{ height: treeHeight }"
                 :props="defaultProps"
                 highlight-current
                 :default-expand-all="false"
@@ -47,15 +53,15 @@
                 node-key="id"
                 v-bind="$attrs"
             >
-                <template #default="{ node, data }">
+                <template #default="{ node, data: nodeData }">
                     <span class="custom-tree-node">
                         <Icon
-                            :name="data.icon"
+                            v-if="nodeData.icon"
+                            :name="nodeData.icon"
                             style="font-size: 16px"
-                            :style="{ color: data.color }"
-                            v-if="data.icon"
+                            :style="{ color: nodeData.color }"
                         />
-                        <span style="margin-left: 4px">{{ node.label }}</span>
+                        <span class="custom-tree-node__label">{{ node.label }}</span>
                     </span>
                 </template>
             </el-tree>
@@ -66,113 +72,155 @@
 <script lang="ts" setup>
 import useCurrentInstance from '@/utils/useCurrentInstance'
 import { ElTree } from 'element-plus'
-import { ref, watch } from 'vue'
+import { ref, watch, computed } from 'vue'
 import { useConfig } from '@/stores/config'
+import { createTreeFilterNode } from './govern/treeFilterUtils'
 
-defineOptions({
-    name: 'govern/tree'
-})
+defineOptions({ name: 'govern/indexTree', inheritAttrs: false })
 
 interface Props {
     width?: string
     canExpand?: boolean
     showPush?: boolean
+    /** 默认高度基准偏移（100vh - baseOffset） */
+    baseOffset?: number
+    /** 在 baseOffset 基础上额外减去的高度 */
+    height?: number
+    /** 自定义树高度，优先级最高 */
+    treeHeight?: string
+    /** 撑满父容器高度 */
+    fillHeight?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
     width: '280px',
     canExpand: true,
-    showPush: false
+    showPush: false,
+    baseOffset: 190,
+    height: 0,
+    treeHeight: '',
+    fillHeight: false
 })
+
+const emit = defineEmits(['checkTreeNodeChange', 'onAdd', 'changePointType'])
+
 const config = useConfig()
 const { proxy } = useCurrentInstance()
 const menuCollapse = ref(false)
 const filterText = ref('')
-const defaultProps = {
-    label: 'name',
-    value: 'id'
-}
-const emit = defineEmits(['checkTreeNodeChange', 'onAdd'])
-watch(filterText, val => {
-    treeRef.value!.filter(val)
+const defaultProps = { label: 'name', value: 'id' }
+const filterNode = createTreeFilterNode()
+
+const SEARCH_BAR_HEIGHT = 42
+
+const treeHeight = computed(() => {
+    if (props.treeHeight) return props.treeHeight
+    if (props.fillHeight) return `calc(100% - ${SEARCH_BAR_HEIGHT}px)`
+    return `calc(100vh - ${props.baseOffset}px - ${props.height}px)`
 })
+
+watch(filterText, val => treeRef.value?.filter(val))
+
 const onMenuCollapse = () => {
     menuCollapse.value = !menuCollapse.value
     proxy.eventBus.emit('cnTreeCollapse', menuCollapse)
 }
-const filterNode = (value: string, data: any, node: any) => {
-    console.log(value, data, node, 'filterNode')
-    if (!value) return true
-    // return data.name.includes(value)
-    if (data.name) {
-        return chooseNode(value, data, node)
-    }
-}
 
-// 过滤父节点 / 子节点 (如果输入的参数是父节点且能匹配，则返回该节点以及其下的所有子节点；如果参数是子节点，则返回该节点的父节点。name是中文字符，enName是英文字符.
-const chooseNode = (value: string, data: any, node: any) => {
-    if (data.name.indexOf(value) !== -1) {
-        return true
-    }
-    const level = node.level
-    // 如果传入的节点本身就是一级节点就不用校验了
-    if (level === 1) {
-        return false
-    }
-    // 先取当前节点的父节点
-    let parentData = node.parent
-    // 遍历当前节点的父节点
-    let index = 0
-    while (index < level - 1) {
-        // 如果匹配到直接返回，此处name值是中文字符，enName是英文字符。判断匹配中英文过滤
-        if (parentData.data.name.indexOf(value) !== -1) {
-            return true
-        }
-        // 否则的话再往上一层做匹配
-        parentData = parentData.parent
-        index++
-    }
-    // 没匹配到返回false
-    return false
-}
 const checkTreeNodeChange = () => {
-    // console.log(treeRef.value?.getCheckedNodes(), "ikkkkkiisiiisis");
     emit('checkTreeNodeChange', treeRef.value?.getCheckedNodes())
 }
 
-const onAdd = () => {
-    emit('onAdd')
-}
+const onAdd = () => emit('onAdd')
 
 const treeRef = ref<InstanceType<typeof ElTree>>()
 defineExpose({ treeRef })
 </script>
 
 <style lang="scss" scoped>
-.cn-tree {
-    flex-shrink: 0;
+.cn-tree-root {
     display: flex;
     flex-direction: column;
-    box-sizing: border-box;
-    // padding: 10px;
+    overflow: hidden;
     height: 100%;
+    transition: width 0.3s;
+    box-sizing: border-box;
+
+    &.is-fill-height {
+        height: 100%;
+    }
+
+    &__collapse-btn {
+        color: var(--el-color-primary);
+        cursor: pointer;
+        flex-shrink: 0;
+
+        &--float {
+            margin: 20px 0 0 10px;
+        }
+    }
+}
+
+.cn-tree {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
     width: 100%;
+    box-sizing: border-box;
+    padding: 10px;
+    transition: opacity 0.3s;
+
+    &.is-hidden {
+        opacity: 0;
+        pointer-events: none;
+    }
+
+    &__toolbar {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-bottom: 10px;
+        flex-shrink: 0;
+    }
+
+    &__search {
+        flex: 1;
+        min-width: 0;
+    }
+
+    &__push-btn,
+    &__collapse-btn {
+        color: var(--el-color-primary);
+        cursor: pointer;
+        flex-shrink: 0;
+    }
+
+    &__body {
+        flex: 1;
+        min-height: 0;
+        overflow: auto;
+    }
 
     :deep(.el-tree) {
         border: 1px solid var(--el-border-color);
+        border-radius: 4px;
     }
 
     :deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
         background-color: var(--el-color-primary-light-7);
     }
-
-    .menu-collapse {
-        color: var(--el-color-primary);
-    }
 }
 
 .custom-tree-node {
     display: flex;
     align-items: center;
+    min-width: 0;
+
+    &__label {
+        margin-left: 4px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
 }
 </style>

src/components/tree/point.vue

@@ -1,24 +1,19 @@
 <!-- 设备监控使用折叠面板渲染多个tree -->
 <template>
     <div :style="{ width: menuCollapse ? '40px' : props.width }" style="display: flex; overflow: hidden">
-        <Icon
+        <!-- <Icon
             v-show="menuCollapse"
             @click="onMenuCollapse"
             :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
             :class="menuCollapse ? 'unfold' : ''"
-            size="18"
+            size="18px"
             class="fold ml10 mt20 menu-collapse"
             style="cursor: pointer"
             v-if="route.path != '/admin/govern/reportCore/statistics/index'"
-        />
+        /> -->
         <div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1, display: menuCollapse ? 'none' : '' }">
             <div style="display: flex; align-items: center" class="mb10">
-                <!-- <el-input maxlength="32"  v-model.trim="filterText" placeholder="请输入内容" clearable>
-                    <template #prefix>
-                        <Icon name="el-icon-Search" style="font-size: 16px" />
-                    </template>
-                </el-input> -->
-                <el-input maxlength="32"  v-model.trim="filterText" placeholder="请输入内容" clearable>
+                <el-input maxlength="32" v-model.trim="filterText" placeholder="请输入内容" clearable>
                     <template #prepend>
                         <el-select v-model="treeType" @change="changeTreeType" style="min-width: 75px">
                             <el-option
@@ -33,35 +28,33 @@
                         <Icon name="el-icon-Search" style="font-size: 16px" />
                     </template>
                 </el-input>
-                <!--  -->
-                <Icon
+                <!-- <Icon
                     @click="onMenuCollapse"
                     :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
                     :class="menuCollapse ? 'unfold' : ''"
-                    size="18"
+                    size="18px"
                     class="fold ml10 menu-collapse"
                     style="cursor: pointer"
                     v-if="props.canExpand && route.path != '/admin/govern/reportCore/statistics/index'"
-                />
+                /> -->
             </div>
 
             <el-collapse
                 :accordion="true"
-                v-model.trim="activeName"
+                v-model="activeName"
                 style="flex: 1; height: 100%"
                 @change="changeDevice"
                 v-if="treeType == '1'"
                 v-loading="loading"
             >
-                <el-collapse-item title="治理设备" name="0" v-if="zlDeviceData.length != 0">
-                    <el-select v-model.trim="process" clearable placeholder="请选择状态" class="mb10">
-                        <el-option label="功能调试" value="2"></el-option>
-                        <el-option label="出厂调试" value="3"></el-option>
-                        <el-option label="正式投运" value="4"></el-option>
+                <el-collapse-item title="治理设备" name="0" v-if="zlDeviceData.length">
+                    <el-select v-model="process" clearable placeholder="请选择状态" class="mb10">
+                        <el-option label="功能调试" value="2" />
+                        <el-option label="出厂调试" value="3" />
+                        <el-option label="正式投运" value="4" />
                     </el-select>
-
                     <el-tree
-                        :style="{ height: treeType.length != 0 ? 'calc(100vh - 380px)' : 'calc(100vh - 278px)' }"
+                        :style="{ height: governTreeHeight }"
                         ref="treeRef1"
                         :props="defaultProps"
                         highlight-current
@@ -72,22 +65,22 @@
                         style="overflow: auto"
                         :default-expand-all="false"
                     >
-                        <template #default="{ node, data }">
+                        <template #default="{ node, data: nodeData }">
                             <span class="custom-tree-node">
                                 <Icon
-                                    :name="data.icon"
+                                    :name="nodeData.icon"
                                     style="font-size: 16px"
-                                    :style="{ color: data.color }"
-                                    v-if="data.icon"
+                                    :style="{ color: nodeData.color }"
+                                    v-if="nodeData.icon"
                                 />
                                 <span style="margin-left: 4px">{{ node.label }}</span>
                             </span>
                         </template>
                     </el-tree>
                 </el-collapse-item>
-                <el-collapse-item title="便携式设备" name="1" v-if="bxsDeviceData.length != 0">
+                <el-collapse-item title="便携式设备" name="1" v-if="bxsDeviceData.length">
                     <el-tree
-                        :style="{ height: zlDeviceData.length != 0 ? 'calc(100vh - 340px)' : 'calc(100vh - 238px)' }"
+                        :style="{ height: otherTreeHeight }"
                         ref="treeRef2"
                         :props="defaultProps"
                         highlight-current
@@ -98,22 +91,22 @@
                         v-bind="$attrs"
                         style="overflow: auto"
                     >
-                        <template #default="{ node, data }">
+                        <template #default="{ node, data: nodeData }">
                             <span class="custom-tree-node">
                                 <Icon
-                                    :name="data.icon"
+                                    :name="nodeData.icon"
                                     style="font-size: 16px"
-                                    :style="{ color: data.color }"
-                                    v-if="data.icon"
+                                    :style="{ color: nodeData.color }"
+                                    v-if="nodeData.icon"
                                 />
                                 <span style="margin-left: 4px">{{ node.label }}</span>
                             </span>
                         </template>
                     </el-tree>
                 </el-collapse-item>
-                <el-collapse-item title="监测设备" name="2" v-if="yqfDeviceData.length != 0">
+                <el-collapse-item title="监测设备" name="2" v-if="yqfDeviceData.length">
                     <el-tree
-                        :style="{ height: zlDeviceData.length != 0 ? 'calc(100vh - 340px)' : 'calc(100vh - 238px)' }"
+                        :style="{ height: otherTreeHeight }"
                         ref="treeRef3"
                         :props="defaultProps"
                         highlight-current
@@ -124,13 +117,13 @@
                         v-bind="$attrs"
                         style="overflow: auto"
                     >
-                        <template #default="{ node, data }">
+                        <template #default="{ node, data: nodeData }">
                             <span class="custom-tree-node">
                                 <Icon
-                                    :name="data.icon"
+                                    :name="nodeData.icon"
                                     style="font-size: 16px"
-                                    :style="{ color: data.color }"
-                                    v-if="data.icon"
+                                    :style="{ color: nodeData.color }"
+                                    v-if="nodeData.icon"
                                 />
                                 <span style="margin-left: 4px">{{ node.label }}</span>
                             </span>
@@ -140,7 +133,7 @@
             </el-collapse>
             <div v-if="treeType == '2'" v-loading="loading">
                 <el-tree
-                    :style="{ height: 'calc(100vh - 188px)' }"
+                    :style="{ height: engineeringTreeHeight }"
                     class="pt10"
                     ref="treeRef4"
                     :props="defaultProps"
@@ -148,17 +141,17 @@
                     :filter-node-method="filterNode"
                     node-key="id"
                     v-bind="$attrs"
-                    :data="data"
+                    :data="props.data"
                     style="overflow: auto"
                     :default-expand-all="false"
                 >
-                    <template #default="{ node, data }">
+                    <template #default="{ node, data: nodeData }">
                         <span class="custom-tree-node">
                             <Icon
-                                :name="data.icon"
+                                :name="nodeData.icon"
                                 style="font-size: 16px"
-                                :style="{ color: data.color }"
-                                v-if="data.icon"
+                                :style="{ color: nodeData.color }"
+                                v-if="nodeData.icon"
                             />
                             <span style="margin-left: 4px">{{ node.label }}</span>
                         </span>
@@ -171,308 +164,217 @@
 
 <script lang="ts" setup>
 import useCurrentInstance from '@/utils/useCurrentInstance'
-import { ElTree } from 'element-plus'
-import { el, fa } from 'element-plus/es/locale'
-import { ref, watch, defineEmits, onMounted, nextTick, computed } from 'vue'
+import { ElTree, type CollapseModelValue } from 'element-plus'
+import { ref, watch, nextTick, computed } from 'vue'
 import { useRoute } from 'vue-router'
+import { collectDeviceLeaves } from './govern/lineTreeUtils'
+
 defineOptions({
-    name: 'govern/tree'
+    name: 'govern/point',
+    inheritAttrs: false
 })
+
 const emit = defineEmits(['changePointType', 'changeTreeType'])
+
 interface Props {
     width?: string
     canExpand?: boolean
     type?: string
-    data?: any
+    data?: any[]
 }
 
 const props = withDefaults(defineProps<Props>(), {
     width: '100%',
     canExpand: true,
     type: '',
-    data: []
+    data: () => []
 })
-const process = ref('')
+
 const route = useRoute()
 const { proxy } = useCurrentInstance()
+
+const treeType = ref('1')
+const options = [
+    { label: '设备', value: '1' },
+    { label: '工程', value: '2' }
+]
+
 const menuCollapse = ref(false)
 const activeName = ref('0')
 const filterText = ref('')
-const defaultProps = {
-    label: 'name',
-    value: 'id'
-}
-const treeType = ref('1')
-const options = [
-    {
-        label: '设备',
-        value: '1'
-    },
-    {
-        label: '工程',
-        value: '2'
-    }
-]
-//治理设备数据
-const zlDeviceData = ref<any>([])
-const zlDevList = ref<any>([])
-//便携式设备数据
-const bxsDeviceData = ref<any>([])
-//监测设备数据
-const yqfDeviceData = ref<any>([])
-watch(
-    () => props.data,
-    (val, oldVal) => {
-        if (val && val.length != 0) {
-            val.map((item: any) => {
-                if (item.name == '治理设备') {
-                    zlDeviceData.value = []
-                    item.children.map((vv: any) => {
-                        zlDeviceData.value.push(vv)
-                    })
-                    zlDevList.value = JSON.parse(JSON.stringify(zlDeviceData.value))
-                } else if (item.name == '便携式设备') {
-                    bxsDeviceData.value = []
-                    item.children.map((vv: any) => {
-                        bxsDeviceData.value.push(vv)
-                    })
-                } else if (item.name == '监测设备') {
-                    yqfDeviceData.value = []
-                    item.children.map((vv: any) => {
-                        yqfDeviceData.value.push(vv)
-                    })
-                }
-            })
-        }
-    },
-    {
-        immediate: true,
-        deep: true
-    }
+const process = ref('')
+const loading = ref(false)
+
+const defaultProps = { label: 'name', value: 'id' }
+
+const zlDeviceData = ref<any[]>([])
+const zlDevList = ref<any[]>([])
+const bxsDeviceData = ref<any[]>([])
+const yqfDeviceData = ref<any[]>([])
+
+const governTreeHeight = computed(() => 'calc(100vh - 380px)')
+const otherTreeHeight = computed(() =>
+    zlDeviceData.value.length ? 'calc(100vh - 340px)' : 'calc(100vh - 238px)'
 )
+const engineeringTreeHeight = computed(() => 'calc(100vh - 188px)')
 
-watch(filterText, val => {
-    if (treeType.value == '2') {
-        treeRef4.value!.filter(val)
-    } else if (activeName.value == '0') {
-        treeRef1.value!.filter(val)
-    } else if (activeName.value == '1') {
-        treeRef2.value!.filter(val)
-    } else {
-        treeRef3.value!.filter(val)
-    }
-})
-watch(process, val => {
-    if (val == '' || val == undefined) {
-        zlDevList.value = JSON.parse(JSON.stringify(zlDeviceData.value))
-    } else {
-        zlDevList.value = filterProcess(JSON.parse(JSON.stringify(zlDeviceData.value)))
-    }
+const treeRef1 = ref<InstanceType<typeof ElTree>>()
+const treeRef2 = ref<InstanceType<typeof ElTree>>()
+const treeRef3 = ref<InstanceType<typeof ElTree>>()
+const treeRef4 = ref<InstanceType<typeof ElTree>>()
 
-    setTimeout(() => {
-        changeDevice(activeName.value)
-    }, 0)
-})
+defineExpose({ treeRef1, treeRef2, treeRef3, treeRef4 })
 
-const changeDevice = (val: any) => {
-    let arr1: any = []
-    //zlDeviceData
-    zlDevList.value.forEach((item: any) => {
-        item.children.forEach((item2: any) => {
-            item2.children.forEach((item3: any) => {
-                item3.children.forEach((item4: any) => {
-                    arr1.push(item4)
-                })
-            })
-        })
+function splitTreeData(val: any[]) {
+    zlDeviceData.value = []
+    bxsDeviceData.value = []
+    yqfDeviceData.value = []
+
+    val.forEach(item => {
+        if (item.name === '治理设备') {
+            zlDeviceData.value = item.children ?? []
+        } else if (item.name === '便携式设备') {
+            bxsDeviceData.value = item.children ?? []
+        } else if (item.name === '监测设备') {
+            yqfDeviceData.value = item.children ?? []
+        }
     })
-    let arr2: any = []
-    bxsDeviceData.value.forEach((item: any) => {
-        item.children.forEach((item2: any) => {
-            arr2.push(item2)
-        })
-    })
-    let arr3: any = []
-    yqfDeviceData.value.forEach((item: any) => {
-        item.children.forEach((item2: any) => {
-            item2.children.forEach((item3: any) => {
-                item3.children.forEach((item4: any) => {
-                    arr3.push(item4)
-                })
-            })
-        })
-    })
-    activeName.value = val
-    if (val == '0') {
-        arr2.map((item: any) => {
-            item.checked = false
-        })
-        emit('changePointType', activeName.value, arr1[0])
-        setTimeout(() => {
-            treeRef1.value?.setCurrentKey(arr1[0]?.id)
-        }, 100)
-    }
-    if (val == '1') {
-        arr1.map((item: any) => {
-            item.checked = false
-        })
-        emit('changePointType', activeName.value, arr2[0])
-        setTimeout(() => {
-            treeRef2.value?.setCurrentKey(arr2[0]?.id)
-        }, 100)
-    }
-    if (val == '2') {
-        arr3.map((item: any) => {
-            item.checked = false
-        })
-        emit('changePointType', activeName.value, arr3[0])
-        setTimeout(() => {
-            treeRef3.value?.setCurrentKey(arr3[0]?.id)
-        }, 100)
-    }
-    // if(activeName.value){
-    //    emit('changePointType', activeName.value)
-    // }
-}
-const onMenuCollapse = () => {
-    menuCollapse.value = !menuCollapse.value
-    proxy.eventBus.emit('cnTreeCollapse', menuCollapse)
-}
-const filterNode = (value: string, data: any, node: any) => {
-    if (!value) return true
-    // return data.name.includes(value)
-    if (data.name) {
-        return chooseNode(value, data, node)
-    }
+
+    zlDevList.value = filterProcess(JSON.parse(JSON.stringify(zlDeviceData.value)))
 }
 
-function filterProcess(nodes: any) {
-    if (process.value == '') {
-        return nodes
-    }
+/** 测点树专用：level=2 按 process 过滤，其余层级保留有子节点或匹配的节点 */
+function filterProcess(nodes: any[]): any[] {
+    if (!process.value) return nodes
+
     return nodes
         .map(node => {
-            // 递归处理子节点
             const children = node.children ? filterProcess(node.children) : []
 
-            // 对于设备层级（level=2），只保留 process 值匹配的节点
             if (node.level === 2) {
                 if (node.process == process.value) {
-                    return {
-                        ...node,
-                        children: children
-                    }
+                    return { ...node, children }
                 }
                 return null
             }
 
-            // 对于其他节点：
-            // 1. 如果有满足条件的子节点则保留
-            // 2. 如果本身 process 值匹配则保留
-            // 3. 如果是叶子节点也保留（监测点通常没有子节点）
-            if (children.length > 0 || node.process == process.value || !node.children || node.children.length === 0) {
-                return {
-                    ...node,
-                    children: children
-                }
+            if (children.length > 0 || node.process == process.value || !node.children?.length) {
+                return { ...node, children }
             }
 
             return null
         })
-        .filter(Boolean) // 移除null节点
+        .filter(Boolean)
 }
 
-// function filterProcess(nodes: any) {
-//     if (process.value == '') {
-//         return nodes
-//     }
-//     return nodes
-//         .map(node => {
-//             // 递归处理子节点
-//             const children = node.children ? filterProcess(node.children) : []
-
-//             // 如果当前节点的process=4，或者有子节点满足条件，则保留当前节点
-
-//             if (node.process == process.value || children.length > 0) {
-//                 return {
-//                     ...node,
-//                     children: node.children
-//                 }
-//             }
-
-//             // 否则过滤掉当前节点
-//             return null
-//         })
-//         .filter(Boolean) // 移除null节点
-// }
-// 过滤父节点 / 子节点 (如果输入的参数是父节点且能匹配，则返回该节点以及其下的所有子节点；如果参数是子节点，则返回该节点的父节点。name是中文字符，enName是英文字符.
-const chooseNode = (value: string, data: any, node: any) => {
-    if (data.name.indexOf(value) !== -1) {
-        return true
-    }
-    const level = node.level
-    // 如果传入的节点本身就是一级节点就不用校验了
-    if (level === 1) {
-        return false
-    }
-    // 先取当前节点的父节点
-    let parentData = node.parent
-    // 遍历当前节点的父节点
-    let index = 0
-    while (index < level - 1) {
-        // 如果匹配到直接返回，此处name值是中文字符，enName是英文字符。判断匹配中英文过滤
-        if (parentData.data.name.indexOf(value) !== -1) {
-            return true
-        }
-        // 否则的话再往上一层做匹配
-        parentData = parentData.parent
-        index++
-    }
-    // 没匹配到返回false
-    return false
+function getActiveTreeRef() {
+    if (treeType.value === '2') return treeRef4.value
+    if (activeName.value === '0') return treeRef1.value
+    if (activeName.value === '1') return treeRef2.value
+    return treeRef3.value
 }
-//治理
-const treeRef1 = ref<InstanceType<typeof ElTree>>()
-//便携式
-const treeRef2 = ref<InstanceType<typeof ElTree>>()
-//在线
-const treeRef3 = ref<InstanceType<typeof ElTree>>()
-// 工程
-const treeRef4 = ref<InstanceType<typeof ElTree>>()
-defineExpose({ treeRef1, treeRef2, treeRef3, treeRef4 })
-onMounted(() => {
-    setTimeout(() => {
-        setActiveName()
-    }, 500)
-})
-const setActiveName = () => {
-    if (zlDeviceData.value.length != 0) {
-        zlDevList.value = filterProcess(JSON.parse(JSON.stringify(zlDeviceData.value)))
-        activeName.value = '0'
-    }
-    if (zlDeviceData.value.length === 0 && bxsDeviceData.value.length != 0) {
-        activeName.value = '1'
-    }
-    if (zlDeviceData.value.length === 0 && bxsDeviceData.value.length === 0) {
-        activeName.value = '2'
-    }
-    if (!zlDeviceData.value && !bxsDeviceData.value) {
-        activeName.value = '2'
-    }
+
+function resolveActiveName() {
+    if (zlDeviceData.value.length) return '0'
+    if (bxsDeviceData.value.length) return '1'
+    if (yqfDeviceData.value.length) return '2'
+    return ''
+}
+
+function selectPointPanel(panelName: string, node?: any) {
+    if (!node) return
+    emit('changePointType', panelName, node)
     nextTick(() => {
-        changeDevice(activeName.value)
+        getActiveTreeRef()?.setCurrentKey(node.id)
     })
 }
-const loading = ref(false)
+
+const changeDevice = (val: CollapseModelValue) => {
+    if (Array.isArray(val) || val == null || val === '') return
+    const panelName = String(val)
+    const { govern, portable, monitor } = collectDeviceLeaves(
+        zlDevList.value,
+        bxsDeviceData.value,
+        yqfDeviceData.value
+    )
+
+    const panelMap: Record<string, { nodes: any[]; clearOthers: any[][] }> = {
+        '0': { nodes: govern, clearOthers: [portable, monitor] },
+        '1': { nodes: portable, clearOthers: [govern, monitor] },
+        '2': { nodes: monitor, clearOthers: [govern, portable] }
+    }
+
+    const panel = panelMap[panelName]
+    if (!panel) return
+
+    panel.clearOthers.forEach(list => list.forEach(item => (item.checked = false)))
+    selectPointPanel(panelName, panel.nodes[0])
+}
+
+const setActiveName = () => {
+    activeName.value = resolveActiveName()
+    if (activeName.value) {
+        nextTick(() => changeDevice(activeName.value))
+    }
+}
+
+watch(
+    () => props.data,
+    val => {
+        if (!val?.length) return
+        splitTreeData(val)
+        if (treeType.value === '1') {
+            nextTick(() => setActiveName())
+        }
+    },
+    { immediate: true, deep: true }
+)
+
+watch(filterText, val => {
+    getActiveTreeRef()?.filter(val)
+})
+
+watch(process, () => {
+    zlDevList.value = filterProcess(JSON.parse(JSON.stringify(zlDeviceData.value)))
+    if (activeName.value === '0') {
+        nextTick(() => changeDevice(activeName.value))
+    }
+})
+
+const onMenuCollapse = () => {
+    menuCollapse.value = !menuCollapse.value
+    proxy.eventBus.emit('cnTreeCollapse', menuCollapse)
+}
+
+const filterNode = (value: string, data: any, node: any): boolean => {
+    if (!value) return true
+    if (!data.name) return false
+    return chooseNode(value, data, node)
+}
+
+const chooseNode = (value: string, data: any, node: any): boolean => {
+    if (data.name.indexOf(value) !== -1) return true
+
+    const level = node.level
+    if (level === 1) return false
+
+    let parentData = node.parent
+    for (let i = 0; i < level - 1; i++) {
+        if (parentData?.data?.name?.indexOf(value) !== -1) return true
+        parentData = parentData.parent
+    }
+    return false
+}
+
 const changeTreeType = (val: string) => {
     loading.value = true
     emit('changeTreeType', val)
-    if (val == '1') {
-        setActiveName()
+    if (val === '1') {
+        nextTick(() => setActiveName())
     }
     setTimeout(() => {
         loading.value = false
-    }, 1000)
+    }, 300)
 }
 </script>
 

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" v-model.trim="filterText" placeholder="请输入内容" clearable>
                     <template #prefix>
-                        <Icon name='el-icon-Search' style='font-size: 16px' />
+                        <Icon name="el-icon-Search" style="font-size: 16px" />
                     </template>
                 </el-input>
             </div>
-             <el-tree 
-                :style="{ height: 'calc(100vh)' }"
-                style='overflow: auto;' 
-                ref='treeRef' 
-                :props='defaultProps' 
-                highlight-current 
-                :filter-node-method='filterNode' 
-                node-key='id' 
-                show-checkbox 
-                @check="handleCheckChange" 
-                @node-click="handleNodeClick"
+            <el-tree
+                :style="{ height: 'calc(100vh - 120px)' }"
+                style="overflow: auto"
+                ref="treeRef"
+                :props="defaultProps"
+                highlight-current
+                :filter-node-method="filterNode"
+                node-key="id"
+                show-checkbox
+                @check="handleCheckChange"
                 :default-checked-keys="defaultCheckedKeys"
-                v-bind='$attrs'
+                v-bind="$attrs"
                 :default-expand-all="false"
-                >
-                <template #default='{ node, data }'>
-                    <span class='custom-tree-node'>
-                        <Icon :name='data.icon' style='font-size: 16px' :style='{ color: data.color }'
-                            v-if='data.icon' />
-                        <span style='margin-left: 4px'>{{ node.label }}</span>
+            >
+                <template #default="{ node, data: nodeData }">
+                    <span class="custom-tree-node">
+                        <Icon
+                            :name="nodeData.icon"
+                            style="font-size: 16px"
+                            :style="{ color: nodeData.color }"
+                            v-if="nodeData.icon"
+                        />
+                        <span style="margin-left: 4px">{{ node.label }}</span>
                     </span>
                 </template>
             </el-tree>
@@ -38,15 +47,13 @@
     </div>
 </template>
 
-<script lang='ts' setup>
+<script lang="ts" setup>
 import useCurrentInstance from '@/utils/useCurrentInstance'
 import { ElMessage, ElTree } from 'element-plus'
-import { emit } from 'process';
 import { ref, watch } from 'vue'
+import { createTreeFilterNode } from './govern/treeFilterUtils'
 
-defineOptions({
-    name: 'govern/tree'
-})
+defineOptions({ name: 'govern/select', inheritAttrs: false })
 
 interface Props {
     width?: string
@@ -57,174 +64,66 @@ const props = withDefaults(defineProps<Props>(), {
     width: '280px',
     canExpand: true
 })
+
+const emit = defineEmits(['changePointType', 'checkedNodesChange'])
+
 const { proxy } = useCurrentInstance()
 const menuCollapse = ref(false)
 const filterText = ref('')
-const defaultProps = {
-    label: 'name',
-    value: 'id'
-}
-const emit = defineEmits(['changePointType', 'checkedNodesChange'])
+const defaultProps = { label: 'name', value: 'id' }
+const filterNode = createTreeFilterNode()
+const checkedNodes = ref<any[]>([])
+const defaultCheckedKeys = ref<string[]>([])
+const MAX_CHECK = 5
+const MONITOR_LEVEL = 3
+
+watch(filterText, val => treeRef.value?.filter(val))
 
-watch(filterText, val => {
-    treeRef.value!.filter(val)
-    
-})
 const onMenuCollapse = () => {
     menuCollapse.value = !menuCollapse.value
     proxy.eventBus.emit('cnTreeCollapse', menuCollapse)
 }
-const filterNode = (value: string, data: any, node: any) => {
-    if (!value) return true
-    // return data.name.includes(value)
-    if (data.name) {
 
-        return chooseNode(value, data, node)
-    }
-}
+const handleCheckChange = (_data: any, checkInfo: any) => {
+    const monitoringPointNodes = (checkInfo.checkedNodes as any[]).filter(node => node.level === MONITOR_LEVEL)
 
-// 过滤父节点 / 子节点 (如果输入的参数是父节点且能匹配，则返回该节点以及其下的所有子节点；如果参数是子节点，则返回该节点的父节点。name是中文字符，enName是英文字符.
-const chooseNode = (value: string, data: any, node: any) => {
-
-    if (data.name.indexOf(value) !== -1) {
-        return true
-    }
-    const level = node.level
-    // 如果传入的节点本身就是一级节点就不用校验了
-    if (level === 1) {
-        return false
-    }
-    // 先取当前节点的父节点
-    let parentData = node.parent
-    // 遍历当前节点的父节点
-    let index = 0
-    while (index < level - 1) {
-        // 如果匹配到直接返回，此处name值是中文字符，enName是英文字符。判断匹配中英文过滤
-        if (parentData.data.name.indexOf(value) !== -1) {
-            return true
-        }
-        // 否则的话再往上一层做匹配
-        parentData = parentData.parent
-        index++
-    }
-    // 没匹配到返回false
-    return false
-}
-
-
-// 处理节点点击事件
-const handleNodeClick = (data: any, node: any, event: any) => {
- 
-}
-
-// 存储所有勾选的节点
-const checkedNodes = ref<any[]>([])
-const defaultCheckedKeys = ref<string[]>([])
-
-// 处理节点勾选变化
-const handleCheckChange = (data: any, checkInfo: any) => {
-    const { checkedNodes: nodes } = checkInfo
-    // 过滤出监测点层级(level=3)的节点
-    const monitoringPointNodes = nodes.filter((node: any) => {
-        return node.level === 3 
-    })
-    
-    
-    // 限制最多只能勾选5个监测点
-    if (monitoringPointNodes.length > 5) {
-        // 获取之前选中的节点
-        const previousCheckedNodes = checkedNodes.value || []
-        
-        // 计算新增的节点
+    if (monitoringPointNodes.length > MAX_CHECK) {
+        const previousCheckedNodes = checkedNodes.value
         const newNodes = monitoringPointNodes.filter(
-            (node: any) => !previousCheckedNodes.some((prev: any) => prev.id === node.id)
+            node => !previousCheckedNodes.some(prev => prev.id === node.id)
         )
-        
-        // 如果是从父级勾选导致超过限制，保留前几个直到达到限制数量
+
         if (newNodes.length > 0) {
-            const allowedNewCount = 5 - previousCheckedNodes.length
+            const allowedNewCount = MAX_CHECK - previousCheckedNodes.length
             if (allowedNewCount > 0) {
-                // 允许添加allowedNewCount个新节点
-                const allowedNewNodes = newNodes.slice(0, allowedNewCount)
-                const finalNodes = [...previousCheckedNodes, ...allowedNewNodes]
-                
+                const finalNodes = [...previousCheckedNodes, ...newNodes.slice(0, allowedNewCount)]
                 checkedNodes.value = finalNodes
-                
-                // 设置树的勾选状态为正确的节点
                 treeRef.value?.setCheckedNodes(finalNodes)
-                
-                // 将勾选的监测点节点暴露出去
                 emit('checkedNodesChange', finalNodes)
-                
-                // 更新节点的可勾选状态
                 updateNodeCheckStatus(finalNodes.length)
-                
-                // 只有在真正超过5个时才提示警告
-                if (monitoringPointNodes.length > 5) {
-                    ElMessage.warning('最多只能选择5个监测点')
+                if (monitoringPointNodes.length > MAX_CHECK) {
+                    ElMessage.warning(`最多只能选择${MAX_CHECK}个监测点`)
                 }
                 return
             }
         }
-        
-        // 其他情况回滚到之前的状态
-        ElMessage.warning('最多只能选择5个监测点')
+
+        ElMessage.warning(`最多只能选择${MAX_CHECK}个监测点`)
         treeRef.value?.setCheckedNodes(checkedNodes.value)
         return
     }
-    
+
     checkedNodes.value = monitoringPointNodes
-    
-    // 将勾选的监测点节点暴露出去
     emit('checkedNodesChange', monitoringPointNodes)
-    
-    // 更新节点的可勾选状态
-    updateNodeCheckStatus(monitoringPointNodes.length)
-}
-// 处理节点勾选变化
-const handleCheckChange2 = (data: any, checkInfo: any) => {
-    const { checkedNodes: nodes } = checkInfo
-    // 过滤出监测点层级(level=3)的节点
-    const monitoringPointNodes = nodes.filter((node: any) => {
-        // 监测点节点通常具有 comFlag 属性或其他标识
-        return node.level === 3 
-    })
-       // 限制最多只能勾选5个监测点
-    if (monitoringPointNodes.length > 5) {
-        ElMessage.warning('最多只能选择5个监测点')
-        // 保持之前勾选的状态
-        treeRef.value?.setCheckedNodes(checkedNodes.value)
-        return
-    }
-    
-    checkedNodes.value = monitoringPointNodes
-    
-    // 将勾选的监测点节点暴露出去
-    emit('checkedNodesChange', monitoringPointNodes)
-    
-    // 更新节点的可勾选状态
     updateNodeCheckStatus(monitoringPointNodes.length)
 }
 
-
-// 更新节点的可勾选状态
 const updateNodeCheckStatus = (currentCount: number) => {
     if (!treeRef.value) return
-    
-    // 如果已经选了5个，则禁用其他未选中的监测点节点
-    const isMaxSelected = currentCount >= 5
-    
-    // 获取所有节点并更新状态
-    const allNodes = treeRef.value.store._getAllNodes()
-    allNodes.forEach((node: any) => {
-        if (node.level === 3) { // 监测点层级
-            
-            // 如果已达到最大数量且该节点未被选中，则禁用勾选
-            if (isMaxSelected && !node.data.checked) {
-                node.data.disabled = true
-            } else {
-                node.data.disabled = false
-            }
+    const isMaxSelected = currentCount >= MAX_CHECK
+    treeRef.value.store._getAllNodes().forEach((node: any) => {
+        if (node.level === MONITOR_LEVEL) {
+            node.data.disabled = isMaxSelected && !node.checked
         }
     })
 }
@@ -233,8 +132,7 @@ const treeRef = ref<InstanceType<typeof ElTree>>()
 defineExpose({ treeRef })
 </script>
 
-
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .cn-tree {
     flex-shrink: 0;
     display: flex;

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

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

@@ -1,111 +1,111 @@
-<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">{{ 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>

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

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/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/template/dialog.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-dialog width="600px" v-model.trim='dialogVisible' :title='title'>
+    <el-dialog width="500px" v-model.trim='dialogVisible' :title='title'>
         <el-scrollbar>
             <el-form :inline='false' :model='form' label-width='auto' class="form-one" :rules='rules' ref='formRef'>
                 <el-form-item label='角色名称'>

src/utils/echartMethod.ts

@@ -1,5 +1,3 @@
-import { number } from 'vue-types'
-
 const dataProcessing = (arr: any[]) => {
     return arr
         .filter(item => typeof item === 'number' || (typeof item === 'string' && !isNaN(parseFloat(item))))
@@ -259,6 +257,32 @@ export const completeTimeSeries = (rawData: string[][]): (string | null)[][] =>
         }
     })
 
+    // 补首尾边界：首日 00:00:00、末日 23:59:59
+    const createPadItem = (timeStr: string): (string | null | undefined)[] => {
+        const result: (string | null | undefined)[] = [timeStr, '/']
+        if (template.length > 2) result.push(template[2])
+        if (template.length > 3) result.push(template[3])
+        return result
+    }
+
+    const firstDate = new Date(completedData[0][0] as string)
+    const dayStartStr = formatTime(
+        new Date(firstDate.getFullYear(), firstDate.getMonth(), firstDate.getDate(), 0, 0, 0)
+    )
+
+    const lastDate = new Date(completedData[completedData.length - 1][0] as string)
+    const dayEndStr = formatTime(new Date(lastDate.getFullYear(), lastDate.getMonth(), lastDate.getDate(), 23, 59, 59))
+
+    const firstTimeStr = formatTime(new Date(completedData[0][0] as string))
+    if (firstTimeStr !== dayStartStr) {
+        completedData.unshift(createPadItem(dayStartStr))
+    }
+
+    const lastTimeStr = formatTime(new Date(completedData[completedData.length - 1][0] as string))
+    if (lastTimeStr !== dayEndStr) {
+        completedData.push(createPadItem(dayEndStr))
+    }
+
     return completedData
 }
 

src/utils/request.ts

@@ -76,6 +76,7 @@ function createAxios<Data = any, T = ApiPromise<Data>>(
                     config.url == '/cs-harmonic-boot/limitRateDetailD/limitTimeProbabilityData' ||
                     config.url == '/cs-harmonic-boot/limitRateDetailD/limitProbabilityData' ||
                     config.url == '/system-boot/dictTree/queryByCode' ||
+                    config.url == '/system-boot/dictTree/queryByid' ||
                     config.url == '/system-boot/dictTree/query'
                 )
             )

src/views/auth/userList/popupEdit.vue

@@ -57,7 +57,7 @@
                 <el-input maxlength="32" show-word-limit v-model.trim="form.email" placeholder="请输入描述" />
             </el-form-item>
             <el-form-item label="时间段" prop="limitTime">
-                <el-slider v-model.trim="form.limitTime" style="width: 95%" range show-stops :max="24" />
+                <el-slider v-model.trim="form.limitTime" style="width: 95%" range  :max="24" />
             </el-form-item>
             <el-form-item label="起始IP" prop="limitIpStart">
                 <el-input maxlength="32" show-word-limit v-model.trim="form.limitIpStart" placeholder="请输入描述" />

src/views/govern/alarm/Transient.vue

@@ -1,5 +1,5 @@
 <template>
-    <div ref="refheader" v-show="!isWaveCharts" style="width: 100%;">
+    <div ref="refheader" v-show="!isWaveCharts" style="width: 100%">
         <TableHeader datePicker showExport>
             <template v-slot:select>
                 <el-form-item label="数据来源">
@@ -141,10 +141,11 @@ const tableStore = new TableStore({
         { title: '暂降(聚升)幅值(%)', minWidth: 100, field: 'evtParamVVaDepth', align: 'center', sortable: true },
 
         {
-            title: '操作', fixed: 'right',
+            title: '操作',
+            fixed: 'right',
             align: 'center',
             width: '180',
-       
+
             render: 'buttons',
             buttons: [
                 {
@@ -159,12 +160,12 @@ const tableStore = new TableStore({
                     },
                     click: async row => {
                         row.loading1 = true
-                        loading.value = true
-                        isWaveCharts.value = true
                         await analyseWave(row.id)
                             .then(res => {
                                 row.loading1 = false
                                 if (res != undefined) {
+                                    loading.value = true
+                                    isWaveCharts.value = true
                                     boxoList.value = row
                                     boxoList.value.persistTime = row.evtParamTm
                                     boxoList.value.featureAmplitude =

src/views/govern/alarm/alarmConfig/form.vue

@@ -0,0 +1,129 @@
+<template>
+    <el-dialog class="cn-operate-dialog" draggable v-model="dialogVisible" :title="title" width="500px"
+        @closed="handleClosed">
+        <el-form ref="formRef" :model="form" :rules="rules" label-width="auto" class="form-one">
+            <el-form-item label="方案名称" prop="name">
+                <el-input v-model.trim="form.name" maxlength="64" show-word-limit placeholder="请输入方案名称" clearable />
+            </el-form-item>
+            <el-form-item label="在线率阈值" prop="onlineRateLimit">
+                <el-input-number v-model="form.onlineRateLimit" :min="0" :max="100" :precision="0" style="width: 100%"
+                    placeholder="0-100" />
+            </el-form-item>
+            <el-form-item label="完整性阈值" prop="integrityLimit">
+                <el-input-number v-model="form.integrityLimit" :min="0" :max="100" :precision="0" style="width: 100%"
+                    placeholder="0-100" />
+            </el-form-item>
+            <!-- <el-form-item label="是否启用" prop="active">
+                <el-select v-model="form.active" placeholder="请选择" style="width: 100%">
+                    <el-option label="启用" value="1" />
+                    <el-option label="停用" value="0" />
+                </el-select>
+            </el-form-item> -->
+        </el-form>
+        <template #footer>
+            <el-button @click="handleCancel">取消</el-button>
+            <el-button type="primary" @click="onSubmit">确定</el-button>
+        </template>
+    </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from 'vue'
+import { ElMessage } from 'element-plus'
+import { inject } from 'vue'
+import { add, update } from '@/api/cs-system-boot/appinfo'
+
+const emit = defineEmits(['Cancels'])
+
+const dialogVisible = ref(false)
+const title = ref('')
+const formRef = ref()
+
+const defaultForm = () => ({
+    id: '',
+    name: '',
+    onlineRateLimit: undefined as number | undefined,
+    integrityLimit: undefined as number | undefined,
+    active: '0' as string
+})
+
+const form = reactive(defaultForm())
+
+const percentRule = (label: string) => [
+    { required: true, message: `请输入${label}`, trigger: 'blur' },
+    {
+        type: 'number',
+        min: 0,
+        max: 100,
+        message: `${label}范围为 0-100`,
+        trigger: 'blur'
+    }
+]
+
+const rules: any = {
+    name: [
+        { required: true, message: '请输入方案名称', trigger: 'blur' },
+        { min: 1, max: 64, message: '长度 1-64 个字符', trigger: 'blur' }
+    ],
+    onlineRateLimit: percentRule('在线率阈值'),
+    integrityLimit: percentRule('完整性阈值'),
+    active: [{ required: true, message: '请选择是否启用', trigger: 'change' }]
+}
+
+const isEdit = () => title.value.includes('修改')
+
+const resetForm = () => {
+    Object.assign(form, defaultForm())
+}
+
+const open = (e: { text: string; row?: any }) => {
+    formRef.value?.resetFields()
+    title.value = e.text
+    dialogVisible.value = true
+    resetForm()
+    if (e.row) {
+        form.id = e.row.id ?? ''
+        form.name = e.row.name ?? ''
+        form.onlineRateLimit = e.row.onlineRateLimit != null ? Number(e.row.onlineRateLimit) : undefined
+        form.integrityLimit = e.row.integrityLimit != null ? Number(e.row.integrityLimit) : undefined
+        form.active = String(e.row.active ?? '0')
+    }
+}
+
+const handleCancel = () => {
+    dialogVisible.value = false
+    emit('Cancels')
+}
+
+const handleClosed = () => {
+    resetForm()
+}
+
+const onSubmit = () => {
+    formRef.value?.validate(async (valid: boolean) => {
+        if (!valid) return
+        const payload = {
+            id: form.id,
+            name: form.name,
+            onlineRateLimit: form.onlineRateLimit,
+            integrityLimit: form.integrityLimit,
+            active: form.active
+        }
+        try {
+            if (isEdit()) {
+                await update(payload)
+                ElMessage.success('修改成功')
+            } else {
+                await add(payload)
+                ElMessage.success('新增成功')
+            }
+            dialogVisible.value = false
+            emit('Cancels')
+        } catch {
+            /* 请求层一般会统一提示 */
+        }
+    })
+}
+
+defineExpose({ open })
+</script>

src/views/govern/alarm/alarmConfig/index.vue

@@ -0,0 +1,152 @@
+<template>
+    <div class="default-main">
+        <TableHeader select :showReset="false" ref="TableHeaderRef">
+            <template #operation>
+                <el-button icon="el-icon-Plus" type="primary" @click="add">新增</el-button>
+            </template>
+        </TableHeader>
+        <Table ref="tableRef" />
+        <Form ref="formRef" @Cancels="tableStore.index()" />
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, provide, nextTick } from 'vue'
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import TableHeader from '@/components/table/header/index.vue'
+import { ElMessage } from 'element-plus'
+import { toggleActive, csDelete } from '@/api/cs-system-boot/appinfo'
+import Form from './form.vue'
+defineOptions({
+    name: 'govern/alarmConfig'
+})
+const formTabRef = ref()
+const formRef = ref()
+const tableStore: any = new TableStore({
+    url: '/cs-system-boot/csAlarmSet/listAll',
+    method: 'POST',
+    showPage: false,
+    column: [
+        {
+            field: 'index',
+            title: '序号',
+            width: '80',
+            formatter: (row: any) => {
+                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
+            }
+        },
+        { field: 'name', title: '名称' },
+        { field: 'onlineRateLimit', title: '在线率阈值' },
+        { field: 'integrityLimit', title: '完整性阈值' },
+        { field: 'updateTime', title: '创建时间' },
+        {
+            title: '是否启用',
+            render: 'switch',
+            width: 100,
+            field: 'active',
+            activeText: '启用',
+            inactiveText: '停用',
+            inactiveValue: '0',
+            activeValue: '1',
+            onChangeField: (row: any, value: any) => {
+                if (row.active == 1) {
+                    return ElMessage({ message: '至少需要保留一条启用的配置!', type: 'warning' })
+                    // 至少需要保留一条启用的配置
+                }
+                toggleActive({
+                    id: row.id
+                }).then(res => {
+                    ElMessage({ message: '启用成功!', type: 'success' })
+                    tableStore.index()
+                })
+            }
+        },
+
+        {
+            title: '操作',
+            fixed: 'right',
+            width: '180',
+            render: 'buttons',
+            buttons: [
+                // {
+                //     name: 'edit',
+                //     title: '启用 ',
+                //     type: 'primary',
+                //     icon: 'el-icon-Plus',
+                //     render: 'basicButton',
+                //     disabled: row => {
+                //         return row.active == 1
+                //     },
+                //     click: row => {
+                //         toggleActive({ id: row.id }).then(res => {
+                //             ElMessage({
+                //                 message: '启用成功!',
+                //                 type: 'success'
+                //             })
+                //             tableStore.index()
+                //         })
+                //     }
+                // },
+                {
+                    name: 'edit',
+                    title: '修改 ',
+                    type: 'primary',
+                    icon: 'el-icon-Plus',
+                    render: 'basicButton',
+                    click: row => {
+                        setTimeout(() => {
+                            formRef.value.open({
+                                text: '修改配置',
+                                row: row
+                            })
+                        }, 10)
+                    }
+                },
+                {
+                    name: 'edit',
+                    title: '删除',
+                    type: 'danger',
+                    icon: 'el-icon-Delete',
+                    render: 'confirmButton',
+                    disabled: row => {
+                        return row.active == 1
+                    },
+                    popconfirm: {
+                        confirmButtonText: '确认',
+                        cancelButtonText: '取消',
+                        confirmButtonType: 'danger',
+                        title: '确定删除吗？'
+                    },
+                    click: row => {
+                        csDelete({ id: row.id }).then(res => {
+                            ElMessage({
+                                message: '删除成功!',
+                                type: 'success'
+                            })
+                            tableStore.index()
+                        })
+                    }
+                }
+            ]
+        }
+    ],
+
+    loadCallback: () => {
+
+
+    }
+})
+
+provide('tableStore', tableStore)
+// 新增主题
+const add = () => {
+    setTimeout(() => {
+        formRef.value.open({
+            text: '新增配置'
+        })
+    }, 10)
+}
+onMounted(() => {
+    tableStore.index()
+})
+</script>

src/views/govern/alarm/index.vue

@@ -7,15 +7,15 @@
             <el-tab-pane label="前置告警" name="2">
                 <Front v-if="activeName == '2'" :deviceTree="deviceTree" :key="key" />
             </el-tab-pane>
-            <!-- <el-tab-pane label="稳态越限告警" name="3">
+            <el-tab-pane label="稳态越限告警" name="3">
                 <Steady v-if="activeName == '3'" :deviceTree="deviceTree" :key="key" />
-            </el-tab-pane> -->
+            </el-tab-pane>
             <el-tab-pane label="暂态事件" name="4">
                 <Transient v-if="activeName == '4'" :deviceTree="deviceTree" :key="key" />
             </el-tab-pane>
-            <!-- <el-tab-pane label="异常事件" name="5">
+            <el-tab-pane label="异常事件" name="5">
                 <Abnormal v-if="activeName == '5'" :deviceTree="deviceTree" :key="key" />
-            </el-tab-pane> -->
+            </el-tab-pane>
         </el-tabs>
     </div>
 </template>
@@ -30,8 +30,9 @@ import { getDeviceTree } from '@/api/cs-device-boot/csLedger'
 defineOptions({
     name: 'govern/alarm/index'
 })
+
 const deviceTree = ref([])
-const activeName = ref('0')
+const activeName = ref('1')
 const key = ref(0)
 getDeviceTree().then(res => {
     // res.data.forEach((item: any) => {

src/views/govern/alarm/scopeConfig/form.vue

@@ -0,0 +1,270 @@
+<template>
+    <el-dialog class="cn-operate-dialog" draggable v-model="dialogVisible" :title="title" width="900px"
+        @closed="handleClosed">
+        <el-scrollbar max-height="60vh">
+            <el-form ref="formRef" :model="form" :rules="rules" label-width="auto" class="form-two">
+                <el-form-item label="指标名称" prop="indexName">
+                    <el-input v-model.trim="form.indexName" placeholder="请输入指标名称" clearable maxlength="128" />
+                </el-form-item>
+
+                <el-form-item label="指标code" prop="indexCode">
+                    <el-input v-model.trim="form.indexCode" placeholder="请输入指标code" clearable maxlength="64" />
+                </el-form-item>
+
+
+                <el-form-item label="表名" prop="influxdbTableName">
+                    <el-input v-model.trim="form.influxdbTableName" placeholder="请输入表名" clearable />
+                </el-form-item>
+                <el-form-item label="列属性" prop="influxdbColumnName">
+                    <el-input v-model.trim="form.influxdbColumnName" placeholder="实体类属性名" clearable maxlength="128" />
+                </el-form-item>
+                <el-form-item label="谐波次数">
+                    <el-slider v-model.trim="form.harmSlider" range :max="50" style="width: 90%" />
+                </el-form-item>
+                <el-form-item label="相别" prop="phaseList">
+                    <el-select v-model.trim="form.phaseList" filterable multiple clearable collapse-tags
+                        collapse-tags-tooltip placeholder="请选择相别">
+                        <el-option v-for="item in phaseSelect" :key="item.id" :label="item.name"
+                            :value="item.id"></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="指标下限" prop="minValue">
+                    <el-input-number v-model="form.minValue" style="width: 100%" placeholder="下限" />
+                </el-form-item>
+                <el-form-item label="指标上限" prop="maxValue">
+                    <el-input-number v-model="form.maxValue" style="width: 100%" placeholder="上限" />
+                </el-form-item>
+                <el-form-item label="电压等级参与" prop="isVoltage">
+                    <el-radio-group v-model="form.isVoltage">
+                        <el-radio :value="0">不参与</el-radio>
+                        <el-radio :value="1">参与</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="Ct变比参与" prop="ctAttendFlag">
+                    <el-radio-group v-model="form.ctAttendFlag">
+                        <el-radio :value="0">不参与</el-radio>
+                        <el-radio :value="1">参与</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="数据来源" prop="dataSource">
+                    <el-select v-model="form.dataSource" placeholder="请选择" clearable style="width: 100%">
+                        <el-option label="InfluxDB" value="InfluxDB" />
+                        <!-- <el-option label="oracle" value="oracle" /> -->
+                        <el-option label="MySql" value="MySql" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="所属系统" prop="belongingSystem">
+                    <el-select v-model="form.belongingSystem" placeholder="请选择" clearable style="width: 100%">
+                        <el-option label="pqs" value="pqs" />
+                        <el-option label="govern" value="govern" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="单位" prop="unit">
+                    <el-input v-model.trim="form.unit" placeholder="请输入单位" clearable maxlength="32" />
+                </el-form-item>
+                <el-form-item label="排序" prop="sort">
+                    <el-input-number v-model="form.sort" :min="0" :precision="0" style="width: 100%" />
+                </el-form-item>
+                <!-- <el-form-item label="状态" prop="state">
+                    <el-select v-model="form.state" placeholder="请选择" style="width: 100%">
+                        <el-option label="正常" :value="1" />
+                        <el-option label="删除" :value="0" />
+                    </el-select>
+                </el-form-item> -->
+                <el-form-item label="条件描述" prop="otherAlgorithm" class="form-item-full">
+                    <el-input v-model.trim="form.otherAlgorithm" type="textarea" :rows="2" placeholder="无具体范围时的判断条件描述"
+                        maxlength="500" show-word-limit />
+                </el-form-item>
+                <el-form-item label="备注" prop="remark" class="form-item-full">
+                    <el-input v-model.trim="form.remark" type="textarea" :rows="2" placeholder="备注" maxlength="500"
+                        show-word-limit />
+                </el-form-item>
+            </el-form>
+        </el-scrollbar>
+        <template #footer>
+            <el-button @click="handleCancel">取消</el-button>
+            <el-button type="primary" @click="onSubmit">确定</el-button>
+        </template>
+    </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from 'vue'
+import { ElMessage } from 'element-plus'
+import { save, update } from '@/api/algorithm-boot/scopeConfig'
+const emit = defineEmits(['Cancels'])
+
+const dialogVisible = ref(false)
+const title = ref('')
+const formRef = ref()
+const phaseSelect = [
+    {
+        name: 'A相',
+        id: 'A'
+    },
+    {
+        name: 'B相',
+        id: 'B'
+    },
+    {
+        name: 'C相',
+        id: 'C'
+    },
+    {
+        name: '无相别',
+        id: 'T'
+    },
+    {
+        name: 'AB相',
+        id: 'AB'
+    },
+    {
+        name: 'BC相',
+        id: 'BC'
+    },
+    {
+        name: 'CA相',
+        id: 'CA'
+    },
+    // {
+    //     name: '无相别',
+    //     id: 'M'
+    // },
+]
+const defaultForm = () => ({
+    id: '',
+    indexCode: '',
+    indexName: '',
+    harmSlider: [0, 0],
+    harmStart: undefined as number | undefined,
+    harmEnd: undefined as number | undefined,
+    phaseType: '',
+    phaseList: [] as any,
+    influxdbTableName: '',
+    influxdbColumnName: '',
+    minValue: undefined as number | undefined,
+    maxValue: undefined as number | undefined,
+    isVoltage: 0,
+    ctAttendFlag: 0,
+    dataSource: '',
+    otherAlgorithm: '',
+    remark: '',
+    unit: '',
+    sort: 100,
+    belongingSystem: 'govern',
+    state: 1
+})
+
+const form = reactive(defaultForm())
+
+
+
+const validateMinMax = (_rule: any, _value: any, callback: (e?: Error) => void) => {
+    if (form.minValue == null || form.maxValue == null) {
+        callback()
+        return
+    }
+    if (form.minValue > form.maxValue) {
+        callback(new Error('指标下限不能大于指标上限'))
+    } else {
+        callback()
+    }
+}
+
+const rules: any = {
+    indexCode: [{ required: true, message: '请输入指标code', trigger: 'blur' }],
+    indexName: [{ required: true, message: '请输入指标名称', trigger: 'blur' }],
+    phaseList: [{ required: true, message: '请输入指标名称', trigger: 'change' }],
+
+    influxdbTableName: [{ required: true, message: '请输入表名', trigger: 'blur' }],
+    influxdbColumnName: [{ required: true, message: '请输入列属性', trigger: 'blur' }],
+    minValue: [
+        { required: true, message: '请输入指标下限', trigger: 'blur' },
+        { validator: validateMinMax, trigger: 'change' }
+    ],
+    maxValue: [
+        { required: true, message: '请输入指标上限', trigger: 'blur' },
+        { validator: validateMinMax, trigger: 'change' }
+    ],
+    isVoltage: [{ required: true, message: '请选择电压等级是否参与', trigger: 'change' }],
+    ctAttendFlag: [{ required: true, message: '请选择Ct变比是否参与', trigger: 'change' }],
+    dataSource: [{ required: true, message: '请选择数据来源', trigger: 'change' }],
+    belongingSystem: [{ required: true, message: '请选择所属系统', trigger: 'change' }],
+    sort: [{ required: true, message: '请输入排序', trigger: 'blur' }],
+    state: [{ required: true, message: '请选择状态', trigger: 'change' }]
+}
+
+const isEdit = () => title.value.includes('修改')
+
+const resetForm = () => {
+    Object.assign(form, defaultForm())
+}
+
+const fillForm = (row: any) => {
+    const keys = Object.keys(defaultForm()) as (keyof ReturnType<typeof defaultForm>)[]
+    keys.forEach(key => {
+        if (row[key] === undefined || row[key] === null) return
+        if (['harmStart', 'harmEnd', 'sort', 'isVoltage', 'ctAttendFlag', 'state'].includes(key)) {
+            ; (form as any)[key] = Number(row[key])
+        } else if (['minValue', 'maxValue'].includes(key)) {
+            ; (form as any)[key] = Number(row[key])
+        } else {
+            ; (form as any)[key] = row[key]
+        }
+    })
+    form.phaseList = form.phaseType.split(',')
+
+    form.harmSlider = [form.harmStart || 0, form.harmEnd || 0]
+}
+
+const open = (e: { text: string; row?: any }) => {
+    formRef.value?.resetFields()
+    title.value = e.text
+    dialogVisible.value = true
+    resetForm()
+    if (e.row) {
+
+        fillForm(e.row)
+    }
+}
+
+const handleCancel = () => {
+    dialogVisible.value = false
+    emit('Cancels')
+}
+
+const handleClosed = () => {
+    resetForm()
+}
+
+const onSubmit = () => {
+    formRef.value?.validate(async (valid: boolean) => {
+        if (!valid) return
+        form.harmStart = form.harmSlider[0]
+        form.harmEnd = form.harmSlider[1]
+        form.phaseType = form.phaseList.join(',')
+        const payload = { ...form }
+        try {
+            if (isEdit()) {
+                await update(payload)
+                ElMessage.success('修改成功!')
+            } else {
+                await save({ ...payload, id: '' })
+                ElMessage.success('新增成功!')
+            }
+            dialogVisible.value = false
+            emit('Cancels')
+        } catch {
+            /* 统一错误提示 */
+        }
+    })
+}
+
+defineExpose({ open })
+</script>
+
+<style scoped>
+.form-item-full {
+    grid-column: 1 / -1;
+}
+</style>

src/views/govern/alarm/scopeConfig/index.vue

@@ -0,0 +1,193 @@
+<template>
+    <div class="default-main">
+        <TableHeader ref="TableHeaderRef">
+            <template #select>
+                <el-form-item label="数据来源">
+                    <el-select v-model="tableStore.table.params.dataSource" clearable placeholder="请选择数据来源">
+                        <el-option v-for="item in dataSourceOptions" :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.systemType" clearable placeholder="请选择系统类型">
+                        <el-option v-for="item in systemTypeOptions" :key="item.value" :label="item.label"
+                            :value="item.value" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="表名">
+                    <el-input v-model.trim="tableStore.table.params.tableName" placeholder="请输入表名" clearable
+                        maxlength="64" />
+                </el-form-item>
+            </template>
+            <template #operation>
+                <el-button icon="el-icon-Plus" type="primary" @click="add">新增</el-button>
+            </template>
+        </TableHeader>
+        <Table ref="tableRef" />
+        <Form ref="formRef" @Cancels="tableStore.index()" />
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, provide, nextTick } from 'vue'
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import TableHeader from '@/components/table/header/index.vue'
+import { ElMessage } from 'element-plus'
+import { pqDelete } from '@/api/algorithm-boot/scopeConfig'
+import Form from './form.vue'
+defineOptions({
+    name: 'govern/alarmConfig'
+})
+const dataSourceOptions = [
+    { label: 'InfluxDB', value: 'InfluxDB' },
+    // { label: 'oracle', value: 'oracle' },
+    { label: 'MySql', value: 'MySql' }
+]
+const systemTypeOptions = [
+    { label: 'pqs', value: 'pqs' },
+    { label: 'govern', value: 'govern' }
+]
+const yesNo = (v: number) => (v === 1 ? '是' : v === 0 ? '否' : '/')
+const stateMap: Record<number, string> = { 0: '删除', 1: '正常' }
+const formRef = ref()
+const tableStore: any = new TableStore({
+    url: '/algorithm-boot/pqReasonableRange/getData',
+    method: 'POST',
+    showPage: false,
+    column: [
+        {
+            field: 'index',
+            title: '序号',
+            width: '80',
+            formatter: (row: any) => {
+                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
+            }
+        },
+        { field: 'indexName', title: '指标名称', minWidth: 200 },
+        { field: 'indexCode', title: '指标code', minWidth: 150 },
+
+        { field: 'influxdbTableName', title: '表名', minWidth: 150 },
+        { field: 'influxdbColumnName', title: '列属性', minWidth: 150 },
+        {
+            field: 'harmStart', title: '谐波次数', width: 90,
+            formatter: (row: any) => {
+                return row.cellValue == null ? '/' : row.cellValue + '-' + row.row.harmEnd
+            }
+        },
+        {
+            field: 'phaseType', title: '相别', width: 100, formatter: (row: any) => {
+                return row.cellValue == 'T' ? '/' : row.cellValue
+
+
+            }
+        },
+        { field: 'minValue', title: '指标下限', width: 100 },
+        { field: 'maxValue', title: '指标上限', width: 100 },
+        {
+            field: 'isVoltage',
+            title: '电压等级参与',
+            width: 110,
+            formatter: (row: any) => yesNo(row.cellValue)
+        },
+        {
+            field: 'ctAttendFlag',
+            title: 'Ct变比参与',
+            width: 100,
+            formatter: (row: any) => yesNo(row.cellValue)
+        },
+        { field: 'dataSource', title: '数据来源', width: 100 },
+        { field: 'belongingSystem', title: '所属系统', width: 100 },
+
+
+        {
+            field: 'unit', title: '单位', width: 80,
+            formatter: (row: any) => {
+                return row.cellValue || '/'
+            }
+        },
+        { field: 'sort', title: '排序', width: 70 },
+        {
+            field: 'otherAlgorithm', title: '条件描述', minWidth: 200,
+            formatter: (row: any) => {
+                return row.cellValue || '/'
+            }
+        },
+        {
+            field: 'remark', title: '备注', minWidth: 200,
+            formatter: (row: any) => {
+                return row.cellValue || '/'
+            }
+        },
+
+        {
+            title: '操作',
+            fixed: 'right',
+            width: '180',
+            render: 'buttons',
+            buttons: [
+
+                {
+                    name: 'edit',
+                    title: '修改 ',
+                    type: 'primary',
+                    icon: 'el-icon-Plus',
+                    render: 'basicButton',
+                    click: row => {
+                        setTimeout(() => {
+                            formRef.value.open({
+                                text: '修改配置',
+                                row: row
+                            })
+                        }, 10)
+                    }
+                },
+                {
+                    name: 'edit',
+                    title: '删除',
+                    type: 'danger',
+                    icon: 'el-icon-Delete',
+                    render: 'confirmButton',
+                    disabled: row => {
+                        return row.active == 1
+                    },
+                    popconfirm: {
+                        confirmButtonText: '确认',
+                        cancelButtonText: '取消',
+                        confirmButtonType: 'danger',
+                        title: '确定删除吗？'
+                    },
+                    click: row => {
+                        pqDelete({ id: row.id }).then(res => {
+                            ElMessage({
+                                message: '删除成功!',
+                                type: 'success'
+                            })
+                            tableStore.index()
+                        })
+                    }
+                }
+            ]
+        }
+    ],
+
+    loadCallback: () => {
+
+
+    }
+})
+tableStore.table.params.dataSource = ''
+tableStore.table.params.tableName = ''
+tableStore.table.params.systemType = ''
+provide('tableStore', tableStore)
+// 新增主题
+const add = () => {
+    setTimeout(() => {
+        formRef.value.open({
+            text: '新增配置'
+        })
+    }, 10)
+}
+onMounted(() => {
+    tableStore.index()
+})
+</script>

src/views/govern/alarm/steadyStateEvent/index.vue

@@ -0,0 +1,440 @@
+<template>
+    <div class="default-main" style="display: flex" :style="height">
+        <div style="width: 400px; overflow: hidden">
+            <div class="custom-table-header">
+                <div class="title">方案列表</div>
+                <el-button :icon="Plus" type="primary" @click="addRole" class="ml10">新增</el-button>
+            </div>
+            <Table ref="tableRef" :row-config="{ isCurrent: true, isHover: true }" @currentChange="currentChange" />
+        </div>
+        <div style="flex: 1; overflow: hidden">
+            <div class="custom-table-header">
+                <div class="title">指标配置</div>
+                <!-- <el-button :icon="Select" type="primary" @click="saveIndicator" class="ml10">保存</el-button> -->
+            </div>
+            <div class="pd10 borderBox" :style="height1" style="overflow-y: auto">
+                <H4 class="mt10">基础指标</H4>
+
+                <el-checkbox-group v-model="indicator">
+                    <el-checkbox label="频率偏差" value="频率偏差" />
+                    <el-checkbox label="电压偏差" value="电压偏差" />
+                    <el-checkbox label="三相电压不平衡度" value="三相电压不平衡度" />
+                    <el-checkbox label="闪变" value="闪变" />
+                    <el-checkbox label="电压总谐波畸变率" value="电压总谐波畸变率" />
+                    <el-checkbox label="负序电流" value="负序电流" />
+                </el-checkbox-group>
+                <H4 class="mt10">谐波电压</H4>
+                <div class="df">
+                    <div class="title">谐波电压含有率:</div>
+                    <div style="flex: 1">
+                        <el-checkbox v-model="checkAll1" @change="handleCheckAllChange1">全选</el-checkbox>
+                        <el-checkbox-group v-model="indicator" @change="handleHarmonicVoltageChange">
+                            <el-checkbox
+                                v-for="num in 24"
+                                :key="`harmonicVoltage_${num + 1}`"
+                                :label="`${num + 1}次`"
+                                :value="`${num + 1}次谐波电压含有率`"
+                            />
+                        </el-checkbox-group>
+                    </div>
+                </div>
+                <H4 class="mt10">谐波电流</H4>
+                <div class="df">
+                    <div class="title">谐波电流有效值:</div>
+                    <div style="flex: 1">
+                        <el-checkbox v-model="checkAll2" @change="handleCheckAllChange2">全选</el-checkbox>
+                        <el-checkbox-group v-model="indicator" @change="handleHarmonicCurrentChange">
+                            <el-checkbox
+                                v-for="num in 24"
+                                :key="`harmonicCurrent_${num + 1}`"
+                                :label="`${num + 1}次`"
+                                :value="`${num + 1}次谐波电流有效值`"
+                            />
+                        </el-checkbox-group>
+                    </div>
+                </div>
+
+                <H4 class="mt10">间谐波电压</H4>
+                <div class="df">
+                    <div class="title">间谐波电压含有率:</div>
+                    <div style="flex: 1">
+                        <el-checkbox v-model="checkAll3" @change="handleCheckAllChange3">全选</el-checkbox>
+                        <el-checkbox-group v-model="indicator" @change="handleInterharmonicVoltageChange">
+                            <el-checkbox
+                                v-for="num in 16"
+                                :key="`interharmonicVoltage_${num}`"
+                                :label="`${num - 0.5}次`"
+                                :value="`${num - 0.5}次间谐波电压含有率`"
+                            />
+                        </el-checkbox-group>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div style="width: 370px">
+            <div class="custom-table-header">
+                <div class="title">监测点绑定</div>
+                <el-button :icon="Select" type="primary" @click="saveIndicator" class="ml10" :loading="loading">
+                    保存
+                </el-button>
+            </div>
+            <!-- <steadyStateTree /> -->
+            <Tree
+                class="borderBox"
+                ref="treeRef"
+                show-checkbox
+                :showBut="false"
+                width="370px"
+                :height="260"
+                :data="menuTree"
+                :checkStrictly="checkStrictly"
+            ></Tree>
+        </div>
+        <!-- 新增/编辑弹框 -->
+        <el-dialog v-model="dialogVisible" :title="dialogTitle" width="400px" :before-close="handleClose">
+            <el-form :model="formData" :rules="formRules" ref="formRef" label-width="100px">
+                <el-form-item label="方案名称" prop="name">
+                    <el-input v-model.trim="formData.name" placeholder="请输入方案名称" clearable />
+                </el-form-item>
+                <el-form-item label="排序" prop="sort">
+                    <el-input maxlength="32" show-word-limit-number v-model.number="formData.sort" :min="0" />
+                </el-form-item>
+            </el-form>
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="dialogVisible = false">取消</el-button>
+                    <el-button type="primary" @click="submitForm">确定</el-button>
+                </span>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { Plus, Select } from '@element-plus/icons-vue'
+import { ref, onMounted, provide, computed } from 'vue'
+import TableStore from '@/utils/tableStore'
+import { getLineTree, getCldTree } from '@/api/cs-device-boot/csLedger'
+import Table from '@/components/table/index.vue'
+import { save, deletePlan, update, getById } from '@/api/cs-harmonic-boot/mxgraph'
+import { mainHeight } from '@/utils/layout'
+import { ElMessage } from 'element-plus'
+import steadyStateTree from '@/components/tree/govern/steadyStateTree.vue'
+import { useConfig } from '@/stores/config'
+import Tree from '@/components/tree/allocation.vue'
+import { id } from 'element-plus/es/locale'
+defineOptions({
+    name: 'govern/steadyStateEvent'
+})
+const height = mainHeight(20)
+const height1 = mainHeight(90)
+const config = useConfig()
+const tableRef = ref()
+const checkAll1 = ref(false)
+const checkAll2 = ref(false)
+const checkAll3 = ref(false)
+const menuTree: any = ref([])
+const checkStrictly = ref(false)
+const indicator: any = ref([])
+const lineList: any = ref([])
+const copyRow: any = ref({})
+const treeRef = ref()
+const loading = ref(false)
+// 弹框相关
+const dialogVisible = ref(false)
+const dialogTitle = ref('新增方案')
+const formRef = ref()
+const formData = ref({
+    id: '',
+    sort: 0,
+    lineList: [],
+    harmonicTarget: '',
+    name: ''
+})
+const formRules = {
+    name: [{ required: true, message: '请输入方案名称', trigger: 'blur' }],
+    sort: [{ required: true, message: '请输入排序', trigger: 'blur' }]
+}
+
+// 生成各分组的指标值数组
+const harmonicVoltageValues = computed(() => Array.from({ length: 24 }, (_, i) => `${i + 2}次谐波电压含有率`))
+const harmonicCurrentValues = computed(() => Array.from({ length: 24 }, (_, i) => `${i + 2}次谐波电流有效值`))
+const interharmonicVoltageValues = computed(() => Array.from({ length: 16 }, (_, i) => `${i + 0.5}次间谐波电压含有率`))
+
+// 谐波电压全选/取消全选
+const handleCheckAllChange1 = (val: any) => {
+    if (val) {
+        const newValues = harmonicVoltageValues.value.filter(v => !indicator.value.includes(v))
+        indicator.value = [...indicator.value, ...newValues]
+    } else {
+        indicator.value = indicator.value.filter(v => !harmonicVoltageValues.value.includes(v))
+    }
+}
+
+// 谐波电流全选/取消全选
+const handleCheckAllChange2 = (val: any) => {
+    if (val) {
+        const newValues = harmonicCurrentValues.value.filter(v => !indicator.value.includes(v))
+        indicator.value = [...indicator.value, ...newValues]
+    } else {
+        indicator.value = indicator.value.filter(v => !harmonicCurrentValues.value.includes(v))
+    }
+}
+
+// 间谐波电压全选/取消全选
+const handleCheckAllChange3 = (val: any) => {
+    if (val) {
+        const newValues = interharmonicVoltageValues.value.filter(v => !indicator.value.includes(v))
+        indicator.value = [...indicator.value, ...newValues]
+    } else {
+        indicator.value = indicator.value.filter(v => !interharmonicVoltageValues.value.includes(v))
+    }
+}
+
+// 谐波电压分组内值变化时，更新全选状态
+const handleHarmonicVoltageChange = () => {
+    const selectedInGroup = harmonicVoltageValues.value.filter(v => indicator.value.includes(v))
+    checkAll1.value =
+        selectedInGroup.length == harmonicVoltageValues.value.length && harmonicVoltageValues.value.length > 0
+}
+
+// 谐波电流分组内值变化时，更新全选状态
+const handleHarmonicCurrentChange = () => {
+    const selectedInGroup = harmonicCurrentValues.value.filter(v => indicator.value.includes(v))
+    checkAll2.value =
+        selectedInGroup.length == harmonicCurrentValues.value.length && harmonicCurrentValues.value.length > 0
+}
+
+// 间谐波电压分组内值变化时，更新全选状态
+const handleInterharmonicVoltageChange = () => {
+    const selectedInGroup = interharmonicVoltageValues.value.filter(v => indicator.value.includes(v))
+
+    checkAll3.value =
+        selectedInGroup.length == interharmonicVoltageValues.value.length && interharmonicVoltageValues.value.length > 0
+}
+
+const tableStore = new TableStore({
+    showPage: false,
+    url: '/cs-harmonic-boot/csHarmonicPlan/list',
+    method: 'GET',
+    publicHeight: 70,
+    column: [
+        { title: '方案名称', field: 'name', align: 'center' },
+        {
+            title: '操作',
+            fixed: 'right',
+            align: 'center',
+            width: '100',
+            render: 'buttons',
+            buttons: [
+                {
+                    name: 'edit',
+                    title: '编辑',
+                    type: 'primary',
+                    icon: 'el-icon-EditPen',
+                    render: 'basicButton',
+
+                    click: row => {
+                        openDialog('edit', row)
+                    }
+                },
+                {
+                    name: 'del',
+                    title: '删除',
+                    type: 'danger',
+                    icon: 'el-icon-Delete',
+                    render: 'confirmButton',
+                    popconfirm: {
+                        confirmButtonText: '确认',
+                        cancelButtonText: '取消',
+                        confirmButtonType: 'danger',
+                        title: '确定删除该角色吗？'
+                    },
+                    click: row => {
+                        deletePlan([row.id]).then(() => {
+                            ElMessage.success('删除成功')
+                            tableStore.index()
+                        })
+                    }
+                }
+            ]
+        }
+    ],
+    beforeSearchFun: () => {},
+    loadCallback: () => {
+        tableRef.value.getRef().setCurrentRow(tableStore.table.data[0])
+        currentChange({
+            row: tableStore.table.data[0]
+        })
+    }
+})
+tableStore.table.params.searchValue = ''
+getCldTree().then(res => {
+    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-Platform'
+                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'
+                })
+            })
+        })
+    })
+    menuTree.value = filterTreeKeepPath(res.data.children)
+})
+provide('tableStore', tableStore)
+const filterTreeKeepPath = (treeData: any) => {
+    const result = []
+
+    for (const node of treeData) {
+        // 递归处理子节点
+        const filteredChildren: any = node.children?.length ? filterTreeKeepPath(node.children) : []
+
+        // 如果当前节点 level == 3，或者子节点中有符合条件的数据
+        if (node.level == 3 || filteredChildren.length > 0) {
+            result.push({
+                ...node,
+                children: filteredChildren
+            })
+        }
+    }
+
+    return result
+}
+// 打开弹框
+const openDialog = (type: string, row?: any) => {
+    if (type == 'add') {
+        dialogTitle.value = '新增方案'
+        formData.value = {
+            id: '',
+            name: '',
+            lineList: [],
+            harmonicTarget: '',
+            sort: 0
+        }
+    } else if (type == 'edit') {
+        dialogTitle.value = '编辑方案'
+        formData.value = {
+            id: row.id,
+            lineList: row.lineList,
+            harmonicTarget: row.harmonicTarget,
+            sort: row.sort,
+            name: row.name
+        }
+    }
+    dialogVisible.value = true
+}
+
+// 关闭弹框
+const handleClose = () => {
+    dialogVisible.value = false
+    formRef.value?.resetFields()
+}
+
+// 提交表单
+const submitForm = async () => {
+    await formRef.value?.validate()
+    if (dialogTitle.value == '新增方案') {
+        await save({
+            harmonicTarget: '',
+            id: '',
+            lineList: [],
+            name: formData.value.name,
+            sort: formData.value.sort
+        }).then((res: any) => {
+            ElMessage.success(`${dialogTitle.value}成功`)
+            dialogVisible.value = false
+            tableStore.index() // 刷新列表
+        })
+    } else {
+        await update({
+            harmonicTarget: formData.value.harmonicTarget,
+            id: formData.value.id,
+            lineList: formData.value.lineList,
+            name: formData.value.name,
+            sort: formData.value.sort
+        }).then((res: any) => {
+            ElMessage.success(`${dialogTitle.value}成功`)
+            dialogVisible.value = false
+            tableStore.index() // 刷新列表
+        })
+    }
+
+    // 模拟保存成功
+}
+
+// 保存指标
+const saveIndicator = () => {
+    // TODO: 调用保存指标接口
+    loading.value = true
+    update({
+        harmonicTarget: indicator.value.join(','),
+        id: copyRow.value.id,
+        lineList: treeRef.value.treeRef
+            .getCheckedNodes(false, true)
+            .filter(item => item.level == 3)
+            .map((node: any) => node.id),
+        name: copyRow.value.name,
+        sort: copyRow.value.sort
+    })
+        .then((res: any) => {
+            ElMessage.success(`保存成功`)
+            loading.value = false
+            tableStore.index()
+        })
+        .catch(() => {
+            loading.value = false
+        })
+}
+
+const currentChange = (data: any) => {
+    getById({ id: data.row.id }).then((res: any) => {
+        checkStrictly.value = true
+        indicator.value = res.data.harmonicTarget.split(',')
+        lineList.value = res.data.lineList || []
+        copyRow.value = res.data
+        treeRef.value.treeRef.setCheckedKeys(lineList.value)
+        setTimeout(() => {
+            handleInterharmonicVoltageChange()
+            handleHarmonicCurrentChange()
+            handleHarmonicVoltageChange()
+            checkStrictly.value = false
+        }, 100)
+    })
+}
+
+onMounted(() => {
+    tableStore.index()
+})
+
+const addRole = () => {
+    openDialog('add')
+}
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-tabs--border-card > .el-tabs__content) {
+    padding: 0px !important;
+}
+.df {
+    display: flex;
+    .title {
+        width: 125px;
+    }
+    :deep(.el-checkbox) {
+        width: 70px;
+    }
+}
+.custom-table-header {
+    height: 60px;
+}
+.borderBox {
+    border: 1px solid var(--el-border-color);
+}
+</style>

src/views/govern/analyze/APF/index.vue

@@ -245,10 +245,10 @@ const setEchart = () => {
                 for (let j in phaseList) {
                     color.push(j == 'A' ? '#DAA520' : j == 'B' ? '#2E8B57' : j == 'C' ? '#A52a2a' : '#0000CC')
                     legend.push(
-                        j == 'M' ? k : j == 'A' ? `A相_${k}` : j == 'B' ? `B相_${k}` : j == 'C' ? `C相_${k}` : j
+                        j == 'T' ? k : j == 'A' ? `A相_${k}` : j == 'B' ? `B相_${k}` : j == 'C' ? `C相_${k}` : j
                     )
                     series.push({
-                        name: j == 'M' ? k : j == 'A' ? `A相_${k}` : j == 'B' ? `B相_${k}` : j == 'C' ? `C相_${k}` : j,
+                        name: j == 'T' ? k : j == 'A' ? `A相_${k}` : j == 'B' ? `B相_${k}` : j == 'C' ? `C相_${k}` : j,
                         symbol: 'none',
                         smooth: true,
                         type: 'line',

src/views/govern/analyze/DVR/index.vue

@@ -6,31 +6,15 @@
                 <TableHeader datePicker showExport>
                     <template v-slot:select>
                         <el-form-item label="事件类型">
-                            <el-select
-                                v-model.trim="tableStore.table.params.eventType"
-                                clearable
-                                placeholder="请选择事件类型"
-                            >
-                                <el-option
-                                    v-for="item in eventList"
-                                    :key="item.value"
-                                    :label="item.label"
-                                    :value="item.value"
-                                />
+                            <el-select v-model.trim="tableStore.table.params.eventType" clearable placeholder="请选择事件类型">
+                                <el-option v-for="item in eventList" :key="item.value" :label="item.label"
+                                    :value="item.value" />
                             </el-select>
                         </el-form-item>
                         <el-form-item label="位置">
-                            <el-select
-                                v-model.trim="tableStore.table.params.location"
-                                clearable
-                                placeholder="请选择位置"
-                            >
-                                <el-option
-                                    v-for="item in locationList"
-                                    :key="item.value"
-                                    :label="item.label"
-                                    :value="item.value"
-                                />
+                            <el-select v-model.trim="tableStore.table.params.location" clearable placeholder="请选择位置">
+                                <el-option v-for="item in locationList" :key="item.value" :label="item.label"
+                                    :value="item.value" />
                             </el-select>
                         </el-form-item>
                     </template>
@@ -39,14 +23,8 @@
             </div>
             <el-empty v-else description="请选择设备" class="analyze-dvr-right" />
         </div>
-        <waveFormAnalysis
-            v-loading="loading"
-            v-if="isWaveCharts"
-            ref="waveFormAnalysisRef"
-            @handleHideCharts="isWaveCharts = false"
-            :wp="wp"
-            style="padding: 10px"
-        />
+        <waveFormAnalysis v-loading="loading" v-if="isWaveCharts" ref="waveFormAnalysisRef"
+            @handleHideCharts="isWaveCharts = false" :wp="wp" style="padding: 10px" />
         <!-- <div :style="{ height: pageHeight.height }" style="padding: 10px; overflow: hidden" v-if="!view">
             <el-row>
                 <el-col :span="12">
@@ -145,14 +123,26 @@ const tableStore = new TableStore({
             }
         },
         { title: '事件描述', field: 'showName', minWidth: 150 },
-        { title: '发生位置', field: 'evtParamPosition', minWidth: 150 },
+        {
+            title: '发生位置', field: 'evtParamPosition', minWidth: 150,
+            formatter: (row: any) => {
+                const val = row.cellValue
+                if (val === null || val === undefined || val === '' || val === '-') return '/'
+
+                return val
+            }
+        },
         {
             title: '持续时间(s)',
             field: 'evtParamTm',
             sortable: true,
             minWidth: 110,
             formatter: (row: any) => {
-                return Math.floor(row.cellValue * 10000) / 100
+                const val = row.cellValue
+                if (val === null || val === undefined || val === '' || val === '-') return '/'
+                const num = Number(val)
+                if (Number.isNaN(num)) return '/'
+                return Math.floor(num * 10000) / 100
             }
         },
         {
@@ -179,16 +169,19 @@ const tableStore = new TableStore({
                     type: 'primary',
                     icon: 'el-icon-DataLine',
                     render: 'basicButton',
+                    loading: 'loading1', 
                     disabled: row => {
                         return !row.wavePath && row.evtParamTm < 20
                     },
 
                     click: async row => {
                         row.loading1 = true
-                        loading.value = true
-                        isWaveCharts.value = true
+                       
+                      
                         await analyseWave(row.id)
                             .then(res => {
+                                isWaveCharts.value = true
+                                loading.value = true
                                 row.loading1 = false
                                 if (res != undefined) {
                                     boxoList.value = row

src/views/govern/analyze/steadyState/components/chart.vue

@@ -0,0 +1,392 @@
+<template>
+    <div class="analyze-steadyState" v-loading="loading">
+        <analyzeTree ref="treeRef" :showCheckbox="true" :default-checked-keys="checkedKeyIds" @check="onCheck"
+            :height="40" :engineering="true" />
+        <div class="analyze-steadyState-right">
+            <div ref="headerRef">
+                <TableHeader :showSearch="false" ref="tableHeaderRef" @selectChange="selectChange">
+                    <template v-slot:select>
+                        <el-form-item label="时间:">
+                            <DatePicker ref="datePickerRef"></DatePicker>
+                        </el-form-item>
+                        <el-form-item label="统计指标:">
+                            <el-select style="width: 200px" v-model.trim="formInline.statisticalId" filterable
+                                @change="frequencyFlag" placeholder="请选择">
+                                <el-option v-for="item in zblist" :key="item.value" :label="item.label"
+                                    :value="item.value"></el-option>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label="谐波次数:" v-show="frequencyShow">
+                            <el-select v-model.trim="formInline.frequency" filterable placeholder="请选择"
+                                style="width: 100px">
+                                <el-option v-for="item in 49" :key="item + 1" :label="item + 1"
+                                    :value="item + 1"></el-option>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label="值类型:">
+                            <el-select v-model.trim="formInline.valueType" filterable placeholder="请选择">
+                                <el-option v-for="item in typelist" :key="item.value" :label="item.label"
+                                    :value="item.value"></el-option>
+                            </el-select>
+                        </el-form-item>
+                    </template>
+                    <template v-slot:operation>
+                        <el-button type="primary" @click="search" icon="el-icon-Search">查询</el-button>
+                        <el-button :type="timeControl ? 'primary' : ''" icon="el-icon-Sort" @click="setTimeControl">
+                            缺失数据
+                        </el-button>
+                    </template>
+                </TableHeader>
+            </div>
+
+            <el-empty description="暂无数据" v-if="!echartsData" style="flex: 1"></el-empty>
+            <template v-else>
+                <div :style="echartHeight">
+                    <MyEchart :options="echartsData" />
+                </div>
+            </template>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, onMounted, nextTick } from 'vue'
+import { ElMessage } from 'element-plus'
+import { mainHeight } from '@/utils/layout'
+import analyzeTree from '@/components/tree/govern/analyzeTree.vue'
+import { queryByCode, queryCsDictTree } from '@/api/system-boot/dictTree'
+import { queryCommonStatisticalByTime } from '@/api/cs-harmonic-boot/stable'
+import DatePicker from '@/components/form/datePicker/index.vue'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import { yMethod, completeTimeSeries } from '@/utils/echartMethod'
+import TableHeader from '@/components/table/header/index.vue'
+
+const MAX_CHECK = 2
+const defaultCheckedKeys = ref<any[]>([])
+const checkedKeyIds = computed(() => defaultCheckedKeys.value.map(item => item.id))
+const treeRef = ref()
+const isSyncing = ref(false)
+const tableHeaderRef = ref()
+const headerRef = ref()
+const echartHeight = ref(mainHeight(80))
+const loading = ref(false)
+const echartsData = ref<any>(null)
+const datePickerRef = ref()
+const timeControl = ref(false)
+const timeFlag = ref(true)
+const frequencyShow = ref(false)
+const dataLists = ref<any[]>([])
+const zblist = ref<any[]>([])
+
+const formInline = reactive({
+    statisticalId: '',
+    valueType: '',
+    startTime: '',
+    endTime: '',
+    frequency: '' as string | number
+})
+
+const typelist = [
+    { label: '平均值', value: 'avg' },
+    { label: '最大值', value: 'max' },
+    { label: '最小值', value: 'min' },
+    { label: 'CP95值', value: 'cp95' }
+]
+
+const lineStyle = [
+    { type: 'solid', width: 3 },
+    { type: 'dotted', width: 3 },
+    { type: 'dashed', width: 3 }
+]
+
+const getEngineeringTree = () => treeRef.value?.treRef?.treeRef4
+
+const init = () => {
+    return queryByCode('portable-harmonic-jx').then(res => {
+        return queryCsDictTree(res.data?.id).then(res => {
+            zblist.value = res.data.map((item: any) => ({
+                value: item.id,
+                label: item.name,
+                ...item
+            }))
+            formInline.statisticalId = zblist.value[0]?.value
+            formInline.valueType = typelist[0].value
+        })
+    })
+}
+
+onMounted(() => {
+    init()
+})
+
+const onCheck = (_data: any, { checkedNodes }: { checkedNodes: any[] }) => {
+    if (isSyncing.value) return
+
+    const tree = getEngineeringTree()
+    if (!tree) return
+
+    if (checkedNodes.length <= MAX_CHECK) {
+        defaultCheckedKeys.value = checkedNodes.map(node => ({ ...node }))
+        if (checkedNodes.length === 0) {
+            echartsData.value = null
+            dataLists.value = []
+        }
+        return
+    }
+
+    const allowedIds = new Set(defaultCheckedKeys.value.map(item => item.id))
+    const extras = checkedNodes.filter(node => !allowedIds.has(node.id))
+
+    if (defaultCheckedKeys.value.length >= MAX_CHECK) {
+        isSyncing.value = true
+        extras.forEach(node => tree.setChecked(node.id, false, false))
+        nextTick(() => {
+            isSyncing.value = false
+        })
+        ElMessage.warning(`最多只能选择${MAX_CHECK}个`)
+        return
+    }
+
+    const room = MAX_CHECK - defaultCheckedKeys.value.length
+    extras.slice(0, room).forEach(node => {
+        if (!defaultCheckedKeys.value.some(item => item.id === node.id)) {
+            defaultCheckedKeys.value.push({ ...node })
+        }
+    })
+    const rejected = extras.slice(room)
+    if (rejected.length) {
+        isSyncing.value = true
+        rejected.forEach(node => tree.setChecked(node.id, false, false))
+        nextTick(() => {
+            isSyncing.value = false
+        })
+        ElMessage.warning(`最多只能选择${MAX_CHECK}个`)
+    }
+}
+
+const search = async () => {
+    if (defaultCheckedKeys.value.length === 0) {
+        ElMessage.warning('请选择设备')
+        return
+    }
+    if (zblist.value.length === 0) {
+        await init()
+    }
+    if (timeFlag.value) {
+        datePickerRef.value?.setInterval(5)
+        timeFlag.value = false
+    }
+    loading.value = true
+    formInline.startTime = datePickerRef.value.timeValue[0]
+    formInline.endTime = datePickerRef.value.timeValue[1]
+    if (!frequencyShow.value) {
+        formInline.frequency = ''
+    }
+
+    try {
+        const results = await Promise.all(
+            defaultCheckedKeys.value.map(device =>
+                queryCommonStatisticalByTime({
+                    ...formInline,
+                    devId: device.id
+                }).then(({ data }: { data: any[] }) => ({
+                    deviceName: device.name,
+                    data
+                }))
+            )
+        )
+        dataLists.value = results.flatMap(({ deviceName, data }) =>
+            data.map((item: any) => ({
+                ...item,
+                anotherName:
+                    defaultCheckedKeys.value.length > 1 ? `${deviceName}_${item.anotherName}` : item.anotherName
+            }))
+        )
+        setEchart()
+    } catch {
+        loading.value = false
+    }
+}
+
+const setEchart = () => {
+    loading.value = true
+    const data = JSON.parse(JSON.stringify(dataLists.value))
+    if (data.length) {
+        const list = processingOfData(data, 'unit')
+        echartsData.value = {}
+        const legend: any[] = []
+        const xAxis: any[] = []
+        const yAxis: any[] = []
+        const series: any[] = []
+        const color: any[] = []
+        data.forEach((item: any) => {
+            if (!xAxis.includes(item.time)) {
+                xAxis.push(item.time)
+            }
+        })
+        const units = Object.keys(list)
+        for (const unit in list) {
+            const [min, max] = yMethod(list[unit].map((item: any) => item.statisticalData))
+            yAxis.push({
+                name: unit == 'null' ? '' : unit,
+                type: 'value',
+                min,
+                max,
+                axisLine: {
+                    show: true,
+                    lineStyle: { color: '#333' }
+                }
+            })
+            const anotherList = processingOfData(list[unit], 'anotherName')
+            for (const k in anotherList) {
+                const lineName = lineStyle[Object.keys(anotherList).indexOf(k)]
+                const phaseList = processingOfData(anotherList[k], 'phase')
+                for (const j in phaseList) {
+                    color.push(j == 'A' ? '#DAA520' : j == 'B' ? '#2E8B57' : j == 'C' ? '#A52a2a' : '#0000CC')
+                    legend.push(
+                        j == 'T' ? k : j == 'A' ? `A相_${k}` : j == 'B' ? `B相_${k}` : j == 'C' ? `C相_${k}` : j
+                    )
+                    series.push({
+                        name: j == 'T' ? k : j == 'A' ? `A相_${k}` : j == 'B' ? `B相_${k}` : j == 'C' ? `C相_${k}` : j,
+                        symbol: 'none',
+                        smooth: true,
+                        type: 'line',
+                        data: timeControl.value
+                            ? completeTimeSeries(
+                                phaseList[j].map((item: any) => [
+                                    item.time,
+                                    Math.floor(item.statisticalData * 100) / 100,
+                                    unit,
+                                    lineName.type
+                                ])
+                            )
+                            : phaseList[j].map((item: any) => [
+                                item.time,
+                                Math.floor(item.statisticalData * 100) / 100,
+                                unit,
+                                lineName.type
+                            ]),
+                        lineStyle: lineName,
+                        yAxisIndex: units.indexOf(unit)
+                    })
+                }
+            }
+        }
+
+        echartsData.value = {
+            title: {
+                text: zblist.value.filter(item => item.id == formInline.statisticalId)[0]?.name
+            },
+            tooltip: {
+                axisPointer: {
+                    type: 'cross',
+                    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(params: any) {
+                    const xname = params[0].value[0]
+                    let str = `${xname}<br>`
+                    params.forEach((el: any) => {
+                        let marker = ''
+                        if (el.value[3] == 'dashed') {
+                            for (let i = 0; i < 3; i++) {
+                                marker += `<span style="display:inline-block;border: 2px ${el.color} solid;margin-right:5px;width:10px;height:0px;background-color:#ffffff00;"></span>`
+                            }
+                        } else {
+                            marker = `<span style="display:inline-block;border: 2px ${el.color} ${el.value[3]};margin-right:5px;width:40px;height:0px;background-color:#ffffff00;"></span>`
+                        }
+                        str += `${marker}${el.seriesName.split('(')[0]}：${el.value[1] != null ? el.value[1] + ' ' + (el.value[2] == 'null' ? '' : el.value[2]) : '-'
+                            }<br>`
+                    })
+                    return str
+                }
+            },
+            legend: {
+                itemWidth: 20,
+                itemHeight: 20,
+                itemStyle: { opacity: 0 },
+                type: 'scroll',
+                top: 25
+            },
+            grid: {
+                left: '20px',
+                right: '40px',
+                bottom: '50px',
+                top: '80px',
+                containLabel: true
+            },
+            toolbox: { feature: { saveAsImage: {} } },
+            color,
+            xAxis: {
+                name: '',
+                type: 'time',
+                axisLabel: {
+                    formatter: { day: '{MM}-{dd}', month: '{MM}', year: '{yyyy}' }
+                }
+            },
+            yAxis,
+            options: { series }
+        }
+    } else {
+        echartsData.value = null
+    }
+    loading.value = false
+}
+
+const setTimeControl = () => {
+    timeControl.value = !timeControl.value
+    setEchart()
+}
+
+const processingOfData = (data: any, type: string) => {
+    const groupedData: any = {}
+    data.forEach((item: any) => {
+        if (!groupedData[item[type]]) {
+            groupedData[item[type]] = []
+        }
+        groupedData[item[type]].push(item)
+    })
+    return groupedData
+}
+
+const frequencyFlag = () => {
+    const name = zblist.value.filter(item => item.id == formInline.statisticalId)[0]?.name
+    if (name?.includes('含有率') || name?.includes('幅值')) {
+        frequencyShow.value = true
+        formInline.frequency = 2
+    } else {
+        frequencyShow.value = false
+    }
+    tableHeaderRef.value?.computedSearchRow()
+}
+
+const selectChange = () => {
+    setTimeout(() => {
+        echartHeight.value = mainHeight(23 + headerRef.value.offsetHeight)
+    }, 100)
+}
+</script>
+
+<style lang="scss">
+.analyze-steadyState {
+    display: flex;
+    height: 100%;
+    min-height: 0;
+
+    &-right {
+        height: 100%;
+        overflow: hidden;
+        flex: 1;
+        padding: 10px 10px 10px 0;
+        display: flex;
+        flex-direction: column;
+    }
+}
+</style>
+<style lang="scss" scoped>
+.el-select {
+    min-width: 100px;
+}
+</style>

src/views/govern/analyze/steadyState/components/report.vue

@@ -0,0 +1,204 @@
+<template>
+    <div class="default-main report-zl-page1" :style="height">
+        <div class="report-zl-sidebar">
+            <!-- <pointTreeWx :default-expand-all="false" template @node-click="handleNodeClick" @init="handleNodeClick"
+                    @Policy="stencil">
+                </pointTreeWx> -->
+            <CloudDeviceEntryTree ref="TerminalRef" :height="37" template @Policy="stencil" @node-click="handleNodeClick"
+                @init="handleNodeClick"></CloudDeviceEntryTree>
+        </div>
+        <div class="report-zl-main">
+            <TableHeader datePicker ref="TableHeaderRef" :showReset="false">
+                <template v-slot:select>
+                    <!-- <el-form-item label="时间:">
+                            <DatePicker ref="datePickerRef"></DatePicker>
+                        </el-form-item> -->
+                    <el-form-item label="模板策略">
+                        <el-select v-model.trim="Template" @change="changetype" placeholder="请选择模版" value-key="id">
+                            <el-option v-for="item in templatePolicy" :key="item.id" :label="item.excelName"
+                                :value="item"></el-option>
+                        </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 #operation>
+                    <el-button icon="el-icon-Download" type="primary" @click="exportEvent">导出</el-button>
+                </template>
+            </TableHeader>
+            <div class="box" v-loading="tableStore.table.loading">
+                <div id="luckysheet" class="report-zl-sheet" v-if="tableStore.table.data.length > 0"></div>
+                <el-empty class="report-zl-sheet" v-else description="暂无数据" />
+            </div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import { onMounted, ref, provide } from 'vue'
+import TableStore from '@/utils/tableStore'
+import pointTreeWx from '@/components/tree/govern/pointTreeWx.vue'
+import TableHeader from '@/components/table/header/index.vue'
+import { useDictData } from '@/stores/dictData'
+import { mainHeight } from '@/utils/layout'
+import { exportExcel } from '@/views/system/reportForms/export.js'
+import DatePicker from '@/components/form/datePicker/time.vue'
+import CloudDeviceEntryTree from '@/components/tree/govern/cloudDeviceEntryTreeZL.vue'
+import { getListByIds } from '@/api/harmonic-boot/cockpit/cockpit'
+import { ElMessage } from 'element-plus'
+// import data from './123.json'
+
+const height = mainHeight(70)
+const dictData = useDictData()
+const TableHeaderRef = ref()
+const dotList: any = ref({})
+const Template: any = ref({})
+const reportForm: any = ref('')
+const datePickerRef = ref()
+const templatePolicy: any = ref([])
+const name = ref('')
+
+const tableStore = new TableStore({
+    url: '/cs-harmonic-boot/customReport/getSensitiveUserReport',
+    method: 'POST',
+    column: [],
+    showPage: false,
+    beforeSearchFun: () => {
+        tableStore.table.params.tempId = Template.value.id
+        tableStore.table.params.lineId = dotList.value.id
+        tableStore.table.params.sensitiveUserId = dotList.value.id
+        // ;(tableStore.table.params.startTime = datePickerRef.value.timeValue[0]),
+        //     (tableStore.table.params.endTime = datePickerRef.value.timeValue[1]),
+        if (!tableStore.table.params.tempId) {
+            return ElMessage.warning('请选择模板')
+        }
+        delete tableStore.table.params.searchBeginTime
+        delete tableStore.table.params.searchEndTime
+        delete tableStore.table.params.timeFlag
+    },
+    loadCallback: () => {
+        console.log('🚀 ~ tableStore.table:', tableStore.table.data)
+        name.value = dotList.value.name
+        // tableStore.table.data.forEach((item: any) => {
+        //     item.data1 ? (item.data = JSON.parse(item.data1)) : ''
+        //     item.celldata.forEach((k: any) => {
+        //         item.data[k.r][k.c].v ? (item.data[k.r][k.c] = k.v) : ''
+        //     })
+        // })
+
+        setTimeout(() => {
+            luckysheet.create({
+                container: 'luckysheet',
+                title: '', // 表 头名
+                lang: 'zh', // 中文
+                showtoolbar: false, // 是否显示工具栏
+                showinfobar: false, // 是否显示顶部信息栏
+                showsheetbar: true, // 是否显示底部sheet按钮
+                allowEdit: false, // 禁止所有编辑操作（必填）
+                data: tableStore.table.data
+                //  tableStore.table.data
+            })
+        }, 10)
+    }
+})
+provide('tableStore', tableStore)
+tableStore.table.params.resourceType = 1
+tableStore.table.params.customType = 1
+const flag = ref(true)
+onMounted(() => {
+    initListByIds()
+})
+
+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
+            }
+            // templateListData()
+        }
+    })
+}
+const stencil = (val: any) => {
+    console.log('🚀 ~ stencil ~ val:', val)
+    templatePolicy.value = val.filter((item: any) => item.excelType == '4')
+    Template.value = templatePolicy.value[0]
+    reportForm.value = templatePolicy.value[0]?.excelType
+}
+
+const changetype = (val: any) => {
+    reportForm.value = val.excelType
+}
+
+const handleNodeClick = (data: any, node: any) => {
+    if (data?.level == 3) {
+        dotList.value = data
+        setTimeout(() => {
+            tableStore.index()
+        }, 500)
+    } else {
+        tableStore.table.loading = false
+    }
+}
+
+const exportEvent = () => {
+    const now = new Date()
+    const year = now.getFullYear() // 4位年份
+    const month = now.getMonth() + 1 // 月份0-11，需+1
+    const day = now.getDate() // 日期1-31
+
+    // 格式化YYYY - MM - DD（补零）
+    const formattedDate = `${year}${String(month).padStart(2, '0')}${String(day).padStart(2, '0')}`
+    exportExcel(luckysheet.getAllSheets(), name.value + formattedDate)
+}
+</script>
+<style lang="scss">
+.report-zl-page1 {
+    display: flex;
+    overflow: hidden;
+
+    .cn-tree {
+        padding: 0 10px 0 0 !important;
+    }
+}
+
+.report-zl-sidebar {
+    width: 280px;
+    flex-shrink: 0;
+    min-height: 0;
+    overflow: hidden;
+}
+
+.report-zl-main {
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+    background: #fff;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.box {
+    flex: 1;
+    min-height: 0;
+    padding: 10px 0;
+    overflow: hidden;
+}
+
+.report-zl-sheet {
+    height: 100%;
+}
+</style>
+<style></style>

src/views/govern/analyze/steadyState/index.vue

@@ -0,0 +1,37 @@
+<template>
+    <div class="default-main" :style="{ height: pageHeight.height }">
+
+
+        <el-tabs v-model="activeTab" type="border-card">
+            <el-tab-pane label="图表" name="chart">
+                <chart  v-if="activeTab === 'chart'"/>
+            </el-tab-pane>
+            <el-tab-pane label="报表" name="report">
+                <report  v-if="activeTab === 'report'"/>
+
+            </el-tab-pane>
+        </el-tabs>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { mainHeight } from '@/utils/layout'
+import chart from './components/chart.vue'
+import report from './components/report.vue'
+
+defineOptions({
+    name: 'govern/analyze/steadyState'
+})
+
+const pageHeight = mainHeight(20)
+const activeTab = ref('chart')
+
+</script>
+
+<style scoped lang="scss">
+:deep(.el-tabs__content) {
+
+    padding: 0;
+}
+</style>

src/views/govern/analyze/transient/index.vue

@@ -0,0 +1,13 @@
+<template>
+    <div class="default-main">
+        <h1>暂态治理分析</h1>
+    </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+    name: 'govern/analyze/transient'
+})
+</script>
+
+<style scoped lang="scss"></style>

src/views/govern/device/control/index.vue

@@ -130,6 +130,7 @@
                     :showSearch="false"
                     v-if="
                         (dataSet.indexOf('_trenddata') == -1 &&
+                        dataSet.indexOf('_kilowattHour') == -1 &&
                             dataSet.indexOf('_realtimedata') == -1 &&
                             dataSet.indexOf('_event') == -1) ||
                         realTimeFlag
@@ -141,7 +142,7 @@
                             v-show="
                                 dataSet.includes('_items') ||
                                 dataSet.indexOf('_history') != -1 ||
-                                dataSet.indexOf('_moduleData') != -1||
+                                dataSet.indexOf('_moduleData') != -1 ||
                                 dataSet.indexOf('_devRunTrend') != -1
                             "
                         >
@@ -166,7 +167,11 @@
                             </el-select> -->
                             <el-radio-group
                                 v-model.trim="formInline.dataLevel"
-                                v-if="!dataSet.includes('_devRunTrend') &&!dataSet.includes('_moduleData') && TrendList?.lineType == 1"
+                                v-if="
+                                    !dataSet.includes('_devRunTrend') &&
+                                    !dataSet.includes('_moduleData') &&
+                                    TrendList?.lineType == 1
+                                "
                                 :disabled="TrendList?.lineType != 1"
                                 @change="handleClick"
                             >
@@ -227,7 +232,7 @@
                         <el-button
                             type="primary"
                             :disabled="tableLoading"
-                            v-if="realTimeFlag"
+                            v-if="showButton"
                             :icon="DataLine"
                             @click="handleTrend"
                         >
@@ -235,13 +240,22 @@
                         </el-button>
                         <el-button
                             type="primary"
-                            v-if="realTimeFlag"
+                            v-if="showButton"
                             :icon="TrendCharts"
                             @click="handleHarmonicSpectrum"
                             :disabled="tableLoading"
                         >
                             实时趋势
                         </el-button>
+                        <el-button
+                            type="primary"
+                            v-if="showButton"
+                            :icon="Download"
+                            @click="downloadTxt"
+                            :disabled="tableLoading"
+                        >
+                            下载数据
+                        </el-button>
                     </template>
                 </TableHeader>
                 <div
@@ -284,6 +298,7 @@
                         :style="{ height: tableHeight }"
                         v-if="
                             dataSet.indexOf('_trenddata') == -1 &&
+                            dataSet.indexOf('_kilowattHour') == -1 &&
                             dataSet.indexOf('_realtimedata') == -1 &&
                             dataSet.indexOf('_event') == -1 &&
                             tableData.length != 0
@@ -469,6 +484,10 @@
                 <div style="height: calc(100vh - 340px)" v-if="dataSet.indexOf('_trenddata') != -1">
                     <Trend ref="trendRef" :TrendList="TrendList"></Trend>
                 </div>
+                <!-- 电镀数据 -->
+                <div style="height: calc(100vh - 340px)" v-if="dataSet.indexOf('_kilowattHour') != -1">
+                    <electroplating ref="electroplatingRef" :TrendList="TrendList"></electroplating>
+                </div>
                 <!-- 实时数据 -->
                 <div
                     :style="`height: calc(100vh - (${sonTab == 1 ? '378px' : sonTab == 2 ? '340px' : '425px'}))`"
@@ -566,6 +585,7 @@ import { ElMessage } from 'element-plus'
 import DatePicker from '@/components/form/datePicker/index.vue'
 import Trend from './tabs/trend.vue' //趋势数据
 import realTime from './tabs/realtime.vue' //实时数据-主界面
+import electroplating from './tabs/electroplating.vue' //电镀数据-主界面
 import realTrend from './tabs/components/realtrend.vue' //实时数据-实时趋势
 import operatingTrend from './tabs/operatingTrend.vue' //运行趋势
 import harmonicSpectrum from './tabs/components/harmonicSpectrum.vue' //实时数据-谐波频谱子页面
@@ -580,7 +600,7 @@ import { useRouter } from 'vue-router'
 import TableHeader from '@/components/table/header/index.vue'
 import { useAdminInfo } from '@/stores/adminInfo'
 import {
-    Histogram,
+    Download,
     TrendCharts,
     DataLine,
     DataAnalysis,
@@ -592,6 +612,7 @@ import {
 } from '@element-plus/icons-vue'
 import analysisList from './analysisList/index.vue'
 import mqtt from 'mqtt'
+import { json } from 'node:stream/consumers'
 defineOptions({
     name: 'govern/device/control'
 })
@@ -671,7 +692,9 @@ const volConTypeList = dictData.getBasicData('Dev_Connect')
 // }
 //谐波频谱
 const realTrendRef = ref()
+const txtContent = ref('')
 const operatingTrendRef = ref()
+const electroplatingRef  = ref()
 const changeTrendType = (val: any) => {
     trendDataTime.value = ''
     activeTrendName.value = val * 1
@@ -681,7 +704,7 @@ const changeTrendType = (val: any) => {
 const activeTrendName: any = ref(0)
 const trendTimer: any = ref()
 const trendDataTime: any = ref()
-
+const showButton = ref(false)
 //谐波频谱方法
 const handleTrend = async () => {
     realTimeFlag.value = false
@@ -755,7 +778,7 @@ const handleHarmonicSpectrum = async () => {
         if (res.code == 'A0000') {
             ElMessage.success('设备应答成功')
             // mqttMessage.value = {}
-
+            showButton.value = true
             realDataTimer.value = window.setInterval(() => {
                 if (!dataSet.value.includes('_realtimedata')) return
 
@@ -784,6 +807,7 @@ const handleReturn = async () => {
     await getBasicRealData(lineId.value).then((res: any) => {
         if (res.code == 'A0000') {
             ElMessage.success('设备应答成功')
+            showButton.value = true
             // mqttMessage.value = {}
             realDataTimer.value = window.setInterval(() => {
                 if (!dataSet.value.includes('_realtimedata')) return
@@ -916,6 +940,10 @@ const nodeClick = async (e: anyObj, node: any) => {
                         if (item.type === 'trenddata') {
                             item.id = item.id + '_trenddata'
                         }
+                        //电镀数据
+                        if (item.type === 'kilowattHour') {
+                            item.id = item.id + '_kilowattHour'
+                        }
                         //实时数据
                         if (item.type === 'realtimedata') {
                             item.id = item.id + '_realtimedata'
@@ -1000,7 +1028,7 @@ const getRealDataMqttMsg = async () => {
             if (res.code == 'A0000') {
                 ElMessage.success('设备应答成功')
                 mqttMessage.value = {}
-
+                showButton.value = true
                 realDataTimer.value = window.setInterval(async () => {
                     if (!dataSet.value.includes('_realtimedata')) return
                     await getBasicRealData(lineId.value).then((res: any) => {
@@ -1129,6 +1157,7 @@ const getRealDataMqttMsg = async () => {
                     }
                     if (obj.hasOwnProperty('pA') && obj.hasOwnProperty('pB')) {
                         mqttMessage.value = obj
+                        txtContent.value = JSON.stringify(obj)
 
                         //更新实时数据主页面值
                         realTimeFlag.value &&
@@ -1161,6 +1190,9 @@ const getRealDataMqttMsg = async () => {
                 mqttRef.value.on('close', function () {
                     console.log('mqtt客户端已断开连接.....')
                 })
+                setTimeout(() => {
+                    tableLoading.value = false
+                }, 6000)
             } else {
                 ElMessage.success('设备应答失败')
                 tableLoading.value = false
@@ -1178,6 +1210,7 @@ const realDataTimer: any = ref()
 const mqttMessage = ref<any>({})
 const handleClick = async (tab?: any) => {
     tableLoading.value = true
+    showButton.value = false
     if (realDataTimer.value) {
         window.clearInterval(realDataTimer.value)
     }
@@ -1239,6 +1272,26 @@ const handleClick = async (tab?: any) => {
             tableLoading.value = false
         }, 0)
     }
+    //电镀数据
+    if (dataSet.value.includes('_kilowattHour')) {
+        let obj = {
+            devId: deviceId.value, //e.id
+            lineId: lineId.value, //e.pid
+            type: 4,
+            list: [
+                {
+                    lineId: lineId.value,
+                    devId: dataSet.value.replace('_kilowattHour', '')
+                }
+            ]
+            // startTime: datePickerRef.value && datePickerRef.value.timeValue[0],
+            // endTime: datePickerRef.value && datePickerRef.value.timeValue[1]
+        }
+        setTimeout(() => {
+            electroplatingRef.value && electroplatingRef.value.getTrendRequest(obj)
+            tableLoading.value = false
+        }, 0)
+    }
     //查询实时数据
     if (dataSet.value.includes('_realtimedata')) {
         tableLoading.value = true
@@ -1346,11 +1399,8 @@ const handleClick = async (tab?: any) => {
             await setTimeout(() => {
                 getRawData(obj)
                     .then((res: any) => {
-                     
                         tableLoading.value = false
                         setTimeout(() => {
-                           
-                            
                             operatingTrendRef.value?.setData(res.data)
                         }, 500)
                         setTimeout(() => {
@@ -1484,6 +1534,21 @@ const queryList: any = ref([])
 const echoName = (value: any, arr: any[]) => {
     return value ? arr.find(item => item.value == value)?.label : '/'
 }
+// 下载txt
+const downloadTxt = () => {
+    const content = txtContent.value // 文件内容
+    const blob = new Blob([content], { type: 'text/plain' }) // 创建 Blob 对象
+    const url = URL.createObjectURL(blob) // 生成下载链接
+
+    // 创建 <a> 标签并触发下载
+    const link = document.createElement('a')
+    link.href = url
+    link.download = '实时数据.txt' // 文件名
+    link.click()
+
+    // 释放 URL 对象
+    URL.revokeObjectURL(url)
+}
 
 onMounted(() => {})
 onBeforeUnmount(() => {

src/views/govern/device/control/tabs/components/waveFormAnalysis.vue

@@ -20,14 +20,8 @@
 
             <el-button @click="handleBack" :icon="Back">返回</el-button>
         </div>
-           <!-- v-loading="loading" -->
-        <el-tabs
-            class="home_body"
-            type="border-card"
-            v-model.trim="activeName1"
-            @tab-click="handleClick"
-         
-        >
+        <!-- v-loading="loading" -->
+        <el-tabs class="home_body" type="border-card" v-model.trim="activeName1" @tab-click="handleClick">
             <el-tab-pane label="瞬时波形" name="ssbx" :style="'height:' + bxecharts + ';overflow-y: auto;'">
                 <shushiboxi
                     v-if="isWp && wp && activeName == 'ssbx' && showBoxi"
@@ -110,9 +104,15 @@ const value = ref(1)
 const isWp = ref(false)
 const boxoList: any = ref([])
 const getWpData = (val: any, list: any) => {
-    wp.value = val
-    isWp.value = true
-    boxoList.value = list
+    wp.value = {}
+    isWp.value = false
+    boxoList.value = []
+
+    setTimeout(() => {
+        wp.value = val
+        isWp.value = true
+        boxoList.value = list
+    }, 100)
 }
 const changeView = () => {
     showBoxi.value = false
@@ -140,7 +140,6 @@ const handleBack = () => {
     emit('handleHideCharts')
 }
 const setHeight = (h: any, vh: any, num = 1) => {
-    console.log('🚀 ~ setHeight ~ h:', h)
     if (h != false) {
         parentHeight.value = h
     }

src/views/govern/device/control/tabs/electroplating.vue

@@ -0,0 +1,507 @@
+<template>
+    <div>
+        <!-- 电镀数据数据 -->
+        <div>
+            <TableHeader ref="tableHeaderRef" :showSearch="false" @selectChange="selectChange">
+                <template v-slot:select>
+                    <el-form-item>
+                        <DatePicker ref="datePickerRef"></DatePicker>
+                    </el-form-item>
+                    <el-form-item label="电度指标" label-width="80px">
+                        <el-select style="width: 200px" multiple :multiple-limit="3" collapse-tags filterable
+                            collapse-tags-tooltip v-model="searchForm.index" placeholder="请选择统计指标"
+                            @change="onIndexChange($event)">
+                            <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>
+                        <el-radio-group v-model="searchForm.dataLevel" @change="init()">
+                            <el-radio-button label="一次值" value="Primary" />
+                            <el-radio-button label="二次值" value="Secondary" />
+                        </el-radio-group>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-radio-group v-model="searchForm.dataModel" @change="init()">
+                            <el-radio-button label="全量" value="0" />
+                            <el-radio-button label="增量" value="1" />
+                        </el-radio-group>
+                    </el-form-item>
+                    <!-- <el-form-item label="统计类型">
+                        <el-select style="min-width: 120px !important" placeholder="请选择" v-model="searchForm.valueType">
+                            <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> -->
+                </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>
+        <div class="history_chart" :style="pageHeight" v-loading="loading">
+            <MyEchart ref="historyChart" :options="echartsData" v-if="showEchart" />
+            <el-empty :style="pageHeight" v-else description="暂无数据" />
+        </div>
+    </div>
+</template>
+<script lang="ts" setup>
+import { mainHeight } from '@/utils/layout'
+import { queryByCode, queryCsDictTree } from '@/api/system-boot/dictTree'
+import { ref, onMounted } from 'vue'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import { useDictData } from '@/stores/dictData'
+import { yMethod, exportCSV, completeTimeSeries } from '@/utils/echartMethod'
+import TableHeader from '@/components/table/header/index.vue'
+import { getTabsDataByType } from '@/api/cs-device-boot/EquipmentDelivery'
+import DatePicker from '@/components/form/datePicker/index.vue'
+import { color } from '@/components/echarts/color'
+import { ElMessage } from 'element-plus'
+const dictData = useDictData()
+defineOptions({
+    // name: 'govern/device/control'
+})
+const props = defineProps({
+    TrendList: {
+        type: Array
+    }
+})
+// console.log("🚀 ~ props:", props.TrendList)
+const showEchart = ref(true)
+//电压等级
+const voltageLevelList = dictData.getBasicData('Dev_Voltage_Stand')
+//接线方式
+const volConTypeList = dictData.getBasicData('Dev_Connect')
+const timeControl = ref(false)
+//值类型
+const pageHeight = ref(mainHeight(290))
+const loading = ref(true)
+const searchForm: any = ref({})
+const tableHeaderRef = ref()
+const typeOptions = [
+    {
+        name: '平均值',
+        id: 'avg'
+    },
+    {
+        name: '最大值',
+        id: 'max'
+    },
+    {
+        name: '最小值',
+        id: 'min'
+    },
+    {
+        name: 'CP95值',
+        id: 'cp95'
+    }
+]
+searchForm.value = {
+    index: [],
+    type: typeOptions[0].id,
+    searchBeginTime: '',
+    searchEndTime: '',
+    dataLevel: 'Primary',
+    dataModel: '0',
+    valueType: 'avg'
+}
+//统计指标
+const indexOptions: any = ref([])
+queryByCode('Kilowatt_Hour').then(res => {
+    queryCsDictTree(res.data.id).then(item => {
+        indexOptions.value = item.data.sort((a: any, b: any) => {
+            return a.sort - b.sort
+        })
+        searchForm.value.index[0] = indexOptions.value[0].id
+        init()
+    })
+})
+const chartsList = ref<any>([])
+const activeName: any = ref()
+const deviceData: any = ref([])
+//历史趋势devId
+const historyDevId: any = ref('')
+const chartTitle: any = ref('')
+const echartsData = ref<any>(null)
+//加载echarts图表
+//历史趋势数据
+const historyDataList: any = ref([])
+//获取请求趋势数据参数
+const trendRequestData = ref()
+const getTrendRequest = (val: any) => {
+    trendRequestData.value = val
+    // init()
+}
+//初始化趋势图
+const headerRef = ref()
+const datePickerRef = ref()
+const lineStyle = [{ type: 'solid' }, { type: 'dashed' }, { type: 'dotted' }]
+const init = async () => {
+    loading.value = true
+    echartsData.value = {}
+    historyDataList.value = []
+    chartTitle.value = ''
+
+    searchForm.value.index.map((item: any, indexs: any) => {
+        indexOptions.value.map((vv: any) => {
+            if (vv.id == item) {
+                chartTitle.value += indexs == searchForm.value.index.length - 1 ? vv.name : vv.name + '/'
+            }
+        })
+    })
+    const lists = searchForm.value.index.map((id: any) => ({
+        statisticalId: id,
+        frequencys: []
+    }))
+    let obj = {
+        ...trendRequestData.value,
+        list: lists,
+        // valueType: searchForm.value.type,
+        dataLevel: searchForm.value.dataLevel,
+        dataModel: searchForm.value.dataModel,
+        // valueType: searchForm.value.valueType,
+        startTime: datePickerRef.value && datePickerRef.value.timeValue[0],
+        endTime: datePickerRef.value && datePickerRef.value.timeValue[1]
+    }
+    if (searchForm.value.index.length == 0) {
+        ElMessage.warning('请选择统计指标')
+        loading.value = false
+        return
+    }
+    if (obj.devId && obj.list.length != 0) {
+        try {
+            showEchart.value = true
+            await getTabsDataByType(obj)
+                .then((res: any) => {
+                    if (res.code == 'A0000') {
+                        if (res.data.length == 0) {
+                            loading.value = false
+                            showEchart.value = false
+                            return
+                        }
+                        historyDataList.value = res.data
+                        chartsList.value = formatChartData(JSON.parse(JSON.stringify(res.data)))
+                        loading.value = false
+                        setEchart()
+                    }
+                })
+                .catch(error => {
+                    loading.value = false
+                })
+        } catch (error) {
+            loading.value = false
+        }
+    }
+}
+const setEchart = () => {
+    loading.value = true
+    echartsData.value = {}
+    //icon图标替换legend图例
+
+    // y轴单位数组
+    let unitList: any = []
+
+    let groupedData = chartsList.value.reduce((acc: any, item: any) => {
+        const key = item.statisticalName
+
+        if (!acc[key]) {
+            acc[key] = []
+        }
+        acc[key].push(item)
+        return acc
+    }, {})
+    let result = Object.values(groupedData)
+    // console.log("🚀 ~ .then ~ result:", result)
+    // console.log("🚀 ~ .then ~ result:", result)
+    if (chartsList.value.length > 0) {
+        unitList = result.map((item: any) => {
+            return item[0].unit
+        })
+    }
+
+    echartsData.value = {
+        legend: {
+            itemWidth: 20,
+            itemHeight: 20,
+            itemStyle: { opacity: 0 }, //去圆点
+            type: 'scroll', // 开启滚动分页
+            // orient: 'vertical', // 垂直排列
+            top: 5,
+            right: 70
+            // width: 550,
+            // height: 50
+        },
+        grid: {
+            top: '80px'
+        },
+        tooltip: {
+            axisPointer: {
+                type: 'cross',
+                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(params: any) {
+                const xname = params[0].value[0]
+                let str = `${xname}<br>`
+                params.forEach((el: any, index: any) => {
+                    let marker = ''
+
+                    if (el.value[3] == 'dashed') {
+                        for (let i = 0; i < 3; i++) {
+                            marker += `<span style="display:inline-block;border: 2px ${el.color} solid;margin-right:5px;width:10px;height:0px;background-color:#ffffff00;"></span>`
+                        }
+                    } else {
+                        marker = `<span style="display:inline-block;border: 2px ${el.color} ${el.value[3]};margin-right:5px;width:40px;height:0px;background-color:#ffffff00;"></span>`
+                    }
+                    let unit = el.value[2] ? el.value[2] : ''
+                    str += `${marker}${el.seriesName.split('(')[0]}：${el.value[1]}${unit}
+                                            <br>`
+                })
+                return str
+            }
+        },
+        color: ['#DAA520', '#2E8B57', '#A52a2a', ...color],
+        xAxis: {
+            type: 'time',
+            axisLabel: {
+                formatter: {
+                    day: '{MM}-{dd}',
+                    month: '{MM}',
+                    year: '{yyyy}'
+                }
+            }
+        },
+        yAxis: [{}],
+        toolbox: {
+            featureProps: {
+                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'
+                        )
+                    }
+                }
+            }
+        },
+        options: {
+            series: []
+        }
+    }
+    // console.log("🚀 ~ unitList.forEach ~ unitList:", unitList)
+
+    if (chartsList.value.length > 0) {
+        let yData: any = []
+        echartsData.value.yAxis = []
+        let setList = [...new Set(unitList)]
+
+        setList.forEach((item: any, index: any) => {
+            if (index > 2) {
+                echartsData.value.grid.right = (index - 1) * 80
+            }
+            yData.push([])
+            let right = {
+                position: 'right',
+                offset: (index - 1) * 80
+            }
+            // console.log("🚀 ~ unitList.forEach ~ right.index:", index)
+            echartsData.value.yAxis.push({
+                name: item,
+                yAxisIndex: index,
+                splitNumber: 5,
+                minInterval: 1,
+                splitLine: {
+                    show: false
+                },
+                ...(index > 0 ? right : null)
+            })
+        })
+        // console.log("🚀 ~ result.forEach ~ result:", result)
+        // '电压负序分量', '电压正序分量', '电压零序分量'
+        let ABCName = [...new Set(chartsList.value.map((item: any) => item.statisticalName))]
+        // console.log("🚀 ~ .then ~ ABCName:", ABCName)
+        result.forEach((item: any, index: any) => {
+            let yMethodList: any = []
+
+            let ABCList = Object.values(
+                item.reduce((acc: any, cur: any) => {
+                    const key = cur.phase == null ? cur.statisticalIndex : cur.phase
+
+                    if (!acc[key]) {
+                        acc[key] = []
+                    }
+                    acc[key].push(cur)
+                    return acc
+                }, {})
+            )
+            // console.log("🚀 ~ ABCList.forEach ~ ABCList:", ABCList)
+
+            ABCList.forEach((kk: any) => {
+                let colorName = kk[0].phase?.charAt(0).toUpperCase()
+                let lineS = ABCName.findIndex(name => name === kk[0].statisticalName)
+                const seriesLineStyle = lineStyle[lineS] || lineStyle[0]
+                const seriesColor = kk[0].phase
+                    ? colorName == 'A'
+                        ? '#DAA520'
+                        : colorName == 'B'
+                            ? '#2E8B57'
+                            : colorName == 'C'
+                                ? '#A52a2a'
+                                : ''
+                    : '#082e6c'
+
+                let seriesList: any = []
+                const sortedData = [...kk].sort(
+                    (a: any, b: any) => new Date(a.time).getTime() - new Date(b.time).getTime()
+                )
+                sortedData.forEach((cc: any) => {
+                    if (cc.statisticalData !== null) {
+                        yData[setList.indexOf(kk[0].unit)].push(cc.statisticalData?.toFixed(2))
+                    }
+
+                    seriesList.push([cc.time, cc.statisticalData?.toFixed(2), cc.unit, seriesLineStyle.type])
+                })
+
+                echartsData.value.options.series.push({
+                    name: kk[0].phase ? kk[0].phase + '相' + kk[0].anotherName : kk[0].anotherName,
+                    type: 'line',
+                    smooth: true,
+                    color: seriesColor,
+                    symbol: 'none',
+                    data: timeControl.value ? completeTimeSeries(seriesList) : seriesList,
+                    lineStyle: seriesLineStyle,
+                    yAxisIndex: setList.indexOf(kk[0].unit)
+                })
+            })
+            // let [min, max] = yMethod(yMethodList)
+            // echartsData.value.yAxis[index].min = min
+            // echartsData.value.yAxis[index].max = max
+        })
+        yData.forEach((item: any, index: any) => {
+            let [min, max] = yMethod(item)
+            echartsData.value.yAxis[index].min = min
+            echartsData.value.yAxis[index].max = max
+        })
+        // console.log("🚀 ~ result.forEach ~ echartsData.value:", echartsData.value)
+    }
+    loading.value = false
+}
+const setTimeControl = () => {
+    timeControl.value = !timeControl.value
+    setEchart()
+}
+
+const selectChange = (flag: boolean) => {
+    if (flag) {
+        pageHeight.value = mainHeight(332)
+    } else {
+        pageHeight.value = mainHeight(290)
+    }
+}
+
+// 电度趋势数据预处理：按时间排序
+const formatChartData = (data: any[]) => {
+    return [...data].sort((a, b) => new Date(a.time).getTime() - new Date(b.time).getTime())
+}
+
+const onIndexChange = (val: any) => {
+    let pp: any = []
+    indexOptions.value.forEach((item: any) => {
+        const filteredResult = val.filter((vv: any) => item.id == vv)
+        if (filteredResult.length > 0) {
+            pp.push(filteredResult[0])
+        }
+    })
+    searchForm.value.index = pp
+}
+onMounted(() => {
+    datePickerRef.value.setInterval(5)
+})
+defineExpose({ getTrendRequest })
+</script>
+
+<style lang="scss" scoped>
+.history_header {
+    display: flex;
+
+    // flex-wrap: wrap;
+    #history_select {
+        width: 100%;
+        display: flex;
+        // justify-content: flex-start;
+        // overflow-x: auto;
+        height: auto;
+        flex-wrap: wrap;
+
+        .el-form-item {
+            flex: none !important;
+            // max-width: 380px;
+        }
+
+        .el-select {
+            margin-right: 10px;
+        }
+    }
+
+    // #history_select::-webkit-scrollbar {
+    //     width: 0 !important;
+    //     display: none !important;
+    // }
+
+    .history_searchBtn {
+        flex: 1;
+        display: flex;
+        justify-content: flex-end;
+        margin-top: 3px;
+    }
+}
+
+.history_chart {
+    width: 100%;
+
+    // flex: 1;
+    margin-top: 10px;
+}
+
+:deep(.el-select__selected-item) {
+    .is-closable {
+        width: 100px !important;
+    }
+}
+
+:deep(.el-form--inline .el-form-item) {
+    margin-right: 15px !important;
+}
+</style>

src/views/govern/device/control/tabs/event.vue

@@ -111,10 +111,11 @@ const tableStore: any = new TableStore({
                     },
                     click: async row => {
                         row.loading1 = true
-                        isWaveCharts.value = true
-                        loading.value = true
+                      
                         await analyseWave(row.id)
                             .then(res => {
+                                isWaveCharts.value = true
+                                loading.value = true
                                 row.loading1 = false
                                 if (res != undefined) {
                                     boxoList.value = row
@@ -182,7 +183,7 @@ const tableStore: any = new TableStore({
                     icon: 'el-icon-Check',
                     render: 'basicButton',
                     disabled: row => {
-                        return (props.deviceType === '2' && row.wavePath) || row.showName === '未知'
+                        return !(props.deviceType == '2' && row.wavePath == null)
                     },
                     click: row => {
                         getFileByEventId(row.id).then(res => {
@@ -219,6 +220,8 @@ const handleBack = async () => {
 }
 defineExpose({ getTableParams })
 onMounted(() => {
+    console.log('🚀 ~ props.deviceType:', props.deviceType)
+
     tableStore.index()
 })
 </script>

src/views/govern/device/disposition/index.vue

@@ -1,12 +1,10 @@
 <template>
-    <div class=" device-manage" :style="{ height: pageHeight.height }" v-loading="loading">
+    <div class="device-manage" :style="{ height: pageHeight.height }" v-loading="loading">
         <GetMarketList @node-click="selectUser" @selectUser="selectUser"></GetMarketList>
         <div class="device-manage-right" :style="{ height: pageHeight.height }">
             <el-descriptions title="用户基本信息" class="mb10" :column="2" border>
                 <template #extra>
-                    <el-button type="primary" icon="el-icon-Sort" @click="getMarketEnginner">
-                        绑定工程
-                    </el-button>
+                    <el-button type="primary" icon="el-icon-Sort" @click="getMarketEnginner">绑定工程</el-button>
                 </template>
                 <el-descriptions-item label="名称">
                     {{ user.name }}
@@ -29,18 +27,36 @@
                 </vxe-table>
             </div>
         </div>
-        <el-dialog v-model.trim="dialogVisible" title="绑定工程" class="cn-operate-dialog" :close-on-click-modal="false">
-            <el-input maxlength="32" show-word-limit v-model.trim="filterText" icon="el-icon-Search" placeholder="请输入内容"
-                clearable style="margin-bottom: 10px">
+        <el-dialog
+            v-model.trim="dialogVisible"
+            title="绑定工程"
+            class="cn-operate-dialog"
+            :close-on-click-modal="false"
+        >
+            <el-input
+                maxlength="32"
+                show-word-limit
+                v-model.trim="filterText"
+                icon="el-icon-Search"
+                placeholder="请输入内容"
+                clearable
+                style="margin-bottom: 10px"
+            >
                 <template #prefix>
                     <Icon name="el-icon-Search" style="font-size: 16px" />
                 </template>
             </el-input>
 
-            <vxe-table ref="tableRef" v-bind="defaultAttribute" :data="tableData2.filter((item: any) => {
+            <vxe-table
+                ref="tableRef"
+                v-bind="defaultAttribute"
+                :data="tableData2.filter((item: any) => {
                 return item.name.includes(filterText)
             })
-                " height="500px" style="width: 100%">
+                "
+                height="500px"
+                style="width: 100%"
+            >
                 <vxe-column type="checkbox" width="60"></vxe-column>
                 <vxe-column field="name" title="工程名称"></vxe-column>
             </vxe-table>
@@ -77,6 +93,7 @@ const filterText = ref('')
 const tableRef = ref()
 
 const selectUser = (e: any) => {
+    if (e == undefined) return (loading.value = false)
     user.value = e
     loading.value = true
     queryByUseId({

src/views/govern/device/officialUser/index.vue

@@ -1,141 +1,159 @@
 <template>
-  <div class=" device-manage" :style="{ height: pageHeight.height }" v-loading="loading">
-    <OfficialUserTree @node-click="selectUser" @selectUser="selectUser"></OfficialUserTree>
-    <div class="device-manage-right" :style="{ height: pageHeight.height }">
-      <div class="el-descriptions__header">
-        <el-button type="primary"  icon="el-icon-Sort"  @click="getEnginnerDev">绑定工程 / 设备</el-button>
-      </div>
+    <div class="device-manage" :style="{ height: pageHeight.height }" v-loading="loading">
+        <OfficialUserTree @node-click="selectUser" @selectUser="selectUser"></OfficialUserTree>
+        <div style="flex: 1" class="pt10 pr10">
+            <div class="el-descriptions__header">
+                <div class="el-descriptions__title">工程 / 设备列表</div>
+                <el-button type="primary" icon="el-icon-Sort" @click="getEnginnerDev">绑定工程 / 设备</el-button>
+            </div>
 
-      <!-- 使用flex布局平均分配高度 -->
-      <div class="tables-container">
-        <div class="table-wrapper">
-          <vxe-table v-bind="defaultAttribute" :data="tableData" height="auto" style="width: 100%">
-            <vxe-column field="name" title="工程名称"></vxe-column>
-            <vxe-column title="操作" width="200px">
-              <template v-slot:default="scoped">
-                <el-button link size="small" type="danger" @click="deleteEngineering(scoped.row)">
-                  移除
-                </el-button>
-              </template>
-            </vxe-column>
-          </vxe-table>
+            <!-- 使用flex布局平均分配高度 -->
+            <div class="tables-container">
+                <div class="table-wrapper" :style="{ height: pageHeight1.height }">
+                    <vxe-table v-bind="defaultAttribute" :data="tableData" height="auto" style="width: 100%">
+                        <vxe-column field="name" title="工程名称"></vxe-column>
+                        <vxe-column title="操作" width="200px">
+                            <template v-slot:default="scoped">
+                                <el-button link size="small" type="danger" @click="deleteEngineering(scoped.row)">
+                                    移除
+                                </el-button>
+                            </template>
+                        </vxe-column>
+                    </vxe-table>
+                </div>
+            </div>
+        </div>
+        <!-- 短信配置 -->
+
+        <div style="width: 400px" class="pt10 pr10">
+            <div class="el-descriptions__header">
+                <div class="el-descriptions__title">短信配置</div>
+                <el-button type="primary" icon="el-icon-Select" @click="saveConfiguration">保存</el-button>
+            </div>
+
+            <!-- 使用flex布局平均分配高度 -->
+            <div :style="{ height: pageHeight1.height }" class="border">
+                <el-tree
+                    ref="treeRef"
+                    class="mt10"
+                    node-key="id"
+                    default-expand-all
+                    :data="tableData"
+                    :props="defaultProps"
+                    show-checkbox
+                >
+                    <template #default="{ node, data }">
+                        <span>{{ data.name.replace(/\([^)]*\)/, '') }}</span>
+                    </template>
+                </el-tree>
+            </div>
         </div>
 
-        <!-- 新增设备列表 -->
-        <!-- <div class="device-list-section table-wrapper">
-          <vxe-table v-bind="defaultAttribute" :data="deviceTableData" height="auto" style="width: 100%">
-            <vxe-column field="name" title="设备名称"></vxe-column>
-            <vxe-column title="操作" width="200px">
-              <template v-slot:default="scoped">
-                <el-button link size="small" type="danger" @click="deleteDevice(scoped.row)">
-                  移除
-                </el-button>
-              </template>
-            </vxe-column>
-          </vxe-table>
-        </div> -->
-      </div>
+        <!-- 对话框为左右布局 -->
+        <el-dialog
+            v-model.trim="dialogVisible"
+            draggable
+            title="绑定工程 / 设备"
+            class="cn-operate-dialog"
+            :close-on-click-modal="false"
+        >
+            <div class="dialog-content">
+                <!-- 工程部分 -->
+                <div class="dialog-section">
+                    <div class="section-header">
+                        <span>工程列表</span>
+                        <el-input
+                            maxlength="32"
+                            show-word-limit
+                            v-model.trim="filterText"
+                            placeholder="搜索工程"
+                            clearable
+                            class="search-input"
+                        >
+                            <template #prefix>
+                                <Icon name="el-icon-Search" style="font-size: 16px" />
+                            </template>
+                        </el-input>
+                    </div>
+
+                    <vxe-table
+                        ref="tableRef"
+                        v-bind="defaultAttribute"
+                        :data="tableData2.filter((item: any) => {
+            return item.name.includes(filterText)
+          })"
+                        height="400px"
+                        style="width: 100%"
+                    >
+                        <vxe-column type="checkbox" width="60"></vxe-column>
+                        <vxe-column field="name" title="工程名称"></vxe-column>
+                    </vxe-table>
+                </div>
+
+                <!-- 设备部分 -->
+                <div class="dialog-section">
+                    <div class="section-header">
+                        <span>设备列表</span>
+                        <el-input
+                            maxlength="32"
+                            show-word-limit
+                            v-model.trim="deviceFilterText"
+                            placeholder="搜索设备"
+                            clearable
+                            class="search-input"
+                        >
+                            <template #prefix>
+                                <Icon name="el-icon-Search" style="font-size: 16px" />
+                            </template>
+                        </el-input>
+                    </div>
+
+                    <vxe-table
+                        ref="deviceTableRef"
+                        v-bind="defaultAttribute"
+                        :data="deviceTableData2.filter((item: any) => {
+            return item.name.includes(deviceFilterText)
+          })"
+                        height="400px"
+                        style="width: 100%"
+                    >
+                        <vxe-column type="checkbox" width="60"></vxe-column>
+                        <vxe-column field="name" title="便携式设备名称"></vxe-column>
+                    </vxe-table>
+                </div>
+            </div>
+
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="dialogVisible = false">取 消</el-button>
+                    <el-button type="primary" @click="addData">确 定</el-button>
+                </span>
+            </template>
+        </el-dialog>
     </div>
-    
-    <!-- 对话框为左右布局 -->
-    <el-dialog 
-      v-model.trim="dialogVisible" 
-      draggable
-      title="绑定工程 / 设备" 
-      class="cn-operate-dialog" 
-      :close-on-click-modal="false"
-      
-    >
-      <div class="dialog-content">
-        <!-- 工程部分 -->
-        <div class="dialog-section">
-          <div class="section-header">
-            <span>工程列表</span>
-            <el-input 
-              maxlength="32" 
-              show-word-limit 
-              v-model.trim="filterText" 
-              placeholder="搜索工程" 
-              clearable 
-              class="search-input"
-            >
-              <template #prefix>
-                <Icon name="el-icon-Search" style="font-size: 16px" />
-              </template>
-            </el-input>
-          </div>
-          
-          <vxe-table 
-            ref="tableRef" 
-            v-bind="defaultAttribute" 
-            :data="tableData2.filter((item: any) => {
-              return item.name.includes(filterText)
-            })" 
-            height="400px" 
-            style="width: 100%"
-          >
-            <vxe-column type="checkbox" width="60"></vxe-column>
-            <vxe-column field="name" title="工程名称"></vxe-column>
-          </vxe-table>
-        </div>
-        
-        <!-- 设备部分 -->
-        <div class="dialog-section">
-          <div class="section-header">
-            <span>设备列表</span>
-            <el-input 
-              maxlength="32" 
-              show-word-limit 
-              v-model.trim="deviceFilterText" 
-              placeholder="搜索设备" 
-              clearable 
-              class="search-input"
-            >
-              <template #prefix>
-                <Icon name="el-icon-Search" style="font-size: 16px" />
-              </template>
-            </el-input>
-          </div>
-          
-          <vxe-table 
-            ref="deviceTableRef" 
-            v-bind="defaultAttribute" 
-            :data="deviceTableData2.filter((item: any) => {
-              return item.name.includes(deviceFilterText)
-            })" 
-            height="400px" 
-            style="width: 100%"
-          >
-            <vxe-column type="checkbox" width="60"></vxe-column>
-            <vxe-column field="name" title="便携式设备名称"></vxe-column>
-          </vxe-table>
-        </div>
-      </div>
-
-      <template #footer>
-        <span class="dialog-footer">
-          <el-button @click="dialogVisible = false">取 消</el-button>
-          <el-button type="primary" @click="addData">确 定</el-button>
-        </span>
-      </template>
-    </el-dialog>
-  </div>
 </template>
 
 <script setup lang="ts">
 defineOptions({
-  name: 'govern/officialUser/index'
+    name: 'govern/officialUser/index'
 })
 
 import { defaultAttribute } from '@/components/table/defaultAttribute'
 import OfficialUserTree from '@/components/tree/govern/officialUserTree.vue'
 import { mainHeight } from '@/utils/layout'
-import {  queryRunPortableDevByUseId ,queryUnlinkEngineeringByUseId} from '@/api/cs-device-boot/user'
-import { add, removeUserDev, queryDevByUseId } from '@/api/cs-system-boot/official'
+import { queryRunPortableDevByUseId, queryUnlinkEngineeringByUseId } from '@/api/cs-device-boot/user'
+import {
+    add,
+    removeUserDev,
+    queryDevByUseId,
+    addUserDevices,
+    queryDeviceIdsByUserId
+} from '@/api/cs-system-boot/official'
 import { ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 
 const pageHeight = mainHeight(60)
+const pageHeight1 = mainHeight(125)
 const loading = ref(true)
 
 const user: any = ref({})
@@ -148,185 +166,222 @@ const filterText = ref('') // 工程搜索文本
 const deviceFilterText = ref('') // 设备搜索文本
 const tableRef = ref()
 const deviceTableRef = ref() // 设备表格引用
-
+const defaultProps = {
+    children: 'devList',
+    label: 'name'
+}
 const selectUser = (e: any) => {
-  user.value = e
-  loading.value = true
+      if (e == undefined) return (loading.value = false)
+    user.value = e
+    loading.value = true
 
-    queryDevByUseId({ userId: e.id }).then((engineeringRes) => {
-        loading.value = false
-        tableData.value = engineeringRes.data.engineeringList || []
-        deviceTableData.value =  engineeringRes.data.portableDevList || []
-  }).catch(() => {
-        loading.value = false
-  })
+    queryDevByUseId({ userId: e.id })
+        .then(engineeringRes => {
+            loading.value = false
+
+            tableData.value = engineeringRes.data.engineeringList || []
+            deviceTableData.value = engineeringRes.data.portableDevList || []
+            queryDeviceIdsByUserId({
+                userId: user.value.id
+            }).then(res => {
+                treeRef.value!.setCheckedKeys(res.data, false)
+            })
+        })
+        .catch(() => {
+            loading.value = false
+        })
 }
 
 const getEnginnerDev = () => {
-  filterText.value = ''
-  deviceFilterText.value = ''
+    filterText.value = ''
+    deviceFilterText.value = ''
 
-  // 同时获取工程和设备数据
-  Promise.all([
-    queryUnlinkEngineeringByUseId({ userId: user.value.id }),
-    queryRunPortableDevByUseId({ userId: user.value.id })
-  ]).then(([engineeringRes, deviceRes]) => {
-    tableData2.value = engineeringRes.data || []
-    deviceTableData2.value = deviceRes.data || []
-    dialogVisible.value = true
-    
-    setTimeout(() => {
-      tableRef.value?.clearCheckboxRow()
-      deviceTableRef.value?.clearCheckboxRow()
-    }, 0)
-  })
+    // 同时获取工程和设备数据
+    Promise.all([
+        queryUnlinkEngineeringByUseId({ userId: user.value.id }),
+        queryRunPortableDevByUseId({ userId: user.value.id })
+    ]).then(([engineeringRes, deviceRes]) => {
+        tableData2.value = engineeringRes.data || []
+        deviceTableData2.value = deviceRes.data || []
+        dialogVisible.value = true
+
+        setTimeout(() => {
+            tableRef.value?.clearCheckboxRow()
+            deviceTableRef.value?.clearCheckboxRow()
+        }, 0)
+    })
 }
 
 const deleteEngineering = (row: any) => {
-  ElMessageBox.confirm('是否移出该工程?', '请确认', {
-    confirmButtonText: '确认',
-    cancelButtonText: '取消',
-    type: 'warning'
-  }).then(() => {
-    // 只移除工程，设备列表为空
-    const form = {
-      engineeringList: [row.id],  // 要移除的工程ID
-      portableDevList: [],               // 设备列表为空
-      userId: user.value.id
-    }
-    
-    removeUserDev(form).then((res: any) => {
-      ElMessage.success(res.message)
-      selectUser(user.value)
+    ElMessageBox.confirm('是否移出该工程?', '请确认', {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning'
+    }).then(() => {
+        // 只移除工程，设备列表为空
+        const form = {
+            engineeringList: [row.id], // 要移除的工程ID
+            portableDevList: [], // 设备列表为空
+            userId: user.value.id
+        }
+
+        removeUserDev(form).then((res: any) => {
+            ElMessage.success(res.message)
+            selectUser(user.value)
+        })
     })
-  })
 }
 
 // 删除设备方法
 const deleteDevice = (row: any) => {
     console.log('删除设备', row)
-  ElMessageBox.confirm('是否移出该设备?', '请确认', {
-    confirmButtonText: '确认',
-    cancelButtonText: '取消',
-    type: 'warning'
-  }).then(() => {
-    // 只移除设备，工程列表为空
-    const form = {
-      engineeringList: [],               // 工程列表为空
-      portableDevList: [row.id],   // 要移除的设备ID
-      userId: user.value.id
-    }
-    
-    removeUserDev(form).then((res: any) => {
-      ElMessage.success(res.message)
-      selectUser(user.value)
+    ElMessageBox.confirm('是否移出该设备?', '请确认', {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning'
+    }).then(() => {
+        // 只移除设备，工程列表为空
+        const form = {
+            engineeringList: [], // 工程列表为空
+            portableDevList: [row.id], // 要移除的设备ID
+            userId: user.value.id
+        }
+
+        removeUserDev(form).then((res: any) => {
+            ElMessage.success(res.message)
+            selectUser(user.value)
+        })
     })
-  })
 }
 
 const addData = () => {
-  const selectedEngineers = tableRef.value.getCheckboxRecords()
-  const selectedDevices = deviceTableRef.value.getCheckboxRecords()
-  
-  // 如果没有选择任何项，则提示
-  if (selectedEngineers.length === 0 && selectedDevices.length === 0) {
-    ElMessage.warning('请至少选择一项工程或设备')
-    return
-  }
-  
-  // 构造请求参数对象
-  const form = {
-    engineeringList: [] as any[],
-    portableDevList: [] as any[],
-    userId: user.value.id
-  }
-  
-//   // 处理已有的工程数据
-//   tableData.value.forEach((item: any) => {
-//     form.engineeringList.push(item.id)
-//   })
-  
-//   // 处理已有的设备数据
-//   deviceTableData.value.forEach((item: any) => {
-//     form.portableDevList.push(item.id)
-//   })
-  
-  // 添加新选择的工程
-  selectedEngineers.forEach((item: any) => {
-    form.engineeringList.push( item.id)
-  })
-  
-  // 添加新选择的设备
-  selectedDevices.forEach((item: any) => {
-    form.portableDevList.push(item.id)
-  })
-  
-  // 发送请求
-  add(form).then((res: any) => {
-    ElMessage.success(res.message)
-    selectUser(user.value)
-    dialogVisible.value = false
-  })
+    const selectedEngineers = tableRef.value.getCheckboxRecords()
+    const selectedDevices = deviceTableRef.value.getCheckboxRecords()
+
+    // 如果没有选择任何项，则提示
+    if (selectedEngineers.length === 0 && selectedDevices.length === 0) {
+        ElMessage.warning('请至少选择一项工程或设备')
+        return
+    }
+
+    // 构造请求参数对象
+    const form = {
+        engineeringList: [] as any[],
+        portableDevList: [] as any[],
+        userId: user.value.id
+    }
+
+    //   // 处理已有的工程数据
+    //   tableData.value.forEach((item: any) => {
+    //     form.engineeringList.push(item.id)
+    //   })
+
+    //   // 处理已有的设备数据
+    //   deviceTableData.value.forEach((item: any) => {
+    //     form.portableDevList.push(item.id)
+    //   })
+
+    // 添加新选择的工程
+    selectedEngineers.forEach((item: any) => {
+        form.engineeringList.push(item.id)
+    })
+
+    // 添加新选择的设备
+    selectedDevices.forEach((item: any) => {
+        form.portableDevList.push(item.id)
+    })
+
+    // 发送请求
+    add(form).then((res: any) => {
+        ElMessage.success(res.message)
+        selectUser(user.value)
+        dialogVisible.value = false
+    })
+}
+const treeRef = ref()
+// 保存短信配置
+const saveConfiguration = () => {
+    // treeRef.value!.getCheckedNodes(false, false)
+    let deviceIds = treeRef
+        .value!.getCheckedNodes(false, false)
+        .filter((item: any) => item.devList == null)
+        .map((item: any) => item.id)
+    if (deviceIds.length == 0) {
+        return ElMessage.warning('请选择设备!')
+    }
+    addUserDevices({
+        deviceIds: deviceIds,
+        userId: user.value.id
+    }).then((res: any) => {
+        return ElMessage.success('短信配置成功!')
+    })
 }
 </script>
 
 <style lang="scss" scoped>
 .device-manage {
-  display: flex;
-
-  &-right {
-    overflow: hidden;
-    flex: 1;
-    padding: 10px 10px 10px 0;
     display: flex;
-    flex-direction: column;
 
-    .el-descriptions__header {
-      height: 27px;
-      display: flex;
-      justify-content: flex-end; /* 靠右显示 */
-      align-items: center;
-    }
-
-    .tables-container {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-
-      .table-wrapper {
+    &-right {
+        overflow: hidden;
         flex: 1;
-        min-height: 0;
+        padding: 10px 10px 10px 0;
+        display: flex;
+        flex-direction: column;
 
-        &:first-child {
-          // margin-bottom: 10px;
+        .el-descriptions__header {
+            // height: 27px;
+            display: flex;
+            justify-content: flex-end;
+            /* 靠右显示 */
+            align-items: center;
+        }
+
+        .tables-container {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+
+            .table-wrapper {
+                flex: 1;
+                min-height: 0;
+
+                &:first-child {
+                    // margin-bottom: 10px;
+                }
+            }
         }
-      }
     }
-  }
+}
+:deep(.el-descriptions__header) {
+    margin-bottom: 10px !important;
 }
 
 .dialog-content {
-  display: flex;
-  gap: 20px;
-  
-  .dialog-section {
-    flex: 1;
-    
-    .section-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 10px;
-      
-      span {
-        font-weight: bold;
-        font-size: 16px;
-      }
-      
-      .search-input {
-        width: 200px;
-      }
+    display: flex;
+    gap: 20px;
+
+    .dialog-section {
+        flex: 1;
+
+        .section-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 10px;
+
+            span {
+                font-weight: bold;
+                font-size: 16px;
+            }
+
+            .search-input {
+                width: 200px;
+            }
+        }
     }
-  }
 }
-</style>
+.border {
+    border: 1px solid var(--el-border-color);
+}
+</style>

src/views/govern/device/planData/components/schemeTree.vue

@@ -21,9 +21,9 @@
                     </el-tooltip>
 
 
-                    <Icon @click="onMenuCollapse" :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
+                    <!-- <Icon @click="onMenuCollapse" :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
                         :class="menuCollapse ? 'unfold' : ''" size="18" class="fold ml10 menu-collapse"
-                        style="cursor: pointer" />
+                        style="cursor: pointer" /> -->
                 </div>
                 <el-tree style="flex: 1; overflow: auto" :props="defaultProps" highlight-current
                     :filter-node-method="filterNode" node-key="id" v-bind="$attrs" default-expand-all :data="tree"

src/views/govern/device/planData/components/transient.vue

@@ -95,10 +95,11 @@ const tableStore = new TableStore({
                     },
                     click: async row => {
                         row.loading1 = true
-                        loading.value = true
-                        isWaveCharts.value = true
+                      
                         await analyseWave(row.id)
                             .then(res => {
+                                loading.value = true
+                                isWaveCharts.value = true
                                 row.loading1 = false
                                 if (res != undefined) {
                                     boxoList.value = row

src/views/govern/device/tourist/index.vue

@@ -28,6 +28,7 @@ import { mainHeight } from '@/utils/layout'
 import { getVisitorConfig, updateVisitorConfig } from '@/api/cs-device-boot/user'
 import { ref, onMounted } from 'vue'
 import { ElMessage } from 'element-plus'
+import { debounce } from 'lodash-es'
 const pageHeight = mainHeight(60)
 const loading = ref(true)
 const defaultCheckedKeys: any = ref([])
@@ -35,6 +36,7 @@ const tableData = ref([])
 const treeRef = ref(null)
 const ignoreCheckChange = ref(false)
 const checkChange = (data: any) => {
+    if (data == undefined) return (loading.value = false)
     if (data.data.pName == '便携式设备') {
         if (ignoreCheckChange.value) {
             ignoreCheckChange.value = false // 清除标记，不影响后续正常触发
@@ -55,7 +57,7 @@ const checkChange = (data: any) => {
         updateVisitorConfigs()
     }
 }
-const updateVisitorConfigs = () => {
+const updateVisitorConfigs = debounce(() => {
     const result = Array.from(new Set(defaultCheckedKeys.value))
     updateVisitorConfig(
         result.map(item => {
@@ -68,7 +70,7 @@ const updateVisitorConfigs = () => {
             getVisitorConfigs()
         }
     })
-}
+}, 500)
 const getVisitorConfigs = () => {
     getVisitorConfig().then((res: any) => {
         if (res.code === 'A0000') {

src/views/govern/manage/basic/dictionary.vue

@@ -3,47 +3,22 @@
         <TableHeader>
             <template #select>
                 <el-form-item label="数据分类">
-                    <el-select
-                        v-model.trim="tableStore.table.params.dataType"
-                        multiple
-                        filterable
-                        collapse-tags
-                        clearable
-                        placeholder="请选择数据分类"
-                    >
-                        <el-option
-                            v-for="item in DataTypeSelect"
-                            :key="item.id"
-                            :label="item.name"
-                            :value="item.id"
-                        ></el-option>
+                    <el-select v-model.trim="tableStore.table.params.dataType" multiple filterable collapse-tags
+                        clearable placeholder="请选择数据分类">
+                        <el-option v-for="item in DataTypeSelect" :key="item.id" :label="item.name"
+                            :value="item.id"></el-option>
                     </el-select>
                 </el-form-item>
                 <el-form-item label="数据存储">
-                    <el-select
-                        v-model.trim="tableStore.table.params.classId"
-                        multiple
-                        filterable
-                        collapse-tags
-                        clearable
-                        placeholder="请选择数据存储"
-                    >
-                        <el-option
-                            v-for="item in DataSelect"
-                            :key="item.id"
-                            :label="item.name"
-                            :value="item.id"
-                        ></el-option>
+                    <el-select v-model.trim="tableStore.table.params.classId" multiple filterable collapse-tags
+                        clearable placeholder="请选择数据存储">
+                        <el-option v-for="item in DataSelect" :key="item.id" :label="item.name"
+                            :value="item.id"></el-option>
                     </el-select>
                 </el-form-item>
                 <el-form-item label="关键字筛选">
-                    <el-input
-                        maxlength="32"
-                        show-word-limit
-                        v-model.trim="tableStore.table.params.searchValue"
-                        placeholder="数据名称、别名、展示名称"
-                        clearable
-                    ></el-input>
+                    <el-input maxlength="32" show-word-limit v-model.trim="tableStore.table.params.searchValue"
+                        placeholder="数据名称、别名、展示名称" clearable></el-input>
                 </el-form-item>
             </template>
             <template #operation>
@@ -99,8 +74,9 @@ const tableStore = new TableStore({
                     ? row.cellValue == '/'
                         ? '/'
                         : row.cellValue == 'M'
-                        ? '无相别'
-                        : row.cellValue + '相'
+                            ? '/' : row.cellValue == 'T'
+                                ? '/'
+                                : row.cellValue + '相'
                     : '/'
             }
         },
@@ -114,7 +90,7 @@ const tableStore = new TableStore({
             title: '操作', fixed: 'right',
             align: 'center',
             width: '180',
-          
+
             render: 'buttons',
             buttons: [
                 {

src/views/govern/manage/basic/popupDictionary.vue

@@ -1,10 +1,10 @@
 <template>
-    <el-dialog class="cn-operate-dialog" draggable v-model.trim="dialogVisible" :title="title" @close="emit('close')">
+    <el-dialog class="cn-operate-dialog" draggable v-model.trim="dialogVisible" width="900px" :title="title" @close="emit('close')">
         <el-scrollbar>
             <div style="padding-left: 50px">
                 <el-divider content-position="center">基础数据</el-divider>
             </div>
-            <el-form :model="form" label-width="140px" ref="formRef" class="form-two" :rules="rules">
+            <el-form :model="form" label-width="130px" ref="formRef" class="form-two" :rules="rules">
                 <el-form-item label="数据分类:" prop="dataType">
                     <el-select v-model.trim="form.dataType" filterable clearable placeholder="请选择数据分类">
                         <el-option
@@ -71,7 +71,7 @@
                     ></el-input>
                 </el-form-item>
                 <el-form-item label="开始结束次数:">
-                    <el-slider v-model.trim="form.harm" range show-stops :max="50" style="width: 95%" />
+                    <el-slider v-model.trim="form.harm" range  :max="50" style="width: 90%" />
                 </el-form-item>
                 <el-form-item label="统计方法:">
                     <el-select
@@ -155,7 +155,7 @@
             <div style="padding-left: 50px">
                 <el-divider content-position="center">拓展数据</el-divider>
             </div>
-            <el-form class="form-two" :model="form" label-width="140px" ref="formRef2">
+            <el-form class="form-two" :model="form" label-width="130px" ref="formRef2">
                 <el-form-item label="告警码(缺省值):">
                     <el-input
                         maxlength="32"
@@ -282,7 +282,7 @@ const phaseSelect = [
         id: 'C'
     },
     {
-        name: 'T相',
+        name: '无相别',
         id: 'T'
     },
     {
@@ -297,10 +297,10 @@ const phaseSelect = [
         name: 'CA相',
         id: 'CA'
     },
-    {
-        name: '无相别',
-        id: 'M'
-    },
+    // {
+    //     name: '无相别',
+    //     id: 'M'
+    // },
 ]
 const StatMethodSelect = [
     {

src/views/govern/manage/basic/popupVersion.vue

@@ -1,24 +1,12 @@
 <template>
-    <el-dialog
-        class="cn-operate-dialog"
-        width="800px"
-        v-model.trim="dialogVisible"
-        :title="title"
-        @close="emit('closePopup')"
-    >
+    <el-dialog draggable class="cn-operate-dialog" width="800px" v-model.trim="dialogVisible" :title="title"
+        @close="emit('closePopup')">
         <el-form class="form-two" :model="form" label-width="100px" ref="formRef" :rules="rules">
             <el-form-item label="设备类型:" prop="type">
-                <!-- <el-select v-model.trim="form.type" filterable placeholder="请选择" @change="typeChange">
-                    <el-option v-for="item in TypeOptions" :key="item.id" :label="item.name"
-                        :value="item.id"></el-option>
-                </el-select> -->
+
                 <el-select v-model.trim="form.type" placeholder="请选择设备类型" @change="formDevTypeChange" clearable>
-                    <el-option
-                        v-for="item in devTypeOptions"
-                        :key="item.value"
-                        :label="item.label"
-                        :value="item.value"
-                    ></el-option>
+                    <el-option v-for="item in devTypeOptions" :key="item.value" :label="item.label"
+                        :value="item.value"></el-option>
                 </el-select>
             </el-form-item>
             <el-form-item label="设备型号:" prop="devType">
@@ -26,90 +14,42 @@
                     <el-option v-for="item in DevTypeOptions" :key="item.id" :label="item.name"
                         :value="item.id"></el-option>
                 </el-select> -->
-                <el-select
-                    v-model.trim="form.devType"
-                    filterable
-                    placeholder="请选择设备型号"
-                    clearable
-                    @change="devTypeChange"
-                >
-                    <el-option
-                        v-for="item in formDevModelOptionsFilter"
-                        :key="item.value"
-                        :label="item.label"
-                        :value="item.value"
-                    ></el-option>
+                <el-select v-model.trim="form.devType" filterable placeholder="请选择设备型号" clearable
+                    @change="devTypeChange">
+                    <el-option v-for="item in formDevModelOptionsFilter" :key="item.value" :label="item.label"
+                        :value="item.value"></el-option>
                 </el-select>
             </el-form-item>
             <el-form-item label="版本号:" prop="versionNo">
-                <el-input
-                    maxlength="32"
-                    show-word-limit
-                    v-model.trim="form.versionNo"
-                    autocomplete="off"
-                    placeholder="请输入版本号"
-                ></el-input>
+                <el-input maxlength="32" show-word-limit v-model.trim="form.versionNo" autocomplete="off"
+                    placeholder="请输入版本号"></el-input>
             </el-form-item>
             <el-form-item label="版本类型:" prop="versionType">
-                <el-input
-                    maxlength="32"
-                    show-word-limit
-                    v-model.trim="form.versionType"
-                    autocomplete="off"
-                    placeholder="填写特殊类型(不填默认通用类型)"
-                ></el-input>
+                <el-input maxlength="32" show-word-limit v-model.trim="form.versionType" autocomplete="off"
+                    placeholder="填写特殊类型(不填默认通用类型)"></el-input>
             </el-form-item>
             <el-form-item label="协议版本:" prop="versionAgreement">
-                <el-input
-                    maxlength="32"
-                    show-word-limit
-                    v-model.trim="form.versionAgreement"
-                    autocomplete="off"
-                    placeholder="请输入协议版本"
-                ></el-input>
+                <el-input maxlength="32" show-word-limit v-model.trim="form.versionAgreement" autocomplete="off"
+                    placeholder="请输入协议版本"></el-input>
             </el-form-item>
             <el-form-item label="版本日期:" prop="versionDate">
-                <el-date-picker
-                    v-model.trim="form.versionDate"
-                    type="date"
-                    value-format="YYYY-MM-DD"
-                    placeholder="选择日期时间"
-                    style="width: 100%"
-                ></el-date-picker>
+                <el-date-picker v-model.trim="form.versionDate" type="date" value-format="YYYY-MM-DD"
+                    placeholder="选择日期时间" style="width: 100%"></el-date-picker>
             </el-form-item>
 
-            <el-form-item label="CRC校验:" prop="crcInfo">
-                <el-input
-                    maxlength="32"
-                    show-word-limit
-                    v-model.trim="form.crcInfo"
-                    autocomplete="off"
-                    placeholder="请输入CRC校验"
-                ></el-input>
+            <el-form-item label="CRC校验:" prop="crc">
+                <el-input maxlength="32" show-word-limit v-model.trim="form.crc" autocomplete="off"
+                    placeholder="请输入CRC校验"></el-input>
             </el-form-item>
         </el-form>
         <el-form :model="form" label-width="100px" class="mt10 form-one">
             <el-form-item label="描述:" prop="description">
-                <el-input
-                    maxlength="300"
-                    :autosize="{ minRows: 2, maxRows: 4 }"
-                    type="textarea"
-                    show-word-limit
-                    v-model.trim="form.description"
-                    autocomplete="off"
-                    placeholder="请输入描述"
-                ></el-input>
+                <el-input maxlength="300" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" show-word-limit
+                    v-model.trim="form.description" autocomplete="off" placeholder="请输入描述"></el-input>
             </el-form-item>
             <el-form-item label="升级文件:" prop="file">
-                <el-upload
-                    :limit="1"
-                    accept=".bin"
-                    :auto-upload="false"
-                    :on-change="fileChange"
-                    :on-exceed="fileExceed"
-                    :on-remove="fileRemove"
-                    :file-list="fileList"
-                >
+                <el-upload :limit="1" accept=".bin" :auto-upload="false" :on-change="fileChange" :on-exceed="fileExceed"
+                    :on-remove="fileRemove" :file-list="fileList">
                     <el-button type="primary">点击上传</el-button>
                 </el-upload>
             </el-form-item>
@@ -146,7 +86,7 @@ const form = reactive<any>({
     versionAgreement: null,
     versionNo: null,
     versionType: null,
-    crcInfo: null,
+    crc: null,
     description: null,
     versionDate: null,
     type: null,
@@ -161,7 +101,7 @@ const rules = {
     versionAgreement: [{ required: true, message: '请输入协议版本', trigger: 'blur' }],
     versionDate: [{ required: true, message: '请输入版本日期', trigger: 'blur' }],
     description: [{ required: true, message: '请输入描述', trigger: 'blur' }],
-    crcInfo: [{ required: true, message: '请输入CRC校验', trigger: 'blur' }],
+    crc: [{ required: true, message: '请输入CRC校验', trigger: 'blur' }],
     file: [{ required: true, message: '请输入升级文件', trigger: 'blur' }]
 }
 const typeChange = () => {
@@ -176,7 +116,7 @@ const devTypeChange = (e: any) => {
     // console.log(e)
     form.devTypeName = formDevModelOptionsFilter.value.filter((item: any) => item.value == e)[0].label
 }
-queryByCode('Device_Type').then(res => {
+queryByCode('Device_Type').then(async res => {
     const id = res.data.id
     queryCsDictTree(id).then(res => {
         devTypeOptions.value = res.data.map((item: any) => {
@@ -203,6 +143,14 @@ queryByCode('Device_Type').then(res => {
     })
     // tableStore.index()
 })
+queryByCode('Direct_Connected_Device').then(res => {
+    queryCsDictTree(res.data.id).then(res => {
+        TypeOptions.value = res.data
+    })
+    queryByid(res.data.id).then(res => {
+        DevTypeAllOptions.value = res.data
+    })
+})
 const formDevModelOptionsFilter = computed(() => {
     return devModelOptions.value.filter((item: any) => {
         if (form.type) {
@@ -246,7 +194,7 @@ const formDevTypeChange = (e: any) => {
 }
 const dialogVisible = ref(false)
 const title = ref('新增版本')
-const open = (text: string, data?: anyObj) => {
+const open = async (text: string, data?: anyObj) => {
     title.value = text
     dialogVisible.value = true
     if (data) {
@@ -264,14 +212,7 @@ const open = (text: string, data?: anyObj) => {
             form[key] = null
         }
     }
-    queryByCode('Direct_Connected_Device').then(res => {
-        queryCsDictTree(res.data.id).then(res => {
-            TypeOptions.value = res.data
-        })
-        queryByid(res.data.id).then(res => {
-            DevTypeAllOptions.value = res.data
-        })
-    })
+
 }
 const submit = () => {
     // console.log(formRef)

src/views/govern/manage/basic/version.vue

@@ -3,18 +3,16 @@
         <TableHeader ref="tableHeaderRef" :showReset="false" showExport>
             <template #select>
                 <el-form-item label="设备型号:">
-                    <el-select v-model.trim="tableStore.table.params.devType" filterable placeholder="请选择设备型号" clearable>
-                        <el-option
-                            v-for="item in DevTypeOptions"
-                            :key="item.id"
-                            :label="item.name"
-                            :value="item.id"
-                        ></el-option>
+                    <el-select v-model.trim="tableStore.table.params.devType" filterable placeholder="请选择设备型号"
+                        clearable>
+                        <el-option v-for="item in DevTypeOptions" :key="item.id" :label="item.name"
+                            :value="item.id"></el-option>
                     </el-select>
                 </el-form-item>
             </template>
             <template #operation>
                 <el-button :icon="Plus" type="primary" @click="addMenu" class="ml10">新增版本</el-button>
+                <el-button :icon="Back" @click="go(-1)">返回</el-button>
             </template>
         </TableHeader>
         <Table ref="tableRef" />
@@ -27,13 +25,15 @@ import TableStore from '@/utils/tableStore'
 import Table from '@/components/table/index.vue'
 import TableHeader from '@/components/table/header/index.vue'
 import { delCsDictData } from '@/api/system-boot/csDictData'
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { queryByCode, queryByid } from '@/api/system-boot/dictTree'
 import { useDictData } from '@/stores/dictData'
 import PopupVersion from '@/views/govern/manage/basic/popupVersion.vue'
-import { Plus } from '@element-plus/icons-vue'
+import { Plus, Back } from '@element-plus/icons-vue'
 import { auditEdData } from '@/api/cs-device-boot/edData'
+import { activateUser, deluser, passwordConfirm } from '@/api/user-boot/user'
 import { getFileUrl, downLoadFile } from '@/api/cs-system-boot/manage'
+import { useRouter } from 'vue-router'
 defineOptions({
     name: 'govern/manage/basic/version'
 })
@@ -42,12 +42,12 @@ const dictData = useDictData()
 const showPopup = ref(false)
 const DevTypeOptions = ref()
 const tableHeaderRef = ref()
-
+const { push, go } = useRouter()
 const tableStore = new TableStore({
     url: '/cs-device-boot/edData/queryEdDataPage',
     method: 'POST',
     column: [
-         {
+        {
             field: 'index',
             title: '序号',
             width: '80',
@@ -55,28 +55,74 @@ const tableStore = new TableStore({
                 return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
             }
         },
-        { title: '设备型号', field: 'devTypeName' ,minWidth: '100'},
-        { title: '版本号', field: 'versionNo' ,minWidth: '100'},
-        { title: '协议版本', field: 'versionAgreement' ,minWidth: '100'},
-        { title: '版本日期', field: 'versionDate' ,minWidth: '100'},
-        { title: '归档日期', field: 'updateTime',minWidth: '150' },
-        { title: '描述', field: 'description',minWidth: '200' },
+        { title: '设备型号', field: 'devTypeName', minWidth: '100' },
+        { title: '版本号', field: 'versionNo', minWidth: '100' },
+        { title: '协议版本', field: 'versionAgreement', minWidth: '100' },
+        { title: '版本日期', field: 'versionDate', minWidth: '100' },
+        { title: '归档日期', field: 'updateTime', minWidth: '150' },
+        { title: '描述', field: 'description', minWidth: '200' },
+        // {
+        //     title: '状态',
+        //     field: 'status',
+        //     render: 'tag',
+        //     minWidth: '80',
+        //     custom: {
+        //         0: 'danger',
+        //         1: 'success'
+        //     },
+        //     replaceValue: {
+        //         0: '禁用',
+        //         1: '启用'
+        //     }
+        // },
         {
-            title: '状态',
+            title: '使用状态',
+            render: 'switch',
+            width: 100,
             field: 'status',
-            render: 'tag',
-            minWidth: '80',
-            custom: {
-                0: 'error',
-                1: 'success'
-            },
-            replaceValue: {
-                0: '禁用',
-                1: '启用'
+            activeText: '启用',
+            inactiveText: '禁用',
+            inactiveValue: '0',
+            activeValue: '1',
+            onChangeField: (row: any, value: any) => {
+                // console.log("🚀 ~ row:", row)
+                ElMessageBox.prompt('二次校验密码确认', '', {
+                    confirmButtonText: '确认',
+                    cancelButtonText: '取消',
+                    customClass: 'customInput',
+                    inputType: 'text',
+                    beforeClose: (action, instance, done) => {
+                        if (action === 'confirm') {
+                            if (instance.inputValue == null) {
+                                return ElMessage.warning('请输入密码')
+                            } else if (instance.inputValue?.length > 32) {
+                                return ElMessage.warning(
+                                    '密码长度不能超过32位,当前密码长度为' + instance.inputValue.length
+                                )
+                            } else {
+                                done()
+                            }
+                        } else {
+                            done()
+                        }
+                    }
+                }).then(({ value }) => {
+                    passwordConfirm(value).then(res => {
+                        auditEdData({
+                            id: row.id,
+                            status: row.status == 0 ? 1 : 0
+                        }).then((res: any) => {
+                            ElMessage.success(row.status == 0 ? '启用成功!' : '禁用成功!')
+                            tableStore.index()
+                        })
+
+                    })
+                })
             }
         },
         {
-            title: '操作', fixed: 'right',
+            title: '操作',
+            fixed: 'right',
             align: 'center',
             width: '180',
             render: 'buttons',
@@ -104,50 +150,7 @@ const tableStore = new TableStore({
                         }, 100)
                     }
                 },
-                {
-                    name: 'edit',
-                    title: '启用',
-                    type: 'primary',
-                    icon: 'el-icon-Open',
-                    render: 'basicButton',
-                    disabled: row => {
-                        return row.status == 1
-                    },
-                    click: row => {
-                        auditEdData({
-                            id: row.id,
-                            status: 1
-                        }).then((res: any) => {
-                            ElMessage.success('启用成功')
-                            tableStore.index()
-                        })
-                    }
-                },
-                {
-                    name: 'del',
-                    title: '禁用',
-                    type: 'danger',
-                    icon: 'el-icon-SwitchButton',
-                    render: 'confirmButton',
-                    popconfirm: {
-                        confirmButtonText: '确认',
-                        cancelButtonText: '取消',
-                        confirmButtonType: 'danger',
-                        title: '确定禁用吗？'
-                    },
-                    disabled: row => {
-                        return row.status == 0
-                    },
-                    click: row => {
-                        auditEdData({
-                            id: row.id,
-                            status: 0
-                        }).then((res: any) => {
-                            ElMessage.success('禁用成功')
-                            tableStore.index()
-                        })
-                    }
-                }
+
             ]
         }
     ],
@@ -177,7 +180,6 @@ queryByCode('Device_Type').then(res => {
 // 下载报告
 const downloadTheReport = (name: string) => {
     getFileUrl(name).then((res: any) => {
-  
         downLoadFile(res.data).then(res => {
             let blob = new Blob([res], {
                 type: 'application/octet-stream'
@@ -209,3 +211,10 @@ const closePopup = () => {
     showPopup.value = false
 }
 </script>
+<style lang="scss">
+.customInput {
+    .el-input__inner {
+        -webkit-text-security: disc !important;
+    }
+}
+</style>

src/views/govern/manage/factory.vue

@@ -10,13 +10,13 @@
                         placeholder="请输入设备名称/网络设备ID"
                     />
                 </el-form-item>
-                <el-form-item label="流程阶段">
+                <!-- <el-form-item label="流程阶段">
                     <el-select v-model.trim="tableStore.table.params.process" clearable placeholder="请选择状态">
                         <el-option label="功能调试" :value="2"></el-option>
                         <el-option label="出厂调试" :value="3"></el-option>
                         <el-option label="正式投运" :value="4"></el-option>
                     </el-select>
-                </el-form-item>
+                </el-form-item> -->
                 <el-form-item label="物联状态">
                     <el-select
                         v-model.trim="tableStore.table.params.connectStatus"
@@ -218,7 +218,9 @@ import {
     portableDeviceRegister,
     portableDeviceAccess,
     getExcelTemplate,
-    engineeringProject
+    engineeringProject,
+    onlineRegister,
+    resetFactory
 } from '@/api/cs-system-boot/device'
 import html2canvas from 'html2canvas'
 import { fullUrl } from '@/utils/common'
@@ -271,7 +273,7 @@ const queryTheDictionary = () => {
     queryByCode('DEV_CLD')
         .then(res => {
             devTypeOptions2.value = res.data
-            return queryCsDictTree(res.data.id).then(res => {
+            queryCsDictTree(res.data.id).then(res => {
                 devModelOptions2.value = res.data.map((item: any) => {
                     return {
                         value: item.id,
@@ -280,8 +282,6 @@ const queryTheDictionary = () => {
                     }
                 })
             })
-        })
-        .then(() => {
             queryByCode('Device_Type').then(async res => {
                 const id = res.data.id
                 await queryCsDictTree(id).then(res => {
@@ -315,6 +315,7 @@ const queryTheDictionary = () => {
                 await tableStore.index()
             })
         })
+
         .catch(error => {
             console.error('查询过程中出现错误:', error)
         })
@@ -611,12 +612,51 @@ const tableStore = new TableStore({
                 //             .catch(e => {})
                 //     }
                 // },
+                // 在线设备注册
+                {
+                    title: '接入',
+                    type: 'primary',
+                    icon: 'el-icon-Grid',
+                    render: 'basicButton',
+                    loading: 'loading1',
+                    disabled: row => {
+                        return !(
+                            row.devType == '123202e523be2b8defc8d0c2f118f232' &&
+                            row.associatedProject != null &&
+                            row.status != 3
+                        )
+                    },
+                    click: row => {
+                        // 便携式设备手动接入
+                        ElMessageBox.confirm('确定接入该设备吗?', '提示', {
+                            confirmButtonText: '确认',
+                            cancelButtonText: '取消',
+                            type: 'warning'
+                        }).then(() => {
+                            row.loading1 = true
+
+                            onlineRegister({
+                                projectId: row.associatedProject,
+                                nDid: row.ndid
+                            })
+                                .then(res => {
+                                    ElMessage.success(res.message)
+                                    row.loading1 = false
+                                    tableStore.index()
+                                })
+                                .catch(() => {
+                                    row.loading1 = false
+                                })
+                        })
+                    }
+                },
                 //便携式设备手动接入
                 {
                     title: '接入',
                     type: 'primary',
                     icon: 'el-icon-Grid',
                     render: 'basicButton',
+                    loading: 'loading1',
                     disabled: row => {
                         return (
                             (row.devType != '8b45cf6b7f5266e777d07c166ad5fa77' &&
@@ -632,14 +672,18 @@ const tableStore = new TableStore({
                             type: 'warning'
                         })
                             .then(() => {
+                                row.loading1 = true
                                 portableDeviceAccess({
                                     nDid: row.ndid
                                 }).then(res => {
                                     ElMessage.success(res.message)
+                                    row.loading1 = false
                                     tableStore.index()
                                 })
                             })
-                            .catch(e => {})
+                            .catch(e => {
+                                row.loading1 = false
+                            })
                     }
                 },
                 {
@@ -647,6 +691,7 @@ const tableStore = new TableStore({
                     type: 'primary',
                     icon: 'el-icon-Grid',
                     render: 'basicButton',
+                    loading: 'loading1',
                     disabled: row => {
                         return (
                             (row.devType != '8b45cf6b7f5266e777d07c166ad5fa77' &&
@@ -662,24 +707,20 @@ const tableStore = new TableStore({
                             confirmButtonText: '确认',
                             cancelButtonText: '取消',
                             type: 'warning'
-                        })
-                            .then(() => {
-                                loading.value = true
-                                portableDeviceRegister({
-                                    nDid: row.ndid
+                        }).then(() => {
+                            row.loading1 = true
+                            portableDeviceRegister({
+                                nDid: row.ndid
+                            })
+                                .then(res => {
+                                    row.loading1 = false
+                                    ElMessage.success(res.message)
+                                    tableStore.index()
                                 })
-                                    .then(res => {
-                                        loading.value = false
-                                        ElMessage.success(res.message)
-                                        tableStore.index()
-                                    })
-                                    .catch(e => {
-                                        loading.value = false
-                                    })
-                            })
-                            .catch(e => {
-                                loading.value = false
-                            })
+                                .catch(e => {
+                                    row.loading1 = false
+                                })
+                        })
                     }
                 },
                 {
@@ -729,6 +770,28 @@ const tableStore = new TableStore({
                         form.id = row.id
                     }
                 },
+                {
+                    name: 'edit',
+                    title: '重置',
+                    type: 'primary',
+                    icon: 'el-icon-EditPen',
+                    render: 'basicButton',
+
+                    click: async row => {
+                        ElMessageBox.confirm('确定重置该设备吗?', '提示', {
+                            confirmButtonText: '确认',
+                            cancelButtonText: '取消',
+                            type: 'warning'
+                        }).then(() => {
+                            resetFactory({
+                                nDid: row.ndid
+                            }).then(res => {
+                                ElMessage.success('重置成功!')
+                                tableStore.onTableAction('search', {})
+                            })
+                        })
+                    }
+                },
                 {
                     name: 'del',
                     title: '删除',
@@ -772,7 +835,7 @@ const tableStore = new TableStore({
 tableStore.table.params.orderBy = 'desc'
 tableStore.table.params.devType = ''
 tableStore.table.params.devModel = ''
-tableStore.table.params.process = 2
+// tableStore.table.params.process = 2
 tableStore.table.params.devAccessMethod = ''
 tableStore.table.params.status = ''
 tableStore.table.params.sortBy = ''

src/views/govern/manage/monthly.vue

@@ -9,13 +9,13 @@
                         clearable
                     ></el-input>
                 </el-form-item>
-                <el-form-item label="流程阶段">
+                <!-- <el-form-item label="流程阶段">
                     <el-select v-model.trim="tableStore.table.params.process" clearable placeholder="请选择">
                         <el-option label="功能调试" :value="2"></el-option>
                         <el-option label="出厂调试" :value="3"></el-option>
                         <el-option label="正式投运" :value="4"></el-option>
                     </el-select>
-                </el-form-item>
+                </el-form-item> -->
             </template>
             <template v-slot:operation>
                 <el-button type="primary" icon="el-icon-Download" @click="exportTab">导出</el-button>
@@ -147,7 +147,6 @@ const tableStore = new TableStore({
             item.process = item.process == 2 ? '功能调试' : item.process == 3 ? '出厂调试' : '正式投运'
             return item
         })
-        console.log('🚀 ~ tableStore.table.allData:', tableStore.table.allData)
     },
     loadCallback: () => {
         let name = tableStore.table.params.name
@@ -176,7 +175,7 @@ const tableStore = new TableStore({
 })
 
 provide('tableStore', tableStore)
-tableStore.table.params.process = 4
+// tableStore.table.params.process = 4
 tableStore.table.params.name = ''
 const tableRef = ref()
 const exportTab = () => {

src/views/govern/manage/process/index.vue

@@ -0,0 +1,569 @@
+<template>
+    <div class="default-main manage-process" :style="{ height: pageHeight.height }">
+        <DeviceTree @node-click="nodeClick" @init="nodeClick" @deviceTypeChange=""></DeviceTree>
+        <div class="manage-process-right">
+            <div class="process-flow-section">
+                <el-descriptions title="数据链路">
+                  
+                </el-descriptions>
+                <div class="process-flow-wrap">
+                    <div class="process-flow">
+                        <template v-for="(node, index) in flowNodes" :key="node.label">
+                            <div class="process-step">
+                                <div class="process-node" :class="`process-node--${getNodeState(index)}`">
+                                    <div class="process-node__icon" :style="{ color: getNodeColor(index) }">
+                                        <el-icon v-if="node.isEl"><component :is="node.icon" /></el-icon>
+                                        <component v-else :is="node.icon" :color="getNodeColor(index)" />
+                                    </div>
+                                    <div class="process-node__name">{{ node.label }}</div>
+                                </div>
+                            </div>
+                            <div
+                                v-if="index < flowNodes.length - 1"
+                                class="process-bridge"
+                                :class="`process-bridge--${getLineState(index)}`"
+                            >
+                                <svg class="process-bridge__svg" viewBox="0 0 120 16" preserveAspectRatio="none">
+                                    <line class="process-bridge__bg" x1="0" y1="8" x2="104" y2="8" />
+                                    <line class="process-bridge__active" x1="0" y1="8" x2="104" y2="8" />
+                                    <line
+                                        v-if="getLineState(index) === 'flowing'"
+                                        class="process-bridge__flow"
+                                        x1="0"
+                                        y1="8"
+                                        x2="104"
+                                        y2="8"
+                                    />
+                                    <polygon class="process-bridge__head" points="106,4 116,8 106,12" />
+                                </svg>
+                            </div>
+                        </template>
+                    </div>
+                </div>
+            </div>
+            <div class="process-list-section">
+                <el-descriptions title="数据列表" />
+                <div class="process-list-body">
+                    <el-table :data="processTableData" border stripe height="100%">
+                        <el-table-column type="index" label="序号" width="60" align="center" />
+                        <el-table-column prop="name" label="节点" min-width="100" align="center" />
+                        <el-table-column prop="link" label="上游链路" min-width="140" align="center" />
+                        <el-table-column prop="status" label="连接状态" min-width="100" align="center">
+                            <template #default="{ row }">
+                                <span :class="`process-table-status process-table-status--${row.state}`">
+                                    {{ row.status }}
+                                </span>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import { h, watch, onUnmounted, ref, computed, defineComponent } from 'vue'
+import { Monitor, Coin } from '@element-plus/icons-vue'
+import { mainHeight } from '@/utils/layout'
+import DeviceTree from '@/components/tree/govern/deviceTree.vue'
+
+defineOptions({
+    name: 'process'
+})
+
+const pageHeight = mainHeight(20)
+
+/** 连接状态：null-初始，0-终端绿/终端↔前置，1-前置绿/前置↔MQTT，2-MQTT绿/MQTT↔数据库，3-数据库绿/数据库↔Web，4-全部完成 */
+const linkStatus = ref<number | null>(2)
+
+const COLOR = {
+    pending: '#94a3b8',
+    success: '#009f05',
+    error: '#e05252'
+}
+
+const createProcessIcon = (render: (color: string) => ReturnType<typeof h>[]) =>
+    defineComponent({
+        props: {
+            color: { type: String, default: COLOR.pending }
+        },
+        setup(props) {
+            return () =>
+                h(
+                    'svg',
+                    {
+                        viewBox: '0 0 48 48',
+                        fill: 'none',
+                        xmlns: 'http://www.w3.org/2000/svg',
+                        class: 'process-node__svg'
+                    },
+                    render(props.color)
+                )
+        }
+    })
+
+/** 终端：采集设备 */
+const IconTerminal = createProcessIcon(c => [
+    h('rect', { x: 8, y: 10, width: 32, height: 22, rx: 3, stroke: c, 'stroke-width': 2.2 }),
+    h('rect', { x: 14, y: 15, width: 20, height: 12, rx: 1.5, stroke: c, 'stroke-width': 1.5, opacity: 0.45 }),
+    h('path', { d: 'M4 36h40', stroke: c, 'stroke-width': 2.2, 'stroke-linecap': 'round' }),
+    h('path', { d: 'M22 32v4', stroke: c, 'stroke-width': 2.2, 'stroke-linecap': 'round' }),
+    h('circle', { cx: 38, cy: 8, r: 3, fill: c, opacity: 0.85 })
+])
+
+/** 前置：双机服务器 */
+const IconFrontEnd = createProcessIcon(c => [
+    h('rect', { x: 10, y: 8, width: 28, height: 13, rx: 2.5, stroke: c, 'stroke-width': 2.2, fill: 'rgba(148,163,184,0.08)' }),
+    h('circle', { cx: 16, cy: 14.5, r: 2, fill: c }),
+    h('line', { x1: 22, y1: 14.5, x2: 34, y2: 14.5, stroke: c, 'stroke-width': 1.5, opacity: 0.5 }),
+    h('rect', { x: 10, y: 27, width: 28, height: 13, rx: 2.5, stroke: c, 'stroke-width': 2.2, fill: 'rgba(148,163,184,0.08)' }),
+    h('circle', { cx: 16, cy: 33.5, r: 2, fill: c }),
+    h('line', { x1: 22, y1: 33.5, x2: 34, y2: 33.5, stroke: c, 'stroke-width': 1.5, opacity: 0.5 })
+])
+
+/** MQTT：云 + 节点 */
+const IconMqtt = createProcessIcon(c => [
+    h('circle', { cx: 24, cy: 26, r: 2.5, fill: c }),
+    h('circle', { cx: 12, cy: 16, r: 2, fill: c, opacity: 0.75 }),
+    h('circle', { cx: 36, cy: 16, r: 2, fill: c, opacity: 0.75 }),
+    h('circle', { cx: 12, cy: 36, r: 2, fill: c, opacity: 0.75 }),
+    h('circle', { cx: 36, cy: 36, r: 2, fill: c, opacity: 0.75 }),
+    h('line', { x1: 24, y1: 26, x2: 12, y2: 16, stroke: c, 'stroke-width': 1.4, opacity: 0.55 }),
+    h('line', { x1: 24, y1: 26, x2: 36, y2: 16, stroke: c, 'stroke-width': 1.4, opacity: 0.55 }),
+    h('line', { x1: 24, y1: 26, x2: 12, y2: 36, stroke: c, 'stroke-width': 1.4, opacity: 0.55 }),
+    h('line', { x1: 24, y1: 26, x2: 36, y2: 36, stroke: c, 'stroke-width': 1.4, opacity: 0.55 }),
+    h('path', {
+        d: 'M15 24c0-4.5 3.5-7.5 9-7.5s9 3 9 7.5c3.5 0 6 2.5 6 6s-2.5 6-6 6H15c-3.5 0-6-2.5-6-6s2.5-6 6-6z',
+        stroke: c,
+        'stroke-width': 2,
+        fill: '#fff'
+    }),
+    h('text', { x: 24, y: 27.5, 'text-anchor': 'middle', fill: c, 'font-size': 7.5, 'font-weight': 'bold' }, 'MQTT')
+])
+
+const flowNodes = [
+    { label: '终端', icon: IconTerminal },
+    { label: '前置', icon: IconFrontEnd },
+    { label: 'MQTT', icon: IconMqtt },
+    { label: '数据库', icon: Coin, isEl: true },
+    { label: 'Web', icon: Monitor, isEl: true }
+]
+
+/** 全部完成状态值 */
+const COMPLETE_STATUS = 4
+/** 连线数量 */
+const LINE_COUNT = flowNodes.length - 1
+
+const createErrorArray = <T,>(length: number, value: T) => Array.from({ length }, () => value)
+
+type NodeState = 'pending' | 'success' | 'error'
+type LineState = 'idle' | 'flowing' | 'success' | 'error'
+
+const lineErrors = ref(createErrorArray(LINE_COUNT, false))
+const nodeErrors = ref(createErrorArray(flowNodes.length, false))
+let timeoutTimer: ReturnType<typeof setTimeout> | null = null
+
+const clearTimeoutTimer = () => {
+    if (timeoutTimer) {
+        clearTimeout(timeoutTimer)
+        timeoutTimer = null
+    }
+}
+
+const resetErrorsFrom = (fromIndex: number) => {
+    for (let i = fromIndex; i < lineErrors.value.length; i++) {
+        lineErrors.value[i] = false
+    }
+    for (let i = fromIndex + 1; i < nodeErrors.value.length; i++) {
+        nodeErrors.value[i] = false
+    }
+}
+
+const resetAllErrors = () => {
+    lineErrors.value = createErrorArray(LINE_COUNT, false)
+    nodeErrors.value = createErrorArray(flowNodes.length, false)
+}
+
+const startTimeout = (status: number | null) => {
+    clearTimeoutTimer()
+    if (status === null || status >= COMPLETE_STATUS) return
+
+    const capturedStatus = status
+    timeoutTimer = setTimeout(() => {
+        if (linkStatus.value !== capturedStatus) return
+        lineErrors.value[capturedStatus] = true
+        nodeErrors.value[capturedStatus + 1] = true
+    }, 5000)
+}
+
+watch(
+    linkStatus,
+    (val, oldVal) => {
+        const prev = oldVal ?? null
+        if (val !== null && (prev === null || val > prev)) {
+            resetErrorsFrom(val)
+        } else if (val !== null && prev !== null && val < prev) {
+            resetAllErrors()
+        } else if (val === null) {
+            resetAllErrors()
+        }
+        startTimeout(val)
+    },
+    { immediate: true }
+)
+
+onUnmounted(clearTimeoutTimer)
+
+const getNodeState = (index: number): NodeState => {
+    if (nodeErrors.value[index]) return 'error'
+    if (linkStatus.value === null) return 'pending'
+    if (linkStatus.value >= COMPLETE_STATUS) return 'success'
+    if (index <= linkStatus.value) return 'success'
+    return 'pending'
+}
+
+const getLineState = (index: number): LineState => {
+    if (lineErrors.value[index]) return 'error'
+    if (linkStatus.value === null) return 'idle'
+    if (linkStatus.value >= COMPLETE_STATUS) return 'success'
+    if (index < linkStatus.value) return 'success'
+    if (index === linkStatus.value) return 'flowing'
+    return 'idle'
+}
+
+const getNodeColor = (index: number) => COLOR[getNodeState(index)]
+
+const getNodeStatusText = (index: number) => {
+    const state = getNodeState(index)
+    if (state === 'error') return '连接失败'
+    if (state === 'success') return '连接成功'
+    if (linkStatus.value !== null && linkStatus.value < COMPLETE_STATUS && index === linkStatus.value + 1) {
+        return '连接中'
+    }
+    return '待连接'
+}
+
+
+
+
+
+
+
+const processTableData = computed(() =>
+    flowNodes.map((node, index) => ({
+        name: node.label,
+        link: index === 0 ? '-' : `${flowNodes[index - 1].label} → ${node.label}`,
+        status: getNodeStatusText(index),
+        state: getNodeState(index)
+    }))
+)
+
+const nodeClick = async (e: anyObj) => {
+    console.log('点击设备树节点')
+}
+</script>
+<style scoped lang="scss">
+$green: #009f05;
+$green-light: #e8f7e9;
+$red: #e05252;
+$red-light: #fdeeee;
+$gray: #cbd5e1;
+$gray-text: #94a3b8;
+$node-min: 110px;
+$node-max: 120px;
+$bridge-min: 60px;
+
+.manage-process {
+    display: flex;
+    height: 100%;
+
+    &-right {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        height: 100%;
+        min-height: 0;
+        overflow: hidden;
+        padding: 10px 10px 10px 0;
+
+        :deep(.el-descriptions__header) {
+            height: 36px;
+            margin-bottom: 7px;
+            display: flex;
+            align-items: center;
+            flex-shrink: 0;
+        }
+    }
+}
+
+.process-flow-section {
+    flex-shrink: 0;
+}
+
+.process-list-section {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    margin-top: 8px;
+}
+
+.process-list-body {
+    flex: 1;
+    min-height: 0;
+}
+
+.process-table-status {
+    &--success {
+        color: $green;
+    }
+
+    &--error {
+        color: $red;
+    }
+
+    &--pending {
+        color: $gray-text;
+    }
+}
+
+.process-flow-wrap {
+    width: 100%;
+    display: flex;
+    align-items: flex-start;
+    padding-bottom: 8px;
+    padding: 0 10%;
+    overflow-x: auto;
+}
+
+.process-flow {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    min-width: min(100%, calc(#{$node-min} * 5 + #{$bridge-min} * 4));
+    min-height: $node-min;
+   
+    box-sizing: border-box;
+}
+
+.process-step {
+    flex: 1 1 $node-min;
+    min-width: $node-min;
+    max-width: $node-max;
+    display: flex;
+    justify-content: center;
+}
+
+.process-node {
+    position: relative;
+    width: 100%;
+    min-width: $node-min;
+    min-height: $node-min;
+    max-width: $node-max;
+    aspect-ratio: 1;
+    height: auto;
+    padding: clamp(8px, 8%, 12px);
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    border-radius: 16px;
+    background: #f8fafc;
+    border: 1px solid #e2e8f0;
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+
+    &__index {
+        position: absolute;
+        top: 8px;
+        left: 10px;
+        font-size: 11px;
+        font-weight: 700;
+        color: #cbd5e1;
+        font-variant-numeric: tabular-nums;
+        transition: color 0.3s;
+    }
+
+    &__icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: clamp(52px, 48%, 60px);
+        height: clamp(52px, 48%, 60px);
+        border-radius: 12px;
+        background: #fff;
+        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
+        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+
+        .el-icon {
+            font-size: clamp(34px, 32%, 40px);
+        }
+
+        .process-node__svg {
+            width: clamp(34px, 32%, 40px);
+            height: clamp(34px, 32%, 40px);
+            display: block;
+        }
+    }
+
+    &__name {
+        margin-top: 8px;
+        font-size: clamp(13px, 12%, 15px);
+        font-weight: 600;
+        color: #334155;
+        letter-spacing: 1px;
+        line-height: 1.2;
+    }
+
+    &__status {
+        margin-top: 4px;
+        font-size: clamp(12px, 11%, 13px);
+        color: $gray-text;
+        transition: color 0.3s;
+        line-height: 1.2;
+    }
+
+    &--success {
+        background: linear-gradient(160deg, #fff 0%, $green-light 100%);
+        border-color: rgba(0, 159, 5, 0.25);
+        box-shadow: 0 4px 16px rgba(0, 159, 5, 0.1);
+
+        .process-node__index {
+            color: rgba(0, 159, 5, 0.45);
+        }
+
+        .process-node__icon {
+            background: #fff;
+            box-shadow: 0 0 0 2px rgba(0, 159, 5, 0.15);
+        }
+
+        .process-node__status {
+            color: $green;
+        }
+    }
+
+    &--error {
+        background: linear-gradient(160deg, #fff 0%, $red-light 100%);
+        border-color: rgba(224, 82, 82, 0.3);
+        box-shadow: 0 4px 16px rgba(224, 82, 82, 0.1);
+
+        .process-node__index {
+            color: rgba(224, 82, 82, 0.45);
+        }
+
+        .process-node__icon {
+            box-shadow: 0 0 0 2px rgba(224, 82, 82, 0.15);
+        }
+
+        .process-node__status {
+            color: $red;
+        }
+    }
+}
+
+.process-bridge {
+    flex: 1 1 0;
+    min-width: $bridge-min;
+    height: 25px;
+    padding: 0 2px;
+    align-self: center;
+
+    &__svg {
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+        display: block;
+    }
+
+    &__bg {
+        stroke: #e8edf3;
+        stroke-width: 5;
+        stroke-linecap: round;
+        transition: stroke 0.4s;
+    }
+
+    &__active {
+        stroke: transparent;
+        stroke-width: 3;
+        stroke-linecap: round;
+        transition: stroke 0.4s;
+    }
+
+    &__flow {
+        stroke: $green;
+        stroke-width: 3;
+        stroke-linecap: round;
+        stroke-dasharray: 5 9;
+        animation: bridge-dash 0.85s linear infinite;
+    }
+
+    &__head {
+        fill: #cbd5e1;
+        transition: fill 0.4s;
+    }
+
+    &--success {
+        .process-bridge__active {
+            stroke: $green;
+            filter: drop-shadow(0 0 3px rgba(0, 159, 5, 0.35));
+        }
+
+        .process-bridge__head {
+            fill: $green;
+        }
+    }
+
+    &--error {
+        .process-bridge__active {
+            stroke: $red;
+            filter: drop-shadow(0 0 3px rgba(224, 82, 82, 0.35));
+        }
+
+        .process-bridge__head {
+            fill: $red;
+        }
+    }
+
+    &--flowing {
+        .process-bridge__active {
+            stroke: #dce3ec;
+            stroke-width: 2;
+        }
+
+        .process-bridge__head {
+            fill: $green;
+            animation: head-pulse 1.2s ease-in-out infinite;
+        }
+    }
+
+    &--idle {
+        .process-bridge__active {
+            stroke: transparent;
+        }
+
+        .process-bridge__head {
+            fill: #cbd5e1;
+        }
+    }
+}
+
+@keyframes bridge-dash {
+    to {
+        stroke-dashoffset: -14;
+    }
+}
+
+@keyframes head-pulse {
+    0%,
+    100% {
+        opacity: 0.45;
+        transform: translateX(0);
+    }
+
+    50% {
+        opacity: 1;
+    }
+}
+</style>

src/views/govern/manage/programVersion/comp/deviceLog.vue

@@ -0,0 +1,94 @@
+<template>
+    <el-dialog v-model="dialogVisible" :title="title" width="800" :close-on-click-modal="false"
+        :before-close="handleClose">
+
+        <!-- 表格区域 -->
+        <div class="table-area" :style="layout1">
+            <vxe-table v-bind="defaultAttribute" :data="tableData" v-loading="loading" height="auto">
+                <vxe-column type="seq" title="序号" width="80" align="center" />
+                <vxe-column field="version" title="版本" min-width="120" align="center" />
+                <vxe-column field="result" title="升级结果" width="120" align="center">
+                    <template #default="{ row }">
+                        <el-tag :type="getResultTagType(row.result)" size="small">
+                            {{ getResultText(row.result) }}
+                        </el-tag>
+                    </template>
+                </vxe-column>
+                <vxe-column field="upgradeTime" title="升级时间" width="180" align="center" />
+                <vxe-column field="upgradeUser" title="升级人" width="120" align="center" />
+            </vxe-table>
+        </div>
+
+
+    </el-dialog>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+import { ElMessage } from 'element-plus'
+import { mainHeight } from '@/utils/layout'
+import { getByDevId } from '@/api/cs-device-boot/cloudDeviceEntry'
+const layout1 = mainHeight(100, 2)
+// 弹框显示控制
+const dialogVisible = ref(false)
+
+// 表格数据
+const tableData = ref([])
+
+// 加载状态
+const loading = ref(false)
+const title = ref('升级日志')
+// 升级结果标签类型映射
+const getResultTagType = (result) => {
+    const map = {
+        success: 'success',
+        fail: 'danger',
+        processing: 'warning'
+    }
+    return map[result] || 'info'
+}
+
+// 升级结果文本映射
+const getResultText = (result) => {
+    const map = {
+        success: '成功',
+        fail: '失败',
+        processing: '进行中'
+    }
+    return map[result] || result
+}
+
+// 打开弹框
+const open = (row) => {
+    title.value = `${row.name}_升级日志`
+    dialogVisible.value = true
+    getByDevId({
+        devId: row.id
+    }).then((res) => {
+        tableData = res.data
+    })
+
+}
+
+// 加载表格数据
+const loadTableData = async (deviceId) => {
+    loading.value = true
+
+}
+
+// 关闭弹框
+const handleClose = () => {
+    dialogVisible.value = false
+    // 重置数据
+    tableData.value = []
+}
+
+// 暴露方法给父组件
+defineExpose({
+    open
+})
+
+</script>
+
+<style scoped></style>

src/views/govern/manage/programVersion/comp/form.vue

@@ -1,157 +0,0 @@
-<template>
-    <el-dialog class="cn-operate-dialog" width="600px" v-model.trim="dialogVisible" :title="title">
-        <el-form :model="form" class="form-one" label-width="auto" ref="formRef" :rules="rules">
-            <el-form-item label="版本号" prop="substationName">
-                <el-input v-model.trim="form.substationName" placeholder="请输入版本号"></el-input>
-            </el-form-item>
-            <el-form-item label="协议版本" prop="name">
-                <el-input v-model.trim="form.name" placeholder="请输入协议版本"></el-input>
-            </el-form-item>
-            <el-form-item label="版本日期" prop="name">
-                <el-input v-model.trim="form.name" placeholder="请输入版本日期"></el-input>
-            </el-form-item>
-            <el-form-item label="设备系列" prop="loadType">
-                <el-select v-model.trim="form.loadType" filterable clearable placeholder="请选择设备系列">
-                    <el-option
-                        v-for="item in DataTypeSelect"
-                        :key="item.id"
-                        :label="item.name"
-                        :value="item.id"
-                    ></el-option>
-                </el-select>
-            </el-form-item>
-
-            <el-form-item label="版本类型" prop="name">
-                <el-input v-model.trim="form.name" placeholder="请输入版本类型"></el-input>
-            </el-form-item>
-            <el-form-item label="描述" prop="name">
-                <el-input
-                    maxlength="32"
-                    :autosize="{ minRows: 2, maxRows: 4 }"
-                    type="textarea"
-                    show-word-limit
-                    v-model.trim="form.remark"
-                    placeholder="请输入描述"
-                ></el-input>
-            </el-form-item>
-            <el-form-item label="上传升级文件" prop="name">
-                <el-upload
-                    :limit="1"
-                    accept=".bin"
-                    :auto-upload="false"
-                    :on-change="fileChange"
-                    :on-exceed="fileExceed"
-                    :on-remove="fileRemove"
-                    :file-list="fileList"
-                >
-                    <el-button type="primary">点击上传</el-button>
-                </el-upload>
-            </el-form-item>
-            <el-form-item label="CRC校验" prop="name">
-                <el-input v-model.trim="form.name" placeholder="请输入版本日期"></el-input>
-            </el-form-item>
-        </el-form>
-
-        <template #footer>
-            <span class="dialog-footer">
-                <el-button @click="dialogVisible = false">取消</el-button>
-                <el-button type="primary" @click="submit">确认</el-button>
-            </span>
-        </template>
-    </el-dialog>
-</template>
-<script lang="ts" setup>
-import { ref, inject } from 'vue'
-import { reactive } from 'vue'
-import { ElMessage } from 'element-plus'
-import TableStore from '@/utils/tableStore'
-import { queryByCode, queryCsDictTree } from '@/api/system-boot/dictTree'
-import { saveUser, updateUser } from '@/api/cs-device-boot/sensitiveLoadMange'
-import { useDictData } from '@/stores/dictData'
-
-const TypeOptions = ref()
-
-const dictData = useDictData()
-const DataTypeSelect = dictData.getBasicData('Interference_Source')
-
-const tableStore = inject('tableStore') as TableStore
-const fileList: any = ref([])
-const formRef = ref()
-const form = reactive<any>({
-    loadType: [],
-    substationName: null,
-    installedCapacity: null,
-    name: null,
-    userAgreementCapacity: null,
-    id: null,
-    sort: 100
-})
-const rules = {
-    substationName: [{ required: true, message: '请输入所属厂站名称', trigger: 'blur' }],
-    name: [{ required: true, message: '请输入敏感用户名称', trigger: 'blur' }],
-    loadType: [{ required: true, message: '请输入请选择敏感负荷类型', trigger: 'blur' }],
-    installedCapacity: [{ required: true, message: '请输入用户协议容量', trigger: 'blur' }],
-    userAgreementCapacity: [{ required: true, message: '请输入装机容量', trigger: 'blur' }],
-    sort: [{ required: true, message: '请输入排序', trigger: 'blur' }]
-}
-
-const dialogVisible = ref(false)
-const title = ref('新增')
-const open = (text: string, data?: anyObj) => {
-    formRef.value?.resetFields()
-    title.value = text
-    dialogVisible.value = true
-    if (data) {
-        for (let key in form) {
-            form[key] = data[key]
-        }
-    } else {
-        for (let key in form) {
-            form[key] = null
-            form.sort = 100
-        }
-    }
-}
-const fileRemove = (e: any) => {
-    form.file = null
-    fileList.value = []
-}
-const fileChange = (e: any) => {
-    if (!beforeUpload(e.raw)) return
-    form.file = e.raw
-    fileList.value = [e.raw]
-}
-const fileExceed = (e: any) => {
-    ElMessage.error('只能上传一个文件')
-}
-// 处理上传前检查
-const beforeUpload = (file: any) => {
-    const isWord = file.name.endsWith('.bin')
-
-    if (!isWord) {
-        ElMessage.error('请上传(.bin)格式文件!')
-        fileList.value = []
-        return false
-    }
-
-    // 校验通过后允许上传，交由 http-request 处理
-    return true
-}
-
-const submit = () => {
-    formRef.value.validate(async (valid: boolean) => {
-        if (valid) {
-            if (form.id) {
-                await updateUser(form)
-            } else {
-                await saveUser(form)
-            }
-            ElMessage.success('操作成功')
-            tableStore.index()
-            dialogVisible.value = false
-        }
-    })
-}
-
-defineExpose({ open })
-</script>

src/views/govern/manage/programVersion/comp/upgrade.vue

@@ -0,0 +1,114 @@
+<template>
+    <el-dialog draggable width="500px" v-model.trim="dialogVisible" :title="title">
+        <el-form :model="form" class="form-one" label-width="auto" ref="formRef" :rules="rules">
+            <el-form-item label="版本:" prop="edDataId">
+                <el-select v-model.trim="form.edDataId" placeholder="请选择版本" @change="selectChange">
+                    <el-option v-for="item in devList" :disabled="version == item.versionNo"
+                        :label="`${item.devTypeName}_${item.versionNo}_${item.versionAgreement}_${item.versionDate}`"
+                        :value="item.id"></el-option>
+                </el-select>
+            </el-form-item>
+
+            <el-form-item label="描述:">
+                <el-input v-model.trim="versionDesc" disabled type="textarea" :rows="3"></el-input>
+            </el-form-item>
+        </el-form>
+
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="dialogVisible = false">取消</el-button>
+                <el-button type="primary" @click="submit" :loading="loading">确认</el-button>
+            </span>
+        </template>
+    </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref, inject, reactive } from 'vue'
+import { ElMessage } from 'element-plus'
+import { findByDevTypeId, upgrade } from '@/api/system-boot/dictTree'
+const formRef = ref()
+const dialogVisible = ref(false)
+const title = ref('程序版本')
+const devList: any = ref([])
+const versionDesc = ref('')
+const version = ref('')
+// 表单数据（新增了版本类型、版本描述字段）
+const form = reactive<any>({
+    devId: [],
+    edDataId: '' // 新增：下拉选择版本
+})
+const loading = ref(false)
+// 校验规则（新增两个字段的必填校验）
+const rules = {
+    // 新增校验
+    edDataId: [{ required: true, message: '请选择版本', trigger: 'change' }]
+}
+
+// 打开弹窗
+const open = (data: any) => {
+
+    loading.value = false
+    version.value = data.version
+    form.devId = []
+    form.edDataId = ''
+    versionDesc.value = ''
+
+    getFindByDev(data.devModel)
+    formRef.value?.resetFields()
+    dialogVisible.value = true
+    form.devId = data.id
+}
+// 获取版本
+const getFindByDev = (devModel: string) => {
+    findByDevTypeId({
+        devType: devModel, //'45afe3ad9970785090cd7da27f489c37',
+        pageNum: 1,
+        pageSize: 10000
+    }).then((res: any) => {
+        devList.value = res.data.records
+        if (devList.value.length == 0) {
+            ElMessage.warning('该设备没有可升级的版本!')
+            return
+        } else if (devList.value.length == 1 && devList.value[0].versionNo == version.value) {
+            ElMessage.warning('该设备没有可升级的版本!')
+        }
+
+    })
+}
+// 提交
+const submit = () => {
+    formRef.value.validate(async (valid: boolean) => {
+        if (valid) {
+            try {
+                ElMessage.info('升级中，请稍等...')
+                loading.value = true
+                upgrade({
+                    devId: form.devId.join(),
+                    edDataId: form.edDataId
+                })
+                    .then(res => {
+                        ElMessage.success('升级成功')
+                        loading.value = false
+                        dialogVisible.value = false
+                    })
+                    .catch(error => {
+                        loading.value = false
+                    })
+            } catch (error) {
+                loading.value = false
+                ElMessage.error('升级失败')
+            }
+        }
+    })
+}
+const selectChange = e => {
+    devList.value.forEach(item => {
+        if (item.id === e) {
+            versionDesc.value = item.description
+        }
+    })
+}
+
+defineExpose({ open })
+</script>

src/views/govern/manage/programVersion/comp/versionMaintenance.vue

@@ -1,171 +0,0 @@
-<template>
-    <div class="default-main">
-        <TableHeader ref="tableHeaderRef" :showReset="false" showExport>
-            <template #select>
-                <el-form-item label="关键字筛选">
-                    <el-input v-model="tableStore.table.params.keywords" clearable placeholder="请输入关键字" />
-                </el-form-item>
-
-                <el-form-item label="设备系列">
-                    <el-select
-                        v-model.trim="tableStore.table.params.devType"
-                        filterable
-                        placeholder="请选择设备系列"
-                        clearable
-                    >
-                        <el-option
-                            v-for="item in DevTypeOptions"
-                            :key="item.id"
-                            :label="item.name"
-                            :value="item.id"
-                        ></el-option>
-                    </el-select>
-                </el-form-item>
-            </template>
-            <template #operation>
-                <el-button :icon="Plus" type="primary" @click="add">新增</el-button>
-                <el-button :icon="Back" @click="go(-1)">返回</el-button>
-            </template>
-        </TableHeader>
-        <Table ref="tableRef" />
-        <!-- 新增 -->
-        <Form ref="formRef" />
-    </div>
-</template>
-<script setup lang="ts">
-import { ref, onMounted, provide } from 'vue'
-import TableStore from '@/utils/tableStore'
-import Table from '@/components/table/index.vue'
-import TableHeader from '@/components/table/header/index.vue'
-import { ElMessage } from 'element-plus'
-import { queryByCode, queryByid } from '@/api/system-boot/dictTree'
-import { useDictData } from '@/stores/dictData'
-import { Plus, EditPen } from '@element-plus/icons-vue'
-import { useRouter } from 'vue-router'
-import { Back, Setting, Search } from '@element-plus/icons-vue'
-import Form from './form.vue'
-defineOptions({
-    name: 'govern/manage/programVersion'
-})
-const dictData = useDictData()
-const DevTypeOptions = ref()
-const tableHeaderRef = ref()
-const { push, go } = useRouter()
-const formRef = ref()
-const tableStore = new TableStore({
-    url: '/cs-device-boot/edData/queryEdDataPage',
-    method: 'POST',
-    column: [
-        {
-            field: 'index',
-            title: '序号',
-            width: '80',
-            formatter: (row: any) => {
-                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
-            }
-        },
-        { title: '设备系列', field: 'devTypeName', minWidth: '100' },
-        { title: '版本号', field: 'versionNo', minWidth: '100' },
-        { title: '协议版本', field: 'versionAgreement', minWidth: '100' },
-        { title: '版本日期', field: 'versionDate', minWidth: '100' },
-        { title: '修改人员', field: 'versionDate', minWidth: '100' },
-        { title: '修改日期', field: 'versionDate', minWidth: '100' },
-
-        { title: '描述', field: 'versionDate', minWidth: '100' },
-        { title: '版本类型', field: 'versionDate', minWidth: '100' },
-
-        {
-            title: '状态',
-            render: 'switch',
-            width: 100,
-            field: 'usageStatus',
-            activeText: '启用',
-            inactiveText: '停用',
-            inactiveValue: '0',
-            activeValue: '1',
-            onChangeField: (row: any, value: any) => {
-                // console.log("🚀 ~ row:", row)
-                // ElMessageBox.prompt('二次校验密码确认', '', {
-                //     confirmButtonText: '确认',
-                //     cancelButtonText: '取消',
-                //     customClass: 'customInput',
-                //     inputType: 'text',
-                //     beforeClose: (action, instance, done) => {
-                //         if (action === 'confirm') {
-                //             if (instance.inputValue == null) {
-                //                 return ElMessage.warning('请输入密码')
-                //             } else if (instance.inputValue?.length > 32) {
-                //                 return ElMessage.warning(
-                //                     '密码长度不能超过32位,当前密码长度为' + instance.inputValue.length
-                //                 )
-                //             } else {
-                //                 done()
-                //             }
-                //         } else {
-                //             done()
-                //         }
-                //     }
-                // }).then(({ value }) => {
-                //     passwordConfirm(value).then(res => {
-                //         editEquipmentDelivery({
-                //             ...row,
-                //             status: row.status == 5 ? 1 : row.status == 6 ? 2 : row.status,
-                //             usageStatus: row.usageStatus == 1 ? 0 : 1
-                //         }).then(res => {
-                //             ElMessage.success(row.usageStatus == 1 ? '设备停用成功！' : '设备启用成功！')
-                //             tableStore.index()
-                //         })
-                //     })
-                // })
-            }
-        },
-
-        {
-            title: '操作',
-            fixed: 'right',
-            align: 'center',
-            width: '120',
-            render: 'buttons',
-            buttons: [
-                {
-                    name: 'productSetting',
-                    title: '修改',
-                    type: 'primary',
-                    icon: 'el-icon-EditPen',
-                    render: 'basicButton'
-                },
-                {
-                    name: 'productSetting',
-                    title: '删除',
-                    type: 'primary',
-                    icon: 'el-icon-EditPen',
-                    render: 'basicButton'
-                }
-            ]
-        }
-    ],
-    loadCallback: () => {}
-})
-queryByCode('Device_Type').then(res => {
-    const id = res.data.id
-    queryByid(id).then(res1 => {
-        res1.data.map((item: any, index: any) => {
-            if (item.pid == id) {
-                res1.data.splice(index, 1)
-            }
-        })
-
-        DevTypeOptions.value = res1.data
-    })
-})
-
-tableStore.table.params.devType = ''
-provide('tableStore', tableStore)
-
-const add = () => {
-    formRef.value.open('新增版本')
-}
-onMounted(() => {
-    tableHeaderRef.value.onComSearch()
-})
-</script>

src/views/govern/manage/programVersion/index.vue

@@ -1,77 +1,47 @@
 <template>
     <div class="default-main">
-        <TableHeader ref="tableHeaderRef" :showReset="false" showExport>
+        <TableHeader ref="tableHeaderRef" showExport>
             <template #select>
                 <el-form-item label="关键字筛选">
-                    <el-input v-model="tableStore.table.params.keywords" clearable placeholder="请输入关键字" />
+                    <el-input v-model="tableStore.table.params.searchValue" clearable placeholder="请输入设备名称"
+                        style="width:200px" />
                 </el-form-item>
                 <el-form-item label="通讯状态">
-                    <el-select
-                        v-model.trim="tableStore.table.params.devType"
-                        filterable
-                        placeholder="请选择通讯状态"
-                        clearable
-                    >
-                        <el-option
-                            v-for="item in DevTypeOptions"
-                            :key="item.id"
-                            :label="item.name"
-                            :value="item.id"
-                        ></el-option>
+                    <el-select v-model.trim="tableStore.table.params.connectStatus" filterable placeholder="请选择通讯状态"
+                        clearable>
+                        <el-option label="中断" :value="0"></el-option>
+                        <el-option label="正常" :value="1"></el-option>
                     </el-select>
                 </el-form-item>
                 <el-form-item label="设备型号">
-                    <el-select
-                        v-model.trim="tableStore.table.params.devType"
-                        filterable
-                        placeholder="请选择设备型号"
-                        clearable
-                    >
-                        <el-option
-                            v-for="item in DevTypeOptions"
-                            :key="item.id"
-                            :label="item.name"
-                            :value="item.id"
-                        ></el-option>
+                    <el-select v-model.trim="tableStore.table.params.devModel" filterable placeholder="请选择设备型号"
+                        clearable>
+                        <el-option v-for="item in DevTypeOptions" :key="item.id" :label="item.name"
+                            :value="item.id"></el-option>
                     </el-select>
                 </el-form-item>
-                <el-form-item label="设备系列">
-                    <el-select
-                        v-model.trim="tableStore.table.params.devType"
-                        filterable
-                        placeholder="请选择设备系列"
-                        clearable
-                    >
-                        <el-option
-                            v-for="item in DevTypeOptions"
-                            :key="item.id"
-                            :label="item.name"
-                            :value="item.id"
-                        ></el-option>
+                <el-form-item label="icd模型">
+                    <el-select v-model.trim="tableStore.table.params.icd" filterable placeholder="请选择设备系列" clearable>
+                        <el-option v-for="item in icdList" :key="item.id" :label="item.name"
+                            :value="item.id"></el-option>
                     </el-select>
                 </el-form-item>
                 <el-form-item label="升级设备筛选">
-                    <el-select
-                        v-model.trim="tableStore.table.params.devType"
-                        filterable
-                        placeholder="请选择升级设备筛选"
-                        clearable
-                    >
-                        <el-option
-                            v-for="item in DevTypeOptions"
-                            :key="item.id"
-                            :label="item.name"
-                            :value="item.id"
-                        ></el-option>
+                    <el-select v-model.trim="tableStore.table.params.upgrade" filterable placeholder="请选择升级设备筛选"
+                        clearable>
+                        <el-option label="可升级" :value="1"></el-option>
+                        <el-option label="不可升级" :value="0"></el-option>
                     </el-select>
                 </el-form-item>
             </template>
             <template #operation>
-                <el-button :icon="EditPen" type="primary" class="ml10" @click="maintenance">终端版本维护</el-button>
-                <el-button :icon="Share" type="primary" class="ml10">批量升级</el-button>
+                <el-button :icon="Document" type="primary" class="ml10" @click="maintenance">版本维护</el-button>
+                <!-- <el-button :icon="Share" type="primary" class="ml10" @click="upgradeVersion">批量升级</el-button> -->
             </template>
         </TableHeader>
-        <Table ref="tableRef" />
+        <Table :checkbox-config="checkboxConfig" ref="tableRef" />
+        <upgrade ref="upgradeRef" />
+        <deviceLog ref="deviceLogRef" />
     </div>
 </template>
 <script setup lang="ts">
@@ -82,20 +52,25 @@ import TableHeader from '@/components/table/header/index.vue'
 import { ElMessage } from 'element-plus'
 import { queryByCode, queryByid } from '@/api/system-boot/dictTree'
 import { useDictData } from '@/stores/dictData'
-import { Share, EditPen } from '@element-plus/icons-vue'
+import { Share, Document } from '@element-plus/icons-vue'
 import { useRouter } from 'vue-router'
+import upgrade from './comp/upgrade.vue'
+import deviceLog from './comp/deviceLog.vue'
 defineOptions({
     name: 'govern/manage/programVersion'
 })
+const upgradeRef = ref()
+const deviceLogRef = ref()
 const dictData = useDictData()
 const DevTypeOptions = ref()
+const icdList = ref()
 const tableHeaderRef = ref()
 const { push, options, currentRoute } = useRouter()
-const tableStore = new TableStore({
-    url: '/cs-device-boot/edData/queryEdDataPage',
+const tableStore: any = new TableStore({
+    url: '/cs-device-boot/EquipmentDelivery/version/page',
     method: 'POST',
     column: [
-        { type: 'checkbox', width: '60' },
+        // { type: 'checkbox', width: '60', },
         {
             field: 'index',
             title: '序号',
@@ -104,36 +79,35 @@ const tableStore = new TableStore({
                 return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
             }
         },
-        { title: '设备名称', field: 'devTypeName', minWidth: '100' },
-        { title: '版本号', field: 'versionNo', minWidth: '100' },
-        { title: '协议版本', field: 'versionAgreement', minWidth: '100' },
-        { title: '版本日期', field: 'versionDate', minWidth: '100' },
-        { title: '设备系列', field: 'versionDate', minWidth: '100' },
-        { title: '设备型号', field: 'versionDate', minWidth: '100' },
-        { title: '供电公司', field: 'versionDate', minWidth: '100' },
-        { title: '变电站', field: 'versionDate', minWidth: '100' },
+        { title: '设备名称', field: 'name', minWidth: '150' },
+        { title: '版本号', field: 'version', minWidth: '100', formatter: (row: any) => { return row.cellValue || '/' } },
+        { title: '协议版本', field: 'protocolVersion', minWidth: '100', formatter: (row: any) => { return row.cellValue || '/' } },
+        { title: '版本日期', field: 'versionDate', minWidth: '150', formatter: (row: any) => { return row.cellValue || '/' } },
+        { title: '设备型号', field: 'devModelName', minWidth: '120', formatter: (row: any) => { return row.cellValue || '/' } },
+        { title: 'icd模型', field: 'icd', minWidth: '120', formatter: (row: any) => { return icdList.value.filter(item => item.id == row.cellValue)[0]?.name || '/' } },
+        { title: '所属工程', field: 'associatedEngineering', minWidth: '120', formatter: (row: any) => { return row.cellValue || '/' } },
+        { title: '所属项目', field: 'associatedProject', minWidth: '120', formatter: (row: any) => { return row.cellValue || '/' } },
         {
             title: '状态',
-            field: 'status',
+            field: 'runStatus',
             render: 'tag',
             minWidth: '80',
             custom: {
-                0: 'error',
-                1: 'success'
+                1: 'danger',
+                2: 'success'
             },
             replaceValue: {
-                0: '禁用',
-                1: '启用'
+                1: '离线',
+                2: '在线'
             }
         },
-        { title: '更新时间', field: 'versionDate', minWidth: '100' },
-        { title: '修改人员', field: 'versionDate', minWidth: '100' },
-
+        { title: '更新时间', field: 'updateTime', minWidth: '150', formatter: (row: any) => { return row.cellValue || '/' }, sortable: true },
+        { title: '修改人员', field: 'updateByName', minWidth: '100', formatter: (row: any) => { return row.cellValue || '/' } },
         {
             title: '操作',
             fixed: 'right',
             align: 'center',
-            width: '120',
+            width: '130',
             render: 'buttons',
             buttons: [
                 {
@@ -141,43 +115,103 @@ const tableStore = new TableStore({
                     title: '升级',
                     type: 'primary',
                     icon: 'el-icon-EditPen',
-                    render: 'basicButton'
+                    disabled: (row: any) => {
+                        return row.upgrade == 0
+                    },
+                    render: 'basicButton',
+                    click: (row: any) => {
+                        upgradeRef.value.open({
+                            id: [row.id],
+                            devModel: row.devModel,
+                            version: row.version
+
+                        })
+                    }
                 },
                 {
                     name: 'productSetting',
-                    title: '升级日志',
+                    title: '日志',
                     type: 'primary',
                     icon: 'el-icon-EditPen',
-                    render: 'basicButton'
+                    render: 'basicButton',
+                    click: (row: any) => {
+                        deviceLogRef.value.open(row)
+                    }
                 }
             ]
         }
     ],
-    loadCallback: () => {}
+    loadCallback: () => { }
 })
-queryByCode('Device_Type').then(res => {
-    const id = res.data.id
-    queryByid(id).then(res1 => {
-        res1.data.map((item: any, index: any) => {
-            if (item.pid == id) {
-                res1.data.splice(index, 1)
-            }
-        })
+const checkboxConfig = reactive({
+    checkMethod: ({ row }) => {
+        return row.upgrade == 1
+    }
+})
+const getQuery = async () => {
+    queryByCode('Device_Type').then(res => {
+        const id = res.data.id
+        queryByid(id).then(res => {
+            res.data.map((item: any, index: any) => {
+                if (item.pid == id) {
+                    res.data.splice(index, 1)
+                }
+            })
 
-        DevTypeOptions.value = res1.data
+            DevTypeOptions.value = res.data
+        })
     })
-})
+    queryByCode('Icd_Model').then(res => {
+        const id = res.data.id
+        queryByid(id).then(res => {
+            icdList.value = res.data
+        })
+    })
+
+}
+
+// 禁止点击
+
+// 升级版本
+const upgradeVersion = () => {
+    if (!tableStore.table.selection.length) {
+        ElMessage.warning('请选择需要升级的设备!')
+        return
+    }
+    // 获取第一个设备的 devModel
+    const firstDevModel = tableStore.table.selection[0].devModel
+
+    // 检查是否所有设备的 devModel 都相同
+    const allSame = tableStore.table.selection.every(device => device.devModel === firstDevModel)
+
+    if (!allSame) {
+        return ElMessage.warning('请选择相同设备型号的设备进行批量升级!')
+    }
+
+    upgradeRef.value.open(
+        {
+            id: tableStore.table.selection.map(item => item.id),
+            devModel: firstDevModel
+
+        }
+    )
+}
 // 版本维护
 const maintenance = () => {
     push({
         // path: '/versionMaintenance'
-        path: '/govern/manage/basic/version'
+        path: '/version'
     })
 }
 
-tableStore.table.params.devType = ''
+tableStore.table.params.searchValue = ''
+tableStore.table.params.connectStatus = ''
+tableStore.table.params.devModel = ''
+tableStore.table.params.icd = ''
+tableStore.table.params.upgrade = ''
 provide('tableStore', tableStore)
 onMounted(() => {
-    tableHeaderRef.value.onComSearch()
+    getQuery()
+    tableStore.index()
 })
 </script>

src/views/govern/manage/realTime/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="default-main manage-realTime" :style="{ height: pageHeight.height }">
-        <DeviceTree @node-click="nodeClick" @init="" @deviceTypeChange=""></DeviceTree>
+        <DeviceTree @node-click="nodeClick" @init="nodeClick" @deviceTypeChange=""></DeviceTree>
         <div class="manage-realTime-right">
             <div class="time-container">
                 <div>
@@ -33,7 +33,7 @@ import DeviceTree from '@/components/tree/govern/deviceTree.vue'
 import MyEchart from '@/components/echarts/MyEchart.vue'
 import { formatToDateTime } from '@/utils/dateUtil'
 defineOptions({
-    name: 'govern/manage/realTime'
+    name: 'manage/realTime'
 })
 
 //页面属性

src/views/govern/monitorRecall/eventRecall.vue

@@ -16,9 +16,8 @@ import TableStore from '@/utils/tableStore'
 import Table from '@/components/table/index.vue'
 import TableHeader from '@/components/table/header/index.vue'
 import { Setting } from '@element-plus/icons-vue'
-import { eventRecall, fileRecall, logRecall } from '@/api/cs-device-boot/recall'
+import { eventRecall, fileRecall,  } from '@/api/cs-device-boot/recall'
 import { ElMessage } from 'element-plus'
-import { el } from 'element-plus/es/locale'
 
 const props = defineProps({
     checkedNodes: {
@@ -147,9 +146,11 @@ const recall1 = async () => {
     await eventRecall({
         startTime: tableStore.table.params.startTime,
         endTime: tableStore.table.params.endTime,
-        lineList: props.checkedNodes.map((node: any) => node.id)
+        lineList: props.checkedNodes.map((node: any) => node.id),
+      
     }).then((res: any) => {
         ElMessage.success('补召事件成功')
+           tableStore.index()
     })
 }
 

src/views/govern/monitorRecall/steadyRecall.vue

@@ -16,7 +16,7 @@ import Table from '@/components/table/index.vue'
 import { ElMessage, ElTree } from 'element-plus'
 import TableHeader from '@/components/table/header/index.vue'
 import { Setting } from '@element-plus/icons-vue'
-
+import { eventRecall, fileRecall } from '@/api/cs-device-boot/recall'
 const props = defineProps({
     checkedNodes: {
         type: Array,
@@ -68,23 +68,23 @@ const tableStore: any = new TableStore({
                 2: '解析失败',
                 3: '文件不存在'
             }
-        },
-        {
-            title: '操作',
-            fixed: 'right',
-            width: '100',
-            render: 'buttons',
-            buttons: [
-                {
-                    name: 'edit',
-                    title: '详情',
-                    type: 'primary',
-                    icon: 'el-icon-EditPen',
-                    render: 'basicButton',
-                    click: row => {}
-                }
-            ]
         }
+        // {
+        //     title: '操作',
+        //     fixed: 'right',
+        //     width: '100',
+        //     render: 'buttons',
+        //     buttons: [
+        //         {
+        //             name: 'edit',
+        //             title: '详情',
+        //             type: 'primary',
+        //             icon: 'el-icon-EditPen',
+        //             render: 'basicButton',
+        //             click: row => {}
+        //         }
+        //     ]
+        // }
     ],
     beforeSearchFun: () => {},
     loadCallback: () => {}
@@ -92,8 +92,22 @@ const tableStore: any = new TableStore({
 
 provide('tableStore', tableStore)
 
-const exportTab = () => {
-    ElMessage.info('稳态补召功能暂未开发！')
+const exportTab = async () => {
+    // ElMessage.info('稳态补召功能暂未开发！')
+    if (!props.checkedNodes || props.checkedNodes.length === 0) {
+        ElMessage.warning('请先勾选监测点')
+        return
+    }
+
+    await eventRecall({
+        startTime: tableStore.table.params.startTime,
+        endTime: tableStore.table.params.endTime,
+        lineList: props.checkedNodes.map((node: any) => node.id),
+        bzType: 0
+    }).then((res: any) => {
+        ElMessage.success('补召成功')
+        tableStore.index()
+    })
 }
 //获取请求参数
 const getTableParams = (val: any) => {

src/views/govern/reportCore/report/index.vue

@@ -1,15 +1,14 @@
 <template>
-    <div class="default-main" :style="height">
-        <splitpanes style="height: 100%" id="navigation-splitpanes">
-            <pane :size="size">
+    <div class="default-main" :style="height" style="display: flex; height: 100%; overflow: hidden">
+        <div style="width: 280px; flex-shrink: 0; height: 100%; overflow: hidden">
                 <pointTree
                     ref="TerminalRef"
                     @node-click="handleNodeClick"
                     @init="handleNodeClick"
                     @pointTypeChange="pointTypeChange"
                 ></pointTree>
-            </pane>
-            <pane style="background: #fff" :style="height">
+        </div>
+        <div style="flex: 1; min-width: 0; background: #fff" :style="height">
                 <TableHeader ref="TableHeaderRef" datePicker :show-search="false">
                     <template v-slot:select>
                         <el-form-item label="客户名称">
@@ -58,15 +57,12 @@
                         />
                     </div>
                 </div>
-            </pane>
-        </splitpanes>
+        </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, provide } from 'vue'
-import 'splitpanes/dist/splitpanes.css'
-import { Splitpanes, Pane } from 'splitpanes'
+import { ref, provide } from 'vue'
 import TableStore from '@/utils/tableStore'
 
 import TableHeader from '@/components/table/header/index.vue'
@@ -82,7 +78,6 @@ defineOptions({
 })
 
 const height = mainHeight(20)
-const size = ref(0)
 const dictData = useDictData()
 const TableHeaderRef = ref()
 const dotList: any = ref({})
@@ -98,13 +93,6 @@ const tableStore = new TableStore({
 })
 provide('tableStore', tableStore)
 
-onMounted(() => {
-    const dom = document.getElementById('navigation-splitpanes')
-
-    if (dom) {
-        size.value = Math.round((180 / dom.offsetHeight) * 100)
-    }
-})
 const pointTypeChange = (val: any, obj: any) => {
     handleNodeClick(obj)
 }
@@ -187,10 +175,6 @@ const exportEvent = () => {
 }
 </script>
 <style lang="scss">
-.splitpanes.default-theme .splitpanes__pane {
-    background: #eaeef1;
-}
-
 .box {
     padding: 10px;
 }

src/views/govern/reportCore/statisticsWx/index.vue

@@ -1,12 +1,11 @@
 <template>
-    <div class="default-main" :style="height">
-        <splitpanes style="height: 100%" class="default-theme" id="navigation-splitpanes">
-            <pane :size="size">
+    <div class="default-main report-zl-page" :style="height">
+        <div class="report-zl-sidebar">
                 <pointTreeWx :default-expand-all="false" template @node-click="handleNodeClick" @init="handleNodeClick"
                     @Policy="stencil">
                 </pointTreeWx>
-            </pane>
-            <pane :size="(100 - size)" style="background: #fff" :style="height">
+        </div>
+        <div class="report-zl-main">
                 <TableHeader ref="TableHeaderRef" :showReset="false">
                     <template v-slot:select>
                          <el-form-item label="时间:">
@@ -24,33 +23,28 @@
                     </template>
                 </TableHeader>
                 <div class="box" v-loading="tableStore.table.loading">
-                    <div id="luckysheet" 
-                        :style="`height: calc(${tableStore.table.height} + 45px)`"
+                    <div id="luckysheet" class="report-zl-sheet"
                         v-if="tableStore.table.data.length > 0"></div>
-                    <el-empty :style="`height: calc(${tableStore.table.height} + 45px)`"  v-else description="暂无数据" />
+                    <el-empty class="report-zl-sheet" v-else description="暂无数据" />
                 </div>
-            </pane>
-        </splitpanes>
+        </div>
     </div>
 </template>
 <script setup lang="ts">
-import { onMounted, ref, provide } from 'vue'
+import { ref, provide } from 'vue'
 import TableStore from '@/utils/tableStore'
 import pointTreeWx from '@/components/tree/govern/pointTreeWx.vue'
 import TableHeader from '@/components/table/header/index.vue'
 import { useDictData } from '@/stores/dictData'
 import { mainHeight } from '@/utils/layout'
 import { exportExcel } from '@/views/system/reportForms/export.js'
-import 'splitpanes/dist/splitpanes.css'
 import DatePicker from '@/components/form/datePicker/time.vue'
-import { Splitpanes, Pane } from 'splitpanes'
 const name = ref('')
 // import data from './123.json'
 defineOptions({
     name: 'govern/reportCore/statisticsWx/index'
 })
 const height = mainHeight(20)
-const size = ref(0)
 const dictData = useDictData()
 const TableHeaderRef = ref()
 const dotList: any = ref({})
@@ -63,6 +57,7 @@ const tableStore = new TableStore({
     url: '/harmonic-boot/customReport/getCustomReport',
     method: 'POST',
     column: [],
+    showPage: false,
     beforeSearchFun: () => {
         tableStore.table.params.tempId = Template.value.id
         tableStore.table.params.lineId = dotList.value.id
@@ -99,17 +94,6 @@ provide('tableStore', tableStore)
 tableStore.table.params.resourceType = 1
 tableStore.table.params.customType = 1
 const flag = ref(true)
-onMounted(() => {
-    nextTick(() => {
-        const dom = document.getElementById('navigation-splitpanes')
-        if (dom && dom.offsetHeight > 0) {
-            size.value = ((280 / (dom.offsetWidth - 7)) * 100)
-        } else {
-            // 设置默认值
-            size.value = 20
-        }
-    })
-})
 
 
 const stencil = (val: any) => {
@@ -147,11 +131,36 @@ const exportEvent = () => {
 }
 </script>
 <style lang="scss">
-.splitpanes.default-theme .splitpanes__pane {
+.report-zl-page {
+    display: flex;
+    overflow: hidden;
+}
+
+.report-zl-sidebar {
+    width: 280px;
+    flex-shrink: 0;
+    min-height: 0;
+    overflow: hidden;
+}
+
+.report-zl-main {
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
     background: #fff;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
 }
 
 .box {
+    flex: 1;
+    min-height: 0;
     padding: 10px;
+    overflow: hidden;
+}
+
+.report-zl-sheet {
+    height: 100%;
 }
 </style>

src/views/govern/reportCore/statisticsWx/index_ypt.vue

@@ -1,7 +1,6 @@
 <template>
-    <div class="default-main" :style="height">
-        <splitpanes style="height: 100%" class="default-theme" id="navigation-splitpanes">
-            <pane :size="size">
+    <div class="default-main report-zl-page" :style="height">
+        <div class="report-zl-sidebar">
                 <!-- <pointTreeWx :default-expand-all="false" template @node-click="handleNodeClick" @init="handleNodeClick"
                     @Policy="stencil">
                 </pointTreeWx> -->
@@ -13,8 +12,8 @@
                     @init="handleNodeClick"
                     @pointTypeChange="pointTypeChange"
                 ></pointTree>
-            </pane>
-            <pane :size="100 - size" style="background: #fff" :style="height">
+        </div>
+        <div class="report-zl-main">
                 <TableHeader datePicker ref="TableHeaderRef" :showReset="false">
                     <template v-slot:select>
                         <!-- <el-form-item label="时间:">
@@ -43,37 +42,33 @@
                 <div class="box" v-loading="tableStore.table.loading">
                     <div
                         id="luckysheet"
-                        :style="`height: calc(${tableStore.table.height} + 45px)`"
+                        class="report-zl-sheet"
                         v-if="tableStore.table.data.length > 0"
                     ></div>
                     <el-empty
-                        :style="`height: calc(${tableStore.table.height} + 45px)`"
+                        class="report-zl-sheet"
                         v-else
                         description="暂无数据"
                     />
                 </div>
-            </pane>
-        </splitpanes>
+        </div>
     </div>
 </template>
 <script setup lang="ts">
-import { onMounted, ref, provide } from 'vue'
+import { ref, provide } from 'vue'
 import TableStore from '@/utils/tableStore'
 import pointTreeWx from '@/components/tree/govern/pointTreeWx.vue'
 import TableHeader from '@/components/table/header/index.vue'
 import { useDictData } from '@/stores/dictData'
 import { mainHeight } from '@/utils/layout'
 import { exportExcel } from '@/views/system/reportForms/export.js'
-import 'splitpanes/dist/splitpanes.css'
 import DatePicker from '@/components/form/datePicker/time.vue'
-import { Splitpanes, Pane } from 'splitpanes'
 import pointTree from '@/components/tree/govern/pointTree.vue'
 // import data from './123.json'
 defineOptions({
     name: 'govern/reportCore/statisticsWx/index'
 })
 const height = mainHeight(20)
-const size = ref(0)
 const dictData = useDictData()
 const TableHeaderRef = ref()
 const dotList: any = ref({})
@@ -86,6 +81,7 @@ const tableStore = new TableStore({
     url: '/cs-harmonic-boot/customReport/getCustomReport',
     method: 'POST',
     column: [],
+    showPage: false,
     beforeSearchFun: () => {
         tableStore.table.params.tempId = Template.value.id
         tableStore.table.params.lineId = dotList.value.id
@@ -132,17 +128,6 @@ provide('tableStore', tableStore)
 tableStore.table.params.resourceType = 1
 tableStore.table.params.customType = null
 const flag = ref(true)
-onMounted(() => {
-    nextTick(() => {
-        const dom = document.getElementById('navigation-splitpanes')
-        if (dom && dom.offsetHeight > 0) {
-            size.value = (280 / (dom.offsetWidth - 7)) * 100
-        } else {
-            // 设置默认值
-            size.value = 20
-        }
-    })
-})
 
 const stencil = (val: any) => {
     templatePolicy.value = val.filter((item: any) => item.excelType != '4')
@@ -180,11 +165,36 @@ const exportEvent = () => {
 }
 </script>
 <style lang="scss">
-.splitpanes.default-theme .splitpanes__pane {
+.report-zl-page {
+    display: flex;
+    overflow: hidden;
+}
+
+.report-zl-sidebar {
+    width: 280px;
+    flex-shrink: 0;
+    min-height: 0;
+    overflow: hidden;
+}
+
+.report-zl-main {
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
     background: #fff;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
 }
 
 .box {
+    flex: 1;
+    min-height: 0;
     padding: 10px;
+    overflow: hidden;
+}
+
+.report-zl-sheet {
+    height: 100%;
 }
 </style>

src/views/govern/reportCore/statisticsWx/index_zl.vue

@@ -1,37 +1,22 @@
 <template>
-    <div class="default-main" :style="height">
-        <splitpanes style="height: 100%" class="default-theme" id="navigation-splitpanes">
-            <pane :size="size">
+    <div class="default-main report-zl-page" :style="height">
+        <div class="report-zl-sidebar">
                 <!-- <pointTreeWx :default-expand-all="false" template @node-click="handleNodeClick" @init="handleNodeClick"
                     @Policy="stencil">
                 </pointTreeWx> -->
-                <CloudDeviceEntryTree
-                    ref="TerminalRef"
-                    template
-                    @Policy="stencil"
-                    @node-click="handleNodeClick"
-                    @init="handleNodeClick"
-                ></CloudDeviceEntryTree>
-            </pane>
-            <pane :size="100 - size" style="background: #fff" :style="height">
+                <CloudDeviceEntryTree ref="TerminalRef" template @Policy="stencil" @node-click="handleNodeClick"
+                    @init="handleNodeClick"></CloudDeviceEntryTree>
+        </div>
+        <div class="report-zl-main">
                 <TableHeader datePicker ref="TableHeaderRef" :showReset="false">
                     <template v-slot:select>
                         <!-- <el-form-item label="时间:">
                             <DatePicker ref="datePickerRef"></DatePicker>
                         </el-form-item> -->
                         <el-form-item label="模板策略">
-                            <el-select
-                                v-model.trim="Template"
-                                @change="changetype"
-                                placeholder="请选择模版"
-                                value-key="id"
-                            >
-                                <el-option
-                                    v-for="item in templatePolicy"
-                                    :key="item.id"
-                                    :label="item.excelName"
-                                    :value="item"
-                                ></el-option>
+                            <el-select v-model.trim="Template" @change="changetype" placeholder="请选择模版" value-key="id">
+                                <el-option v-for="item in templatePolicy" :key="item.id" :label="item.excelName"
+                                    :value="item"></el-option>
                             </el-select>
                         </el-form-item>
                         <!-- <el-form-item label="监测对象">
@@ -50,19 +35,11 @@
                     </template>
                 </TableHeader>
                 <div class="box" v-loading="tableStore.table.loading">
-                    <div
-                        id="luckysheet"
-                        :style="`height: calc(${tableStore.table.height} + 45px)`"
-                        v-if="tableStore.table.data.length > 0"
-                    ></div>
-                    <el-empty
-                        :style="`height: calc(${tableStore.table.height} + 45px)`"
-                        v-else
-                        description="暂无数据"
-                    />
+                    <div id="luckysheet" class="report-zl-sheet"
+                        v-if="tableStore.table.data.length > 0"></div>
+                    <el-empty class="report-zl-sheet" v-else description="暂无数据" />
                 </div>
-            </pane>
-        </splitpanes>
+        </div>
     </div>
 </template>
 <script setup lang="ts">
@@ -73,9 +50,7 @@ import TableHeader from '@/components/table/header/index.vue'
 import { useDictData } from '@/stores/dictData'
 import { mainHeight } from '@/utils/layout'
 import { exportExcel } from '@/views/system/reportForms/export.js'
-import 'splitpanes/dist/splitpanes.css'
 import DatePicker from '@/components/form/datePicker/time.vue'
-import { Splitpanes, Pane } from 'splitpanes'
 import CloudDeviceEntryTree from '@/components/tree/govern/cloudDeviceEntryTreeZL.vue'
 import { getListByIds } from '@/api/harmonic-boot/cockpit/cockpit'
 import { ElMessage } from 'element-plus'
@@ -84,7 +59,6 @@ defineOptions({
     name: 'govern/reportCore/statisticsWx/indexZL'
 })
 const height = mainHeight(20)
-const size = ref(0)
 const dictData = useDictData()
 const TableHeaderRef = ref()
 const dotList: any = ref({})
@@ -98,6 +72,7 @@ const tableStore = new TableStore({
     url: '/cs-harmonic-boot/customReport/getSensitiveUserReport',
     method: 'POST',
     column: [],
+    showPage: false,
     beforeSearchFun: () => {
         tableStore.table.params.tempId = Template.value.id
         tableStore.table.params.lineId = dotList.value.id
@@ -142,15 +117,6 @@ tableStore.table.params.customType = 1
 const flag = ref(true)
 onMounted(() => {
     initListByIds()
-    nextTick(() => {
-        const dom = document.getElementById('navigation-splitpanes')
-        if (dom && dom.offsetHeight > 0) {
-            size.value = (280 / (dom.offsetWidth - 7)) * 100
-        } else {
-            // 设置默认值
-            size.value = 20
-        }
-    })
 })
 
 const idList = ref([])
@@ -201,11 +167,36 @@ const exportEvent = () => {
 }
 </script>
 <style lang="scss">
-.splitpanes.default-theme .splitpanes__pane {
+.report-zl-page {
+    display: flex;
+    overflow: hidden;
+}
+
+.report-zl-sidebar {
+    width: 280px;
+    flex-shrink: 0;
+    min-height: 0;
+    overflow: hidden;
+}
+
+.report-zl-main {
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
     background: #fff;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
 }
 
 .box {
-    padding: 10px;
+    flex: 1;
+    min-height: 0;
+    padding: 10px 0;
+    overflow: hidden;
+}
+
+.report-zl-sheet {
+    height: 100%;
 }
 </style>

src/views/govern/sensitiveLoadMange/detail.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-dialog class="cn-operate-dialog" width="600px" v-model.trim="dialogVisible" :title="title">
+    <el-dialog class="cn-operate-dialog" width="500px" v-model.trim="dialogVisible" :title="title">
         <el-form :model="form" class="form-one" label-width="auto" ref="formRef" :rules="rules">
             <el-form-item label="所属厂站名称" prop="substationName">
                 <el-input v-model.trim="form.substationName" placeholder="请输入所属厂站名称"></el-input>

src/views/govern/setting/statisticalType/add.vue

@@ -76,8 +76,7 @@ const open = (text: string, data?: anyObj) => {
         form[key] = data ? data[key] : ''
 
         if (key == 'sort') {
-            form[key] = data?.sort ? data[key] : 100
-            // console.log("🚀 ~ open ~ form[key]:", form[key])
+            form[key] = data?.sort ?? 100
         }
     }
     dialogVisible.value = true

src/views/govern/setting/statisticalType/binding.vue

@@ -1,475 +1,480 @@
-<template>
-    <el-dialog class="cn-operate-dialog statistical-type-binding" v-model.trim="dialogVisible" title="绑定指标"
-        style="width: 1200px" @closed="close">
-        <el-scrollbar style="padding-right: 0">
-            <div class="box">
-                <div class="box-left">
-                    <el-input maxlength="32" show-word-limit v-model.trim="searchKey" size="small" placeholder="请输入搜索内容"
-                        :suffix-icon="Search" @input="filterTree" style="margin-bottom: 10px"></el-input>
-                    <el-cascader-panel v-model.trim="fromDataValue" :props="{
-                        multiple: true
-                    }" :options="fromData"></el-cascader-panel>
-                </div>
-                <div class="box-center">
-                    <el-button type="primary" icon="el-icon-Plus" @click="newGroup">新建分组</el-button>
-                    <el-popover v-model.trim="popoverVisible" placement="right" width="400" trigger="click"
-                        popper-style="width:auto">
-                        <div class="statistical-type-binding-button-group">
-                            <el-button type="primary" style="margin-left: 0" v-for="item in toData"
-                                @click="leftCheckChange(item)">
-                                {{ item.label }}
-                            </el-button>
-                        </div>
-                        <div v-if="toData.length === 0">请先创建分组</div>
-                        <template #reference>
-                            <el-button style="margin-left: 0" class="mt20" type="primary" icon="el-icon-ArrowRight">
-                                向右
-                            </el-button>
-                        </template>
-                    </el-popover>
-                    <el-button style="margin-left: 0" icon="el-icon-ArrowLeft" class="mt20" type="primary"
-                        @click="rightCheckChange">
-                        向左
-                    </el-button>
-                </div>
-                <div class="box-right">
-                    <el-input maxlength="32" show-word-limit v-model.trim="searchKey1" size="small"
-                        placeholder="请输入搜索内容" :suffix-icon="Search" @input="filterTree1"
-                        style="margin-bottom: 10px"></el-input>
-                    <el-cascader-panel v-model.trim="toDataValue" :props="{
-                        multiple: true,
-                        checkStrictly: true,
-                        expandTrigger: 'click'
-                    }" :options="toData">
-                        <template #default="{ node, data }">
-                            <div style="display: flex; align-items: center">
-
-                                <el-tooltip placement="bottom" :hide-after="0">
-                                    <template #content>
-                                        <span>{{ data.label }}</span>
-                                    </template>
-
-                                    <div class="hide-txt">{{ data.label }}</div>
-                                </el-tooltip>
-                                <template v-if="node.level === 1">
-                                    <div class="ml5">({{ data.children.length }})</div>
-                                    <div style="flex: 1"></div>
-                                    <Icon name="el-icon-EditPen" class="ml10" style="cursor: pointer"
-                                        @click="editGroup(data)"></Icon>
-
-                                    <el-popconfirm title="确定删除该分组吗?" @confirm="dicDeleteGroup(data)">
-                                        <template #reference>
-                                            <Icon name="el-icon-Delete" class="ml10" style="cursor: pointer"></Icon>
-                                        </template>
-                                    </el-popconfirm>
-
-
-                                </template>
-                            </div>
-                        </template>
-                    </el-cascader-panel>
-                </div>
-            </div>
-        </el-scrollbar>
-
-        <template #footer>
-            <span class="dialog-footer">
-                <el-button @click="close">取消</el-button>
-                <el-button type="primary" @click="submit">确认</el-button>
-            </span>
-        </template>
-    </el-dialog>
-    <PopupAdd ref="addRef" @over="init(0)"></PopupAdd>
-</template>
-<script lang="ts" setup>
-import { ref, inject } from 'vue'
-import { CascaderValue, ElMessage } from 'element-plus'
-import { addStatistical, queryStatistical } from '@/api/system-boot/csstatisticalset'
-import { getDictTreeById } from '@/api/system-boot/dictTree'
-import PopupAdd from './add.vue'
-import { dicDelete } from '@/api/system-boot/dic'
-import List from '@/views/pms/comptroller/list.vue'
-import { Search } from '@element-plus/icons-vue'
-defineOptions({
-    name: 'govern/setting/statisticalType/binding'
-})
-const addRef = ref()
-// 统计类型pid
-const pid = ref('')
-const dialogVisible = ref(false)
-const popoverVisible = ref(false)
-const fromData = ref<treeData[]>([])
-const fromDataValue = ref<string[]>([])
-const toData = ref<treeData[]>([])
-const toDataValue = ref<string[]>([])
-const init = (val: any) => {
-    queryStatistical(pid.value).then(res => {
-        if (val == 0) {
-            fromData.value = []
-            fromDataValue.value = []
-            toData.value = []
-            toDataValue.value = []
-            res.data.unSelectedList.forEach((item: any) => {
-                const obj = {
-                    id: item.dataType,
-                    value: item.dataType,
-                    pid: 0,
-                    label: item.dataTypeName,
-                    children: [] as any[]
-                }
-                item.eleEpdPqdVOS.forEach((item2: any) => {
-                    const obj2 = {
-                        id: item2.id,
-                        pid: item.dataType,
-                        value: item2.id,
-                        label: item2.phase === 'M' ? item2.showName : item2.phase + '相' + item2.showName
-                    }
-                    if (item2.showName) {
-                        obj.children.push(obj2)
-                    }
-                })
-                fromData.value.push(obj)
-            })
-            res.data.selectedList.forEach((item: any) => {
-                const obj = {
-                    id: item.dataType,
-                    value: item.dataType,
-                    pid: 0,
-                    label: item.dataTypeName,
-                    children: [] as any[]
-                }
-                item.eleEpdPqdVOS.forEach((item2: any) => {
-                    const obj2 = {
-                        id: item2.id,
-                        pid: item2.dataType,
-                        value: item2.id,
-                        label: item2.phase === 'M' ? item2.showName : item2.phase + '相' + item2.showName
-                    }
-                    if (item2.showName) {
-                        obj.children.push(obj2)
-                    }
-                })
-                toData.value.push(obj)
-            })
-        } else if (val == 1) {
-            fromData.value = []
-            fromDataValue.value = []
-            res.data.unSelectedList.forEach((item: any) => {
-                const obj = {
-                    id: item.dataType,
-                    value: item.dataType,
-                    pid: 0,
-                    label: item.dataTypeName,
-                    children: [] as any[]
-                }
-                item.eleEpdPqdVOS.forEach((item2: any) => {
-                    const obj2 = {
-                        id: item2.id,
-                        pid: item.dataType,
-                        value: item2.id,
-                        label: item2.phase === 'M' ? item2.showName : item2.phase + '相' + item2.showName
-                    }
-                    if (item2.showName) {
-                        obj.children.push(obj2)
-                    }
-                })
-                fromData.value.push(obj)
-            })
-        } else if (val == 2) {
-            toData.value = []
-            toDataValue.value = []
-            res.data.selectedList.forEach((item: any) => {
-                const obj = {
-                    id: item.dataType,
-                    value: item.dataType,
-                    pid: 0,
-                    label: item.dataTypeName,
-                    children: [] as any[]
-                }
-                item.eleEpdPqdVOS.forEach((item2: any) => {
-                    const obj2 = {
-                        id: item2.id,
-                        pid: item2.dataType,
-                        value: item2.id,
-                        label: item2.phase === 'M' ? item2.showName : item2.phase + '相' + item2.showName
-                    }
-                    if (item2.showName) {
-                        obj.children.push(obj2)
-                    }
-                })
-                toData.value.push(obj)
-            })
-        }
-    })
-}
-
-const searchVisible = ref(false)
-const searchKey = ref('')
-//查左边
-const filteredTree = ref([])
-const filterTree = () => {
-    filteredTree.value = filterNodes(fromData.value, searchKey.value)
-}
-//查右边
-const searchKey1 = ref('')
-const filteredTree1 = ref([])
-const filterTree1 = () => {
-    filteredTree1.value = filterNodes1(toData.value, searchKey1.value)
-}
-
-const filterNodes = (node: any, query: any) => {
-    if (searchKey.value) {
-        const keyword = query.trim().toLowerCase() // 获取搜索关键字并转换为小写
-        const nodes = node
-        // 使用递归函数过滤树形数据
-        const filteredNodes = []
-        for (const node of nodes) {
-            if (node.label.toLowerCase().includes(keyword)) {
-                // 如果节点的标签包含关键字，将其添加到结果中
-                filteredNodes.push(node)
-            } else if (node.children && node.children.length > 0) {
-                // 如果节点有子节点，则递归过滤子节点
-                const filteredChildren: any = filterNodes(node.children, keyword)
-                if (filteredChildren.length > 0) {
-                    // 如果子节点中有匹配的结果，则添加父节点
-                    const clonedNode = { ...node, children: filteredChildren }
-                    filteredNodes.push(clonedNode)
-                }
-            }
-        }
-        return (fromData.value = filteredNodes)
-    } else {
-        init(1)
-    }
-}
-
-const filterNodes1 = (node: any, query: any) => {
-    if (searchKey1.value) {
-        const result: any = []
-        node.forEach((node: any) => {
-            let newNode = { ...node }
-            if (node.children) {
-                newNode.children = filterNodes1(node.children, query)
-            }
-            if (newNode.label.includes(query) || (newNode.children && newNode.children.length)) {
-                result.push(newNode)
-            }
-        })
-        return (toData.value = result)
-    } else {
-        init(2)
-    }
-}
-
-// 左侧源数据选中事件
-const leftCheckChange = (e: any) => {
-    if (fromDataValue.value.length === 0) {
-        return ElMessage.warning('请先选择数据')
-    }
-    let arr: any[] = []
-    fromDataValue.value.forEach(item1 => {
-        fromData.value.forEach(item2 => {
-            if (item2.value === item1[0]) {
-                item2.children = item2.children.filter((item3, index) => {
-                    if (item3.value === item1[1]) {
-                        arr.push(item3)
-                        return false
-                    } else {
-                        return true
-                    }
-                })
-            }
-        })
-    })
-    if (e.value) {
-        toData.value.forEach(item => {
-            if (item.value === e.value) {
-                item.children.push(...arr)
-            }
-        })
-    } else {
-        toData.value.push(...arr)
-    }
-    // fromDataValue.value = []
-    popoverVisible.value = false
-}
-// 右侧目标数据选中事件
-const rightCheckChange = () => {
-    if (toDataValue.value.length === 0) {
-        return ElMessage.warning('请先选择数据')
-    }
-    let arr: any[] = []
-    toDataValue.value.forEach(item1 => {
-        if (item1.length === 1) {
-            toData.value = toData.value.filter(item2 => {
-                if (item2.value === item1[0]) {
-                    arr.push(item2)
-                    return false
-                } else {
-                    return true
-                }
-            })
-        } else {
-            toData.value.forEach(item2 => {
-                if (item2.value === item1[0]) {
-                    item2.children = item2.children.filter((item3, index) => {
-                        if (item3.value === item1[1]) {
-                            arr.push(item3)
-                            return false
-                        } else {
-                            return true
-                        }
-                    })
-                }
-            })
-        }
-    })
-    fromData.value.forEach(item1 => {
-        arr.forEach(item2 => {
-            if (item2.pid === item1.value) {
-                item1.children.push(item2)
-            }
-        })
-    })
-}
-
-const dicDeleteGroup = (data: any) => {
-    if (data.children.length) {
-        return ElMessage.warning('该分组下有指标，不能删除')
-    }
-    dicDelete(data.value).then(res => {
-        ElMessage.success('删除成功')
-        toData.value = toData.value.filter(item => item.value !== data.value)
-    })
-}
-
-const newGroup = () => {
-
-    addRef.value.open('新建分组', {
-        sort: toData.value.length ? toData.value[toData.value.length - 1].sort + 1 : 1,
-        code: '',
-        pid: pid.value,
-        id: '',
-        remark: '',
-        name: ''
-    })
-}
-const editGroup = (data: any) => {
-    getDictTreeById(data.id).then(res => {
-        addRef.value.open('修改分组', {
-            sort: res.data.sort || 100,
-            code: res.data.code || '',
-            pid: res.data.pid || '',
-            id: res.data.id || '',
-            remark: res.data.remark || '',
-            name: res.data.name || ''
-        })
-    })
-
-}
-
-const open = (id: string) => {
-    dialogVisible.value = true
-    pid.value = id
-    init(0)
-}
-const submit = async () => {
-    let ids = []
-    let one = {
-        id: pid.value,
-        ids: [] as any[]
-    }
-    toData.value.forEach(item => {
-        let obj = {
-            id: item.id,
-            ids: [] as any[]
-        }
-        if (item.children) {
-            item.children.forEach(item2 => {
-                obj.ids.push(item2.value)
-            })
-            ids.push(obj)
-        } else {
-            one.ids.push(item.value)
-        }
-    })
-    if (one.ids.length) {
-        ids.push(one)
-    }
-    addStatistical(ids).then(res => {
-        ElMessage.success('绑定指标成功')
-        dialogVisible.value = false
-    })
-}
-const close = () => {
-    searchKey.value = ''
-    searchKey1.value = ''
-    dialogVisible.value = false
-}
-
-defineExpose({ open })
-</script>
-<style lang="scss">
-.statistical-type-binding-button-group {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-gap: 10px;
-}
-
-.statistical-type-binding {
-    .box {
-        display: flex;
-        width: 1160px;
-        height: calc(60vh - 95px);
-        margin: 0 auto;
-        text-align: left;
-
-        .box-center {
-            display: flex;
-            align-items: center;
-            width: 100px;
-            padding-top: 20px;
-            margin: 0 20px;
-            flex-direction: column;
-        }
-
-        .box-right,
-        .box-left {
-            height: 100%;
-            overflow: hidden;
-            // flex: 1;
-            width: 450px;
-
-            .el-cascader-menu {
-                padding-right: 0;
-
-                .el-scrollbar__wrap {
-                    height: 100%;
-                }
-            }
-
-            .el-cascader-panel {
-                height: calc(60vh - 140px);
-
-                .el-cascader-menu__list {
-                    height: 100% !important;
-                    overflow-y: auto !important;
-                    // padding-bottom: 50px !important;
-                    box-sizing: border-box;
-                }
-            }
-        }
-
-        .box-right {
-            flex: 1;
-        }
-
-        .hide-txt {
-            width: 150px;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-    }
-}
-</style>
+<template>
+    <el-dialog class="cn-operate-dialog statistical-type-binding" v-model.trim="dialogVisible" title="绑定指标"
+        style="width: 1200px" @closed="close">
+        <el-scrollbar style="padding-right: 0">
+            <div class="box">
+                <div class="box-left">
+                    <el-input maxlength="32" show-word-limit v-model.trim="searchKey" size="small" placeholder="请输入搜索内容"
+                        :suffix-icon="Search" @input="filterTree" style="margin-bottom: 10px"></el-input>
+                    <el-cascader-panel v-model.trim="fromDataValue" :props="{
+                        multiple: true
+                    }" :options="fromData"></el-cascader-panel>
+                </div>
+                <div class="box-center">
+                    <el-button type="primary" icon="el-icon-Plus" @click="newGroup">新建分组</el-button>
+                    <el-popover v-model.trim="popoverVisible" placement="right" width="400" trigger="click"
+                        popper-style="width:auto">
+                        <div class="statistical-type-binding-button-group">
+                            <el-button type="primary" style="margin-left: 0" v-for="item in toData"
+                                @click="leftCheckChange(item)">
+                                {{ item.label }}
+                            </el-button>
+                        </div>
+                        <div v-if="toData.length === 0">请先创建分组</div>
+                        <template #reference>
+                            <el-button style="margin-left: 0" class="mt20" type="primary" icon="el-icon-ArrowRight">
+                                向右
+                            </el-button>
+                        </template>
+                    </el-popover>
+                    <el-button style="margin-left: 0" icon="el-icon-ArrowLeft" class="mt20" type="primary"
+                        @click="rightCheckChange">
+                        向左
+                    </el-button>
+                </div>
+                <div class="box-right">
+                    <el-input maxlength="32" show-word-limit v-model.trim="searchKey1" size="small"
+                        placeholder="请输入搜索内容" :suffix-icon="Search" @input="filterTree1"
+                        style="margin-bottom: 10px"></el-input>
+                    <el-cascader-panel v-model.trim="toDataValue" :props="{
+                        multiple: true,
+                        checkStrictly: true,
+                        expandTrigger: 'click'
+                    }" :options="toData">
+                        <template #default="{ node, data }">
+                            <div style="display: flex; align-items: center">
+
+                                <el-tooltip placement="bottom" :hide-after="0">
+                                    <template #content>
+                                        <span>{{ data.label }}</span>
+                                    </template>
+
+                                    <div class="hide-txt">{{ data.label }}</div>
+                                </el-tooltip>
+                                <template v-if="node.level === 1">
+                                    <div class="ml5">({{ data.children.length }})</div>
+                                    <div style="flex: 1"></div>
+                                    <Icon name="el-icon-EditPen" class="ml10" style="cursor: pointer"
+                                        @click="editGroup(data)"></Icon>
+
+                                    <el-popconfirm title="确定删除该分组吗?" @confirm="dicDeleteGroup(data)">
+                                        <template #reference>
+                                            <Icon name="el-icon-Delete" class="ml10" style="cursor: pointer"></Icon>
+                                        </template>
+                                    </el-popconfirm>
+
+
+                                </template>
+                            </div>
+                        </template>
+                    </el-cascader-panel>
+                </div>
+            </div>
+        </el-scrollbar>
+
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="close">取消</el-button>
+                <el-button type="primary" @click="submit">确认</el-button>
+            </span>
+        </template>
+    </el-dialog>
+    <PopupAdd ref="addRef" @over="init(0)"></PopupAdd>
+</template>
+<script lang="ts" setup>
+import { ref, inject } from 'vue'
+import { CascaderValue, ElMessage } from 'element-plus'
+import { addStatistical, queryStatistical } from '@/api/system-boot/csstatisticalset'
+import { getDictTreeById, queryCsDictTree } from '@/api/system-boot/dictTree'
+import PopupAdd from './add.vue'
+import { dicDelete } from '@/api/system-boot/dic'
+import List from '@/views/pms/comptroller/list.vue'
+import { Search } from '@element-plus/icons-vue'
+defineOptions({
+    name: 'govern/setting/statisticalType/binding'
+})
+const addRef = ref()
+// 统计类型pid
+const pid = ref('')
+const dialogVisible = ref(false)
+const popoverVisible = ref(false)
+const fromData = ref<treeData[]>([])
+const fromDataValue = ref<string[]>([])
+const toData = ref<treeData[]>([])
+const toDataValue = ref<string[]>([])
+const init = (val: any) => {
+    queryStatistical(pid.value).then(res => {
+        if (val == 0) {
+            fromData.value = []
+            fromDataValue.value = []
+            toData.value = []
+            toDataValue.value = []
+            res.data.unSelectedList.forEach((item: any) => {
+                const obj = {
+                    id: item.dataType,
+                    value: item.dataType,
+                    pid: 0,
+                    label: item.dataTypeName,
+                    children: [] as any[]
+                }
+                item.eleEpdPqdVOS.forEach((item2: any) => {
+                    const obj2 = {
+                        id: item2.id,
+                        pid: item.dataType,
+                        value: item2.id,
+                        label: item2.phase === 'T' ? item2.showName : item2.phase + '相' + item2.showName
+                    }
+                    if (item2.showName) {
+                        obj.children.push(obj2)
+                    }
+                })
+                fromData.value.push(obj)
+            })
+            res.data.selectedList.forEach((item: any) => {
+                const obj = {
+                    id: item.dataType,
+                    value: item.dataType,
+                    pid: 0,
+                    label: item.dataTypeName,
+                    children: [] as any[]
+                }
+                item.eleEpdPqdVOS.forEach((item2: any) => {
+                    const obj2 = {
+                        id: item2.id,
+                        pid: item2.dataType,
+                        value: item2.id,
+                        label: item2.phase === 'T' ? item2.showName : item2.phase + '相' + item2.showName
+                    }
+                    if (item2.showName) {
+                        obj.children.push(obj2)
+                    }
+                })
+                toData.value.push(obj)
+            })
+        } else if (val == 1) {
+            fromData.value = []
+            fromDataValue.value = []
+            res.data.unSelectedList.forEach((item: any) => {
+                const obj = {
+                    id: item.dataType,
+                    value: item.dataType,
+                    pid: 0,
+                    label: item.dataTypeName,
+                    children: [] as any[]
+                }
+                item.eleEpdPqdVOS.forEach((item2: any) => {
+                    const obj2 = {
+                        id: item2.id,
+                        pid: item.dataType,
+                        value: item2.id,
+                        label: item2.phase === 'T' ? item2.showName : item2.phase + '相' + item2.showName
+                    }
+                    if (item2.showName) {
+                        obj.children.push(obj2)
+                    }
+                })
+                fromData.value.push(obj)
+            })
+        } else if (val == 2) {
+            toData.value = []
+            toDataValue.value = []
+            res.data.selectedList.forEach((item: any) => {
+                const obj = {
+                    id: item.dataType,
+                    value: item.dataType,
+                    pid: 0,
+                    label: item.dataTypeName,
+                    children: [] as any[]
+                }
+                item.eleEpdPqdVOS.forEach((item2: any) => {
+                    const obj2 = {
+                        id: item2.id,
+                        pid: item2.dataType,
+                        value: item2.id,
+                        label: item2.phase === 'T' ? item2.showName : item2.phase + '相' + item2.showName
+                    }
+                    if (item2.showName) {
+                        obj.children.push(obj2)
+                    }
+                })
+                toData.value.push(obj)
+            })
+        }
+    })
+}
+
+const searchVisible = ref(false)
+const searchKey = ref('')
+//查左边
+const filteredTree = ref([])
+const filterTree = () => {
+    filteredTree.value = filterNodes(fromData.value, searchKey.value)
+}
+//查右边
+const searchKey1 = ref('')
+const filteredTree1 = ref([])
+const filterTree1 = () => {
+    filteredTree1.value = filterNodes1(toData.value, searchKey1.value)
+}
+
+const filterNodes = (node: any, query: any) => {
+    if (searchKey.value) {
+        const keyword = query.trim().toLowerCase() // 获取搜索关键字并转换为小写
+        const nodes = node
+        // 使用递归函数过滤树形数据
+        const filteredNodes = []
+        for (const node of nodes) {
+            if (node.label.toLowerCase().includes(keyword)) {
+                // 如果节点的标签包含关键字，将其添加到结果中
+                filteredNodes.push(node)
+            } else if (node.children && node.children.length > 0) {
+                // 如果节点有子节点，则递归过滤子节点
+                const filteredChildren: any = filterNodes(node.children, keyword)
+                if (filteredChildren.length > 0) {
+                    // 如果子节点中有匹配的结果，则添加父节点
+                    const clonedNode = { ...node, children: filteredChildren }
+                    filteredNodes.push(clonedNode)
+                }
+            }
+        }
+        return (fromData.value = filteredNodes)
+    } else {
+        init(1)
+    }
+}
+
+const filterNodes1 = (node: any, query: any) => {
+    if (searchKey1.value) {
+        const result: any = []
+        node.forEach((node: any) => {
+            let newNode = { ...node }
+            if (node.children) {
+                newNode.children = filterNodes1(node.children, query)
+            }
+            if (newNode.label.includes(query) || (newNode.children && newNode.children.length)) {
+                result.push(newNode)
+            }
+        })
+        return (toData.value = result)
+    } else {
+        init(2)
+    }
+}
+
+// 左侧源数据选中事件
+const leftCheckChange = (e: any) => {
+    if (fromDataValue.value.length === 0) {
+        return ElMessage.warning('请先选择数据')
+    }
+    let arr: any[] = []
+    fromDataValue.value.forEach(item1 => {
+        fromData.value.forEach(item2 => {
+            if (item2.value === item1[0]) {
+                item2.children = item2.children.filter((item3, index) => {
+                    if (item3.value === item1[1]) {
+                        arr.push(item3)
+                        return false
+                    } else {
+                        return true
+                    }
+                })
+            }
+        })
+    })
+    if (e.value) {
+        toData.value.forEach(item => {
+            if (item.value === e.value) {
+                item.children.push(...arr)
+            }
+        })
+    } else {
+        toData.value.push(...arr)
+    }
+    // fromDataValue.value = []
+    popoverVisible.value = false
+}
+// 右侧目标数据选中事件
+const rightCheckChange = () => {
+    if (toDataValue.value.length === 0) {
+        return ElMessage.warning('请先选择数据')
+    }
+    let arr: any[] = []
+    toDataValue.value.forEach(item1 => {
+        if (item1.length === 1) {
+            toData.value = toData.value.filter(item2 => {
+                if (item2.value === item1[0]) {
+                    arr.push(item2)
+                    return false
+                } else {
+                    return true
+                }
+            })
+        } else {
+            toData.value.forEach(item2 => {
+                if (item2.value === item1[0]) {
+                    item2.children = item2.children.filter((item3, index) => {
+                        if (item3.value === item1[1]) {
+                            arr.push(item3)
+                            return false
+                        } else {
+                            return true
+                        }
+                    })
+                }
+            })
+        }
+    })
+    fromData.value.forEach(item1 => {
+        arr.forEach(item2 => {
+            if (item2.pid === item1.value) {
+                item1.children.push(item2)
+            }
+        })
+    })
+}
+
+const dicDeleteGroup = (data: any) => {
+    if (data.children.length) {
+        return ElMessage.warning('该分组下有指标，不能删除')
+    }
+    dicDelete(data.value).then(res => {
+        ElMessage.success('删除成功')
+        toData.value = toData.value.filter(item => item.value !== data.value)
+    })
+}
+
+const newGroup = () => {
+    queryCsDictTree(pid.value).then(res => {
+        const list = res.data || []
+        const sort = list.length
+            ? Math.max(...list.map((item: any) => Number(item.sort) || 0)) + 1
+            : 1
+        addRef.value.open('新建分组', {
+            sort,
+            code: '',
+            pid: pid.value,
+            id: '',
+            remark: '',
+            name: ''
+        })
+    })
+}
+const editGroup = (data: any) => {
+    getDictTreeById(data.id).then(res => {
+        addRef.value.open('修改分组', {
+            sort: res.data.sort ?? 100,
+            code: res.data.code || '',
+            pid: res.data.pid || '',
+            id: res.data.id || '',
+            remark: res.data.remark || '',
+            name: res.data.name || ''
+        })
+    })
+
+}
+
+const open = (id: string) => {
+    dialogVisible.value = true
+    pid.value = id
+    init(0)
+}
+const submit = async () => {
+    let ids = []
+    let one = {
+        id: pid.value,
+        ids: [] as any[]
+    }
+    toData.value.forEach(item => {
+        let obj = {
+            id: item.id,
+            ids: [] as any[]
+        }
+        if (item.children) {
+            item.children.forEach(item2 => {
+                obj.ids.push(item2.value)
+            })
+            ids.push(obj)
+        } else {
+            one.ids.push(item.value)
+        }
+    })
+    if (one.ids.length) {
+        ids.push(one)
+    }
+    addStatistical(ids).then(res => {
+        ElMessage.success('绑定指标成功')
+        dialogVisible.value = false
+    })
+}
+const close = () => {
+    searchKey.value = ''
+    searchKey1.value = ''
+    dialogVisible.value = false
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss">
+.statistical-type-binding-button-group {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 10px;
+}
+
+.statistical-type-binding {
+    .box {
+        display: flex;
+        width: 1160px;
+        height: calc(60vh - 95px);
+        margin: 0 auto;
+        text-align: left;
+
+        .box-center {
+            display: flex;
+            align-items: center;
+            width: 100px;
+            padding-top: 20px;
+            margin: 0 20px;
+            flex-direction: column;
+        }
+
+        .box-right,
+        .box-left {
+            height: 100%;
+            overflow: hidden;
+            // flex: 1;
+            width: 450px;
+
+            .el-cascader-menu {
+                padding-right: 0;
+
+                .el-scrollbar__wrap {
+                    height: 100%;
+                }
+            }
+
+            .el-cascader-panel {
+                height: calc(60vh - 140px);
+
+                .el-cascader-menu__list {
+                    height: 100% !important;
+                    overflow-y: auto !important;
+                    // padding-bottom: 50px !important;
+                    box-sizing: border-box;
+                }
+            }
+        }
+
+        .box-right {
+            flex: 1;
+        }
+
+        .hide-txt {
+            width: 150px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+}
+</style>

src/views/govern/setting/statisticalType/index.vue

@@ -60,7 +60,7 @@ const tableStore = new TableStore({
         {
             title: '类型',
             field: 'type',
-            width: 200,
+            width: 250,
             formatter: row => {
                 return options.value.filter((item: any) => item.value == row.cellValue)[0]?.name
             }

src/views/setting/dictionary/list/popupDetailEdit.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-dialog width="600px" v-model.trim="dialogVisible" :title="title">
+    <el-dialog width="500px" v-model.trim="dialogVisible" :title="title">
         <el-scrollbar>
             <el-form :inline="false" :model="form" label-width="auto" class="form-one" :rules="rules" ref="formRef">
                 <el-form-item label="名称:" class="top" prop="name">

src/views/setting/dictionary/tree/index.vue

@@ -26,6 +26,7 @@ const tableStore = new TableStore({
     showPage:false,
     url: '/system-boot/dictTree/queryTree',
     method: 'GET',
+    publicHeight: 60,
     column: [
         { title: '字典名称', field: 'name', treeNode: true, align: 'left' },
         // { title: '排序', field: 'sort',width:'80'  },

src/views/setting/dictionary/tree/popupForm.vue

@@ -1,7 +1,7 @@
 <template>
     <el-dialog class="cn-operate-dialog" width="500px" v-model.trim="dialogVisible" :title="title">
         <el-scrollbar>
-            <el-form :inline="false" :model="form" ref="formRef" label-width="120px" :rules="rules">
+            <el-form :inline="false" :model="form" ref="formRef" label-width="auto" :rules="rules">
                 <el-form-item label="字典名称:" prop="name">
                     <el-input
                         maxlength="32"

src/views/setting/dictionary/version/index.vue

@@ -1,123 +1,164 @@
-<template>
-    <div class="default-main">
-        <TableHeader :showReset="false">
-            <template #select>
-
-
-                <el-radio-group v-model.trim="tableStore.table.params.versionType" @change="tableStore.index()">
-                    <el-radio-button label="web" value="WEB" />
-                    <el-radio-button label="app" value="APP" />
-
-                </el-radio-group>
-            </template>
-            <template #operation>
-                <el-button type="primary" icon="el-icon-Plus" @click="addMenu">新增版本</el-button>
-            </template>
-        </TableHeader>
-        <Table ref="tableRef" />
-        <el-dialog width="600px" v-model.trim="dialogVisible" 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.appVersion" placeholder="请输入版本号" />
-                </el-form-item>
-                <el-form-item label="整改内容">
-                    <el-input maxlength="300" type="textarea" show-word-limit v-model.trim="form.content"
-                        placeholder="请输入整改内容" />
-                </el-form-item>
-                <el-form-item label="发布类型">
-
-                    <el-select v-model.trim="form.sev" placeholder="请选择发布类型">
-                        <el-option label="优化" :value="0" />
-                        <el-option label="bug调整" :value="1" />
-                    </el-select>
-                </el-form-item>
-                <el-form-item label="版本类型">
-
-                    <el-select v-model.trim="form.versionType" placeholder="请选择版本类型">
-                        <el-option label="web" value="WEB" />
-                        <el-option label="app" value="APP" />
-                    </el-select>
-                </el-form-item>
-            </el-form>
-
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button @click="dialogVisible = false">取消</el-button>
-                    <el-button type="primary" @click="submit">确认</el-button>
-                </span>
-            </template>
-        </el-dialog>
-    </div>
-</template>
-<script setup lang="ts">
-import { ref, onMounted, provide } from 'vue'
-import TableStore from '@/utils/tableStore'
-import Table from '@/components/table/index.vue'
-import TableHeader from '@/components/table/header/index.vue'
-import { useDictData } from '@/stores/dictData'
-import { ElMessage } from 'element-plus'
-import { addVersion } from '@/api/systerm'
-import router from '@/router/index'
-const dialogVisible = ref(false)
-const form = ref({
-    appVersion: '',
-    content: '',
-    versionType: '',
-    sev: '',
-})
-const tableStore = new TableStore({
-    url: '/cs-system-boot/appVersion/getAllData',
-    method: 'POST',
-    showPage: false,
-    paramsPOST: true,
-    column: [
-        {
-            title: '序号', width: 80, formatter: (row: any) => {
-                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
-            }
-        },
-        { title: '版本号', field: 'versionName', width: '150' },
-
-        { title: '创建时间', field: 'createTime', width: '220', sortable: true },
-        {
-            title: '发布类型', field: 'sev', formatter: (row,) => {
-                return row.cellValue == 0 ? '优化' : 'bug调整'
-            },
-            width: '150'
-        },
-        { title: '整改内容', field: 'content' },
-
-
-
-
-    ],
-})
-tableStore.table.params.versionType = 'WEB'
-provide('tableStore', tableStore)
-
-onMounted(async () => {
-    tableStore.index()
-    // await queryByCode('Direct_Connected_Device').then((res) => {
-    //     queryByid(res.data.id).then((res) => {
-    //         DevTypeOptions.value = res.data
-    //     })
-    // })
-    // tableStore.table.params.devType = ''
-})
-const submit = () => {
-    addVersion(form.value).then(res => {
-        ElMessage.success('新增成功')
-        tableStore.index()
-        dialogVisible.value = false
-        router.go(0)
-    })
-}
-const addMenu = () => {
-    dialogVisible.value = true
-    form.value.appVersion = tableStore.table.data[0].versionName || ''
-    form.value.content = ''
-    form.value.sev = tableStore.table.data[0].sev || 0
-    form.value.versionType = tableStore.table.data[0].versionType || 'WEB'
-}
-
-</script>
+<template>
+    <div class="default-main">
+        <TableHeader :showReset="false">
+            <template #select>
+                <el-radio-group v-model.trim="tableStore.table.params.versionType" @change="tableStore.index()">
+                    <el-radio-button label="web" value="WEB" />
+                    <el-radio-button label="app" value="APP" />
+                </el-radio-group>
+            </template>
+            <template #operation>
+                <el-button type="primary" icon="el-icon-Plus" @click="addMenu">新增版本</el-button>
+            </template>
+        </TableHeader>
+        <Table ref="tableRef">
+            <template v-slot:columns>
+                <vxe-column
+                    field="androidPath"
+                    title="Android路径"
+                    width="250px"
+                    v-if="tableStore.table.params.versionType == 'APP'"
+                ></vxe-column>
+                <vxe-column
+                    field="iosPath"
+                    title="IOS路径"
+                    width="250px"
+                    v-if="tableStore.table.params.versionType == 'APP'"
+                ></vxe-column>
+            </template>
+        </Table>
+        <el-dialog width="500px" v-model.trim="dialogVisible" title="新增版本">
+            <el-form :inline="false" :model="form" ref="formRef" label-width="auto" class="form-one" :rules="rules">
+                <el-form-item label="版本号:" prop="appVersion">
+                    <el-input
+                        maxlength="32"
+                        show-word-limit
+                        v-model.trim="form.appVersion"
+                        placeholder="请输入版本号"
+                    />
+                </el-form-item>
+                <el-form-item label="整改内容:">
+                    <el-input
+                        maxlength="300"
+                        type="textarea"
+                        show-word-limit
+                        v-model.trim="form.content"
+                        placeholder="请输入整改内容"
+                    />
+                </el-form-item>
+                <el-form-item label="发布类型:">
+                    <el-select v-model.trim="form.sev" placeholder="请选择发布类型">
+                        <el-option label="优化" :value="0" />
+                        <el-option label="bug调整" :value="1" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="版本类型:">
+                    <el-select v-model.trim="form.versionType" placeholder="请选择版本类型">
+                        <el-option label="web" value="WEB" />
+                        <el-option label="app" value="APP" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="Android路径:" prop="androidPath" v-if="form.versionType == 'APP'">
+                    <el-input v-model.trim="form.androidPath" placeholder="请输入Android路径" />
+                </el-form-item>
+                <el-form-item label="IOS路径:" prop="iosPath" v-if="form.versionType == 'APP'">
+                    <el-input v-model.trim="form.iosPath" placeholder="请输入IOS路径" />
+                </el-form-item>
+            </el-form>
+
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="dialogVisible = false">取消</el-button>
+                    <el-button type="primary" @click="submit">确认</el-button>
+                </span>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, provide } from 'vue'
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import TableHeader from '@/components/table/header/index.vue'
+import { useDictData } from '@/stores/dictData'
+import { ElMessage } from 'element-plus'
+import { addVersion } from '@/api/systerm'
+import router from '@/router/index'
+const dialogVisible = ref(false)
+const form = ref({
+    appVersion: '',
+    content: '',
+    versionType: '',
+    sev: '',
+    androidPath: '',
+    iosPath: ''
+})
+const rules = {
+    appVersion: [{ required: true, message: '请输入版本号', trigger: 'blur' }],
+    androidPath: [{ required: true, message: '请输入Android路径', trigger: 'blur' }],
+    iosPath: [{ required: true, message: '请输入IOS路径', trigger: 'blur' }]
+}
+const formRef = ref()
+const tableStore = new TableStore({
+    url: '/cs-system-boot/appVersion/getAllData',
+    method: 'POST',
+    showPage: false,
+    paramsPOST: true,
+    column: [
+        {
+            title: '序号',
+            width: 80,
+            formatter: (row: any) => {
+                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
+            }
+        },
+        { title: '版本号', field: 'versionName', width: '150' },
+        { title: '创建时间', field: 'createTime', width: '220', sortable: true },
+        {
+            title: '发布类型',
+            field: 'sev',
+            formatter: row => {
+                return row.cellValue == 0 ? '优化' : 'bug调整'
+            },
+            width: '150'
+        },
+        { title: '整改内容', field: 'content' }
+    ],
+    beforeSearchFun: () => {
+        // console.log("🚀 ~ tableStore.table.params:", tableStore.table)
+        // if (tableStore.table.params.versionType == 'APP') {
+        // }
+    }
+})
+tableStore.table.params.versionType = 'WEB'
+provide('tableStore', tableStore)
+
+onMounted(async () => {
+    tableStore.index()
+    // await queryByCode('Direct_Connected_Device').then((res) => {
+    //     queryByid(res.data.id).then((res) => {
+    //         DevTypeOptions.value = res.data
+    //     })
+    // })
+    // tableStore.table.params.devType = ''
+})
+const submit = async () => {
+    await formRef.value.validate()
+    console.log(123)
+    addVersion(form.value).then(res => {
+        ElMessage.success('新增成功')
+        tableStore.index()
+        dialogVisible.value = false
+        router.go(0)
+    })
+}
+const addMenu = async () => {
+    dialogVisible.value = true
+    form.value.appVersion = tableStore.table.data[0].versionName || ''
+    form.value.content = ''
+    form.value.iosPath = ''
+    form.value.androidPath = ''
+    form.value.sev = tableStore.table.data[0].sev || 0
+    form.value.versionType = tableStore.table.data[0].versionType || 'WEB'
+}
+</script>

src/views/system/scheduledTasks/form.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-dialog draggable width="600px" v-model="dialogVisible" :title="title">
+    <el-dialog draggable width="500px" v-model="dialogVisible" :title="title">
 
         <el-form :inline="false" :model="form" label-width="auto" class="form-one" :rules="rules" ref="formRef">
             <el-form-item label="任务名称" prop="timerName">

src/views/system/subject/form/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-dialog draggable v-model.trim="dialogVisible" :title="title" :before-close="Cancel">
+    <el-dialog draggable v-model.trim="dialogVisible" :title="title" width="800px" :before-close="Cancel">
         <el-form :inline="false" :model="configStore" ref="formRef" label-width="auto" :rules="rules">
             <el-divider border-style="dashed">全局</el-divider>
             <div class="layout-config-global form-two">

types/table.d.ts

@@ -101,6 +101,8 @@ declare global {
         icon: string
         popconfirm?: Partial<Mutable<PopconfirmProps>>
         disabledTip?: boolean
+        // 行数据 loading 字段名，如 loading1
+        loading?: string
         // 自定义点击事件
         click?: (row: TableRow, field: TableColumn) => void
 

vite.config.ts

@@ -39,9 +39,13 @@ export default defineConfig({
 
     resolve: {
         alias: {
-            '/@': nodeResolve('.src'),
+            '/@': nodeResolve('./src'),
             '@': nodeResolve('src'),
             '~': nodeResolve('public')
         }
+    },
+    build: {
+        outDir: 'dist',
+        emptyOutDir: true // 构建前清空 dist
     }
 })