From 50303d03018ad196cae128497268f2b03f8d7e48 Mon Sep 17 00:00:00 2001
From: Joshi <3040996759@qq.com>
Date: Mon, 13 Oct 2025 11:40:34 +0800
Subject: [PATCH] =?UTF-8?q?feat(ems):=20=E6=96=B0=E5=A2=9E=20EMS=20?=
 =?UTF-8?q?=E6=A6=82=E8=A7=88=E9=A1=B5=E9=9D=A2=E5=8F=8A=20SVG=20=E4=BA=A4?=
 =?UTF-8?q?=E4=BA=92=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加 EMS 概览页面基础结构与样式
- 实现 SVG 区域绘制与点击交互逻辑
- 支持三级视图切换控制点位显示- 添加区域与点位的缩放与重置功能- 实现点位详情弹窗展示设备数据
- 添加点位状态颜色标识（正常/告警/维护）- 预留点位数据查询接口调用方法
- 样式优化与响应式布局调整
---
 klp-ui/src/views/ems/overview/index.vue | 237 ++++++++++++++++++++++++
 1 file changed, 237 insertions(+)
 create mode 100644 klp-ui/src/views/ems/overview/index.vue

diff --git a/klp-ui/src/views/ems/overview/index.vue b/klp-ui/src/views/ems/overview/index.vue
new file mode 100644
index 00000000..b8e16a6c
--- /dev/null
+++ b/klp-ui/src/views/ems/overview/index.vue
@@ -0,0 +1,237 @@
+<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-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>
+      </div>
+    </div>
+
+    <div class="canvas-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-if="viewLevel!==1 || area.id===selectedAreaId">
+            <g v-for="pt in area.pointsInfo" :key="pt.id" @click.stop="openPoint(pt, area)" 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"
+                :fill="ptFill(pt)"
+                stroke="#444"
+                :stroke-width="pt.id===selectedPoint&&id ? 2 : 1"
+                :opacity="viewLevel===2 ? 0.9 : 0.75"
+              />
+              <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 || '--') }}
+              </text>
+              <text :x="pt.x" :y="pt.y+24" class="pt-sub">
+                {{ (pt.deviceData&&metric2&&label || '状态') + ': ' + (pt.deviceData&&metric2&&value || '--') }}
+              </text>
+            </g>
+          </g>
+        </g>
+      </svg>
+    </div>
+
+    <!-- 点位详情 -->
+    <el-dialog
+      title="点位详情"
+      :visible.sync="pointDialogOpen"
+      width="420px"
+      append-to-body
+    >
+      <div v-if="selectedPoint">
+        <p>点位名称：{{ selectedPoint.name }}</p>
+        <p>所属区域：{{ 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>
+        </ul>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="mini" type="primary" @click="pointDialogOpen=false">关 闭</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'EmsOverview',
+  data() {
+    return {
+      viewLevel: 1, // 1/2/3 切换视图
+      scale: 1,
+      viewBox: '0 0 1200 700',
+      selectedAreaId: null,
+      selectedPoint: null,
+      selectedArea: null,
+      pointDialogOpen: false,
+      // 示例数据：可替换为接口返回
+      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},
+          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: '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},
+          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: '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},
+          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:'正常'} } },
+          ]
+        }
+      ]
+    };
+  },
+  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 w = base.w / this.scale;
+      const h = base.h / this.scale;
+      this.viewBox = `0 0 ${w} ${h}`;
+    },
+    resetView() {
+      this.scale = 1;
+      this.viewBox = '0 0 1200 700';
+      this.selectedAreaId = null;
+      this.selectedPoint = null;
+      this.selectedArea = null;
+    },
+    selectArea(area) {
+      this.selectedAreaId = area.id;
+      this.selectedArea = area;
+    },
+    openPoint(pt, area) {
+      this.selectedPoint = pt;
+      this.selectedArea = area;
+      this.pointDialogOpen = true;
+    },
+    ptFill(pt) {
+      const val = (pt.deviceData&&metric2&&value || '').toString();
+      if (val.includes('告警') || val.includes('异常')) return '#ff6b6b';
+      if (val.includes('维护')) return '#ffd166';
+      return '#8ecae6';
+    },
+    // 预留点位查询（据位查询）接口
+    queryPoints(params) {
+      // TODO: 调用后端接口，更新 areas[].pointsInfo
+      // this.$api.xxx(params).then(res => { ... })
+    }
+  }
+};
+</script>
+
+<style scoped>
+.ems-overview {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+.toolbar-right {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+.canvas-wrapper {
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  background: #f8fafc;
+  height: 720px;
+  position: relative;
+  overflow: hidden;
+}
+.overview-svg {
+  width: 100%;
+  height: 100%;
+}
+.area-label {
+  fill: #fff;
+  font-size: 16px;
+  font-weight: 600;
+  text-shadow: 0 1px 1px rgba(0,0,0,0.2);
+}
+.pt-title, .pt-sub {
+  fill: #fff;
+  font-size: 12px;
+  text-anchor: middle;
+}
+.point-ul {
+  margin: 0;
+  padding-left: 16px;
+}
+</style>
\ No newline at end of file