From 88a500a3871adf91549a56aa2362187cd00f1847 Mon Sep 17 00:00:00 2001
From: guanj <guan0550>
Date: Thu, 23 Jul 2026 11:32:42 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=85=A8=E5=B1=80=E5=88=97?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98=E4=BA=86=EF=BC=8C=E8=81=94=E8=B0=83=E8=AE=BE?=
 =?UTF-8?q?=E5=A4=87=E5=8D=87=E7=BA=A7mqtt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/access-boot/analyzeModel.ts           |   48 +-
 src/api/system-boot/dictTree.ts               |   18 +-
 .../cockpit/governanceReport/index.vue        |    3 +-
 .../cockpit/indicatorCrossingTime/index.vue   |    2 +-
 .../cockpit/indicatorDistribution/index.vue   |    2 +-
 .../listOfMainMonitoringPoints/index.vue      |    2 +-
 src/components/tree/device.vue                |  266 +++-
 src/components/tree/govern/deviceTreeUtils.ts |   16 +-
 src/components/tree/govern/lineTreeUtils.ts   |    6 +-
 src/components/tree/point.vue                 |  273 +++-
 src/utils/MQTT.ts                             |  200 +++
 .../govern/alarm/steadyStateEvent/index.vue   |    2 +-
 src/views/govern/analyze/DVR/index.vue        |    2 +-
 src/views/govern/device/control/index.vue     |    1 -
 src/views/govern/device/manage/index.vue      |   12 +-
 .../planData/components/treeTransfers.vue     |    4 +-
 .../govern/log/components/governance.vue      |    2 +-
 .../govern/manage/basic/popupVersion.vue      |  130 +-
 .../comp/realTime.vue}                        |  511 ++++---
 .../comp/settingManage.vue                    |  158 +++
 .../manage/operationalguidance/index.vue      |   72 +
 .../manage/programVersion/comp/upgrade.vue    |  437 ++++--
 .../govern/manage/programVersion/index.vue    |  680 +++++-----
 src/views/govern/operationalQuality/index.vue | 1184 +++++++++--------
 .../govern/setting/frontManagement/index.vue  |    2 +-
 src/views/pqs/cockpit/homePage/index.vue      |    4 +-
 .../pqs/cockpit/setUp/components/view.vue     |    4 +-
 27 files changed, 2682 insertions(+), 1359 deletions(-)
 create mode 100644 src/utils/MQTT.ts
 rename src/views/govern/manage/{realTime/index.vue => operationalguidance/comp/realTime.vue} (56%)
 create mode 100644 src/views/govern/manage/operationalguidance/comp/settingManage.vue
 create mode 100644 src/views/govern/manage/operationalguidance/index.vue

diff --git a/src/api/access-boot/analyzeModel.ts b/src/api/access-boot/analyzeModel.ts
index cf51193..91c6541 100644
--- a/src/api/access-boot/analyzeModel.ts
+++ b/src/api/access-boot/analyzeModel.ts
@@ -1,15 +1,35 @@
-import request from '@/utils/request'
-
-// 新增设备模版
-export const addDevModel = (file:any) => {
-    let form = new FormData()
-    form.append('file', file)
-    return request({
-        url: '/access-boot/analyzeModel/addModel',
-        method: 'post',
-        headers: {
-            'Content-Type': 'multipart/form-data',
-        },
-        data: form,
-    })
+import request from '@/utils/request'
+
+// 新增设备模版
+export const addDevModel = (file:any) => {
+    let form = new FormData()
+    form.append('file', file)
+    return request({
+        url: '/access-boot/analyzeModel/addModel',
+        method: 'post',
+        headers: {
+            'Content-Type': 'multipart/form-data',
+        },
+        data: form,
+    })
+}
+/**
+ * 重启cld设备
+ **/
+export const reboot = (data: any) => {
+    return request({
+        url: '/zl-event-boot/device/reboot',
+        method: 'get',
+       params: data
+    })
+}
+/**
+ * 重启Mqtt设备
+ **/
+export const rebootDevice = (data: any) => {
+    return request({
+        url: '/access-boot/askDeviceData/rebootDevice',
+        method: 'post',
+        params: data
+    })
 }
\ No newline at end of file
diff --git a/src/api/system-boot/dictTree.ts b/src/api/system-boot/dictTree.ts
index 37b0c44..3052a51 100644
--- a/src/api/system-boot/dictTree.ts
+++ b/src/api/system-boot/dictTree.ts
@@ -102,7 +102,7 @@ export function findByDevTypeId(data: any) {
         data
     })
 }
-// 装置升级
+// 装置升级 CLD
 export function upgrade(params: any) {
     return createAxios({
         url: '/zl-event-boot/device/upgrade',
@@ -110,3 +110,19 @@ export function upgrade(params: any) {
         params
     })
 }
+// 装置升级 mqtt
+export function uploadUpgradeFile(params: any) {
+    return createAxios({
+        url: '/cs-device-boot/EquipmentDelivery/uploadUpgradeFile',
+        method: 'post',
+        params
+    })
+}
+// 装置升级 升级 mqtt
+export function commitUpgradeFile(params: any) {
+    return createAxios({
+        url: '/cs-device-boot/EquipmentDelivery/commitUpgradeFile',
+        method: 'post',
+        params
+    })
+}
diff --git a/src/components/cockpit/governanceReport/index.vue b/src/components/cockpit/governanceReport/index.vue
index 6e6a7ea..7cdb704 100644
--- a/src/components/cockpit/governanceReport/index.vue
+++ b/src/components/cockpit/governanceReport/index.vue
@@ -2,8 +2,7 @@
     <div class="device-control">
         <!--治理效果报表 -->
         <div v-show="fullscreen">
-            <!-- <PointTree :height="flag ? 106 : 50" @node-click="nodeClick" @pointTypeChange="pointTypeChange"></PointTree> -->
-            <APFTree :height="flag ? 126 : 70" @node-click="handleNodeClick" template @init="handleNodeClick"></APFTree>
+            <APFTree :height="flag ? 128 : 72" @node-click="handleNodeClick" template @init="handleNodeClick"></APFTree>
         </div>
         <div>
             <TableHeader :showReset="false" :timeKeyList="prop.timeKey" ref="TableHeaderRef" datePicker
diff --git a/src/components/cockpit/indicatorCrossingTime/index.vue b/src/components/cockpit/indicatorCrossingTime/index.vue
index 5698468..57a4e05 100644
--- a/src/components/cockpit/indicatorCrossingTime/index.vue
+++ b/src/components/cockpit/indicatorCrossingTime/index.vue
@@ -3,7 +3,7 @@
         <!--指标越限时间分布
          -->
         <div v-show="fullscreen">
-            <PointTree :height="flag ? 106 : 50" @node-click="nodeClick" @pointTypeChange="pointTypeChange"></PointTree>
+            <PointTree :height="flag ? 128 : 72" @node-click="nodeClick" @pointTypeChange="pointTypeChange"></PointTree>
         </div>
         <div>
             <TableHeader :showReset="false" :timeKeyList="prop.timeKey" ref="TableHeaderRef"
diff --git a/src/components/cockpit/indicatorDistribution/index.vue b/src/components/cockpit/indicatorDistribution/index.vue
index f6c52fe..0b52c06 100644
--- a/src/components/cockpit/indicatorDistribution/index.vue
+++ b/src/components/cockpit/indicatorDistribution/index.vue
@@ -2,7 +2,7 @@
     <div class="device-control">
         <!--指标越限概率分布 -->
         <div v-show="fullscreen">
-            <PointTree :height="flag ? 106 : 50" @node-click="nodeClick" @pointTypeChange="pointTypeChange"></PointTree>
+            <PointTree :height="flag ? 128 : 72" @node-click="nodeClick" @pointTypeChange="pointTypeChange"></PointTree>
         </div>
         <div>
             <TableHeader :showReset="false" :timeKeyList="prop.timeKey" ref="TableHeaderRef"
diff --git a/src/components/cockpit/listOfMainMonitoringPoints/index.vue b/src/components/cockpit/listOfMainMonitoringPoints/index.vue
index 1ca8b22..f419c1c 100644
--- a/src/components/cockpit/listOfMainMonitoringPoints/index.vue
+++ b/src/components/cockpit/listOfMainMonitoringPoints/index.vue
@@ -2,7 +2,7 @@
     <div class="device-control">
         <!--指标拟合图 -->
         <div v-show="fullscreen">
-            <PointTree :height="flag ? 106 : 50" @node-click="nodeClick" @pointTypeChange="pointTypeChange"></PointTree>
+            <PointTree :height="flag ? 128 : 72" @node-click="nodeClick" @pointTypeChange="pointTypeChange"></PointTree>
         </div>
         <div>
             <TableHeader datePicker @selectChange="selectChange" v-if="fullscreen" ref="TableHeaderRef"
diff --git a/src/components/tree/device.vue b/src/components/tree/device.vue
index 662f5bb..7f57e3c 100644
--- a/src/components/tree/device.vue
+++ b/src/components/tree/device.vue
@@ -33,16 +33,28 @@
                         <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="18px"
-                    class="fold ml10 menu-collapse"
-                    style="cursor: pointer"
-                    v-if="props.canExpand"
-                /> -->
+            </div>
+            <div class="comm-tabs mb10">
+                <el-tooltip
+                    v-for="tab in commTabs"
+                    :key="tab.key"
+                    :content="tab.label"
+                    placement="top"
+                    :show-after="200"
+                >
+                    <button
+                        type="button"
+                        class="comm-tab"
+                        :class="[
+                            `is-${tab.key}`,
+                            { 'is-active': commFilter === tab.key }
+                        ]"
+                        @click="onCommFilter(tab.key)"
+                    >
+                        <Icon :name="tab.icon" :size="12" class="comm-tab__icon" />
+                        <span class="comm-tab__count">{{ tab.count }}</span>
+                    </button>
+                </el-tooltip>
             </div>
 
             <el-collapse
@@ -67,9 +79,10 @@
                             :filter-node-method="filterNode"
                             node-key="id"
                             :default-expand-all="false"
-                            v-bind="$attrs"
+                            v-bind="treeAttrs"
                             :data="zlDevList"
                             class="collapse-tree"
+                            @node-click="onTreeNodeClick"
                         >
                         <template #default="{ node, data: nodeData }">
                             <span class="custom-tree-node">
@@ -95,8 +108,9 @@
                             :filter-node-method="filterNode"
                             node-key="id"
                             :data="bxsDeviceData"
-                            v-bind="$attrs"
+                            v-bind="treeAttrs"
                             class="collapse-tree"
+                            @node-click="onTreeNodeClick"
                         >
                         <template #default="{ node, data: nodeData }">
                             <span class="custom-tree-node">
@@ -122,8 +136,9 @@
                             :filter-node-method="filterNode"
                             node-key="id"
                             :data="frontDeviceData"
-                            v-bind="$attrs"
+                            v-bind="treeAttrs"
                             class="collapse-tree"
+                            @node-click="onTreeNodeClick"
                         >
                         <template #default="{ node, data: nodeData }">
                             <span class="custom-tree-node">
@@ -147,10 +162,11 @@
                     highlight-current
                     :filter-node-method="filterNode"
                     node-key="id"
-                    v-bind="$attrs"
+                    v-bind="treeAttrs"
                     :data="props.data"
                     class="engineering-tree"
                     :default-expand-all="false"
+                    @node-click="onTreeNodeClick"
                 >
                     <template #default="{ node, data: nodeData }">
                         <span class="custom-tree-node">
@@ -172,7 +188,7 @@
 <script lang="ts" setup>
 import useCurrentInstance from '@/utils/useCurrentInstance'
 import { ElTree, type CollapseModelValue } from 'element-plus'
-import { ref, watch, onMounted, nextTick } from 'vue'
+import { ref, watch, onMounted, nextTick, computed, useAttrs } from 'vue'
 import { collectDeviceLeaves } from './govern/lineTreeUtils'
 import { collectDeviceApiLeaves } from './govern/deviceTreeUtils'
 
@@ -194,6 +210,8 @@ interface Props {
     leafMode?: 'line' | 'device'
 }
 
+type CommFilter = 'all' | 'normal' | 'abnormal'
+
 const props = withDefaults(defineProps<Props>(), {
     width: '280px',
     canExpand: true,
@@ -211,11 +229,20 @@ const options = [
 ]
 
 const { proxy } = useCurrentInstance()
+const attrs = useAttrs()
+
+/** 去掉 node-click，避免与本地处理重复/覆盖 */
+const treeAttrs = computed(() => {
+    const { onNodeClick: _onNodeClick, ...rest } = attrs as Record<string, any>
+    return rest
+})
+
 const menuCollapse = ref(false)
 const activeName = ref('0')
 const filterText = ref('')
 const process = ref('')
 const loading = ref(false)
+const commFilter = ref<CommFilter>('all')
 
 const defaultProps = { label: 'name', value: 'id' }
 
@@ -231,6 +258,67 @@ const treeRef4 = ref<InstanceType<typeof ElTree>>()
 
 defineExpose({ treeRef1, treeRef2, treeRef3, treeRef4 })
 
+const isCommNormal = (node: any) => Number(node?.comFlag) === 2
+
+/** 设备叶子：Platform 且无子节点，或 type=device */
+function isDeviceLeaf(data: any): boolean {
+    if (!data) return false
+    if (data.type === 'device') return true
+    if (data.icon === 'el-icon-Platform' && (!data.children || !data.children.length)) return true
+    if (data.level === 2 && data.icon === 'el-icon-Platform') return true
+    return false
+}
+
+function collectDevices(nodes: any[], out: any[] = []): any[] {
+    nodes?.forEach(n => {
+        if (isDeviceLeaf(n)) out.push(n)
+        if (n.children?.length) collectDevices(n.children, out)
+    })
+    return out
+}
+
+const deviceList = computed(() => {
+    if (treeType.value === '2') return collectDevices(props.data || [])
+    const collectLeaves = props.leafMode === 'device' ? collectDeviceApiLeaves : collectDeviceLeaves
+    const { govern, portable, monitor } = collectLeaves(
+        zlDevList.value,
+        bxsDeviceData.value,
+        frontDeviceData.value
+    )
+    return [...govern, ...portable, ...monitor]
+})
+
+const deviceStats = computed(() => {
+    const list = deviceList.value
+    const total = list.length
+    const normal = list.filter(isCommNormal).length
+    return { total, normal, abnormal: total - normal }
+})
+
+const commTabs = computed(() => [
+    { key: 'all' as const, label: '全部设备', count: deviceStats.value.total, icon: 'el-icon-Platform' },
+    { key: 'normal' as const, label: '通讯正常', count: deviceStats.value.normal, icon: 'el-icon-Platform' },
+    { key: 'abnormal' as const, label: '通讯异常', count: deviceStats.value.abnormal, icon: 'el-icon-Platform' }
+])
+
+function applyTreeFilter() {
+    nextTick(() => {
+        const val = filterText.value
+        if (treeType.value === '1') {
+            treeRef1.value?.filter(val)
+            treeRef2.value?.filter(val)
+            treeRef3.value?.filter(val)
+        } else {
+            treeRef4.value?.filter(val)
+        }
+    })
+}
+
+const onCommFilter = (key: CommFilter) => {
+    commFilter.value = key
+    applyTreeFilter()
+}
+
 function splitTreeData(val: any[]) {
     zlDeviceData.value = []
     bxsDeviceData.value = []
@@ -270,6 +358,17 @@ function getActiveTreeRef() {
     return treeRef3.value
 }
 
+function forwardNodeClick(data: any, node: any, ev?: any) {
+    const handler = (attrs as any).onNodeClick
+    if (!handler) return
+    if (Array.isArray(handler)) handler.forEach((fn: any) => fn?.(data, node, ev))
+    else handler(data, node, ev)
+}
+
+function onTreeNodeClick(data: any, node: any, ev?: any) {
+    forwardNodeClick(data, node, ev)
+}
+
 function resolveActiveName() {
     if (zlDeviceData.value.length) return '0'
     if (bxsDeviceData.value.length) return '1'
@@ -323,12 +422,13 @@ watch(
         if (treeType.value === '1') {
             nextTick(() => setActiveName())
         }
+        applyTreeFilter()
     },
     { immediate: true, deep: true }
 )
 
-watch(filterText, val => {
-    getActiveTreeRef()?.filter(val)
+watch(filterText, () => {
+    applyTreeFilter()
 })
 
 watch(process, () => {
@@ -336,6 +436,11 @@ watch(process, () => {
     if (activeName.value === '0') {
         nextTick(() => changeDevice(activeName.value))
     }
+    applyTreeFilter()
+})
+
+watch(treeType, () => {
+    applyTreeFilter()
 })
 
 const onMenuCollapse = () => {
@@ -343,10 +448,20 @@ const onMenuCollapse = () => {
     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 filterNode = (_value: string, data: any, node: any): boolean => {
+    if (filterText.value) {
+        if (!data.name) return false
+        if (!chooseNode(filterText.value, data, node)) return false
+    }
+
+    if (commFilter.value === 'all') return true
+
+    if (isDeviceLeaf(data)) {
+        const normal = isCommNormal(data)
+        return commFilter.value === 'normal' ? normal : !normal
+    }
+
+    return !!filterText.value
 }
 
 const chooseNode = (value: string, data: any, node: any): boolean => {
@@ -413,6 +528,115 @@ onMounted(() => {
         flex-shrink: 0;
     }
 
+    .comm-tabs {
+        display: flex;
+        align-items: center;
+        // justify-content: flex-end;
+        gap: 6px;
+        flex-shrink: 0;
+    }
+
+    .comm-tab {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        height: 22px;
+        padding: 0 4px 0 6px;
+        border-radius: 6px;
+        border: 1px solid #e5eaf3;
+        background: #fff;
+        color: #4e5969;
+        cursor: pointer;
+        transition: all 0.15s ease;
+        line-height: 1;
+
+        &__icon {
+            font-size: 12px;
+        }
+
+        &.is-all .comm-tab__icon,
+        &.is-all :deep(.comm-tab__icon),
+        &.is-all :deep(svg),
+        &.is-all :deep(i) {
+            color: var(--el-color-primary) !important;
+        }
+
+        &.is-normal .comm-tab__icon,
+        &.is-normal :deep(.comm-tab__icon),
+        &.is-normal :deep(svg),
+        &.is-normal :deep(i) {
+            color: #2ab914 !important;
+        }
+
+        &.is-abnormal .comm-tab__icon,
+        &.is-abnormal :deep(.comm-tab__icon),
+        &.is-abnormal :deep(svg),
+        &.is-abnormal :deep(i) {
+            color: #e26257 !important;
+        }
+
+        &__count {
+            min-width: 20px;
+            height: 16px;
+            padding: 0 4px;
+            border-radius: 4px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 11px;
+            font-weight: 600;
+            font-variant-numeric: tabular-nums;
+            color: #1d2129;
+        }
+
+        &:hover:not(.is-active) {
+            border-color: var(--el-color-primary-light-5);
+            color: var(--el-color-primary);
+        }
+
+        &.is-active {
+            color: #fff;
+
+            .comm-tab__icon,
+            :deep(.comm-tab__icon),
+            :deep(svg),
+            :deep(i) {
+                color: #fff !important;
+            }
+
+            .comm-tab__count {
+                background: #fff;
+            }
+        }
+
+        &.is-all.is-active {
+            background: var(--el-color-primary);
+            border-color: var(--el-color-primary);
+
+            .comm-tab__count {
+                color: var(--el-color-primary);
+            }
+        }
+
+        &.is-normal.is-active {
+            background: #2ab914;
+            border-color: #2ab914;
+
+            .comm-tab__count {
+                color: #2ab914;
+            }
+        }
+
+        &.is-abnormal.is-active {
+            background: #e26257;
+            border-color: #e26257;
+
+            .comm-tab__count {
+                color: #e26257;
+            }
+        }
+    }
+
     .device-collapse {
         flex: 1;
         min-height: 0;
diff --git a/src/components/tree/govern/deviceTreeUtils.ts b/src/components/tree/govern/deviceTreeUtils.ts
index 3859d38..3bfd746 100644
--- a/src/components/tree/govern/deviceTreeUtils.ts
+++ b/src/components/tree/govern/deviceTreeUtils.ts
@@ -13,7 +13,7 @@ export function decorateDeviceTree(
         if (type === '2') {
             applyMeta(item, { icon: 'el-icon-HomeFilled', color: primary() })
             item.children?.forEach((child: any) => {
-                applyMeta(child, { icon: 'el-icon-List', color: primary() })
+                applyMeta(child, { icon: 'el-icon-Menu', color: primary() })
                 child.children?.forEach((grand: any) => {
                     applyMeta(grand, {
                         icon: 'el-icon-Platform',
@@ -29,7 +29,7 @@ export function decorateDeviceTree(
             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() })
+                    applyMeta(l2, { icon: 'el-icon-Menu', color: primary() })
                     l2.children?.forEach((l3: any) => {
                         l3.pName = '治理设备'
                         applyMeta(l3, {
@@ -63,7 +63,7 @@ export function decorateDeviceTree(
             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() })
+                    applyMeta(l2, { icon: 'el-icon-Menu', color: primary() })
                     l2.children?.forEach((l3: any) => {
                         l3.pName = '监测设备'
                         applyMeta(l3, {
@@ -88,7 +88,7 @@ export function decorateDeviceInfoTree(list: any[], decorators: LineTreeDecorato
     list.forEach(item => {
         applyMeta(item, { icon: 'el-icon-HomeFilled', color: primary() })
         item.children?.forEach((l2: any) => {
-            applyMeta(l2, { icon: 'el-icon-List', color: primary() })
+            applyMeta(l2, { icon: 'el-icon-Menu', color: primary() })
             l2.children?.forEach((l3: any) => {
                 applyMeta(l3, {
                     icon: 'el-icon-Platform',
@@ -107,11 +107,11 @@ export function decorateCloudTree(root: any, decorators: LineTreeDecorators): an
     const { primary, statusColor, applyMeta } = decorators
     const leaves: any[] = []
 
-    applyMeta(root, { icon: 'el-icon-Menu', color: primary() })
+    applyMeta(root, { icon: 'el-icon-ChromeFilled', 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() })
+            applyMeta(l2, { icon: 'el-icon-Menu', color: primary() })
             l2.children?.forEach((l3: any) => {
                 applyMeta(l3, {
                     icon: 'el-icon-Platform',
@@ -140,7 +140,7 @@ export function decorateObjTree(data: any[], decorators: LineTreeDecorators): an
     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 })
+            applyMeta(l2, { icon: 'el-icon-Menu', color: primary(), level: 2 })
             l2.children?.forEach((l3: any) => {
                 applyMeta(l3, { icon: 'el-icon-Platform', color: primary(), level: 3 })
                 leaves.push(l3)
@@ -165,7 +165,7 @@ export function decorateLedgerLineTree(root: any, decorators: LineTreeDecorators
         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 })
+            applyMeta(l2, { icon: 'el-icon-Menu', color: primary(), level: 2 })
             if (!Array.isArray(l2.children)) l2.children = []
             l2.children.forEach((l3: any) => {
                 applyMeta(l3, {
diff --git a/src/components/tree/govern/lineTreeUtils.ts b/src/components/tree/govern/lineTreeUtils.ts
index 5318047..817e4b8 100644
--- a/src/components/tree/govern/lineTreeUtils.ts
+++ b/src/components/tree/govern/lineTreeUtils.ts
@@ -73,7 +73,7 @@ export function decorateLineTree(
         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 })
+                applyMeta(child, { icon: 'el-icon-Menu', color: primary(), ...parentDisabled })
                 child.children?.forEach((grand: any) => {
                     applyMeta(grand, {
                         icon: 'el-icon-Platform',
@@ -99,7 +99,7 @@ export function decorateLineTree(
             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 })
+                    applyMeta(l2, { icon: 'el-icon-Menu', color: primary(), level: 1, ...parentDisabled })
                     l2.children?.forEach((l3: any) => {
                         applyMeta(l3, {
                             icon: 'el-icon-Platform',
@@ -139,7 +139,7 @@ export function decorateLineTree(
             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 })
+                    applyMeta(l2, { icon: 'el-icon-Menu', color: primary(), level: 1, ...parentDisabled })
                     l2.children?.forEach((l3: any) => {
                         applyMeta(l3, {
                             icon: 'el-icon-Platform',
diff --git a/src/components/tree/point.vue b/src/components/tree/point.vue
index bdc5b71..f3d1659 100644
--- a/src/components/tree/point.vue
+++ b/src/components/tree/point.vue
@@ -1,5 +1,6 @@
 <!-- 设备监控使用折叠面板渲染多个tree -->
 <template>
+    
     <div :style="{ width: menuCollapse ? '40px' : props.width }" class="point-tree-root">
         <!-- <Icon
             v-show="menuCollapse"
@@ -11,7 +12,14 @@
             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
+            class="cn-tree"
+            :style="{
+                opacity: menuCollapse ? 0 : 1,
+                display: menuCollapse ? 'none' : '',
+                height: `calc(100vh - 125px - ${props.height || 0}px)`
+            }"
+        >
             <div class="tree-search mb10">
                 <el-input v-model.trim="filterText" placeholder="请输入内容" clearable>
                     <template #prepend>
@@ -24,15 +32,28 @@
                         <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="18px"
-                    class="fold ml10 menu-collapse"
-                    style="cursor: pointer"
-                    v-if="props.canExpand && route.path != '/admin/govern/reportCore/statistics/index'"
-                /> -->
+            </div>
+            <div class="comm-tabs mb10">
+                <el-tooltip
+                    v-for="tab in commTabs"
+                    :key="tab.key"
+                    :content="tab.label"
+                    placement="top"
+                    :show-after="200"
+                >
+                    <button
+                        type="button"
+                        class="comm-tab"
+                        :class="[
+                            `is-${tab.key}`,
+                            { 'is-active': commFilter === tab.key }
+                        ]"
+                        @click="onCommFilter(tab.key)"
+                    >
+                        <Icon :name="tab.icon" :size="12" class="comm-tab__icon" />
+                        <span class="comm-tab__count">{{ tab.count }}</span>
+                    </button>
+                </el-tooltip>
             </div>
 
             <el-collapse :accordion="true" v-model="activeName" class="device-collapse" @change="changeDevice"
@@ -45,8 +66,8 @@
                             <el-option label="正式投运" value="4" />
                         </el-select>
                         <el-tree ref="treeRef1" :props="defaultProps" highlight-current :filter-node-method="filterNode"
-                            node-key="id" v-bind="$attrs" :data="zlDevList" class="collapse-tree"
-                            :default-expand-all="false">
+                            node-key="id" v-bind="treeAttrs" :data="zlDevList" class="collapse-tree"
+                            :default-expand-all="false" @node-click="onTreeNodeClick">
                             <template #default="{ node, data: nodeData }">
                                 <span class="custom-tree-node">
                                     <Icon :name="nodeData.icon" style="font-size: 16px"
@@ -60,8 +81,8 @@
                 <el-collapse-item title="便携式设备" name="1" v-if="bxsDeviceData.length">
                     <div class="collapse-tree-panel">
                         <el-tree ref="treeRef2" :props="defaultProps" highlight-current :default-expand-all="false"
-                            :filter-node-method="filterNode" node-key="id" :data="bxsDeviceData" v-bind="$attrs"
-                            class="collapse-tree">
+                            :filter-node-method="filterNode" node-key="id" :data="bxsDeviceData" v-bind="treeAttrs"
+                            class="collapse-tree" @node-click="onTreeNodeClick">
                             <template #default="{ node, data: nodeData }">
                                 <span class="custom-tree-node">
                                     <Icon :name="nodeData.icon" style="font-size: 16px"
@@ -75,8 +96,8 @@
                 <el-collapse-item title="监测设备" name="2" v-if="yqfDeviceData.length">
                     <div class="collapse-tree-panel">
                         <el-tree ref="treeRef3" :props="defaultProps" highlight-current :default-expand-all="false"
-                            :filter-node-method="filterNode" node-key="id" :data="yqfDeviceData" v-bind="$attrs"
-                            class="collapse-tree">
+                            :filter-node-method="filterNode" node-key="id" :data="yqfDeviceData" v-bind="treeAttrs"
+                            class="collapse-tree" @node-click="onTreeNodeClick">
                             <template #default="{ node, data: nodeData }">
                                 <span class="custom-tree-node">
                                     <Icon :name="nodeData.icon" style="font-size: 16px"
@@ -90,8 +111,8 @@
             </el-collapse>
             <div v-if="treeType == '2'" class="engineering-tree-wrap" v-loading="loading">
                 <el-tree class="engineering-tree pt10 collapse-tree" ref="treeRef4" :props="defaultProps"
-                    highlight-current :filter-node-method="filterNode" node-key="id" v-bind="$attrs" :data="props.data"
-                    :default-expand-all="false">
+                    highlight-current :filter-node-method="filterNode" node-key="id" v-bind="treeAttrs" :data="props.data"
+                    :default-expand-all="false" @node-click="onTreeNodeClick">
                     <template #default="{ node, data: nodeData }">
                         <span class="custom-tree-node">
                             <Icon :name="nodeData.icon" style="font-size: 16px" :style="{ color: nodeData.color }"
@@ -108,9 +129,9 @@
 <script lang="ts" setup>
 import useCurrentInstance from '@/utils/useCurrentInstance'
 import { ElTree, type CollapseModelValue } from 'element-plus'
-import { ref, watch, nextTick } from 'vue'
+import { ref, watch, nextTick, computed, useAttrs } from 'vue'
 import { useRoute } from 'vue-router'
-import { collectDeviceLeaves } from './govern/lineTreeUtils'
+import { collectDeviceLeaves, isLineTreeLeaf } from './govern/lineTreeUtils'
 
 defineOptions({
     name: 'govern/point',
@@ -127,6 +148,8 @@ interface Props {
     height?: number
 }
 
+type CommFilter = 'all' | 'normal' | 'abnormal'
+
 const props = withDefaults(defineProps<Props>(), {
     width: '100%',
     canExpand: true,
@@ -137,6 +160,13 @@ const props = withDefaults(defineProps<Props>(), {
 
 const route = useRoute()
 const { proxy } = useCurrentInstance()
+const attrs = useAttrs()
+
+/** 去掉 node-click，避免与本地处理重复/覆盖 */
+const treeAttrs = computed(() => {
+    const { onNodeClick: _onNodeClick, ...rest } = attrs as Record<string, any>
+    return rest
+})
 
 const treeType = ref('2')
 const options = [
@@ -149,6 +179,7 @@ const activeName = ref('0')
 const filterText = ref('')
 const process = ref('')
 const loading = ref(false)
+const commFilter = ref<CommFilter>('all')
 
 const defaultProps = { label: 'name', value: 'id' }
 
@@ -164,6 +195,57 @@ const treeRef4 = ref<InstanceType<typeof ElTree>>()
 
 defineExpose({ treeRef1, treeRef2, treeRef3, treeRef4 })
 
+const isCommNormal = (node: any) => Number(node?.comFlag) === 2
+
+function collectPoints(nodes: any[], out: any[] = []): any[] {
+    nodes?.forEach(n => {
+        if (isLineTreeLeaf(n)) out.push(n)
+        if (n.children?.length) collectPoints(n.children, out)
+    })
+    return out
+}
+
+const pointList = computed(() => {
+    if (treeType.value === '2') return collectPoints(props.data || [])
+    const { govern, portable, monitor } = collectDeviceLeaves(
+        zlDevList.value,
+        bxsDeviceData.value,
+        yqfDeviceData.value
+    )
+    return [...govern, ...portable, ...monitor]
+})
+
+const pointStats = computed(() => {
+    const list = pointList.value
+    const total = list.length
+    const normal = list.filter(isCommNormal).length
+    return { total, normal, abnormal: total - normal }
+})
+
+const commTabs = computed(() => [
+    { key: 'all' as const, label: '全部监测点', count: pointStats.value.total, icon: 'local-监测点' },
+    { key: 'normal' as const, label: '通讯正常', count: pointStats.value.normal, icon: 'local-监测点' },
+    { key: 'abnormal' as const, label: '通讯异常', count: pointStats.value.abnormal, icon: 'local-监测点' }
+])
+
+function applyTreeFilter() {
+    nextTick(() => {
+        const val = filterText.value
+        if (treeType.value === '1') {
+            treeRef1.value?.filter(val)
+            treeRef2.value?.filter(val)
+            treeRef3.value?.filter(val)
+        } else {
+            treeRef4.value?.filter(val)
+        }
+    })
+}
+
+const onCommFilter = (key: CommFilter) => {
+    commFilter.value = key
+    applyTreeFilter()
+}
+
 function splitTreeData(val: any[]) {
     zlDeviceData.value = []
     bxsDeviceData.value = []
@@ -213,6 +295,17 @@ function getActiveTreeRef() {
     return treeRef3.value
 }
 
+function forwardNodeClick(data: any, node: any, ev?: any) {
+    const handler = (attrs as any).onNodeClick
+    if (!handler) return
+    if (Array.isArray(handler)) handler.forEach((fn: any) => fn?.(data, node, ev))
+    else handler(data, node, ev)
+}
+
+function onTreeNodeClick(data: any, node: any, ev?: any) {
+    forwardNodeClick(data, node, ev)
+}
+
 function resolveActiveName() {
     if (zlDeviceData.value.length) return '0'
     if (bxsDeviceData.value.length) return '1'
@@ -265,12 +358,13 @@ watch(
         if (treeType.value === '1') {
             nextTick(() => setActiveName())
         }
+        applyTreeFilter()
     },
     { immediate: true, deep: true }
 )
 
-watch(filterText, val => {
-    getActiveTreeRef()?.filter(val)
+watch(filterText, () => {
+    applyTreeFilter()
 })
 
 watch(process, () => {
@@ -278,6 +372,11 @@ watch(process, () => {
     if (activeName.value === '0') {
         nextTick(() => changeDevice(activeName.value))
     }
+    applyTreeFilter()
+})
+
+watch(treeType, () => {
+    applyTreeFilter()
 })
 
 const onMenuCollapse = () => {
@@ -285,10 +384,21 @@ const onMenuCollapse = () => {
     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 filterNode = (_value: string, data: any, node: any): boolean => {
+    if (filterText.value) {
+        if (!data.name) return false
+        if (!chooseNode(filterText.value, data, node)) return false
+    }
+
+    if (commFilter.value === 'all') return true
+
+    if (isLineTreeLeaf(data)) {
+        const normal = isCommNormal(data)
+        return commFilter.value === 'normal' ? normal : !normal
+    }
+
+    // 非叶子：交由子节点可见性决定是否展示父级
+    return !!filterText.value
 }
 
 const chooseNode = (value: string, data: any, node: any): boolean => {
@@ -335,9 +445,7 @@ const changeTreeType = (val: string) => {
     flex-direction: column;
     box-sizing: border-box;
     padding: 10px;
-    height: 100%;
     min-height: 0;
-    max-height: 100%;
     width: 280px;
     background: #fff;
     overflow: hidden;
@@ -356,6 +464,115 @@ const changeTreeType = (val: string) => {
         flex-shrink: 0;
     }
 
+    .comm-tabs {
+        display: flex;
+        align-items: center;
+        // justify-content: flex-end;
+        gap: 6px;
+        flex-shrink: 0;
+    }
+
+    .comm-tab {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        height: 22px;
+        padding: 0 4px 0 6px;
+        border-radius: 6px;
+        border: 1px solid #e5eaf3;
+        background: #fff;
+        color: #4e5969;
+        cursor: pointer;
+        transition: all 0.15s ease;
+        line-height: 1;
+
+        &__icon {
+            font-size: 12px;
+        }
+
+        &.is-all .comm-tab__icon,
+        &.is-all :deep(.comm-tab__icon),
+        &.is-all :deep(svg),
+        &.is-all :deep(i) {
+            color: var(--el-color-primary) !important;
+        }
+
+        &.is-normal .comm-tab__icon,
+        &.is-normal :deep(.comm-tab__icon),
+        &.is-normal :deep(svg),
+        &.is-normal :deep(i) {
+            color: #2ab914 !important;
+        }
+
+        &.is-abnormal .comm-tab__icon,
+        &.is-abnormal :deep(.comm-tab__icon),
+        &.is-abnormal :deep(svg),
+        &.is-abnormal :deep(i) {
+            color: #e26257 !important;
+        }
+
+        &__count {
+            min-width: 20px;
+            height: 16px;
+            padding: 0 4px;
+            border-radius: 4px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 11px;
+            font-weight: 600;
+            font-variant-numeric: tabular-nums;
+            color: #1d2129;
+        }
+
+        &:hover:not(.is-active) {
+            border-color: var(--el-color-primary-light-5);
+            color: var(--el-color-primary);
+        }
+
+        &.is-active {
+            color: #fff;
+
+            .comm-tab__icon,
+            :deep(.comm-tab__icon),
+            :deep(svg),
+            :deep(i) {
+                color: #fff !important;
+            }
+
+            .comm-tab__count {
+                background: #fff;
+            }
+        }
+
+        &.is-all.is-active {
+            background: var(--el-color-primary);
+            border-color: var(--el-color-primary);
+
+            .comm-tab__count {
+                color: var(--el-color-primary);
+            }
+        }
+
+        &.is-normal.is-active {
+            background: #2ab914;
+            border-color: #2ab914;
+
+            .comm-tab__count {
+                color: #2ab914;
+            }
+        }
+
+        &.is-abnormal.is-active {
+            background: #e26257;
+            border-color: #e26257;
+
+            .comm-tab__count {
+                color: #e26257;
+            }
+        }
+    }
+
     .device-collapse {
         flex: 1;
         min-height: 0;
diff --git a/src/utils/MQTT.ts b/src/utils/MQTT.ts
new file mode 100644
index 0000000..3b67942
--- /dev/null
+++ b/src/utils/MQTT.ts
@@ -0,0 +1,200 @@
+import mqtt, { type MqttClient, type IClientOptions } from 'mqtt'
+
+export type MqttMessageHandler = (topic: string, payload: any, raw: Uint8Array) => void
+
+export interface MqttConnectOptions {
+    /** 覆盖 localStorage 中的 MQTTURL */
+    url?: string
+    username?: string
+    password?: string
+    clientId?: string
+    qos?: 0 | 1 | 2
+    connectTimeout?: number
+}
+
+const DEFAULT_OPTIONS: IClientOptions = {
+    protocolId: 'MQTT',
+    qos: 2,
+    clean: true,
+    connectTimeout: 30 * 1000,
+    username: 't_user',
+    password: 'njcnpqs'
+}
+
+/** 解析项目内常见的 `{key:value,key2:value2}` MQTT 字符串消息 */
+export function parseMqttPayload(str: string) {
+    const content = String(str).replace(/^{|}$/g, '')
+    const result: Record<string, string | number> = {}
+    const regex = /([^,:]+):([^,]+)(?=,|$)/g
+    let match
+    while ((match = regex.exec(content)) !== null) {
+        const key = match[1].trim()
+        let value = match[2].trim()
+        // 去掉包裹引号 systemCrc:"3477" / version:"V1"
+        if (
+            (value.startsWith('"') && value.endsWith('"')) ||
+            (value.startsWith("'") && value.endsWith("'"))
+        ) {
+            value = value.slice(1, -1)
+        }
+        result[key] = isNaN(Number(value)) || value === '' ? value : Number(value)
+    }
+    return result
+}
+
+/** 解码 mqtt 二进制消息为对象（兼容 JSON 字符串 / 自定义 key:value 串） */
+export function decodeMqttMessage(message: Uint8Array) {
+    const text = new TextDecoder().decode(message)
+    let parsed: any = text
+    try {
+        parsed = JSON.parse(text)
+    } catch {
+        // 非 JSON，按原文字符串处理
+    }
+    // JSON.parse 后仍可能是内层字符串
+    if (typeof parsed === 'string') {
+        try {
+            const inner = JSON.parse(parsed)
+            parsed = typeof inner === 'string' ? parseMqttPayload(inner) : inner
+        } catch {
+            parsed = parseMqttPayload(parsed)
+        }
+    }
+    return parsed
+}
+
+/** 根据 nowStep / allStep 计算进度百分比 */
+export function calcMqttProgress(data: { nowStep?: number | string; allStep?: number | string }) {
+    const allStep = Number(data?.allStep) || 0
+    const nowStep = Number(data?.nowStep) || 0
+    if (!allStep) return 0
+    let percentage = parseInt(String((nowStep / allStep) * 100), 10)
+    if (percentage > 100) percentage = 100
+    if (percentage < 0) percentage = 0
+    return percentage
+}
+
+export default class MqttService {
+    private client: MqttClient | null = null
+    private messageHandler: MqttMessageHandler | null = null
+    private subscribedTopics = new Set<string>()
+
+    get connected() {
+        return !!this.client?.connected
+    }
+
+    get instance() {
+        return this.client
+    }
+
+    /** 连接 MQTT，默认读取 localStorage.MQTTURL */
+    connect(options: MqttConnectOptions = {}) {
+        const url = options.url || window.localStorage.getItem('MQTTURL')
+        if (!url) {
+            throw new Error('未配置 MQTT 地址')
+        }
+
+        if (this.client?.connected) {
+            return this.client
+        }
+
+        // 已有未连上的实例则先关掉
+        this.disconnect()
+
+        const clientOptions: IClientOptions = {
+            ...DEFAULT_OPTIONS,
+            clientId: options.clientId || `mqttjs${Math.random()}`,
+            username: options.username ?? DEFAULT_OPTIONS.username,
+            password: options.password ?? DEFAULT_OPTIONS.password,
+            connectTimeout: options.connectTimeout ?? DEFAULT_OPTIONS.connectTimeout,
+            qos: options.qos ?? DEFAULT_OPTIONS.qos
+        }
+
+        this.client = mqtt.connect(url, clientOptions)
+
+        this.client.on('message', (topic, message) => {
+            if (!this.messageHandler) return
+            const payload = decodeMqttMessage(message)
+            this.messageHandler(topic, payload, message)
+        })
+
+        this.client.on('error', error => {
+            console.log('mqtt连接失败...', error)
+            this.disconnect()
+        })
+
+        this.client.on('close', () => {
+            console.log('mqtt客户端已断开连接.....')
+        })
+
+        return this.client
+    }
+
+    /** 连接成功后订阅；若尚未连接则等 connect 事件 */
+    subscribe(topic: string | string[], qos: 0 | 1 | 2 = 2) {
+        const topics = Array.isArray(topic) ? topic : [topic]
+        topics.forEach(t => this.subscribedTopics.add(t))
+
+        const doSubscribe = () => {
+            if (!this.client) return
+            topics.forEach(t => {
+                this.client!.subscribe(t, { qos })
+                console.log('mqtt已订阅:', t)
+            })
+        }
+
+        if (this.client?.connected) {
+            doSubscribe()
+            return
+        }
+
+        this.client?.once('connect', () => {
+            console.log('mqtt客户端已连接....')
+            doSubscribe()
+        })
+    }
+
+    /** 设置消息回调（覆盖式） */
+    onMessage(handler: MqttMessageHandler) {
+        this.messageHandler = handler
+    }
+
+    /** 取消订阅 */
+    unsubscribe(topic?: string | string[]) {
+        if (!this.client) return
+        const topics = topic
+            ? Array.isArray(topic)
+                ? topic
+                : [topic]
+            : [...this.subscribedTopics]
+        topics.forEach(t => {
+            this.client?.unsubscribe(t)
+            this.subscribedTopics.delete(t)
+        })
+    }
+
+    /** 断开并清理 */
+    disconnect() {
+        if (this.client) {
+            try {
+                this.client.end(true)
+            } catch (e) {}
+            this.client = null
+        }
+        this.subscribedTopics.clear()
+        this.messageHandler = null
+    }
+}
+
+/** 快捷创建：连接并订阅指定 topic */
+export function createMqttClient(
+    topic: string | string[],
+    onMessage: MqttMessageHandler,
+    options?: MqttConnectOptions
+) {
+    const service = new MqttService()
+    service.connect(options)
+    service.onMessage(onMessage)
+    service.subscribe(topic)
+    return service
+}
diff --git a/src/views/govern/alarm/steadyStateEvent/index.vue b/src/views/govern/alarm/steadyStateEvent/index.vue
index 5b3b05a..89635e1 100644
--- a/src/views/govern/alarm/steadyStateEvent/index.vue
+++ b/src/views/govern/alarm/steadyStateEvent/index.vue
@@ -320,7 +320,7 @@ getCldTree().then(res => {
         item.icon = 'el-icon-HomeFilled'
         item.color = config.getColorVal('elementUiPrimary')
         item.children.forEach((item: any) => {
-            item.icon = 'el-icon-List'
+            item.icon = 'el-icon-Menu'
             item.color = config.getColorVal('elementUiPrimary')
             item.children.forEach((item2: any) => {
                 item2.icon = 'el-icon-Platform'
diff --git a/src/views/govern/analyze/DVR/index.vue b/src/views/govern/analyze/DVR/index.vue
index e6ba821..3c765f9 100644
--- a/src/views/govern/analyze/DVR/index.vue
+++ b/src/views/govern/analyze/DVR/index.vue
@@ -30,7 +30,7 @@
                 </TableHeader>
                 <Table v-if="view" ref="tableRef"></Table>
             </div>
-            <el-empty v-else description="请选择设备" class="analyze-dvr-right" />
+            <el-empty v-else description="请选择数据" class="analyze-dvr-right" />
 
             <MultiCondition v-model:visible="filterVisible" :params="tableStore.table.params" ref="multiConditionRef"
                 @confirm="onFilterConfirm" />
diff --git a/src/views/govern/device/control/index.vue b/src/views/govern/device/control/index.vue
index 8b202c7..9e9f801 100644
--- a/src/views/govern/device/control/index.vue
+++ b/src/views/govern/device/control/index.vue
@@ -410,7 +410,6 @@ 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'
 })
diff --git a/src/views/govern/device/manage/index.vue b/src/views/govern/device/manage/index.vue
index 3dbcc2f..792adac 100644
--- a/src/views/govern/device/manage/index.vue
+++ b/src/views/govern/device/manage/index.vue
@@ -75,12 +75,12 @@
                             style="width: 100%"
                         >
                             <vxe-column type="seq" title="序号" width="80"></vxe-column>
-                            <vxe-column field="name" title="指标名称"></vxe-column>
-                            <vxe-column field="phasic" title="相别"></vxe-column>
-                            <vxe-column field="type" title="数据类型"></vxe-column>
-                            <vxe-column field="unit" title="单位"></vxe-column>
-                            <vxe-column field="startTimes" title="开始次数"></vxe-column>
-                            <vxe-column field="endTimes" title="结束次数"></vxe-column>
+                            <vxe-column field="name" title="指标名称" minWidth="200"></vxe-column>
+                            <vxe-column field="phasic" title="相别" minWidth="150"></vxe-column>
+                            <vxe-column field="type" title="数据类型" minWidth="100"></vxe-column>
+                            <vxe-column field="unit" title="单位" minWidth="100"></vxe-column>
+                            <vxe-column field="startTimes" title="开始次数"minWidth="100"></vxe-column>
+                            <vxe-column field="endTimes" title="结束次数" minWidth="100"></vxe-column>
                         </vxe-table>
                     </div>
                 </el-tabs>
diff --git a/src/views/govern/device/planData/components/treeTransfers.vue b/src/views/govern/device/planData/components/treeTransfers.vue
index 4b6b96e..ea28e68 100644
--- a/src/views/govern/device/planData/components/treeTransfers.vue
+++ b/src/views/govern/device/planData/components/treeTransfers.vue
@@ -86,7 +86,7 @@ export default {
                         // item2.color = config.getColorVal('elementUiPrimary')
                         item2.color = item.runStatus == 2 ? '#2ab914' : "#e26257"
                         item2.children.forEach(item3 => {
-                            item3.icon = 'el-icon-List'
+                            item3.icon = 'el-icon-Menu'
                             item3.color = config.getColorVal('elementUiPrimary')
                             // if (item3.runStatus === 1) {
                             //     item3.color = '#e26257 !important'
@@ -110,7 +110,7 @@ export default {
                         // item2.color = config.getColorVal('elementUiPrimary')
                         item2.color = item.runStatus == 2 ? '#2ab914' : "#e26257"
                         item2.children.forEach(item3 => {
-                            item3.icon = 'el-icon-List'
+                            item3.icon = 'el-icon-Menu'
                             item3.color = config.getColorVal('elementUiPrimary')
                             // if (item3.runStatus === 1) {
                             //     item3.color = '#e26257 !important'
diff --git a/src/views/govern/log/components/governance.vue b/src/views/govern/log/components/governance.vue
index 98f46c5..a56d8a1 100644
--- a/src/views/govern/log/components/governance.vue
+++ b/src/views/govern/log/components/governance.vue
@@ -93,7 +93,7 @@ const tableStore = new TableStore({
             }
         },
         { title: '异常时间', field: 'evtTime', align: 'center', sortable: true },
-        { title: '设备名称', field: 'ndid', align: 'center' },
+        { title: '网络设备ID', field: 'ndid', align: 'center' },
         {
             title: '告警代码',
             field: 'code',
diff --git a/src/views/govern/manage/basic/popupVersion.vue b/src/views/govern/manage/basic/popupVersion.vue
index 314bfde..7c7a151 100644
--- a/src/views/govern/manage/basic/popupVersion.vue
+++ b/src/views/govern/manage/basic/popupVersion.vue
@@ -1,12 +1,21 @@
 <template>
-    <el-dialog draggable 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" 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">
@@ -14,43 +23,94 @@
                     <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="crc">
-                <el-input maxlength="32" show-word-limit    v-model.trim="form.crc" autocomplete="off"
-                    placeholder="请输入CRC校验"></el-input>
+                <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  show-word-limit  maxlength="300" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" 
-                    v-model.trim="form.description" autocomplete="off" placeholder="请输入描述"></el-input>
+                <el-input
+                    show-word-limit
+                    maxlength="300"
+                    :autosize="{ minRows: 2, maxRows: 4 }"
+                    type="textarea"
+                    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,.zip,.tar"
+                    :auto-upload="false"
+                    :on-change="fileChange"
+                    :on-exceed="fileExceed"
+                    :on-remove="fileRemove"
+                    :file-list="fileList"
+                >
                     <el-button type="primary">点击上传</el-button>
+                    <template #tip>
+                        <div class="el-upload__tip">支持 .bin 或压缩包（.zip / .tar）</div>
+                    </template>
                 </el-upload>
             </el-form-item>
         </el-form>
@@ -86,7 +146,7 @@ const form = reactive<any>({
     devTypeName: null,
     versionAgreement: null,
     versionNo: null,
-    versionType: null,
+    versionType: '通用',
     crc: null,
     description: null,
     versionDate: null,
@@ -170,11 +230,13 @@ const fileExceed = (e: any) => {
     ElMessage.error('只能上传一个文件')
 }
 // 处理上传前检查
+const ALLOWED_EXTS = ['.bin', '.zip', '.tar']
 const beforeUpload = (file: any) => {
-    const isWord = file.name.endsWith('.bin')
+    const name = (file?.name || '').toLowerCase()
+    const ok = ALLOWED_EXTS.some(ext => name.endsWith(ext))
 
-    if (!isWord) {
-        ElMessage.error('请上传(.bin)格式文件!')
+    if (!ok) {
+        ElMessage.error('请上传 .bin 或压缩包文件（.zip / .tar）!')
         fileList.value = []
         return false
     }
@@ -212,15 +274,16 @@ const open = async (text: string, data?: anyObj) => {
         for (let key in form) {
             form[key] = null
         }
+        form.versionType = '通用'
+        form.file = []
+        fileList.value = []
     }
-
 }
 const submit = () => {
     // console.log(formRef)
     formRef.value.validate(async (valid: boolean) => {
         // console.log(valid)
         if (valid) {
-
             if (fileList.value.length == 0) {
                 ElMessage.warning('请上传升级文件')
                 return
@@ -231,15 +294,18 @@ const submit = () => {
                 submitForm.append(key, form[key])
             }
             if (form.id) {
-                await auditEdData(form)
+                await auditEdData(form).finally(() => {
+                    loading.value = false
+                })
             } else {
-                await addEdData(form)
+                await addEdData(form).finally(() => {
+                    loading.value = false
+                })
             }
             ElMessage.success('操作成功')
             tableStore.index()
             dialogVisible.value = false
             emit('closePopup')
-            loading.value = false
         }
     })
 }
diff --git a/src/views/govern/manage/realTime/index.vue b/src/views/govern/manage/operationalguidance/comp/realTime.vue
similarity index 56%
rename from src/views/govern/manage/realTime/index.vue
rename to src/views/govern/manage/operationalguidance/comp/realTime.vue
index 440bef1..dadca39 100644
--- a/src/views/govern/manage/realTime/index.vue
+++ b/src/views/govern/manage/operationalguidance/comp/realTime.vue
@@ -1,263 +1,248 @@
-<template>
-    <div class="default-main manage-realTime" :style="{ height: pageHeight.height }">
-        <DeviceTree @node-click="nodeClick" @init="nodeClick" @deviceTypeChange=""></DeviceTree>
-        <div class="manage-realTime-right">
-            <div class="time-container">
-                <div>
-                    <div>系统时间：{{ realTime }}</div>
-                    <div>终端时间：{{ deviceTime }}</div>
-                </div>
-                <el-button icon="el-icon-RefreshLeft" type="primary" @click="synchronizeTime">对时</el-button>
-            </div>
-            <div :style="echartHeight" class="pl10 pr10">
-                <MyEchart :options="echartsData" />
-            </div>
-            <div class="pl10 pr10">
-                <el-table :data="tableData" border stripe :show-header="false" class="custom-table">
-                    <el-table-column prop="label1" />
-                    <el-table-column prop="label2" />
-                    <el-table-column prop="value1" />
-                    <el-table-column prop="label3" />
-                    <el-table-column prop="value2" />
-                    <el-table-column prop="label4" />
-                    <el-table-column prop="value3" />
-                </el-table>
-            </div>
-        </div>
-    </div>
-</template>
-<script setup lang="ts">
-import { ref, reactive } from 'vue'
-import { mainHeight } from '@/utils/layout'
-import DeviceTree from '@/components/tree/govern/deviceTree.vue'
-import MyEchart from '@/components/echarts/MyEchart.vue'
-import { formatToDateTime } from '@/utils/dateUtil'
-defineOptions({
-    name: 'manage/realTime'
-})
-
-//页面属性
-const pageHeight = mainHeight(20)
-const echartHeight = mainHeight(180)
-const realTime = ref<string>('')
-const deviceTime = ref<string>('')
-const timer = ref<any>(null)
-const echartsData = ref<any>({
-    title: {
-        text: '终端性能'
-    },
-    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
-    },
-
-    legend: {
-        bottom: 0,
-        data: ['CPU1使用率', 'CPU2使用率', '内存使用率', '磁盘使用率']
-    },
-    xAxis: {
-        type: 'time',
-        name: '时间',
-        axisLabel: {
-            formatter: {
-                day: '{MM}-{dd}',
-                month: '{MM}',
-                year: '{yyyy}'
-            }
-        }
-    },
-    yAxis: {
-        name: '%',
-        type: 'value',
-        min: 0,
-        max: 100
-    },
-    series: [
-        {
-            name: 'CPU1使用率',
-            type: 'line',
-            showSymbol: false,
-            smooth: true,
-            data: [
-                ['2025-01-01 08:00:00', 10],
-                ['2025-01-01 09:00:00', 10],
-                ['2025-01-01 010:00:00', 10]
-            ]
-        },
-        {
-            name: 'CPU2使用率',
-            type: 'line',
-            showSymbol: false,
-            smooth: true,
-            data: [
-                ['2025-01-01 08:00:00', 11],
-                ['2025-01-01 09:00:00', 11],
-                ['2025-01-01 010:00:00', 11]
-            ]
-        },
-        {
-            name: '内存使用率',
-            type: 'line',
-            showSymbol: false,
-            smooth: true,
-            data: [
-                ['2025-01-01 08:00:00', 12],
-                ['2025-01-01 09:00:00', 12],
-                ['2025-01-01 010:00:00', 12]
-            ]
-        },
-        {
-            name: '磁盘使用率',
-            type: 'line',
-            showSymbol: false,
-            smooth: true,
-            data: [
-                ['2025-01-01 08:00:00', 13],
-                ['2025-01-01 09:00:00', 13],
-                ['2025-01-01 010:00:00', 13]
-            ]
-        }
-    ]
-})
-
-const tableData = ref([
-    {
-        label1: 'cpu1负载(%)',
-        label2: '使用:',
-        value1: '43',
-        label3: '剩余:',
-        value2: '57',
-        label4: '',
-        value3: ''
-    },
-    {
-        label1: 'cpu2负载(%)',
-        label2: '使用:',
-        value1: '/',
-        label3: '剩余:',
-        value2: '/',
-        label4: '',
-        value3: ''
-    },
-    {
-        label1: '终端内存详情(MB)',
-        label2: '内存总量:',
-        value1: '489',
-        label3: '已使用:',
-        value2: '143',
-        label4: '未使用:',
-        value3: '346.00'
-    },
-    {
-        label1: '主存储器详情(GB)',
-        label2: '主存储器总量:',
-        value1: '6.44',
-        label3: '已使用:',
-        value2: '6.03',
-        label4: '未使用:',
-        value3: '0.41'
-    },
-    {
-        label1: '其余信息',
-        label2: '最后对时对标:',
-        value1: '1970-01-01 08:00:00',
-        label3: '信号强度(dBm):',
-        value2: '-',
-        label4: '',
-        value3: ''
-    }
-])
-
-const nodeClick = async (e: anyObj) => {
-    console.log('点击设备树节点')
-}
-
-const handleClose = () => {
-    console.log('close')
-}
-
-const synchronizeTime = async () => {
-    console.log('对时')
-}
-onMounted(() => {
-    timer.value = setInterval(() => {
-        realTime.value = formatToDateTime(new Date())
-    }, 1000)
-})
-// 在组件卸载时清除定时器
-onUnmounted(() => {
-    if (timer.value) {
-        clearInterval(timer.value)
-        timer.value = null
-    }
-})
-</script>
-<style scoped lang="scss">
-.manage-realTime {
-    display: flex;
-
-    &-right {
-        height: 100%;
-        overflow: hidden;
-        flex: 1;
-        padding: 10px 10px 10px 0;
-        display: flex;
-        flex-direction: column;
-        border: 1px solid #ebeef5; // 加个边框方便查看效果
-
-        .time-container {
-            display: flex;
-            justify-content: flex-end; // 让内容靠右
-            align-items: center; // 让内容垂直居中（避免高度不一致时偏移）
-
-            * {
-                margin-right: 15px;
-            }
-
-            .el-button * {
-                margin-right: 0;
-            }
-        }
-
-        :deep(.el-table__cell) {
-            text-align: center;
-        }
-
-        /* 1. 加深表格边框线条 */
-        :deep(.custom-table.el-table) {
-            border: 1px solid #dcdfe6;
-            width: auto;
-        }
-
-        :deep(.custom-table .el-table__cell) {
-            border: 0.5px solid #dcdfe6;
-        }
-
-        /* 2. 第 1、2、4、6 列显示深色背景 */
-        :deep(.custom-table .el-table__row .el-table__cell:nth-child(1)) {
-            background-color: #f5f7fa;
-            font-weight: bold;
-        }
-
-        /* 第 3、5、7 列显示白色背景 */
-        :deep(.custom-table .el-table__row .el-table__cell:nth-child(3)),
-        :deep(.custom-table .el-table__row .el-table__cell:nth-child(5)),
-        :deep(.custom-table .el-table__row .el-table__cell:nth-child(7)) {
-            // background-color: #fff;
-        }
-    }
-}
-</style>
+<template>
+    <div class="og-realtime">
+        <div class="time-container">
+            <div>
+                <div>系统时间：{{ realTime }}</div>
+                <div>终端时间：{{ deviceTime }}</div>
+            </div>
+            <el-button icon="el-icon-RefreshLeft" type="primary" @click="synchronizeTime">对时</el-button>
+        </div>
+        <div :style="echartHeight" class="pl10 pr10">
+            <MyEchart :options="echartsData" />
+        </div>
+        <div class="pl10 pr10">
+            <el-table :data="tableData" border stripe :show-header="false" size="small" class="custom-table">
+                <el-table-column prop="label1" />
+                <el-table-column prop="label2" />
+                <el-table-column prop="value1" />
+                <el-table-column prop="label3" />
+                <el-table-column prop="value2" />
+                <el-table-column prop="label4" />
+                <el-table-column prop="value3" />
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, watch } from 'vue'
+import { mainHeight } from '@/utils/layout'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import { formatToDateTime } from '@/utils/dateUtil'
+
+defineOptions({
+    name: 'operationalguidance/realTime'
+})
+
+const props = defineProps<{
+    device?: anyObj
+}>()
+
+const echartHeight = mainHeight(185)
+const realTime = ref<string>('')
+const deviceTime = ref<string>('')
+const timer = ref<ReturnType<typeof setInterval> | null>(null)
+
+const echartsData = ref<any>({
+    title: {
+        text: '设备性能'
+    },
+    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
+    },
+    legend: {
+        bottom: 0,
+        data: ['CPU1使用率', 'CPU2使用率', '内存使用率', '磁盘使用率']
+    },
+    xAxis: {
+        type: 'time',
+        name: '时间',
+        axisLabel: {
+            formatter: {
+                day: '{MM}-{dd}',
+                month: '{MM}',
+                year: '{yyyy}'
+            }
+        }
+    },
+    yAxis: {
+        name: '%',
+        type: 'value',
+        min: 0,
+        max: 100
+    },
+    series: [
+        {
+            name: 'CPU1使用率',
+            type: 'line',
+            showSymbol: false,
+            smooth: true,
+            data: [
+                ['2025-01-01 08:00:00', 10],
+                ['2025-01-01 09:00:00', 10],
+                ['2025-01-01 010:00:00', 10]
+            ]
+        },
+        {
+            name: 'CPU2使用率',
+            type: 'line',
+            showSymbol: false,
+            smooth: true,
+            data: [
+                ['2025-01-01 08:00:00', 11],
+                ['2025-01-01 09:00:00', 11],
+                ['2025-01-01 010:00:00', 11]
+            ]
+        },
+        {
+            name: '内存使用率',
+            type: 'line',
+            showSymbol: false,
+            smooth: true,
+            data: [
+                ['2025-01-01 08:00:00', 12],
+                ['2025-01-01 09:00:00', 12],
+                ['2025-01-01 010:00:00', 12]
+            ]
+        },
+        {
+            name: '磁盘使用率',
+            type: 'line',
+            showSymbol: false,
+            smooth: true,
+            data: [
+                ['2025-01-01 08:00:00', 13],
+                ['2025-01-01 09:00:00', 13],
+                ['2025-01-01 010:00:00', 13]
+            ]
+        }
+    ]
+})
+
+const tableData = ref([
+    {
+        label1: 'cpu1负载(%)',
+        label2: '使用:',
+        value1: '43',
+        label3: '剩余:',
+        value2: '57',
+        label4: '',
+        value3: ''
+    },
+    {
+        label1: 'cpu2负载(%)',
+        label2: '使用:',
+        value1: '/',
+        label3: '剩余:',
+        value2: '/',
+        label4: '',
+        value3: ''
+    },
+    {
+        label1: '终端内存详情(MB)',
+        label2: '内存总量:',
+        value1: '489',
+        label3: '已使用:',
+        value2: '143',
+        label4: '未使用:',
+        value3: '346.00'
+    },
+    {
+        label1: '主存储器详情(GB)',
+        label2: '主存储器总量:',
+        value1: '6.44',
+        label3: '已使用:',
+        value2: '6.03',
+        label4: '未使用:',
+        value3: '0.41'
+    },
+    {
+        label1: '其余信息',
+        label2: '最后对时对标:',
+        value1: '1970-01-01 08:00:00',
+        label3: '信号强度(dBm):',
+        value2: '-',
+        label4: '',
+        value3: ''
+    }
+])
+
+watch(
+    () => props.device,
+    () => {
+        // 设备切换时预留刷新入口
+    }
+)
+
+const synchronizeTime = async () => {
+    console.log('对时')
+}
+
+onMounted(() => {
+    timer.value = setInterval(() => {
+        realTime.value = formatToDateTime(new Date())
+    }, 1000)
+})
+
+onUnmounted(() => {
+    if (timer.value) {
+        clearInterval(timer.value)
+        timer.value = null
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.og-realtime {
+    height: 100%;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+
+    .time-container {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+
+        * {
+            margin-right: 15px;
+        }
+
+        .el-button * {
+            margin-right: 0;
+        }
+    }
+
+    :deep(.el-table__cell) {
+        text-align: center;
+    }
+
+    :deep(.custom-table.el-table) {
+        border: 1px solid #dcdfe6;
+        width: auto;
+    }
+
+    :deep(.custom-table .el-table__cell) {
+        border: 0.5px solid #dcdfe6;
+    }
+
+    :deep(.custom-table .el-table__row .el-table__cell:nth-child(1)) {
+        background-color: #f5f7fa;
+        font-weight: bold;
+    }
+}
+</style>
diff --git a/src/views/govern/manage/operationalguidance/comp/settingManage.vue b/src/views/govern/manage/operationalguidance/comp/settingManage.vue
new file mode 100644
index 0000000..aa15f87
--- /dev/null
+++ b/src/views/govern/manage/operationalguidance/comp/settingManage.vue
@@ -0,0 +1,158 @@
+<template>
+    <div class="og-setting">
+        <div class="og-setting__toolbar">
+            <el-button type="primary" icon="el-icon-Tickets" @click="readExternal">读取外部定值</el-button>
+            <el-button type="primary" icon="el-icon-Edit" @click="modifySetting">修改定值</el-button>
+        </div>
+
+        <el-tabs v-model="activeTab" type="border-card" class="og-setting__tabs" @tab-change="onTabChange">
+            <el-tab-pane
+                v-for="tab in tabs"
+                :key="tab.name"
+                :label="tab.label"
+                :name="tab.name"
+            >
+                <div class="og-setting__table" v-loading="loading">
+                    <vxe-table
+                        v-bind="defaultAttribute"
+                        :data="tableMap[tab.name]"
+                        height="auto"
+                      
+                    >
+                        <vxe-column type="seq" title="序号" width="90" sortable />
+                        <vxe-column field="name" title="定值名称" min-width="160" />
+                        <vxe-column field="value" title="当前定值" min-width="140" />
+                        <vxe-column field="range" title="定值范围" min-width="160" />
+                    </vxe-table>
+                </div>
+            </el-tab-pane>
+        </el-tabs>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, watch } from 'vue'
+import { ElMessage } from 'element-plus'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+
+defineOptions({
+    name: 'operationalguidance/settingManage'
+})
+
+const props = defineProps<{
+    device?: anyObj
+}>()
+
+type TabName = 'basic' | 'harmonicCurrent' | 'harmonicVoltage' | 'interharmonic'
+
+const tabs: { label: string; name: TabName }[] = [
+    { label: '基本定值', name: 'basic' },
+    { label: '谐波电流', name: 'harmonicCurrent' },
+    { label: '谐波电压', name: 'harmonicVoltage' },
+    { label: '间谐波定值', name: 'interharmonic' }
+]
+
+const activeTab = ref<TabName>('basic')
+const loading = ref(false)
+const tableMap = reactive<Record<TabName, anyObj[]>>({
+    basic: [],
+    harmonicCurrent: [],
+    harmonicVoltage: [],
+    interharmonic: []
+})
+
+const loadData = async (tab: TabName = activeTab.value) => {
+    if (!props.device?.id) {
+        tableMap[tab] = []
+        return
+    }
+    loading.value = true
+    try {
+        // TODO: 按设备 + 定值类型请求接口
+        tableMap[tab] = []
+    } finally {
+        loading.value = false
+    }
+}
+
+const onTabChange = (name: string | number) => {
+    loadData(name as TabName)
+}
+
+const readExternal = () => {
+    if (!props.device?.id) {
+        ElMessage.warning('请先选择设备')
+        return
+    }
+    ElMessage.info('读取外部定值')
+    loadData()
+}
+
+const modifySetting = () => {
+    if (!props.device?.id) {
+        ElMessage.warning('请先选择设备')
+        return
+    }
+    ElMessage.info('修改定值')
+}
+
+watch(
+    () => props.device,
+    () => loadData(),
+    { immediate: true, deep: true }
+)
+</script>
+
+<style scoped lang="scss">
+.og-setting {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    padding: 0 10px;
+    box-sizing: border-box;
+
+    &__toolbar {
+        display: flex;
+        justify-content: flex-end;
+        gap: 8px;
+        margin-bottom: 10px;
+        flex-shrink: 0;
+    }
+
+    &__tabs {
+        flex: 1;
+        min-height: 0;
+        display: flex;
+        flex-direction: column;
+
+        :deep(.el-tabs__header) {
+            margin: 0;
+            flex-shrink: 0;
+        }
+
+        :deep(.el-tabs__content) {
+            flex: 1;
+            min-height: 0;
+            padding: 0;
+        }
+
+        :deep(.el-tab-pane) {
+            height: 100%;
+        }
+
+        :deep(.el-tabs__item) {
+            height: 36px;
+            line-height: 36px;
+        }
+    }
+
+    &__table {
+        height: 100%;
+        min-height: 0;
+        padding:0 10px;
+        box-sizing: border-box;
+    }
+
+}
+</style>
diff --git a/src/views/govern/manage/operationalguidance/index.vue b/src/views/govern/manage/operationalguidance/index.vue
new file mode 100644
index 0000000..51c2877
--- /dev/null
+++ b/src/views/govern/manage/operationalguidance/index.vue
@@ -0,0 +1,72 @@
+<template>
+    <div class="default-main manage-operationalguidance" :style="{ height: pageHeight.height }">
+        <DeviceTree @init="nodeClick" @deviceTypeChange="onDeviceTypeChange" />
+        <div class="manage-operationalguidance-right">
+            <el-tabs v-model="activeTab" type="border-card" class="og-tabs">
+                <el-tab-pane label="实时状态" name="realTime" lazy>
+                    <RealTime :device="currentDevice" />
+                </el-tab-pane>
+                <el-tab-pane label="定值管理" name="setting" lazy>
+                    <SettingManage :device="currentDevice" />
+                </el-tab-pane>
+            </el-tabs>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { mainHeight } from '@/utils/layout'
+import DeviceTree from '@/components/tree/govern/deviceTree.vue'
+import RealTime from './comp/realTime.vue'
+import SettingManage from './comp/settingManage.vue'
+
+defineOptions({
+    name: 'operationalguidance'
+})
+
+const pageHeight = mainHeight(20)
+const activeTab = ref('realTime')
+const currentDevice = ref<anyObj>()
+
+const nodeClick = (e?: anyObj) => {
+    if (e) currentDevice.value = e
+}
+
+const onDeviceTypeChange = (_type: any, device?: anyObj) => {
+    if (device) currentDevice.value = device
+}
+</script>
+
+<style scoped lang="scss">
+.manage-operationalguidance {
+    display: flex;
+
+    &-right {
+        height: 100%;
+        overflow: hidden;
+        flex: 1;
+        padding: 10px 10px 10px 0;
+        display: flex;
+        flex-direction: column;
+        border: 1px solid #ebeef5;
+        min-width: 0;
+    }
+
+    .og-tabs {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+
+        :deep(.el-tabs__content) {
+            flex: 1;
+            overflow: hidden;
+            padding: 10px 0;
+        }
+
+        :deep(.el-tab-pane) {
+            height: 100%;
+        }
+    }
+}
+</style>
diff --git a/src/views/govern/manage/programVersion/comp/upgrade.vue b/src/views/govern/manage/programVersion/comp/upgrade.vue
index 623ff62..35b9262 100644
--- a/src/views/govern/manage/programVersion/comp/upgrade.vue
+++ b/src/views/govern/manage/programVersion/comp/upgrade.vue
@@ -1,114 +1,323 @@
-<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 maxlength="300" show-word-limit  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(res.message)
-                        loading.value = false
-                        dialogVisible.value = false
-                    })
-                    .catch(error => {
-                        loading.value = false
-                    })
-            } catch (error) {
-                loading.value = false
-                // ElMessage.error(error.message)
-            }
-        }
-    })
-}
-const selectChange = e => {
-    devList.value.forEach(item => {
-        if (item.id === e) {
-            versionDesc.value = item.description
-        }
-    })
-}
-
-defineExpose({ open })
-</script>
+<template>
+    <el-dialog
+        draggable
+        width="520px"
+        v-model.trim="dialogVisible"
+        :title="title"
+        :close-on-click-modal="!mqttProgressing"
+        @closed="onClosed"
+    >
+        <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="请选择版本"
+                    :disabled="mqttProgressing"
+                    @change="selectChange"
+                >
+                    <el-option
+                        v-for="item in devList"
+                        :key="item.id"
+                        :disabled="version == item.versionNo"
+                        :label="formatVersionLabel(item)"
+                        :value="item.id"
+                    ></el-option>
+                </el-select>
+            </el-form-item>
+
+            <el-form-item label="描述">
+                <el-input
+                    maxlength="300"
+                    show-word-limit
+                    v-model.trim="versionDesc"
+                    disabled
+                    type="textarea"
+                    :rows="3"
+                ></el-input>
+            </el-form-item>
+        </el-form>
+
+        <!-- 仅 MQTT：上传成功后在输入框下方显示升级进度 -->
+        <div v-if="mqttVisible" class="mqtt-upgrade">
+            <div class="mqtt-upgrade__label">升级版本</div>
+            <el-progress
+                :percentage="mqttProgress"
+                :stroke-width="12"
+                striped
+                striped-flow
+                :status="mqttProgress >= 100 ? 'success' : undefined"
+            />
+
+            <template v-if="mqttProgress >= 100">
+                <div class="mqtt-upgrade__codes">
+                    <div>升级文件校验码：{{ deviceCrc || '-' }}</div>
+                    <div>归档文件校验码：{{ verifyCode || '获取中...' }}</div>
+                </div>
+
+                <div v-if="codeReady" class="mqtt-upgrade__actions">
+                    <template v-if="codeMatched">
+                        <el-button type="primary" :loading="confirmLoading" @click="confirmUpgrade">确认升级</el-button>
+                        <el-button @click="cancelUpgrade">取消升级</el-button>
+                    </template>
+                    <el-alert v-else type="error" show-icon :closable="false" title="校验码不一致不能升级" />
+                </div>
+            </template>
+        </div>
+
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="handleCancel" :disabled="confirmLoading">取消</el-button>
+                <el-button v-if="!mqttVisible" type="primary" @click="submit" :loading="loading">确定</el-button>
+            </span>
+        </template>
+    </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, computed, onBeforeUnmount } from 'vue'
+import { ElMessage } from 'element-plus'
+import { findByDevTypeId, upgrade, uploadUpgradeFile, commitUpgradeFile } from '@/api/system-boot/dictTree'
+import MqttService, { createMqttClient, calcMqttProgress } from '@/utils/MQTT'
+
+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: [] as any[],
+    edDataId: ''
+})
+const loading = ref(false)
+const rules = {
+    edDataId: [{ required: true, message: '请选择版本', trigger: 'change' }]
+}
+const row = ref<any>({})
+
+/** MQTT 升级进度 */
+const mqttVisible = ref(false)
+const mqttProgress = ref(0)
+/** 升级文件校验码 = mqtt.devCrc */
+const deviceCrc = ref('')
+/** 归档文件校验码 = mqtt.systemCrc */
+const verifyCode = ref('')
+/** mqtt crcCheck 带回的 mid / version，确认升级用 */
+const mqttMid = ref<string | number>('')
+const mqttVersion = ref('')
+const confirmLoading = ref(false)
+const mqttService = ref<MqttService | null>(null)
+
+const mqttProgressing = computed(() => mqttVisible.value && mqttProgress.value < 100)
+const codeReady = computed(() => !!(deviceCrc.value && verifyCode.value))
+const codeMatched = computed(() => codeReady.value && String(deviceCrc.value) === String(verifyCode.value))
+
+const getDevIdStr = () => (Array.isArray(form.devId) ? form.devId.join() : String(form.devId || ''))
+
+const open = (data: any) => {
+    resetMqttState()
+    loading.value = false
+    version.value = data.version
+    form.edDataId = ''
+    versionDesc.value = ''
+    row.value = data
+    form.devId = Array.isArray(data.id) ? data.id : [data.id]
+    getFindByDev(data.devModel)
+    formRef.value?.resetFields()
+    dialogVisible.value = true
+}
+
+const getFindByDev = (devModel: string) => {
+    findByDevTypeId({
+        devType: devModel,
+        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('该设备没有可升级的版本!')
+        }
+    })
+}
+
+function disconnectMqtt() {
+    mqttService.value?.disconnect()
+    mqttService.value = null
+}
+
+function resetMqttState() {
+    disconnectMqtt()
+    mqttVisible.value = false
+    mqttProgress.value = 0
+    deviceCrc.value = ''
+    verifyCode.value = ''
+    mqttMid.value = ''
+    mqttVersion.value = ''
+    confirmLoading.value = false
+}
+
+function connectUpgradeMqtt(ndid: string) {
+    try {
+        const topic = `/Web/Progress/UpgradeFile/${ndid}`
+        mqttService.value = createMqttClient(topic, (_topic, data) => {
+            // 进度消息
+            if (data?.allStep != null || data?.nowStep != null) {
+                mqttProgress.value = calcMqttProgress(data)
+            }
+
+            // type=crcCheck 时取校验码及确认升级参数
+            if (data?.type === 'crcCheck') {
+                mqttProgress.value = 100
+                deviceCrc.value = data.devCrc != null ? String(data.devCrc) : ''
+                verifyCode.value = data.systemCrc != null ? String(data.systemCrc) : ''
+                mqttMid.value = data.mid ?? ''
+                mqttVersion.value = data.version != null ? String(data.version) : ''
+            }
+        })
+    } catch (e: any) {
+        ElMessage.error(e?.message || 'MQTT 连接失败')
+    }
+}
+
+const submit = () => {
+    formRef.value.validate(async (valid: boolean) => {
+        if (!valid) return
+        try {
+            loading.value = true
+            if (row.value.accessMethod == 'CLD') {
+                ElMessage.info('升级中，请稍等...')
+                upgrade({
+                    devId: getDevIdStr(),
+                    edDataId: form.edDataId
+                })
+                    .then(res => {
+                        ElMessage.success(res.message)
+                        dialogVisible.value = false
+                    })
+                    .catch(() => {})
+                    .finally(() => {
+                        loading.value = false
+                    })
+            } else if (row.value.accessMethod == 'MQTT') {
+                ElMessage.info('正在上传升级文件...')
+                uploadUpgradeFile({
+                    id: getDevIdStr(),
+                    ndid: row.value.ndid
+                })
+                    .then(res => {
+                        ElMessage.success(res.message || '上传成功')
+                        loading.value = false
+                        mqttVisible.value = true
+                        mqttProgress.value = 0
+                        deviceCrc.value = ''
+                        verifyCode.value = ''
+                        mqttMid.value = ''
+                        mqttVersion.value = ''
+                        connectUpgradeMqtt(row.value.ndid)
+                    })
+                    .catch(() => {
+                        loading.value = false
+                    })
+            } else {
+                ElMessage.warning('未知的接入方式')
+                loading.value = false
+            }
+        } catch (error) {
+            loading.value = false
+        }
+    })
+}
+
+const confirmUpgrade = () => {
+    if (!codeMatched.value) {
+        ElMessage.warning('校验码不一致不能升级')
+        return
+    }
+    if (mqttMid.value === '' || mqttMid.value == null || !mqttVersion.value) {
+        ElMessage.warning('未获取到升级参数，请稍后重试')
+        return
+    }
+    confirmLoading.value = true
+    commitUpgradeFile({
+        mid: mqttMid.value,
+        version: mqttVersion.value,
+        nDid: row.value.ndid
+    })
+        .then((res: any) => {
+            ElMessage.success(res.message || '升级成功')
+            dialogVisible.value = false
+        })
+        .catch(() => {})
+        .finally(() => {
+            confirmLoading.value = false
+        })
+}
+
+const cancelUpgrade = () => {
+    resetMqttState()
+    ElMessage.info('已取消升级')
+}
+
+const handleCancel = () => {
+    if (mqttVisible.value) {
+        cancelUpgrade()
+    }
+    dialogVisible.value = false
+}
+
+const selectChange = (e: string) => {
+    const item = devList.value.find((v: any) => v.id === e)
+    versionDesc.value = item?.description || ''
+}
+
+const formatVersionLabel = (item: any) => {
+    const label = `${item.devTypeName}_${item.versionNo}_${item.versionAgreement}_${item.versionDate}`
+    return version.value == item.versionNo ? `${label}(当前版本)` : label
+}
+
+const onClosed = () => {
+    resetMqttState()
+    loading.value = false
+}
+
+onBeforeUnmount(() => {
+    disconnectMqtt()
+})
+
+defineExpose({ open })
+</script>
+
+<style scoped lang="scss">
+.mqtt-upgrade {
+    margin-top: 8px;
+    padding-top: 12px;
+    border-top: 1px solid var(--el-border-color-lighter);
+
+    &__label {
+        margin-bottom: 8px;
+        font-size: 14px;
+        font-weight: 600;
+        color: #1d2129;
+    }
+
+    &__codes {
+        margin-top: 14px;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        font-size: 13px;
+        color: #4e5969;
+        line-height: 1.5;
+    }
+
+    &__actions {
+        margin-top: 14px;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+    }
+}
+</style>
diff --git a/src/views/govern/manage/programVersion/index.vue b/src/views/govern/manage/programVersion/index.vue
index 26b7f3d..4605a0c 100644
--- a/src/views/govern/manage/programVersion/index.vue
+++ b/src/views/govern/manage/programVersion/index.vue
@@ -1,325 +1,355 @@
-<template>
-    <div>
-        <TableHeader ref="tableHeaderRef" showExport showCustomColumn>
-            <template #select>
-                <el-form-item label="关键字筛选">
-                    <el-input
-                        maxlength="32"
-                        show-word-limit
-                        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.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.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="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.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="Document" type="primary" class="ml10" @click="maintenance">版本维护</el-button>
-                <!-- <el-button :icon="Share" type="primary" class="ml10" @click="upgradeVersion">批量升级</el-button> -->
-            </template>
-        </TableHeader>
-        <Table :checkbox-config="checkboxConfig" ref="tableRef" />
-        <upgrade ref="upgradeRef" />
-        <deviceLog ref="deviceLogRef" />
-    </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 { 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: any = new TableStore({
-    url: '/cs-device-boot/EquipmentDelivery/version/page',
-    method: 'POST',
-    publicHeight: 60,
-    column: [
-        // { type: 'checkbox', width: '60', },
-        {
-            field: 'index',
-            title: '序号',
-            width: '80',
-            formatter: (row: any) => {
-                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
-            }
-        },
-        
-        { title: '设备名称', field: 'name', minWidth: '150' },
-        {
-            title: '设备型号',
-            field: 'devModelName',
-            minWidth: '150',
-            formatter: (row: any) => {
-                return row.cellValue || '/'
-            }
-        },
-        {
-            title: '版本号',
-            field: 'version',
-            minWidth: '120',
-            formatter: (row: any) => {
-                return row.cellValue || '/'
-            }
-        },
-        {
-            title: '校验码',
-            field: 'crc',
-            minWidth: '120',
-            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: 'icd模型',
-            field: 'icd',
-            minWidth: '120',
-            formatter: (row: any) => {
-                return icdList.value?.filter((item: any) => 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: 'runStatus',
-            render: 'tag',
-            minWidth: '80',
-            custom: {
-                1: 'danger',
-                2: 'success'
-            },
-            replaceValue: {
-                1: '离线',
-                2: '在线'
-            }
-        },
-        {
-            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: '130',
-            render: 'buttons',
-            buttons: [
-                {
-                    name: 'productSetting',
-                    title: '升级',
-                    type: 'primary',
-                    icon: 'el-icon-EditPen',
-                    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: '日志',
-                    type: 'primary',
-                    icon: 'el-icon-EditPen',
-                    render: 'basicButton',
-                    click: (row: any) => {
-                        deviceLogRef.value.open(row)
-                    }
-                }
-            ]
-        }
-    ],
-    loadCallback: () => {}
-})
-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 = 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: '/version'
-    })
-}
-
-tableStore.table.params.searchValue = ''
-tableStore.table.params.connectStatus = ''
-tableStore.table.params.devModel = ''
-tableStore.table.params.icd = ''
-tableStore.table.params.upgrade = ''
-provide('tableStore', tableStore)
-onMounted(() => {
-    getQuery()
-    tableStore.index()
-})
-</script>
-<style lang="scss" scoped>
-:deep(.el-select) {
-    width: 200px;
-}
-</style>
+<template>
+    <div>
+        <TableHeader ref="tableHeaderRef" showExport showCustomColumn>
+            <template #select>
+                <el-form-item label="关键字筛选">
+                    <el-input
+                        maxlength="32"
+                        show-word-limit
+                        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.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.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="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.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="Document" type="primary" class="ml10" @click="maintenance">版本维护</el-button>
+                <!-- <el-button :icon="Share" type="primary" class="ml10" @click="upgradeVersion">批量升级</el-button> -->
+            </template>
+        </TableHeader>
+        <Table :checkbox-config="checkboxConfig" ref="tableRef" />
+        <upgrade ref="upgradeRef" />
+        <deviceLog ref="deviceLogRef" />
+    </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 { Share, Document } from '@element-plus/icons-vue'
+import { useRouter } from 'vue-router'
+import upgrade from './comp/upgrade.vue'
+import deviceLog from './comp/deviceLog.vue'
+import { reboot, rebootDevice } from '@/api/access-boot/analyzeModel'
+
+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: any = new TableStore({
+    url: '/cs-device-boot/EquipmentDelivery/version/page',
+    method: 'POST',
+    publicHeight: 60,
+    column: [
+        // { type: 'checkbox', width: '60', },
+        {
+            field: 'index',
+            title: '序号',
+            width: '80',
+            formatter: (row: any) => {
+                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
+            }
+        },
+
+        { title: '设备名称', field: 'name', minWidth: '150' },
+        { title: '网络设备ID', field: 'ndid', minWidth: '150' },
+        {
+            title: '设备型号',
+            field: 'devModelName',
+            minWidth: '150',
+            formatter: (row: any) => {
+                return row.cellValue || '/'
+            }
+        },
+        {
+            title: '版本号',
+            field: 'version',
+            minWidth: '120',
+            formatter: (row: any) => {
+                return row.cellValue || '/'
+            }
+        },
+        {
+            title: '校验码',
+            field: 'crc',
+            minWidth: '120',
+            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: 'icd模型',
+            field: 'icd',
+            minWidth: '120',
+            formatter: (row: any) => {
+                return icdList.value?.filter((item: any) => item.id == row.cellValue)[0]?.name || '/'
+            }
+        },
+
+        {
+            title: '所属工程',
+            field: 'associatedEngineering',
+            minWidth: '150',
+            formatter: (row: any) => {
+                return row.cellValue || '/'
+            }
+        },
+        {
+            title: '所属项目',
+            field: 'associatedProject',
+            minWidth: '150',
+            formatter: (row: any) => {
+                return row.cellValue || '/'
+            }
+        },
+        {
+            title: '状态',
+            field: 'runStatus',
+            render: 'tag',
+            minWidth: '80',
+            custom: {
+                1: 'danger',
+                2: 'success'
+            },
+            replaceValue: {
+                1: '离线',
+                2: '在线'
+            }
+        },
+        {
+            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: '140',
+            render: 'buttons',
+            buttons: [
+                {
+                    name: 'productSetting',
+                    title: '升级',
+                    type: 'primary',
+                    icon: 'el-icon-EditPen',
+                    disabled: (row: any) => {
+                        return row.upgrade == 0
+                    },
+                    render: 'basicButton',
+                    click: (row: any) => {
+                        upgradeRef.value.open(row)
+                    }
+                },
+                {
+                    name: 'productSetting',
+                    title: '日志',
+                    type: 'primary',
+                    icon: 'el-icon-EditPen',
+                    render: 'basicButton',
+                    click: (row: any) => {
+                        deviceLogRef.value.open(row)
+                    }
+                },
+                {
+                    name: 'productSetting',
+                    title: '重启',
+                    type: 'primary',
+                    icon: 'el-icon-EditPen',
+                    loading: 'loading1',
+                    render: 'basicButton',
+                    click: (row: any) => {
+                        row.loading1 = true
+                        if (row.accessMethod == 'CLD') {
+                            reboot({
+                                devId: row.id
+                            })
+                                .then(res => {
+                                    ElMessage.success(res.message)
+                                })
+                                .finally(() => {
+                                    row.loading1 = false
+                                })
+                        } else if (row.accessMethod == 'MQTT') {
+                            rebootDevice({
+                                nDid: row.ndid
+                            })
+                                .then(res => {
+                                    ElMessage.success(res.message)
+                                })
+                                .finally(() => {
+                                    row.loading1 = false
+                                })
+                        }
+                    }
+                }
+            ]
+        }
+    ],
+    loadCallback: () => {}
+})
+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 = 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: '/version'
+    })
+}
+
+tableStore.table.params.searchValue = ''
+tableStore.table.params.connectStatus = ''
+tableStore.table.params.devModel = ''
+tableStore.table.params.icd = ''
+tableStore.table.params.upgrade = ''
+provide('tableStore', tableStore)
+onMounted(() => {
+    getQuery()
+    tableStore.index()
+})
+</script>
+<style lang="scss" scoped>
+:deep(.el-select) {
+    width: 200px;
+}
+</style>
diff --git a/src/views/govern/operationalQuality/index.vue b/src/views/govern/operationalQuality/index.vue
index 2acfd33..713743b 100644
--- a/src/views/govern/operationalQuality/index.vue
+++ b/src/views/govern/operationalQuality/index.vue
@@ -7,7 +7,7 @@
         </TableHeader>
 
         <div class="oq-body">
-            <aside class="oq-left">
+            <aside class="oq-left pr5">
                 <!-- 台账统计 -->
                 <section class="oq-panel oq-ledger">
                     <div class="oq-panel__hd">
@@ -17,17 +17,24 @@
                             </span>
                             <span>台账统计</span>
                         </div>
-                        <span v-if="drillEng" class="oq-breadcrumb">
-                            <el-icon><HomeFilled /></el-icon>
-                            当前工程：{{ drillEng }}
-                        </span>
+                        <el-tooltip
+                            v-if="drillEng"
+                            :content="`当前工程：${drillEng}`"
+                            placement="top"
+                            :show-after="300"
+                        >
+                            <span class="oq-breadcrumb">
+                                <el-icon><HomeFilled /></el-icon>
+                                <span class="oq-breadcrumb__text">当前工程：{{ drillEng }}</span>
+                            </span>
+                        </el-tooltip>
                     </div>
                     <div class="oq-ledger__grid">
                         <div
                             v-for="item in ledgerCards"
                             :key="item.label"
                             class="oq-kpi"
-                            :style="{ '--c': item.color, '--bg': item.iconBg, '--card-bg': item.cardBg }"
+                            :style="{ '--c': item.color, '--bg': item.iconBg }"
                         >
                             <div class="oq-kpi__icon">
                                 <el-icon :size="item.size"><component :is="item.icon" /></el-icon>
@@ -55,23 +62,6 @@
                     </div>
                     <div class="oq-pie__main">
                         <MyEchart :options="typeChart" class="oq-chart" />
-                        <div class="oq-pie-legend">
-                            <div v-for="item in typeLegend" :key="item.name" class="oq-pie-legend__item">
-                                <i :style="{ background: item.color }"></i>
-                                <span>{{ item.name }}</span>
-                                <em>{{ item.ratio }}%</em>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="oq-pie-nums">
-                        <div v-for="item in typeLegend" :key="item.name" class="oq-pie-num">
-                            <i :style="{ background: item.color }"></i>
-                            <span>{{ item.name }}</span>
-                            <span class="oq-pie-num__val" :style="{ color: item.color }">
-                                <b>{{ item.count }}</b>
-                                <em>台</em>
-                            </span>
-                        </div>
                     </div>
                 </section>
 
@@ -84,31 +74,19 @@
                             </span>
                             <span>通讯质量统计</span>
                         </div>
+                        <el-radio-group v-model="commTypeFilter" size="small">
+                            <el-radio-button value="all">全部</el-radio-button>
+                            <el-radio-button value="治理设备">治理设备</el-radio-button>
+                            <el-radio-button value="监测设备">监测设备</el-radio-button>
+                        </el-radio-group>
                     </div>
                     <div class="oq-pie__main">
                         <MyEchart :options="pieChart" class="oq-chart" />
-                        <div class="oq-pie-legend">
-                            <div v-for="item in commStatusTable" :key="item.name" class="oq-pie-legend__item">
-                                <i :style="{ background: item.color }"></i>
-                                <span>{{ item.name }}</span>
-                                <em>{{ item.ratio }}%</em>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="oq-pie-nums">
-                        <div v-for="item in commStatusTable" :key="item.name" class="oq-pie-num">
-                            <i :style="{ background: item.color }"></i>
-                            <span>{{ item.name }}</span>
-                            <span class="oq-pie-num__val" :style="{ color: item.color }">
-                                <b>{{ item.count }}</b>
-                                <em>台</em>
-                            </span>
-                        </div>
                     </div>
                 </section>
             </aside>
 
-            <div class="oq-right">
+            <div class="oq-right pl5">
                 <!-- 右上：在线率 / 完整性 -->
                 <section class="oq-panel oq-rate">
                     <div class="oq-panel__hd">
@@ -124,83 +102,72 @@
                             <el-radio-button value="le60">≤60%</el-radio-button>
                         </el-radio-group>
                     </div>
-                    <div class="oq-rate__body">
-                        <div class="oq-rate__col">
-                            <div class="oq-rate__total">
-                                <label>总在线率</label>
-                                <b :class="rateLevel(totalOnlineRate)">{{ totalOnlineRate }}%</b>
+
+                    <div class="oq-rate__main">
+                        <!-- 左侧：上下两个水球 -->
+                        <div class="oq-rate__charts">
+                            <div class="oq-rate__ball">
+                                <MyEchart :options="onlineLiquidChart" class="oq-chart" />
                             </div>
-                            <div class="oq-rate__sub">
-                                <el-icon><Monitor /></el-icon>
-                                <span>设备在线率</span>
-                                <em>{{ levelLabel }}</em>
-                            </div>
-                            <div class="oq-rank__hd">
-                                <span class="oq-rank__hd-name">名称</span>
-                                <span>设备总数</span>
-                                <span>低于90%设备数</span>
-                                <span>在线率(%)</span>
-                            </div>
-                            <div class="oq-rank">
-                                <div
-                                    v-for="item in displayOnlineList"
-                                    :key="item.name"
-                                    class="oq-rank__item"
-                                    :class="[rateLevel(item.value), { clickable: !drillEng }]"
-                                    @click="onRankClick(item)"
-                                >
-                                    <span class="oq-rank__title">
-                                        <el-icon v-if="!drillEng" class="oq-rank__chevron"><ArrowRight /></el-icon>
-                                        <el-tooltip :content="item.name" placement="top" :show-after="300">
-                                            <span class="oq-rank__name">{{ item.name }}</span>
-                                        </el-tooltip>
-                                    </span>
-                                    <span class="oq-rank__link">{{ item.count }}</span>
-                                    <span class="oq-rank__link">{{ item.lowCount }}</span>
-                                    <span class="oq-rank__pct" :class="rateLevel(item.value)">
-                                        {{ item.value }}
-                                    </span>
-                                </div>
-                                <el-empty v-if="!displayOnlineList.length" description="暂无数据" :image-size="80" />
+                            <div class="oq-rate__ball">
+                                <MyEchart :options="integrityLiquidChart" class="oq-chart" />
                             </div>
                         </div>
-                        <div class="oq-rate__col">
-                            <div class="oq-rate__total">
-                                <label>总完整性</label>
-                                <b :class="rateLevel(totalIntegrityRate)">{{ totalIntegrityRate }}%</b>
-                            </div>
-                            <div class="oq-rate__sub">
-                                <el-icon><CircleCheck /></el-icon>
-                                <span>监测点数据完整性</span>
-                                <em>{{ levelLabel }}</em>
-                            </div>
-                            <div class="oq-rank__hd">
-                                <span class="oq-rank__hd-name">名称</span>
-                                <span>监测点总数</span>
-                                <span>低于90%监测点数</span>
-                                <span>完整性(%)</span>
-                            </div>
-                            <div class="oq-rank">
-                                <div
-                                    v-for="item in displayIntegrityList"
-                                    :key="item.name"
-                                    class="oq-rank__item"
-                                    :class="[rateLevel(item.value), { clickable: !drillEng }]"
-                                    @click="onRankClick(item)"
-                                >
-                                    <span class="oq-rank__title">
-                                        <el-icon v-if="!drillEng" class="oq-rank__chevron"><ArrowRight /></el-icon>
-                                        <el-tooltip :content="item.name" placement="top" :show-after="300">
-                                            <span class="oq-rank__name">{{ item.name }}</span>
-                                        </el-tooltip>
-                                    </span>
-                                    <span class="oq-rank__link">{{ item.count }}</span>
-                                    <span class="oq-rank__link">{{ item.lowCount }}</span>
-                                    <span class="oq-rank__pct" :class="rateLevel(item.value)">
-                                        {{ item.value }}
-                                    </span>
+
+                        <!-- 右侧：在线率 + 完整性合并列表 -->
+                        <div class="oq-rate__body">
+                            <div class="oq-rate__col">
+                                <div class="oq-rank">
+                                    <div class="oq-rank__hd oq-rank__hd--merge">
+                                        <span class="oq-rank__hd-name">{{ levelLabel }}名称</span>
+                                        <div class="oq-rank__hd-block oq-rank__hd-block--online">
+                                            <span class="oq-rank__hd-group">设备在线率(%)</span>
+                                            <span>数量</span>
+                                            <span>低于90%</span>
+                                            <span class="oq-sort" @click="toggleRateSort('onlineRate')">
+                                                在线率
+                                                <el-icon class="oq-sort__icon" :size="14"><DCaret /></el-icon>
+                                            </span>
+                                        </div>
+                                        <div class="oq-rank__hd-block oq-rank__hd-block--integrity">
+                                            <span class="oq-rank__hd-group">监测点完整性(%)</span>
+                                            <span>数量</span>
+                                            <span>低于90%</span>
+                                            <span class="oq-sort" @click="toggleRateSort('integrityRate')">
+                                                完整性
+                                                <el-icon class="oq-sort__icon" :size="14"><DCaret /></el-icon>
+                                            </span>
+                                        </div>
+                                    </div>
+                                    <div
+                                        v-for="item in displayMergedRateList"
+                                        :key="item.name"
+                                        class="oq-rank__item oq-rank__item--merge"
+                                        :class="{ clickable: !drillEng }"
+                                        @click="onRankClick(item)"
+                                    >
+                                        <span class="oq-rank__title">
+                                            <el-tooltip :content="item.name" placement="top" :show-after="300">
+                                                <span class="oq-rank__name">{{ item.name }}</span>
+                                            </el-tooltip>
+                                        </span>
+                                        <span class="oq-rank__link">{{ item.onlineCount }}</span>
+                                        <span class="oq-rank__link">{{ item.onlineLow }}</span>
+                                        <span class="oq-rank__pct" :class="rateLevel(item.onlineRate)">
+                                            {{ item.onlineRate }}
+                                        </span>
+                                        <span class="oq-rank__link">{{ item.integrityCount }}</span>
+                                        <span class="oq-rank__link">{{ item.integrityLow }}</span>
+                                        <span class="oq-rank__pct" :class="rateLevel(item.integrityRate)">
+                                            {{ item.integrityRate }}
+                                        </span>
+                                    </div>
+                                    <el-empty
+                                        v-if="!displayMergedRateList.length"
+                                        description="暂无数据"
+                                        :image-size="80"
+                                    />
                                 </div>
-                                <el-empty v-if="!displayIntegrityList.length" description="暂无数据" :image-size="80" />
                             </div>
                         </div>
                     </div>
@@ -215,39 +182,29 @@
                             </span>
                             <span>数据质量统计</span>
                         </div>
-                        <el-radio-group v-model="qualityView" size="small">
-                            <el-radio-button value="chart">图表</el-radio-button>
-                            <el-radio-button value="table">表格</el-radio-button>
-                        </el-radio-group>
                     </div>
-                    <MyEchart v-if="qualityView === 'chart'" :options="qualityChart" class="oq-chart oq-quality__chart" />
-                    <div v-else class="oq-quality__body">
+                    <div class="oq-quality__main">
                         <div
                             v-for="panel in qualityPanels"
                             :key="panel.key"
-                            class="oq-quality__panel"
-                            :style="{ '--c': panel.color, '--bg': panel.bg }"
+                            class="oq-quality__list-wrap"
+                            :style="{ '--c': panel.color }"
                         >
-                            <div class="oq-quality__panel-hd">
-                                <span class="oq-quality__panel-icon">
-                                    <el-icon><component :is="panel.icon" /></el-icon>
-                                </span>
-                                <b>{{ panel.title }}</b>
-                                <em>{{ panel.total }}</em>
+                            <div class="oq-quality__list-hd">
+                                <span>{{ panel.title }}</span>
                             </div>
-                            <div class="oq-table-wrap">
-                                <vxe-table
-                                    :id="`oq-quality-${panel.key}`"
-                                    height="auto"
-                                    auto-resize
-                                    :data="panel.list"
-                                    v-bind="defaultAttribute"
-                                    class="oq-table"
-                                >
-                                    <vxe-column field="name" title="指标名称" min-width="100" />
-                                    <vxe-column field="range" title="合理范围" min-width="90" />
-                                    <vxe-column field="count" :title="panel.countLabel" width="90" />
-                                </vxe-table>
+                            <div class="oq-quality__list-cols">
+                                <span>指标名称</span>
+                                <span>{{ panel.rangeLabel }}</span>
+                                <span>{{ panel.countLabel }}</span>
+                            </div>
+                            <div class="oq-quality__list">
+                                <div v-for="item in panel.list" :key="item.name" class="oq-quality__list-item">
+                                    <span class="oq-quality__list-name" :title="item.name">{{ item.name }}</span>
+                                    <span class="oq-quality__list-range">{{ item.range }}</span>
+                                    <span class="oq-quality__list-count">{{ item.count }}</span>
+                                </div>
+                                <el-empty v-if="!panel.list.length" description="暂无数据" :image-size="80" />
                             </div>
                         </div>
                     </div>
@@ -268,19 +225,14 @@ import {
     TrendCharts,
     PieChart,
     Warning,
-    WarningFilled,
-    BellFilled,
-    Monitor,
-    CircleCheck,
-    ArrowRight,
     Connection,
     Cpu,
     CircleCloseFilled,
-    SuccessFilled
+    SuccessFilled,
+    DCaret
 } from '@element-plus/icons-vue'
 import TableHeader from '@/components/table/header/index.vue'
 import MyEchart from '@/components/echarts/MyEchart.vue'
-import { defaultAttribute } from '@/components/table/defaultAttribute'
 import TableStore from '@/utils/tableStore'
 import { mainHeight } from '@/utils/layout'
 /** 来自设备树：level0工程/1项目/2设备/3监测点；MQTT=治理设备，CLD=监测设备 */
@@ -291,18 +243,24 @@ defineOptions({
 })
 
 type RateFilter = 'all' | 'le90' | 'le60'
+type CommTypeFilter = 'all' | '治理设备' | '监测设备'
 type RankItem = { name: string; value: number; count: number; lowCount: number }
+type RateSortKey = 'onlineRate' | 'integrityRate'
 
 const pageHeight = mainHeight(20)
 const headerRef = ref()
 const loading = ref(false)
 const rateFilter = ref<RateFilter>('all')
+const commTypeFilter = ref<CommTypeFilter>('all')
+/** 合并列表排序：默认按在线率升序 */
+const rateSortKey = ref<RateSortKey>('onlineRate')
+const rateSortAsc = ref(true)
 /** 下钻到项目层级时的工程名 */
 const drillEng = ref('')
 const pieChart = ref<any>({})
 const typeChart = ref<any>({})
-const qualityChart = ref<any>({})
-const qualityView = ref<'chart' | 'table'>('chart')
+const onlineLiquidChart = ref<any>({})
+const integrityLiquidChart = ref<any>({})
 
 const tableStore = new TableStore({
     url: '',
@@ -346,71 +304,73 @@ const ledgerCards = computed(() => {
             label: '工程',
             value: inDrill ? 1 : global['工程'] ?? engSet.size,
             unit: '个',
-            size: 20,
+            size: 18,
             icon: HomeFilled,
             color: '#376CF3',
-            iconBg: 'rgba(55, 108, 243, 0.14)',
-            cardBg: 'linear-gradient(135deg, #bfdbfe 0%, #eff6ff 100%)'
+            iconBg: 'rgba(55, 108, 243, 0.14)'
         },
         {
             label: '项目',
             value: inDrill ? projSet.size : global['项目'] ?? projSet.size,
             unit: '个',
-            size: 20,
+            size: 18,
             icon: List,
             color: '#0E42D2',
-            iconBg: 'rgba(14, 66, 210, 0.12)',
-            cardBg: 'linear-gradient(135deg, #c7d2fe 0%, #eef2ff 100%)'
+            iconBg: 'rgba(14, 66, 210, 0.12)'
         },
         {
             label: '设备',
             value: inDrill ? devices.length : global['设备'] ?? devices.length,
             unit: '台',
-            size: 20,
+            size: 18,
             icon: Platform,
             color: '#0EA5E9',
-            iconBg: 'rgba(14, 165, 233, 0.14)',
-            cardBg: 'linear-gradient(135deg, #a5f3fc 0%, #ecfeff 100%)'
+            iconBg: 'rgba(14, 165, 233, 0.14)'
         },
         {
             label: '监测点',
             value: inDrill ? points.length : global['监测点'] ?? points.length,
             unit: '个',
-            size: 22,
+            size: 20,
             icon: LocationFilled,
             color: '#14B8A6',
-            iconBg: 'rgba(20, 184, 166, 0.14)',
-            cardBg: 'linear-gradient(135deg, #99f6e4 0%, #ecfdf8 100%)'
+            iconBg: 'rgba(20, 184, 166, 0.14)'
         }
     ]
 })
 
+const qualityIndicators = [
+    '频率',
+    '谐波电压相角',
+    '相电压有效值',
+    '电流有效值',
+    '正序电压',
+    '负序电压',
+    '零序电压',
+    '线电压有效值',
+    '功率因数'
+]
+
+/** mock：异常 / 告警按指标汇总（后续接接口） */
 const qualityData = ref({
     outOfRange: [
-        { name: '频率', range: '超出合理范围', count: 12 },
-        { name: '相电压有效值', range: '超出合理范围', count: 28 },
-        { name: '线电压有效值', range: '超出合理范围', count: 19 },
-        { name: '电流有效值', range: '超出合理范围', count: 15 }
+        { name: '频率', range: '42.5Hz ~ 57.5Hz', count: 12 },
+        { name: '谐波电压相角', range: '-360.0 ~ 360.0', count: 8 },
+        { name: '相电压有效值', range: '10.0%U ~ 150.0%U', count: 28 },
+        { name: '电流有效值', range: '1.0 ~ 1250.0', count: 15 },
+        { name: '正序电压', range: '0.0%U ~ 150.0%U', count: 18 },
+        { name: '负序电压', range: '0.0%U ~ 150.0%U', count: 14 },
+        { name: '零序电压', range: '0.0%U ~ 150.0%U', count: 9 },
+        { name: '线电压有效值', range: '10.0%U ~ 150.0%U', count: 19 },
+        { name: '功率因数', range: '-1.0 ~ 1.0', count: 11 }
     ],
-    overLimit: [
-        { name: '谐波电压含有率', range: '越限告警', count: 18 },
-        { name: '长时闪变', range: '越限告警', count: 7 },
-        { name: '电压偏差', range: '越限告警', count: 14 },
-        { name: '三相不平衡度', range: '越限告警', count: 6 }
-    ]
+    overLimit: qualityIndicators.map((name, idx) => ({
+        name,
+        range: '',
+        count: [6, 4, 18, 9, 10, 7, 5, 14, 8][idx]
+    }))
 })
 
-/** 按日期汇总的异常 / 告警数量（双柱图） */
-const qualityTrend = ref([
-    { date: '07-11', outOfRange: 18, overLimit: 9 },
-    { date: '07-12', outOfRange: 22, overLimit: 11 },
-    { date: '07-13', outOfRange: 15, overLimit: 7 },
-    { date: '07-14', outOfRange: 28, overLimit: 14 },
-    { date: '07-15', outOfRange: 20, overLimit: 10 },
-    { date: '07-16', outOfRange: 25, overLimit: 16 },
-    { date: '07-17', outOfRange: 19, overLimit: 12 }
-])
-
 const aggregateBy = (list: any[], keyFn: (row: any) => string, valueFn: (row: any) => number): RankItem[] => {
     const map = new Map<string, { sum: number; count: number; lowCount: number }>()
     list.forEach(row => {
@@ -432,35 +392,21 @@ const aggregateBy = (list: any[], keyFn: (row: any) => string, valueFn: (row: an
         .sort((a, b) => a.value - b.value)
 }
 
-const onlineList = computed(() => {
-    if (drillEng.value) {
-        return aggregateBy(
-            scopedDevices.value,
-            d => d.projName || '未分组',
-            d => d.onlineRate
-        )
-    }
-    return aggregateBy(
-        deviceOnlineTable.value,
-        d => d.engName || '未分组',
+const onlineList = computed(() =>
+    aggregateBy(
+        scopedDevices.value,
+        d => (drillEng.value ? d.projName || '未分组' : d.engName || '未分组'),
         d => d.onlineRate
     )
-})
+)
 
-const integrityList = computed(() => {
-    if (drillEng.value) {
-        return aggregateBy(
-            scopedPoints.value,
-            p => p.projName || '未分组',
-            p => p.integrity
-        )
-    }
-    return aggregateBy(
-        pointIntegrityTable.value,
-        p => p.engName || '未分组',
+const integrityList = computed(() =>
+    aggregateBy(
+        scopedPoints.value,
+        p => (drillEng.value ? p.projName || '未分组' : p.engName || '未分组'),
         p => p.integrity
     )
-})
+)
 
 const matchRateFilter = (v: number) => {
     if (rateFilter.value === 'le90') return v <= 90
@@ -468,8 +414,55 @@ const matchRateFilter = (v: number) => {
     return true
 }
 
-const displayOnlineList = computed(() => onlineList.value.filter(i => matchRateFilter(i.value)))
-const displayIntegrityList = computed(() => integrityList.value.filter(i => matchRateFilter(i.value)))
+/** 按名称合并在线率 / 完整性；筛选时任一指标达标即展示，另一项仍显示真实值 */
+const displayMergedRateList = computed(() => {
+    const onlineMap = new Map(onlineList.value.map(i => [i.name, i]))
+    const integrityMap = new Map(integrityList.value.map(i => [i.name, i]))
+    const names = new Set([...onlineMap.keys(), ...integrityMap.keys()])
+    const list = [...names]
+        .map(name => {
+            const online = onlineMap.get(name)
+            const integrity = integrityMap.get(name)
+            const onlineRate = online?.value ?? 0
+            const integrityRate = integrity?.value ?? 0
+            return {
+                name,
+                onlineCount: online?.count ?? 0,
+                onlineLow: online?.lowCount ?? 0,
+                onlineRate,
+                integrityCount: integrity?.count ?? 0,
+                integrityLow: integrity?.lowCount ?? 0,
+                integrityRate
+            }
+        })
+        .filter(item => matchRateFilter(item.onlineRate) || matchRateFilter(item.integrityRate))
+
+    const key = rateSortKey.value
+    const asc = rateSortAsc.value ? 1 : -1
+    return list.sort((a, b) => {
+        const av = a[key]
+        const bv = b[key]
+        if (typeof av === 'string' || typeof bv === 'string') {
+            return String(av).localeCompare(String(bv), 'zh-CN') * asc
+        }
+        return ((Number(av) || 0) - (Number(bv) || 0)) * asc
+    })
+})
+
+const toggleRateSort = (key: RateSortKey) => {
+    if (rateSortKey.value === key) {
+        rateSortAsc.value = !rateSortAsc.value
+    } else {
+        rateSortKey.value = key
+        rateSortAsc.value = true
+    }
+}
+
+const rateSortClass = (key: RateSortKey) => ({
+    'is-active': rateSortKey.value === key,
+    'is-asc': rateSortKey.value === key && rateSortAsc.value,
+    'is-desc': rateSortKey.value === key && !rateSortAsc.value
+})
 
 const avgRate = (list: any[], key: string) => {
     if (!list.length) return 0
@@ -481,7 +474,10 @@ const totalOnlineRate = computed(() => avgRate(scopedDevices.value, 'onlineRate'
 const totalIntegrityRate = computed(() => avgRate(scopedPoints.value, 'integrity'))
 
 const commStatusTable = computed(() => {
-    const list = scopedDevices.value
+    const list =
+        commTypeFilter.value === 'all'
+            ? scopedDevices.value
+            : scopedDevices.value.filter(d => d.type === commTypeFilter.value)
     const normal = list.filter(i => i.normal).length
     const abnormal = list.length - normal
     const total = list.length || 1
@@ -494,10 +490,10 @@ const commStatusTable = computed(() => {
             icon: SuccessFilled
         },
         {
-            name: '中断',
+            name: '异常',
             count: abnormal,
             ratio: Number(((abnormal / total) * 100).toFixed(2)),
-            color: '#f56c6c',
+            color: '#e26257',
             icon: CircleCloseFilled
         }
     ]
@@ -535,20 +531,18 @@ const qualityPanels = computed(() => [
     {
         key: 'outOfRange',
         title: '异常数据',
+        rangeLabel: '合理范围',
         countLabel: '异常测点数',
         color: '#FF9500',
-        bg: 'linear-gradient(135deg, #fff7e8 0%, #fffbf0 100%)',
-        icon: WarningFilled,
         total: qualityBadge.value.outOfRange,
         list: qualityData.value.outOfRange
     },
     {
         key: 'overLimit',
         title: '告警数据',
+        rangeLabel: '限值',
         countLabel: '告警测点数',
-        color: '#F53F3F',
-        bg: 'linear-gradient(135deg, #ffecec 0%, #fff5f5 100%)',
-        icon: BellFilled,
+        color: '#e26257',
         total: qualityBadge.value.overLimit,
         list: qualityData.value.overLimit
     }
@@ -560,6 +554,12 @@ const rateLevel = (v: number) => {
     return 'is-danger'
 }
 
+const rateColorHex = (v: number) => {
+    if (v >= 90) return '#67c23a'
+    if (v >= 60) return '#e6a23c'
+    return '#e26257'
+}
+
 const onRankClick = (item: RankItem) => {
     if (drillEng.value) return
     drillEng.value = item.name
@@ -569,89 +569,153 @@ const backToEng = () => {
     drillEng.value = ''
 }
 
-const buildDonutChart = (legend: { name: string; count: number; color: string }[], exportFileName: string) => ({
-    title: { show: false },
-    tooltip: { trigger: 'item', formatter: '{b}<br/>{c} 台 ({d}%)' },
-    legend: { show: false },
-    xAxis: { show: false },
-    yAxis: { show: false },
-    dataZoom: { show: false },
-    toolbox: { show: false },
-    exportFileName,
-    options: {
+const buildLiquidChart = (value: number, title: string, shortName: string) => {
+    const color = rateColorHex(value)
+    const ratio = Math.max(0, Math.min(100, Number(value) || 0)) / 100
+    const pct = Number(value).toFixed(2)
+    return {
+        title: { show: false },
+        legend: { show: false },
+        xAxis: { show: false },
+        yAxis: { show: false },
+        dataZoom: { show: false },
+        toolbox: { show: false },
+        tooltip: { show: false },
+        exportFileName: title,
         series: [
             {
-                type: 'pie',
-                radius: ['42%', '70%'],
+                type: 'liquidFill',
+                name: title,
+                data: [ratio],
+                radius: '78%',
                 center: ['50%', '50%'],
-                itemStyle: { borderRadius: 6, borderColor: '#fff', borderWidth: 2 },
-                label: { show: false },
-                labelLine: { show: false },
-                data: legend.map(i => ({
-                    name: i.name,
-                    value: i.count,
-                    itemStyle: { color: i.color }
-                }))
+                color: [color],
+                backgroundStyle: {
+                    color:
+                        color === '#67c23a'
+                            ? 'rgba(103,194,58,0.08)'
+                            : color === '#e6a23c'
+                            ? 'rgba(230,162,60,0.08)'
+                            : 'rgba(245,108,108,0.08)'
+                },
+                outline: {
+                    show: true,
+                    borderDistance: 4,
+                    itemStyle: {
+                        borderColor: color,
+                        borderWidth: 2,
+                        shadowBlur: 0
+                    }
+                },
+                itemStyle: {
+                    opacity: 0.85,
+                    shadowBlur: 0
+                },
+                label: {
+                    formatter: () => `{pct|${pct}%}\n{name|${shortName}}`,
+                    rich: {
+                        pct: {
+                            fontSize: 15,
+                            fontWeight: 700,
+                            lineHeight: 22
+                        },
+                        name: {
+                            fontSize: 12,
+                            fontWeight: 500,
+                            lineHeight: 18
+                        }
+                    }
+                }
             }
         ]
     }
+}
+
+const buildLiquidCharts = () => {
+    onlineLiquidChart.value = buildLiquidChart(totalOnlineRate.value, '设备在线率', '在线率')
+    integrityLiquidChart.value = buildLiquidChart(totalIntegrityRate.value, '监测点数据完整性', '完整性')
+}
+
+const buildPieLegend = (formatter?: (name: string) => string) => ({
+    show: true,
+    type: 'scroll',
+    orient: 'vertical',
+    right: 4,
+    top: 'middle',
+    height: '78%',
+    itemWidth: 10,
+    itemHeight: 10,
+    itemGap: 8,
+    pageIconSize: 12,
+    pageButtonItemGap: 6,
+    pageButtonGap: 8,
+    pageButtonPosition: 'end',
+    pageIconColor: '#376CF3',
+    pageIconInactiveColor: '#c0c4cc',
+    pageTextStyle: { color: '#86909c', fontSize: 11 },
+    formatter: formatter || ((name: string) => name),
+    textStyle: {
+        fontSize: 12,
+        width: 140,
+        overflow: 'truncate',
+        ellipsis: '...'
+    },
+    tooltip: { show: true }
 })
 
-const buildPieChart = () => {
+const buildDonutChart = (
+    legend: { name: string; count: number; color: string; ratio?: number }[],
+    exportFileName: string,
+    valueUnit = '台'
+) => {
+    const countMap = Object.fromEntries(legend.map(i => [i.name, i.count]))
+    return {
+        title: { show: false },
+        tooltip: { trigger: 'item', formatter: `{b}<br/>{c} ${valueUnit} ({d}%)` },
+        legend: buildPieLegend(name => `${name}  ${countMap[name] ?? 0}${valueUnit}`),
+        xAxis: { show: false },
+        yAxis: { show: false },
+        dataZoom: { show: false },
+        toolbox: { show: false },
+        exportFileName,
+        options: {
+            series: [
+                {
+                    type: 'pie',
+                    radius: ['51%', '79%'],
+                    center: ['34%', '50%'],
+                    itemStyle: { borderRadius: 3, borderColor: '#fff', borderWidth: 1 },
+                    label: { show: false },
+                    labelLine: { show: false },
+                    data: legend.map(i => ({
+                        name: i.name,
+                        value: i.count,
+                        itemStyle: { color: i.color }
+                    }))
+                }
+            ]
+        }
+    }
+}
+
+const buildCommPieChart = () => {
     pieChart.value = buildDonutChart(commStatusTable.value, '通讯状态')
+}
+
+const buildTypePieChart = () => {
     typeChart.value = buildDonutChart(typeLegend.value, '设备类型')
 }
 
-const buildQualityChart = () => {
-    const list = qualityTrend.value
-    qualityChart.value = {
-        title: { show: false },
-        exportFileName: '数据质量统计',
-        color: ['#FF9500', '#F53F3F'],
-       
-        grid: {
-            top: '36px',
-            left: '12px',
-            right: '16px',
-            bottom: '8px',
-            containLabel: true
-        },
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: { type: 'shadow' }
-        },
-        dataZoom: { show: false },
-        xAxis: {
-            type: 'category',
-            data: list.map(i => i.date)
-        },
-        yAxis: {
-            type: 'value',
-            name: '测点数',
-            minInterval: 1
-        },
-        series: [
-            {
-                name: '异常数据',
-                type: 'bar',
-                barMaxWidth: 18,
-                data: list.map(i => i.outOfRange)
-            },
-            {
-                name: '告警数据',
-                type: 'bar',
-                barMaxWidth: 18,
-                data: list.map(i => i.overLimit)
-            }
-        ]
-    }
+const buildPieChart = () => {
+    buildCommPieChart()
+    buildTypePieChart()
 }
 
 const loadData = () => {
     loading.value = true
     setTimeout(() => {
         buildPieChart()
-        buildQualityChart()
+        buildLiquidCharts()
         loading.value = false
     }, 120)
 }
@@ -664,7 +728,15 @@ const onSelectChange = (_showSelect: any, _height: any, datePickerValue?: any) =
     loadData()
 }
 
-watch([drillEng, scopedDevices], () => buildPieChart())
+watch([drillEng, scopedDevices, scopedPoints], () => {
+    buildPieChart()
+    buildLiquidCharts()
+})
+
+/** 通讯类型切换只刷新通讯质量饼图，不影响其它模块 */
+watch(commTypeFilter, () => {
+    buildCommPieChart()
+})
 
 onMounted(() => loadData())
 </script>
@@ -683,7 +755,7 @@ onMounted(() => loadData())
     padding: 10px;
     display: grid;
     grid-template-columns: minmax(260px, 1fr) minmax(0, 2.6fr);
-    gap: 10px;
+    //gap: 4px;
 }
 
 .oq-left,
@@ -694,6 +766,8 @@ onMounted(() => loadData())
     flex-direction: column;
     gap: 10px;
     overflow: hidden;
+    /* 给卡片左右阴影留出空间，避免被 overflow 裁切 */
+    // padding: 4px 8px;
 }
 
 .oq-left > .oq-panel {
@@ -702,10 +776,10 @@ onMounted(() => loadData())
 }
 
 .oq-left > .oq-ledger {
-    flex: 0 0 230px;
-    height: 230px;
-    min-height: 230px;
-    max-height: 230px;
+    flex: 0 0 200px;
+    height: 200px;
+    min-height: 200px;
+    max-height: 200px;
 }
 
 .oq-right > .oq-rate {
@@ -722,12 +796,12 @@ onMounted(() => loadData())
     min-width: 0;
     min-height: 0;
     background: #fff;
-    border-radius: 10px;
+    border-radius: 5px;
     border: 1px solid #eef2f7;
-    padding: 12px 14px;
+    padding: 10px;
     display: flex;
     flex-direction: column;
-    box-shadow: 0 2px 10px rgba(15, 35, 80, 0.05);
+    box-shadow: 0 2px 8px rgba(15, 35, 80, 0.04);
 
     &__hd {
         display: flex;
@@ -739,6 +813,13 @@ onMounted(() => loadData())
         color: #1d2129;
         margin-bottom: 10px;
         flex-shrink: 0;
+        min-width: 0;
+
+        > :deep(.el-tooltip__trigger) {
+            max-width: 55%;
+            min-width: 0;
+            overflow: hidden;
+        }
     }
 
     &__title {
@@ -769,64 +850,67 @@ onMounted(() => loadData())
     display: inline-flex;
     align-items: center;
     gap: 4px;
+    max-width: 100%;
+    min-width: 0;
     font-size: 12px;
     font-weight: 400;
     color: #376cf3;
     background: rgba(55, 108, 243, 0.08);
     padding: 2px 8px;
     border-radius: 999px;
-    max-width: 80%;
     overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    vertical-align: middle;
 
     .el-icon {
         font-size: 13px;
         flex-shrink: 0;
     }
+
+    &__text {
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
 }
 
 .oq-ledger {
     &__grid {
-        flex: none;
+        flex: 1;
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 8px;
+        align-content: stretch;
     }
 }
 
 .oq-kpi {
     position: relative;
-    height: 80px;
+    height: 100%;
+    min-height: 62px;
+    max-height: 70px;
     box-sizing: border-box;
-    background: var(--card-bg, #fff);
-    border-radius: 10px;
-    padding: 10px 12px;
+    background: #fff;
+    border: 1px solid #eef2f7;
+    border-radius: 8px;
+    padding: 8px 10px;
     display: flex;
     align-items: center;
     gap: 10px;
     overflow: hidden;
-    transition: transform 0.18s ease, box-shadow 0.18s ease;
-
-    &::before {
-        content: '';
-        position: absolute;
-        left: 0;
-        top: 0;
-        bottom: 0;
-        width: 3px;
-        background: var(--c);
-    }
+    box-shadow: 0 2px 8px rgba(15, 35, 80, 0.04);
+    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
 
     &:hover {
         transform: translateY(-1px);
+        border-color: #e5eaf3;
         box-shadow: 0 4px 12px rgba(15, 35, 80, 0.08);
     }
 
     &__icon {
-        width: 42px;
-        height: 42px;
-        border-radius: 10px;
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
         background: var(--bg);
         color: var(--c);
         display: flex;
@@ -843,8 +927,9 @@ onMounted(() => loadData())
     }
 
     &__label {
-        font-size: 13px;
+        font-size: 12px;
         color: #6e7681;
+        line-height: 1.2;
     }
 
     &__val {
@@ -872,13 +957,42 @@ onMounted(() => loadData())
 .oq-rate {
     overflow: hidden;
 
+    &__main {
+        flex: 1;
+        min-height: 0;
+        display: grid;
+        grid-template-columns: 200px minmax(0, 1fr);
+        gap: 10px;
+        overflow: hidden;
+    }
+
+    &__charts {
+        min-width: 0;
+        min-height: 0;
+        display: grid;
+        grid-template-rows: 1fr 1fr;
+        gap: 4px;
+        overflow: hidden;
+    }
+
+    &__ball {
+        min-width: 0;
+        min-height: 0;
+        display: flex;
+        overflow: hidden;
+
+        .oq-chart {
+            flex: 1;
+            width: 100%;
+            min-height: 0;
+        }
+    }
+
     &__body {
         flex: 1;
         min-height: 0;
-        height: 0;
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 10px;
+        display: flex;
+        flex-direction: column;
         overflow: hidden;
     }
 
@@ -890,10 +1004,13 @@ onMounted(() => loadData())
         display: flex;
         flex-direction: column;
         border: 1px solid #eef2f7;
-        border-radius: 10px;
+        border-radius: 5px;
         padding: 10px;
         background: #fafbfd;
         overflow: hidden;
+        --oq-merge-cols: minmax(0, 1.2fr) 70px 75px 75px 70px 75px 75px;
+        --oq-merge-group: 70px 75px 75px;
+        --oq-merge-group-w: 236px; /* 70 + 8 + 75 + 8 + 75 */
     }
 
     &__sub {
@@ -901,7 +1018,6 @@ onMounted(() => loadData())
         font-weight: 600;
         color: #1d2129;
         margin-bottom: 8px;
-        padding-right: 118px;
         flex-shrink: 0;
         display: flex;
         align-items: center;
@@ -923,46 +1039,6 @@ onMounted(() => loadData())
             margin-left: 2px;
         }
     }
-
-    &__total {
-        position: absolute;
-        top: 5px;
-        right: 10px;
-        z-index: 1;
-        display: inline-flex;
-        align-items: baseline;
-        gap: 6px;
-        padding: 2px 10px;
-        border-radius: 999px;
-        background: #fff;
-        border: 1px solid #e8edf5;
-        box-shadow: 0 1px 3px rgba(15, 35, 80, 0.04);
-
-        label {
-            font-size: 12px;
-            font-weight: 400;
-            color: #86909c;
-        }
-
-        b {
-            font-size: 15px;
-            font-weight: 700;
-            font-variant-numeric: tabular-nums;
-            line-height: 1.2;
-
-            &.is-ok {
-                color: #67c23a;
-            }
-
-            &.is-warn {
-                color: #e6a23c;
-            }
-
-            &.is-danger {
-                color: #f56c6c;
-            }
-        }
-    }
 }
 
 .oq-rate-filter {
@@ -1001,21 +1077,126 @@ onMounted(() => loadData())
         display: grid;
         grid-template-columns: minmax(0, 1fr) 70px 100px 70px;
         gap: 8px;
-        padding: 0 12px 5px 16px;
-        margin-bottom: 2px;
+        align-items: center;
+        box-sizing: border-box;
+        padding: 0 12px 6px 16px;
+        margin: 0;
+        border: 1px solid transparent;
         flex-shrink: 0;
+        position: sticky;
+        top: 0;
+        z-index: 2;
+        background: #fafbfd;
         font-size: 12px;
         font-weight: 600;
         color: #4e5969;
         line-height: 1.2;
 
-        span {
+        > span {
             text-align: center;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            min-width: 0;
         }
 
         .oq-rank__hd-name {
+            justify-content: flex-start;
             text-align: left;
         }
+
+        &--merge {
+            display: grid;
+            grid-template-columns: minmax(0, 1.2fr) var(--oq-merge-group-w) var(--oq-merge-group-w);
+            gap: 8px;
+            align-items: stretch;
+
+            .oq-rank__hd-name {
+                align-self: center;
+            }
+        }
+    }
+
+    &__hd-block {
+        display: grid;
+        grid-template-columns: var(--oq-merge-group);
+        grid-template-rows: auto auto;
+        gap: 4px 8px;
+        align-items: center;
+        box-sizing: border-box;
+        padding: 4px 0;
+        border-radius: 6px;
+        min-width: 0;
+
+        > span {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            min-width: 0;
+            text-align: center;
+        }
+
+        .oq-rank__hd-group {
+            grid-column: 1 / -1;
+            grid-row: 1;
+            background: transparent;
+            padding: 2px 0 4px;
+            border-bottom: 1px solid rgba(78, 89, 105, 0.12);
+        }
+
+        &--online {
+            background: rgba(149, 151, 153, 0.1);
+            padding: 4px 0;
+        }
+
+        &--integrity {
+            background: rgba(149, 151, 153, 0.1);
+            padding: 4px 0;
+        }
+    }
+
+    &__hd-group {
+        font-size: 12px;
+        font-weight: 700;
+        color: #4e5969;
+        justify-content: center;
+    }
+
+    .oq-sort {
+        display: inline-flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        gap: 4px;
+        cursor: pointer;
+        user-select: none;
+        line-height: 1;
+        vertical-align: middle;
+        color: #4e5969;
+
+        &:hover,
+        &.is-active {
+            color: var(--el-color-primary);
+        }
+
+        &__icon {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            width: 16px;
+            height: 16px;
+            cursor: pointer;
+            color: #c0c4cc;
+            transition: color 0.15s ease;
+            flex-shrink: 0;
+        }
+
+        &:hover .oq-sort__icon,
+        &.is-active .oq-sort__icon {
+            color: var(--el-color-primary);
+            cursor: pointer;
+        }
     }
 
     &__item {
@@ -1024,6 +1205,7 @@ onMounted(() => loadData())
         grid-template-columns: minmax(0, 1fr) 70px 100px 70px;
         gap: 8px;
         align-items: center;
+        box-sizing: border-box;
         min-height: 36px;
         padding: 6px 12px 6px 16px;
         border-radius: 6px;
@@ -1032,6 +1214,10 @@ onMounted(() => loadData())
         overflow: hidden;
         transition: background 0.15s ease, border-color 0.15s ease;
 
+        &--merge {
+            grid-template-columns: var(--oq-merge-cols);
+        }
+
         &::before {
             content: '';
             position: absolute;
@@ -1040,7 +1226,7 @@ onMounted(() => loadData())
             bottom: 6px;
             width: 4px;
             border-radius: 2px;
-            background: #67c23a;
+            background: var(--el-color-primary);
         }
 
         &.is-ok::before {
@@ -1052,7 +1238,7 @@ onMounted(() => loadData())
         }
 
         &.is-danger::before {
-            background: #f56c6c;
+            background: #e26257;
         }
 
         &.clickable {
@@ -1130,7 +1316,7 @@ onMounted(() => loadData())
         }
 
         &.is-danger {
-            color: #f56c6c;
+            color: #e26257;
         }
     }
 }
@@ -1141,10 +1327,8 @@ onMounted(() => loadData())
     &__main {
         flex: 1;
         min-height: 0;
-        display: grid;
-        grid-template-columns: minmax(0, 1fr) auto;
-        gap: 8px;
-        align-items: center;
+        display: flex;
+        align-items: stretch;
     }
 
     .oq-chart {
@@ -1160,199 +1344,143 @@ onMounted(() => loadData())
     min-height: 100px;
 }
 
-.oq-pie-legend {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    gap: 10px;
-    min-width: 108px;
-    flex-shrink: 0;
-
-    &__item {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-        white-space: nowrap;
-        font-size: 12px;
-        color: #4e5969;
-        line-height: 1.2;
-
-        > i {
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            flex-shrink: 0;
-        }
-
-        em {
-            font-style: normal;
-            font-weight: 600;
-            color: #1d2129;
-            font-variant-numeric: tabular-nums;
-        }
-    }
-}
-
-.oq-pie-nums {
-    display: flex;
-    gap: 8px;
-    flex-shrink: 0;
-    padding-top: 4px;
-}
-
-.oq-pie-num {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    background: #f8fafc;
-    border: 1px solid #eef2f7;
-    border-radius: 8px;
-    padding: 8px 10px;
-    font-size: 12px;
-    color: #64748b;
-
-    > i {
-        width: 8px;
-        height: 8px;
-        border-radius: 50%;
-        flex-shrink: 0;
-    }
-
-    .el-icon {
-        font-size: 14px;
-        flex-shrink: 0;
-    }
-
-    b {
-        margin-left: auto;
-        font-size: 16px;
-        color: #1d2129;
-    }
-
-    &__val {
-        margin-left: auto;
-        display: inline-flex;
-        align-items: baseline;
-        gap: 2px;
-        line-height: 1;
-
-        b {
-            margin-left: 0;
-            font-size: 16px;
-            font-weight: 700;
-            font-variant-numeric: tabular-nums;
-            line-height: 1;
-            color: inherit;
-        }
-
-        em {
-            font-style: normal;
-            font-size: 12px;
-            font-weight: 400;
-            color: #86909c;
-            line-height: 1;
-        }
-    }
-
-    em {
-        font-style: normal;
-        color: #94a3b8;
-    }
-}
-
 .oq-quality {
     overflow: hidden;
 
-    &__chart {
-        flex: 1;
-        min-height: 0;
-    }
-
-    &__body {
+    &__main {
         flex: 1;
         min-height: 0;
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 10px;
+        overflow: hidden;
     }
 
-    &__panel {
+    &__list-wrap {
         min-width: 0;
         min-height: 0;
         display: flex;
         flex-direction: column;
         border: 1px solid #eef2f7;
-        border-radius: 10px;
+        border-radius: 5px;
+        padding: 10px;
+        background: #fafbfd;
         overflow: hidden;
-        background: #fff;
     }
 
-    &__panel-hd {
+    &__list-hd {
         display: flex;
         align-items: center;
-        gap: 8px;
-        padding: 8px 12px;
-        background: var(--bg);
-        border-bottom: 1px solid #eef2f7;
+        gap: 6px;
+        margin-bottom: 8px;
         flex-shrink: 0;
-
-        b {
-            font-size: 13px;
-            font-weight: 600;
-            color: #1d2129;
-        }
+        font-size: 13px;
+        font-weight: 600;
+        color: #1d2129;
 
         em {
-            margin-left: auto;
             font-style: normal;
-            font-size: 18px;
-            font-weight: 700;
-            color: var(--c);
-            font-variant-numeric: tabular-nums;
+            font-size: 12px;
+            font-weight: 400;
+            color: #6e7681;
+            background: #eef2f7;
+            padding: 1px 8px;
+            border-radius: 999px;
+            margin-left: 2px;
         }
     }
 
-    &__panel-icon {
-        width: 24px;
-        height: 24px;
+    &__list-cols {
+        display: grid;
+        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 90px;
+        gap: 8px;
+        align-items: center;
+        box-sizing: border-box;
+        padding: 0 12px 3px 16px;
+        margin: 0 4px 0 0;
+        border: 1px solid transparent;
+        flex-shrink: 0;
+        font-size: 12px;
+        font-weight: 600;
+        color: #4e5969;
+
+        span:nth-child(2),
+        span:last-child {
+            text-align: center;
+        }
+    }
+
+    &__list {
+        flex: 1;
+        min-height: 0;
+        overflow-x: hidden;
+        overflow-y: auto;
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+        padding-right: 4px;
+        scrollbar-gutter: stable;
+
+        &::-webkit-scrollbar {
+            width: 6px;
+        }
+
+        &::-webkit-scrollbar-thumb {
+            background: var(--el-color-primary);
+            border-radius: 3px;
+        }
+    }
+
+    &__list-item {
+        position: relative;
+        display: grid;
+        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 90px;
+        gap: 8px;
+        align-items: center;
+        box-sizing: border-box;
+        min-height: 36px;
+        padding: 6px 12px 6px 16px;
         border-radius: 6px;
         background: #fff;
-        color: var(--c);
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        flex-shrink: 0;
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+        border: 1px solid #eef2f7;
 
-        .el-icon {
-            font-size: 14px;
+        &::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 6px;
+            bottom: 6px;
+            width: 4px;
+            border-radius: 2px;
+            background: var(--c);
         }
     }
-}
 
-.oq-table-wrap {
-    flex: 1;
-    min-height: 0;
-    overflow: hidden;
-}
-
-.oq-table {
-    width: 100%;
-    border-radius: 0 !important;
-
-    :deep(.vxe-table),
-    :deep(.vxe-table--render-wrapper),
-    :deep(.vxe-table--header-wrapper),
-    :deep(.vxe-table--body-wrapper) {
-        border-radius: 0 !important;
+    &__list-name {
+        min-width: 0;
+        font-size: 13px;
+        color: #1d2129;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
     }
 
-    :deep(.vxe-table--header-wrapper),
-    :deep(.vxe-header--column) {
-        background: #f8fafc;
-        color: #64748b;
-        font-weight: 600;
+    &__list-range {
+        font-size: 12px;
+        font-weight: 700;
+        color: var(--el-color-primary);
+        text-align: center;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    &__list-count {
+        text-align: center;
+        font-size: 14px;
+        font-weight: 700;
+        color: var(--c);
+        font-variant-numeric: tabular-nums;
     }
 }
 
diff --git a/src/views/govern/setting/frontManagement/index.vue b/src/views/govern/setting/frontManagement/index.vue
index baf4574..d1f4f32 100644
--- a/src/views/govern/setting/frontManagement/index.vue
+++ b/src/views/govern/setting/frontManagement/index.vue
@@ -366,7 +366,7 @@ const currentChangeEvent = () => {
             nodeId.value = tableRef.value.getRef().getCurrentRecord().id
             // 检查返回的数据是否存在且不为空
             if (res.data && res.data.processDeviceList) {
-                dataSource.value = res.data.processDeviceList.filter(item => (item.name = item.processNo + ''))
+                dataSource.value = res.data.processDeviceList.filter(item => (item.name = item.processNo + '号进程'))
             } else {
                 dataSource.value = []
             }
diff --git a/src/views/pqs/cockpit/homePage/index.vue b/src/views/pqs/cockpit/homePage/index.vue
index 630afff..b472b74 100644
--- a/src/views/pqs/cockpit/homePage/index.vue
+++ b/src/views/pqs/cockpit/homePage/index.vue
@@ -315,13 +315,13 @@ onUnmounted(() => {
 <style lang="scss" scoped>
 .vgl-layout {
     background-color: #f8f9fa;
-    border-radius: 4px;
+    border-radius: 5px;
     overflow: hidden;
 }
 
 :deep(.vgl-item:not(.vgl-item--placeholder)) {
     background-color: #ffffff;
-    border-radius: 4px;
+    border-radius: 5px;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
     transition: all 0.3s ease;
 }
diff --git a/src/views/pqs/cockpit/setUp/components/view.vue b/src/views/pqs/cockpit/setUp/components/view.vue
index 3034e00..aaa7eb8 100644
--- a/src/views/pqs/cockpit/setUp/components/view.vue
+++ b/src/views/pqs/cockpit/setUp/components/view.vue
@@ -224,13 +224,13 @@ onUnmounted(() => {
 <style lang="scss" scoped>
 .vgl-layout {
     background-color: #f8f9fa;
-    border-radius: 4px;
+    border-radius: 5px;
     overflow: hidden;
 }
 
 :deep(.vgl-item:not(.vgl-item--placeholder)) {
     background-color: #ffffff;
-    border-radius: 4px;
+    border-radius: 5px;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
     transition: all 0.3s ease;
 }