From 54810b76d0259ff0d19d7d00221dfba25bd85419 Mon Sep 17 00:00:00 2001
From: suixy <2277317060@qq.com>
Date: Mon, 13 Apr 2026 17:58:27 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=8E=A5=E5=8F=A3=E5=92=8C?=
 =?UTF-8?q?=E6=96=B0=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/visualEditor/index.vue              | 537 +++++++++++++++++-
 src/views/visualEditor/nodes/area.vue         |  50 +-
 .../visualEditor/nodes/deviceDataList.vue     |   5 -
 3 files changed, 578 insertions(+), 14 deletions(-)

diff --git a/src/views/visualEditor/index.vue b/src/views/visualEditor/index.vue
index 595403a..95cf22f 100644
--- a/src/views/visualEditor/index.vue
+++ b/src/views/visualEditor/index.vue
@@ -1,6 +1,7 @@
 <template>
   <div style="width: 100%; height: 100vh">
     <div class="top">
+      <el-button type="primary" @click="restoration">复位</el-button>
       <el-button type="primary">保存</el-button>
       <el-button type="info" @click="setPageData">设置</el-button>
     </div>
@@ -71,7 +72,6 @@
         :zoom-on-double-click="false"
         :snapToGrid="isSnapToGrid"
         :panOnDrag="false"
-        :zoomOnScroll="false"
         :autoPanSpeed="0"
         :snapGrid="[10, 10]"
         v-model:nodes="nodes"
@@ -93,7 +93,10 @@
         />
 
         <template #node-area="props">
-          <AreaNode v-bind="props" :pageData="{ width: '960px', height: '540px' }"></AreaNode>
+          <AreaNode
+            v-bind="props"
+            :pageData="{ width: '960px', height: '540px', bgColor: nodes.find((e) => (e.type = 'area'))?.data.style.backgroundColor }"
+          ></AreaNode>
         </template>
         <template #node-circuitComponent="props">
           <CircuitComponentNode :monitorType="monitorType" v-bind="props" :networkData="deviceData" />
@@ -226,6 +229,7 @@ import TextNode from './nodes/text.vue';
 import { MarkerType, useVueFlow, VueFlow } from '@vue-flow/core';
 import { Background } from '@vue-flow/background';
 import tool from './tool.js';
+import { getIotEnvMonitorLatestAll } from '@/api/ems/report/recordIotenvInstant/index.ts';
 
 const rightRef = ref();
 const flowRef = ref();
@@ -279,14 +283,516 @@ const deviceData = ref([
 ]);
 
 const monitorType = ref([
-  { label: '温度', value: 'tem' },
-  { label: '字段1', value: 'a' },
-  { label: '字段2', value: 'v' }
+  { label: '温度', value: 'temperature' },
+  { label: '湿度', value: 'humidity' },
+  { label: '照度', value: 'illuminance' },
+  { label: '噪声', value: 'noise' },
+  { label: '硫化氢浓度', value: 'concentration' },
+  { label: '振动速度', value: 'vibrationSpeed' },
+  { label: '振动位移', value: 'vibrationDisplacement' },
+  { label: '振动加速度', value: 'vibrationAcceleration' },
+  { label: '振动温度', value: 'vibrationTemp' }
 ]);
 
 const { onDragStart, onDrop, onDragOver } = tool();
 const { addEdges, updateNode, removeNodes, addNodes, onNodesChange } = useVueFlow({ id: 'flowA' });
+const transformData = (arr) => {
+  const exclude = ['collectTime', 'objid', 'monitorCode', 'monitorId', 'monitorType'];
 
+  return arr.map((item) => {
+    const options = {};
+
+    Object.keys(item).forEach((key) => {
+      if (!exclude.includes(key)) {
+        options[key] = item[key];
+      }
+    });
+
+    return {
+      id: item.monitorCode,
+      options
+    };
+  });
+};
+
+/*
+[
+    {
+        "id": "6",
+        "options": {
+            "monitorName": "666",
+            "energyName": "未知",
+            "temperature": null,
+            "humidity": null,
+            "illuminance": null,
+            "noise": null,
+            "concentration": null,
+            "vibrationSpeed": null,
+            "vibrationDisplacement": null,
+            "vibrationAcceleration": null,
+            "vibrationTemp": null,
+            "recodeTime": null
+        }
+    },
+    {
+        "id": "T0001",
+        "options": {
+            "monitorName": "温度",
+            "energyName": "温度",
+            "temperature": null,
+            "recodeTime": null
+        }
+    },
+    {
+        "id": "H0001",
+        "options": {
+            "monitorName": "温湿度",
+            "energyName": "温湿度",
+            "temperature": null,
+            "humidity": null,
+            "recodeTime": null
+        }
+    },
+    {
+        "id": "Z0001",
+        "options": {
+            "monitorName": "振动",
+            "energyName": "振动",
+            "vibrationSpeed": null,
+            "vibrationDisplacement": null,
+            "vibrationAcceleration": null,
+            "vibrationTemp": null,
+            "recodeTime": null
+        }
+    },
+    {
+        "id": "N0001",
+        "options": {
+            "monitorName": "噪声",
+            "energyName": "噪声",
+            "noise": null,
+            "recodeTime": null
+        }
+    },
+    {
+        "id": "E0001_1900",
+        "options": {
+            "monitorName": "LCC81交换机箱",
+            "energyName": "温度",
+            "temperature": "20.5000",
+            "recodeTime": "2026-04-09 14:54:09"
+        }
+    },
+    {
+        "id": "E0001_1400",
+        "options": {
+            "monitorName": "LCC24网关箱",
+            "energyName": "温度",
+            "temperature": "19.3700",
+            "recodeTime": "2026-04-09 14:54:09"
+        }
+    },
+    {
+        "id": "E0001_2100",
+        "options": {
+            "monitorName": "CCC02主控柜",
+            "energyName": "温度",
+            "temperature": "18.8100",
+            "recodeTime": "2026-04-09 14:54:10"
+        }
+    },
+    {
+        "id": "E0001_0400",
+        "options": {
+            "monitorName": "VSB",
+            "energyName": "温度",
+            "temperature": "20.1200",
+            "recodeTime": "2026-04-09 14:54:10"
+        }
+    },
+    {
+        "id": "E0001_2200",
+        "options": {
+            "monitorName": "7.47.01",
+            "energyName": "温度",
+            "temperature": "45.1800",
+            "recodeTime": "2026-04-09 14:54:10"
+        }
+    },
+    {
+        "id": "E0001_0700",
+        "options": {
+            "monitorName": "7.49.01",
+            "energyName": "温度",
+            "temperature": "18.8700",
+            "recodeTime": "2026-04-09 14:54:10"
+        }
+    },
+    {
+        "id": "E0002_1100",
+        "options": {
+            "monitorName": "LCC23网关箱",
+            "energyName": "温度",
+            "temperature": "20.6200",
+            "recodeTime": "2026-04-09 14:54:37"
+        }
+    },
+    {
+        "id": "E0002_1800",
+        "options": {
+            "monitorName": "7.41.04",
+            "energyName": "温度",
+            "temperature": "18.7500",
+            "recodeTime": "2026-04-09 14:53:46"
+        }
+    },
+    {
+        "id": "E0002_2400",
+        "options": {
+            "monitorName": "7.41.03",
+            "energyName": "温度",
+            "temperature": "18.4300",
+            "recodeTime": "2026-04-09 14:53:46"
+        }
+    },
+    {
+        "id": "E0003_2700",
+        "options": {
+            "monitorName": "7.35.01",
+            "energyName": "温度",
+            "temperature": "19.0000",
+            "recodeTime": "2026-04-09 14:48:24"
+        }
+    },
+    {
+        "id": "E0003_2900",
+        "options": {
+            "monitorName": "7.35.02",
+            "energyName": "温度",
+            "temperature": "19.0000",
+            "recodeTime": "2026-04-09 14:48:25"
+        }
+    },
+    {
+        "id": "E0004_0800",
+        "options": {
+            "monitorName": "0007+CCC01",
+            "energyName": "温度",
+            "temperature": null,
+            "recodeTime": null
+        }
+    },
+    {
+        "id": "E0004_0500",
+        "options": {
+            "monitorName": "7.31.01",
+            "energyName": "温度",
+            "temperature": null,
+            "recodeTime": null
+        }
+    },
+    {
+        "id": "E0005_0300",
+        "options": {
+            "monitorName": "转盘TT",
+            "energyName": "温度",
+            "temperature": "23.7500",
+            "recodeTime": "2026-04-09 14:54:31"
+        }
+    },
+    {
+        "id": "E0006_0600",
+        "options": {
+            "monitorName": "7.49.5",
+            "energyName": "温度",
+            "temperature": "16.2500",
+            "recodeTime": "2026-04-09 14:54:14"
+        }
+    },
+    {
+        "id": "E0007_3100",
+        "options": {
+            "monitorName": "7.53.01",
+            "energyName": "温度",
+            "temperature": "31.2500",
+            "recodeTime": "2026-04-09 14:53:03"
+        }
+    },
+    {
+        "id": "E0007_2800",
+        "options": {
+            "monitorName": "7.53.03",
+            "energyName": "温度",
+            "temperature": "47.0000",
+            "recodeTime": "2026-04-09 14:53:05"
+        }
+    },
+    {
+        "id": "E0014_1600",
+        "options": {
+            "monitorName": "LCC21网关箱",
+            "energyName": "温度",
+            "temperature": "23.5000",
+            "recodeTime": "2026-04-09 12:55:03"
+        }
+    },
+    {
+        "id": "E0014_2500",
+        "options": {
+            "monitorName": "LCC22网关箱",
+            "energyName": "温度",
+            "temperature": "25.8100",
+            "recodeTime": "2026-04-09 14:09:59"
+        }
+    },
+    {
+        "id": "E0014_2300",
+        "options": {
+            "monitorName": "KO7柜台控制器",
+            "energyName": "温度",
+            "temperature": "24.2500",
+            "recodeTime": "2026-04-09 12:55:04"
+        }
+    },
+    {
+        "id": "E0014_1200",
+        "options": {
+            "monitorName": "KO9柜台控制器",
+            "energyName": "温度",
+            "temperature": "24.5600",
+            "recodeTime": "2026-04-09 14:09:59"
+        }
+    },
+    {
+        "id": "E0014_1300",
+        "options": {
+            "monitorName": "KO1柜台控制器",
+            "energyName": "温度",
+            "temperature": "23.8700",
+            "recodeTime": "2026-04-09 12:55:02"
+        }
+    },
+    {
+        "id": "E0014_3200",
+        "options": {
+            "monitorName": "KO3柜台控制器",
+            "energyName": "温度",
+            "temperature": "24.0600",
+            "recodeTime": "2026-04-09 14:09:59"
+        }
+    },
+    {
+        "id": "E0013_2000",
+        "options": {
+            "monitorName": "7.17.01",
+            "energyName": "温度",
+            "temperature": null,
+            "recodeTime": null
+        }
+    },
+    {
+        "id": "E0013_1700",
+        "options": {
+            "monitorName": "7.19.01",
+            "energyName": "温度",
+            "temperature": null,
+            "recodeTime": null
+        }
+    },
+    {
+        "id": "E0013_2600",
+        "options": {
+            "monitorName": "7.21.01",
+            "energyName": "温度",
+            "temperature": null,
+            "recodeTime": null
+        }
+    },
+    {
+        "id": "E0013_1000",
+        "options": {
+            "monitorName": "7.25.01",
+            "energyName": "温度",
+            "temperature": null,
+            "recodeTime": null
+        }
+    },
+    {
+        "id": "E0013_3300",
+        "options": {
+            "monitorName": "7.29.01",
+            "energyName": "温度",
+            "temperature": null,
+            "recodeTime": null
+        }
+    },
+    {
+        "id": "E0013_1500",
+        "options": {
+            "monitorName": "7.23.3",
+            "energyName": "温度",
+            "temperature": null,
+            "recodeTime": null
+        }
+    },
+    {
+        "id": "E0013_0900",
+        "options": {
+            "monitorName": "7.23.04",
+            "energyName": "温度",
+            "temperature": null,
+            "recodeTime": null
+        }
+    },
+    {
+        "id": "E0013_3000",
+        "options": {
+            "monitorName": "7.27.01",
+            "energyName": "温度",
+            "temperature": null,
+            "recodeTime": null
+        }
+    },
+    {
+        "id": "E0012_4300",
+        "options": {
+            "monitorName": "0033+CCC01",
+            "energyName": "温湿度",
+            "temperature": "18.7900",
+            "humidity": "58.1300",
+            "recodeTime": "2026-04-09 14:54:25"
+        }
+    },
+    {
+        "id": "E0004_3800",
+        "options": {
+            "monitorName": "7.31.15",
+            "energyName": "振动",
+            "vibrationSpeed": null,
+            "vibrationDisplacement": null,
+            "vibrationAcceleration": null,
+            "vibrationTemp": null,
+            "recodeTime": null
+        }
+    },
+    {
+        "id": "E0004_3400",
+        "options": {
+            "monitorName": "7.31.9",
+            "energyName": "振动",
+            "vibrationSpeed": null,
+            "vibrationDisplacement": null,
+            "vibrationAcceleration": null,
+            "vibrationTemp": null,
+            "recodeTime": null
+        }
+    },
+    {
+        "id": "E0004_3600",
+        "options": {
+            "monitorName": "7.31.1",
+            "energyName": "振动",
+            "vibrationSpeed": null,
+            "vibrationDisplacement": null,
+            "vibrationAcceleration": null,
+            "vibrationTemp": null,
+            "recodeTime": null
+        }
+    },
+    {
+        "id": "E0015_4400",
+        "options": {
+            "monitorName": "7.15.01",
+            "energyName": "振动",
+            "vibrationSpeed": "1.2000",
+            "vibrationDisplacement": "1.2000",
+            "vibrationAcceleration": "4.6000",
+            "vibrationTemp": "25.8000",
+            "recodeTime": "2026-04-09 14:53:56"
+        }
+    },
+    {
+        "id": "E0014_3700",
+        "options": {
+            "monitorName": "7.35.03",
+            "energyName": "振动",
+            "vibrationSpeed": "0.5000",
+            "vibrationDisplacement": "0.4000",
+            "vibrationAcceleration": "2.8000",
+            "vibrationTemp": "35.7000",
+            "recodeTime": "2026-04-09 12:54:15"
+        }
+    },
+    {
+        "id": "E0014_0200",
+        "options": {
+            "monitorName": "7.15.03",
+            "energyName": "温度",
+            "temperature": "36.8100",
+            "recodeTime": "2026-04-09 14:09:59"
+        }
+    },
+    {
+        "id": "E0014_0100",
+        "options": {
+            "monitorName": "7.15.01温度",
+            "energyName": "温度",
+            "temperature": "37.4300",
+            "recodeTime": "2026-04-09 12:55:05"
+        }
+    },
+    {
+        "id": "E0008_4100",
+        "options": {
+            "monitorName": "BF 29.69.1导入口",
+            "energyName": "噪声",
+            "noise": "62.7000",
+            "recodeTime": "2026-04-09 14:54:07"
+        }
+    },
+    {
+        "id": "E0009_4200",
+        "options": {
+            "monitorName": "BF 23.11.1导入口",
+            "energyName": "噪声",
+            "noise": "69.5000",
+            "recodeTime": "2026-04-09 14:54:33"
+        }
+    },
+    {
+        "id": "E0010_4000",
+        "options": {
+            "monitorName": "BF 21.12.4导入口",
+            "energyName": "噪声",
+            "noise": "91.5000",
+            "recodeTime": "2026-04-09 14:53:53"
+        }
+    },
+    {
+        "id": "E0011_3900",
+        "options": {
+            "monitorName": "BF 26.51.1导入口",
+            "energyName": "噪声",
+            "noise": "78.7000",
+            "recodeTime": "2026-04-09 14:54:27"
+        }
+    }
+]
+*/
+const getDeviceData = () => {
+  getIotEnvMonitorLatestAll().then((res) => {
+    console.log(transformData(res.data));
+    deviceData.value = transformData(res.data);
+    //collectTime objid monitorCode monitorId monitorType
+  });
+};
+const getParentNode = (id) => {
+  let node = nodes.value.find((e) => e.id === id);
+  if (node.parentNode) {
+    node = nodes.value.find((e) => e.id === node.parentNode);
+  }
+  return node;
+};
 const logEvent = async (eventname, event) => {
   switch (eventname) {
     case 'paneClick':
@@ -304,8 +810,9 @@ const logEvent = async (eventname, event) => {
     case 'contextmenu':
       event.event.preventDefault();
       nodeOptionVisible.value = true;
-      nodeType.value = event.node.type;
-      nodeData.value = event.node.data.options;
+      let node = getParentNode(event.node.id);
+      nodeType.value = node.type;
+      nodeData.value = node.data.options;
       break;
   }
 };
@@ -320,9 +827,9 @@ onNodesChange((changes) => {
 const setPageData = () => {
   pageDataVisible.value = true;
   pageData.value = nodes.value.find((e) => (e.type = 'area'))?.data.style;
-  console.log(pageData.value);
 };
 onMounted(() => {
+  getDeviceData();
   let scale = 0;
   const width = window.innerWidth - 220;
   rightRef.value.style.width = width + 'px';
@@ -343,6 +850,20 @@ onMounted(() => {
     }
   });
 });
+
+const restoration = () => {
+  let scale = 0;
+  const width = window.innerWidth - 220;
+  rightRef.value.style.width = width + 'px';
+  rightRef.value.style.height = (width * 540) / 960 + 'px';
+  scale = width / 960;
+
+  flowRef.value.setTransform({
+    x: 0,
+    y: 0,
+    zoom: scale
+  });
+};
 watch(
   nodes,
   () => {
diff --git a/src/views/visualEditor/nodes/area.vue b/src/views/visualEditor/nodes/area.vue
index 5f3b305..3436d4b 100644
--- a/src/views/visualEditor/nodes/area.vue
+++ b/src/views/visualEditor/nodes/area.vue
@@ -3,7 +3,7 @@
     <div class="custom-node">
       <div
         class="area"
-        :style="`width:${props.pageData?.width || '100px'};height:${props.pageData?.height || '100px'};border: 1px solid #fff;`"
+        :style="`width:${props.pageData?.width || '100px'};height:${props.pageData?.height || '100px'};border: 1px solid ${getInverseColor(props.pageData.bgColor)};`"
       ></div>
     </div>
   </div>
@@ -18,6 +18,54 @@ const props = defineProps({
     required: false
   }
 });
+const getInverseColor = (color) => {
+  color = color.trim();
+
+  // HEX
+  if (color.startsWith('#')) {
+    let hex = color.slice(1);
+
+    if (hex.length === 3 || hex.length === 4) {
+      hex = hex
+        .split('')
+        .map((c) => c + c)
+        .join('');
+    }
+
+    let r = parseInt(hex.slice(0, 2), 16);
+    let g = parseInt(hex.slice(2, 4), 16);
+    let b = parseInt(hex.slice(4, 6), 16);
+
+    let a = hex.length === 8 ? hex.slice(6, 8) : '';
+
+    r = 255 - r;
+    g = 255 - g;
+    b = 255 - b;
+
+    const toHex = (v) => v.toString(16).padStart(2, '0');
+
+    return '#' + toHex(r) + toHex(g) + toHex(b) + a;
+  }
+
+  // RGB / RGBA
+  const match = color.match(/rgba?\(([^)]+)\)/);
+
+  if (match) {
+    const parts = match[1].split(',').map((v) => v.trim());
+
+    let r = 255 - parseInt(parts[0]);
+    let g = 255 - parseInt(parts[1]);
+    let b = 255 - parseInt(parts[2]);
+
+    if (parts.length === 4) {
+      return `rgba(${r}, ${g}, ${b}, ${parts[3]})`;
+    }
+
+    return `rgb(${r}, ${g}, ${b})`;
+  }
+
+  return color;
+};
 </script>
 <style scoped>
 .area {
diff --git a/src/views/visualEditor/nodes/deviceDataList.vue b/src/views/visualEditor/nodes/deviceDataList.vue
index ee0bd19..1b64850 100644
--- a/src/views/visualEditor/nodes/deviceDataList.vue
+++ b/src/views/visualEditor/nodes/deviceDataList.vue
@@ -58,7 +58,6 @@
 <script setup>
 import { defineEmits, defineProps, ref } from 'vue';
 import { NodeResizer } from '@vue-flow/node-resizer';
-import { Handle, Position } from '@vue-flow/core';
 
 const props = defineProps({
   ratioWidth: {
@@ -125,16 +124,12 @@ const pNode = computed(() => props.nodes.find((n) => n.id === props.parentNodeId
 const getList = () => {
   let deviceData = props.networkData.find((e) => e.id === pNode.value.data.options.id)?.options;
   let options = pNode.value.data.options.infos;
-  console.log(deviceData);
-  console.log(options);
-  console.log(props.monitorType);
   list.value =
     options?.map((e, i) => {
       let item = {};
       item.label = props.monitorType.find((v) => v.value === e)?.label;
       item.key = e;
       item.value = deviceData[e];
-      console.log(item);
       return item;
     }) || [];
 };