Parcourir la source

无人机测流比对

linqilong il y a 7 mois
Parent
commit
409366fc5e

+ 12 - 0
package-lock.json

@@ -16,6 +16,7 @@
         "@turf/helpers": "^7.1.0",
         "@yzfe/svgicon": "^1.2.2",
         "@yzfe/vue-svgicon": "^5.0.3",
+        "chinese-lunar-calendar": "^1.0.1",
         "echarts": "^5.5.1",
         "echarts-gl": "^2.0.9",
         "element-plus": "^2.8.6",
@@ -3809,6 +3810,12 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/chinese-lunar-calendar": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/chinese-lunar-calendar/-/chinese-lunar-calendar-1.0.1.tgz",
+      "integrity": "sha512-T5XjtA6ygOkxjwltYf8dEB1DLsPKewDKajf74fNeT6rH2g9EZPf2AHk6vAlK/SAImTYKXoUNQ3Q4JwN0BduqRA==",
+      "license": "ISC"
+    },
     "node_modules/chokidar": {
       "version": "4.0.1",
       "resolved": "https://registry.npmmirror.com/chokidar/-/chokidar-4.0.1.tgz",
@@ -12669,6 +12676,11 @@
       "integrity": "sha512-Pj779qHxV2tuapviy1bSZNEL1maXr13bPYpsvSDB68HlYcYuhlDrmGd63i0JHMCLKzc7rUSNIrpdJlhVlNwrxA==",
       "dev": true
     },
+    "chinese-lunar-calendar": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/chinese-lunar-calendar/-/chinese-lunar-calendar-1.0.1.tgz",
+      "integrity": "sha512-T5XjtA6ygOkxjwltYf8dEB1DLsPKewDKajf74fNeT6rH2g9EZPf2AHk6vAlK/SAImTYKXoUNQ3Q4JwN0BduqRA=="
+    },
     "chokidar": {
       "version": "4.0.1",
       "resolved": "https://registry.npmmirror.com/chokidar/-/chokidar-4.0.1.tgz",

+ 1 - 0
package.json

@@ -24,6 +24,7 @@
     "@turf/helpers": "^7.1.0",
     "@yzfe/svgicon": "^1.2.2",
     "@yzfe/vue-svgicon": "^5.0.3",
+    "chinese-lunar-calendar": "^1.0.1",
     "echarts": "^5.5.1",
     "echarts-gl": "^2.0.9",
     "element-plus": "^2.8.6",

+ 860 - 0
src/assets/json/adcp.json

@@ -0,0 +1,860 @@
+[
+  {
+    "date": "2021-02-11 10:23",
+    "entm": "10:27",
+    "index_velocity": 0.18,
+    "avg_velocity": 0.16
+  },
+  {
+    "date": "2021-03-26 15:07",
+    "entm": "15:12",
+    "index_velocity": 0.25,
+    "avg_velocity": 0.22
+  },
+  {
+    "date": "2021-03-26 15:12",
+    "entm": "15:16",
+    "index_velocity": 0.25,
+    "avg_velocity": 0.23
+  },
+  {
+    "date": "2021-03-26 15:16",
+    "entm": "15:19",
+    "index_velocity": 0.25,
+    "avg_velocity": 0.23
+  },
+  {
+    "date": "2021-07-03 14:57",
+    "entm": "15:01",
+    "index_velocity": 0.26,
+    "avg_velocity": 0.23
+  },
+  {
+    "date": "2021-07-03 15:09",
+    "entm": "15:12",
+    "index_velocity": 0.27,
+    "avg_velocity": 0.24
+  },
+  {
+    "date": "2021-07-03 15:17",
+    "entm": "15:21",
+    "index_velocity": 0.25,
+    "avg_velocity": 0.23
+  },
+  {
+    "date": "2021-07-03 15:20",
+    "entm": "15:25",
+    "index_velocity": 0.26,
+    "avg_velocity": 0.23
+  },
+  {
+    "date": "2021-09-12 14:41",
+    "entm": "14:45",
+    "index_velocity": 0.22,
+    "avg_velocity": 0.21
+  },
+  {
+    "date": "2021-09-12 15:02",
+    "entm": "15:07",
+    "index_velocity": 0.25,
+    "avg_velocity": 0.21
+  },
+  {
+    "date": "2021-09-12 15:41",
+    "entm": "15:46",
+    "index_velocity": 0.22,
+    "avg_velocity": 0.22
+  },
+  {
+    "date": "2021-09-16 13:46",
+    "entm": "13:51",
+    "index_velocity": 0.13,
+    "avg_velocity": 0.11
+  },
+  {
+    "date": "2021-11-25 15:03",
+    "entm": "15:06",
+    "index_velocity": 0.16,
+    "avg_velocity": 0.13
+  },
+  {
+    "date": "2021-12-05 10:21",
+    "entm": "10:27",
+    "index_velocity": 0.28,
+    "avg_velocity": 0.24
+  },
+  {
+    "date": "2021-12-05 10:43",
+    "entm": "10:48",
+    "index_velocity": 0.26,
+    "avg_velocity": 0.25
+  },
+  {
+    "date": "2021-12-05 11:34",
+    "entm": "11:39",
+    "index_velocity": 0.25,
+    "avg_velocity": 0.24
+  },
+  {
+    "date": "2021-12-05 14:19",
+    "entm": "14:24",
+    "index_velocity": 0.26,
+    "avg_velocity": 0.23
+  },
+  {
+    "date": "2021-12-05 14:24",
+    "entm": "14:29",
+    "index_velocity": 0.27,
+    "avg_velocity": 0.24
+  },
+  {
+    "date": "2021-12-05 14:29",
+    "entm": "14:32",
+    "index_velocity": 0.28,
+    "avg_velocity": 0.24
+  },
+  {
+    "date": "2021-12-05 14:39",
+    "entm": "14:43",
+    "index_velocity": 0.27,
+    "avg_velocity": 0.25
+  },
+  {
+    "date": "2021-12-12 13:40",
+    "entm": "13:44",
+    "index_velocity": 0.17,
+    "avg_velocity": 0.17
+  },
+  {
+    "date": "2021-12-12 14:37",
+    "entm": "14:41",
+    "index_velocity": 0.16,
+    "avg_velocity": 0.16
+  },
+  {
+    "date": "2021-12-12 15:18",
+    "entm": "15:23",
+    "index_velocity": 0.23,
+    "avg_velocity": 0.21
+  },
+  {
+    "date": "2021-12-12 15:23",
+    "entm": "15:28",
+    "index_velocity": 0.21,
+    "avg_velocity": 0.19
+  },
+  {
+    "date": "2021-12-20 14:51",
+    "entm": "14:56",
+    "index_velocity": 0.17,
+    "avg_velocity": 0.16
+  },
+  {
+    "date": "2021-12-25 14:33",
+    "entm": "14:37",
+    "index_velocity": 0.16,
+    "avg_velocity": 0.14
+  },
+  {
+    "date": "2021-12-25 14:37",
+    "entm": "14:41",
+    "index_velocity": 0.15,
+    "avg_velocity": 0.14
+  },
+  {
+    "date": "2021-12-25 14:53",
+    "entm": "14:56",
+    "index_velocity": 0.18,
+    "avg_velocity": 0.15
+  },
+  {
+    "date": "2021-12-25 14:57",
+    "entm": "15:00",
+    "index_velocity": 0.15,
+    "avg_velocity": 0.14
+  },
+  {
+    "date": "2021-12-25 15:13",
+    "entm": "15:16",
+    "index_velocity": 0.15,
+    "avg_velocity": 0.15
+  },
+  {
+    "date": "2021-12-25 15:17",
+    "entm": "15:21",
+    "index_velocity": 0.16,
+    "avg_velocity": 0.15
+  },
+  {
+    "date": "2021-12-25 15:37",
+    "entm": "15:41",
+    "index_velocity": 0.17,
+    "avg_velocity": 0.16
+  },
+  {
+    "date": "2021-12-25 15:43",
+    "entm": "15:47",
+    "index_velocity": 0.17,
+    "avg_velocity": 0.16
+  },
+  {
+    "date": "2021-12-27 10:33",
+    "entm": "10:37",
+    "index_velocity": 0.1,
+    "avg_velocity": 0.08
+  },
+  {
+    "date": "2021-12-27 10:38",
+    "entm": "10:42",
+    "index_velocity": 0.088,
+    "avg_velocity": 0.086
+  },
+  {
+    "date": "2021-12-27 10:57",
+    "entm": "11:02",
+    "index_velocity": 0.094,
+    "avg_velocity": 0.093
+  },
+  {
+    "date": "2022-04-02 15:01",
+    "entm": "15:04",
+    "index_velocity": 0.2,
+    "avg_velocity": 0.17
+  },
+  {
+    "date": "2022-04-02 15:07",
+    "entm": "15:10",
+    "index_velocity": 0.17,
+    "avg_velocity": 0.14
+  },
+  {
+    "date": "2022-04-02 15:15",
+    "entm": "15:18",
+    "index_velocity": 0.19,
+    "avg_velocity": 0.16
+  },
+  {
+    "date": "2022-04-04 15:14",
+    "entm": "15:17",
+    "index_velocity": 0.12,
+    "avg_velocity": 0.11
+  },
+  {
+    "date": "2022-04-04 15:21",
+    "entm": "15:24",
+    "index_velocity": 0.13,
+    "avg_velocity": 0.12
+  },
+  {
+    "date": "2022-06-14 14:59",
+    "entm": "15:02",
+    "index_velocity": 0.11,
+    "avg_velocity": 0.093
+  },
+  {
+    "date": "2022-07-03 14:42",
+    "entm": "14:45",
+    "index_velocity": -0.2,
+    "avg_velocity": -0.18
+  },
+  {
+    "date": "2022-07-03 15:01",
+    "entm": "15:06",
+    "index_velocity": -0.22,
+    "avg_velocity": -0.192
+  },
+  {
+    "date": "2022-07-03 15:26",
+    "entm": "15:28",
+    "index_velocity": -0.18,
+    "avg_velocity": -0.173
+  },
+  {
+    "date": "2022-07-03 15:40",
+    "entm": "15:43",
+    "index_velocity": -0.19,
+    "avg_velocity": -0.169
+  },
+  {
+    "date": "2022-07-03 15:43",
+    "entm": "15:46",
+    "index_velocity": -0.19,
+    "avg_velocity": -0.166
+  },
+  {
+    "date": "2022-07-03 16:09",
+    "entm": "16:12",
+    "index_velocity": -0.18,
+    "avg_velocity": -0.168
+  },
+  {
+    "date": "2022-07-03 16:12",
+    "entm": "16:15",
+    "index_velocity": -0.18,
+    "avg_velocity": -0.17
+  },
+  {
+    "date": "2022-07-04 11:41",
+    "entm": "11:44",
+    "index_velocity": -0.07,
+    "avg_velocity": -0.06
+  },
+  {
+    "date": "2022-10-09 12:37",
+    "entm": "12:39",
+    "index_velocity": 0.07,
+    "avg_velocity": 0.07
+  },
+  {
+    "date": "2022-12-07 14:24",
+    "entm": "14:28",
+    "index_velocity": 0.13,
+    "avg_velocity": 0.1
+  },
+  {
+    "date": "2022-12-07 14:36",
+    "entm": "14:39",
+    "index_velocity": 0.14,
+    "avg_velocity": 0.13
+  },
+  {
+    "date": "2022-12-07 14:41",
+    "entm": "14:44",
+    "index_velocity": 0.13,
+    "avg_velocity": 0.12
+  },
+  {
+    "date": "2022-12-07 15:24",
+    "entm": "15:26",
+    "index_velocity": 0.14,
+    "avg_velocity": 0.12
+  },
+  {
+    "date": "2023-02-24 9:48",
+    "entm": "9:53",
+    "index_velocity": 0.11,
+    "avg_velocity": 0.11
+  },
+  {
+    "date": "2023-02-24 10:58",
+    "entm": "11:03",
+    "index_velocity": 0.11,
+    "avg_velocity": 0.11
+  },
+  {
+    "date": "2023-02-24 11:27",
+    "entm": "11:32",
+    "index_velocity": 0.1,
+    "avg_velocity": 0.091
+  },
+  {
+    "date": "2023-05-08 10:10",
+    "entm": "10:15",
+    "index_velocity": 0.16,
+    "avg_velocity": 0.16
+  },
+  {
+    "date": "2023-05-08 10:15",
+    "entm": "10:20",
+    "index_velocity": 0.17,
+    "avg_velocity": 0.16
+  },
+  {
+    "date": "2023-05-08 10:43",
+    "entm": "10:48",
+    "index_velocity": 0.18,
+    "avg_velocity": 0.16
+  },
+  {
+    "date": "2023-05-08 13:32",
+    "entm": "13:37",
+    "index_velocity": 0.2,
+    "avg_velocity": 0.17
+  },
+  {
+    "date": "2023-05-08 14:12",
+    "entm": "14:17",
+    "index_velocity": 0.18,
+    "avg_velocity": 0.17
+  },
+  {
+    "date": "2023-06-13 11:13",
+    "entm": "11:18",
+    "index_velocity": 0.19,
+    "avg_velocity": 0.17
+  },
+  {
+    "date": "2023-06-13 11:22",
+    "entm": "11:28",
+    "index_velocity": 0.19,
+    "avg_velocity": 0.17
+  },
+  {
+    "date": "2023-07-16 12:47",
+    "entm": "12:52",
+    "index_velocity": 0.23,
+    "avg_velocity": 0.22
+  },
+  {
+    "date": "2023-07-16 13:03",
+    "entm": "13:09",
+    "index_velocity": 0.22,
+    "avg_velocity": 0.22
+  },
+  {
+    "date": "2023-07-16 14:17",
+    "entm": "14:22",
+    "index_velocity": 0.26,
+    "avg_velocity": 0.24
+  },
+  {
+    "date": "2023-07-16 14:33",
+    "entm": "14:38",
+    "index_velocity": 0.24,
+    "avg_velocity": 0.24
+  },
+  {
+    "date": "2023-07-16 15:27",
+    "entm": "15:32",
+    "index_velocity": 0.24,
+    "avg_velocity": 0.24
+  },
+  {
+    "date": "2023-07-31 14:05",
+    "entm": "14:10",
+    "index_velocity": 0.14,
+    "avg_velocity": 0.13
+  },
+  {
+    "date": "2023-07-31 14:53",
+    "entm": "14:59",
+    "index_velocity": 0.14,
+    "avg_velocity": 0.12
+  },
+  {
+    "date": "2023-08-11 13:50",
+    "entm": "13:55",
+    "index_velocity": 0.15,
+    "avg_velocity": 0.14
+  },
+  {
+    "date": "2023-08-11 14:00",
+    "entm": "14:05",
+    "index_velocity": 0.15,
+    "avg_velocity": 0.14
+  },
+  {
+    "date": "2023-08-11 14:13",
+    "entm": "14:18",
+    "index_velocity": 0.14,
+    "avg_velocity": 0.14
+  },
+  {
+    "date": "2023-08-24 15:00",
+    "entm": "15:05",
+    "index_velocity": 0.17,
+    "avg_velocity": 0.15
+  },
+  {
+    "date": "2023-08-24 15:05",
+    "entm": "15:10",
+    "index_velocity": 0.15,
+    "avg_velocity": 0.14
+  },
+  {
+    "date": "2023-08-27 14:08",
+    "entm": "14:13",
+    "index_velocity": 0.076,
+    "avg_velocity": 0.071
+  },
+  {
+    "date": "2023-09-10 13:25",
+    "entm": "13:35",
+    "index_velocity": -0.033,
+    "avg_velocity": -0.036
+  },
+  {
+    "date": "2023-09-11 13:12",
+    "entm": "13:17",
+    "index_velocity": -0.27,
+    "avg_velocity": -0.27
+  },
+  {
+    "date": "2023-09-11 13:38",
+    "entm": "13:43",
+    "index_velocity": -0.23,
+    "avg_velocity": -0.26
+  },
+  {
+    "date": "2023-09-11 14:40",
+    "entm": "14:45",
+    "index_velocity": -0.25,
+    "avg_velocity": -0.24
+  },
+  {
+    "date": "2023-09-11 14:45",
+    "entm": "14:51",
+    "index_velocity": -0.25,
+    "avg_velocity": -0.24
+  },
+  {
+    "date": "2023-09-11 15:40",
+    "entm": "15:45",
+    "index_velocity": -0.21,
+    "avg_velocity": -0.21
+  },
+  {
+    "date": "2023-09-11 15:53",
+    "entm": "16:00",
+    "index_velocity": -0.23,
+    "avg_velocity": -0.22
+  },
+  {
+    "date": "2023-09-11 16:51",
+    "entm": "16:56",
+    "index_velocity": -0.22,
+    "avg_velocity": -0.22
+  },
+  {
+    "date": "2023-09-11 17:05",
+    "entm": "17:10",
+    "index_velocity": -0.21,
+    "avg_velocity": -0.21
+  },
+  {
+    "date": "2023-09-11 18:25",
+    "entm": "18:30",
+    "index_velocity": -0.2,
+    "avg_velocity": -0.18
+  },
+  {
+    "date": "2023-09-11 18:28",
+    "entm": "18:33",
+    "index_velocity": -0.21,
+    "avg_velocity": -0.19
+  },
+  {
+    "date": "2023-09-11 18:55",
+    "entm": "19:00",
+    "index_velocity": -0.18,
+    "avg_velocity": -0.19
+  },
+  {
+    "date": "2023-09-11 19:13",
+    "entm": "19:18",
+    "index_velocity": -0.17,
+    "avg_velocity": -0.18
+  },
+  {
+    "date": "2023-09-18 10:58",
+    "entm": "11:03",
+    "index_velocity": 0.24,
+    "avg_velocity": 0.24
+  },
+  {
+    "date": "2023-09-18 11:30",
+    "entm": "11:35",
+    "index_velocity": 0.24,
+    "avg_velocity": 0.25
+  },
+  {
+    "date": "2023-09-18 11:36",
+    "entm": "11:43",
+    "index_velocity": 0.25,
+    "avg_velocity": 0.25
+  },
+  {
+    "date": "2023-09-18 15:06",
+    "entm": "15:12",
+    "index_velocity": 0.22,
+    "avg_velocity": 0.22
+  },
+  {
+    "date": "2023-12-07 15:26",
+    "entm": "15:32",
+    "index_velocity": 0.22,
+    "avg_velocity": 0.21
+  },
+  {
+    "date": "2023-12-07 15:47",
+    "entm": "15:52",
+    "index_velocity": 0.22,
+    "avg_velocity": 0.22
+  },
+  {
+    "date": "2024-01-12 12:00",
+    "entm": "12:10",
+    "index_velocity": 0.16,
+    "avg_velocity": 0.17
+  },
+  {
+    "date": "2024-04-14 13:30",
+    "entm": "13:40",
+    "index_velocity": 0.1,
+    "avg_velocity": 0.11
+  },
+  {
+    "date": "2024-04-25 11:28",
+    "entm": "11:36",
+    "index_velocity": 0.078,
+    "avg_velocity": 0.081
+  },
+  {
+    "date": "2024-06-24 14:22",
+    "entm": "14:29",
+    "index_velocity": 0.3,
+    "avg_velocity": 0.29
+  },
+  {
+    "date": "2024-06-30 14:46",
+    "entm": "14:54",
+    "index_velocity": 0.1,
+    "avg_velocity": 0.1
+  },
+  {
+    "date": "2024-07-01 14:48",
+    "entm": "14:53",
+    "index_velocity": 0.18,
+    "avg_velocity": 0.19
+  },
+  {
+    "date": "2024-07-01 14:57",
+    "entm": "15:06",
+    "index_velocity": 0.19,
+    "avg_velocity": 0.19
+  },
+  {
+    "date": "2024-07-01 15:08",
+    "entm": "15:15",
+    "index_velocity": 0.2,
+    "avg_velocity": 0.2
+  },
+  {
+    "date": "2024-07-16 13:20",
+    "entm": "13:30",
+    "index_velocity": 0.28,
+    "avg_velocity": 0.29
+  },
+  {
+    "date": "2024-07-16 14:56",
+    "entm": "15:05",
+    "index_velocity": 0.28,
+    "avg_velocity": 0.29
+  },
+  {
+    "date": "2024-07-16 15:26",
+    "entm": "15:35",
+    "index_velocity": 0.28,
+    "avg_velocity": 0.29
+  },
+  {
+    "date": "2024-07-16 15:55",
+    "entm": "16:05",
+    "index_velocity": 0.27,
+    "avg_velocity": 0.28
+  },
+  {
+    "date": "2024-07-16 16:25",
+    "entm": "16:35",
+    "index_velocity": 0.28,
+    "avg_velocity": 0.28
+  },
+  {
+    "date": "2024-07-16 16:55",
+    "entm": "17:05",
+    "index_velocity": 0.28,
+    "avg_velocity": 0.28
+  },
+  {
+    "date": "2024-07-17 13:56",
+    "entm": "14:05",
+    "index_velocity": 0.28,
+    "avg_velocity": 0.29
+  },
+  {
+    "date": "2024-07-17 14:25",
+    "entm": "14:35",
+    "index_velocity": 0.28,
+    "avg_velocity": 0.28
+  },
+  {
+    "date": "2024-07-17 14:55",
+    "entm": "15:05",
+    "index_velocity": 0.3,
+    "avg_velocity": 0.29
+  },
+  {
+    "date": "2024-07-17 15:25",
+    "entm": "15:35",
+    "index_velocity": 0.28,
+    "avg_velocity": 0.29
+  },
+  {
+    "date": "2024-07-18 10:26",
+    "entm": "10:35",
+    "index_velocity": 0.29,
+    "avg_velocity": 0.29
+  },
+  {
+    "date": "2024-07-18 10:55",
+    "entm": "11:05",
+    "index_velocity": 0.28,
+    "avg_velocity": 0.29
+  },
+  {
+    "date": "2024-07-30 15:10",
+    "entm": "15:18",
+    "index_velocity": 0.25,
+    "avg_velocity": 0.24
+  },
+  {
+    "date": "2024-07-30 15:37",
+    "entm": "15:43",
+    "index_velocity": 0.23,
+    "avg_velocity": 0.23
+  },
+  {
+    "date": "2024-07-30 15:47",
+    "entm": "15:53",
+    "index_velocity": 0.24,
+    "avg_velocity": 0.23
+  },
+  {
+    "date": "2024-08-06 14:21",
+    "entm": "14:29",
+    "index_velocity": 0.15,
+    "avg_velocity": 0.14
+  },
+  {
+    "date": "2024-08-06 14:54",
+    "entm": "15:01",
+    "index_velocity": 0.14,
+    "avg_velocity": 0.15
+  },
+  {
+    "date": "2024-08-13 18:20",
+    "entm": "18:26",
+    "index_velocity": 0.11,
+    "avg_velocity": 0.12
+  },
+  {
+    "date": "2024-09-11 8:55",
+    "entm": "9:13",
+    "index_velocity": 0.013,
+    "avg_velocity": 0.015
+  },
+  {
+    "date": "2024-09-11 11:01",
+    "entm": "11:09",
+    "index_velocity": -0.039,
+    "avg_velocity": -0.044
+  },
+  {
+    "date": "2024-09-11 14:10",
+    "entm": "14:20",
+    "index_velocity": -0.062,
+    "avg_velocity": -0.07
+  },
+  {
+    "date": "2024-09-11 15:15",
+    "entm": "15:24",
+    "index_velocity": -0.055,
+    "avg_velocity": -0.064
+  },
+  {
+    "date": "2024-09-11 16:15",
+    "entm": "16:25",
+    "index_velocity": -0.089,
+    "avg_velocity": -0.092
+  },
+  {
+    "date": "2024-09-11 16:31",
+    "entm": "16:40",
+    "index_velocity": -0.097,
+    "avg_velocity": -0.092
+  },
+  {
+    "date": "2024-09-11 17:00",
+    "entm": "17:10",
+    "index_velocity": -0.098,
+    "avg_velocity": -0.097
+  },
+  {
+    "date": "2024-09-11 17:15",
+    "entm": "17:25",
+    "index_velocity": -0.099,
+    "avg_velocity": -0.098
+  },
+  {
+    "date": "2024-09-11 17:35",
+    "entm": "17:45",
+    "index_velocity": -0.11,
+    "avg_velocity": -0.099
+  },
+  {
+    "date": "2024-09-11 18:05",
+    "entm": "18:15",
+    "index_velocity": -0.11,
+    "avg_velocity": -0.1
+  },
+  {
+    "date": "2024-09-16 19:05",
+    "entm": "19:15",
+    "index_velocity": -0.23,
+    "avg_velocity": -0.24
+  },
+  {
+    "date": "2024-09-16 19:15",
+    "entm": "19:25",
+    "index_velocity": -0.24,
+    "avg_velocity": -0.24
+  },
+  {
+    "date": "2024-09-16 19:51",
+    "entm": "20:00",
+    "index_velocity": -0.26,
+    "avg_velocity": -0.25
+  },
+  {
+    "date": "2024-09-16 21:05",
+    "entm": "21:15",
+    "index_velocity": -0.23,
+    "avg_velocity": -0.23
+  },
+  {
+    "date": "2024-09-16 21:41",
+    "entm": "21:50",
+    "index_velocity": -0.21,
+    "avg_velocity": -0.21
+  },
+  {
+    "date": "2024-09-16 23:00",
+    "entm": "23:10",
+    "index_velocity": -0.19,
+    "avg_velocity": -0.19
+  },
+  {
+    "date": "2024-09-17 0:20",
+    "entm": "0:30",
+    "index_velocity": -0.18,
+    "avg_velocity": -0.18
+  },
+  {
+    "date": "2024-09-17 2:50",
+    "entm": "3:00",
+    "index_velocity": -0.15,
+    "avg_velocity": -0.14
+  },
+  {
+    "date": "2024-09-17 3:55",
+    "entm": "4:05",
+    "index_velocity": -0.15,
+    "avg_velocity": -0.16
+  },
+  {
+    "date": "2024-09-17 8:03",
+    "entm": "8:08",
+    "index_velocity": -0.28,
+    "avg_velocity": -0.28
+  }
+]

+ 4 - 0
src/assets/styles/element/index.scss

@@ -84,3 +84,7 @@ $--card: (
   background: var(--el-fill-color-light);
   border: 1px solid var(--el-fill-color-light);
 }
+
+.el-checkbox-button__inner {
+  padding: 8px 16px;
+}

+ 164 - 0
src/components/DeviceComponent/AdcpFlow.vue

@@ -0,0 +1,164 @@
+<script lang="ts" setup>
+import {onMounted, ref} from "vue";
+import {useRoute} from "vue-router";
+import Chart from "@/components/Chart.vue";
+import adcpFlowData from "@/assets/json/adcp.json";
+import play from "@/assets/svg/play2.svg";
+import {Operate, View} from "@/utils/tdInstruction";
+
+const route = useRoute()
+const chartRef = ref(null)
+// 流量比测 0:结束 1:播放 2:暂停
+const flowComparativeStatus = ref(0)
+
+
+/**
+ * 流量比测
+ * @param mode 播放、暂停、继续、结束
+ */
+function handleFlowComparativeStatus(mode) {
+  // 切换视角
+  View.changeView(`${route.params.stcd}_ADCP船`)
+  Operate.flowComparative(route.params.stcd, '播放')
+  flowComparativeStatus.value = 1
+  // switch (mode) {
+  //   case "play":
+  //     if (flowComparativeStatus.value === 0) {
+  //       Operate.flowComparative(route.params.stcd, '播放')
+  //     } else {
+  //       Operate.flowComparative(route.params.stcd, '继续')
+  //     }
+  //     flowComparativeStatus.value = 1
+  //     break
+  //   case "pause":
+  //     Operate.flowComparative(route.params.stcd, '暂停')
+  //     flowComparativeStatus.value = 2
+  //     break
+  //   case "stop":
+  //     Operate.flowComparative(route.params.stcd, '结束')
+  //     flowComparativeStatus.value = 0
+  //     break
+  //   default:
+  // }
+}
+
+async function reloadChart() {
+  const flowData = adcpFlowData
+  const option = {
+    tooltip: {
+      trigger: 'axis'
+    },
+    grid: {
+      top: '13%',
+      left: '2%',
+      right: '2%',
+      bottom: '0%',
+      containLabel: true
+    },
+    xAxis: [{
+      type: 'category',
+      boundaryGap: false,
+      axisLine: { // 坐标轴轴线相关设置。数学上的x轴
+        show: true,
+        lineStyle: {
+          color: '#233e64'
+        }
+      },
+      axisLabel: { // 坐标轴刻度标签的相关设置
+        color: '#02cacf',
+        formatter: value => {
+          if (value) {
+            const tm = value.split(' ')
+            return `${tm[1]}\n${tm[0].substring(5, 10)}`
+          }
+          return ''
+        }
+      },
+      axisTick: {show: false},
+      data: flowData.map(item => item.date)
+    }],
+    yAxis: [{
+      name: 'm/s',
+      nameTextStyle: {
+        color: '#02cacf'
+      },
+      min: value => (value.min - 0.1).toFixed(3),
+      max: value => (value.max + 0.1).toFixed(3),
+      axisLabel: {
+        color: '#02cacf'
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: '#233e64'
+        }
+      },
+      axisLine: {
+        show: true
+      }
+    }],
+    series: [
+      {
+        name: '指标流速',
+        type: 'line',
+        smooth: true, //是否平滑曲线显示
+        lineStyle: {
+          color: '#06f92e'
+        },
+        data: flowData.map(item => item.index_velocity)
+      },
+      {
+        name: '平均流速',
+        type: 'line',
+        smooth: true, //是否平滑曲线显示
+        lineStyle: {
+          color: '#3deaff'
+        },
+        data: flowData.map(item => item.avg_velocity)
+      },
+    ]
+  }
+  chartRef.value.loadChart(option)
+}
+
+onMounted(() => {
+  reloadChart()
+})
+</script>
+<template>
+  <div style="width: 100%;height: 100%;">
+    <div style="height: calc(100% - 50px);width: 100%;">
+      <chart ref="chartRef"></chart>
+    </div>
+    <div class="wurenchuan">
+      <icon :data="play" class="video-btn" @click="handleFlowComparativeStatus('play')"/>
+      <!--      <icon v-if="flowComparativeStatus == 0 || flowComparativeStatus == 2" :data="play" class="video-btn"-->
+      <!--            @click="handleFlowComparativeStatus('play')"/>-->
+      <!--      <icon v-if="flowComparativeStatus == 1" :data="pause" class="video-btn"-->
+      <!--            @click="handleFlowComparativeStatus('pause')"/>-->
+      <!--      <icon v-if="flowComparativeStatus != 0" :data="stop" class="video-btn"-->
+      <!--            @click="handleFlowComparativeStatus('stop')"/>-->
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.wurenchuan {
+  width: 100%;
+  height: 50px;
+  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>

+ 0 - 93
src/components/DeviceComponent/flow.vue

@@ -1,93 +0,0 @@
-<script lang="ts" setup>
-import {onMounted, ref} from "vue";
-import {useRoute} from "vue-router";
-import Chart from "@/components/Chart.vue";
-import {getWaterLevelAndFlowListOfPageByStcd} from "@/api/gx";
-import {formatd} from "@/utils/ruoyi";
-
-const route = useRoute()
-const chartRef = ref(null)
-
-async function reloadChart() {
-  const sevenDayAgo = new Date(new Date().getTime() - 1 * 24 * 60 * 60 * 1000)
-  const flowData = await getWaterLevelAndFlowListOfPageByStcd({
-    stcd: route.params.stcd,
-    startTime: formatd(sevenDayAgo),
-    endTime: formatd(new Date())
-  }).then(res => {
-    return res.rows
-  })
-  const option = {
-    // backgroundColor: "#0B2D55",
-    tooltip: {
-      trigger: 'axis'
-    },
-    grid: {
-      top: '13%',
-      left: '2%',
-      right: '2%',
-      bottom: '0%',
-      containLabel: true
-    },
-    xAxis: [{
-      type: 'category',
-      boundaryGap: false,
-      axisLine: { // 坐标轴轴线相关设置。数学上的x轴
-        show: true,
-        lineStyle: {
-          color: '#233e64'
-        }
-      },
-      axisLabel: { // 坐标轴刻度标签的相关设置
-        color: '#02cacf'
-      },
-      axisTick: {show: false},
-      data: flowData.map(item => item.tm ? item.tm.substring(11, 16) + '\n' + item.tm.substring(5, 10) : '')
-    }],
-    yAxis: [{
-      name: 'm³/s',
-      nameTextStyle: {
-        color: '#02cacf'
-      },
-      min: value => (value.min - 10).toFixed(0),
-      max: value => (value.max + 10).toFixed(0),
-      axisLabel: {
-        color: '#02cacf'
-      },
-      splitLine: {
-        show: true,
-        lineStyle: {
-          color: '#233e64'
-        }
-      },
-      axisLine: {
-        show: true
-      }
-    }],
-    series: [{
-      name: '流量',
-      type: 'line',
-      areaStyle: {},
-      smooth: true, //是否平滑曲线显示
-      lineStyle: {
-        color: '#3deaff'
-      },
-      // barWidth: 18,
-      // label: {
-      //   show: true,
-      //   position: 'top'
-      // },
-      data: flowData.map(item => item.q)
-    }
-    ]
-  }
-  chartRef.value.loadChart(option)
-}
-
-onMounted(() => {
-  reloadChart()
-})
-</script>
-<template>
-  <chart ref="chartRef"></chart>
-</template>

+ 1 - 1
src/components/RightFrame.vue

@@ -52,7 +52,7 @@ watch(
 <template>
   <div class="right-frame">
     <div v-if="slots.leftModule" :style="leftSidebarStyle" class="gw-sidebar-left">
-      <div class="gw-sidebar-container">
+      <div v-if="slots.leftModule" class="gw-sidebar-container">
         <slot name="leftModule"></slot>
       </div>
       <div class="gw-sidebar-btn left-btn" @click="convertSidebar('left')">

+ 2 - 2
src/components/StripeTable.vue

@@ -4,7 +4,7 @@ defineProps({
   columns: {type: Array, default: []},
 })
 
-const emit = defineEmits(['click'])
+const emit = defineEmits(['row-click'])
 
 function handleClick(row) {
   emit('row-click', row)
@@ -12,7 +12,7 @@ function handleClick(row) {
 </script>
 
 <template>
-  <el-table :data="data" height="100%" stripe @row-click="handleClick" style="font-size: 16px">
+  <el-table :data="data" height="100%" stripe style="font-size: 16px" @row-click="handleClick">
     <el-table-column v-for="column in columns" :key="column.prop" :label="column.label" :prop="column.prop"
                      :width="column.width" align="center">
       <template v-if="!column.convertFn" #default="scope">

+ 106 - 0
src/components/TimeScrollbar.vue

@@ -0,0 +1,106 @@
+<script lang="ts" setup>
+import {onUnmounted, ref, getCurrentInstance} from "vue";
+import {VideoPlay, VideoPause, RefreshLeft} from '@element-plus/icons-vue'
+
+defineProps({
+  max: {
+    type: Number,
+    default: 100
+  },
+  marks: {
+    type: Object,
+    default: {}
+  },
+  value: {
+    type: Number,
+    default: 0
+  },
+  formatTooltip: {
+    type: Function,
+    default: value => value
+  }
+})
+const emit = defineEmits(["input"]);
+
+const {props} = getCurrentInstance()
+const state = ref(0)
+let timer = null
+
+function play() {
+  state.value = 1
+  timer = setInterval(() => {
+    // 当value等于max时,清除定时器
+    if (props.value === props.max) {
+      closeTimer()
+    }
+
+    emit('input', props.value + 1)
+  }, 1000);
+}
+
+function pause() {
+  state.value = 0
+  closeTimer()
+}
+
+function refresh() {
+  pause()
+  emit('input', 0)
+}
+
+function closeTimer() {
+  if (timer != null) {
+    clearInterval(timer);
+    timer = null;
+  }
+}
+
+onUnmounted(() => {
+  closeTimer()
+})
+</script>
+<template>
+  <div class="time-scrollbar">
+    <div class="action-bar">
+      <VideoPlay v-if="state === 1" @click="pause"></VideoPlay>
+      <VideoPause v-if="state === 0" @click="play"></VideoPause>
+      <RefreshLeft v-if="props.value > 0" @click="refresh"></RefreshLeft>
+    </div>
+    <div class="time-slider-container">
+      <el-slider v-model="props.value" :format-tooltip="formatTooltip" :marks="props.marks"
+                 :max="props.max" style="width: 100%;"></el-slider>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.time-scrollbar {
+  height: 60px;
+  display: flex;
+
+  .action-bar {
+    width: 10%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #fff;
+    font-size: 1.5rem;
+
+    svg + svg {
+      margin-left: 5px;
+    }
+
+    svg:hover {
+      color: #00ccff;
+    }
+
+  }
+
+  .time-slider-container {
+    width: 90%;
+    display: flex;
+    align-items: center;
+    padding: 0 10px 0 20px;
+  }
+
+}
+</style>

+ 5 - 2
src/utils/device.ts

@@ -95,8 +95,11 @@ const deviceDetailList = [
   },
 ]
 
-function getDeviceByName(name: any) {
-  return deviceDetailList.find(item => item.ueDeviceName === name)
+function getDeviceByName(name: any, field: string = 'ueDeviceName') {
+  return deviceDetailList.find(item => {
+    const value = (item as { [key: string]: any })[field];  // 使用类型断言,但注意这会丢失类型安全
+    return value ? value === name : false;
+  })
 }
 
 function getDeviceTypeByName(name: any) {

+ 14 - 1
src/utils/tdInstruction/label.ts

@@ -4,7 +4,7 @@ import Bus from "@/utils/bus";
 /**
  * 测站标签展示
  * 测站主页:显示站房雨量场等图标;仪器运维:显示仪器图标
- * @param type 展示标签类型(测站主页:显示站房雨量场等图标;仪器运维:显示仪器图标)
+ * @param type 展示标签类型(测站主页:显示站房雨量场等图标;仪器运维:显示仪器图标;水质检验:显示屋内仪器图标,ADCP弹框
  */
 export function setStationLabel(stcd: any, type = "测站主页", show = true) {
   let descriptor = {
@@ -22,3 +22,16 @@ export function setStationLabel(stcd: any, type = "测站主页", show = true) {
 export function closeStationLabel(stcd: any) {
   ['测站主页', '仪器运维'].forEach(item => setStationLabel(stcd, item, false))
 }
+
+
+export function adcpfx(stcd: any, show = true) {
+  let descriptor = {
+    "command": "ADCPFX",
+    "data": {
+      "Type": show ? "True" : "False",
+      "ID": stcd
+    }
+  }
+  Bus.emit('emitUIInteraction', descriptor)
+  console.log("-- H-ADCP特效与标签显隐", JSON.stringify(descriptor));
+}

+ 17 - 0
src/utils/tdInstruction/operate.ts

@@ -34,3 +34,20 @@ export function testSimulation(stcd: any, type: any = '播放') {
   Bus.emit('emitUIInteraction', descriptor)
   console.log("-- 测验模拟:" + type, JSON.stringify(descriptor));
 }
+
+/**
+ * 流量比对
+ * @param type 播放、暂停、继续、结束
+ * @param stcd 测站编码
+ */
+export function flowComparative(stcd: any, type: any = '播放') {
+  let descriptor = {
+    "command": "ADCPship",
+    "data": {
+      "Type": type,
+      "ID": stcd
+    }
+  }
+  Bus.emit('emitUIInteraction', descriptor)
+  console.log("-- 流量比对:" + type, JSON.stringify(descriptor));
+}

+ 20 - 10
src/views/Device.vue

@@ -7,13 +7,13 @@ import StripeTable from '@/components/StripeTable.vue'
 import {getDeviceByName, getDeviceTypeByName} from '@/utils/device'
 import Chart from '@/components/Chart.vue'
 import StationRightButtonGroup from '@/components/StationRightButtonGroup.vue'
-import {View} from "@/utils/tdInstruction";
+import {Label, View} from "@/utils/tdInstruction";
 import GwVideo from "@/components/Video/index.vue";
 import {getVideoCodeByMark} from "@/components/Video/video";
-import Flow from "@/components/DeviceComponent/flow.vue";
 import WaterQualityAnalysis from "@/components/DeviceComponent/WaterQualityAnalysis.vue";
-import WaterLevel from "@/components/DeviceComponent/waterLevel.vue";
-import Rainfall from "@/components/DeviceComponent/rainfall.vue";
+import WaterLevel from "@/components/DeviceComponent/WaterLevel.vue";
+import Rainfall from "@/components/DeviceComponent/Rainfall.vue";
+import AdcpFlow from "@/components/DeviceComponent/AdcpFlow.vue";
 
 const route = useRoute()
 const right3Ref = ref(null)
@@ -257,7 +257,15 @@ onMounted(() => {
 })
 
 onUnmounted(() => {
-  View.closeDeviceView(route.params.stcd)
+  // 关闭水质仪器视角
+  if (deviceType.value === 'waterQuality') {
+    View.closeDeviceView(route.params.stcd)
+  }
+  // 关闭 adcp 特效与弹窗
+  if (device.value.ueDeviceName === "H-ADCP") {
+    Label.setStationLabel(route.params.stcd, 'ADCP弹框', false)
+    Label.adcpfx(route.params.stcd, false)
+  }
 })
 </script>
 
@@ -333,23 +341,25 @@ onUnmounted(() => {
         </card01>
       </template>
       <template v-if="deviceType=== 'video'">
-        <card01 :title="device.deviceName" style="height: 40%">
+        <card01 style="height: 40%" title="视频监控">
           <gw-video :code="videoCode" :imageSrc="videoImageSrc"></gw-video>
         </card01>
       </template>
       <template v-if="deviceType=== 'waterLevel'">
-        <card01 :title="device.deviceName" style="height: 36%">
+        <card01 style="height: 36%" title="水位监测">
           <water-level></water-level>
         </card01>
       </template>
       <template v-if="deviceType=== 'rainfall'">
-        <card01 :title="device.deviceName" style="height: 36%">
+        <card01 style="height: 36%" title="雨量监测">
           <rainfall></rainfall>
         </card01>
       </template>
       <template v-if="deviceType=== 'flow'">
-        <card01 :title="device.deviceName" style="height: 36%">
-          <flow></flow>
+        <card01 style="height: 36%" title="流量监测">
+          <adcp-flow></adcp-flow>
+          <!--          <adcp-flow v-if="device.ueDeviceName === '无人船'"></adcp-flow>-->
+          <!--          <flow v-else></flow>-->
         </card01>
       </template>
       <template v-if="deviceType=== 'waterQuality'">

+ 6 - 0
src/views/Home.vue

@@ -135,6 +135,12 @@ function reloadLeft2() {
 
 function getStationList() {
   getRStLLMaxDate().then(res => {
+    res.forEach(s => {
+      if (s.stcd === '701T0001') {
+        s.lgtd = '117.99223749'
+        s.lttd = '29.66659453'
+      }
+    })
     tableData.push(...res)
     initPoints()
   }).catch(() => {

+ 1 - 1
src/views/IntellOper.vue

@@ -151,7 +151,7 @@ onMounted(() => {
 })
 
 function handleDeviceClick(row) {
-  const device = getDeviceByName(row.deviceName);
+  const device = getDeviceByName(row.deviceName, 'deviceName');
   if (device) {
     if (device["deviceType"] === "水质测验设备") {
       View.changeDeviceView('打开模型', route.params.stcd, device.ueDeviceName)

+ 60 - 51
src/views/Station.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import RightFrame from "@/components/RightFrame.vue";
 import Card01 from "@/components/card/Card01.vue";
-import {computed, ref} from "vue";
+import {computed, ref, watch} from "vue";
 import {useRoute} from 'vue-router';
 import GwVideo from '@/components/Video/index.vue'
 
@@ -10,6 +10,7 @@ import StationRightButtonGroup from "@/components/StationRightButtonGroup.vue";
 import {getTypicalEvents} from "@/utils/typicalYear";
 import TypicalChart from "@/components/TypicalChart.vue";
 import {getVideoCodeByMark} from "@/components/Video/video";
+import TimeScrollbar from "@/components/TimeScrollbar.vue";
 
 const route = useRoute()
 const jiankong = new URL('@/assets/images/tmp/jiankong.png', import.meta.url).href
@@ -22,63 +23,71 @@ const videoCode = ref(getVideoCodeByMark(route.params.stcd + '', "室外"))
 // 典型事件
 const typicalEvents = ref(getTypicalEvents(route.params.stcd))
 
-</script>
+// 时间戳
+const value = ref(0)
+const max = ref(100)
+const dateList = ref([])
+const marks = ref({})
+
+function sliderlTooltip(val) {
+  return dateList.value[val]
+}
 
+watch(() => route.path, path => {
+
+})
+</script>
 <template>
-  <right-frame>
-    <template #leftModule>
-      <card01 style="height: 70%" title="测站简介">
-        <h3 class="introduce-title">{{ station.stnm + station.sttp }}</h3>
-        <p v-for="text in introduces" class="introduce-text" v-html="text"></p>
-        <img v-if="station.img" :src="introduceImg" alt="" class="introduce-img"/>
-      </card01>
-      <card01 style="height: 30%" title="现场监控">
-        <!--  34102206531322000100  -->
-        <gw-video :code="videoCode" :imageSrc="jiankong"></gw-video>
-      </card01>
-    </template>
-    <template #rightModule>
-      <card01 style="height: 100%" title="典型年">
-        <el-carousel :autoplay="true" :interval="5000" arrow="never" style="width: 100%;height: 100%;" trigger="click">
-          <el-carousel-item v-for="event in typicalEvents" :key="event.id">
-            <h3 class="introduce-title">{{ event.name }}</h3>
-            <p v-for="text in event.desc.split('\n')" class="introduce-text" v-html="text"></p>
-            <img :src="event.img" alt="" class="introduce-img"/>
-            <div style="height: 33%;">
-              <typical-chart :name="event.id" :stcd="route.params.stcd"></typical-chart>
-            </div>
-          </el-carousel-item>
-        </el-carousel>
-      </card01>
-    </template>
-    <template #btnGroup>
-      <station-right-button-group></station-right-button-group>
-    </template>
-  </right-frame>
+  <div class="station-wrapper">
+    <right-frame>
+      <template #leftModule>
+        <card01 style="height: 70%" title="测站简介">
+          <h3 class="introduce-title">{{ station.stnm + station.sttp }}</h3>
+          <p v-for="text in introduces" class="introduce-text" v-html="text"></p>
+          <img v-if="station.img" :src="introduceImg" alt="" class="introduce-img"/>
+        </card01>
+        <card01 style="height: 30%" title="现场监控">
+          <!--  34102206531322000100 这是有视频的CODE  -->
+          <gw-video :code="videoCode" :imageSrc="jiankong"></gw-video>
+        </card01>
+      </template>
+      <template #rightModule>
+        <card01 style="height: 100%" title="典型年">
+          <el-carousel :autoplay="true" :interval="5000" arrow="never" style="width: 100%;height: 100%;"
+                       trigger="click">
+            <el-carousel-item v-for="event in typicalEvents" :key="event.id">
+              <h3 class="introduce-title">{{ event.name }}</h3>
+              <p v-for="text in event.desc.split('\n')" class="introduce-text" v-html="text"></p>
+              <img :src="event.img" alt="" class="introduce-img"/>
+              <div style="height: 33%;">
+                <typical-chart :name="event.id" :stcd="route.params.stcd"></typical-chart>
+              </div>
+            </el-carousel-item>
+          </el-carousel>
+        </card01>
+      </template>
+      <template #btnGroup>
+        <station-right-button-group></station-right-button-group>
+      </template>
+    </right-frame>
+    <div class="typical-event-time-scrollbar">
+      <time-scrollbar v-model="value" :formatTooltip="sliderlTooltip" :marks="marks" :max="max"></time-scrollbar>
+    </div>
+  </div>
 </template>
 <style lang="scss" scoped>
 @use "@/assets/styles/introduce.scss";
 
-.difang-water-level {
-  position: absolute;
-  bottom: 10px;
-  width: 80%;
-  height: 60%;
-  background-color: rgba(0, 204, 255, 0.6);
-  border-top: 3px solid rgba(0, 204, 255);
-
-  .difang-water-level-value {
-    position: absolute;
-    top: -2rem;
-    font-size: 1.2rem;
-    color: #fff;
-  }
-
-}
-
-.difang-image {
-  position: relative;
+.station-wrapper {
   width: 100%;
   height: 100%;
 }
+
+.typical-event-time-scrollbar {
+  position: fixed;
+  bottom: 10vh;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 50vw;
+}
 </style>

+ 26 - 8
src/views/StationHouse.vue

@@ -40,10 +40,11 @@ const RGB_RED = HexToRgb(RED)
 // 浅红色
 const LIGHT_RED = `rgba(${RGB_RED[0]}, ${RGB_RED[1]}, ${RGB_RED[2]}, 0.3)`
 
+const frequency = ref(2)
 
 const wqData = ref({d1: '6', d2: '22.3', d3: '5', d4: '20', d5: '6', d6: '22.3', d7: '5', d8: '20'})
 // 设备列表
-const deviceList = reactive(getDeviceByType('水质测验设备'))
+const deviceList = reactive(getDeviceByType('水质测验设备').filter(d => d.deviceName !== '控制单元'))
 // 水质测验模拟 0:结束 1:播放 2:暂停
 const testSimulationStatus = ref(0)
 // 获取视频CODE
@@ -268,11 +269,28 @@ bus.on('test_simulation', (data) => {
     </template>
     <template #rightModule>
       <card01 style="height: 65%" title="监测流程">
-        <card-list :data="deviceList" style="height: calc(100% - 86px);margin-bottom: 10px;">
+        <el-form label-position="top" label-width="auto">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="检测频率">
+                <el-input-number v-model="frequency" controls-position="right"/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="设备启闭">
+                <el-checkbox-group v-model="deviceStatus">
+                  <el-checkbox-button name="type" value="open">开启</el-checkbox-button>
+                  <el-checkbox-button name="type" value="close">关闭</el-checkbox-button>
+                </el-checkbox-group>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+        <card-list :data="deviceList" style="height: calc(100% - 166px);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;">
+              :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;"
                    @click="jumpDevicePage(scope.row.ueDeviceName)">
                 <icon :data="instrument"/>&nbsp;
@@ -280,10 +298,10 @@ bus.on('test_simulation', (data) => {
               </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"
+                  v-model="scope.row.status"
+                  active-value="open"
+                  inactive-value="close"
+                  style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                 />
               </div>
             </div>