From d8175ef41da932d5ee9ab1fa9740497ea66e6d1e Mon Sep 17 00:00:00 2001
From: Joshi <3040996759@qq.com>
Date: Tue, 14 Oct 2025 09:40:21 +0800
Subject: [PATCH] =?UTF-8?q?feat(ems):=E9=87=8D=E6=9E=84=20overview=20?=
 =?UTF-8?q?=E8=A7=86=E5=9B=BE=E4=B8=8E=E6=9F=A5=E8=AF=A2=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 区域绘制方式由多边形改为矩形拼接，提升渲染灵活性- 新增据位/设备关键词查询功能，支持高亮匹配点位
- 添加悬浮信息卡展示区域库存与点位指标详情- 优化点位与区域点击交互，支持事件定位与数据展示
- 完善指标值安全读取逻辑，增强数据容错处理
- 接入后端查询接口，支持动态更新区域与点位数据- 样式优化：增加信息高亮、文本阴影与响应式布局
- 移除冗余字段展示，精简表格列配置
---
 klp-ui/src/views/ems/overview/index.vue     | 457 ++++++++++++++++----
 klp-ui/src/views/ems/safetyEnvDoc/index.vue |   1 -
 2 files changed, 384 insertions(+), 74 deletions(-)

diff --git a/klp-ui/src/views/ems/overview/index.vue b/klp-ui/src/views/ems/overview/index.vue
index b8e16a6c..359eaeab 100644
--- a/klp-ui/src/views/ems/overview/index.vue
+++ b/klp-ui/src/views/ems/overview/index.vue
@@ -1,58 +1,102 @@
 <template>
   <div class="app-container ems-overview">
     <div class="toolbar">
-      <el-button-group>
-        <el-button size="mini" :type="viewLevel===1?'primary':'default'" @click="setView(1)">1</el-button>
-        <el-button size="mini" :type="viewLevel===2?'primary':'default'" @click="setView(2)">2</el-button>
-        <el-button size="mini" :type="viewLevel===3?'primary':'default'" @click="setView(3)">3</el-button>
-      </el-button-group>
+      <div class="toolbar-left">
+        <el-button-group>
+          <el-button size="mini" :type="viewLevel===1?'primary':'default'" @click="setView(1)">1</el-button>
+          <el-button size="mini" :type="viewLevel===2?'primary':'default'" @click="setView(2)">2</el-button>
+          <el-button size="mini" :type="viewLevel===3?'primary':'default'" @click="setView(3)">3</el-button>
+        </el-button-group>
+        <el-input
+          size="mini"
+          v-model="query.keyword"
+          placeholder="据位/设备关键词"
+          clearable
+          class="q-input"
+          @keyup.enter.native="handleQuery"
+        />
+        <el-button size="mini" type="primary" @click="handleQuery">查询</el-button>
+        <el-button size="mini" @click="resetQuery">重置查询</el-button>
+      </div>
       <div class="toolbar-right">
         <el-button size="mini" icon="el-icon-zoom-in" @click="zoom(1.1)"/>
         <el-button size="mini" icon="el-icon-zoom-out" @click="zoom(0.9)"/>
-        <el-button size="mini" icon="el-icon-refresh" @click="resetView">重置</el-button>
+        <el-button size="mini" icon="el-icon-refresh" @click="resetView">重置视图</el-button>
       </div>
     </div>
 
-    <div class="canvas-wrapper">
+    <div class="canvas-wrapper" ref="wrapper">
       <svg :viewBox="viewBox" class="overview-svg">
-        <!-- 区域多边形 -->
-        <g v-for="area in areas" :key="area.id" @click="selectArea(area)" style="cursor:pointer;">
-          <polygon
-            :points="area.points.map(p => p.x+','+p.y).join(' ')"
-            :fill="area.id===selectedAreaId ? area.fillActive : area.fill"
-            :stroke="area.stroke"
-            :stroke-width="2"
-            :opacity="viewLevel===3 ? 0.8 : 1"
-          />
-          <!-- 区域标题 -->
-          <text :x="area.labelPos.x" :y="area.labelPos.y" class="area-label">{{ area.name }}</text>
+        <!-- 区域：由矩形拼接组成 -->
+        <g
+          v-for="area in areas"
+          :key="area.id"
+          style="cursor:pointer;"
+          @click="selectArea(area, $event)"
+        >
+          <!-- 拼接矩形 -->
+          <g v-for="(shape, idx) in area.shapes" :key="area.id + '_s_' + idx">
+            <rect
+              :x="shape.x"
+              :y="shape.y"
+              :width="shape.w"
+              :height="shape.h"
+              :fill="area.id===selectedAreaId ? area.fillActive : area.fill"
+              :stroke="area.stroke"
+              :stroke-width="2"
+              :opacity="viewLevel===3 ? 0.8 : 1"
+              rx="4"
+              ry="4"
+            />
+          </g>
 
-          <!-- 点位格子，仅在选中或特定视图显示 -->
+          <!-- 区域标题 -->
+          <text :x="area.labelPos.x" :y="area.labelPos.y" class="area-label">
+            {{ area.name }}
+          </text>
+
+          <!-- 点位格子（方/长方形） -->
           <g v-if="viewLevel!==1 || area.id===selectedAreaId">
-            <g v-for="pt in area.pointsInfo" :key="pt.id" @click.stop="openPoint(pt, area)" style="cursor:pointer;">
+            <g
+              v-for="pt in area.pointsInfo"
+              :key="pt.id"
+              @click.stop="openPoint(pt, area, $event)"
+              style="cursor:pointer;"
+            >
               <rect
                 :x="pt.x-pt.w/2"
                 :y="pt.y-pt.h/2"
                 :width="pt.w"
                 :height="pt.h"
-                :rx="4"
-                :ry="4"
+                rx="4"
+                ry="4"
                 :fill="ptFill(pt)"
                 stroke="#444"
-                :stroke-width="pt.id===selectedPoint&&id ? 2 : 1"
-                :opacity="viewLevel===2 ? 0.9 : 0.75"
+                :stroke-width="selectedPoint && selectedPoint.id===pt.id ? 2 : 1"
+                :opacity="viewLevel===2 ? 0.9 : 0.8"
+                :class="{'pt-highlight': highlightedIds.has(pt.id)}"
               />
               <text :x="pt.x" :y="pt.y-6" class="pt-title">{{ pt.name }}</text>
               <text :x="pt.x" :y="pt.y+10" class="pt-sub">
-                {{ (pt.deviceData&&metric1&&label || '温度') + ': ' + (pt.deviceData&&metric1&&value || '--') }}
+                {{ safeMetric(pt, 'metric1', 'label', '指标1') + '：' + safeMetric(pt, 'metric1', 'value', '--') }}
               </text>
               <text :x="pt.x" :y="pt.y+24" class="pt-sub">
-                {{ (pt.deviceData&&metric2&&label || '状态') + ': ' + (pt.deviceData&&metric2&&value || '--') }}
+                {{ safeMetric(pt, 'metric2', 'label', '指标2') + '：' + safeMetric(pt, 'metric2', 'value', '--') }}
               </text>
             </g>
           </g>
         </g>
       </svg>
+
+      <!-- 悬浮信息卡（点击块/点位时显示） -->
+      <div
+        v-if="infoBox.show"
+        class="info-box"
+        :style="{ left: infoBox.x + 'px', top: infoBox.y + 'px' }"
+      >
+        <div class="info-title">{{ infoBox.title }}</div>
+        <div class="info-line" v-for="(line, i) in infoBox.lines" :key="i">{{ line }}</div>
+      </div>
     </div>
 
     <!-- 点位详情 -->
@@ -64,13 +108,19 @@
     >
       <div v-if="selectedPoint">
         <p>点位名称：{{ selectedPoint.name }}</p>
-        <p>所属区域：{{ selectedArea&&name }}</p>
+        <p>所属区域：{{ selectedArea ? selectedArea.name : '-' }}</p>
         <p>坐标：({{ selectedPoint.x }}, {{ selectedPoint.y }})</p>
         <el-divider></el-divider>
         <p>设备数据：</p>
         <ul class="point-ul">
-          <li>{{ selectedPoint.deviceData&&metric1&&label || '温度' }}：{{ selectedPoint.deviceData&&metric1&&value || '--' }}</li>
-          <li>{{ selectedPoint.deviceData&&metric2&&label || '状态' }}：{{ selectedPoint.deviceData&&metric2&&value || '--' }}</li>
+          <li>
+            {{ safeMetric(selectedPoint, 'metric1', 'label', '指标1') }}：
+            {{ safeMetric(selectedPoint, 'metric1', 'value', '--') }}
+          </li>
+          <li>
+            {{ safeMetric(selectedPoint, 'metric2', 'label', '指标2') }}：
+            {{ safeMetric(selectedPoint, 'metric2', 'value', '--') }}
+          </li>
         </ul>
       </div>
       <span slot="footer" class="dialog-footer">
@@ -81,6 +131,7 @@
 </template>
 
 <script>
+// @ts-nocheck
 export default {
   name: 'EmsOverview',
   data() {
@@ -92,55 +143,110 @@ export default {
       selectedPoint: null,
       selectedArea: null,
       pointDialogOpen: false,
-      // 示例数据：可替换为接口返回
+
+      // 查询
+      query: {
+        keyword: ''
+      },
+      highlightedIds: new Set(),
+
+      infoBox: {
+        show: false,
+        x: 0,
+        y: 0,
+        title: '',
+        lines: []
+      },
+
+      // 示例数据：使用由正方形/长方形拼接的区域形状
       areas: [
         {
           id: 'A',
           name: '冷藏区',
-          points: [{x:60,y:80},{x:1100,y:80},{x:1100,y:620},{x:60,y:620}], // 矩形（可改为不规则）
-          labelPos: {x:100, y:120},
+          // 用多个长方形拼接
+          shapes: [
+            { x: 40, y: 60, w: 560, h: 560 }, // 大矩形
+            { x: 40, y: 620, w: 560, h: 10 }  // 底部细条，强调边界（可选）
+          ],
+          labelPos: { x: 60, y: 110 },
           fill: '#4c6ef5',
           fillActive: '#3b5bdb',
           stroke: '#2b2d42',
+          // 点位
           pointsInfo: [
-            { id:'A1', name:'点位-01', x:250, y:220, w:110, h:70,
-              deviceData: { metric1:{label:'温度', value:'4.2℃'}, metric2:{label:'状态', value:'正常'} } },
-            { id:'A2', name:'点位-02', x:520, y:260, w:110, h:70,
-              deviceData: { metric1:{label:'温度', value:'5.1℃'}, metric2:{label:'状态', value:'正常'} } },
-            { id:'A3', name:'点位-03', x:820, y:340, w:110, h:70,
-              deviceData: { metric1:{label:'温度', value:'7.8℃'}, metric2:{label:'状态', value:'告警'} } },
-          ]
+            {
+              id: 'A1', name: '点位-01', x: 250, y: 220, w: 110, h: 70,
+              deviceData: { metric1: { label: '温度', value: '4.2℃' }, metric2: { label: '状态', value: '正常' } }
+            },
+            {
+              id: 'A2', name: '点位-02', x: 520, y: 260, w: 110, h: 70,
+              deviceData: { metric1: { label: '温度', value: '5.1℃' }, metric2: { label: '状态', value: '正常' } }
+            },
+            {
+              id: 'A3', name: '点位-03', x: 420, y: 420, w: 110, h: 70,
+              deviceData: { metric1: { label: '温度', value: '7.8℃' }, metric2: { label: '状态', value: '告警' } }
+            }
+          ],
+          // 库存示例（点击区域显示）
+          inventory: { title: '库存', count: 31890 }
         },
         {
           id: 'B',
           name: '冷冻区',
-          points: [{x:640,y:80},{x:1140,y:80},{x:1140,y:620},{x:640,y:620}], // 与 A 有交叠边以示多区
-          labelPos: {x:680, y:120},
+          shapes: [
+            { x: 620, y: 60, w: 520, h: 280 }, // 上部
+            { x: 620, y: 350, w: 520, h: 270 } // 下部
+          ],
+          labelPos: { x: 640, y: 110 },
           fill: '#4ea8de',
           fillActive: '#3a86ff',
           stroke: '#1b263b',
           pointsInfo: [
-            { id:'B1', name:'点位-11', x:780, y:220, w:110, h:70,
-              deviceData: { metric1:{label:'温度', value:'-12.3℃'}, metric2:{label:'状态', value:'正常'} } },
-            { id:'B2', name:'点位-12', x:980, y:460, w:110, h:70,
-              deviceData: { metric1:{label:'温度', value:'-10.0℃'}, metric2:{label:'状态', value:'维护'} } },
-          ]
+            {
+              id: 'B1', name: '点位-11', x: 780, y: 220, w: 110, h: 70,
+              deviceData: { metric1: { label: '温度', value: '-12.3℃' }, metric2: { label: '状态', value: '正常' } }
+            },
+            {
+              id: 'B2', name: '点位-12', x: 980, y: 460, w: 110, h: 70,
+              deviceData: { metric1: { label: '温度', value: '-10.0℃' }, metric2: { label: '状态', value: '维护' } }
+            }
+          ],
+          inventory: { title: '库存', count: 21890 }
         },
-        // 不规则多边形区域示例
+        // 分拣区：原来是不规则多边形，现改为由多个矩形拼接成“侧边栏”效果
         {
           id: 'C',
           name: '分拣区',
-          points: [{x:1040,y:90},{x:1170,y:180},{x:1170,y:560},{x:1040,y:650},{x:980,y:650},{x:980,y:90}],
-          labelPos: {x:1000, y:220},
+          shapes: [
+            { x: 1160, y: 60,  w: 20,  h: 560 }, // 竖条边框
+            { x: 1080, y: 60,  w: 70,  h: 130 },
+            { x: 1080, y: 200, w: 70,  h: 130 },
+            { x: 1080, y: 340, w: 70,  h: 130 },
+            { x: 1080, y: 480, w: 70,  h: 140 }
+          ],
+          labelPos: { x: 1090, y: 90 },
           fill: '#95d5b2',
           fillActive: '#74c69d',
           stroke: '#2d6a4f',
           pointsInfo: [
-            { id:'C1', name:'点位-21', x:1040, y:240, w:120, h:76,
-              deviceData: { metric1:{label:'能量', value:'1000g'}, metric2:{label:'状态', value:'良好'} } },
-            { id:'C2', name:'点位-22', x:1040, y:440, w:120, h:76,
-              deviceData: { metric1:{label:'显卡', value:'4001'}, metric2:{label:'状态', value:'正常'} } },
-          ]
+            {
+              id: 'C1', name: '能量棒', x: 1115, y: 130, w: 60, h: 60,
+              deviceData: { metric1: { label: '重量', value: '1000g' }, metric2: { label: '状态', value: '良好' } }
+            },
+            {
+              id: 'C2', name: '显卡', x: 1115, y: 270, w: 60, h: 60,
+              deviceData: { metric1: { label: '型号', value: '4001' }, metric2: { label: '状态', value: '正常' } }
+            },
+            {
+              id: 'C3', name: '特种钢', x: 1115, y: 410, w: 60, h: 60,
+              deviceData: { metric1: { label: '数量', value: '999个' }, metric2: { label: '状态', value: '正常' } }
+            },
+            {
+              id: 'C4', name: '能量棒', x: 1115, y: 560, w: 60, h: 60,
+              deviceData: { metric1: { label: '重量', value: '500g' }, metric2: { label: '状态', value: '正常' } }
+            }
+          ],
+          inventory: { title: '库存', count: 4080 }
         }
       ]
     };
@@ -148,13 +254,10 @@ export default {
   methods: {
     setView(n) {
       this.viewLevel = n;
-      // 可在不同视图级别下调整呈现元素
-      // 例如：viewLevel===1 仅显示区域；2 显示点位；3 显示热力/状态覆盖
     },
     zoom(factor) {
       this.scale = Math.max(0.5, Math.min(2.5, this.scale * factor));
-      // 通过调整 viewBox 或 transform 控制缩放，这里直接改 viewBox 以简化
-      const base = { w:1200, h:700 };
+      const base = { w: 1200, h: 700 };
       const w = base.w / this.scale;
       const h = base.h / this.scale;
       this.viewBox = `0 0 ${w} ${h}`;
@@ -165,26 +268,197 @@ export default {
       this.selectedAreaId = null;
       this.selectedPoint = null;
       this.selectedArea = null;
+      this.hideInfo();
+      this.highlightedIds = new Set();
     },
-    selectArea(area) {
-      this.selectedAreaId = area.id;
-      this.selectedArea = area;
-    },
-    openPoint(pt, area) {
-      this.selectedPoint = pt;
-      this.selectedArea = area;
-      this.pointDialogOpen = true;
+
+    // 安全读取设备指标
+    safeMetric(obj, mKey, fKey, defVal) {
+      if (!obj || !obj.deviceData) return defVal;
+      const m = obj.deviceData[mKey];
+      return m && m[fKey] != null ? m[fKey] : defVal;
     },
+
+    // 点位填充色
     ptFill(pt) {
-      const val = (pt.deviceData&&metric2&&value || '').toString();
+      const val = (this.safeMetric(pt, 'metric2', 'value', '') || '').toString();
       if (val.includes('告警') || val.includes('异常')) return '#ff6b6b';
       if (val.includes('维护')) return '#ffd166';
       return '#8ecae6';
     },
-    // 预留点位查询（据位查询）接口
+
+    // 区域选择 + 信息卡显示（库存）
+    selectArea(area, evt) {
+      this.selectedAreaId = area.id;
+      this.selectedArea = area;
+      this.showInfo(evt, area.name, [
+        area.inventory?.title || '库存',
+        `库存数量：${this.formatNumber(area.inventory?.count ?? 0)}`
+      ]);
+    },
+
+    // 打开点位（弹框 + 信息卡）
+    openPoint(pt, area, evt) {
+      this.selectedPoint = pt;
+      this.selectedArea = area;
+      this.pointDialogOpen = true;
+
+      const l1 = `${this.safeMetric(pt, 'metric1', 'label', '指标1')}：${this.safeMetric(pt, 'metric1', 'value', '--')}`;
+      const l2 = `${this.safeMetric(pt, 'metric2', 'label', '指标2')}：${this.safeMetric(pt, 'metric2', 'value', '--')}`;
+      this.showInfo(evt, pt.name, [l1, l2]);
+    },
+
+    // 悬浮信息卡
+    showInfo(evt, title, lines) {
+      const wrap = this.$refs.wrapper;
+      if (!wrap) return;
+      const rect = wrap.getBoundingClientRect();
+      const x = evt.clientX - rect.left + 12;
+      const y = evt.clientY - rect.top + 12;
+      this.infoBox = { show: true, x, y, title, lines };
+    },
+    hideInfo() {
+      this.infoBox.show = false;
+    },
+
+    // 查询（据位查询）：优先走接口，失败回退本地过滤
+    async handleQuery() {
+      const kw = (this.query.keyword || '').trim();
+      this.highlightedIds = new Set();
+      if (!kw) {
+        this.hideInfo();
+        return;
+      }
+      let usedApi = false;
+      try {
+        // 存在封装的 API 则调用
+        if (this.$api && this.$api.ems && this.$api.ems.queryPoints) {
+          await this.queryPoints({ keyword: kw });
+          usedApi = true;
+        }
+      } catch (e) {
+        // 忽略接口错误，回退本地
+        usedApi = false;
+      }
+
+      // 高亮与信息卡（对当前 this.areas 数据集进行）
+      let firstHit = null;
+      this.areas.forEach(area => {
+        (area.pointsInfo || []).forEach(pt => {
+          const text = [
+            pt.name,
+            this.safeMetric(pt, 'metric1', 'label', ''),
+            this.safeMetric(pt, 'metric1', 'value', ''),
+            this.safeMetric(pt, 'metric2', 'label', ''),
+            this.safeMetric(pt, 'metric2', 'value', '')
+          ].join(' ');
+          if (text.includes(kw)) {
+            this.highlightedIds.add(pt.id);
+            if (!firstHit) firstHit = { pt, area };
+          }
+        });
+      });
+
+      if (firstHit) {
+        this.selectedAreaId = firstHit.area.id;
+        this.selectedArea = firstHit.area;
+        this.selectedPoint = firstHit.pt;
+        const wrap = this.$refs.wrapper;
+        if (wrap) {
+          const rect = wrap.getBoundingClientRect();
+          const x = (firstHit.pt.x / (1200 / rect.width)) + 12;
+          const y = (firstHit.pt.y / (700 / rect.height)) + 12;
+          this.infoBox = {
+            show: true,
+            x: Math.min(rect.width - 220, Math.max(8, x)),
+            y: Math.min(rect.height - 140, Math.max(8, y)),
+            title: firstHit.pt.name,
+            lines: [
+              `${this.safeMetric(firstHit.pt, 'metric1', 'label', '指标1')}：${this.safeMetric(firstHit.pt, 'metric1', 'value', '--')}`,
+              `${this.safeMetric(firstHit.pt, 'metric2', 'label', '指标2')}：${this.safeMetric(firstHit.pt, 'metric2', 'value', '--')}`
+            ]
+          };
+        }
+      } else {
+        this.$message.info(usedApi ? '接口无匹配结果' : '未查询到匹配点位/设备数据');
+        this.hideInfo();
+      }
+    },
+    resetQuery() {
+      this.query.keyword = '';
+      this.highlightedIds = new Set();
+      this.hideInfo();
+    },
+
+    // 对接接口：据位查询或区域点位拉取
     queryPoints(params) {
-      // TODO: 调用后端接口，更新 areas[].pointsInfo
-      // this.$api.xxx(params).then(res => { ... })
+      if (!(this.$api && this.$api.ems && this.$api.ems.queryPoints)) {
+        return Promise.resolve();
+      }
+      return this.$api.ems.queryPoints(params).then(res => {
+        const data = (res && (res.data ?? res)) || {};
+        // 结构 A：包含 areas
+        if (Array.isArray(data.areas)) {
+          // 将后端 areas 适配为前端结构，缺省字段从现有同 id 区域继承
+          const existMap = new Map(this.areas.map(a => [a.id, a]));
+          this.areas = data.areas.map(a => {
+            const old = existMap.get(a.id) || {};
+            return {
+              id: a.id,
+              name: a.name ?? old.name ?? '',
+              shapes: Array.isArray(a.shapes) ? a.shapes : (old.shapes || []),
+              labelPos: a.labelPos ?? old.labelPos ?? { x: 60, y: 110 },
+              fill: old.fill || '#4c6ef5',
+              fillActive: old.fillActive || '#3b5bdb',
+              stroke: old.stroke || '#2b2d42',
+              inventory: a.inventory ?? old.inventory ?? null,
+              pointsInfo: Array.isArray(a.points)
+                ? a.points.map(p => ({
+                    id: p.id, name: p.name,
+                    x: p.x, y: p.y, w: p.w, h: p.h,
+                    deviceData: p.deviceData || {}
+                  }))
+                : (old.pointsInfo || [])
+            };
+          });
+          return;
+        }
+        // 结构 B：仅返回 points（需含 areaId）
+        if (Array.isArray(data.points)) {
+          const byArea = {};
+          data.points.forEach(p => {
+            const aid = p.areaId;
+            if (!aid) return;
+            (byArea[aid] = byArea[aid] || []).push({
+              id: p.id, name: p.name,
+              x: p.x, y: p.y, w: p.w, h: p.h,
+              deviceData: p.deviceData || {}
+            });
+          });
+          this.areas = this.areas.map(a => ({
+            ...a,
+            pointsInfo: byArea[a.id] ? byArea[a.id] : (a.pointsInfo || [])
+          }));
+          // 可选：data.areasInfo 覆盖库存
+          if (Array.isArray(data.areasInfo)) {
+            const infoMap = new Map(data.areasInfo.map(i => [i.id || i.areaId, i]));
+            this.areas = this.areas.map(a => ({
+              ...a,
+              inventory: infoMap.get(a.id)?.inventory ?? a.inventory
+            }));
+          }
+          return;
+        }
+        // 未识别结构，保持不变
+      }).catch(err => {
+        this.$message.error('查询接口失败');
+        // 继续走本地回退
+      });
+    },
+
+    formatNumber(n) {
+      const str = (n ?? 0).toString();
+      return str.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
     }
   }
 };
@@ -202,11 +476,20 @@ export default {
   align-items: center;
   margin-bottom: 8px;
 }
+.toolbar-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.q-input {
+  width: 220px;
+}
 .toolbar-right {
   display: flex;
   gap: 6px;
   align-items: center;
 }
+
 .canvas-wrapper {
   border: 1px solid #e5e7eb;
   border-radius: 6px;
@@ -220,16 +503,44 @@ export default {
   height: 100%;
 }
 .area-label {
-  fill: #fff;
+  fill: #ffffff;
   font-size: 16px;
-  font-weight: 600;
+  font-weight: 700;
   text-shadow: 0 1px 1px rgba(0,0,0,0.2);
 }
 .pt-title, .pt-sub {
-  fill: #fff;
+  fill: #ffffff;
   font-size: 12px;
   text-anchor: middle;
+  user-select: none;
+  pointer-events: none;
 }
+.pt-highlight {
+  stroke: #ffb703 !important;
+  stroke-width: 3 !important;
+}
+
+.info-box {
+  position: absolute;
+  min-width: 180px;
+  max-width: 240px;
+  background: #fff;
+  color: #111827;
+  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
+  border-radius: 8px;
+  padding: 10px 12px;
+  z-index: 10;
+  pointer-events: none;
+}
+.info-title {
+  font-weight: 600;
+  margin-bottom: 6px;
+}
+.info-line {
+  font-size: 12px;
+  line-height: 18px;
+}
+
 .point-ul {
   margin: 0;
   padding-left: 16px;
diff --git a/klp-ui/src/views/ems/safetyEnvDoc/index.vue b/klp-ui/src/views/ems/safetyEnvDoc/index.vue
index bba5bdf8..39b0edfb 100644
--- a/klp-ui/src/views/ems/safetyEnvDoc/index.vue
+++ b/klp-ui/src/views/ems/safetyEnvDoc/index.vue
@@ -105,7 +105,6 @@
 
     <el-table v-loading="loading" :data="safetyEnvDocList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="文档ID" align="center" prop="docId" v-if="true"/>
       <el-table-column label="文档编号" align="center" prop="docNo" />
       <el-table-column label="文档名称" align="center" prop="docName" />
       <el-table-column label="文档分类" align="center" prop="docCategory">