测验模拟，底板交互修改，仪器跳转

src/api/nanshui.ts

@@ -0,0 +1,223 @@
+import request from "@/utils/request";
+
+/**
+ * 登录
+ */
+export function nanshuiLogin() {
+  return request({
+    url: '/nanshui_api/login',
+    method: 'get'
+  })
+}
+
+/**
+ * 查询空调运行状态、UPS运行状态和温湿度数据，返回结果：envstatus空调状态、upsstatusups状态、tmpstatus温湿度数据
+ */
+export function getEnvStatus() {
+  // return request({
+  //   url: '/nanshui_api/env-status',
+  //   method: 'get'
+  // })
+  return Promise.resolve({
+    "result": true,
+    "msg": "成功",
+    "data": {
+      "envstatus": {},
+      "upsstatus": {},
+      "tmpdata": {},
+      "time": 1732780480
+    }
+  })
+}
+
+/**
+ * 查询所有设备的开关状态、流程运行状态和实时数据信息，返回结果：devstatus设备状态、wfstatus流程状态、swdata水文数据、wqdata水质数据
+ */
+export function getDeviceStatus() {
+  // return request({
+  //   url: '/nanshui_api/station-status',
+  //   method: 'post'
+  // })
+  return Promise.resolve({
+    "result": true,
+    "msg": "成功",
+    "data": {
+      "devstatus": {
+        "D1": "open",
+        "D2": "close",
+        "D3": "open",
+        "D4": "close",
+        "D5": "close",
+        "D6": "close",
+        "D7": "close",
+        "D8": "close",
+        "D9": "close",
+        "D10": "close",
+        "D11": "close",
+        "D12": "close",
+        "D13": "close",
+        "D14": "close",
+        "P1": "close",
+        "P2": "close",
+        "P3": "close",
+        "P4": "close",
+        "RST": "close",
+        "I1": "open",
+        "I2": "close",
+        "I3": "close",
+        "I5": "close",
+        "CODMN": "close",
+        "NH3": "close",
+        "TP": "close",
+        "TN": "close",
+        "MPA": "close",
+        "AOA": "close",
+        "QC": "close",
+        "DAY": "close",
+        "D15": "close"
+      },
+      "wfstatus": {
+        "wfid": "SZCD",
+        "wfsub": "复位流程",
+        "wfrun": false,
+        "wfstart": 1732752000,
+        "wfend": 1732759958,
+        "wfstep": 0,
+        "stepdes": "[流程结束]",
+        "result": {
+          "0": "10:12:38 第0步 [流程结束]-成功",
+          "1": "08:00:05 第1步 [流程开始]-成功",
+          "2": "08:00:15 第2步 开球阀3-成功",
+          "3": "08:00:25 第3步 开球阀4-成功",
+          "4": "08:00:35 第4步 开球阀5-成功",
+          "5": "08:02:44 第5步 开球阀6-成功",
+          "6": "08:02:49 第6步 关球阀3-成功",
+          "7": "08:02:55 第7步 关球阀4-成功",
+          "8": "08:03:00 第8步 关球阀5-成功",
+          "9": "08:03:06 第9步 关球阀6-成功",
+          "10": "08:03:18 第10步 开球阀8-成功",
+          "11": "08:03:20 第11步 今天是奇数日？-失败",
+          "16": "08:03:24 第16步 开泵2-成功",
+          "17": "08:08:34 第17步 读沉沙桶信号-成功",
+          "20": "08:08:45 第20步 开球阀7-成功",
+          "21": "08:08:49 第21步 关球阀8-成功",
+          "23": "08:14:09 第23步 读多参数值-成功",
+          "24": "08:14:18 第24步 关水泵1-成功",
+          "25": "08:14:22 第25步 关水泵2-成功",
+          "26": "08:15:32 第26步 开球阀3-成功",
+          "27": "08:15:37 第27步 关球阀3-成功",
+          "28": "08:15:47 第28步 开球阀13-成功",
+          "30": "08:17:21 第30步 关球阀13-成功",
+          "31": "08:47:26 第31步 关球阀7-成功",
+          "32": "08:47:37 第32步 开球阀9-成功",
+          "33": "08:47:47 第33步 开球阀11-成功",
+          "34": "08:47:58 第34步 开增压泵-成功",
+          "35": "08:48:52 第35步 读进样桶下信号-成功",
+          "36": "08:49:52 第36步 读进样桶上信号-成功",
+          "37": "08:49:56 第37步 关增压泵-成功",
+          "38": "08:50:00 第38步 关球阀9-成功",
+          "39": "08:50:04 第39步 关球阀11-成功",
+          "40": "08:50:06 第40步 开氨氮、总氮仪表-成功",
+          "41": "08:50:09 第41步 关氨氮、总氮仪表-成功",
+          "42": "08:50:11 第42步 关氨氮、总氮仪表-成功",
+          "43": "08:50:13 第43步 开氨氮、总氮仪表-成功",
+          "44": "08:50:15 第44步 关氨氮、总氮仪表-成功",
+          "45": "08:50:17 第45步 关氨氮、总氮仪表-成功",
+          "46": "08:50:19 第46步 开总磷仪表-成功",
+          "47": "08:50:22 第47步 关总磷仪表-成功",
+          "48": "08:50:24 第48步 关总磷仪表-成功",
+          "49": "08:50:26 第49步 开总磷仪表-成功",
+          "50": "09:31:55 第50步 关总磷仪表-成功",
+          "51": "09:31:58 第51步 关总磷仪表-成功",
+          "52": "08:50:33 第52步 开COD-成功",
+          "53": "08:50:36 第53步 关COD-成功",
+          "54": "08:50:40 第54步 关COD-成功",
+          "55": "08:50:47 第55步 开COD-成功",
+          "56": "08:50:50 第56步 关COD-成功",
+          "57": "08:50:53 第57步 关COD-成功",
+          "58": "08:17:22 第58步 开AOA-失败",
+          "59": "08:17:23 第59步 关AOA-失败",
+          "60": "08:51:04 第60步 开球阀8-成功",
+          "61": "08:51:10 第61步 开泵1-成功",
+          "62": "08:51:20 第62步 开球阀9-成功",
+          "63": "08:51:29 第63步 开球阀11-成功",
+          "64": "09:13:12 第64步 开增压泵-成功",
+          "65": "09:13:17 第65步 关泵1-成功",
+          "66": "09:13:21 第66步 关增压泵-成功",
+          "67": "09:13:25 第67步 关球阀8-成功",
+          "68": "09:13:29 第68步 关球阀9-成功",
+          "69": "09:31:53 第69步 关球阀11-成功",
+          "70": "10:11:59 第70步 读COD-成功",
+          "71": "10:12:06 第71步 读氨氮-成功",
+          "72": "10:12:13 第72步 读总氮-成功",
+          "73": "10:12:21 第73步 读总磷-成功",
+          "74": "10:12:37 第74步 读AOA-失败"
+        }
+      },
+      "swdata": {
+        "tm": "2024-11-28 15:45",
+        "sw": {
+          "z": 3.21,
+          "q": 15.855,
+          "drp": 0,
+          "trp": 6316
+        }
+      },
+      "wqdata": {
+        "tm": "2024-11-28 08:00",
+        "wq": {
+          "PH": 7.716,
+          "WT": 13.994,
+          "ORP": 206.851,
+          "COND": 648.619,
+          "DOX": 10.639,
+          "TURB": 20.917,
+          "CODMN": 3.078,
+          "NH3N": 0.248,
+          "TN": 2.518,
+          "TP": 0.079
+        }
+      },
+      "netstatus": {
+        "server": "10.8.11.110",
+        "connect": "on",
+        "pingtime": 14.14
+      },
+      "regstatus": {
+        "server": "10.8.45.235",
+        "port": 8085,
+        "registered": false
+      },
+      "envstatus": {},
+      "upsstatus": {},
+      "tmpdata": {},
+      "errorinfo": {
+        "errorid": "SW_004",
+        "errormsg": "读取PD0数据出错"
+      },
+      "time": 1732780032
+    }
+  })
+}
+
+
+/**
+ * 开启或关闭指定设备；设备ID：D1，命令：open或close；设备ID：RST，命令：open，PLC复位命令；返回结果，result：执行结果，status：设备状态
+ */
+export function setDeviceStatus(devid: string, cmd = true) {
+  // return request({
+  //   url: '/nanshui_api/dev-exec',
+  //   method: 'post',
+  //   data: {
+  //     devid,
+  //     cmd: cmd ? 'open' : 'close'
+  //   }
+  // })
+  return Promise.resolve({
+    "result": true,
+    "msg": "成功",
+    "data": {
+      "status": "open"
+    }
+  })
+}

src/assets/styles/element/index.scss

@@ -21,9 +21,13 @@ $--text-color: (
 );
 
 $--border-color: (
+        'light': #5ec8e6,
         'lighter': #00cbe6,
 );
 
+$--card: (
+        'padding': 16px 10px,
+);
 
 // You should use them in scss, because we calculate it by sass.
 // comment next lines to use default color
@@ -32,7 +36,8 @@ $--border-color: (
         $fill-color: $--fill-color,
         $text-color: $--text-color,
         $border-color: $--border-color,
-        $button-padding-horizontal: ("default": 50px)
+        $button-padding-horizontal: ("default": 50px),
+        $card: $--card
 );
 
 // if you want to import all

src/assets/svg/alarm.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1667194922475" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2944"
+>
+    <path
+            d="M944 896h-112V544a320 320 0 0 0-640 0v352H80a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h864a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16z"
+            fill="" p-id="2945"></path>
+    <path d="M464 32l96 0 0 128-96 0 0-128Z" fill="" p-id="2946"></path>
+    <path d="M214.490073 124.635656l83.138439-48 64 110.851252-83.138439 48-64-110.851252Z" fill="" p-id="2947"></path>
+    <path d="M44.500805 329.537794l48-83.138439 110.851252 64-48 83.138439-110.851252-64Z" fill="" p-id="2948"></path>
+    <path d="M820.641513 310.361345l110.851251-64 48 83.138438-110.851251 64-48-83.138438Z" fill="" p-id="2949"></path>
+    <path d="M662.335355 187.388344l64-110.851252 83.138439 48-64 110.851252-83.138439-48Z" fill="" p-id="2950"></path>
+    <path
+            d="M638.72 528h-101.6l19.04-132.96a8 8 0 0 0-13.92-6.24L379.2 578.88a8 8 0 0 0 6.08 13.12h101.6l-19.04 132.96a8 8 0 0 0 13.92 6.24L644.8 541.12a8 8 0 0 0-6.08-13.12z"
+            p-id="2951"></path>
+</svg>

src/assets/svg/bengzhan.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1659595935085" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7684"
+     width="32" height="32">
+    <defs>
+        <style type="text/css"></style>
+    </defs>
+    <path
+            d="M896 512a384 384 0 0 0-384-384 424.96 424.96 0 0 0-64 5.76V64h64V0H128v64h64v236.16a384 384 0 0 0 132.48 547.2L192 1024h704l-184.32-184.32A384 384 0 0 0 896 512zM512 320a192 192 0 1 1-192 192 192 192 0 0 1 192-192z"
+            p-id="7685"></path>
+</svg>

src/assets/svg/home.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1701313578730" class="icon" viewBox="0 0 1036 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7385"
+     xmlns:xlink="http://www.w3.org/1999/xlink" width="24.28125" height="24">
+    <path
+            d="M1019.771429 509.714286c0-0.114286-0.114286-0.114286-0.114286-0.228572l-2.057143-2.4c-0.114286-0.114286-0.228571-0.342857-0.457143-0.457143-0.8-0.914286-1.714286-1.828571-2.514286-2.742857L573.028571 62.628571l-29.6-29.6a36 36 0 0 0-50.742857 0L21.485714 504a72.685714 72.685714 0 0 0-18.285714 30.4l-0.685714 2.4-0.342857 1.257143-0.342858 1.371428c-0.228571 0.8-0.342857 1.6-0.457142 2.4 0 0.114286 0 0.342857-0.114286 0.457143-0.685714 3.428571-1.028571 6.857143-1.142857 10.4v3.771429c0 0.571429 0 1.142857 0.114285 1.714286 0 0.571429 0 1.028571 0.114286 1.6 0 0.571429 0.114286 1.142857 0.114286 1.714285 0 0.685714 0.114286 1.371429 0.228571 2.057143 0 0.342857 0.114286 0.685714 0.114286 1.028572l0.342857 2.857142v0.114286c5.828571 34.857143 36.8 61.142857 73.142857 61.142857h48.571429V1001.142857h790.514286V628.914286h49.6c9.828571 0 19.314286-1.942857 28-5.6s16.8-9.028571 23.771428-15.885715a72.685714 72.685714 0 0 0 21.371429-51.771428c0-16.8-5.714286-32.914286-16.342857-45.942857zM582.057143 918.857143H454.057143V685.714286h128v233.142857z m249.028571-372.228572V918.857143H655.2V658.285714c0-25.257143-20.457143-45.714286-45.714286-45.714285H426.628571c-25.257143 0-45.714286 20.457143-45.714285 45.714285v260.571429H205.028571V546.628571h-109.714285l422.857143-422.514285 26.4 26.4L940.914286 546.628571h-109.828572z"
+            p-id="7387" data-spm-anchor-id="a313x.search_index.0.i2.48b53a81NxgBMT" class="selected" fill=""></path>
+</svg>

src/assets/svg/instrument.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1667380268940" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5573"
+>
+  <path d="M149.333333 853.333333h725.333334v85.333334H149.333333v-85.333334z" p-id="5574"></path>
+  <path
+          d="M768 672c0-102.144-78.357333-181.333333-170.666667-181.333333v-85.333334c143.317333 0 256 121.386667 256 266.666667S740.650667 938.666667 597.333333 938.666667v-85.333334c92.309333 0 170.666667-79.189333 170.666667-181.333333z"
+          p-id="5575"></path>
+  <path
+          d="M457.28 214.848a149.333333 149.333333 0 1 1 211.2 211.2l-196.117333 196.096a42.666667 42.666667 0 0 1-60.330667 0l-150.848-150.848a42.666667 42.666667 0 0 1 0-60.330667l196.096-196.117333z m150.848 60.352a64 64 0 0 0-90.517333 0l-165.930667 165.930667 90.517333 90.496 165.930667-165.930667a64 64 0 0 0 0-90.496z"
+          p-id="5576"></path>
+  <path d="M758.976 184.682667l-120.682667 120.682666-60.330666-60.352 120.682666-120.682666 60.330667 60.352z"
+        p-id="5577"></path>
+  <path
+          d="M683.541333 79.082667l120.682667 120.682666-60.330667 60.330667-120.682666-120.661333 60.330666-60.352zM230.997333 380.8a42.666667 42.666667 0 0 1 60.330667 0l211.2 211.178667a42.666667 42.666667 0 0 1 0 60.330666l-90.517333 90.517334a42.666667 42.666667 0 0 1-60.330667 0l-211.2-211.2a42.666667 42.666667 0 0 1 0-60.330667l90.517333-90.517333z m30.165334 90.496l-30.165334 30.165333 150.848 150.848 30.165334-30.165333-150.826667-150.848z"
+          p-id="5578"></path>
+  <path d="M682.666667 448a85.333333 85.333333 0 1 1-170.666667 0 85.333333 85.333333 0 0 1 170.666667 0z"
+        fill="#FFFFFF" p-id="5579"></path>
+  <path
+          d="M597.333333 405.333333a42.666667 42.666667 0 1 0 0 85.333334 42.666667 42.666667 0 0 0 0-85.333334z m-128 42.666667a128 128 0 1 1 256 0 128 128 0 0 1-256 0z"
+          p-id="5580"></path>
+</svg>

src/assets/svg/pause2.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1719815185612" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4189"
+     width="200" height="200">
+    <path d="M512 1024A512 512 0 1 1 512 0a512 512 0 0 1 0 1024zM320 320v384h128V320H320z m256 0v384h128V320H576z"
+          fill=""
+          p-id="4190"></path>
+</svg>

src/assets/svg/play.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1704711288797" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1884"
+     width="200" height="200">
+    <path
+            d="M514 114.3c-219.9 0-398.9 178.9-398.9 398.9 0.1 219.9 179 398.8 398.9 398.8 219.9 0 398.8-178.9 398.8-398.8S733.9 114.3 514 114.3z m173 421.9L437.1 680.5c-17.7 10.2-39.8-2.6-39.8-23V368.9c0-20.4 22.1-33.2 39.8-23L687 490.2c17.7 10.2 17.7 35.8 0 46z"
+            fill="" p-id="1885"></path>
+</svg>

src/assets/svg/play2.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1719815179960" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4042"
+     width="200" height="200">
+    <path d="M512 1024A512 512 0 1 1 512 0a512 512 0 0 1 0 1024zM383.232 287.616v448l384-223.104-384-224.896z" fill=""
+          p-id="4043"></path>
+</svg>

src/assets/svg/rain_0.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1704854808478" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2788"
+     width="200" height="200">
+    <path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#B6C3CE" p-id="2789"></path>
+    <path
+            d="M502.5792 290.5344a193.6128 193.6128 0 0 0-196.4032 164.1728 112.4096 112.4096 0 1 0 95.872 197.5808 183.9616 183.9616 0 0 0 100.5312 29.952 157.2096 157.2096 0 0 0 82.8672-19.6096 148.2752 148.2752 0 0 0 73.9584 19.6096 144.9984 144.9984 0 0 0 18.1248-289.1008 200.6528 200.6528 0 0 0-174.9504-102.6048z"
+            fill="#FFFFFF" p-id="2790"></path>
+</svg>

src/assets/svg/rain_1.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1704854815848" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2935"
+     width="200" height="200">
+    <path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#0099FA" p-id="2936"></path>
+    <path
+            d="M515.7632 204.8a193.6128 193.6128 0 0 0-196.4032 164.1728 112.4096 112.4096 0 1 0 95.872 197.5808 183.9616 183.9616 0 0 0 100.5312 29.952 157.2096 157.2096 0 0 0 82.8672-19.6096 148.2752 148.2752 0 0 0 73.9584 19.6096 144.9984 144.9984 0 0 0 18.1248-289.1008 200.6528 200.6528 0 0 0-174.9504-102.6048z m-39.3216 542.1312a48.2304 48.2304 0 0 0 96.4608 0c0-38.1952-45.1072-86.912-48.2304-113.2544-3.5328 25.6-48.2304 76.8-48.2304 113.2288z"
+            fill="#FFFFFF" p-id="2937"></path>
+</svg>

src/assets/svg/rain_2.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1704854818868" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3082"
+     width="200" height="200">
+    <path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#0041FA" p-id="3083"></path>
+    <path
+            d="M515.7632 204.8a193.6128 193.6128 0 0 0-196.4032 164.1728 112.4096 112.4096 0 1 0 95.872 197.5808 183.9616 183.9616 0 0 0 100.5312 29.952 157.2096 157.2096 0 0 0 82.8672-19.6096 148.2752 148.2752 0 0 0 73.9584 19.6096 144.9984 144.9984 0 0 0 18.1248-289.1008 200.6528 200.6528 0 0 0-174.9504-102.6048z m-116.864 536.8832a48.2304 48.2304 0 0 0 96.4608 0c0-38.1952-45.1072-86.912-48.2304-113.2544-3.5072 25.6-48.2304 76.8-48.2304 113.2288z m166.1184 0a48.2304 48.2304 0 0 0 96.4608 0c0-38.1952-45.1072-86.912-48.2304-113.2544-3.5328 25.6-48.2304 76.8-48.2304 113.2288z"
+            fill="#FFFFFF" p-id="3084"></path>
+</svg>

src/assets/svg/rain_3.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1704854822257" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3231"
+     width="200" height="200">
+    <path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#8244FF" p-id="3232"></path>
+    <path
+            d="M528.1792 204.8a193.6128 193.6128 0 0 0-196.4032 164.1728 112.4096 112.4096 0 1 0 95.872 197.5808 183.9616 183.9616 0 0 0 100.5312 29.952 157.2096 157.2096 0 0 0 82.8672-19.6096 148.2752 148.2752 0 0 0 73.9584 19.6096 144.9984 144.9984 0 0 0 18.1248-289.1008 200.6528 200.6528 0 0 0-174.9504-102.6048z m-205.44 542.1312a48.2304 48.2304 0 0 0 96.4608 0c0-38.1952-45.1072-86.912-48.2304-113.2544-3.5072 25.6-48.2304 76.8-48.2304 113.2288z m166.1184 0a48.2304 48.2304 0 0 0 96.4608 0c0-38.1952-45.1072-86.912-48.2304-113.2544-3.5328 25.6-48.2304 76.8-48.2304 113.2288z m166.144 0a48.2304 48.2304 0 0 0 96.4608 0c0-38.1952-45.1072-86.8864-48.2304-113.2544-3.5328 25.6-48.2048 76.8-48.2048 113.2544z"
+            fill="#FFFFFF" p-id="3233"></path>
+</svg>

src/assets/svg/rain_4.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1704854839122" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3380"
+     width="200" height="200">
+    <path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#FFE600" p-id="3381"></path>
+    <path
+            d="M546.8416 823.7312c0-36.5568 44.7232-87.5264 48.256-113.2288 3.0976 26.3424 48.2304 75.0592 48.2304 113.2288a48.2304 48.2304 0 0 1-96.4608 0z m-166.1184 0c0-36.5568 44.7488-87.5264 48.256-113.2288 3.1232 26.3424 48.2304 75.0592 48.2304 113.2288a48.2304 48.2304 0 0 1-96.4608 0z m248.6784-153.6c0-36.5568 44.6976-87.5008 48.2304-113.2288 3.1488 26.3424 48.256 75.0336 48.256 113.2288a48.2304 48.2304 0 0 1-96.4608 0z m-166.144 0c0-36.5568 44.6976-87.5008 48.2304-113.2032 3.0976 26.3168 48.2304 75.0336 48.2304 113.2032a48.2304 48.2304 0 0 1-96.4608 0z m-166.1184 0c0-36.5568 44.7488-87.5008 48.256-113.2032 3.0976 26.3168 48.2304 75.0336 48.2304 113.2032a48.2304 48.2304 0 0 1-96.4352 0z m288.3072-170.0352a157.0048 157.0048 0 0 1-82.8416 19.6352 184.0384 184.0384 0 0 1-100.5312-29.952 112.9984 112.9984 0 1 1-95.8976-197.5808 193.664 193.664 0 0 1 196.4288-164.1472 200.6272 200.6272 0 0 1 174.9504 102.6048 144.9984 144.9984 0 0 1-18.1248 289.1008 148.48 148.48 0 0 1-73.984-19.6864z"
+            fill="#FFFFFF" p-id="3382"></path>
+</svg>

src/assets/svg/rain_5.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1704854842537" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3527"
+     width="200" height="200">
+    <path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#FF8500" p-id="3528"></path>
+    <path
+            d="M638.0544 819.4048c0-36.5568 44.672-87.5008 48.2048-113.2288 3.1488 26.368 48.256 75.0336 48.256 113.2288a48.2304 48.2304 0 0 1-96.4352 0z m-172.9536 0c0-36.5568 44.7232-87.5264 48.2304-113.2288 3.1232 26.3424 48.256 75.0592 48.256 113.2288a48.2304 48.2304 0 0 1-96.4608 0z m-166.1184 0c0-36.5568 44.7488-87.5264 48.256-113.2288 3.1232 26.3424 48.2304 75.0592 48.2304 113.2288a48.2304 48.2304 0 0 1-96.4608 0z m416.0768-148.0448c0-36.5312 44.6976-87.5008 48.2304-113.2288 3.0976 26.368 48.2304 75.0592 48.2304 113.2288a48.2304 48.2304 0 0 1-96.4352 0z m-164.9408 0c0-36.5568 44.6976-87.5264 48.2304-113.2288 3.1232 26.3424 48.256 75.0336 48.256 113.2288a48.2304 48.2304 0 0 1-96.4608 0z m-166.144 0c0-36.5568 44.6976-87.5264 48.2304-113.2288 3.1488 26.3424 48.256 75.0592 48.256 113.2288a48.2304 48.2304 0 0 1-96.4608 0z m-166.1184 0c0-36.5568 44.7488-87.5264 48.256-113.2288 3.1488 26.3424 48.2304 75.0592 48.2304 113.2288a48.2304 48.2304 0 0 1-96.4352 0z m372.3008-171.2128a157.1072 157.1072 0 0 1-82.8672 19.6352 184.0384 184.0384 0 0 1-100.5312-29.952 112.9728 112.9728 0 1 1-95.872-197.5808 193.6128 193.6128 0 0 1 196.4032-164.1472 200.6272 200.6272 0 0 1 174.9504 102.6048 144.9984 144.9984 0 0 1-18.0992 289.1008 148.48 148.48 0 0 1-73.9584-19.7376z"
+            fill="#FFFFFF" p-id="3529"></path>
+</svg>

src/assets/svg/rain_6.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1704854845077" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3676"
+     width="200" height="200">
+    <path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#FF2000" p-id="3677"></path>
+    <path
+            d="M545.5872 909.4144c0-31.8464 38.9632-76.2624 42.0352-98.688 2.7136 23.04 42.0352 65.408 42.0352 98.688a42.0352 42.0352 0 0 1-84.0704 0z m-144.7936 0c0-31.8464 38.9376-76.2624 42.0096-98.688 2.7136 23.04 42.0608 65.408 42.0608 98.688a42.0352 42.0352 0 0 1-84.0448 0z m221.4144-140.0576c0-31.8464 38.9376-76.2624 42.0352-98.688 2.7136 23.04 42.0352 65.408 42.0352 98.688a42.0352 42.0352 0 0 1-84.0448 0z m-150.7072 0c0-31.872 38.9632-76.2624 42.0352-98.688 2.7136 23.04 42.0352 65.408 42.0352 98.7136a42.0352 42.0352 0 0 1-84.0704 0z m-144.7936 0c0-31.872 38.9376-76.2624 42.0352-98.688 2.7136 23.04 42.0352 65.408 42.0352 98.7136a42.0352 42.0352 0 0 1-84.0448 0z m362.624-129.0496c0-31.8464 38.9376-76.2624 42.0352-98.688 2.7136 23.04 42.0352 65.408 42.0352 98.688a42.0352 42.0352 0 0 1-84.0448 0z m-288.5632 0c0-31.872 38.9888-76.2624 42.0352-98.688 2.688 23.04 42.0352 65.408 42.0352 98.7136a42.0352 42.0352 0 0 1-84.0448 0z m-144.768 0c0-31.872 38.9888-76.2624 42.0864-98.688 2.7136 23.04 42.0352 65.408 42.0352 98.7136a42.0352 42.0352 0 0 1-84.0448 0z m289.536 0c0-31.872 38.9376-76.2624 42.0352-98.688 2.7136 23.04 42.0352 65.408 42.0352 98.688a42.0352 42.0352 0 0 1-84.0448 0z m27.4432-162.2784a157.0048 157.0048 0 0 1-82.8416 19.6352 184.0384 184.0384 0 0 1-100.5312-29.952 112.9984 112.9984 0 1 1-95.8976-197.5808 193.664 193.664 0 0 1 196.4288-164.1472 200.6272 200.6272 0 0 1 174.9504 102.6048 144.9984 144.9984 0 0 1-18.1248 289.1008 148.48 148.48 0 0 1-73.9328-19.6608z"
+            fill="#FFFFFF" p-id="3678"></path>
+</svg>

src/assets/svg/reagent.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1701348719140" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+     p-id="13404" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24">
+    <path
+            d="M561.33 149.858l-429.92 429.92c-82.012 82.01-82.012 214.974 0 296.986 82.008 82.01 214.974 82.01 296.984 0l429.92-429.922c23.432-23.432 23.432-61.42 0-84.852L646.182 149.858c-23.432-23.432-61.42-23.432-84.852 0zM173.834 622.204l429.92-429.92 212.134 212.132-429.92 429.92c-58.58 58.58-153.554 58.58-212.134 0-58.578-58.578-58.578-153.552 0-212.132z"
+            fill="" p-id="13405"></path>
+    <path
+            d="M931.976 434.346c11.718 11.714 11.72 30.71 0.004 42.426-11.566 11.566-30.228 11.716-41.978 0.442l-0.448-0.44L530 117.294c-11.718-11.714-11.72-30.71-0.004-42.426 11.566-11.568 30.23-11.718 41.978-0.444l0.448 0.44 359.554 359.484z"
+            fill="" p-id="13406"></path>
+    <path
+            d="M649.706 465.774l0.024 30c0.014 16.568-13.406 30.01-29.976 30.024l-215.73 0.178c-16.568 0.012-30.01-13.408-30.024-29.976l-0.024-30 275.73-0.226z"
+            fill="" p-id="13407"></path>
+    <path
+            d="M587.226 396.71a43 43 0 0 1-4.934-5.982c-12.484-18.334-8.9-42.834 1.1-57.55 10.35-15.25 27.134-20.9 44.916-15.118a42.916 42.916 0 0 1 27.05 26.218c7.068 19.35 0.184 40.9-10.266 52.2a37.3 37.3 0 0 1-23.616 12.1 41.316 41.316 0 0 1-34.25-11.868M493.542 430.312a27.02 27.02 0 0 1-3.164-3.87c-8.042-11.824-5.724-27.612 0.698-37.098 6.65-9.848 17.468-13.49 28.902-9.754a27.644 27.644 0 0 1 17.414 16.916c4.546 12.468 0.108 26.362-6.608 33.658a24.004 24.004 0 0 1-15.202 7.794 26.534 26.534 0 0 1-22.04-7.66"
+            fill="" p-id="13408"></path>
+</svg>

src/assets/svg/reload.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1669110976750" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3621"
+     width="200" height="200">
+    <path
+            d="M944.5 376.6c3.6-8.7 5.7-18.1 6.1-27.9 0-1.1 0-2.1 0.1-3.2v-1l-1.7-184c-0.4-45.3-37.3-81.8-82.5-81.8h-0.8c-41 0.4-74.7 30.5-80.8 69.8-9.8-7.1-19.9-13.8-30.3-20.1-102.5-62.1-223.1-80.6-339.5-52C298.8 104.8 200.5 177 138.4 279.5S57.8 502.6 86.4 619s100.7 214.7 203.2 276.8c71 43 150.7 65.1 231.7 65.1 35.9 0 72-4.3 107.8-13.1C745.5 919.2 843.8 847 905.9 744.5c23.6-39 11.2-89.8-27.8-113.4-39-23.6-89.8-11.2-113.4 27.8-81 133.7-255.7 176.6-389.5 95.6-64.8-39.2-110.4-101.4-128.5-174.9-18.1-73.6-6.4-149.7 32.9-214.5 80.1-132.1 251.6-175.6 384.7-98.4-36.3 9-63.1 41.9-62.7 80.9 0.4 45.3 37.3 81.8 82.5 81.8h0.8l184-1.7c31.3-0.3 58.5-18 72.2-43.9 1.2-2.2 2.2-4.5 3.2-6.8 0.1-0.1 0.2-0.3 0.2-0.4z"
+            p-id="3622"></path>
+</svg>

src/assets/svg/shuizha.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1659595825899" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6867"
+     width="32" height="32">
+    <defs>
+        <style type="text/css"></style>
+    </defs>
+    <path
+            d="M64 256v576h896V256H64z m832 512H128V320h768v448z m64-512H64v64l358.4 204.8L64 768v64h896v-64L601.6 524.8l359.104-227.2z"
+            p-id="6868"></path>
+</svg>

src/assets/svg/sign.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1664071709390" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8042"
+>
+    <path d="M255.872 512h597.589333V128H255.872v384zM256 597.333333v384H170.666667V42.666667h768v554.666666H256z"
+          p-id="8043"></path>
+</svg>

src/assets/svg/stop2.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1719814980981" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4240"
+     width="200" height="200">
+  <path d="M512 1024A512 512 0 1 1 512 0a512 512 0 0 1 0 1024zM320 320v384h384V320H320z" fill="" p-id="4241"></path>
+</svg>

src/components/CardList.vue

@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+
+defineProps({
+  data: {type: Array, default: []},
+})
+
+</script>
+
+<template>
+  <div class="card-list-wrapper">
+    <el-card v-for="(item,index) in data" :key="index" :body-style="{'padding': '0'}">
+      <slot v-bind:row="item"></slot>
+    </el-card>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.card-list-wrapper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  //align-items: center;
+}
+</style>

src/components/RightFrame.vue

@@ -5,17 +5,18 @@ import convert from '@/assets/svg/convert.svg'
 const slots = useSlots()
 
 let sidebarWidth = ref(window.innerWidth * 0.22)
+let translateWidth = ref(window.innerWidth * 0.227)
 let leftSidebarShow = ref(true)
 const leftSidebarStyle = computed(() => {
   return {
-    transform: leftSidebarShow.value ? 'translateX(0px)' : `translateX(-${sidebarWidth.value}px)`,
+    transform: leftSidebarShow.value ? 'translateX(0px)' : `translateX(-${translateWidth.value}px)`,
     width: `${sidebarWidth.value}px`,
   }
 })
 let rightSidebarShow = ref(true)
 const rightSidebarStyle = computed(() => {
   return {
-    transform: rightSidebarShow.value ? 'translateX(0px)' : `translateX(${sidebarWidth.value}px)`,
+    transform: rightSidebarShow.value ? 'translateX(0px)' : `translateX(${translateWidth.value}px)`,
     width: `${sidebarWidth.value}px`,
   }
 })
@@ -82,7 +83,7 @@ watch(
     pointer-events: auto;
     position: absolute;
     top: 0;
-    right: calc(23vw + 1.5rem);
+    right: calc(23vw + 1rem);
 
     display: flex;
     flex-direction: column;
@@ -128,20 +129,20 @@ watch(
       cursor: pointer;
       transition: opacity 0.5s ease-in-out;
       background-color: #2e6ca6;
-      height: 40px;
-      width: 40px;
+      height: 2rem;
+      width: 2rem;
       display: flex;
       opacity: 0;
       justify-content: center;
       align-items: center;
 
       &.left-btn {
-        right: -40px;
+        right: -2rem;
         border-radius: 0 20px 20px 0;
       }
 
       &.right-btn {
-        left: -40px;
+        left: -2rem;
         border-radius: 20px 0 0 20px;
       }
 

src/components/StationRightButtonGroup.vue

@@ -32,10 +32,19 @@ function handleHome() {
 }
 
 function back() {
-  // 切换近视角
-  View.changeView(station.value.stnm + '近')
-  // 跳转上个页面
-  jumpPage(`/${appStore.homePage}/${route.params.stcd}`)
+  if (route.path.indexOf('/device/') > -1 && appStore.hasEnterSthouse) {
+    // 进过站房页面, 并且在仪器详情界面
+    // 切换站房视角
+    View.changeDeviceView("转跳", route.params.stcd)
+    // 跳转站房页面
+    jumpPage(`/sthouse/${route.params.stcd}`)
+  } else {
+    // 切换近视角
+    View.changeView(station.value.stnm + '近')
+    // 跳转上个页面
+    jumpPage(`/${appStore.homePage}/${route.params.stcd}`)
+    appStore.exitSthouse()
+  }
 }
 
 // 路由监听

src/components/Video/video.ts

@@ -106,7 +106,6 @@ export function closeVideo(videoNm = curIndexCode, authorization = token) {
   }
 
   stopVideo(videoNm, authorization).then(res => {
-    debugger
     console.log(res);
   })
 }

src/layout/index.vue

@@ -68,34 +68,7 @@ bus.on('handle_ue_response', (data) => {
   }
 })
 
-function changeFloorType(path) {
-  if (path === '/index') {
-    appStore.changeFloorType('map')
-    // appStore.changeFloorType('img')
-    // } else if (path.indexOf('/detail') > -1 || path.indexOf('/device') > -1) {
-    //   appStore.changeFloorType('detail')
-    // } else if (path.indexOf('/sthouse') > -1) {
-    //   appStore.changeFloorType('sthouse')
-  } else {
-    appStore.changeFloorType('ue')
-  }
-}
-
-// 路由监听
-watch(() => route.path, path => {
-  // 切换底图 三维、MAP
-  changeFloorType(path)
-  // 获取主页面
-  for (let type of ['situational', 'intelloper', 'station']) {
-    if (path.indexOf(`/${type}/`) > -1) {
-      appStore.setHomePage(type)
-      break
-    }
-  }
-}, {deep: true})
-
 onMounted(() => {
-  changeFloorType(route.path)
 })
 </script>
 
@@ -155,9 +128,10 @@ $base-background-color2: rgba(10, 117, 195, 1);
 
     .alarm-wrapper {
       position: absolute;
-      top: 7vh;
-      left: 23vw;
-      width: 50vw;
+      top: 8.8vh;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 46vw;
       background: linear-gradient(120deg, rgba(11, 45, 85, 0.8) 0%, rgba(0, 28, 53, 0.8) 100%);
       border-radius: 6px;
 

src/stores/app.ts

@@ -1,20 +1,58 @@
-import {ref} from 'vue'
+import {ref, watch} from 'vue'
+import {useRoute} from 'vue-router'
 import {defineStore} from 'pinia'
 
 export const useAppStore = defineStore('app', () => {
+  const route = useRoute()
   // 底板类型
   const floorType = ref('map')
-  const homePage = ref('station')
-
   // const floorType = ref('img')
+  // 主界面列表
+  const homePageList = ['situational', 'intelloper', 'station']
+  // 主页面视角
+  const homePage = ref('station')
+  // 是否进入站房界面
+  const hasEnterSthouse = ref(false)
 
-  function changeFloorType(type: string) {
-    floorType.value = type
+  function changeFloorTypeByPath(path: string) {
+    if (path === '/index') {
+      floorType.value = 'map'
+      // floorType.value = 'img'
+      // } else if (path.indexOf('/detail') > -1 || path.indexOf('/device') > -1) {
+      //   floorType.value = 'detail'
+      // } else if (path.indexOf('/sthouse') > -1) {
+      //   floorType.value = 'sthouse'
+    } else {
+      floorType.value = 'ue'
+    }
   }
 
   function setHomePage(value: string) {
     homePage.value = value
   }
 
-  return {floorType, changeFloorType, homePage, setHomePage}
+  function exitSthouse() {
+    hasEnterSthouse.value = false
+  }
+
+  // 路由监听
+  watch(() => route.path, path => {
+    // 切换底图 三维、MAP
+    changeFloorTypeByPath(path)
+    // 获取主页面
+    for (let type of homePageList) {
+      if (path.indexOf(`/${type}/`) > -1) {
+        homePage.value = type
+        hasEnterSthouse.value = false
+        break
+      }
+    }
+
+    if (path.indexOf(`/sthouse/`) > -1) {
+      hasEnterSthouse.value = true
+    }
+
+  }, {deep: true, immediate: true})
+
+  return {floorType, homePage, hasEnterSthouse, setHomePage, exitSthouse}
 })

src/stores/threeDimensional.ts

@@ -0,0 +1,8 @@
+import {computed, ref} from 'vue'
+import {defineStore} from 'pinia'
+
+export const use3DStore = defineStore('threeDimensional', () => {
+
+
+  return {}
+})

src/utils/device.ts

@@ -3,16 +3,19 @@ const deviceDetailList = [
     "deviceType": "水质测验设备",
     "deviceName": "控制单元",
     "ueDeviceName": "控制单元",
+    "nanshuiDevId": "D1",
   },
   {
     "deviceType": "水质测验设备",
     "deviceName": "氨氮",
     "ueDeviceName": "氨氮",
+    "nanshuiDevId": "D2",
   },
   {
     "deviceType": "水质测验设备",
     "deviceName": "总磷总氮",
     "ueDeviceName": "总磷总氮",
+    "nanshuiDevId": "D3",
     idx: ['TN', 'NH3N'],
     detail: '仪表选型来自国产仪表厂商宝仪环境科技（上海）有限公司。\n总氮测量原理：碱性过硫酸盐消解紫外分光光度法；\n氨氮测量原理：水杨酸分光光度法。'
   },
@@ -20,6 +23,7 @@ const deviceDetailList = [
     "deviceType": "水质测验设备",
     "deviceName": "COD分析仪",
     "ueDeviceName": "CODmn",
+    "nanshuiDevId": "D4",
     idx: ['CODMN'],
     img: new URL('@/assets/images/detail2.jpg', import.meta.url).href,
     detail: '仪表选型来自水利部南京水利水文自动化研究所自研的NSY-CODmn型智能高锰酸盐指数在线分析仪。\n检测方法：高锰酸盐氧化法，光度滴定测量法。',
@@ -29,6 +33,7 @@ const deviceDetailList = [
     "deviceType": "水质测验设备",
     "deviceName": "多参数采样器",
     "ueDeviceName": "多参数采样器",
+    "nanshuiDevId": "D5",
     idx: ['WT', 'PH', 'COND', 'REDOX', 'TURB'],
     img: new URL('@/assets/images/detail2.jpg', import.meta.url).href,
     detail: '监测指标：\n水温（工作原理：热电阻温度传感器是利用导体或半导体的电阻值随温度变化而变化的原理进行测温的）；\n' +
@@ -41,12 +46,13 @@ const deviceDetailList = [
     "deviceType": "水质测验设备",
     "deviceName": "预处理单元",
     "ueDeviceName": "预处理单元",
+    "nanshuiDevId": "D6",
   },
-  {
-    "deviceType": "水质测验设备",
-    "deviceName": "专用取水浮台",
-    "ueDeviceName": "专用取水浮台",
-  },
+  // {
+  //   "deviceType": "水质测验设备",
+  //   "deviceName": "专用取水浮台",
+  //   "ueDeviceName": "专用取水浮台",
+  // },
   {
     "deviceType": "水位测验设备",
     "deviceName": "浮子水位计",
@@ -103,4 +109,8 @@ function getDeviceByName(name: string) {
   return deviceDetailList.find(item => item.deviceName === name)
 }
 
-export {deviceDetailList, getDeviceByName}
+function getDeviceByType(type: string) {
+  return deviceDetailList.filter(item => item.deviceType === type)
+}
+
+export {deviceDetailList, getDeviceByName, getDeviceByType}

src/utils/tdInstruction/operate.ts

@@ -18,3 +18,19 @@ export function setWaterLevel(stcd: any, value: any) {
   console.log("-- 设置测站水位", JSON.stringify(descriptor));
 }
 
+/**
+ * 测验模拟
+ * @param type 播放、暂停、继续、结束
+ * @param stcd 测站编码
+ */
+export function testSimulation(stcd: any, type: any = '播放') {
+  let descriptor = {
+    "command": "InstrumentMovie",
+    "data": {
+      "Type": type,
+      "ID": stcd
+    }
+  }
+  Bus.emit('emitUIInteraction', descriptor)
+  console.log("-- 测验模拟:" + type, JSON.stringify(descriptor));
+}

src/utils/tdInstruction/view.ts

@@ -32,6 +32,48 @@ export function home(type = "太师桥") {
       "Type": type2,
     }
   };
+
   Bus.emit('emitUIInteraction', descriptor)
   console.log("-- 测站远近视角切换", JSON.stringify(descriptor));
 }
+
+
+let deviceView: any = null;
+
+/**
+ * 仪器跳转
+ * @param {*} type 转跳、打开模型、关闭
+ * @param {*} stcd 63304700：太师桥；63304650：思源
+ * @param {*} name 控制单元、总磷总氮、氨氮、分析单元、多参数采样器、CODmn
+ */
+export function changeDeviceView(type = "转跳", stcd: any, name: any = null) {
+  if (deviceView) {
+    closeDeviceView(stcd)
+  }
+
+  let descriptor = {
+    "command": "ShowInstrument",
+    "data": {
+      "Type": type,
+      "ID": stcd,
+      "Name": name
+    }
+  };
+  Bus.emit('emitUIInteraction', descriptor)
+  console.log("-- 仪器视角切换", JSON.stringify(descriptor));
+  deviceView = name;
+}
+
+export function closeDeviceView(stcd: any) {
+  let descriptor = {
+    "command": "ShowInstrument",
+    "data": {
+      "Type": '关闭',
+      "ID": stcd,
+      "Name": deviceView
+    }
+  };
+  Bus.emit('emitUIInteraction', descriptor)
+  console.log("-- 关闭仪器视角", JSON.stringify(descriptor));
+  deviceView = null;
+}

src/views/Station.vue

@@ -33,7 +33,7 @@ const typicalEvents = ref(getTypicalEvents(route.params.stcd))
         <img v-if="station.img" :src="introduceImg" alt="" class="introduce-img"/>
       </card01>
       <card01 style="height: 30%" title="现场监控">
-        <!--        34102206531322000100-->
+        <!--  34102206531322000100  -->
         <gw-video :code="videoCode" :imageSrc="jiankong"></gw-video>
       </card01>
     </template>

src/views/StationHouse.vue

@@ -1,19 +1,25 @@
 <script lang="ts" setup>
-import {computed, onMounted, reactive, ref} from 'vue'
+import {onMounted, onUnmounted, reactive, ref} from 'vue'
 import {useRoute} from 'vue-router'
+import play from '@/assets/svg/play2.svg'
+import pause from '@/assets/svg/pause2.svg'
+import stop from '@/assets/svg/stop2.svg'
 import RightFrame from '@/components/RightFrame.vue'
 import Card01 from '@/components/card/Card01.vue'
-import {getStation, stations} from '@/utils/station'
 import Chart from '@/components/Chart.vue'
-import {getWaterLevelAndFlowListOfPageByStcd, getWaterQualityLatest} from '@/api/gx'
-import {formatd} from '@/utils/ruoyi'
-import {Label, Setting, View} from '@/utils/tdInstruction'
+import {getWaterQualityLatest} from '@/api/gx'
 import StripeTable from '@/components/StripeTable.vue'
 import {getAlarmInfo} from '@/api/alarm.ts'
 import StationRightButtonGroup from "@/components/StationRightButtonGroup.vue";
+import GwVideo from "@/components/Video/index.vue";
+import {getVideoCodeByMark} from "@/components/Video/video";
+import CardList from "@/components/CardList.vue";
+import {Operate} from "@/utils/tdInstruction";
+import {getDeviceByType} from "@/utils/device";
+import {getDeviceStatus} from "@/api/nanshui";
+import {HexToRgb} from "@/utils/color";
 
 const route = useRoute()
-const workProSrc = ref(new URL('@/assets/images/workPro.png', import.meta.url).href)
 const videoSrc = ref(new URL('@/assets/images/video.png', import.meta.url).href)
 const simulateSrc = ref(new URL('@/assets/images/simulate.png', import.meta.url).href)
 const tempWarnSrc = ref(new URL('@/assets/images/tempWarn.png', import.meta.url).href)
@@ -21,15 +27,66 @@ const overflowWarnSrc = ref(new URL('@/assets/images/overflowWarn.png', import.m
 const fireWarnSrc = ref(new URL('@/assets/images/fireWarn.png', import.meta.url).href)
 const wetWarnSrc = ref(new URL('@/assets/images/wetWarn.png', import.meta.url).href)
 
+// 绿色
+const GREEN = '#67C23A'
+const RGB_GREEN = HexToRgb(GREEN)
+// 浅绿色
+const LIGHT_GREEN = `rgba(${RGB_GREEN[0]}, ${RGB_GREEN[1]}, ${RGB_GREEN[2]}, 0.3)`
+// 红色
+const RED = '#F56C6C'
+const RGB_RED = HexToRgb(RED)
+// 浅红色
+const LIGHT_RED = `rgba(${RGB_RED[0]}, ${RGB_RED[1]}, ${RGB_RED[2]}, 0.3)`
+
+
 const wqData = ref({d1: '6', d2: '22.3', d3: '5', d4: '20', d5: '6', d6: '22.3', d7: '5', d8: '20'})
-const station = computed(() => getStation(route.params.stcd))
-const wlData = reactive({
-  ss: '0',
-  zg: '0',
-  zd: '0',
-  bz: station.value.grz ? station.value.grz + '' : '0',
-  jj: station.value.wrz ? station.value.wrz + '' : '0'
-})
+// 设备列表
+const deviceList = reactive(getDeviceByType('水质测验设备'))
+// 水质测验模拟 0:结束 1:播放 2:暂停
+const testSimulationStatus = ref(0)
+// 获取视频CODE
+const videoCode = ref(getVideoCodeByMark(route.params.stcd + '', "室内"))
+
+/**
+ * 测验模拟
+ * @param mode 播放、暂停、继续、结束
+ */
+function handleTestSimulation(mode) {
+  switch (mode) {
+    case "play":
+      if (testSimulationStatus.value === 0) {
+        Operate.testSimulation(route.params.stcd, '播放')
+      } else {
+        Operate.testSimulation(route.params.stcd, '继续')
+      }
+      testSimulationStatus.value = 1
+      break
+    case "pause":
+      Operate.testSimulation(route.params.stcd, '暂停')
+      testSimulationStatus.value = 2
+      break
+    case "stop":
+      Operate.testSimulation(route.params.stcd, '结束')
+      testSimulationStatus.value = 0
+      break
+    default:
+  }
+}
+
+
+/**
+ * 获取设备状态
+ */
+function deviceStatus() {
+  getDeviceStatus().then(res => {
+    const status = res.data?.devstatus
+    if (status) {
+      deviceList.forEach(d => {
+        d['status'] = status[d['nanshuiDevId']]
+      })
+    }
+  })
+}
 
 /**
  * 获取最新水质数据
@@ -52,12 +109,12 @@ function getLatestWaterQuality() {
 
 const alarmColumns = [
   {
-    label: '报警类型', prop: 'deviceName', width: '100',convertFn: (data) => {
+    label: '报警类型', prop: 'deviceName', width: '100', convertFn: (data) => {
       return data ? data.trim() : ''
     }
   },
   {
-    label: '时间', prop: 'tm',  convertFn: (data) => {
+    label: '时间', prop: 'tm', convertFn: (data) => {
       return data ? data.substring(5, 16) : ''
     }
   },
@@ -68,6 +125,7 @@ const alarmColumns = [
   },
 ]
 const alarmData = reactive([])
+const left1Ref = ref(null)
 
 function getAlarmList() {
   getAlarmInfo().then(res => {
@@ -76,8 +134,6 @@ function getAlarmList() {
   })
 }
 
-const left1Ref = ref(null)
-
 async function reloadLeft1() {
   const colors = ['#5470C6', '#91CC75', '#EE6666'];
   var option = {
@@ -104,7 +160,7 @@ async function reloadLeft1() {
       left: '5%',
       right: '4%',
       bottom: '1%',
-      top:'20%',
+      top: '20%',
       containLabel: true
     },
     xAxis: {
@@ -112,7 +168,7 @@ async function reloadLeft1() {
       boundaryGap: false,
       data: ['11::30', '11:35', '11:40', '11:45', '11:50', '11:55', '12:00', '12:05', '12:10', '12:15']
     },
-    yAxis: [ {
+    yAxis: [{
       type: 'value',
       name: ' %',
       position: 'right',
@@ -146,27 +202,30 @@ async function reloadLeft1() {
         name: '温度',
         type: 'line',
         stack: 'Total',
-        data: [20, 21, 25, 26, 32, 30, 26,39,29,30]
+        data: [20, 21, 25, 26, 32, 30, 26, 39, 29, 30]
       },
       {
         name: '湿度',
         type: 'line',
         stack: 'Total',
-        data: [40, 45, 30, 31, 36, 33, 31,50,30,20]
+        data: [40, 45, 30, 31, 36, 33, 31, 50, 30, 20]
       }
     ]
   };
   left1Ref.value.loadChart(option)
 }
 
-
 onMounted(() => {
   reloadLeft1()
-
-  // 获取最新水质数据
-  getLatestWaterQuality()
   getAlarmList()
+  deviceStatus()
+})
 
+onUnmounted(() => {
+  if (testSimulationStatus.value !== 0) {
+    debugger
+    handleTestSimulation('stop')
+  }
 })
 </script>
 <template>
@@ -197,11 +256,33 @@ onMounted(() => {
     </template>
     <template #rightModule>
       <card01 style="height: 65%" title="监测流程">
-        <img :src="workProSrc" style="width: 100%;height: 83%;">
-        <img :src="simulateSrc" style="width: 100%;">
+        <card-list :data="deviceList" style="height: calc(100% - 86px);margin-bottom: 10px;">
+          <template #default="scope">
+            <div
+              :style="{'background-image': scope.row.status === 'open' ? `linear-gradient(100deg, ${LIGHT_GREEN} 0%, ${GREEN} 70%)`:`linear-gradient(100deg, ${LIGHT_RED} 0%, ${RED} 70%)`}"
+              style="padding: 12px 20px;display: flex;justify-content: space-between;align-items: center;">
+              <div style="font-weight: bolder;cursor: pointer;">{{ scope.row.deviceName }}</div>
+              <div>
+                <el-switch
+                  v-model="scope.row.status"
+                  active-value="open"
+                  inactive-value="close"
+                  style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
+                />
+              </div>
+            </div>
+          </template>
+        </card-list>
+        <div :style="{ 'background-image': `url(${simulateSrc})`}" class="test-simulation">
+          <icon v-if="testSimulationStatus == 0 || testSimulationStatus == 2" :data="play" class="video-btn"
+                @click="handleTestSimulation('play')"/>
+          <icon v-if="testSimulationStatus == 1" :data="pause" class="video-btn"
+                @click="handleTestSimulation('pause')"/>
+          <icon v-if="testSimulationStatus != 0" :data="stop" class="video-btn" @click="handleTestSimulation('stop')"/>
+        </div>
       </card01>
       <card01 style="height: 35%" title="站房监控">
-        <img :src="videoSrc" style="width: 100%;height: 100%;">
+        <gw-video :code="videoCode" :imageSrc="videoSrc"></gw-video>
       </card01>
     </template>
     <template #btnGroup>
@@ -234,4 +315,25 @@ onMounted(() => {
   width: 100%;
   height: 100%;
 }
+
+
+.test-simulation {
+  width: 100%;
+  height: 76px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 6px;
+
+  .video-btn {
+    width: 2rem;
+    height: 2rem;
+    cursor: pointer;
+  }
+
+  .video-btn + .video-btn {
+    margin-left: 10px;
+  }
+
+}
 </style>