From f25e3c4bb44b93a60f417a16458e155f750a50c2 Mon Sep 17 00:00:00 2001
From: hui <770260999@qq.com>
Date: Wed, 6 Mar 2024 10:53:16 +0800
Subject: [PATCH 01/15] =?UTF-8?q?=E5=8A=9F=E8=83=BD=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ruoyi-ui/src/utils/request.js                 |  8 +++
 .../components/infoBoard/BoardInfoEditor.vue  | 54 +++++++++++++++----
 .../components/infoBoard/BoardPreview.vue     |  4 +-
 .../components/infoBoard/BoardTplPreview.vue  |  2 +
 .../views/JiHeExpressway/mixins/InfoBoard.js  |  3 +-
 .../pages/service/board/index.vue             | 19 ++++---
 ruoyi-ui/vue.config.js                        |  4 +-
 7 files changed, 72 insertions(+), 22 deletions(-)

diff --git a/ruoyi-ui/src/utils/request.js b/ruoyi-ui/src/utils/request.js
index d31b22f7..1acab51b 100644
--- a/ruoyi-ui/src/utils/request.js
+++ b/ruoyi-ui/src/utils/request.js
@@ -141,6 +141,14 @@ service.interceptors.response.use(res => {
     else if (message.includes("Request failed with status code")) {
       message = "系统接口" + message.substr(message.length - 3) + "异常";
     }
+    else if (message.includes("client_offline"))
+    {
+      message = "设备离线"
+    }
+    else if (message.includes("time_out"))
+    {
+      message = "连接超时"
+    }
     Message({
       message: message,
       type: 'error',
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/infoBoard/BoardInfoEditor.vue b/ruoyi-ui/src/views/JiHeExpressway/components/infoBoard/BoardInfoEditor.vue
index 5a34ea16..54ba5735 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/components/infoBoard/BoardInfoEditor.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/infoBoard/BoardInfoEditor.vue
@@ -101,6 +101,7 @@
                   :key="item.dictValue"
                   :label="item.dictLabel"
                   :value="item.dictValue"
+                  v-if="+(item.dictValue.replace('px',''))<=maxFontSize"
                 >
                 </el-option>
               </el-select>
@@ -191,6 +192,7 @@ import { debounce } from "lodash";
 export default {
   data() {
     return {
+      maxFontSize:100,
       alignmentNum: 2,
       content: "",
       boardWidth: "",
@@ -316,6 +318,17 @@ export default {
         speechSpeed: "0",
         font: "3",
       },
+      templateDefault: {
+        category: "",
+        formatStyle: "2",
+        content: "",
+        fontColor: "",
+        fontSize: "",
+        fontType: "",
+        stopTime: 50,
+        inScreenMode: "",
+        screenSize: "",
+      },
       isLocked: false,
     };
   },
@@ -361,6 +374,26 @@ export default {
     },
   },
   watch: {
+    screenSize(newV){
+
+      if(newV){
+        let boardH = newV.split("*")[1];
+        let fontSize = "20";
+        if (['64', '48'].includes(boardH)) {
+          this.maxFontSize = +boardH
+          fontSize = boardH + ""
+        } else if (['80'].includes(boardH)) {
+          this.maxFontSize = +boardH / 2
+          fontSize = +boardH / 2 + ""
+        } else if (['160'].includes(boardH)) {
+          this.maxFontSize = +boardH / 2
+          fontSize = +boardH / 4 + ""
+        }
+        this.deviceCttDefault.fontSize = fontSize
+        this.templateDefault.screenSize = newV;
+        this.templateDefault.fontSize = fontSize;
+      }
+    },
     visible: {
       handler(newV) {
         this.dialogVisible = newV;
@@ -400,21 +433,30 @@ export default {
   },
   mounted() {},
   created() {
+    this.templateDefault.fontType = this.fontTypeList[0].dictValue  //设置模板的默认值
     this.getDicts("iot_devices_font_color").then((res) => {
       this.colorList = res.data;
+      this.templateDefault.fontColor = this.colorList[0].dictValue
       // console.log(this.colorList, "字体颜色");
     });
     this.getDicts("iot_device_font_inScreen_mode").then((res) => {
       this.inScreenModeList = res.data;
+      this.templateDefault.inScreenMode = this.inScreenModeList[0].dictValue
       // console.log(this.inScreenModeList, "入屏方式");
     });
     this.getDicts("iot_template_category").then((res) => {
       this.templateCategoryList = res.data;
+      this.templateDefault.category = this.templateCategoryList[0].dictValue
     });
     this.getDicts("iot_device_font_size").then((res) => {
       this.fontSizeList = res.data;
+      // this.templateDefault.fontSize = this.fontSizeList[0].dictValue
       // this.dataForm.FONT_SIZE = res.data[1].dictValue
     });
+
+
+    
+
   },
   methods: {
     initData() {
@@ -433,17 +475,7 @@ export default {
       if (this.mode == "add") {
         let tempTpl = null;
         if (this.type == "template") {
-          tempTpl = {
-            category: this.templateCategoryList[0].dictValue,
-            formatStyle: 0,
-            content: "",
-            fontColor: this.colorList[0].dictValue,
-            fontSize: this.fontSizeList[0].dictValue,
-            fontType: this.fontTypeList[0].dictValue,
-            stopTime: 50,
-            inScreenMode: this.inScreenModeList[0].dictValue,
-            screenSize: this.screenSize,
-          };
+          tempTpl = _.merge({}, this.templateDefault, this.tpl);
         } else {
           tempTpl = _.merge({}, this.deviceCttDefault, this.tpl.origin); //首页弹窗，新增设备项时，需要传设备尺寸过来
         }
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/infoBoard/BoardPreview.vue b/ruoyi-ui/src/views/JiHeExpressway/components/infoBoard/BoardPreview.vue
index 005fa7d5..51c3e6da 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/components/infoBoard/BoardPreview.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/infoBoard/BoardPreview.vue
@@ -40,7 +40,7 @@ export default {
         },
         tpl:{
             handler(newV){
-                this.contentArr = this.tpl.textContent.replaceAll(/\\\\n/g, '\n').replaceAll(/ /g, '&nbsp').split('\n');
+                this.contentArr = this.tpl.textContent.replaceAll(/\\\\n/g, '\n').replaceAll(/\\=/g, '=').replaceAll(/\\,/g, ',').replaceAll(/ /g, '&nbsp').split('\n');
                 this.setStyle();
             },
             deep:true,
@@ -113,6 +113,8 @@ export default {
             color: #f00;
             line-height: 1;
             margin-bottom: 0;
+            word-break: keep-all;
+            white-space: nowrap;
         }
     }
 }
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/infoBoard/BoardTplPreview.vue b/ruoyi-ui/src/views/JiHeExpressway/components/infoBoard/BoardTplPreview.vue
index 71f8144c..473dbb38 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/components/infoBoard/BoardTplPreview.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/infoBoard/BoardTplPreview.vue
@@ -110,6 +110,8 @@ export default {
             color: #f00;
             line-height: 1;
             margin-bottom: 0;
+            word-break: keep-all;
+            white-space: nowrap;
         }
     }
 }
diff --git a/ruoyi-ui/src/views/JiHeExpressway/mixins/InfoBoard.js b/ruoyi-ui/src/views/JiHeExpressway/mixins/InfoBoard.js
index 0dcc45a8..5d9b420e 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/mixins/InfoBoard.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/mixins/InfoBoard.js
@@ -11,13 +11,14 @@ export default{
         // 新增待下发
         ____onAddDeviceItem() {
             let arr = this.selectedSize.split("*");
+
             this.editDialog = {
                 visible: true,
                 mode: "add",
                 type: "device",
                 tpl: {
                     "textContent": "",
-                    origin: {
+                    "origin": {
                         displayAreaWidth: +arr[0],
                         displayAreaHeight: +arr[1]
                     }
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/index.vue
index 516e4897..14477d93 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/index.vue
@@ -57,8 +57,8 @@
                       :key="index"
                     >
                       <div class="title">{{ itm.deviceName }}</div>
-                      <el-tooltip :content="(item.deviceState == 0 || item.deviceState == null) ? '离线' : '在线'" placement="top">
-                        <img src="@/assets/jihe/images/offline.svg" class="state" v-if="item.deviceState==0 || item.deviceState==null">
+                      <el-tooltip :content="(itm.deviceState == 0 || itm.deviceState == null) ? '离线' : '在线'" placement="top">
+                        <img src="@/assets/jihe/images/offline.svg" class="state" v-if="itm.deviceState=='0' || itm.deviceState==null">
                         <img src="@/assets/jihe/images/online.svg" class="state" v-else>
                       </el-tooltip>
                       <el-tooltip content="回读" placement="top">
@@ -455,7 +455,7 @@ export default {
         res.data.forEach((item) => {
           this.boardSizeDic[item.dictValue] = {
             label: item.dictLabel,
-            list: [],
+            list: []
           };
         });
       });
@@ -533,6 +533,7 @@ export default {
             if (_.isString(item.otherConfig)) {
               item.otherConfig = JSON.parse(item.otherConfig);
             }
+            item.iotDeviceId = item.iotDeviceId || "null_" + item.id;
             this.boardSizeDic[item.otherConfig.screenSize].list.push(item);
             if (!this.selectedSize) {
               this.selectedSize = item.otherConfig.screenSize;
@@ -569,7 +570,7 @@ export default {
         this.selectedBdMsg = [];
         this.selectedBdMsg = _.cloneDeep(testDeviceInfo.data["3A"].content);
       } else {
-        if (!deviceFrom.iotDeviceId) {
+        if (!deviceFrom.iotDeviceId || deviceFrom.iotDeviceId.includes("null_")) {
           this.$message.warning("设备未接入！");
           return;
         }
@@ -586,12 +587,16 @@ export default {
       }
     },
     ____onAddTemplate() {
+      
+      // if(selectedSize){
+      //   fontSize = "64px"
+      // }
       this.editDialog = {
         visible: true,
         mode: "add",
         type: "template",
         tpl: {
-          content: "",
+          content: ""
         },
       };
     },
@@ -783,8 +788,8 @@ export default {
         return;
       }
       this.checkedDeviceIds = [arr.pop()];
-      if (!this.checkedDeviceIds[0]) {
-        this.$message.warning("该设备缺少iotDeviceId参数!");
+      if (!this.checkedDeviceIds[0] || this.checkedDeviceIds[0].includes("null_")) {
+        this.$message.warning("设备未接入！");
       }
       this.selectedDevice = _.find(this.boardSizeDic[this.selectedSize].list, {
         iotDeviceId: this.checkedDeviceIds[0],
diff --git a/ruoyi-ui/vue.config.js b/ruoyi-ui/vue.config.js
index 25f5969a..388187f1 100644
--- a/ruoyi-ui/vue.config.js
+++ b/ruoyi-ui/vue.config.js
@@ -51,8 +51,8 @@ module.exports = {
         // target: `http://10.0.81.204:8087`, //现场后台 刘文阁
         // target: `http://10.168.69.255:8087`, //正晨后台 连现场物联 刘文阁
         // target: `http://10.168.78.135:8087`,  //王钦
-        // target: `http://10.168.66.196:8087`, //正晨后台 连现场物联 刘文阁2
-        target: `http://10.168.68.42:8087`, //王思祥
+        target: `http://10.168.66.196:8087`, //正晨后台 连现场物联 刘文阁2
+        // target: `http://10.168.68.42:8087`, //王思祥
         changeOrigin: true,
         pathRewrite: {
           ["^" + process.env.VUE_APP_BASE_API]: "",

From 370efd877e5bb3f6c8b9f0ccbdf56eaf59e7ccb1 Mon Sep 17 00:00:00 2001
From: zhoule <zz221011@163.com>
Date: Wed, 6 Mar 2024 10:54:00 +0800
Subject: [PATCH 02/15] =?UTF-8?q?=E8=B7=AF=E6=AE=B5=E9=87=8D=E7=BD=AE?=
 =?UTF-8?q?=E6=97=B6=EF=BC=8C=E5=AE=9A=E4=BD=8D=E4=B8=8D=E5=AF=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/eventQuery/index.vue           | 34 +++++++++++--------
 .../components/eventQuery/progressBar.vue     | 27 +++++++++++----
 2 files changed, 39 insertions(+), 22 deletions(-)

diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue
index 565ad9d8..f952b135 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue
@@ -1,12 +1,13 @@
 <template>
   <div class="congestion">
     <div class="board">
-      <ProgressBar class="keep-ratio" @selectItem="selectProgress" :dataList="dataList" :selectIndex="selectIndex" />
+      <ProgressBar class="keep-ratio" @selectItem="selectProgress" :dataList="dataList" :selectIndex="selectIndex"
+        :reset="reset" />
       <div class="searchPanel">
         <RadioGroup :options="[
-          { key: '1', label: '菏泽' },
-          { key: '3', label: '济南' },
-        ]" v-model="direction" type="button" />
+        { key: '1', label: '菏泽' },
+        { key: '3', label: '济南' },
+      ]" v-model="direction" type="button" />
         <el-select v-model="type" size="mini" class="selectRoad" placeholder="请选择" @change="changeType">
           <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value">
           </el-option>
@@ -18,15 +19,16 @@
         </el-select>
         <el-date-picker size="mini" v-if="type != 'quarter'" class="selectRoad" v-model="dateTime" style="width: 140px"
           :type="type == 'date'
-            ? 'date'
-            : type == 'month'
-              ? 'month'
-              : type == 'year'
-                ? 'year'
-                : ''
-            " placeholder="请选择" :clearable="false" />
-
-        <el-button type="primary" size="mini" class="btnSearch" @click="searchQuery" icon="el-icon-search">查询</el-button>
+        ? 'date'
+        : type == 'month'
+          ? 'month'
+          : type == 'year'
+            ? 'year'
+            : ''
+        " placeholder="请选择" :clearable="false" />
+
+        <el-button type="primary" size="mini" class="btnSearch" @click="searchQuery"
+          icon="el-icon-search">查询</el-button>
         <el-button class="btnReset" size="mini" icon="el-icon-refresh-left" @click="onReset">重置</el-button>
       </div>
     </div>
@@ -151,6 +153,7 @@ export default {
       dataList: [],
       selectIndex: 2,
       selectId: 2,
+      reset: false,
       type: "year",
       chart1List: [],
       chart2List: [],
@@ -206,16 +209,17 @@ export default {
     selectProgress(item, index) {
       this.selectIndex = index;
       this.selectId = item.id;
+      this.reset = false;
       this.searchQuery();
     },
     onReset() {
       this.direction = "1";
       this.type = "year";
       this.dateTime = "2024";
-      this.selectId = this.dataList[0].id;
       this.selectId = 2;
       this.selectIndex = 2;
-      this.searchQuery()
+      this.reset = true;
+      this.searchQuery();
     },
     searchQuery() {
       let startTime = "";
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/progressBar.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/progressBar.vue
index 5a91de2e..e8c05158 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/progressBar.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/progressBar.vue
@@ -3,9 +3,9 @@
         <div>
             <!-- :style="{ width: dataList.length * 300 }" -->
             <div :class="selectIndex == index ?
-                (selectLine < 1 ? 'item action Abefore' : 'item action Aafter') :
-                (selectIndex + selectLine == index ?
-                    (selectLine < 1 ? 'item action Aafter' : 'item action Abefore') : 'item')"
+                    (selectLine < 1 ? 'item action Abefore' : 'item action Aafter') :
+                    (selectIndex + selectLine == index ?
+                        (selectLine < 1 ? 'item action Aafter' : 'item action Abefore') : 'item')"
                 v-for="(item, index) in dataList" :key="index">
                 <i class="after" v-if="index === 0"></i>
                 <i class="after" v-else @click="selectItem(index, -1, dataList[index - 1])"></i>
@@ -19,7 +19,7 @@
         </div>
     </div>
 </template>
-  
+
 <script>
 
 export default {
@@ -36,6 +36,10 @@ export default {
         selectIndex: {
             type: Number,
             default: 1
+        },
+        reset: {
+            type: Boolean,
+            default: false
         }
     },
     data() {
@@ -46,6 +50,16 @@ export default {
     },
     created() {
 
+    },
+    watch: {
+        reset: {
+            handler(newV) {
+                if (newV) {
+                    this.selectLine = -1;
+                }
+            },
+            immediate: true,
+        },
     },
     methods: {
         selectItem(index, num, item) {
@@ -60,7 +74,7 @@ export default {
     },
 }
 </script>
-  
+
 <style lang='scss' scoped>
 .congestion {
     width: 100%;
@@ -204,5 +218,4 @@ export default {
         }
     }
 }
-</style>
-  
\ No newline at end of file
+</style>
\ No newline at end of file

From 8b8fae0784649a9c158dec5d094e72582cb3d5a3 Mon Sep 17 00:00:00 2001
From: zhangzhang <1747194829@qq.com>
Date: Wed, 6 Mar 2024 15:56:31 +0800
Subject: [PATCH 03/15] =?UTF-8?q?=E5=A4=A9=E6=B0=94=E5=AF=B9=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/api/perception/meteorologyCheck.js    |   32 +
 .../components/roadNetwork/index.vue          |  321 ++--
 .../components/sortFaceForecast/index.vue     | 1304 +++++++++--------
 .../components/weatherForecast/index.vue      |  525 +++----
 .../components/infoWarning/index.vue          |  755 +++++-----
 .../perception/meteorologyCheck/index.vue     |  277 ++--
 ruoyi-ui/src/views/event/event/dispatch.vue   | 1108 ++++++++------
 7 files changed, 2384 insertions(+), 1938 deletions(-)
 create mode 100644 ruoyi-ui/src/api/perception/meteorologyCheck.js

diff --git a/ruoyi-ui/src/api/perception/meteorologyCheck.js b/ruoyi-ui/src/api/perception/meteorologyCheck.js
new file mode 100644
index 00000000..f179d38f
--- /dev/null
+++ b/ruoyi-ui/src/api/perception/meteorologyCheck.js
@@ -0,0 +1,32 @@
+import request from "@/utils/request";
+
+// 查询天气状况
+export function getWeatherFacts() {
+  return request({
+    url: "/weatherForecast/weatherFacts",
+    method: "post",
+  });
+}
+
+// 按小时查询天气状况
+export function getHourlyWeather() {
+  return request({
+    url: "/weatherForecast/hourlyWeather",
+    method: "post",
+  });
+}
+
+// 查询气象预警
+export function getMeteorologicalEarlyWarning() {
+  return request({
+    url: "/weatherForecast/meteorologicalEarlyWarning",
+    method: "post",
+  });
+}
+// 查询气象预警数量
+export function getQueryTheNumberOfMeteorologicalWarning() {
+  return request({
+    url: "/weatherForecast/queryTheNumberOfMeteorologicalWarning",
+    method: "post",
+  });
+}
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/roadNetwork/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/roadNetwork/index.vue
index 66def1ff..28a61516 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/roadNetwork/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/roadNetwork/index.vue
@@ -1,177 +1,186 @@
 <template>
-    <div class='congestion'>
-      <WgtTitle :title="'路网交通状况'"></WgtTitle>
-      <div class="board">
-        <div class="showRoad" >
-            <div :class="it.type?it.type+' item':'item'" v-for="(it,index) in dataList" >
-                <div class="text" >{{ it.text }}</div>
-                <div v-if="it.type == null || it.type == 'red'" class="num" >
-                    <span>{{ it.value }}</span>
-                    <span class="typeClass" >{{ it.class }}</span>
-                </div>
-                <div v-if="it.type == 'array' || it.type == 'arrayRed'" class="num" >
-                    <span>{{ it.value[0] }}</span>
-                    <span class="typeClass" >{{ it.class[0] }}</span>
-                    <span class="midd" style="color:#fff;font-weight: 800; margin-right:2px;">/</span>
-                    <span>{{ it.value[1] }}</span>
-                    <span class="typeClass" >{{ it.class[1] }}</span>
-                </div>
-            </div>
+  <div class="congestion">
+    <WgtTitle :title="'路网交通状况'"></WgtTitle>
+    <div class="board">
+      <div class="showRoad">
+        <div
+          :class="it.type ? it.type + ' item' : 'item'"
+          v-for="(it, index) in dataList"
+        >
+          <div class="text">{{ it.text }}</div>
+          <div v-if="it.type == null || it.type == 'red'" class="num">
+            <span>{{ it.value }}</span>
+            <span class="typeClass">{{ it.class }}</span>
+          </div>
+          <div v-if="it.type == 'array' || it.type == 'arrayRed'" class="num">
+            <span>{{ it.value[0] }}</span>
+            <span class="typeClass">{{ it.class[0] }}</span>
+            <span
+              class="midd"
+              style="color: #fff; font-weight: 800; margin-right: 2px"
+              >/</span
+            >
+            <span>{{ it.value[1] }}</span>
+            <span class="typeClass">{{ it.class[1] }}</span>
+          </div>
         </div>
-       </div>
+      </div>
     </div>
-  </template>
-  
-  <script>
-  
-  import WgtTitle from '../../../widgets/title'
- 
-  export default {
-    name: 'MonthStatistics',
-    components: {
-      WgtTitle
-    },
-    data() {
-      return {
-        dataList:[
-            {
-                text:"气象正常路段里程",
-                value:"189",
-                class:"km"
-            },
-            {
-                text:"降水路段里程",
-                value:"0",
-                class:"km"
-            },
-            {
-                text:"团雾路段里程",
-                type:"array",
-                value:["0",'0'],
-                class:['处',"km"]
-            },
-            {
-                text:"气象预警信息",
-                type:"red",
-                value:"0",
-                class:""
-            },
-            {
-                text:"能见度检测器",
-                type:"arrayRed",
-                value:["0",'5'],
-                class:['',""]
-            }
-        ]
-      }
-    },
-  
-    created() {
-      
-    },
-    methods: {
-  
-    },
-    mounted() {
-      setTimeout(() => {
-        this.$nextTick(() => {
-         
-        });
+  </div>
+</template>
+
+<script>
+import WgtTitle from "../../../widgets/title";
+import { getQueryTheNumberOfMeteorologicalWarning } from "@/api/perception/meteorologyCheck";
+
+export default {
+  name: "MonthStatistics",
+  components: {
+    WgtTitle,
+  },
+  data() {
+    return {
+      dataList: [
+        {
+          text: "气象正常路段里程",
+          value: "189",
+          class: "km",
+        },
+        {
+          text: "降水路段里程",
+          value: "0",
+          class: "km",
+        },
+        {
+          text: "团雾路段里程",
+          type: "array",
+          value: ["0", "0"],
+          class: ["处", "km"],
+        },
+        {
+          text: "气象预警信息",
+          type: "red",
+          value: "0",
+          class: "",
+        },
+        {
+          text: "能见度检测器",
+          type: "arrayRed",
+          value: ["0", "5"],
+          class: ["", ""],
+        },
+      ],
+    };
+  },
+
+  created() {},
+  methods: {
+    getWeatherNum() {
+      getQueryTheNumberOfMeteorologicalWarning().then((res) => {
+        this.dataList[3].value = res.data;
+        console.log("res", res);
       });
     },
-  }
-  </script>
-  
-  <style lang='scss' scoped>
-  .congestion {
+  },
+  mounted() {
+    this.getWeatherNum();
+    //
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.congestion {
+  width: 100%;
+  .board {
+    height: 150px;
     width: 100%;
-    .board{
-      height:150px;
-      width: 100%;
-      padding: 0px 20px;
-      background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%);
-      border-radius: 5px 5px 5px 5px;
-      opacity: 1;
-      border: 1px solid;
-      border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      flex-direction: row;
+    padding: 0px 20px;
+    background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%);
+    border-radius: 5px 5px 5px 5px;
+    opacity: 1;
+    border: 1px solid;
+    border-image: linear-gradient(
+        360deg,
+        rgba(55, 231, 255, 0.3),
+        rgba(55, 231, 255, 0)
+      )
+      1 1;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: row;
 
-      .showRoad {
-        display: inline-flex;
-        width:100%;
-        height:100%;
-        padding-top:40px;
+    .showRoad {
+      display: inline-flex;
+      width: 100%;
+      height: 100%;
+      padding-top: 40px;
 
-        .item.red {
-            .num {
-                font-size: 20px;
-                font-family: PangMenZhengDao;
-                font-weight: 400;
-                color: #D9001B;
-                position: relative;
-                left:30px;
-            }
+      .item.red {
+        .num {
+          font-size: 20px;
+          font-family: PangMenZhengDao;
+          font-weight: 400;
+          color: #d9001b;
+          position: relative;
+          left: 30px;
         }
+      }
 
-        .item.arrayRed {
-            .num span:first-child {
-                color: #D9001B;
-                margin:0px;
-                margin-left:20px;
-            }
+      .item.arrayRed {
+        .num span:first-child {
+          color: #d9001b;
+          margin: 0px;
+          margin-left: 20px;
+        }
 
-            .midd {
-              color:#00D1FF !important;
-            }
+        .midd {
+          color: #00d1ff !important;
+        }
 
-            .typeClass {
-              margin:0px;
-            }
+        .typeClass {
+          margin: 0px;
         }
+      }
 
-        .item {
-            display: inline-flex;
-            width:20%;
-            height:90px;
-            flex-direction: column;
+      .item {
+        display: inline-flex;
+        width: 20%;
+        height: 90px;
+        flex-direction: column;
 
-            .text {
-                margin-bottom: 15px;
-                font-size: 14px;
-                font-family: PingFang SC, PingFang SC;
-                font-weight: 500;
-                color: #FFFFFF;
-            }
+        .text {
+          margin-bottom: 15px;
+          font-size: 14px;
+          font-family: PingFang SC, PingFang SC;
+          font-weight: 500;
+          color: #ffffff;
+        }
 
-            .num {
-              margin-left:8px;
-                font-size: 20px;
-                font-family: PangMenZhengDao;
-                font-weight: 400;
-                color: #00D1FF;
-                position: relative;
-            }
+        .num {
+          margin-left: 8px;
+          font-size: 20px;
+          font-family: PangMenZhengDao;
+          font-weight: 400;
+          color: #00d1ff;
+          position: relative;
+        }
 
-            .typeClass {
-                margin-left:8px;
-                margin-right:8px;
-                font-size: 12px;
-                font-family: PingFang SC, PingFang SC;
-                font-weight: 500;
-                color: #aaa;
-            }
+        .typeClass {
+          margin-left: 8px;
+          margin-right: 8px;
+          font-size: 12px;
+          font-family: PingFang SC, PingFang SC;
+          font-weight: 500;
+          color: #aaa;
         }
       }
-
     }
   }
-      .charts {
-        height:180px;
-        width: 100%;
-      }
-  
-  </style>
-  
\ No newline at end of file
+}
+.charts {
+  height: 180px;
+  width: 100%;
+}
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/sortFaceForecast/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/sortFaceForecast/index.vue
index 4518ed0b..e10a7355 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/sortFaceForecast/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/sortFaceForecast/index.vue
@@ -1,614 +1,768 @@
 <template>
-    <div class='congestion'>
-      <div class="board">
-        <div class="showRoad" >
-          <div class="topButtons" >
-              <button :class="selectIndex == index?'btn action':'btn'" @click="selectItem(index)" v-for="(it,index) in buttons" >{{ it.text }}</button>
-          </div>
-          <div class="timeMesList" >
-            <div class="timeMesItem"  v-for="(it,index) in pointList" >
-              <div class="topCli" >
-                <span ></span>
+  <div class="congestion">
+    <div class="board">
+      <div class="showRoad">
+        <div class="topButtons">
+          <button
+            v-for="(item, index) in buttons"
+            :class="selectIndex == item.id ? 'btn action' : 'btn'"
+            @click="selectItem(item.id)"
+          >
+            {{ item.text }}
+          </button>
+        </div>
+        <div class="timeMesList">
+          <div class="timeMesItem" v-for="(item, index) in weatherList">
+            <div class="topCli">
+              <span></span>
+            </div>
+            <div class="messBody">
+              <div class="item">
+                <span class="title">地址：</span>
+                <span class="text">{{ item.name || "--" }}</span>
+              </div>
+              <!-- <div class="item">
+                <span class="title">天气：</span>
+                <img :src="item.icon" />
+              </div> -->
+              <div class="item">
+                <span class="title">天气状况：</span>
+                <span class="text">{{ item.text || "--" }} </span>
+              </div>
+              <div class="item">
+                <span class="title">温度：</span>
+                <span class="text">{{ item.temp || "--" }}℃</span>
+              </div>
+              <div class="item">
+                <span class="title">湿度：</span>
+                <span class="text">{{ item.humidity || "--" }}%</span>
+              </div>
+              <div class="item">
+                <span class="title">风向：</span>
+                <span class="text">{{ item.windDir || "--" }}</span>
+              </div>
+              <div class="item">
+                <span class="title">风力：</span>
+                <span class="text">{{ item.windScale || "--" }}级</span>
               </div>
-              <div class="messBody" >
-                 <div class="item" v-for="(item,i) in it.textList" >
-                    <span class="title" >{{ item.label }}</span>
-                    <span class="text">{{ item.value }}</span>
-                 </div>
+              <div class="item">
+                <span class="title">降水量：</span>
+                <span class="text">{{ item.precip || "--" }}mm</span>
+              </div>
+              <div class="item">
+                <span class="title">能见度等级：</span>
+                <span class="text">{{ item.vis || "--" }}级</span>
+              </div>
+              <!-- <div class="item">
+                <span class="title">能见度等级：</span>
+                <span class="text">{{ item.windDir  }}</span>
+              </div> -->
+              <div class="item">
+                <span class="title">发布时间：</span>
+                <span class="text">{{
+                  moment(item.obsTime).format("YYYY-MM-DD HH:mm:ss") || "--"
+                }}</span>
               </div>
             </div>
           </div>
+          <!-- <div class="timeMesItem" v-for="(it, index) in pointList">
+            <div class="topCli">
+              <span></span>
+            </div>
+            <div class="messBody">
+              <div class="item" v-for="(item, i) in it.textList">
+                <span class="title">{{ item.label }}</span>
+                <span class="text">{{ item.value }}</span>
+              </div>
+            </div>
+          </div> -->
         </div>
-       </div>
+      </div>
     </div>
-  </template>
-  
-  <script>
-  export default {
-    name: 'SortFaceForecast',
-    components: {
-      
-    },
-    data() {
-      return {
-        selectIndex:0,
-        buttons:[
-          {
-            text:"实时"
-          },
-          {
-            text:"1小时"
-          },
-          {
-            text:"2小时"
-          },
-          {
-            text:"3小时"
-          },
-          {
-            text:"4小时"
-          },
-          {
-            text:"5小时"
-          },
-          {
-            text:"6小时"
-          },
-          {
-            text:"10小时"
-          },
-          {
-            text:"14小时"
-          },
-          {
-            text:"20小时"
-          },
-          {
-            text:"24小时"
-          },
-          {
-            text:"36小时"
-          },
-          {
-            text:"48小时"
-          }
-        ],
-        pointList : [
-          {
-            textList:[
-              {
-                label:"桩号：",
-                value:"K100+000",
-              },
-              {
-                label:"经度：",
-                value:"117°01·13·",
-              },
-              {
-                label:"纬度：",
-                value:"36°40·06·",
-              },
-              {
-                label:"降雨量：",
-                value:"10mm",
-              },
-              {
-                label:"发布时间：",
-                value:"2023-12-23 13:00:00",
-              },
-              {
-                label:"降水量等级：",
-                value:"1级",
-              },
-              {
-                label:"湿度：",
-                value:"33.6%",
-              },
-              {
-                label:"温度：",
-                value:"33.6°C",
-              },
-              {
-                label:"能见度：",
-                value:"7058.9m",
-              },
-              {
-                label:"能见度等级：",
-                value:"1级",
-              },
-              {
-                label:"风速：",
-                value:"2.3m/s",
-              },
-              {
-                label:"风向：",
-                value:"西",
-              },
-              {
-                label:"风向：",
-                value:"西",
-              },
-              {
-                label:"风向：",
-                value:"西",
-              },
-              {
-                label:"风向：",
-                value:"西",
-              },
-              {
-                label:"风向：",
-                value:"西",
-              },
-              {
-                label:"风向：",
-                value:"西",
-              },
-              {
-                label:"风向：",
-                value:"西",
-              },
-              {
-                label:"风向：",
-                value:"西",
-              },
-              {
-                label:"风向：",
-                value:"西",
-              },
-              {
-                label:"风向：",
-                value:"西",
-              },
-              {
-                label:"风向：",
-                value:"西",
-              }
-            ]
-          },
-          {
-            textList:[
-              {
-                label:"桩号：",
-                value:"K100+000",
-              },
-              {
-                label:"经度：",
-                value:"117°01·13·",
-              },
-              {
-                label:"纬度：",
-                value:"36°40·06·",
-              },
-              {
-                label:"降雨量：",
-                value:"10mm",
-              },
-              {
-                label:"发布时间：",
-                value:"2023-12-23 13:00:00",
-              },
-              {
-                label:"降水量等级：",
-                value:"1级",
-              },
-              {
-                label:"湿度：",
-                value:"33.6%",
-              },
-              {
-                label:"温度：",
-                value:"33.6°C",
-              },
-              {
-                label:"能见度：",
-                value:"7058.9m",
-              },
-              {
-                label:"能见度等级：",
-                value:"1级",
-              },
-              {
-                label:"风速：",
-                value:"2.3m/s",
-              },
-            ]
-          },
-          {
-            textList:[
-              {
-                label:"桩号：",
-                value:"K100+000",
-              },
-              {
-                label:"经度：",
-                value:"117°01·13·",
-              },
-              {
-                label:"纬度：",
-                value:"36°40·06·",
-              },
-              {
-                label:"降雨量：",
-                value:"10mm",
-              },
-              {
-                label:"发布时间：",
-                value:"2023-12-23 13:00:00",
-              },
-              {
-                label:"降水量等级：",
-                value:"1级",
-              },
-              {
-                label:"湿度：",
-                value:"33.6%",
-              },
-              {
-                label:"温度：",
-                value:"33.6°C",
-              },
-              {
-                label:"能见度：",
-                value:"7058.9m",
-              },
-              {
-                label:"能见度等级：",
-                value:"1级",
-              },
-              {
-                label:"风速：",
-                value:"2.3m/s",
-              },
-            ]
-          },
-          {
-            textList:[
-              {
-                label:"桩号：",
-                value:"K100+000",
-              },
-              {
-                label:"经度：",
-                value:"117°01·13·",
-              },
-              {
-                label:"纬度：",
-                value:"36°40·06·",
-              },
-              {
-                label:"降雨量：",
-                value:"10mm",
-              },
-              {
-                label:"发布时间：",
-                value:"2023-12-23 13:00:00",
-              },
-              {
-                label:"降水量等级：",
-                value:"1级",
-              },
-              {
-                label:"湿度：",
-                value:"33.6%",
-              },
-              {
-                label:"温度：",
-                value:"33.6°C",
-              },
-              {
-                label:"能见度：",
-                value:"7058.9m",
-              },
-              {
-                label:"能见度等级：",
-                value:"1级",
-              },
-              {
-                label:"风速：",
-                value:"2.3m/s",
-              },
-            ]
-          },
-          {
-            textList:[
-              {
-                label:"桩号：",
-                value:"K100+000",
-              },
-              {
-                label:"经度：",
-                value:"117°01·13·",
-              },
-              {
-                label:"纬度：",
-                value:"36°40·06·",
-              },
-              {
-                label:"降雨量：",
-                value:"10mm",
-              },
-              {
-                label:"发布时间：",
-                value:"2023-12-23 13:00:00",
-              },
-              {
-                label:"降水量等级：",
-                value:"1级",
-              },
-              {
-                label:"湿度：",
-                value:"33.6%",
-              },
-              {
-                label:"温度：",
-                value:"33.6°C",
-              },
-              {
-                label:"能见度：",
-                value:"7058.9m",
-              },
-              {
-                label:"能见度等级：",
-                value:"1级",
-              },
-              {
-                label:"风速：",
-                value:"2.3m/s",
-              },
-            ]
-          },
-          {
-            textList:[
-              {
-                label:"桩号：",
-                value:"K100+000",
-              },
-              {
-                label:"经度：",
-                value:"117°01·13·",
-              },
-              {
-                label:"纬度：",
-                value:"36°40·06·",
-              },
-              {
-                label:"降雨量：",
-                value:"10mm",
-              },
-              {
-                label:"发布时间：",
-                value:"2023-12-23 13:00:00",
-              },
-              {
-                label:"降水量等级：",
-                value:"1级",
-              },
-              {
-                label:"湿度：",
-                value:"33.6%",
-              },
-              {
-                label:"温度：",
-                value:"33.6°C",
-              },
-              {
-                label:"能见度：",
-                value:"7058.9m",
-              },
-              {
-                label:"能见度等级：",
-                value:"1级",
-              },
-              {
-                label:"风速：",
-                value:"2.3m/s",
-              },
-            ]
-          }
-        ]
+  </div>
+</template>
+
+<script>
+import {
+  getWeatherFacts,
+  getHourlyWeather,
+} from "@/api/perception/meteorologyCheck";
+import moment from "moment";
+
+export default {
+  name: "SortFaceForecast",
+  components: {},
+  data() {
+    return {
+      moment: moment,
+      selectIndex: 0,
+      buttons: [
+        {
+          text: "实时",
+          id: 0,
+        },
+        {
+          text: "1小时",
+          id: 1,
+        },
+        {
+          text: "2小时",
+          id: 2,
+        },
+        {
+          text: "3小时",
+          id: 3,
+        },
+        {
+          text: "4小时",
+          id: 4,
+        },
+        {
+          text: "5小时",
+          id: 5,
+        },
+        {
+          text: "6小时",
+          id: 6,
+        },
+        {
+          text: "10小时",
+          id: 10,
+        },
+        {
+          text: "14小时",
+          id: 14,
+        },
+        {
+          text: "20小时",
+          id: 20,
+        },
+        {
+          text: "24小时",
+          id: 24,
+        },
+        {
+          text: "36小时",
+          id: 36,
+        },
+        {
+          text: "48小时",
+          id: 48,
+        },
+      ],
+      pointList: [
+        {
+          textList: [
+            {
+              label: "桩号：",
+              value: "K100+000",
+            },
+            {
+              label: "经度：",
+              value: "117°01·13·",
+            },
+            {
+              label: "纬度：",
+              value: "36°40·06·",
+            },
+            {
+              label: "降雨量：",
+              value: "10mm",
+            },
+            {
+              label: "发布时间：",
+              value: "2023-12-23 13:00:00",
+            },
+            {
+              label: "降水量等级：",
+              value: "1级",
+            },
+            {
+              label: "湿度：",
+              value: "33.6%",
+            },
+            {
+              label: "温度：",
+              value: "33.6°C",
+            },
+            {
+              label: "能见度：",
+              value: "7058.9m",
+            },
+            {
+              label: "能见度等级：",
+              value: "1级",
+            },
+            {
+              label: "风速：",
+              value: "2.3m/s",
+            },
+            {
+              label: "风向：",
+              value: "西",
+            },
+            {
+              label: "风向：",
+              value: "西",
+            },
+            {
+              label: "风向：",
+              value: "西",
+            },
+            {
+              label: "风向：",
+              value: "西",
+            },
+            {
+              label: "风向：",
+              value: "西",
+            },
+            {
+              label: "风向：",
+              value: "西",
+            },
+            {
+              label: "风向：",
+              value: "西",
+            },
+            {
+              label: "风向：",
+              value: "西",
+            },
+            {
+              label: "风向：",
+              value: "西",
+            },
+            {
+              label: "风向：",
+              value: "西",
+            },
+            {
+              label: "风向：",
+              value: "西",
+            },
+          ],
+        },
+        {
+          textList: [
+            {
+              label: "桩号：",
+              value: "K100+000",
+            },
+            {
+              label: "经度：",
+              value: "117°01·13·",
+            },
+            {
+              label: "纬度：",
+              value: "36°40·06·",
+            },
+            {
+              label: "降雨量：",
+              value: "10mm",
+            },
+            {
+              label: "发布时间：",
+              value: "2023-12-23 13:00:00",
+            },
+            {
+              label: "降水量等级：",
+              value: "1级",
+            },
+            {
+              label: "湿度：",
+              value: "33.6%",
+            },
+            {
+              label: "温度：",
+              value: "33.6°C",
+            },
+            {
+              label: "能见度：",
+              value: "7058.9m",
+            },
+            {
+              label: "能见度等级：",
+              value: "1级",
+            },
+            {
+              label: "风速：",
+              value: "2.3m/s",
+            },
+          ],
+        },
+        {
+          textList: [
+            {
+              label: "桩号：",
+              value: "K100+000",
+            },
+            {
+              label: "经度：",
+              value: "117°01·13·",
+            },
+            {
+              label: "纬度：",
+              value: "36°40·06·",
+            },
+            {
+              label: "降雨量：",
+              value: "10mm",
+            },
+            {
+              label: "发布时间：",
+              value: "2023-12-23 13:00:00",
+            },
+            {
+              label: "降水量等级：",
+              value: "1级",
+            },
+            {
+              label: "湿度：",
+              value: "33.6%",
+            },
+            {
+              label: "温度：",
+              value: "33.6°C",
+            },
+            {
+              label: "能见度：",
+              value: "7058.9m",
+            },
+            {
+              label: "能见度等级：",
+              value: "1级",
+            },
+            {
+              label: "风速：",
+              value: "2.3m/s",
+            },
+          ],
+        },
+        {
+          textList: [
+            {
+              label: "桩号：",
+              value: "K100+000",
+            },
+            {
+              label: "经度：",
+              value: "117°01·13·",
+            },
+            {
+              label: "纬度：",
+              value: "36°40·06·",
+            },
+            {
+              label: "降雨量：",
+              value: "10mm",
+            },
+            {
+              label: "发布时间：",
+              value: "2023-12-23 13:00:00",
+            },
+            {
+              label: "降水量等级：",
+              value: "1级",
+            },
+            {
+              label: "湿度：",
+              value: "33.6%",
+            },
+            {
+              label: "温度：",
+              value: "33.6°C",
+            },
+            {
+              label: "能见度：",
+              value: "7058.9m",
+            },
+            {
+              label: "能见度等级：",
+              value: "1级",
+            },
+            {
+              label: "风速：",
+              value: "2.3m/s",
+            },
+          ],
+        },
+        {
+          textList: [
+            {
+              label: "桩号：",
+              value: "K100+000",
+            },
+            {
+              label: "经度：",
+              value: "117°01·13·",
+            },
+            {
+              label: "纬度：",
+              value: "36°40·06·",
+            },
+            {
+              label: "降雨量：",
+              value: "10mm",
+            },
+            {
+              label: "发布时间：",
+              value: "2023-12-23 13:00:00",
+            },
+            {
+              label: "降水量等级：",
+              value: "1级",
+            },
+            {
+              label: "湿度：",
+              value: "33.6%",
+            },
+            {
+              label: "温度：",
+              value: "33.6°C",
+            },
+            {
+              label: "能见度：",
+              value: "7058.9m",
+            },
+            {
+              label: "能见度等级：",
+              value: "1级",
+            },
+            {
+              label: "风速：",
+              value: "2.3m/s",
+            },
+          ],
+        },
+        {
+          textList: [
+            {
+              label: "桩号：",
+              value: "K100+000",
+            },
+            {
+              label: "经度：",
+              value: "117°01·13·",
+            },
+            {
+              label: "纬度：",
+              value: "36°40·06·",
+            },
+            {
+              label: "降雨量：",
+              value: "10mm",
+            },
+            {
+              label: "发布时间：",
+              value: "2023-12-23 13:00:00",
+            },
+            {
+              label: "降水量等级：",
+              value: "1级",
+            },
+            {
+              label: "湿度：",
+              value: "33.6%",
+            },
+            {
+              label: "温度：",
+              value: "33.6°C",
+            },
+            {
+              label: "能见度：",
+              value: "7058.9m",
+            },
+            {
+              label: "能见度等级：",
+              value: "1级",
+            },
+            {
+              label: "风速：",
+              value: "2.3m/s",
+            },
+          ],
+        },
+      ],
+      weatherList: [],
+    };
+  },
+
+  created() {},
+  methods: {
+    selectItem(id, index) {
+      this.selectIndex = id;
+      if (id === 0) {
+        this.getRealtimeWeatherFacts();
+      } else {
+        this.getHourlyWeatherFacts(id);
       }
     },
-  
-    created() {
-      
-    },
-    methods: {
-      selectItem(index){
-        this.selectIndex = index;
-      },
+    // 实时天气
+    getRealtimeWeatherFacts() {
+      getWeatherFacts().then((response) => {
+        let obj = response.data;
+        let data = [];
+        for (let key in obj) {
+          if (key === "weatherFacts1") {
+            obj[key].name = "长清区";
+          } else if (key === "weatherFacts2") {
+            obj[key].name = "平阴县";
+          } else if (key === "weatherFacts3") {
+            obj[key].name = "东平县";
+          } else if (key === "weatherFacts4") {
+            obj[key].name = "汶上县";
+          } else if (key === "weatherFacts5") {
+            obj[key].name = "梁山县";
+          } else if (key === "weatherFacts6") {
+            obj[key].name = "嘉祥县";
+          } else if (key === "weatherFacts7") {
+            obj[key].name = "巨野县";
+          } else if (key === "weatherFacts8") {
+            obj[key].name = "郓城县";
+          }
+          data.push(obj[key]);
+        }
+        this.weatherList = data;
+        // console.log("weatherList", this.weatherList);
+      });
     },
-    mounted() {
-   
-      setTimeout(() => {
-        this.$nextTick(() => {
-         
+    // 按小时查询天气
+    getHourlyWeatherFacts(id) {
+      getHourlyWeather().then((response) => {
+        console.log("response", response);
+        console.log("this.selectIndex", this.selectIndex);
+
+        let obj = response.data;
+        let data = [];
+        for (let key in obj) {
+          if (key === "hourlyWeather1") {
+            console.log("obj[key]", obj[key][id - 1]);
+            obj[key][id - 1].name = "长清区";
+          } else if (key === "hourlyWeather2") {
+            obj[key][id - 1].name = "平阴县";
+          } else if (key === "hourlyWeather3") {
+            obj[key][id - 1].name = "东平县";
+          } else if (key === "hourlyWeather4") {
+            obj[key][id - 1].name = "汶上县";
+          } else if (key === "hourlyWeather5") {
+            obj[key][id - 1].name = "梁山县";
+          } else if (key === "hourlyWeather6") {
+            obj[key][id - 1].name = "嘉祥县";
+          } else if (key === "hourlyWeather7") {
+            obj[key][id - 1].name = "巨野县";
+          } else if (key === "hourlyWeather8") {
+            obj[key][id - 1].name = "郓城县";
+          }
+          data.push(obj[key]);
+        }
+        let newData = [];
+        data.forEach((item) => {
+          newData.push(item[id - 1]);
         });
+        this.weatherList = newData;
+        console.log("data", newData);
       });
     },
-  }
-  </script>
-  
-  <style lang='scss' scoped>
-  .congestion {
+  },
+  mounted() {
+    this.getRealtimeWeatherFacts();
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.congestion {
+  width: 100%;
+  height: 100%;
+
+  .board {
+    height: calc(100% - 235px);
     width: 100%;
-    height:100%;
+    // padding: 0px 20px;
+    border-radius: 5px 5px 5px 5px;
+    opacity: 1;
 
-    .board{
-      height: calc(100% - 235px);
-      width: 100%;
-      padding: 0px 20px;
-      border-radius: 5px 5px 5px 5px;
-      opacity: 1;
-    
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: row;
 
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      flex-direction: row;
+    .showRoad {
+      display: inline-flex;
+      width: 100%;
+      height: 100%;
+      padding-top: 0px;
+      flex-direction: column;
 
-      .showRoad {
+      .topButtons {
         display: inline-flex;
-        width:100%;
-        height:100%;
-        padding-top:0px;
-        flex-direction: column;
+        width: 100%;
+        height: 26px;
+        margin-top: 10px;
+        margin-bottom: 30px;
 
-        .topButtons {
-           display: inline-flex;
-           width:100%;
-           height:26px;
-           margin-top:10px;
-           margin-bottom: 30px;
+        justify-content: space-between;
 
-           justify-content: space-between;
-           
-           .btn {
-              display: inline-flex;
-              width:90px;
-              height:26px;
-              justify-content: center;
-              align-items: center;
-              background-color: transparent;
-              background-image: url(./assets/button_bg.png);
-              background-size: 100% 100%;
-              
-              border:0px;
-              font-size: 14px;
-              font-family: PingFang SC, PingFang SC;
-              font-weight: 400;
-              color: #FFFFFF;
-              cursor: pointer;
-           }
+        .btn {
+          display: inline-flex;
+          width: 90px;
+          height: 26px;
+          justify-content: center;
+          align-items: center;
+          background-color: transparent;
+          background-image: url(./assets/button_bg.png);
+          background-size: 100% 100%;
 
-           .btn:hover,.btn.action {
-             background-image: url(./assets/button_hover.png);
-           }
+          border: 0px;
+          font-size: 14px;
+          font-family: PingFang SC, PingFang SC;
+          font-weight: 400;
+          color: #ffffff;
+          cursor: pointer;
         }
 
-        .timeMesList{
+        .btn:hover,
+        .btn.action {
+          background-image: url(./assets/button_hover.png);
+        }
+      }
+
+      .timeMesList {
+        display: inline-flex;
+        width: 100%;
+        height: 100%;
+
+        .timeMesItem {
           display: inline-flex;
-          width:100%;
-          height:100%;
+          flex-direction: column;
+          width: 25%;
+          height: 100%;
+          position: relative;
 
-          .timeMesItem {
-             display: inline-flex;
-             flex-direction: column;
-             width:25%;
-             height:100%;
-             position: relative;
+          .topCli {
+            display: inline-flex;
+            position: relative;
+            justify-content: center;
+            align-items: center;
 
-             .topCli {
-                display: inline-flex;
-                position: relative;
-                justify-content: center;
-                align-items: center;
+            > span {
+              position: absolute;
+              display: inline-flex;
+              width: 24px;
+              height: 24px;
+              background: url(./assets/spanPoint.png);
+              background-size: 100% 100%;
+              border-radius: 50%;
+              opacity: 1;
+            }
 
-                >span {
-                  position: absolute;
-                  display:inline-flex;
-                  width: 24px;
-                  height: 24px;
-                  background: url(./assets/spanPoint.png);
-                  background-size: 100% 100%;
-                  border-radius: 50%;
-                  opacity: 1;
-                }
+            span::after {
+              content: "";
+              position: absolute;
+              display: inline-flex;
+              width: 189px;
+              height: 2px;
+              top: 14px;
+              left: -200px;
+              background: linear-gradient(
+                90deg,
+                rgba(59, 216, 188, 1),
+                rgba(29, 171, 215, 1)
+              );
+            }
 
-                span::after {
-                  content: "";
-                  position: absolute;
-                  display: inline-flex;
-                  width:189px;
-                  height:2px;
-                  top:14px;
-                  left:-200px;
-                  background:  linear-gradient(90deg, rgba(59, 216, 188, 1), rgba(29, 171, 215, 1));
-                }
+            span::before {
+              content: "";
+              position: absolute;
+              display: inline-flex;
+              width: 189px;
+              height: 2px;
+              top: 14px;
+              left: 35px;
+              background: linear-gradient(
+                90deg,
+                rgba(59, 216, 188, 1),
+                rgba(29, 171, 215, 1)
+              );
+            }
+          }
 
-                span::before {
-                  content: "";
-                  position: absolute;
-                  display: inline-flex;
-                  width:189px;;
-                  height:2px;
-                  top:14px;
-                  left:35px;
-                  background:  linear-gradient(90deg, rgba(59, 216, 188, 1), rgba(29, 171, 215, 1));
-                }
-             }
+          /*滚动条整体样式*/
+          .messBody::-webkit-scrollbar {
+            /*高宽分别对应横竖滚动条的尺寸*/
+            width: 6px;
+            height: 1px;
+          }
 
-                          /*滚动条整体样式*/
-              .messBody::-webkit-scrollbar {
-              /*高宽分别对应横竖滚动条的尺寸*/
-                width: 6px;     
-                height: 1px;
-              }
+          /*滚动条里面小方块*/
+          .messBody::-webkit-scrollbar-thumb {
+            border-radius: 6px;
+            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+            background: #3785a0;
+          }
 
-              /*滚动条里面小方块*/
-              .messBody::-webkit-scrollbar-thumb {
-                border-radius: 6px;
-              -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
-                background: #3785A0;
-              }
-              
-              /*滚动条里面轨道*/
-              .messBody::-webkit-scrollbar-track {
-                -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
-                border-radius: 10px;
-                background: #11485A;
-              }
-             .messBody {
-                position: relative;
-                display: inline-block;
-                margin-top:15px;
-                width:95%;
-                margin: 15px 5px;
-                margin-top:35px;
-                min-height:402.8px;
-                max-height: 624px;
-                background:linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #06425880 100%);
-               
-                border: 1px solid;
-                border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.2), rgba(55, 231, 255, 0)) 1 1;
-                overflow-x:hidden;
-                overflow-y: auto;
-                border-radius:7px;
-                > div {
-                  display: inline-flex;
-                  width:auto;
-                  height:21px;
-                  margin:9px 29px;
+          /*滚动条里面轨道*/
+          .messBody::-webkit-scrollbar-track {
+            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+            border-radius: 10px;
+            background: #11485a;
+          }
+          .messBody {
+            position: relative;
+            display: inline-block;
+            margin-top: 15px;
+            width: 95%;
+            margin: 15px 5px;
+            margin-top: 35px;
+            min-height: 402.8px;
+            max-height: 624px;
+            background: linear-gradient(
+              180deg,
+              rgba(6, 66, 88, 0.2) 0%,
+              #06425880 100%
+            );
 
-                  > span.title  {
-                    display: inline-flex;
-                    font-size: 14px;
-                    font-family: PingFang SC, PingFang SC;
-                    font-weight: 400;
-                    color: #37E7FF;
-                    width:84px;
-                  }
+            border: 1px solid;
+            border-image: linear-gradient(
+                360deg,
+                rgba(55, 231, 255, 0.2),
+                rgba(55, 231, 255, 0)
+              )
+              1 1;
+            overflow-x: hidden;
+            overflow-y: auto;
+            border-radius: 7px;
+            > div {
+              display: inline-flex;
+              width: auto;
+              height: 21px;
+              margin: 9px 20px;
 
-                  >.text {
-                    font-size: 14px;
-                    font-family: PingFang SC, PingFang SC;
-                    font-weight: 500;
-                    color: #FFFFFF;
-                  }
+              > span.title {
+                display: block;
+                font-size: 14px;
+                font-family: PingFang SC, PingFang SC;
+                font-weight: 400;
+                color: #37e7ff;
+                width: 100px;
+              }
 
-                }
-             }
+              > .text {
+                font-size: 14px;
+                font-family: PingFang SC, PingFang SC;
+                font-weight: 500;
+                color: #ffffff;
+              }
+            }
           }
-
         }
       }
-
     }
   }
-      .charts {
-        height:180px;
-        width: 100%;
-      }
-  
-  </style>
-  
\ No newline at end of file
+}
+.charts {
+  height: 180px;
+  width: 100%;
+}
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherForecast/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherForecast/index.vue
index acb1a211..c80496fb 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherForecast/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherForecast/index.vue
@@ -1,296 +1,297 @@
 <template>
-    <div class='congestion'>
-      <WgtTitle :title="'天气预报'"></WgtTitle>
-      <div class="board">
-        <div class="showRoad" >
-           <div class="weaterIcon" >
-             <img src="./assets/weather.png" />
-             <div >
-                {{ weaterType }}
-             </div>
-           </div>
-           <div class="weaterNum" >
-             <div class="num">{{ weaterNum }}° </div>
-             <div class="maxMin" >
-                {{ weaterMaxMin }}
-             </div>
-           </div>
-           <div class="windType" >
-             <div class="Warnings" >{{ windWarnings }} </div>
-             <div class="windTypeStr" >
-                {{ windType }}
-             </div>
-           </div>
-           <div class="line" ></div>
-           <div class="cityType" >
-            <img src="./assets/cityPosition.png" />
-            <div class="cityText" >
-                {{ city }}
+  <div class="congestion">
+    <WgtTitle :title="'天气预报'"></WgtTitle>
+    <div class="board">
+      <div class="showRoad">
+        <div class="weaterIcon">
+          <img src="./assets/weather.png" />
+          <div>
+            {{ weaterType }}
+          </div>
+        </div>
+        <div class="weaterNum">
+          <div class="num">{{ weaterNum }}°</div>
+          <div class="maxMin">
+            {{ weaterMaxMin }}
+          </div>
+        </div>
+        <div class="windType">
+          <div class="Warnings">{{ windWarnings }}</div>
+          <div class="windTypeStr">
+            {{ windType }}
+          </div>
+        </div>
+        <div class="line"></div>
+        <div class="cityType">
+          <img src="./assets/cityPosition.png" />
+          <div class="cityText">
+            {{ city }}
+          </div>
+        </div>
+        <div class="temperature">
+          <div class="temperItem" v-for="(it, index) in temperatures">
+            <div class="text">
+              <img src="./assets/polygon.png" /><span>{{ it.text }}</span>
+            </div>
+            <div class="val">
+              {{ it.value }}
             </div>
-           </div>
-           <div class="temperature" >
-              <div class="temperItem" v-for="(it,index) in temperatures" >
-                 <div class="text" >
-                    <img src="./assets/polygon.png" /><span>{{ it.text }}</span>
-                 </div>
-                 <div class="val">
-                    {{ it.value }}
-                </div>
-              </div>
-           </div>
+          </div>
         </div>
-       </div>
+      </div>
     </div>
-  </template>
-  
-  <script>
-  
-  import WgtTitle from '../../../widgets/title'
- 
-  export default {
-    name: 'MonthStatistics',
-    components: {
-      WgtTitle
-    },
-    data() {
-      return {
-        weaterNum:"21",
-        weaterMaxMin:"12 / 23°",
-        weaterType:"睛转小雨",
-        windWarnings:"大风预警",
-        windType:"东北风三级",
-        city:"济南",
-        temperatures:[
-            {
-                text:"体感",
-                value:"-14℃",
-            },
-            {
-                text:"PM2.5",
-                value:"90",
-            },
-            {
-                text:"湿度",
-                value:"94%",
-            },
-            {
-                text:"紫外线",
-                value:"3",
-            }
-        ]
-      }
-    },
-  
-    created() {
-      
-    },
-    methods: {
-  
-    },
-    mounted() {
-      setTimeout(() => {
-        this.$nextTick(() => {
-         
-        });
-      });
-    },
-  }
-  </script>
-  
-  <style lang='scss' scoped>
-  .congestion {
-    width: 100%;
-    .board{
-      height:150px;
-      width: 100%;
-      padding: 0px 20px;
-      background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%);
-      border-radius: 5px 5px 5px 5px;
-      opacity:1;
-      border: 1px solid;
-      border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      flex-direction: row;
+  </div>
+</template>
 
-      .showRoad {
-        display: inline-flex;
-        width:100%;
-        height:100%;
-        padding-top:40px;
-        padding-left:58px;
+<script>
+import WgtTitle from "../../../widgets/title";
 
-        > div {
-            display: inline-flex;
-            flex-direction: column;
-          
-        }
+export default {
+  name: "MonthStatistics",
+  components: {
+    WgtTitle,
+  },
+  data() {
+    return {
+      weaterNum: "21",
+      weaterMaxMin: "12 / 23°",
+      weaterType: "睛转小雨",
+      windWarnings: "大风预警",
+      windType: "东北风三级",
+      city: "济南",
+      temperatures: [
+        {
+          text: "体感",
+          value: "-14℃",
+        },
+        {
+          text: "PM2.5",
+          value: "90",
+        },
+        {
+          text: "湿度",
+          value: "94%",
+        },
+        {
+          text: "紫外线",
+          value: "3",
+        },
+      ],
+    };
+  },
 
-        .weaterIcon {
-            display: inline-flex;
-            width:60px;
-            height:80px;
-            justify-content: center;
-            align-items: center;
-            margin-right:27px;
+  created() {},
+  methods: {},
+  mounted() {
+    setTimeout(() => {
+      this.$nextTick(() => {});
+    });
+  },
+};
+</script>
 
-            >img {
-                display: inline-flex;
-                width:43px;
-                height:43px;
+<style lang="scss" scoped>
+.congestion {
+  width: 100%;
+  .board {
+    height: 150px;
+    width: 100%;
+    padding: 0px 20px;
+    background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%);
+    border-radius: 5px 5px 5px 5px;
+    opacity: 1;
+    border: 1px solid;
+    border-image: linear-gradient(
+        360deg,
+        rgba(55, 231, 255, 0.3),
+        rgba(55, 231, 255, 0)
+      )
+      1 1;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: row;
 
-            }
+    .showRoad {
+      display: inline-flex;
+      width: 100%;
+      height: 100%;
+      padding-top: 40px;
+      padding-left: 58px;
 
-            >div {
-                font-size: 12px;
-                font-family: PingFang SC, PingFang SC;
-                font-weight: 500;
-                color: #FFFFFF; 
-                margin-top:10px;
-            }
-        }
-        
+      > div {
+        display: inline-flex;
+        flex-direction: column;
+      }
 
-        .weaterNum {
-            display: inline-flex;
-            width:60px;
-            height:80px;
-            justify-content: center;
-            align-items: center;
-            margin-right:27px;
+      .weaterIcon {
+        display: inline-flex;
+        width: 60px;
+        height: 80px;
+        justify-content: center;
+        align-items: center;
+        margin-right: 27px;
 
-            .num {
-                font-size: 34px;
-                font-family: PingFang SC, PingFang SC;
-                font-weight: 500;
-                color: #FFFFFF; 
-            }
+        > img {
+          display: inline-flex;
+          width: 43px;
+          height: 43px;
+        }
 
-            .maxMin {
-                font-size: 12px;
-                font-family: PingFang SC, PingFang SC;
-                font-weight: 500;
-                color: #FFFFFF;
-                margin-top:6px;
-            }
+        > div {
+          font-size: 12px;
+          font-family: PingFang SC, PingFang SC;
+          font-weight: 500;
+          color: #ffffff;
+          margin-top: 10px;
+        }
+      }
+
+      .weaterNum {
+        display: inline-flex;
+        width: 60px;
+        height: 80px;
+        justify-content: center;
+        align-items: center;
+        margin-right: 27px;
 
+        .num {
+          font-size: 34px;
+          font-family: PingFang SC, PingFang SC;
+          font-weight: 500;
+          color: #ffffff;
         }
 
-        .windType{
-            display: inline-flex;
-            width:60px;
-            height:80px;
-            justify-content: center;
-            align-items: center;
-            margin-right:27px;
+        .maxMin {
+          font-size: 12px;
+          font-family: PingFang SC, PingFang SC;
+          font-weight: 500;
+          color: #ffffff;
+          margin-top: 6px;
+        }
+      }
 
-            .Warnings {
-                display: inline-flex;
-                justify-content: center;
-                align-items: center;
-                margin-top:23px;
-                width: 67px;
-                height: 18px;
-                background: rgba(245,80,80,0.4);
-                border-radius: 2px 2px 2px 2px;
-                opacity: 1;
-                border: 1px solid #F55050;
-                font-size: 12px;
-                font-family: Source Han Sans SC, Source Han Sans SC;
-                font-weight: 400;
-                color: #F55050;
-            }
+      .windType {
+        display: inline-flex;
+        width: 60px;
+        height: 80px;
+        justify-content: center;
+        align-items: center;
+        margin-right: 27px;
 
-            .windTypeStr {
-                font-size: 12px;
-                font-family: PingFang SC, PingFang SC;
-                font-weight: 500;
-                color: #FFFFFF;
-                margin-top:13px;
-            }
+        .Warnings {
+          display: inline-flex;
+          justify-content: center;
+          align-items: center;
+          margin-top: 23px;
+          width: 67px;
+          height: 18px;
+          background: rgba(245, 80, 80, 0.4);
+          border-radius: 2px 2px 2px 2px;
+          opacity: 1;
+          border: 1px solid #f55050;
+          font-size: 12px;
+          font-family: Source Han Sans SC, Source Han Sans SC;
+          font-weight: 400;
+          color: #f55050;
         }
 
-        .line {
-            margin-left:37px;
-            margin-right:45px;
-            width: 1px;
-            height: 86px;
-            opacity: 1;
-            border: 1px solid;
-            border-image: linear-gradient(320deg, rgba(6, 92, 120, 1), rgba(6, 92, 120, 0)) 1 1;
+        .windTypeStr {
+          font-size: 12px;
+          font-family: PingFang SC, PingFang SC;
+          font-weight: 500;
+          color: #ffffff;
+          margin-top: 13px;
         }
+      }
 
-        .cityType {
-            display: inline-flex;
-            width:60px;
-            height:80px;
-            justify-content: center;
-            align-items: center;
-            margin-right:27px;
+      .line {
+        margin-left: 37px;
+        margin-right: 45px;
+        width: 1px;
+        height: 86px;
+        opacity: 1;
+        border: 1px solid;
+        border-image: linear-gradient(
+            320deg,
+            rgba(6, 92, 120, 1),
+            rgba(6, 92, 120, 0)
+          )
+          1 1;
+      }
 
-            img {
-                width:38px;
-                height:40px;
+      .cityType {
+        display: inline-flex;
+        width: 60px;
+        height: 80px;
+        justify-content: center;
+        align-items: center;
+        margin-right: 27px;
 
-            }
+        img {
+          width: 38px;
+          height: 40px;
+        }
 
-            .cityText {
-                font-size: 12px;
-                font-family: PingFang SC, PingFang SC;
-                font-weight: 500;
-                color: #FFFFFF;
-                margin-top: 10px;;
-            }
+        .cityText {
+          font-size: 12px;
+          font-family: PingFang SC, PingFang SC;
+          font-weight: 500;
+          color: #ffffff;
+          margin-top: 10px;
         }
+      }
 
-        .temperature {
-            display: inline-flex;
-            flex-direction: row;
-            width: 349px;
-            height: 66px;
-            background: transparent;
-            opacity: 1;
-            border: 1px solid;
-            border-image: linear-gradient(180deg, rgba(1, 37, 48, 0), rgba(1, 149, 196, 1)) 1 1;
-            border-radius: 8px;
+      .temperature {
+        display: inline-flex;
+        flex-direction: row;
+        width: 349px;
+        height: 66px;
+        background: transparent;
+        opacity: 1;
+        border: 1px solid;
+        border-image: linear-gradient(
+            180deg,
+            rgba(1, 37, 48, 0),
+            rgba(1, 149, 196, 1)
+          )
+          1 1;
+        border-radius: 8px;
 
-            >div  {
-                display: inline-flex;
-                flex-direction: column;
-                width:25%;
-                height:100%;
-                justify-content: center;
-                align-items: center;
+        > div {
+          display: inline-flex;
+          flex-direction: column;
+          width: 25%;
+          height: 100%;
+          justify-content: center;
+          align-items: center;
 
-                > .text {
-                    font-size: 14px;
-                    font-family: PingFang SC, PingFang SC;
-                    font-weight: 500;
-                    > span {
-                        opacity: 0.5;
-                        margin-left:10px;
-                    }
-                }
-                
-                .val {
-                    margin-top:10px;
-                    font-size: 14px;
-                    font-family: PingFang SC, PingFang SC;
-                    font-weight: 500;
-                    color: #FFFFFF;
-                    position: relative;
-                    left:10px;
-                }
+          > .text {
+            font-size: 14px;
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 500;
+            > span {
+              opacity: 0.5;
+              margin-left: 10px;
             }
+          }
+
+          .val {
+            margin-top: 10px;
+            font-size: 14px;
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 500;
+            color: #ffffff;
+            position: relative;
+            left: 10px;
+          }
         }
       }
     }
   }
-      .charts {
-        height:180px;
-        width: 100%;
-      }
-  
-  </style>
-  
\ No newline at end of file
+}
+.charts {
+  height: 180px;
+  width: 100%;
+}
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherWarning/components/infoWarning/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherWarning/components/infoWarning/index.vue
index 0dc3b8da..0ec49e7b 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherWarning/components/infoWarning/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherWarning/components/infoWarning/index.vue
@@ -1,393 +1,464 @@
 <template>
-    <div class='congestion'>
-        <WgtTitle :title="'气象预警信息'"></WgtTitle>
-        <div class="board">
-            <div class="weaterMain">
-                <div class="weaterTitle">
-                    <span class="text">当前气象预警信息数：</span>
-                    <span class="num">113</span>
-                </div>
-                <div>
-                    <el-select v-model="colorSelect" size="mini" class="selectRoad" placeholder="请选择">
-                        <el-option v-for="item in colors" :key="item.value" :label="item.label" :value="item.value">
-                        </el-option>
-                    </el-select>
-                </div>
+  <div class="congestion">
+    <WgtTitle :title="'气象预警信息'"></WgtTitle>
+    <div class="board">
+      <div class="weaterMain">
+        <div class="weaterTitle">
+          <span class="text">当前气象预警信息数：</span>
+          <span class="num">{{ warningData.length }}</span>
+        </div>
+        <div>
+          <el-select
+            v-model="colorSelect"
+            size="mini"
+            class="selectRoad"
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="item in colors"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </div>
+      </div>
+      <div class="warningList" v-if="warningList.length > 0">
+        <div class="itemWarning" v-for="item in warningList">
+          <div class="left-w">
+            <div class="left-row">
+              <div class="label">预警类型：</div>
+              <div class="value">
+                {{ item.typeName }}
+              </div>
+            </div>
+            <div class="left-row">
+              <div class="label">预警等级：</div>
+              <div :class="item.severityColor">
+                {{ item.severityColor }}
+                {{
+                  item.severity == "Cancel"
+                    ? "取消"
+                    : item.severity == "None"
+                    ? "无"
+                    : item.severity == "Unknown"
+                    ? "未知"
+                    : item.severity == "Standard"
+                    ? "标准"
+                    : item.severity == "Minor"
+                    ? "次要"
+                    : item.severity == "Moderate"
+                    ? "温和"
+                    : item.severity == "Major"
+                    ? "主要"
+                    : item.severity == "Severe"
+                    ? "严峻"
+                    : item.severity == "Extreme"
+                    ? "极端"
+                    : ""
+                }}
+              </div>
             </div>
-            <div class="warningList">
-                <div class="itemWarning" v-for="(item, i) in warnings">
-                    <div class="left-w">
-                        <div class="left-row">
-                            <div class="label">
-                                预警类型：
-                            </div>
-                            <div class="value">
-                                {{ item.class }}
-                            </div>
-                        </div>
-                        <div class="left-row">
-                            <div class="label">
-                                预警等级：
-                            </div>
-                            <div :class="'value ' + item.type">
-                                {{ item.lay }}
-                            </div>
-                        </div>
-                        <div class="left-row">
-                            <div class="label">
-                                预警范围：
-                            </div>
-                            <div class="value">
-                                {{ item.scope }}
-                            </div>
-                        </div>
-                        <div class="left-row">
-                            <div class="label">
-                                预警发布时间：
-                            </div>
-                            <div class="value">
-                                {{ item.dateTime }}
-                            </div>
-                        </div>
-                    </div>
-                    <div class="right-w">
-                        <div class="right-row">
-                            预警内容:
-                        </div>
-                        <div class="right-text">
-                            {{ item.text }}
-                        </div>
-                    </div>
-                </div>
+            <!-- <div class="left-row">
+              <div class="label">预警范围：</div>
+              <div class="value">
+                {{ item.scope }}
+              </div>
+            </div> -->
+            <div class="left-row">
+              <div class="label">预警发布时间：</div>
+              <div class="value">
+                {{ item.pubTime }}
+              </div>
             </div>
+          </div>
+          <div class="right-w">
+            <div class="right-row">预警内容:</div>
+            <div class="right-text">
+              {{ item.text }}
+            </div>
+          </div>
         </div>
+      </div>
+      <Empty v-else text="暂无数据..."></Empty>
     </div>
+  </div>
 </template>
-  
+
 <script>
-import { color } from 'echarts';
-import WgtTitle from '../../../../../widgets/title'
+import { color } from "echarts";
+import WgtTitle from "../../../../../widgets/title";
+import { getMeteorologicalEarlyWarning } from "@/api/perception/meteorologyCheck";
 
 export default {
-    name: 'infoWarning',
-    components: {
-        WgtTitle
+  name: "infoWarning",
+  components: {
+    WgtTitle,
+  },
+  data() {
+    return {
+      warningList: [],
+      warningData: [
+        // { typeName: "warning", severityColor: "Red", severity: "Severe" },
+        // { typeName: "warning", severityColor: "White", severity: "白色" },
+        // { typeName: "warning", severityColor: "Blue", severity: "蓝色" },
+      ],
+      colorSelect: "all",
+      colors: [
+        { label: "全部", value: "all" },
+        { label: "白色", value: "White" },
+        { label: "蓝色", value: "Blue" },
+        { label: "绿色", value: "Green" },
+        { label: "黄色", value: "Yellow" },
+        { label: "橙色", value: "Orange" },
+        { label: "红色", value: "Red" },
+        { label: "黑色", value: "Black" },
+      ],
+    };
+  },
+  watch: {
+    colorSelect(val) {
+      if (val !== "all") {
+        const data = this.warningData.filter(
+          (item) => item.severityColor === val
+        );
+        this.warningList = data;
+        this.warningList = data;
+      } else {
+        this.warningList = this.warningData;
+      }
+
+      // this.changeValue(val);
     },
-    data() {
-        return {
-            colorSelect: "org",
-            colors: [
-                { label: '全部', value: "all" },
-                { label: '橙色', value: "org" },
-                { label: '红色', value: "red" },
-                { label: '蓝色', value: "bule" },
-            ],
-            warnings: [
-                {
-                    type: "org",
-                    class: "道路结冰",
-                    lay: "橙色",
-                    scope: "K100+000",
-                    dateTime: "2023-12-31 13:00:00",
-                    text: "威海市文登区气象台2023年12月21日7时30分将道路结冰黄色预警信号升级为道路结冰橙色预警信号：受降雪和低温影响，我区全部乡镇和街道仍有对交通有较大影响的道路结冰和积雪。请注意防范道路结冰对交通运输、室外作业、农业生产等带来的不利影响。"
-                },
-                {
-                    type: "org",
-                    class: "道路结冰",
-                    lay: "橙色",
-                    scope: "K100+000",
-                    dateTime: "2023-12-31 13:00:00",
-                    text: "威海市文登区气象台2023年12月21日7时30分将道路结冰黄色预警信号升级为道路结冰橙色预警信号：受降雪和低温影响，我区全部乡镇和街道仍有对交通有较大影响的道路结冰和积雪。请注意防范道路结冰对交通运输、室外作业、农业生产等带来的不利影响。"
-                },
-                {
-                    type: "org",
-                    class: "道路结冰",
-                    lay: "橙色",
-                    scope: "K100+000",
-                    dateTime: "2023-12-31 13:00:00",
-                    text: "威海市文登区气象台2023年12月21日7时30分将道路结冰黄色预警信号升级为道路结冰橙色预警信号：受降雪和低温影响，我区全部乡镇和街道仍有对交通有较大影响的道路结冰和积雪。请注意防范道路结冰对交通运输、室外作业、农业生产等带来的不利影响。"
-                },
-                {
-                    type: "org",
-                    class: "道路结冰",
-                    lay: "橙色",
-                    scope: "K100+000",
-                    dateTime: "2023-12-31 13:00:00",
-                    text: "威海市文登区气象台2023年12月21日7时30分将道路结冰黄色预警信号升级为道路结冰橙色预警信号：受降雪和低温影响，我区全部乡镇和街道仍有对交通有较大影响的道路结冰和积雪。请注意防范道路结冰对交通运输、室外作业、农业生产等带来的不利影响。"
-                }
-            ]
-        }
-    },
-
-    created() {
-
-    },
-    methods: {
-        selectItem(index) {
-            this.selectIndex = index;
-        },
-    },
-    mounted() {
-
-        setTimeout(() => {
-            this.$nextTick(() => {
-
+  },
+  created() {},
+  methods: {
+    getWarningData() {
+      getMeteorologicalEarlyWarning().then((res) => {
+        console.log("气象预警", res.data);
+        let data = [];
+        for (let key in res.data) {
+          if (res.data[key].length > 0) {
+            res.data[key].forEach((value) => {
+              data.push(value);
             });
-        });
+          }
+        }
+        this.warningData = data;
+        this.warningList = this.warningData;
+      });
     },
-}
+  },
+  mounted() {
+    this.getWarningData();
+  },
+};
 </script>
-  
-<style lang='scss' scoped>
-.selectRoad {
-    width: 89px;
-    margin-top: 5px;
-    margin-left: 20px;
-    border: 1px solid #00B3CC;
 
-    ::v-deep {
-        .el-input__inner {
-            background-color: #064258 !important;
-            border-width: 0px !important;
-        }
+<style lang="scss" scoped>
+.selectRoad {
+  width: 89px;
+  margin-top: 5px;
+  margin-left: 20px;
+  border: 1px solid #00b3cc;
+
+  ::v-deep {
+    .el-input__inner {
+      background-color: #064258 !important;
+      border-width: 0px !important;
     }
+  }
 }
 
 .congestion {
-    display: inline-flex;
+  display: inline-flex;
+  width: 100%;
+  height: 600px;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+
+  .board {
+    height: 690px;
     width: 100%;
-    height: 600px;
+    padding: 0px 0px;
+    border-radius: 5px 5px 5px 5px;
+    opacity: 1;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     flex-direction: column;
-    width: 100%;
-    height: 100%;
-
-    .board {
-        height: 690px;
+    margin-top: 20px;
+
+    .warningList {
+      display: inline-flex;
+      flex-direction: column;
+      width: 100%;
+      height: calc(100% - 40px);
+
+      > div::after {
+        content: "";
+        top: 0;
+        left: -3px;
+        position: absolute;
+        width: 0;
+        height: 0;
+        border-right: 6px solid transparent;
+        border-left: 6px solid transparent;
+        border-bottom: 6px solid rgba(55, 231, 255, 1);
+        transform: rotate(-45deg);
+      }
+
+      > div::before {
+        content: "";
+        bottom: 0;
+        right: -3px;
+        position: absolute;
+        width: 0;
+        height: 0;
+        border-right: 6px solid transparent;
+        border-left: 6px solid transparent;
+        border-bottom: 6px solid rgba(55, 231, 255, 1);
+        transform: rotate(135deg);
+      }
+
+      > div {
+        position: relative;
+        display: inline-flex;
         width: 100%;
-        padding: 0px 0px;
-        border-radius: 5px 5px 5px 5px;
+        height: 138px;
+        background: #133242;
+        border-radius: 2px 2px 2px 2px;
         opacity: 1;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        flex-direction: column;
+        border: 1px solid;
+        border-image: linear-gradient(
+            360deg,
+            rgba(55, 231, 255, 0.2),
+            rgba(55, 231, 255, 0)
+          )
+          1 1;
         margin-top: 20px;
-
-        .warningList {
+        padding: 23px 29px;
+        font-size: 14px;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 400;
+        color: #37e7ff;
+
+        > .left-w {
+          display: inline-flex;
+          width: 40%;
+          height: 100%;
+          flex-direction: column;
+
+          .left-row {
+            margin: 2px;
             display: inline-flex;
-            flex-direction: column;
             width: 100%;
-            height: calc(100% - 40px);
+            height: 30px;
+            flex-direction: row;
 
-            >div::after {
-                content: "";
-                top: 0;
-                left: -3px;
-                position: absolute;
-                width: 0;
-                height: 0;
-                border-right: 6px solid transparent;
-                border-left: 6px solid transparent;
-                border-bottom: 6px solid rgba(55, 231, 255, 1);
-                transform: rotate(-45deg);
+            > .value {
+              color: #fff;
             }
 
-            >div::before {
-                content: "";
-                bottom: 0;
-                right: -3px;
-                position: absolute;
-                width: 0;
-                height: 0;
-                border-right: 6px solid transparent;
-                border-left: 6px solid transparent;
-                border-bottom: 6px solid rgba(55, 231, 255, 1);
-                transform: rotate(135deg);
+            .org {
+              font-size: 14px !important;
+              margin-top: 2px;
+              font-family: PangMenZhengDao;
+              font-weight: 400;
+              color: #f4a125;
             }
-
-            >div {
-                position: relative;
-                display: inline-flex;
-                width: 100%;
-                height: 138px;
-                background: #133242;
-                border-radius: 2px 2px 2px 2px;
-                opacity: 1;
-                border: 1px solid;
-                border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.2), rgba(55, 231, 255, 0)) 1 1;
-                margin-top: 20px;
-                padding: 23px 29px;
-                font-size: 14px;
-                font-family: PingFang SC, PingFang SC;
-                font-weight: 400;
-                color: #37E7FF;
-
-                >.left-w {
-                    display: inline-flex;
-                    width: 40%;
-                    height: 100%;
-                    flex-direction: column;
-
-                    .left-row {
-                        margin: 2px;
-                        display: inline-flex;
-                        width: 100%;
-                        height: 30px;
-                        flex-direction: row;
-
-                        >.value {
-                            color: #fff;
-                        }
-
-                        .org {
-                            font-size: 14px !important;
-                            margin-top: 2px;
-                            font-family: PangMenZhengDao;
-                            font-weight: 400;
-                            color: #F4A125
-                        }
-
-                    }
-                }
-
-                >.right-w {
-                    margin-left: 30px;
-                    display: inline-flex;
-                    width: 100%;
-                    height: 100%;
-                    flex-direction: column;
-
-                    .right-row {
-                        margin-bottom: 10px;
-                    }
-
-                    .right-text {
-                        color: #fff;
-                    }
-                }
-
+            .White {
+              color: #fff;
             }
+            .Blue {
+              color: blue;
+            }
+            .Green {
+              color: green;
+            }
+            .Yellow {
+              color: yellow;
+            }
+            .Orange {
+              color: orange;
+            }
+            .Red {
+              color: red;
+            }
+            .Black {
+              color: #000;
+            }
+          }
         }
 
-        .weaterMain {
-            display: inline-flex;
-            flex-direction: row;
-            width: 100%;
-            height: 40px;
+        > .right-w {
+          margin-left: 30px;
+          display: inline-flex;
+          width: 100%;
+          height: 100%;
+          flex-direction: column;
 
+          .right-row {
+            margin-bottom: 10px;
+          }
 
-            .buttons {
-                width: 100%;
-                height: 38px;
-                margin-left: 20px;
-
-                >div {
-                    display: inline-flex;
-                    width: 10%;
-                    height: 35px;
-                    justify-content: center;
-                    align-items: center;
-                    font-size: 12px;
-                    font-family: PangMenZhengDao;
-                    font-weight: 800;
-                    color: #FFFFFF;
-                    z-index: 9;
-                }
-
-                >div::after {
-                    content: "";
-                    position: absolute;
-                    display: inline-flex;
-                    width: 55px;
-                    height: 36px;
-                    background: linear-gradient(180deg, #6557D7 0%, rgba(101, 87, 216, 0) 100%);
-                    border-radius: 50%;
-                    opacity: 1;
-                    z-index: -1;
-                    cursor: pointer;
-                }
-
-                .redSel::after {
-                    background: linear-gradient(180deg, #E73A14 0%, rgba(240, 92, 9, 0) 100%);
-                }
+          .right-text {
+            color: #fff;
+          }
+        }
+      }
+    }
 
-                .yelSel::after {
-                    background: linear-gradient(180deg, #FFFA79 0%, rgba(255, 208, 137, 0) 100%);
-                }
+    .weaterMain {
+      display: inline-flex;
+      flex-direction: row;
+      width: 100%;
+      height: 40px;
 
-                .bluSel::after {
-                    background: linear-gradient(180deg, #121ADE 0%, rgba(40, 18, 228, 0) 100%);
-                }
+      .buttons {
+        width: 100%;
+        height: 38px;
+        margin-left: 20px;
+
+        > div {
+          display: inline-flex;
+          width: 10%;
+          height: 35px;
+          justify-content: center;
+          align-items: center;
+          font-size: 12px;
+          font-family: PangMenZhengDao;
+          font-weight: 800;
+          color: #ffffff;
+          z-index: 9;
+        }
 
-                .orgSel::after {
-                    background: linear-gradient(180deg, #FFA623 0%, rgba(255, 173, 53, 0) 100%);
-                }
-            }
+        > div::after {
+          content: "";
+          position: absolute;
+          display: inline-flex;
+          width: 55px;
+          height: 36px;
+          background: linear-gradient(
+            180deg,
+            #6557d7 0%,
+            rgba(101, 87, 216, 0) 100%
+          );
+          border-radius: 50%;
+          opacity: 1;
+          z-index: -1;
+          cursor: pointer;
+        }
 
-            .weaterTitle::after {
-                content: "";
-                position: absolute;
-                top: 0px;
-                left: 0px;
-                width: 100%;
-                height: 2px;
-                background: linear-gradient(90deg, rgba(189, 255, 246, 0) 0%, #BDFFF6 52%, rgba(189, 255, 246, 0) 100%);
-                border-radius: 0px 0px 0px 0px;
-                opacity: 1;
-            }
+        .redSel::after {
+          background: linear-gradient(
+            180deg,
+            #e73a14 0%,
+            rgba(240, 92, 9, 0) 100%
+          );
+        }
 
-            .weaterTitle::before {
-                content: "";
-                position: absolute;
-                top: 38px;
-                left: 0px;
-                width: 100%;
-                height: 2px;
-                background: linear-gradient(90deg, rgba(189, 255, 246, 0) 0%, #BDFFF6 52%, rgba(189, 255, 246, 0) 100%);
-                border-radius: 0px 0px 0px 0px;
-                opacity: 1;
-            }
+        .yelSel::after {
+          background: linear-gradient(
+            180deg,
+            #fffa79 0%,
+            rgba(255, 208, 137, 0) 100%
+          );
+        }
 
-            .weaterTitle {
-                position: relative;
-                display: inline-flex;
-                width: 287px;
-                height: 38px;
-                background: linear-gradient(269deg, rgba(55, 231, 255, 0) 6%, rgba(55, 231, 255, 0.6) 50%, rgba(55, 231, 255, 0) 92%);
-                border-radius: 0px 0px 0px 0px;
-                opacity: 1;
-                justify-content: center;
-                align-items: center;
-                margin-left: 30px;
-                ;
+        .bluSel::after {
+          background: linear-gradient(
+            180deg,
+            #121ade 0%,
+            rgba(40, 18, 228, 0) 100%
+          );
+        }
 
-                >span.text {
-                    display: inline-flex;
-                    font-size: 16px;
-                    font-family: PingFang SC, PingFang SC;
-                    font-weight: 400;
-                    color: #FFFFFF;
-                }
+        .orgSel::after {
+          background: linear-gradient(
+            180deg,
+            #ffa623 0%,
+            rgba(255, 173, 53, 0) 100%
+          );
+        }
+      }
 
+      .weaterTitle::after {
+        content: "";
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        width: 100%;
+        height: 2px;
+        background: linear-gradient(
+          90deg,
+          rgba(189, 255, 246, 0) 0%,
+          #bdfff6 52%,
+          rgba(189, 255, 246, 0) 100%
+        );
+        border-radius: 0px 0px 0px 0px;
+        opacity: 1;
+      }
 
-                .num {
-                    display: inline-flex;
-                    justify-content: center;
-                    align-items: center;
-                    font-size: 20px;
-                    font-family: PangMenZhengDao;
-                    font-weight: 400;
-                    color: #D9001B;
-                }
-            }
+      .weaterTitle::before {
+        content: "";
+        position: absolute;
+        top: 38px;
+        left: 0px;
+        width: 100%;
+        height: 2px;
+        background: linear-gradient(
+          90deg,
+          rgba(189, 255, 246, 0) 0%,
+          #bdfff6 52%,
+          rgba(189, 255, 246, 0) 100%
+        );
+        border-radius: 0px 0px 0px 0px;
+        opacity: 1;
+      }
+
+      .weaterTitle {
+        position: relative;
+        display: inline-flex;
+        width: 287px;
+        height: 38px;
+        background: linear-gradient(
+          269deg,
+          rgba(55, 231, 255, 0) 6%,
+          rgba(55, 231, 255, 0.6) 50%,
+          rgba(55, 231, 255, 0) 92%
+        );
+        border-radius: 0px 0px 0px 0px;
+        opacity: 1;
+        justify-content: center;
+        align-items: center;
+        margin-left: 30px;
+        > span.text {
+          display: inline-flex;
+          font-size: 16px;
+          font-family: PingFang SC, PingFang SC;
+          font-weight: 400;
+          color: #ffffff;
         }
 
+        .num {
+          display: inline-flex;
+          justify-content: center;
+          align-items: center;
+          font-size: 20px;
+          font-family: PangMenZhengDao;
+          font-weight: 400;
+          color: #d9001b;
+        }
+      }
     }
+  }
 }
 
 .charts {
-    height: 180px;
-    width: 100%;
+  height: 180px;
+  width: 100%;
 }
 </style>
-  
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/index.vue
index 308886e9..efed36e1 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/index.vue
@@ -1,160 +1,153 @@
 <template>
-    <div class='TrafficFlow'>
-      <section class="content">
-        <RoadNetwork class="content-l" />
-        <WeatherForecast class="content-l" />
-      </section>
-      <section class="foot">
-        <el-tabs class="footTabs" v-model="activeName"  @tab-click="changeTabs">
-            <el-tab-pane label="短临预报" name="first">
-              <div class="foot-shot" >
-                 <SortFaceForecast  />
-              </div>
-            </el-tab-pane>
-            <el-tab-pane label="站点气象信息查询" name="second">
-              <WeatherInfoQuery  ref="infoQuery" />
-            </el-tab-pane>
-            <el-tab-pane label="气象预警" name="third">
-              <WeatherWarning />
-            </el-tab-pane>
-        </el-tabs>
-      </section>
-    </div>
-  </template>
-  
-  <script> 
-  import RoadNetwork from './components/roadNetwork';
-  import WeatherForecast from './components/weatherForecast';
-  import SortFaceForecast from './components/sortFaceForecast';
-  import WeatherInfoQuery from './components/weatherInfoQuery';
-  import WeatherWarning from './components/weatherWarning';
+  <div class="TrafficFlow">
+    <section class="content">
+      <RoadNetwork class="content-l" />
+      <WeatherForecast class="content-l" style="margin-right: 0" />
+    </section>
+    <section class="foot">
+      <el-tabs class="footTabs" v-model="activeName" @tab-click="changeTabs">
+        <el-tab-pane label="短临预报" name="first">
+          <div class="foot-shot">
+            <SortFaceForecast />
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="站点气象信息查询" name="second">
+          <WeatherInfoQuery ref="infoQuery" />
+        </el-tab-pane>
+        <el-tab-pane label="气象预警" name="third">
+          <WeatherWarning />
+        </el-tab-pane>
+      </el-tabs>
+    </section>
+  </div>
+</template>
 
-  export default {
-    name: 'MeteorologyCheck',
-    components: {
-        RoadNetwork,
-        WeatherForecast,
-        SortFaceForecast,
-        WeatherInfoQuery,
-        WeatherWarning
-    },
-    data(){
-        return {
-            activeName:"first"
-        }
+<script>
+import RoadNetwork from "./components/roadNetwork";
+import WeatherForecast from "./components/weatherForecast";
+import SortFaceForecast from "./components/sortFaceForecast";
+import WeatherInfoQuery from "./components/weatherInfoQuery";
+import WeatherWarning from "./components/weatherWarning";
+
+export default {
+  name: "MeteorologyCheck",
+  components: {
+    RoadNetwork,
+    WeatherForecast,
+    SortFaceForecast,
+    WeatherInfoQuery,
+    WeatherWarning,
+  },
+  data() {
+    return {
+      activeName: "first",
+    };
+  },
+  methods: {
+    changeTabs() {
+      this.$refs.infoQuery.resizeChart();
     },
-    methods:{
-      changeTabs(){
-         this.$refs.infoQuery.resizeChart();
-      }
-    }
-    
-  }
-  </script>
-  
-  <style lang='scss' scoped>
+  },
+};
+</script>
 
-   ::v-deep .el-tabs__item{
-    display: inline-flex;
-    justify-content: center;
-    font-size: 16px;
-    font-family: PingFang SC, PingFang SC;
-    font-weight: 500;
-    color: #FFFFFF;
-    min-width:128px;
-    position: relative;
-    left:10px;
-   }
+<style lang="scss" scoped>
+::v-deep .el-tabs__item {
+  display: inline-flex;
+  justify-content: center;
+  font-size: 16px;
+  font-family: PingFang SC, PingFang SC;
+  font-weight: 500;
+  color: #ffffff;
+  min-width: 128px;
+  position: relative;
+  left: 10px;
+}
 
-   ::v-deep .el-tabs__active-bar {
-    min-width:128px;
-   }
+::v-deep .el-tabs__active-bar {
+  min-width: 128px;
+}
 
-   ::v-deep .el-tabs__nav-wrap::after {
-    background-color: #133242;
-    opacity: 0.1;
-   }
+::v-deep .el-tabs__nav-wrap::after {
+  background-color: #133242;
+  opacity: 0.1;
+}
 
-   .footTabs {
-     display: inline;
-     width:99%;
+.footTabs {
+  display: inline;
+  width: 100%;
+}
 
-   }
+.TrafficFlow {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  z-index: 6;
+  color: white;
 
-  .TrafficFlow {
-    width: 100%;
-    height: 100%;
-    position: relative;
-    z-index: 6;
-    color: white;
-  
-    .head{
-      width: 98%;
-      margin: auto;
-      margin-top: 15px;
+  .head {
+    width: 98%;
+    margin: auto;
+    margin-top: 15px;
+  }
+  .content {
+    width: 98%;
+    margin: auto;
+    display: flex;
+    flex: 1;
+    pointer-events: none;
+    margin-top: 19px;
+    > div {
+      pointer-events: auto;
     }
-    .content {
-      width: 98%;
-      margin: auto;
-      display: flex;
-      flex: 1;
-      pointer-events: none;
-      margin-top: 19px;
-      >div {
-        pointer-events: auto;
-      }
-  
-      .content-l {
-        width: calc(50%);
-        min-width:460px;
-        margin-right:20px;
 
-      }
-  
-  
-      .content-m {
-        display: inline-flex;
-        flex-direction: column;
-        width: calc(100% / 4 );
-        margin-right:20px;
+    .content-l {
+      width: calc(50%);
+      min-width: 460px;
+      margin-right: 20px;
+    }
 
-        .content-m-t {
-            width:100%;
-            height:240px;
-            margin-bottom: 20px;
-        }
-      }
-      .content-r {
-        width: 49.4%;
+    .content-m {
+      display: inline-flex;
+      flex-direction: column;
+      width: calc(100% / 4);
+      margin-right: 20px;
+
+      .content-m-t {
+        width: 100%;
+        height: 240px;
+        margin-bottom: 20px;
       }
     }
-    .foot{
-      width: 98%;
-      margin: auto;
-      display: flex;
-      justify-content: space-between;
-      flex: 1;
-      pointer-events: none;
-      margin-top: 8px;
-      >div {
-        pointer-events: auto;
-      }
+    .content-r {
+      width: 49.4%;
+    }
+  }
+  .foot {
+    width: 98%;
+    margin: auto;
+    display: flex;
+    justify-content: space-between;
+    flex: 1;
+    pointer-events: none;
+    margin-top: 8px;
+    > div {
+      pointer-events: auto;
+    }
 
-      .foot-w {
-        width:100%;
+    .foot-w {
+      width: 100%;
+    }
 
-      }
-  
-      .foot-l {
-        width: 726px;
-      }
-      .foot-m {
-        width: 613px;
-      }
-      .foot-r {
-        width: 493px;
-      }
+    .foot-l {
+      width: 726px;
+    }
+    .foot-m {
+      width: 613px;
+    }
+    .foot-r {
+      width: 493px;
     }
   }
-  </style>
-  
\ No newline at end of file
+}
+</style>
diff --git a/ruoyi-ui/src/views/event/event/dispatch.vue b/ruoyi-ui/src/views/event/event/dispatch.vue
index 8d292b23..433096b4 100644
--- a/ruoyi-ui/src/views/event/event/dispatch.vue
+++ b/ruoyi-ui/src/views/event/event/dispatch.vue
@@ -26,7 +26,7 @@
         @click="openWorkBench()"
       />
     </div>
-    <div class="drawerBox" @click="drawerHandleOpen()" >
+    <div class="drawerBox" @click="drawerHandleOpen()">
       <i class="el-icon-d-arrow-left" v-show="drawer"></i>
       <i class="el-icon-d-arrow-right" v-show="drawer == false"></i>
       处置记录
@@ -39,20 +39,21 @@
       :before-close="drawerHandleClose"
       append-to-body
       :modal="false"
-      style="left:26%;">
+      style="left: 26%"
+    >
       <el-col :span="24">
         <el-timeline :reverse="reverse">
           <el-timeline-item
             v-for="(activity, index) in disposalRecord"
             :key="index"
             :timestamp="activity.flowTime"
-            style="color: #fff;"
+            style="color: #fff"
             placement="top"
             type="primary"
-            >
+          >
             <el-card>
-              <h4 style="color: #fff;"> {{activity.flowDescription}}</h4>
-              <p style="color: #fff;">用户:{{activity.nickName}}</p>
+              <h4 style="color: #fff">{{ activity.flowDescription }}</h4>
+              <p style="color: #fff">用户:{{ activity.nickName }}</p>
             </el-card>
           </el-timeline-item>
         </el-timeline>
@@ -60,51 +61,51 @@
     </el-drawer>
     <div class="disRightBox">
       <div class="dispatchLeft">
-          <div class="video">
-            <div class="title">
-              <i class="el-icon-video-camera" style="margin-right:15px;"></i>
-              实时视频
-              <span>VIDEO MONITORING</span>
-              <div class="touping" @click="handleTouping">投屏</div>
+        <div class="video">
+          <div class="title">
+            <i class="el-icon-video-camera" style="margin-right: 15px"></i>
+            实时视频
+            <span>VIDEO MONITORING</span>
+            <div class="touping" @click="handleTouping">投屏</div>
+          </div>
+          <div class="videoBox1">
+            <div class="videoContent">
+              <videoPlayer
+                v-if="videoForm1.liveUrl"
+                :rtsp="videoForm1.liveUrl"
+                :open="videoForm1.cameraPlayer"
+                class="video"
+              ></videoPlayer>
+              <div class="videoListTitle">{{ videoForm1.title }}</div>
             </div>
-            <div class="videoBox1">
-              <div class="videoContent">
-                <videoPlayer
-                  v-if="videoForm1.liveUrl "
-                  :rtsp="videoForm1.liveUrl"
-                  :open="videoForm1.cameraPlayer"
-                  class="video"
-                ></videoPlayer>
-                <div class="videoListTitle">{{ videoForm1.title }}</div>
-              </div>
-              <div class="videoContent">
-                <videoPlayer
-                  v-if="videoForm2.liveUrl "
-                  :rtsp="videoForm2.liveUrl"
-                  :open="videoForm2.cameraPlayer"
-                  class="video"
-                ></videoPlayer>
-                <div class="videoListTitle">{{ videoForm2.title }}</div>
-              </div>
-              <div class="videoContent">
-                <videoPlayer
-                  v-if="videoForm3.liveUrl "
-                  :rtsp="videoForm3.liveUrl"
-                  :open="videoForm3.cameraPlayer"
-                  class="video"
-                ></videoPlayer>
-                <div class="videoListTitle">{{ videoForm3.title }}</div>
-              </div>
-              <div class="videoContent">
-                <videoPlayer
-                  v-if="videoForm4.liveUrl "
-                  :rtsp="videoForm4.liveUrl"
-                  :open="videoForm4.cameraPlayer"
-                  class="video"
-                ></videoPlayer>
-                <div class="videoListTitle">{{ videoForm4.title }}</div>
-              </div>
-              <!-- <div
+            <div class="videoContent">
+              <videoPlayer
+                v-if="videoForm2.liveUrl"
+                :rtsp="videoForm2.liveUrl"
+                :open="videoForm2.cameraPlayer"
+                class="video"
+              ></videoPlayer>
+              <div class="videoListTitle">{{ videoForm2.title }}</div>
+            </div>
+            <div class="videoContent">
+              <videoPlayer
+                v-if="videoForm3.liveUrl"
+                :rtsp="videoForm3.liveUrl"
+                :open="videoForm3.cameraPlayer"
+                class="video"
+              ></videoPlayer>
+              <div class="videoListTitle">{{ videoForm3.title }}</div>
+            </div>
+            <div class="videoContent">
+              <videoPlayer
+                v-if="videoForm4.liveUrl"
+                :rtsp="videoForm4.liveUrl"
+                :open="videoForm4.cameraPlayer"
+                class="video"
+              ></videoPlayer>
+              <div class="videoListTitle">{{ videoForm4.title }}</div>
+            </div>
+            <!-- <div
                 v-for="(item, index) of videoList"
                 :key="index"
                 class="videoContent"
@@ -117,231 +118,310 @@
                 ></videoPlayer>
                 <div class="videoListTitle">{{ item.title }}</div>
               </div> -->
-            </div>
           </div>
-          <div class="evtMessage">
-            <div class="title">
-              <i class="el-icon-notebook-2" style="margin-right:15px;"></i>
-              事件信息
-              <span>EVENT INFORMATION</span>
-            </div>
-            <div class="evtMessBox">
-              <div class="evtMessLeft">
-                <div>
-                  <div>事件来源：</div>
-                  <div>{{ getFrom(eventForm.eventSource) }}</div>
-                </div>
-                <div>
-                  <div>事件类型：</div>
-                  <div>{{ eventForm.simplifyName }}</div>
-                </div>
-                <div>
-                  <div>所属隧道：</div>
-                  <div>{{ eventForm.tunnelName }}</div>
-                </div>
-                <div>
-                  <div>方向：</div>
-                  <div>{{ getDirection(eventForm.direction,eventForm) }}</div>
-                </div>
-                <div>
-                  <div style="display: flex;justify-content: left;align-items: center;">影响车道：</div>
-                  <div style="width: 45%;">{{ eventForm.laneNoName }}</div>
-                </div>
-                <div>
-                  <div>桩号：</div>
-                  <div>{{ eventForm.stakeNum }}</div>
-                </div>
+        </div>
+        <div class="evtMessage">
+          <div class="title">
+            <i class="el-icon-notebook-2" style="margin-right: 15px"></i>
+            事件信息
+            <span>EVENT INFORMATION</span>
+          </div>
+          <div class="evtMessBox">
+            <div class="evtMessLeft">
+              <div>
+                <div>事件来源：</div>
+                <div>{{ getFrom(eventForm.eventSource) }}</div>
               </div>
-              <div class="evtMessRight">
-                <div class="evtMessVideo">
-                  <video
-                    :src="eventForm.videoUrl"
-                    controls
-                    muted
-                    loop
-                    fluid
-                  ></video>
-                </div>
-                <div class="evtMessImg" v-if="eventForm.iconUrlList && eventForm.iconUrlList.length > 0">
-                  <el-image
-                    v-for="(item, index) of eventForm.iconUrlList"
-                    :key="index"
-                    :src="item.imgUrl"
-                    :preview-src-list="Array(item.imgUrl)"
-                  ></el-image>
+              <div>
+                <div>事件类型：</div>
+                <div>{{ eventForm.simplifyName }}</div>
+              </div>
+              <div>
+                <div>所属隧道：</div>
+                <div>{{ eventForm.tunnelName }}</div>
+              </div>
+              <div>
+                <div>方向：</div>
+                <div>{{ getDirection(eventForm.direction, eventForm) }}</div>
+              </div>
+              <div>
+                <div
+                  style="
+                    display: flex;
+                    justify-content: left;
+                    align-items: center;
+                  "
+                >
+                  影响车道：
                 </div>
+                <div style="width: 45%">{{ eventForm.laneNoName }}</div>
+              </div>
+              <div>
+                <div>桩号：</div>
+                <div>{{ eventForm.stakeNum }}</div>
               </div>
             </div>
-          </div>
-          <div class="plan">
-            <div class="title">
-              <i class="el-icon-phone-outline" style="margin-right:15px;"></i>
-              调度联络
-              <span>DISPATCHING LIAISON</span>
+            <div class="evtMessRight">
+              <div class="evtMessVideo">
+                <video
+                  :src="eventForm.videoUrl"
+                  controls
+                  muted
+                  loop
+                  fluid
+                ></video>
+              </div>
+              <div
+                class="evtMessImg"
+                v-if="eventForm.iconUrlList && eventForm.iconUrlList.length > 0"
+              >
+                <el-image
+                  v-for="(item, index) of eventForm.iconUrlList"
+                  :key="index"
+                  :src="item.imgUrl"
+                  :preview-src-list="Array(item.imgUrl)"
+                ></el-image>
+              </div>
             </div>
-            <div>
-              <el-tabs v-model="activeName" @tab-click="handleClick" type="card">
-                <el-tab-pane v-for="(item,index) in emergencyList" :key="index"
-                 :label="item.dictLabel" :name="item.dictValue">
-            <el-table
-              :data="implementList"
-              stripe
-              class="phoneTable"
-              :fit="true"
-              height="180"
-            >
-              <el-table-column
-                label="姓名"
-                align="center"
-                prop="userName"
-                      width="100"
-              />
-              <el-table-column label="联系方式" align="center" prop="phone" width="150">
-                <template slot-scope="scope">
-                  <span>{{ scope.row.phone }}</span>
-                </template>
-              </el-table-column>
-                  <el-table-column label="岗位" align="center" prop="groupName" width="150"/>
-            </el-table>
-                </el-tab-pane>
-              </el-tabs>
           </div>
         </div>
-    </div>
-    </div>
-    <div class="disLeftBox">
-      <div style="height:100%;">
-      <div class="IncHand">
-        <div class="title">
-          <i class="el-icon-document" style="margin-right:15px;"></i>
-          事件处置
-          <span class="small">EVENT HANDLING</span>
-        </div>
-        <div class="incHandBox">
-          <div class="GTop">
-            <div class="GT_one one_box">
-              <p>{{eventInfo.planName}}</p>
-              <span>{{eventInfo.eventGrade}}</span>
-            </div>
-            <div class="GT_one two_box">
-              <i class="el-icon-time"></i>
-              <p>{{deadline4}}</p>
-            </div>
+        <div class="plan">
+          <div class="title">
+            <i class="el-icon-phone-outline" style="margin-right: 15px"></i>
+            调度联络
+            <span>DISPATCHING LIAISON</span>
           </div>
-          <div class="dieBox" style="height: 75%;overflow-y: auto;">
-            <div class="heightBox" style="height:100%;">
-              <div
-                v-for="(item, index) of incHandList"
+          <div>
+            <el-tabs v-model="activeName" @tab-click="handleClick" type="card">
+              <el-tab-pane
+                v-for="(item, index) in emergencyList"
                 :key="index"
-                :class="item.reserveId?'incHandContent incHandContentBox':'incHandContent'"
-                :ref="'incHandContent'+index"
+                :label="item.dictLabel"
+                :name="item.dictValue"
               >
-                <div :class="item.reserveId?'classification classificationBox':'classification'">
-                  <div class="topDashed" v-show="index != 0"
-                    :style="{'top':item.circlePosition}">
-                    <p
-                      :style="{'height':item.lineHeight+'px'}">
-                    </p>
-                    <span class="topCircle"></span>
-                  </div>
-                  <div class="menuBox">
-                    <el-tooltip class="item" effect="dark" :content="item.flowContent" placement="right">
+                <el-table
+                  :data="implementList"
+                  stripe
+                  class="phoneTable"
+                  :fit="true"
+                  height="180"
+                >
+                  <el-table-column
+                    label="姓名"
+                    align="center"
+                    prop="userName"
+                    width="100"
+                  />
+                  <el-table-column
+                    label="联系方式"
+                    align="center"
+                    prop="phone"
+                    width="150"
+                  >
+                    <template slot-scope="scope">
+                      <span>{{ scope.row.phone }}</span>
+                    </template>
+                  </el-table-column>
+                  <el-table-column
+                    label="岗位"
+                    align="center"
+                    prop="groupName"
+                    width="150"
+                  />
+                </el-table>
+              </el-tab-pane>
+            </el-tabs>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="disLeftBox">
+      <div style="height: 100%">
+        <div class="IncHand">
+          <div class="title">
+            <i class="el-icon-document" style="margin-right: 15px"></i>
+            事件处置
+            <span class="small">EVENT HANDLING</span>
+          </div>
+          <div class="incHandBox">
+            <div class="GTop">
+              <div class="GT_one one_box">
+                <p>{{ eventInfo.planName }}</p>
+                <span>{{ eventInfo.eventGrade }}</span>
+              </div>
+              <div class="GT_one two_box">
+                <i class="el-icon-time"></i>
+                <p>{{ deadline4 }}</p>
+              </div>
+            </div>
+            <div class="dieBox" style="height: 75%; overflow-y: auto">
+              <div class="heightBox" style="height: 100%">
+                <div
+                  v-for="(item, index) of incHandList"
+                  :key="index"
+                  :class="
+                    item.reserveId
+                      ? 'incHandContent incHandContentBox'
+                      : 'incHandContent'
+                  "
+                  :ref="'incHandContent' + index"
+                >
+                  <div
+                    :class="
+                      item.reserveId
+                        ? 'classification classificationBox'
+                        : 'classification'
+                    "
+                  >
+                    <div
+                      class="topDashed"
+                      v-show="index != 0"
+                      :style="{ top: item.circlePosition }"
+                    >
+                      <p :style="{ height: item.lineHeight + 'px' }"></p>
+                      <span class="topCircle"></span>
+                    </div>
+                    <div class="menuBox">
+                      <el-tooltip
+                        class="item"
+                        effect="dark"
+                        :content="item.flowContent"
+                        placement="right"
+                      >
+                        <div
+                          class="type"
+                          :style="{
+                            padding: item.flowContent
+                              ? item.flowContent.toString().length > 2
+                                ? '8px'
+                                : '15px 12px'
+                              : '',
+                          }"
+                          v-if="item.flowContent"
+                        >
+                          {{ item.flowContent }}
+                        </div>
+                      </el-tooltip>
                       <div
-                        class="type"
-                        :style="{
-                          padding: item.flowContent
-                            ? item.flowContent.toString().length > 2
-                              ? '8px'
-                              : '15px 12px'
-                            : '',
-                        }"
-                        v-if="item.flowContent"
+                        v-show="getShow(item, index) == false && index != '0'"
+                        class="yijian"
+                        @click="getYiJian(item)"
+                        style="cursor: pointer"
+                      >
+                        一键
+                      </div>
+
+                      <div
+                        class="yijian"
+                        v-show="getShow(item, index) == true && index != '0'"
+                        @click="getYiJian(item)"
+                        style="cursor: pointer"
                       >
-                        {{ item.flowContent }}
+                        详情
                       </div>
-                    </el-tooltip>
+                    </div>
                     <div
-                      v-show="getShow(item,index) == false && index != '0'"
-                      class="yijian" @click="getYiJian(item)"
-                      style="cursor: pointer">
-                      一键
+                      class="dashed"
+                      :style="{ top: index == 0 ? '55px' : '76px' }"
+                      v-show="index != incHandList.length - 1"
+                    >
+                      <span class="circle"></span>
+                      <p
+                        :style="{
+                          height:
+                            index == 0 ? '50px' : item.lineHeight + 12 + 'px',
+                        }"
+                      ></p>
                     </div>
-
-                    <div class="yijian"
-                      v-show="getShow(item,index) == true && index != '0'"
-                      @click="getYiJian(item)"
-                      style="cursor: pointer;">
-                      详情
-                  </div>
                   </div>
-                  <div class="dashed"
-                    :style="{top:index == 0?'55px':'76px'}"
-                    v-show="index != incHandList.length - 1">
-                    <span class="circle"></span>
-                    <p :style="{height:index == 0?'50px':item.lineHeight + 12 + 'px'}"></p>
-                  </div>
-                </div>
 
-                <div class="heng1" v-if="item.children"></div>
-                <div
-                  class="shu"
-                  v-if="item.children"
-                  :style="{
-                    height: item.children
-                      ? item.children.length > 1
-                        ? item.children.length * 50 +
-                          4 * item.children.length -
-                          50 +
-                          'px'
-                        : '0px'
-                      : '',
-                  }"
-                ></div>
-                <div style="width:100%;">
+                  <div class="heng1" v-if="item.children"></div>
                   <div
-                    v-for="(itm, inx) of item.children"
-                    :key="inx"
-                    class="contentList"
-                    style="width:100%;"
-                  >
-                    <div style="float: left;padding-right: 20px;line-height: 20px;">{{ itm.flowContent }}</div>
-                    <!-- 预警完成按钮 -->
-                    <el-button type="success"
-                      plain
-                      size="mini"
-                      style="float: right; "
-                      icon="el-icon-check"
-                      v-show="itm.eventState != '0' && !itm.processId">
-                      完成
-                    </el-button>
-                    <!-- 预案完成按钮 -->
-                    <el-button type="success"
-                      plain
-                      size="mini"
-                      style="float: right; "
-                      icon="el-icon-check"
-                      v-show="itm.eventState != '0' && itm.processId && itm.eqTypeId != '29'"
-                      @click="getManagementDevice(itm)">
-                      完成
-                    </el-button>
-                    <el-button type="success"
-                      plain
-                      size="mini"
-                      style="float: right; "
-                      icon="el-icon-check"
-                      v-show="itm.eventState != '0' && itm.eqTypeId == '29'"
-                      @click="getManagementDevice(itm)">
-                      打开
-                    </el-button>
-                    <!-- <img
+                    class="shu"
+                    v-if="item.children"
+                    :style="{
+                      height: item.children
+                        ? item.children.length > 1
+                          ? item.children.length * 50 +
+                            4 * item.children.length -
+                            50 +
+                            'px'
+                          : '0px'
+                        : '',
+                    }"
+                  ></div>
+                  <div style="width: 100%">
+                    <div
+                      v-for="(itm, inx) of item.children"
+                      :key="inx"
+                      class="contentList"
+                      style="width: 100%"
+                    >
+                      <div
+                        style="
+                          float: left;
+                          padding-right: 20px;
+                          line-height: 20px;
+                        "
+                      >
+                        {{ itm.flowContent }}
+                      </div>
+                      <!-- 预警完成按钮 -->
+                      <el-button
+                        type="success"
+                        plain
+                        size="mini"
+                        style="float: right"
+                        icon="el-icon-check"
+                        v-show="itm.eventState != '0' && !itm.processId"
+                      >
+                        完成
+                      </el-button>
+                      <!-- 预案完成按钮 -->
+                      <el-button
+                        type="success"
+                        plain
+                        size="mini"
+                        style="float: right"
+                        icon="el-icon-check"
+                        v-show="
+                          itm.eventState != '0' &&
+                          itm.processId &&
+                          itm.eqTypeId != '29'
+                        "
+                        @click="getManagementDevice(itm)"
+                      >
+                        完成
+                      </el-button>
+                      <el-button
+                        type="success"
+                        plain
+                        size="mini"
+                        style="float: right"
+                        icon="el-icon-check"
+                        v-show="itm.eventState != '0' && itm.eqTypeId == '29'"
+                        @click="getManagementDevice(itm)"
+                      >
+                        打开
+                      </el-button>
+                      <!-- <img
                       :src="incHand2"
                       style="float: right; "
                       v-show="itm.eventState != '0'"
                     /> -->
-                    <!-- 下发 -->
-                    <div class="sendMsg" v-show="itm.eventState == '0'" @click="getManagementDevice(itm)">
-                      <el-button type="primary" size="mini" icon="el-icon-pie-chart">处置</el-button>
-                      <!-- <img
+                      <!-- 下发 -->
+                      <div
+                        class="sendMsg"
+                        v-show="itm.eventState == '0'"
+                        @click="getManagementDevice(itm)"
+                      >
+                        <el-button
+                          type="primary"
+                          size="mini"
+                          icon="el-icon-pie-chart"
+                          >处置</el-button
+                        >
+                        <!-- <img
                         :src="incHand1"
                         style="float: right; "
                         v-show="itm.eventState == '0'"
@@ -349,21 +429,23 @@
                         :style="iconDisabled?'cursor: not-allowed;pointer-events: none;':'cursor: pointer'"
                       />
                       <p >处置</p> -->
+                      </div>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
-          </div>
-          <!-- <el-divider></el-divider> -->
-          <div class="rightButton">
-            <el-button round type="primary" @click="over">立即完结</el-button>
-            <el-button round type="warning" @click="levelTop">警情升级</el-button>
+            <!-- <el-divider></el-divider> -->
+            <div class="rightButton">
+              <el-button round type="primary" @click="over">立即完结</el-button>
+              <el-button round type="warning" @click="levelTop"
+                >警情升级</el-button
+              >
+            </div>
           </div>
         </div>
       </div>
     </div>
-    </div>
     <!-- <el-row style="display: none;">
       <el-col :span="7">
       </el-col>
@@ -603,7 +685,11 @@
       :brandList="this.brandList"
       :directionList="this.directionList"
       :eqTypeDialogList="this.eqTypeDialogList"
-      v-if="[14, 21, 32, 33, 15, 35,40,39,48,45].includes(this.eqInfo.clickEqType)"
+      v-if="
+        [14, 21, 32, 33, 15, 35, 40, 39, 48, 45].includes(
+          this.eqInfo.clickEqType
+        )
+      "
       :eqInfo="this.eqInfo"
       @dialogClose="dialogClose"
     ></com-data>
@@ -686,74 +772,86 @@
       :visible.sync="dialogVisible"
       width="30%"
       :before-close="handleClose"
-      :close-on-click-modal="false">
+      :close-on-click-modal="false"
+    >
       <div class="dialogStyleBox">
         <div class="dialogLine"></div>
         <div class="dialogCloseButton"></div>
       </div>
-      <el-form ref="levelForm" :model="levelForm" :rules="rules" label-width="80px">
+      <el-form
+        ref="levelForm"
+        :model="levelForm"
+        :rules="rules"
+        label-width="80px"
+      >
         <el-row>
           <el-col :span="12">
             <el-form-item label="当前类型" prop="typeName">
-              <el-input
-                v-model="levelForm.typeName"
-                :disabled="true">
+              <el-input v-model="levelForm.typeName" :disabled="true">
               </el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="当前等级" prop="dengji">
-              <el-input
-                v-model="levelForm.dengji"
-                :disabled="true">
-              </el-input>
+              <el-input v-model="levelForm.dengji" :disabled="true"> </el-input>
             </el-form-item>
           </el-col>
           <el-col :span="24">
             <el-form-item label="当前预案" prop="yaName">
-              <el-input
-                v-model="levelForm.yaName"
-                :disabled="true">
-              </el-input>
+              <el-input v-model="levelForm.yaName" :disabled="true"> </el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="更改等级" prop="eventGrade">
-              <el-select v-model="levelForm.eventGrade" placeholder="请选择等级" @change="levelChange(levelForm.eventGrade)">
-                <el-option v-for="dict in eventGradeList"
+              <el-select
+                v-model="levelForm.eventGrade"
+                placeholder="请选择等级"
+                @change="levelChange(levelForm.eventGrade)"
+              >
+                <el-option
+                  v-for="dict in eventGradeList"
                   :key="dict.dictValue"
                   :label="dict.dictLabel"
-                  :value="dict.dictValue">
+                  :value="dict.dictValue"
+                >
                 </el-option>
               </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="更改预案" prop="currencyId">
-            <el-select v-model="levelForm.currencyId" placeholder="请选择预案">
-              <el-option label="区域一"  v-for="(item,index) in ReservePlanList"
-                :key="item.id"
-                :label="item.planName"
-                :value="item.id"
+              <el-select
+                v-model="levelForm.currencyId"
+                placeholder="请选择预案"
+              >
+                <el-option
+                  label="区域一"
+                  v-for="(item, index) in ReservePlanList"
+                  :key="item.id"
+                  :label="item.planName"
+                  :value="item.id"
                 >
-              </el-option>
-            </el-select>
-          </el-form-item>
+                </el-option>
+              </el-select>
+            </el-form-item>
           </el-col>
           <el-col :span="24">
             <el-form-item label="升级原因" prop="remark">
-            <el-input
-              type="textarea"
-              :rows="5"
-              placeholder="请输入升级原因"
-              v-model="levelForm.remark">
+              <el-input
+                type="textarea"
+                :rows="5"
+                placeholder="请输入升级原因"
+                v-model="levelForm.remark"
+              >
               </el-input>
             </el-form-item>
           </el-col>
         </el-row>
       </el-form>
       <span slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="changeLevel" class="submitButton">确 定</el-button>
+        <el-button type="primary" @click="changeLevel" class="submitButton"
+          >确 定</el-button
+        >
         <el-button @click="closeDialog()" class="closeButton">取 消</el-button>
       </span>
     </el-dialog>
@@ -766,7 +864,7 @@
       class="IssuedDialog"
       append-to-body
       :close-on-click-modal="false"
-      >
+    >
       <div class="dialogStyleBox">
         <div class="dialogLine"></div>
         <div class="dialogCloseButton"></div>
@@ -774,77 +872,98 @@
       <div class="GDeviceBox">
         <el-row>
           <el-col :span="24">
-            <p style="padding:15px;">设备控制</p>
+            <p style="padding: 15px">设备控制</p>
             <!-- <el-card shadow="always"> -->
-              <el-table
-                :data="GDeviceData.deviceList"
-                max-height="400"
-                class="phoneTable"
-                :fit="true"
-                empty-text="该桩号下暂无匹配设备"
-              >
-                <el-table-column
-                  label="设备名称"
-                  align="center"
-                  prop="eqName"
-                />
-                <el-table-column
-                  label="桩号"
-                  align="center"
-                  prop="eqPile"
-                />
-                <el-table-column label="执行状态" align="center">
-                  <template>
-                    <span>{{ deviceStateName }}</span>
-                  </template>
-                </el-table-column>
-              </el-table>
+            <el-table
+              :data="GDeviceData.deviceList"
+              max-height="400"
+              class="phoneTable"
+              :fit="true"
+              empty-text="该桩号下暂无匹配设备"
+            >
+              <el-table-column label="设备名称" align="center" prop="eqName" />
+              <el-table-column label="桩号" align="center" prop="eqPile" />
+              <el-table-column label="执行状态" align="center">
+                <template>
+                  <span>{{ deviceStateName }}</span>
+                </template>
+              </el-table-column>
+            </el-table>
             <!-- </el-card> -->
           </el-col>
           <el-col :span="24" v-if="GDeviceData.vmsData">
-            <p style="padding:15px;">{{boxName}}:</p>
+            <p style="padding: 15px">{{ boxName }}:</p>
             <el-card shadow="always">
-              <div style="display: flex;justify-content: flex-start;align-items: center;">
-                <div :style="{
-                  'width':GDeviceData.vmsData['width'] + 'px',
-                  'height':GDeviceData.vmsData['height'] + 'px',
-                  'color':GDeviceData.vmsData['font_color'],
-                  'font-size':GDeviceData.vmsData['font_size'] + 'px',
-                  'font-family':GDeviceData.vmsData['font_type'],
-                  'background-color':'#000',
-                  'position':'relative',
-                  }">
-                  <span :style="{
-                    'position':'absolute',
-                    'top':GDeviceData.vmsData['top'] + 'px',
-                    'left':GDeviceData.vmsData['left'] + 'px',
+              <div
+                style="
+                  display: flex;
+                  justify-content: flex-start;
+                  align-items: center;
+                "
+              >
+                <div
+                  :style="{
+                    width: GDeviceData.vmsData['width'] + 'px',
+                    height: GDeviceData.vmsData['height'] + 'px',
+                    color: GDeviceData.vmsData['font_color'],
+                    'font-size': GDeviceData.vmsData['font_size'] + 'px',
+                    'font-family': GDeviceData.vmsData['font_type'],
+                    'background-color': '#000',
+                    position: 'relative',
                   }"
-                  style="line-height:1"
-                  v-html="GDeviceData.vmsData['content'].replace(
-                              /\n|\r\n/g,
-                              '<br>'
-                            ).replace(/ /g, ' &nbsp')">
+                >
+                  <span
+                    :style="{
+                      position: 'absolute',
+                      top: GDeviceData.vmsData['top'] + 'px',
+                      left: GDeviceData.vmsData['left'] + 'px',
+                    }"
+                    style="line-height: 1"
+                    v-html="
+                      GDeviceData.vmsData['content']
+                        .replace(/\n|\r\n/g, '<br>')
+                        .replace(/ /g, ' &nbsp')
+                    "
+                  >
                   </span>
                 </div>
               </div>
             </el-card>
           </el-col>
-          <el-col :span="24" v-if="boxName == '下发指令' || boxName == '执行文件' && GDeviceData.deviceList != undefined">
-            <p style="padding:15px;">{{boxName}}:</p>
-            <el-card v-show="GDeviceData && !GDeviceData.vmsData" shadow="always">
-              <div style="display: flex;align-items: center;">
-                <img v-for="(items,idx) in GDeviceData.deviceIconUrl" :key="idx"
+          <el-col
+            :span="24"
+            v-if="
+              boxName == '下发指令' ||
+              (boxName == '执行文件' && GDeviceData.deviceList != undefined)
+            "
+          >
+            <p style="padding: 15px">{{ boxName }}:</p>
+            <el-card
+              v-show="GDeviceData && !GDeviceData.vmsData"
+              shadow="always"
+            >
+              <div style="display: flex; align-items: center">
+                <img
+                  v-for="(items, idx) in GDeviceData.deviceIconUrl"
+                  :key="idx"
                   :src="items"
                 />
-                <p style="padding-left: 15px;">{{ GDeviceData.deviceState }}</p>
+                <p style="padding-left: 15px">{{ GDeviceData.deviceState }}</p>
               </div>
             </el-card>
           </el-col>
         </el-row>
       </div>
       <div slot="footer" class="dialog-footer">
-        <el-button v-show="buttonDisable" @click="changeIncHand" class="submitButton">执 行</el-button>
-        <el-button @click="cancelIssuedDialog" class="closeButton">取 消</el-button>
+        <el-button
+          v-show="buttonDisable"
+          @click="changeIncHand"
+          class="submitButton"
+          >执 行</el-button
+        >
+        <el-button @click="cancelIssuedDialog" class="closeButton"
+          >取 消</el-button
+        >
       </div>
     </el-dialog>
     <!-- 一键详情弹窗 -->
@@ -856,94 +975,146 @@
       :before-close="oneKeyHandleClose"
       :append-to-body="true"
       :close-on-click-modal="false"
-      >
+    >
       <div class="dialogStyleBox">
         <div class="dialogLine"></div>
         <div class="dialogCloseButton"></div>
       </div>
-      <div class="GDeviceBox" style="overflow-y:auto ;max-height:60vh">
+      <div class="GDeviceBox" style="overflow-y: auto; max-height: 60vh">
         <p class="empty-text" v-show="oneKeyList.length < 1">暂无匹配设备</p>
-        <div v-for="(item,index) in oneKeyList" :key="index" class="GDeviceCard">
-          <el-card >
-            <p style="padding-bottom:15px;">{{item.processName}}</p>
+        <div
+          v-for="(item, index) in oneKeyList"
+          :key="index"
+          class="GDeviceCard"
+        >
+          <el-card>
+            <p style="padding-bottom: 15px">{{ item.processName }}</p>
             <el-table
               v-show="oneKeyList.length >= 1"
               :data="item.deviceList"
-              style="width: 100%" 
-              class="phoneTable">
+              style="width: 100%"
+              class="phoneTable"
+            >
+              <el-table-column prop="eqName" label="设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="eqPile" label="设备桩号" align="center">
+              </el-table-column>
               <el-table-column
-                prop="eqName"
-                label="设备名称"
+                label="模板内容"
                 align="center"
-                >
+                v-if="item.deviceType == '16' || item.deviceType == '36'"
+              >
+                {{ item.vmsData["content"] }}
               </el-table-column>
               <el-table-column
-                prop="eqPile"
-                label="设备桩号"
+                label="下发指令"
                 align="center"
-                >
-              </el-table-column>
-              <el-table-column label="模板内容" align="center" v-if="item.deviceType == '16' || item.deviceType == '36'">
-                {{item.vmsData['content']}}
-              </el-table-column>
-              <el-table-column label="下发指令" align="center" v-if="item.deviceType != '22' && item.deviceType != '16' && item.deviceType != '36'">
-                {{item.deviceState}}
+                v-if="
+                  item.deviceType != '22' &&
+                  item.deviceType != '16' &&
+                  item.deviceType != '36'
+                "
+              >
+                {{ item.deviceState }}
               </el-table-column>
-              <el-table-column label="执行文件" align="center" v-if="item.deviceType == '22'">
-                {{item.lsData}}
+              <el-table-column
+                label="执行文件"
+                align="center"
+                v-if="item.deviceType == '22'"
+              >
+                {{ item.lsData }}
               </el-table-column>
               <el-table-column label="执行状态" align="center">
-                {{item.handleState == '0' ? '未执行':'已执行'}}
+                {{ item.handleState == "0" ? "未执行" : "已执行" }}
               </el-table-column>
             </el-table>
           </el-card>
-          <el-card >
+          <el-card>
             <!-- 情报板 -->
-            <p v-if="item.deviceType == '16' || item.deviceType == '36'" style="padding-bottom:15px;">执行模板:</p>
-            <div class="templateImg" v-if="item.deviceType == '16' || item.deviceType == '36'">
+            <p
+              v-if="item.deviceType == '16' || item.deviceType == '36'"
+              style="padding-bottom: 15px"
+            >
+              执行模板:
+            </p>
+            <div
+              class="templateImg"
+              v-if="item.deviceType == '16' || item.deviceType == '36'"
+            >
               <!-- <p>情报板执行模板</p> -->
               <el-card shadow="always">
-                <div style="display: flex;justify-content: flex-start;align-items: center;">
-                  <div :style="{
-                    'width':item.vmsData['width'] + 'px',
-                    'height':item.vmsData['height'] + 'px',
-                    'color':item.vmsData['font_color'],
-                    'font-size':item.vmsData['font_size'] + 'px',
-                    'font-family':item.vmsData['font_type'],
-                    'background-color':'#000',
-                    'position':'relative',
-                    }">
-                    <span :style="{
-                      'position':'absolute',
-                      'top':item.vmsData['top'] + 'px',
-                      'left':item.vmsData['left'] + 'px',
+                <div
+                  style="
+                    display: flex;
+                    justify-content: flex-start;
+                    align-items: center;
+                  "
+                >
+                  <div
+                    :style="{
+                      width: item.vmsData['width'] + 'px',
+                      height: item.vmsData['height'] + 'px',
+                      color: item.vmsData['font_color'],
+                      'font-size': item.vmsData['font_size'] + 'px',
+                      'font-family': item.vmsData['font_type'],
+                      'background-color': '#000',
+                      position: 'relative',
                     }"
-                    style="line-height:1"
-                     v-html="item.vmsData['content'].replace(
-                              /\n|\r\n/g,
-                              '<br>'
-                            ).replace(/ /g, ' &nbsp')">
+                  >
+                    <span
+                      :style="{
+                        position: 'absolute',
+                        top: item.vmsData['top'] + 'px',
+                        left: item.vmsData['left'] + 'px',
+                      }"
+                      style="line-height: 1"
+                      v-html="
+                        item.vmsData['content']
+                          .replace(/\n|\r\n/g, '<br>')
+                          .replace(/ /g, ' &nbsp')
+                      "
+                    >
                     </span>
                   </div>
                 </div>
               </el-card>
             </div>
             <!-- 广播 -->
-            <p v-if="item.deviceType == '22'" style="padding-bottom:15px;">执行文件:</p>
+            <p v-if="item.deviceType == '22'" style="padding-bottom: 15px">
+              执行文件:
+            </p>
             <div class="templateImg" v-if="item.deviceType == '22'">
               <el-card shadow="always" class="otherBox">
                 <img :src="item.deviceIconUrl" />
-                <p>{{item.deviceState}}</p>
+                <p>{{ item.deviceState }}</p>
               </el-card>
             </div>
             <!-- 其他设备 -->
-            <p v-if="item.deviceType != '16' && item.deviceType != '36' && item.deviceType != '22'" style="padding-bottom:15px;">执行状态:</p>
-            <div class="templateImg" v-if="item.deviceType != '16' && item.deviceType != '36' && item.deviceType != '22'">
+            <p
+              v-if="
+                item.deviceType != '16' &&
+                item.deviceType != '36' &&
+                item.deviceType != '22'
+              "
+              style="padding-bottom: 15px"
+            >
+              执行状态:
+            </p>
+            <div
+              class="templateImg"
+              v-if="
+                item.deviceType != '16' &&
+                item.deviceType != '36' &&
+                item.deviceType != '22'
+              "
+            >
               <el-card shadow="always" class="otherBox">
-                <img v-for="(items,idx) in item.deviceIconUrl" :key="idx"
-                     :src="items"
+                <img
+                  v-for="(items, idx) in item.deviceIconUrl"
+                  :key="idx"
+                  :src="items"
                 />
-                <p>{{item.deviceState}}</p>
+                <p>{{ item.deviceState }}</p>
               </el-card>
             </div>
           </el-card>
@@ -953,29 +1124,40 @@
         <el-button
           class="submitButton"
           v-show="yjShow == false"
-          @click="oneKeyExecute()">
+          @click="oneKeyExecute()"
+        >
           执 行
         </el-button>
-        <el-button @click="oneKeyDialogVisible = false" class="closeButton">取 消</el-button>
+        <el-button @click="oneKeyDialogVisible = false" class="closeButton"
+          >取 消</el-button
+        >
       </span>
     </el-dialog>
-      <!-- 巡检机器人 -->
-      <el-dialog
+    <!-- 巡检机器人 -->
+    <el-dialog
       class="robotDialog"
       :visible.sync="robotDialogVisible"
       width="770px"
       :close-on-click-modal="false"
-      >
-        <robot class="comClass robotHtmlBox" ></robot>
-        <img
-          @click="dialogClose"
-          src="../../../assets/cloudControl/closeIcon.png"
-          class="closeRobot"
-        />
-      </el-dialog>
-       
-    <jointControl ref = "jointControl" :show="visibleSync" :eqIdList="eqIdList"></jointControl>
-    <workBench class="workBenchBox" ref="workBenchRef" :robotPositon="robotPositon"/>
+    >
+      <robot class="comClass robotHtmlBox"></robot>
+      <img
+        @click="dialogClose"
+        src="../../../assets/cloudControl/closeIcon.png"
+        class="closeRobot"
+      />
+    </el-dialog>
+
+    <jointControl
+      ref="jointControl"
+      :show="visibleSync"
+      :eqIdList="eqIdList"
+    ></jointControl>
+    <workBench
+      class="workBenchBox"
+      ref="workBenchRef"
+      :robotPositon="robotPositon"
+    />
 
     <!-- </el-dialog> -->
   </div>
@@ -984,8 +1166,12 @@
 import robot from "@/views/workbench/config/components/robotManagement";
 import { intervalTime } from "../../../utils/index.js";
 import { mapState } from "vuex";
-import { getTunnels,getWorkStagingRobot,listTunnels1 } from "@/api/equipment/tunnel/api.js";
-import { laneImage,laneImage2 } from "../../../utils/configData.js";
+import {
+  getTunnels,
+  getWorkStagingRobot,
+  listTunnels1,
+} from "@/api/equipment/tunnel/api.js";
+import { laneImage, laneImage2 } from "../../../utils/configData.js";
 import { listType } from "@/api/equipment/type/api.js";
 import { getDeviceData } from "@/api/workbench/config.js";
 import { getEventCamera, getEntranceExitVideo } from "@/api/eventDialog/api.js";
@@ -1058,10 +1244,10 @@ export default {
   },
   data() {
     return {
-      robotTimer:null,
-      tunnelLang:0,
-      robotPositon:99,
-      workBenchProp:{},
+      robotTimer: null,
+      tunnelLang: 0,
+      robotPositon: 99,
+      workBenchProp: {},
       robotDialogVisible: false,
       clickEqType: "",
       yjShow: true,
@@ -1123,7 +1309,8 @@ export default {
       directionList: [],
       eventForm: {},
       timer: null,
-      laneUrlList: this.$cache.local.get("navigationBar") == '0'?laneImage:laneImage2,
+      laneUrlList:
+        this.$cache.local.get("navigationBar") == "0" ? laneImage : laneImage2,
       eqTypeStateList: null,
       // selectedIconList: [],
       backImg: "",
@@ -1189,11 +1376,11 @@ export default {
   },
   async created() {
     const loading = this.$loading({
-        lock: true,
-        text: "Loading",
-        spinner: "el-icon-loading",
-        background: "rgba(0, 0, 0, 0.7)",
-      });
+      lock: true,
+      text: "Loading",
+      spinner: "el-icon-loading",
+      background: "rgba(0, 0, 0, 0.7)",
+    });
     await this.getEqTypeStateIcon();
     // await this.getTunnelData();
     await this.getDispatchExecuted();
@@ -1235,13 +1422,13 @@ export default {
       // setTimeout(this.getLiPowerDevice, 0)
     }, 1000 * 5);
   },
-  beforeDestroy(){
+  beforeDestroy() {
     window.clearInterval(this.robotTimer);
     this.robotTimer = null;
   },
   methods: {
-    openWorkBench(){
-      this.$refs.workBenchRef.init(this.workBenchProp)
+    openWorkBench() {
+      this.$refs.workBenchRef.init(this.workBenchProp);
     },
     handleTouping() {
       this.$confirm("即将投屏, 是否继续?", "提示", {
@@ -1340,13 +1527,13 @@ export default {
     },
     getManagementDevice(item) {
       console.log(item);
-      console.log(this.$route.query.id,"aaaaa")
+      console.log(this.$route.query.id, "aaaaa");
       if (item.eqTypeId == 29) {
         this.robotDialogVisible = true;
-        if(item.eventState == "0"){
-          roBotDong(this.$route.query.id,item.id).then((res) => {
+        if (item.eventState == "0") {
+          roBotDong(this.$route.query.id, item.id).then((res) => {
             this.evtHandle();
-          })
+          });
         }
         return;
       }
@@ -1719,17 +1906,17 @@ export default {
         });
         this.$nextTick(() => {
           let heightBox = document.querySelectorAll(".heightBox > *");
-          let arr = []
-          
-          for( let i = 0;i<heightBox.length;i++){
-            let obj = {}
-            obj.incHandContentBox = 0
-            obj.classificationBox = 0
+          let arr = [];
+
+          for (let i = 0; i < heightBox.length; i++) {
+            let obj = {};
+            obj.incHandContentBox = 0;
+            obj.classificationBox = 0;
             obj.incHandContentBox = heightBox[i].offsetHeight;
-            obj.classificationBox = heightBox[i].firstChild.offsetHeight
-            arr.push(obj)
+            obj.classificationBox = heightBox[i].firstChild.offsetHeight;
+            arr.push(obj);
           }
-          for (let i=0;i< this.incHandList.length;i++) {
+          for (let i = 0; i < this.incHandList.length; i++) {
             for (let itm of this.incHandList[i].children) {
               if (itm.flowId == 18 && itm.eventState == "1") {
                 this.iconDisabled = true;
@@ -1737,15 +1924,17 @@ export default {
                 this.disabledRadio = true;
               }
             }
-            for(let j=0;j<arr.length;j++){
-              if(i == j){
-                this.incHandList[i].lineHeight = (arr[j].incHandContentBox - arr[j].classificationBox) / 2
-                this.incHandList[i].circlePosition = "-" + (this.incHandList[i].lineHeight + 10) + "px"
+            for (let j = 0; j < arr.length; j++) {
+              if (i == j) {
+                this.incHandList[i].lineHeight =
+                  (arr[j].incHandContentBox - arr[j].classificationBox) / 2;
+                this.incHandList[i].circlePosition =
+                  "-" + (this.incHandList[i].lineHeight + 10) + "px";
               }
             }
           }
         });
-        
+
         // console.log(this.incHandList,"this.incHandListthis.incHandList")
         this.getEventInfo();
         this.$forceUpdate();
@@ -1763,27 +1952,26 @@ export default {
     },
     // 事件详情
     async getListEvent() {
-      
       if (this.$route.query.id) {
         const param = {
           id: this.$route.query.id,
         };
         await listEvent(param).then((response) => {
-          console.log(response.rows,"事件详情")
+          console.log(response.rows, "事件详情");
           this.workBenchProp = {
-            tunnelStationName:response.rows[0].tunnelStationName,
-            tunnelName:response.rows[0].tunnelName,
-            tunnelId:response.rows[0].tunnelId
-          }
-          if(response.rows[0].tunnelId == "JQ-JiNan-WenZuBei-MJY"){
-            listTunnels1().then((res)=>{
-              for(let item of res.rows){
-                if(item.tunnelId == "JQ-JiNan-WenZuBei-MJY"){
-                this.tunnelLang =
-                  Number(item.endPileNum) - Number(item.startPileNum) + 10;
+            tunnelStationName: response.rows[0].tunnelStationName,
+            tunnelName: response.rows[0].tunnelName,
+            tunnelId: response.rows[0].tunnelId,
+          };
+          if (response.rows[0].tunnelId == "JQ-JiNan-WenZuBei-MJY") {
+            listTunnels1().then((res) => {
+              for (let item of res.rows) {
+                if (item.tunnelId == "JQ-JiNan-WenZuBei-MJY") {
+                  this.tunnelLang =
+                    Number(item.endPileNum) - Number(item.startPileNum) + 10;
                 }
               }
-            })
+            });
             this.robotTimer = setInterval(() => {
               setTimeout(this.getRobot, 0);
             }, 1000 * 5);
@@ -1806,16 +1994,14 @@ export default {
         });
       }
     },
-    async getRobot(){
+    async getRobot() {
       const param = {
         deviceId: 7,
       };
       await getWorkStagingRobot(param).then((res) => {
         // console.log(res, "机器人");
-        this.robotPositon = (
-          (Number(res.data.position) / this.tunnelLang) *
-          100
-        ).toFixed(2) - 1;
+        this.robotPositon =
+          ((Number(res.data.position) / this.tunnelLang) * 100).toFixed(2) - 1;
       });
     },
     // 左上角视频
@@ -2299,14 +2485,14 @@ export default {
       height: 100%;
     }
   }
-  .workBenchButton{
+  .workBenchButton {
     position: fixed;
     top: calc(15% + 6px);
     right: 34%;
 
     // right: 22%;
     cursor: pointer;
-    >img{
+    > img {
       width: 47px;
       height: 46px;
     }

From 64425abbf2c41ba056ea67871e2ace855df48bec Mon Sep 17 00:00:00 2001
From: zhangzhang <1747194829@qq.com>
Date: Wed, 6 Mar 2024 16:37:32 +0800
Subject: [PATCH 04/15] =?UTF-8?q?=E6=9B=B4=E6=94=B9bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ruoyi-ui/src/main.js                          | 184 +++++++++---------
 .../components/InputSearch/index.vue          |   6 +-
 2 files changed, 101 insertions(+), 89 deletions(-)

diff --git a/ruoyi-ui/src/main.js b/ruoyi-ui/src/main.js
index cdf37ddc..ec0e4a26 100644
--- a/ruoyi-ui/src/main.js
+++ b/ruoyi-ui/src/main.js
@@ -1,83 +1,91 @@
-import Vue from 'vue'
-import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
-import Cookies from 'js-cookie'
-
-import Element from 'element-ui'
-import './assets/styles/element-variables.scss'
-import './views/iot/css/iot.css'
-import '@/assets/styles/index.scss' // global css
-import '@/assets/styles/ruoyi.scss' // ruoyi css
-import App from './App'
-import store from './store'
-import router from './router/routerCreater'
-import directive from './directive' //directive
-import plugins from './plugins' // plugins
-import './assets/icon/iconfont.css' // 阿里巴巴icon
-import './assets/icons' // icon
-import './permission' // permission control
-import { Socket } from './utils/socket'
+import Vue from "vue";
+import CollapseTransition from "element-ui/lib/transitions/collapse-transition";
+import Cookies from "js-cookie";
+
+import Element from "element-ui";
+import clickoutside from "element-ui/src/utils/clickoutside";
+import "./assets/styles/element-variables.scss";
+import "./views/iot/css/iot.css";
+import "@/assets/styles/index.scss"; // global css
+import "@/assets/styles/ruoyi.scss"; // ruoyi css
+import App from "./App";
+import store from "./store";
+import router from "./router/routerCreater";
+import directive from "./directive"; //directive
+import plugins from "./plugins"; // plugins
+import "./assets/icon/iconfont.css"; // 阿里巴巴icon
+import "./assets/icons"; // icon
+import "./permission"; // permission control
+import { Socket } from "./utils/socket";
 import { getDicts } from "@/api/system/dict/data";
 import { getConfigKey } from "@/api/system/config";
-import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree, numberMul } from "@/utils/ruoyi";
+import {
+  parseTime,
+  resetForm,
+  addDateRange,
+  selectDictLabel,
+  selectDictLabels,
+  handleTree,
+  numberMul,
+} from "@/utils/ruoyi";
 // 分页组件
 import Pagination from "@/components/Pagination";
 // 自定义表格工具组件
-import RightToolbar from "@/components/RightToolbar"
+import RightToolbar from "@/components/RightToolbar";
 // 富文本组件
-import Editor from "@/components/Editor"
+import Editor from "@/components/Editor";
 // 文件上传组件
-import FileUpload from "@/components/FileUpload"
+import FileUpload from "@/components/FileUpload";
 // 图片上传组件
-import ImageUpload from "@/components/ImageUpload"
+import ImageUpload from "@/components/ImageUpload";
 // 字典标签组件
-import DictTag from '@/components/DictTag'
+import DictTag from "@/components/DictTag";
 // 头部标签组件
-import VueMeta from 'vue-meta'
+import VueMeta from "vue-meta";
 // 字典数据组件
-import DictData from '@/components/DictData'
+import DictData from "@/components/DictData";
 // 无缝滚动组件
-import VueSeamlessScroll from 'vue-seamless-scroll'
-import VueAwesomeSwiper from 'vue-awesome-swiper'
-import 'swiper/css/swiper.css'
+import VueSeamlessScroll from "vue-seamless-scroll";
+import VueAwesomeSwiper from "vue-awesome-swiper";
+import "swiper/css/swiper.css";
 //el-table无线滚动
 
 // 事件弹窗组件
-import eventDialog from '@/components/eventDialogTable/eventDialog.vue'
-import eventDialogTable from '@/components/eventDialogTable'
-import evtDialogOneThing from '@/components/eventDialogTable/evtDialogOneThing.vue'
-import evtDialogVideo from '@/components/eventDialogTable/video.vue'
+import eventDialog from "@/components/eventDialogTable/eventDialog.vue";
+import eventDialogTable from "@/components/eventDialogTable";
+import evtDialogOneThing from "@/components/eventDialogTable/evtDialogOneThing.vue";
+import evtDialogVideo from "@/components/eventDialogTable/video.vue";
 
 // 大屏适配
-import dataV from '@jiaminghi/data-view'
-
+import dataV from "@jiaminghi/data-view";
 
 // 字典标签组件
 // import reproductionImage from '@/components/reproductionImage'
 // jQuery
-import $ from 'jquery'
-import preventClick from './api/clickOnceAtime'
+import $ from "jquery";
+import preventClick from "./api/clickOnceAtime";
 // gisMap
 // import gisMap from 'gis-map-tunnel'
 // import gisMap from 'gis-map-admin'
-import config from '../public/config'
+import config from "../public/config";
 
-import request from '../public/config'
-import moment from 'moment'
-window.moment = moment
-import dayjs from "dayjs"
+import request from "../public/config";
+import moment from "moment";
+window.moment = moment;
+import dayjs from "dayjs";
 
 //定义全局过滤器
-Vue.filter('dateformat', function (dataStr, pattern = 'YYY-MM-DD HH:mm:ss') {
+Vue.filter("dateformat", function (dataStr, pattern = "YYY-MM-DD HH:mm:ss") {
   if (dataStr === null || dataStr === "") {
     return "";
   }
-  return moment(dataStr).format(pattern)
+  return moment(dataStr).format(pattern);
   //filter两个参数  第一个是函数名，第二个是时间格式化处理的函数
   //(函数里面的参数 第一个是传递的数据，第二个是需要转换的时间格式)
-})
+});
 
 window.IS_TESTING = false;
-if (process.env.NODE_ENV == 'development'){
+if (process.env.NODE_ENV == "development") {
   window.IS_TESTING = false;
 }
 
@@ -86,47 +94,47 @@ Vue.component("Empty", Empty);
 
 // 全局方法挂载
 Vue.prototype.dayjs = dayjs;
-Vue.prototype.getDicts = getDicts
-Vue.prototype.getConfigKey = getConfigKey
-Vue.prototype.parseTime = parseTime
-Vue.prototype.resetForm = resetForm
-Vue.prototype.addDateRange = addDateRange
-Vue.prototype.selectDictLabel = selectDictLabel
-Vue.prototype.selectDictLabels = selectDictLabels
-Vue.prototype.handleTree = handleTree
-Vue.prototype.socket = Socket
-Vue.prototype.numberMul = numberMul
-
-// gis 
-Vue.prototype.$GlobalConfig = config.GlobalConfig
-
-Vue.use(preventClick)
-Vue.use(VueAwesomeSwiper)
-Vue.use(dataV)
+Vue.prototype.getDicts = getDicts;
+Vue.prototype.getConfigKey = getConfigKey;
+Vue.prototype.parseTime = parseTime;
+Vue.prototype.resetForm = resetForm;
+Vue.prototype.addDateRange = addDateRange;
+Vue.prototype.selectDictLabel = selectDictLabel;
+Vue.prototype.selectDictLabels = selectDictLabels;
+Vue.prototype.handleTree = handleTree;
+Vue.prototype.socket = Socket;
+Vue.prototype.numberMul = numberMul;
+
+// gis
+Vue.prototype.$GlobalConfig = config.GlobalConfig;
+
+Vue.use(preventClick);
+Vue.use(VueAwesomeSwiper);
+Vue.use(dataV);
 // 全局组件挂载
 
-Vue.component('DictTag', DictTag)
-Vue.component('Pagination', Pagination)
-Vue.component('RightToolbar', RightToolbar)
-Vue.component('Editor', Editor)
-Vue.component('FileUpload', FileUpload)
-Vue.component('ImageUpload', ImageUpload)
-Vue.component('VueSeamlessScroll', VueSeamlessScroll)
-Vue.component('eventDialog', eventDialog)
-Vue.component('eventDialogTable', eventDialogTable)
-Vue.component('evtDialogOneThing', evtDialogOneThing)
-Vue.component('evtDialogVideo', evtDialogVideo)
-
-
-
-Vue.component(CollapseTransition.name, CollapseTransition)
+Vue.component("DictTag", DictTag);
+Vue.component("Pagination", Pagination);
+Vue.component("RightToolbar", RightToolbar);
+Vue.component("Editor", Editor);
+Vue.component("FileUpload", FileUpload);
+Vue.component("ImageUpload", ImageUpload);
+Vue.component("VueSeamlessScroll", VueSeamlessScroll);
+Vue.component("eventDialog", eventDialog);
+Vue.component("eventDialogTable", eventDialogTable);
+Vue.component("evtDialogOneThing", evtDialogOneThing);
+Vue.component("evtDialogVideo", evtDialogVideo);
+
+Vue.component(CollapseTransition.name, CollapseTransition);
 // Vue.component('reproductionImage', reproductionImage)
 
-Vue.use(directive)
-Vue.use(plugins)
+Vue.directive("clickoutside", clickoutside);
+
+Vue.use(directive);
+Vue.use(plugins);
 // Vue.use(gisMap)
-Vue.use(VueMeta)
-DictData.install()
+Vue.use(VueMeta);
+DictData.install();
 /**
  * If you don't want to use mock-server
  * you want to use MockJs for mock api
@@ -137,14 +145,14 @@ DictData.install()
  */
 
 Vue.use(Element, {
-  size: Cookies.get('size') || 'medium' // set element-ui default size
-})
+  size: Cookies.get("size") || "medium", // set element-ui default size
+});
 
-Vue.config.productionTip = false
+Vue.config.productionTip = false;
 
 new Vue({
-  el: '#app',
+  el: "#app",
   router,
   store,
-  render: h => h(App)
-})
\ No newline at end of file
+  render: (h) => h(App),
+});
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/InputSearch/index.vue b/ruoyi-ui/src/views/JiHeExpressway/components/InputSearch/index.vue
index afbe249e..7ddef15d 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/components/InputSearch/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/InputSearch/index.vue
@@ -10,6 +10,7 @@
       v-model="visible"
       @show="handleShow"
       style="width: 100%"
+      v-clickoutside="handlerClose"
     >
       <div
         class="InputSearch input"
@@ -136,7 +137,7 @@ export default {
       this.visible = true;
       this.$refs.FormConfigRef?.reset();
       this.$refs.FormConfigRef.$refs.ElFormRef.resetFields();
-      // this.$refs.PopoverRef.doClose();
+      this.$refs.PopoverRef.doClose();
 
       this.$emit(
         "handleSearch",
@@ -173,6 +174,9 @@ export default {
           });
       }
     },
+    handlerClose() {
+      this.visible = false;
+    },
   },
 };
 </script>

From 54a2bc2ef35e7c103da614618f83b4b522b9ce6b Mon Sep 17 00:00:00 2001
From: zhoule <zz221011@163.com>
Date: Wed, 6 Mar 2024 16:42:07 +0800
Subject: [PATCH 05/15] bug

---
 .../JiHeExpressway/components/Dialog/index.vue   |  2 +-
 .../RoadAndEvents/utils/buttonEvent.js           |  2 +-
 .../components/RoadAndEvents/utils/httpList.js   |  4 ++--
 .../commonPhrases/index.vue                      |  5 +++--
 .../disposalProcess/index.vue                    |  5 +++--
 .../control/event/event/FormEvent/index.vue      | 16 ++++++++--------
 .../components/eventQuery/index.vue              |  8 ++++----
 7 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/Dialog/index.vue b/ruoyi-ui/src/views/JiHeExpressway/components/Dialog/index.vue
index d96d1c7e..5c086f66 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/components/Dialog/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/Dialog/index.vue
@@ -165,7 +165,7 @@ export default {
 
   .dialog-content {
     padding: 9px 21px 27px 21px;
-    max-height: 90vh;
+    max-height: 75vh;
     overflow-y: auto;
   }
 
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/buttonEvent.js b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/buttonEvent.js
index eaab0514..be21983a 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/buttonEvent.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/buttonEvent.js
@@ -230,7 +230,7 @@ export const eventMap = {
         iconClass: "el-icon-loading",
       });
     }
-    const data = await getPerceiveEventList()
+    const data = await getPerceiveEventList({warningState: 1})
       .then(async (data) => {
         await delay(600);
         return data;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/httpList.js b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/httpList.js
index 16dc309f..0001db2e 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/httpList.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/httpList.js
@@ -297,12 +297,12 @@ export function getEventTopicList(eventType) {
  * 感知事件根据类型获取
  * @param {number} eventType
  */
-export function getPerceiveEventList() {
+export function getPerceiveEventList(data = {}) {
   return new Promise((resolve, reject) => {
     request({
       url: `/perceivedEvents/warning/perceivedEventsList`,
       method: "POST",
-      data: {},
+      data: {...data},
     })
       .then(({ code, rows }) => {
         if (code != 200) {
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/emergencyProcessManagement/commonPhrases/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/emergencyProcessManagement/commonPhrases/index.vue
index f9a39d87..80265e13 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/emergencyProcessManagement/commonPhrases/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/emergencyProcessManagement/commonPhrases/index.vue
@@ -39,9 +39,9 @@
 
         </div>
         <template #footer>
-            <Button style="padding: 0 24px;" @click.native="submitTable">确认</Button>
             <Button :style="{ backgroundColor: '#C9C9C9', padding: '0 24px' }" @click.native="modelVisible = false">
                 取消</Button>
+            <Button style="padding: 0 24px;" @click.native="submitTable">确认</Button>
         </template>
     </Dialog>
 </template>
@@ -235,7 +235,8 @@ export default {
     display: flex;
     gap: 9px;
     width: 836px;
-    height: 768px;
+    // height: 768px;
+    min-height: 500px;
     margin-top: 20px;
     flex-direction: column;
 
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/emergencyProcessManagement/disposalProcess/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/emergencyProcessManagement/disposalProcess/index.vue
index 8ac44053..2af67d2d 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/emergencyProcessManagement/disposalProcess/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/emergencyProcessManagement/disposalProcess/index.vue
@@ -47,9 +47,9 @@
 
         </div>
         <template #footer>
-            <Button style="padding: 0 24px;" @click.native="submitTable">确认</Button>
             <Button :style="{ backgroundColor: '#C9C9C9', padding: '0 24px' }" @click.native="modelVisible = false">
                 取消</Button>
+            <Button style="padding: 0 24px;" @click.native="submitTable">确认</Button>
         </template>
     </Dialog>
 </template>
@@ -276,7 +276,8 @@ export default {
     display: flex;
     gap: 9px;
     width: 836px;
-    height: 768px;
+    min-height: 500px;
+    // height: 768px;
     flex-direction: column;
 
     .video-pic {
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/index.vue
index aeca27f2..7075db0e 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/index.vue
@@ -8,13 +8,13 @@
       <Transition name="fade">
         <Form class="form" ref="FormConfigRef" :formList="formConfig.list" v-bind="getFormOptions" labelWidth="120px" />
       </Transition>
-
-      <div class="footer">
-        <Button style="padding:0 24px;" @click.native="handleSubmit" :loading="submitting">保存</Button>
-        <Button style="background: #C9C9C9;padding:0 24px;"
-          @click.native="modelVisible = false, submitting = false">取消</Button>
-      </div>
     </div>
+
+    <template #footer>
+      <Button style="background: #C9C9C9;padding:0 24px;"
+        @click.native="modelVisible = false, submitting = false">取消</Button>
+      <Button style="padding:0 24px;" @click.native="handleSubmit" :loading="submitting">保存</Button>
+    </template>
   </Dialog>
 </template>
 
@@ -195,7 +195,7 @@ export default {
           Message.error("提交失败");
         }).finally(() => {
           this.submitting = false;
-          this.$emit('queryData',true);
+          this.$emit('queryData', true);
         })
 
       })
@@ -219,7 +219,7 @@ export default {
 .EventDetailDialog {
   gap: 9px;
   width: 1050px;
-  height: 810px;
+  // height: 810px;
   display: flex;
   flex-direction: column;
 
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue
index f952b135..2a359adb 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue
@@ -151,8 +151,8 @@ export default {
       dateTime: "2024",
       direction: "1",
       dataList: [],
-      selectIndex: 2,
-      selectId: 2,
+      selectIndex: 1,
+      selectId: 1,
       reset: false,
       type: "year",
       chart1List: [],
@@ -216,8 +216,8 @@ export default {
       this.direction = "1";
       this.type = "year";
       this.dateTime = "2024";
-      this.selectId = 2;
-      this.selectIndex = 2;
+      this.selectId = 1;
+      this.selectIndex = 1;
       this.reset = true;
       this.searchQuery();
     },

From 944f14f8f8131d17255551cdaa9df4a9d20ec3d7 Mon Sep 17 00:00:00 2001
From: hui <770260999@qq.com>
Date: Thu, 7 Mar 2024 14:34:57 +0800
Subject: [PATCH 06/15] =?UTF-8?q?=E6=94=B9bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ruoyi-ui/src/main.js                          |  3 --
 .../components/InputSearch/index.vue          | 39 +++++++++++++------
 .../SmartDevice/components/DeviceParams.vue   |  4 +-
 .../pages/service/sensitive/index.vue         |  5 ---
 4 files changed, 30 insertions(+), 21 deletions(-)

diff --git a/ruoyi-ui/src/main.js b/ruoyi-ui/src/main.js
index ec0e4a26..937504c4 100644
--- a/ruoyi-ui/src/main.js
+++ b/ruoyi-ui/src/main.js
@@ -3,7 +3,6 @@ import CollapseTransition from "element-ui/lib/transitions/collapse-transition";
 import Cookies from "js-cookie";
 
 import Element from "element-ui";
-import clickoutside from "element-ui/src/utils/clickoutside";
 import "./assets/styles/element-variables.scss";
 import "./views/iot/css/iot.css";
 import "@/assets/styles/index.scss"; // global css
@@ -128,8 +127,6 @@ Vue.component("evtDialogVideo", evtDialogVideo);
 Vue.component(CollapseTransition.name, CollapseTransition);
 // Vue.component('reproductionImage', reproductionImage)
 
-Vue.directive("clickoutside", clickoutside);
-
 Vue.use(directive);
 Vue.use(plugins);
 // Vue.use(gisMap)
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/InputSearch/index.vue b/ruoyi-ui/src/views/JiHeExpressway/components/InputSearch/index.vue
index 7ddef15d..52426051 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/components/InputSearch/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/InputSearch/index.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="from-content" style="width: 100%">
+    <!-- <div ref="mask" style="position: fixed; z-index: 9999999; left: 0; top:0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.5);" @click.prevent="onClickMask" v-if="visible"></div> -->
     <ElPopover
       ref="PopoverRef"
       placement="bottom"
@@ -10,7 +11,6 @@
       v-model="visible"
       @show="handleShow"
       style="width: 100%"
-      v-clickoutside="handlerClose"
     >
       <div
         class="InputSearch input"
@@ -22,19 +22,20 @@
           style="width: 100%"
           v-model="value"
           :placeholder="placeholder"
+          clearable
           @change="handleSearch"
-        ></ElInput>
-        <img src="./search.svg" v-show="!disable" @click="visible = !visible" />
+          ></ElInput>
+        <img src="./search.svg" v-show="!disable" @click="onOpenPop" />
       </div>
       <div
         class="InputSearch"
         v-else
         slot="reference"
         ref="ReferenceInputRef"
-        @click="visible = !visible"
+        @click="onOpenPop"
       >
         <span>{{ placeholder }}</span>
-        <img src="./search.svg" />
+        <img src="./search.svg"/>
       </div>
 
       <div style="width: 100%; max-height: 360px" v-show="visible">
@@ -105,6 +106,7 @@ export default {
   },
   data() {
     return {
+      isClickedBtn: false,
       visible: false,
       types: this.type,
       value: "",
@@ -126,18 +128,36 @@ export default {
       };
     },
   },
+  mounted(){
+    // document.getElementById("app")
+    document.addEventListener("click" , ()=>{
+      if(!this.isClickedBtn){
+        setTimeout(() => {
+          this.visible = false;
+        }, 100)
+      }
+      this.isClickedBtn = false;
+    } , false)
+  },
 
   methods: {
+    onOpenPop(){
+        this.isClickedBtn = true;
+        this.visible = !this.visible;
+    },
+    onClickMask(){
+      this.visible = false;
+    },
     handleShow() {
       if (this.width) return;
 
       this.width = this.$refs.ReferenceInputRef.getBoundingClientRect().width;
     },
     handleResetForm() {
-      this.visible = true;
+      // this.visible = true;
       this.$refs.FormConfigRef?.reset();
       this.$refs.FormConfigRef.$refs.ElFormRef.resetFields();
-      this.$refs.PopoverRef.doClose();
+      // this.$refs.PopoverRef.doClose();
 
       this.$emit(
         "handleSearch",
@@ -173,10 +193,7 @@ export default {
             console.log("catch");
           });
       }
-    },
-    handlerClose() {
-      this.visible = false;
-    },
+    }
   },
 };
 </script>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/components/DeviceParams.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/components/DeviceParams.vue
index e246f8c9..81ecb8ba 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/components/DeviceParams.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/components/DeviceParams.vue
@@ -129,8 +129,8 @@ export default {
   methods: {
     async handleSwitcherChange(value, data) {
       data.state = value;
-
-      const isContinue = await confirm({ message: "是否要删除该辖段信息?" })
+      let op = ["关闭", "开启"][+data.state];
+      const isContinue = await confirm({ message: `${op}该支路?` })
         .catch(() => {
           data.state = !value;
         });
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/sensitive/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/service/sensitive/index.vue
index ac03b87e..8cbb6797 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/service/sensitive/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/sensitive/index.vue
@@ -32,7 +32,6 @@
         type="input"
         params="word"
         :disable="true"
-        :placeholder="searchText"
         @handleSearch="handleSearch"
       />
     </div>
@@ -140,10 +139,6 @@ export default {
           key: "word",
           label: "关键词",
         },
-        {
-          key: "id",
-          label: "id",
-        },
         {
           key: "createTime",
           label: "创建时间",

From 01fbfbc608274c305c226a41f985754ee5eaf299 Mon Sep 17 00:00:00 2001
From: zhoule <zz221011@163.com>
Date: Thu, 7 Mar 2024 16:50:51 +0800
Subject: [PATCH 07/15] resize

---
 .../views/JiHeExpressway/components/Adaptation.vue   | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/Adaptation.vue b/ruoyi-ui/src/views/JiHeExpressway/components/Adaptation.vue
index 8d34a74d..07ace08c 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/components/Adaptation.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/Adaptation.vue
@@ -51,8 +51,8 @@ export default {
       return this.scale
     }
   },
-  watch:{
-    headerHeight(){
+  watch: {
+    headerHeight() {
     }
   },
   methods: {
@@ -101,10 +101,10 @@ export default {
   mounted() {
     this.initScale();
 
-    // window.addEventListener(
-    //   "resize",
-    //   _.debounce(this.initScale.bind(this), 360)
-    // );
+    window.addEventListener(
+      "resize",
+      _.debounce(this.initScale.bind(this), 360)
+    );
   },
 };
 </script>

From 7c71190e8f027ccf5eee822852c86f572ebb48a1 Mon Sep 17 00:00:00 2001
From: zhoule <zz221011@163.com>
Date: Fri, 8 Mar 2024 13:53:06 +0800
Subject: [PATCH 08/15] =?UTF-8?q?=E9=9B=B7=E8=BE=BE=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../trafficIndicators/assets/chartsRadar.js   | 28 +++++++++++++------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/chartsRadar.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/chartsRadar.js
index 50857170..92916f39 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/chartsRadar.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/chartsRadar.js
@@ -1,14 +1,22 @@
-import * as echarts from "echarts";
+window.radarData = {'交通特征':9,'拥挤度':8,'饱和度':5,}
+
 let options = {
   legend: {
     show: false,
   },
+  tooltip: {
+    trigger: "item",
+    formatter: function (params, ticket, callback) {
+      let data = params.data;
+      return `交通特征: ${data.value[0]}<br>拥挤度: ${data.value[1]}<br>饱和度: ${data.value[2]}`;
+    },
+  },
   radar: [
     {
       indicator: [
-        { text: "Indicator1" },
-        { text: "Indicator2" },
-        { text: "Indicator3" },
+        { name: "交通特征",max: 10 }, 
+        { name: "拥挤度" ,max: 10},
+        { name: "饱和度",max: 10 }, 
       ],
       center: ["50%", "55%"],
       radius: 70,
@@ -16,7 +24,9 @@ let options = {
       splitNumber: 4,
       shape: "circle",
       axisName: {
-        formatter: "{value}",
+        formatter: function (value) {
+          return value + ' '+ (radarData[value] / 10 * 100) + "%";
+      },
         color: "#428BD4",
       },
       splitArea: {
@@ -45,8 +55,8 @@ let options = {
       },
       data: [
         {
-          value: [1, 5, 1],
-          name: "Data B",
+          value: [9,8,5],
+          name: "月指标",
           areaStyle: {
             color: {
               type: "linear",
@@ -56,12 +66,12 @@ let options = {
               y2: 1,
               colorStops: [
                 {
-                  offset: 0.1,
+                  offset: 0,
                   color: "#DC6A00", // 0% 处的颜色
                 },
                 {
                   offset: 0.5,
-                  color: "#5D887C", // 100% 处的颜色
+                  color: "#5D887C", // 50% 处的颜色
                 },
                 {
                   offset: 1,

From fe9107d78ae0a6590b2782e48d46a98677a8286c Mon Sep 17 00:00:00 2001
From: zhangzhang <1747194829@qq.com>
Date: Fri, 8 Mar 2024 14:52:27 +0800
Subject: [PATCH 09/15] =?UTF-8?q?=E6=9B=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Descriptions.vue               | 94 +++++++++++--------
 .../components/Dialog/index.vue               | 79 ++++++++++------
 .../Dialogs/FatigueWakesUp/index.vue          | 70 ++++++++------
 .../StatsDialogVisible/index.vue              |  5 +-
 .../statisticalAnalysis/data.js               |  2 +
 .../statisticalAnalysis/index.vue             | 18 ++--
 .../TemperatureTrend/assets/charts.js         | 16 ++--
 .../visibilityTrends/assets/charts.js         | 16 ++--
 .../components/flowstate/assets/charts.js     |  6 +-
 .../components/flowstate/index.vue            | 39 ++++----
 .../pages/perception/trafficFlow/index.vue    |  1 -
 .../pages/service/sensitive/index.vue         |  2 +-
 12 files changed, 200 insertions(+), 148 deletions(-)

diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/Descriptions.vue b/ruoyi-ui/src/views/JiHeExpressway/components/Descriptions.vue
index f8730268..16d177eb 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/components/Descriptions.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/Descriptions.vue
@@ -1,20 +1,37 @@
 <template>
-  <div class='Descriptions keep-ratio' origin="left" :style="getStyle()">
-    <div class="item" v-for="(item, index) in getResolveList" :key="`${item.key || item.label}${index}`"
-      :style="[gridStyle(item, index), transformStyle(itemStyle)]">
-      <div class="text title" :style="{
-        ...transformStyle(titleStyle),
-        width: labelWidth
-      }">
+  <div class="Descriptions keep-ratio" origin="left" :style="getStyle()">
+    <div
+      class="item"
+      v-for="(item, index) in getResolveList"
+      :key="`${item.key || item.label}${index}`"
+      :style="[gridStyle(item, index), transformStyle(itemStyle)]"
+    >
+      <div
+        class="text title"
+        :style="{
+          ...transformStyle(titleStyle),
+          width: labelWidth,
+        }"
+      >
         <p>
           <slot :name="`title-${item.key || item.label}`" :data="item">
-            {{ item.label || '-' }}
+            {{ item.label || "-" }}
           </slot>
-        </p>:
+        </p>
+        :
       </div>
-      <ContentText :style="transformStyle(titleStyle)" class="content text" :data="data" :_config="item">
+      <ContentText
+        :style="transformStyle(titleStyle)"
+        class="content text"
+        :data="data"
+        :_config="item"
+      >
         <template #default="{ value }">
-          <slot :name="`content-${item.key || item.label}`" :value="value" :data="item">
+          <slot
+            :name="`content-${item.key || item.label}`"
+            :value="value"
+            :data="item"
+          >
             {{ value }}
           </slot>
         </template>
@@ -24,18 +41,18 @@
 </template>
 
 <script>
-import { getContent } from "@screen/components/FormConfig/utils/index.js"
-import ContentText from "@screen/components/FormConfig/components/Text.vue"
+import { getContent } from "@screen/components/FormConfig/utils/index.js";
+import ContentText from "@screen/components/FormConfig/components/Text.vue";
 
 export default {
-  name: 'Descriptions',
+  name: "Descriptions",
   components: {
-    ContentText
+    ContentText,
   },
   props: {
     data: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
     },
     /**
      * {
@@ -47,74 +64,73 @@ export default {
      */
     list: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     column: {
       type: String,
-      default: "2"
+      default: "2",
     },
     labelWidth: String,
     titleStyle: {
       type: [String, Object],
-      default: null
+      default: null,
     },
     contentStyle: {
       type: [String, Object],
-      default: null
+      default: null,
     },
     itemStyle: {
       type: [String, Object],
-      default: null
-    }
+      default: null,
+    },
   },
   computed: {
     gridStyle() {
       return (item, index) => ({
         gridRow: `span ${item.gridRow || 1}`,
         gridColumn: `span ${item.gridColumn || 1}`,
-      })
+      });
     },
     getText() {
-      return (item) => getContent(this.data, item)
+      return (item) => getContent(this.data, item);
     },
     getResolveList() {
       return this.list.reduce((prev, data) => {
-
-        if (typeof data.visible === 'function') {
+        if (typeof data.visible === "function") {
           if (!data.visible(data)) return prev;
         }
 
         prev.push(data);
 
-        return prev
-      }, [])
-    }
+        return prev;
+      }, []);
+    },
   },
   methods: {
     getStyle() {
       return {
         gridTemplateColumns: `repeat(${this.column}, 1fr)`,
-      }
+      };
     },
     getComponent(type) {
-      return `Form${type.replace(/^[a-z]/, word => word.toUpperCase())}`
+      return `Form${type.replace(/^[a-z]/, (word) => word.toUpperCase())}`;
     },
     transformStyle(style) {
-      if (typeof style != 'string') return style;
+      if (typeof style != "string") return style;
 
-      return style.split(';').reduce((prev, cur) => {
+      return style.split(";").reduce((prev, cur) => {
         const [key, value] = cur.split(":");
 
         prev[key] = value;
 
         return prev;
       }, {});
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .Descriptions {
   display: grid;
   gap: 9px;
@@ -123,7 +139,7 @@ export default {
     font-size: 15px;
     font-family: PingFang SC, PingFang SC;
     font-weight: 400;
-    color: #FFF;
+    color: #fff;
     line-height: 18px;
     gap: 3px;
     display: flex;
@@ -135,7 +151,7 @@ export default {
     gap: 6px;
 
     .title {
-      color: #3DE8FF;
+      color: #3de8ff;
 
       p {
         width: 100%;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/Dialog/index.vue b/ruoyi-ui/src/views/JiHeExpressway/components/Dialog/index.vue
index 5c086f66..847218ed 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/components/Dialog/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/Dialog/index.vue
@@ -1,22 +1,38 @@
 <template>
   <Teleport>
     <Transition name="fade">
-      <div :class="['mask-layer', { 'none-mask': noneMask }]" v-if="modelVisible">
-        <BackgroundClip class='dialog'
+      <div
+        :class="['mask-layer', { 'none-mask': noneMask }]"
+        v-if="modelVisible"
+      >
+        <BackgroundClip
+          class="dialog"
           clipPath="polygon(calc(100% - var(--clip-width)) 0, 100% var(--clip-width), 100% 100%, var(--clip-width) 100%, 0 calc(100% - var(--clip-width)), 0 0)"
           borderColor="linear-gradient(180deg, rgba(78, 174, 204, .9), rgba(78, 174, 204, 0))"
-          bgColor="linear-gradient(180deg, rgba(14, 69, 92, 0.9) 0%, rgba(20, 89, 119, 0.9) 100%)" ref="DialogContentRef">
+          bgColor="linear-gradient(180deg, rgba(14, 69, 92, 0.9) 0%, rgba(20, 89, 119, 0.9) 100%)"
+          ref="DialogContentRef"
+        >
           <div class="dialog-title">
-            <img class="title-icon" src="@screen/images/dialog/title-icon.svg" />
+            <img
+              class="title-icon"
+              src="@screen/images/dialog/title-icon.svg"
+            />
             <span>{{ title }}</span>
-            <img class="icon-close" @click.stop="modelVisible = false" src="@screen/images/dialog/icon-close.svg" />
+            <img
+              class="icon-close"
+              @click.stop="modelVisible = false"
+              src="@screen/images/dialog/icon-close.svg"
+            />
           </div>
 
           <div class="dialog-content">
             <slot />
           </div>
 
-          <img class="bottom-right" src="@screen/images/dialog/right-bottom.svg">
+          <img
+            class="bottom-right"
+            src="@screen/images/dialog/right-bottom.svg"
+          />
 
           <div class="footer" v-if="$slots.footer">
             <slot name="footer"></slot>
@@ -28,71 +44,74 @@
 </template>
 
 <script>
-import Teleport from '../Teleport.vue';
+import Teleport from "../Teleport.vue";
 import BackgroundClip from "@screen/components/Decorations/BackgroundClip.vue";
-import { moveable, stopPropagation } from "./utils"
+import { moveable, stopPropagation } from "./utils";
 
 export default {
   components: {
     Teleport,
-    BackgroundClip
+    BackgroundClip,
   },
   model: {
-    prop: 'visible',
-    event: "update:value"
+    prop: "visible",
+    event: "update:value",
   },
-  name: 'Dialog',
+  name: "Dialog",
   props: {
     title: {
-      type: String
+      type: String,
     },
     visible: Boolean,
     noneMask: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   watch: {
     visible: {
       deep: true,
       handler(bool) {
         this.$nextTick(() => {
-          if (!bool) return this.destroyMoveable?.()
+          if (!bool) return this.destroyMoveable?.();
 
           const container = this.$refs.DialogContentRef.$el;
 
-          this.destroyMoveable = moveable(container, { target: container.querySelector(".dialog-title") });
+          this.destroyMoveable = moveable(container, {
+            target: container.querySelector(".dialog-title"),
+          });
 
-          stopPropagation(container.querySelector(".dialog-title").lastChild)
+          stopPropagation(container.querySelector(".dialog-title").lastChild);
 
           this.$once("hook:beforeDestroy", () => this.destroyMoveable?.());
-        })
-      }
-    }
+        });
+      },
+    },
   },
   computed: {
     modelVisible: {
       get() {
-        return this.visible
+        return this.visible;
       },
       set(val) {
-        this.$emit('update:value', val)
-      }
-    }
+        console.log("val", val);
+        this.$emit("update:value", val);
+      },
+    },
   },
   beforeDestroy() {
     this.modelVisible = false;
   },
-}
+};
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .mask-layer {
   position: fixed;
   top: 0;
   width: 100%;
   height: 100%;
-  background: rgba(0, 0, 0, .36);
+  background: rgba(0, 0, 0, 0.36);
   border-radius: 0px 0px 0px 0px;
   z-index: 100;
   display: flex;
@@ -111,7 +130,7 @@ export default {
 
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity .24s;
+  transition: opacity 0.24s;
 }
 
 .fade-enter,
@@ -185,7 +204,7 @@ export default {
     padding: 0 27px;
 
     ::v-deep {
-      >div {
+      > div {
         min-width: 96px;
       }
     }
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/FatigueWakesUp/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/FatigueWakesUp/index.vue
index 38ea7f9d..11fae8ab 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/FatigueWakesUp/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/FatigueWakesUp/index.vue
@@ -2,42 +2,56 @@
   <Dialog v-model="obverseVisible" title="疲劳唤醒弹窗">
     <div class="FatigueWakesUp">
       <Video class="video-stream" :pileNum="dialogData.stakeMark" />
-
-      <Descriptions labelWidth="72px" :list="list" :data="data" style="gap: 18px" />
+      <ElTabs v-model="activeName" @tab-click="handleClickTabs" class="tabs">
+        <ElTabPane label="基本信息" name="first">
+          <Descriptions
+            labelWidth="72px"
+            :list="list"
+            :data="data"
+            style="gap: 18px"
+          />
+        </ElTabPane>
+        <ElTabPane label="设备参数" name="second">设备参数</ElTabPane>
+        <ElTabPane label="在线率统计" name="third">在线率统计</ElTabPane>
+      </ElTabs>
     </div>
 
     <template #footer>
       <Button @click.native="deviceControlVisible = true">设备操作</Button>
     </template>
 
-    <DeviceControlDialog v-model="deviceControlVisible" :deviceId="dialogData.iotDeviceId" />
+    <DeviceControlDialog
+      v-model="deviceControlVisible"
+      :deviceId="dialogData.iotDeviceId"
+    />
   </Dialog>
 </template>
 
 <script>
 import Dialog from "@screen/components/Dialog/index.vue";
-import Descriptions from '@screen/components/Descriptions.vue';
-import Button from "@screen/components/Buttons/Button.vue"
+import Descriptions from "@screen/components/Descriptions.vue";
+import Button from "@screen/components/Buttons/Button.vue";
 // import { getRoadInfoByStakeMark, getProduct } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js"
-import Video from "@screen/components/Video"
-import DeviceControlDialog from "./components/DeviceControlDialog.vue"
+import Video from "@screen/components/Video";
+import DeviceControlDialog from "./components/DeviceControlDialog.vue";
 
 import request from "@/utils/request";
-import { dialogDelayVisible } from "./../mixin"
+import { dialogDelayVisible } from "./../mixin";
 
 // 疲劳唤醒弹窗
 export default {
-  name: 'FatigueWakesUp',
+  name: "FatigueWakesUp",
   mixins: [dialogDelayVisible],
   components: {
     Dialog,
     Descriptions,
     Video,
     DeviceControlDialog,
-    Button
+    Button,
   },
   data() {
     return {
+      activeName: "first",
       deviceControlVisible: false,
       data: {
         deviceType: "行车诱导",
@@ -49,52 +63,52 @@ export default {
       },
       list: [
         {
-          label: '设备名称',
+          label: "设备名称",
           key: "deviceName",
         },
         {
-          label: '设备桩号',
+          label: "设备桩号",
           key: "stakeMark",
         },
         {
-          label: '道路名称',
+          label: "道路名称",
           key: "roadName",
         },
         {
-          label: '设备方向',
+          label: "设备方向",
           key: "direction",
-          enum: "CameraDirectionEnum"
+          enum: "CameraDirectionEnum",
         },
         {
-          label: '设备状态',
+          label: "设备状态",
           key: "deviceState",
-          enum: "DeviceTypeEnum"
+          enum: "DeviceTypeEnum",
         },
         {
-          label: '设备厂商',
+          label: "设备厂商",
           key: "brand",
         },
-      ]
-    }
+      ],
+    };
   },
   async created() {
     this.data = { ...this.dialogData };
 
-    getProduct(this.dialogData.productId)
-      .then(data => {
-        this.dialogData.brand = data.brand;
-      })
+    getProduct(this.dialogData.productId).then((data) => {
+      this.dialogData.brand = data.brand;
+    });
 
     const roadInfo = await getRoadInfoByStakeMark(this.dialogData.stakeMark);
 
     if (roadInfo) this.data.roadName = roadInfo.roadName;
   },
   methods: {
-  }
-}
+    handleClickTabs() {},
+  },
+};
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .FatigueWakesUp {
   width: 420px;
   color: #fff;
@@ -130,7 +144,7 @@ export default {
     align-items: center;
     justify-content: end;
 
-    >div {
+    > div {
       font-size: 16px;
       padding: 6px 12px;
     }
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/auditAnalytics/StatsDialogVisible/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/auditAnalytics/StatsDialogVisible/index.vue
index a3716b10..774e4ec3 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/auditAnalytics/StatsDialogVisible/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/auditAnalytics/StatsDialogVisible/index.vue
@@ -1,5 +1,6 @@
 <template>
   <Dialog v-model="modelVisible" title="收费站管制统计" style="width: 100%">
+    {{ modelVisible }}
     <div class="search">
       <InputSearch
         :formList="searchFormList"
@@ -379,9 +380,7 @@ export default {
           });
           this.searchFormList[2].options.options = dataList;
           this.facilityIds = res[0].value.data.map((item) => item.id);
-          this.searchFormList[2].default = res[0].value.data.map(
-            (item) => item.id
-          );
+          this.searchFormList[2].default = dataList.map((item) => item.key);
           console.log(56, this.searchFormList[2].default);
           let currentMonth = moment().format("YYYY-MM");
           let currentDate = moment().format("YYYY-MM-DD");
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/data.js b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/data.js
index d1e59c60..bb08df4c 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/data.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/data.js
@@ -29,6 +29,7 @@ export const searchFormList = [
     key: "time",
     required: true,
     type: "datePicker",
+    default: "",
     options: {
       format: "yyyy-MM-dd",
       type: "daterange",
@@ -39,6 +40,7 @@ export const searchFormList = [
     key: "type",
     required: true,
     type: "select",
+    default: "",
     options: {
       options: [
         {
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue
index beb51993..d00645c7 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue
@@ -200,9 +200,6 @@ export default {
   },
   methods: {
     initData() {
-      this.startTime = moment().startOf("month").format("YYYY-MM-DD HH:mm:ss");
-      this.time = moment().format("YYYY-MM-DD HH:mm:ss");
-      this.typeQuery = searchFormList[1].options.options[0].value;
       console.log(8888, this.startTime, this.time, this.typeQuery);
       clearInterval(this.interval);
       if (this.activeName == "first") {
@@ -247,8 +244,8 @@ export default {
     handleSearch(data) {
       console.log(777, data);
       this.typeQuery = data.type;
-      this.startTime = this.formatDate(data.time[0]);
-      this.time = this.formatDate(data.time[1]);
+      this.startTime = moment(data.time[0]).format("YYYY-MM-DD HH:mm:ss");
+      this.time = moment(data.time[1]).format("YYYY-MM-DD HH:mm:ss");
       let typeText =
         this.searchFormList[1].options.options[this.typeQuery - 1].label;
       this.searchText = `${moment(this.startTime).format(
@@ -259,7 +256,6 @@ export default {
     },
     changeTabs() {
       this.initData();
-      console.log("======================", this.queryChart);
       this.$nextTick(() => {
         this.queryChart.resize();
       });
@@ -415,7 +411,15 @@ export default {
     },
   },
   mounted() {
-    this.initData();
+    this.$nextTick(() => {
+      this.startTime = moment().startOf("month").format("YYYY-MM-DD HH:mm:ss");
+      this.time = moment().format("YYYY-MM-DD HH:mm:ss");
+      this.typeQuery = searchFormList[1].options.options[0].value;
+      searchFormList[0].default = [this.startTime, this.time];
+      searchFormList[1].default = this.typeQuery;
+      console.log("__________________", searchFormList[0].default);
+      this.initData();
+    });
   },
 };
 </script>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/TemperatureTrend/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/TemperatureTrend/assets/charts.js
index 0b2afe4d..5e5374bf 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/TemperatureTrend/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/TemperatureTrend/assets/charts.js
@@ -6,10 +6,10 @@ var options = {
   },
   color: "#FFD15C",
   grid: {
-    left: "2%",
-    right: "5%",
-    bottom: "10%",
-    top: "10%",
+    left: "0",
+    right: "0",
+    bottom: "0",
+    top: "30px",
     containLabel: true,
   },
   legend: {
@@ -72,14 +72,12 @@ var options = {
     ],
   },
   yAxis: {
+    name: "℃  ",
     type: "value",
-    min: 0,
-    max: 40,
-    minInterval: 1,
     nameTextStyle: {
-      fontSize: 10,
+      fontSize: 12,
       color: "#fff",
-      align: "center",
+      align: "right",
     },
     splitLine: {
       lineStyle: {
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/visibilityTrends/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/visibilityTrends/assets/charts.js
index 8a1feaa5..7f20425c 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/visibilityTrends/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/visibilityTrends/assets/charts.js
@@ -11,10 +11,10 @@ var options = {
     // },
   },
   grid: {
-    left: "2%",
-    right: "5%",
-    bottom: "10%",
-    top: "10%",
+    left: "0",
+    right: "0",
+    bottom: "0",
+    top: "30px",
     containLabel: true,
   },
   legend: {
@@ -75,15 +75,13 @@ var options = {
     ],
   },
   yAxis: {
+    name: "M  ",
     type: "value",
-    min: 0,
-    max: 40,
-    minInterval: 5,
     splitNumber: 5,
     nameTextStyle: {
       fontSize: 12,
-      color: "#BDD8FB",
-      align: "center",
+      color: "#fff",
+      align: "right",
     },
     splitLine: {
       lineStyle: {
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/flowstate/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/flowstate/assets/charts.js
index c093d022..29d97c08 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/flowstate/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/flowstate/assets/charts.js
@@ -9,7 +9,11 @@ var options = {
         ""
       )}<br/>${params[0].marker}${
         params[0].seriesName
-      }: <span style="font-weight:bold;"> ${params[0].value}  辆</span>`;
+      }: <span style="font-weight:bold;"> ${params[0].value}  辆</span><br/>${
+        params[1].marker
+      }${params[1].seriesName}: <span style="font-weight:bold;"> ${
+        params[1].value
+      }  辆</span>`;
     },
   },
   axisPointer: {
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/flowstate/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/flowstate/index.vue
index 2ab8d502..2f4cfa8b 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/flowstate/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/flowstate/index.vue
@@ -1,47 +1,42 @@
 <template>
-  <div class='flowstate'>
+  <div class="flowstate">
     <WgtTitle :title="'全路车流量状况'"></WgtTitle>
     <div class="board">
       <div class="tag1">方向：济南</div>
       <div class="tag2">方向：菏泽</div>
-      <div class="charts keep-ratio " id="flowStateEchartBox"></div>
+      <div class="charts keep-ratio" id="flowStateEchartBox"></div>
     </div>
   </div>
 </template>
 
 <script>
-
-import WgtTitle from '../../../widgets/title'
+import WgtTitle from "../../../widgets/title";
 import * as echarts from "echarts";
 import chartsStatistics from "./assets/charts";
 export default {
-  name: 'Flowstate',
+  name: "Flowstate",
   components: {
-    WgtTitle
+    WgtTitle,
   },
   data() {
-    return {
-
-    }
+    return {};
   },
   mounted() {
     setTimeout(() => {
       this.$nextTick(() => {
-        var myChart = echarts.init(document.getElementById('flowStateEchartBox'));
+        var myChart = echarts.init(
+          document.getElementById("flowStateEchartBox")
+        );
         myChart.setOption(chartsStatistics);
       });
     });
   },
-  created() {
-
-  },
-  methods: {
-
-  }
-}
+  created() {},
+  methods: {},
+};
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .flowstate {
   width: 100%;
 
@@ -53,11 +48,15 @@ export default {
     border-radius: 5px 5px 5px 5px;
     opacity: 1;
     border: 1px solid;
-    border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1;
+    border-image: linear-gradient(
+        360deg,
+        rgba(55, 231, 255, 0.3),
+        rgba(55, 231, 255, 0)
+      )
+      1 1;
     display: flex;
     justify-content: space-between;
     align-items: center;
-
   }
 
   .charts {
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/index.vue
index 10733273..c9174c36 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/index.vue
@@ -6,7 +6,6 @@
       <!-- 在途车流量车型分类 -->
       <!--  全路段拥堵状况 -->
       <Congestion class="content-l"></Congestion>
-
       <!--  畅通率 -->
       <!-- <Unblocked class="content-m" /> -->
       <!-- 全路车流量状况 -->
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/sensitive/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/service/sensitive/index.vue
index 8cbb6797..2cb11ca3 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/service/sensitive/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/sensitive/index.vue
@@ -84,7 +84,7 @@
         :total="numTotal"
         :current-page.sync="currentPage"
         :page-size="pageSize"
-        layout="total,prev, pager, next, jumper"
+        layout="total,sizes,prev, pager, next, jumper"
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
       />

From e8044223045075a1c679a68b7630aff7f2b959cc Mon Sep 17 00:00:00 2001
From: zhangzhang <1747194829@qq.com>
Date: Fri, 8 Mar 2024 15:16:53 +0800
Subject: [PATCH 10/15] =?UTF-8?q?bug=E6=9B=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Home/components/HomeFilter/index.vue      | 96 +++++++++++--------
 .../views/JiHeExpressway/pages/Home/index.vue | 62 +++++++-----
 2 files changed, 98 insertions(+), 60 deletions(-)

diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFilter/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFilter/index.vue
index 49ce8765..f6272928 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFilter/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFilter/index.vue
@@ -1,24 +1,38 @@
 <template>
-  <div class='HomeFilter'>
-    <ElPopover trigger="manual" :value="activeIcon === 'filter'" :visibleArrow="false" placement="left"
-      popper-class="global-input-search-popover">
-      <Button :class="['btn', { 'btn-active': activeIcon }]" slot="reference" @click.native="handleClick('filter')">
-        <img src="@screen/images/home-filter/filter.svg">
+  <div class="HomeFilter">
+    <ElPopover
+      trigger="manual"
+      :value="activeIcon === 'filter'"
+      :visibleArrow="false"
+      placement="left"
+      popper-class="global-input-search-popover"
+    >
+      <Button
+        :class="['btn', { 'btn-active': activeIcon }]"
+        slot="reference"
+        @click.native="handleClick('filter')"
+      >
+        <img src="@screen/images/home-filter/filter.svg" />
       </Button>
 
       <div class="body">
-        <div class="title">
-          设备筛选
-        </div>
-        <Form labelWidth="90px" column="1" class="form" ref="FormConfigRef" :formList="formList" />
+        <div class="title">设备筛选</div>
+        <Form
+          labelWidth="90px"
+          column="1"
+          class="form"
+          ref="FormConfigRef"
+          :formList="formList"
+        />
 
         <div class="footer">
-          <Button style="background-color: rgba(0, 179, 204, .3);" @click.native="handleResetForm">
+          <Button
+            style="background-color: rgba(0, 179, 204, 0.3)"
+            @click.native="handleResetForm"
+          >
             重置
           </Button>
-          <Button @click.native="handleSearch">
-            搜索
-          </Button>
+          <Button @click.native="handleSearch"> 搜索 </Button>
         </div>
       </div>
     </ElPopover>
@@ -26,17 +40,18 @@
 </template>
 
 <script>
-import Button from '@screen/components/Buttons/Button.vue';
-import Form from '@screen/components/FormConfig';
+import Button from "@screen/components/Buttons/Button.vue";
+import Form from "@screen/components/FormConfig";
 import * as PresetFormItems from "@screen/common/PresetFormItems.js";
-import { merge, cloneDeep } from "lodash"
+import { merge, cloneDeep } from "lodash";
 import request from "@/utils/request";
+import { log } from "mathjs";
 
 export default {
-  name: 'HomeFilter',
+  name: "HomeFilter",
   components: {
     Button,
-    Form
+    Form,
   },
   data() {
     return {
@@ -49,7 +64,7 @@ export default {
           key: "deviceType",
           type: "select",
           options: {
-            options: []
+            options: [],
           },
           // visible: data => {
           //   if (data.searchType == 1) {
@@ -57,29 +72,32 @@ export default {
           //   }
           // },
         },
-      ]
-    }
+      ],
+    };
   },
   methods: {
     handleClick(type) {
+      console.log("type: ", type);
       this.activeIcon = this.activeIcon === type ? null : type;
+      console.log("this.activeIcon", this.activeIcon);
     },
     filterEnd(data) {
-      this.activeIcon = null;
-      // this.filterData = data;
       this.$parent.$refs.RoadAndEventsRef?.setFilterData?.(data);
     },
     async handleResetForm() {
       this.$refs.FormConfigRef?.reset();
-      this.filterEnd(null)
+      this.activeIcon = "filter";
+      this.filterEnd(null);
     },
     async handleSearch() {
       const data = await this.$refs.FormConfigRef.validate();
 
-      if (!data.startStakeMark[0] || !data.startStakeMark[1]) delete data.startStakeMark;
-      if (!data.endStakeMark[0] || !data.endStakeMark[1]) delete data.endStakeMark;
-
-      this.filterEnd(data)
+      if (!data.startStakeMark[0] || !data.startStakeMark[1])
+        delete data.startStakeMark;
+      if (!data.endStakeMark[0] || !data.endStakeMark[1])
+        delete data.endStakeMark;
+      this.activeIcon = null;
+      this.filterEnd(data);
     },
     async getDeviceTypeOptions() {
       // try {
@@ -90,15 +108,15 @@ export default {
       // });
       // } catch (e) { console.error(e); }
       // return ;
-    }
+    },
   },
   async created() {
     // await this.getDeviceTypeOptions();
-  }
-}
+  },
+};
 </script>
 
-<style lang='scss'>
+<style lang="scss">
 div.el-popper.global-input-search-popover {
   background: rgba(6, 66, 88, 0.8);
   border: 1px solid rgba(42, 217, 253, 0.6);
@@ -108,23 +126,25 @@ div.el-popper.global-input-search-popover {
 
   .body {
     .title {
-      background: linear-gradient(90deg, #237E9B 0%, rgba(23, 145, 184, 0) 100%);
+      background: linear-gradient(
+        90deg,
+        #237e9b 0%,
+        rgba(23, 145, 184, 0) 100%
+      );
       padding: 3px 9px;
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
-
     }
   }
 }
 </style>
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .HomeFilter {
-
   .btn {
     padding: 9px;
-    background: linear-gradient(180deg, #152E3C 0%, #163A45 100%);
+    background: linear-gradient(180deg, #152e3c 0%, #163a45 100%);
     border-radius: 4px;
     overflow: hidden;
     height: unset;
@@ -132,7 +152,7 @@ div.el-popper.global-input-search-popover {
   }
 
   .btn-active {
-    background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);
+    background: linear-gradient(180deg, #005c79 0%, #009bcc 100%);
   }
 }
 </style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue
index 2e0435c8..e4c81b64 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue
@@ -1,6 +1,13 @@
 <template>
-  <div class='Home'>
-    <AMapContainer ref="AMapContainerRef" @update:isGisCompleted="(data) => { this.isGisCompleted = data; }" />
+  <div class="Home">
+    <AMapContainer
+      ref="AMapContainerRef"
+      @update:isGisCompleted="
+        (data) => {
+          this.isGisCompleted = data;
+        }
+      "
+    />
     <section class="content">
       <!-- 左侧 -->
       <div class="content-l">
@@ -8,7 +15,11 @@
         <FocusedMonitoring class="card-menu" />
 
         <!-- 下 -->
-        <RoadAndEvents ref="RoadAndEventsRef" :isGisCompleted="isGisCompleted" class="content-l-b card-menu" />
+        <RoadAndEvents
+          ref="RoadAndEventsRef"
+          :isGisCompleted="isGisCompleted"
+          class="content-l-b card-menu"
+        />
       </div>
 
       <!-- 右侧 -->
@@ -24,7 +35,11 @@
     <footer class="footer card-menu">
       <div class="footer-title">
         <span>济菏高速缩略图</span>
-        <i class="el-icon-s-fold" style="color: #2AD9FD; transform: rotate(-90deg);" @click.stop="handleShrink" />
+        <i
+          class="el-icon-s-fold"
+          style="color: #2ad9fd; transform: rotate(-90deg)"
+          @click.stop="handleShrink"
+        />
       </div>
       <div class="footer-content">
         <Thumbnail />
@@ -41,12 +56,12 @@ import RoadAndEvents from "./components/RoadAndEvents/index.vue";
 import AMapContainer from "./components/AMapContainer/index.vue";
 import HomeFilter from "./components/HomeFilter/index.vue";
 import HomeFrame from "./components/HomeFrame/index.vue";
-import Button from '@screen/components/Buttons/Button.vue';
+import Button from "@screen/components/Buttons/Button.vue";
 
 // import InfoBoard from "./components/InfoBoard"
 
 export default {
-  name: 'Home',
+  name: "Home",
   components: {
     FocusedMonitoring,
     ConditionStatistics,
@@ -63,34 +78,37 @@ export default {
       isShowInfoBoard: false,
       selectedDevice: null,
       isGisCompleted: false,
-    }
+    };
   },
   provide() {
     return {
-      getMap: () => this.$refs.AMapContainerRef.getMapInstance()
-    }
+      getMap: () => this.$refs.AMapContainerRef.getMapInstance(),
+    };
   },
   methods: {
     handleShrink(e) {
       const translateXElement = e.target.parentElement.parentElement;
 
-      const result = (e.target.style.transform.match(/[-0-9]+/)?.[0] || -90) * -1
+      const result =
+        (e.target.style.transform.match(/[-0-9]+/)?.[0] || -90) * -1;
 
       e.target.style.transform = `rotate(${result}deg)`;
-      if (translateXElement.style.transform !== `translateY(calc(100% - 36px))`) {
-        translateXElement.style.transform = `translateY(calc(100% - 36px))`
+      if (
+        translateXElement.style.transform !== `translateY(calc(100% - 36px))`
+      ) {
+        translateXElement.style.transform = `translateY(calc(100% - 36px))`;
         translateXElement.style.position = `absolute`;
         translateXElement.style.bottom = `0px`;
       } else {
-        translateXElement.style.transform = `translateY(0)`
+        translateXElement.style.transform = `translateY(0)`;
         translateXElement.style.position = `relative`;
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .Home {
   height: 100%;
   z-index: 6;
@@ -101,7 +119,7 @@ export default {
   justify-content: center;
 
   .card-menu {
-    transition: all .24s linear;
+    transition: all 0.24s linear;
   }
 
   .content {
@@ -113,7 +131,7 @@ export default {
     height: min-content;
     pointer-events: none;
 
-    >div {
+    > div {
       pointer-events: auto;
     }
 
@@ -127,7 +145,7 @@ export default {
       overflow: hidden;
       height: 100%;
 
-      >div {
+      > div {
         pointer-events: all;
         flex: 1;
       }
@@ -176,7 +194,7 @@ export default {
     will-change: height;
     bottom: 0;
 
-    >div {
+    > div {
       pointer-events: all;
     }
 
@@ -205,7 +223,7 @@ export default {
       }
 
       i {
-        transition: all .24s linear;
+        transition: all 0.24s linear;
         cursor: pointer;
       }
 

From 7e75a96f4f63336fa2b625182548d9985464959a Mon Sep 17 00:00:00 2001
From: zhangzhang <1747194829@qq.com>
Date: Fri, 8 Mar 2024 15:57:25 +0800
Subject: [PATCH 11/15] =?UTF-8?q?=E6=9B=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../statisticalAnalysis/data.js                 |  7 +++++--
 .../statisticalAnalysis/index.vue               | 17 ++++++-----------
 2 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/data.js b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/data.js
index bb08df4c..a7115be6 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/data.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/data.js
@@ -29,7 +29,10 @@ export const searchFormList = [
     key: "time",
     required: true,
     type: "datePicker",
-    default: "",
+    default: [
+      moment().startOf("month").format("YYYY-MM-DD HH:mm:ss"),
+      moment().format("YYYY-MM-DD HH:mm:ss"),
+    ],
     options: {
       format: "yyyy-MM-dd",
       type: "daterange",
@@ -40,7 +43,7 @@ export const searchFormList = [
     key: "type",
     required: true,
     type: "select",
-    default: "",
+    default: "1",
     options: {
       options: [
         {
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue
index d00645c7..779e0763 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue
@@ -200,7 +200,9 @@ export default {
   },
   methods: {
     initData() {
-      console.log(8888, this.startTime, this.time, this.typeQuery);
+      this.startTime = moment().startOf("month").format("YYYY-MM-DD HH:mm:ss");
+      this.time = moment().format("YYYY-MM-DD HH:mm:ss");
+      this.typeQuery = this.searchFormList[1].options.options[0].value;
       clearInterval(this.interval);
       if (this.activeName == "first") {
         this.initDevice();
@@ -410,16 +412,9 @@ export default {
       });
     },
   },
-  mounted() {
-    this.$nextTick(() => {
-      this.startTime = moment().startOf("month").format("YYYY-MM-DD HH:mm:ss");
-      this.time = moment().format("YYYY-MM-DD HH:mm:ss");
-      this.typeQuery = searchFormList[1].options.options[0].value;
-      searchFormList[0].default = [this.startTime, this.time];
-      searchFormList[1].default = this.typeQuery;
-      console.log("__________________", searchFormList[0].default);
-      this.initData();
-    });
+  async mounted() {
+    console.log("__________________", searchFormList[0].default);
+    await this.initData();
   },
 };
 </script>

From 12b5b69e1f2e2da06631869faf5498ec611d41b1 Mon Sep 17 00:00:00 2001
From: zhoule <zz221011@163.com>
Date: Fri, 8 Mar 2024 16:54:07 +0800
Subject: [PATCH 12/15] bug

---
 .../trafficIndicators/assets/chartsRadar.js   |   4 +-
 .../components/trafficIndicators/index.vue    | 147 +++++++-----------
 2 files changed, 58 insertions(+), 93 deletions(-)

diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/chartsRadar.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/chartsRadar.js
index 92916f39..8cdbbc06 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/chartsRadar.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/chartsRadar.js
@@ -6,7 +6,7 @@ let options = {
   },
   tooltip: {
     trigger: "item",
-    formatter: function (params, ticket, callback) {
+    formatter: function (params) {
       let data = params.data;
       return `交通特征: ${data.value[0]}<br>拥挤度: ${data.value[1]}<br>饱和度: ${data.value[2]}`;
     },
@@ -27,7 +27,7 @@ let options = {
         formatter: function (value) {
           return value + ' '+ (radarData[value] / 10 * 100) + "%";
       },
-        color: "#428BD4",
+        color: "#fff",
       },
       splitArea: {
         areaStyle: {
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/index.vue
index e627ceb3..8228bc29 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/index.vue
@@ -33,87 +33,38 @@
           <el-button type="primary" size="mini" class="btnSearch"  icon="el-icon-search">查询</el-button>
           <el-button class="btnReset"  size="mini" icon="el-icon-refresh-left" >重置</el-button>
         </div> -->
-      <ProgressBar
-        :dataList="dataList"
-        class="keep-ratio progressbar"
-        :selectIndex="7"
-      />
+      <ProgressBar :dataList="dataList" class="keep-ratio progressbar" :selectIndex="7" />
       <div class="body">
         <div class="body-l">
           <div class="searchPanel_1">
             <!-- <el-from ref="form"> -->
-            <RadioGroup
-              :options="[
-                { key: '1', label: '菏泽' },
-                { key: '3', label: '济南' },
-              ]"
-              v-model="direction"
-              type="button"
-            />
-            <el-select
-              v-model="type"
-              size="mini"
-              class="selectRoad"
-              placeholder="请选择"
-            >
-              <el-option
-                v-for="item in typeOptions"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              >
+            <RadioGroup :options="[
+      { key: '1', label: '菏泽' },
+      { key: '3', label: '济南' },
+    ]" v-model="direction" type="button" />
+            <el-select v-model="type" size="mini" class="selectRoad" placeholder="请选择">
+              <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value">
               </el-option>
             </el-select>
-            <el-select
-              v-model="quarter"
-              size="medium"
-              v-if="type == '3'"
-              class="selectRoad-medium"
-              placeholder="请选择"
-            >
-              <el-option
-                v-for="item in quarterOptions"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              >
+            <el-select v-model="quarter" size="medium" v-if="type == '3'" class="selectRoad-medium" placeholder="请选择">
+              <el-option v-for="item in quarterOptions" :key="item.value" :label="item.label" :value="item.value">
               </el-option>
             </el-select>
             <!-- <el-quarter-picker size="mini" class="selectRoad" style="width:180px;" v-if="type == '3'" v-model="dateTime"
             aria-placeholder="请选季度" /> -->
-            <el-date-picker
-              size="mini"
-              v-if="type != '3'"
-              class="selectRoad"
-              v-model="dateTime"
-              style="width: 140px"
-              :type="
-                type == 1
-                  ? 'date'
-                  : type == 2
-                  ? 'month'
-                  : type == 4
-                  ? 'year'
-                  : ''
-              "
-              placeholder="请选择"
-            />
-
-            <el-button
-              type="primary"
-              size="mini"
-              class="btnSearch"
-              @click="searchQuery"
-              icon="el-icon-search"
-              >查询</el-button
-            >
-            <el-button
-              class="btnReset"
-              size="mini"
-              icon="el-icon-refresh-left"
-              @click="handleClear"
-              >重置</el-button
-            >
+            <el-date-picker size="mini" v-if="type != '3'" class="selectRoad" v-model="dateTime" style="width: 140px"
+              :type="type == 1
+      ? 'date'
+      : type == 2
+        ? 'month'
+        : type == 4
+          ? 'year'
+          : ''
+      " placeholder="请选择" />
+
+            <el-button type="primary" size="mini" class="btnSearch" @click="searchQuery"
+              icon="el-icon-search">查询</el-button>
+            <el-button class="btnReset" size="mini" icon="el-icon-refresh-left" @click="handleClear">重置</el-button>
             <!-- </el-from> -->
           </div>
           <!-- <div class="searchPanel_1">
@@ -138,7 +89,7 @@
         <div class="chartOrg">
           <div class="itemChart">
             <div class="title">上月指标</div>
-            <div id="chart2" class="keep-ratio"></div>
+            <div id="chart2" class=""></div>
           </div>
           <div class="itemChart">
             <div class="title">本月指标</div>
@@ -338,7 +289,7 @@ export default {
     };
   },
 
-  created() {},
+  created() { },
   methods: {},
   mounted() {
     setTimeout(() => {
@@ -358,46 +309,60 @@ export default {
         canvas.height = parentDiv.offsetHeight;
         parentDiv.appendChild(canvas);
         const context = canvas.getContext("2d");
+        context.lineWidth = 1; // 设置线段宽度
 
         // 填充渐变颜色
-        var gr = context.createLinearGradient(247, 63, 450, 0);
+        var gr = context.createLinearGradient(140, 0, 180, 0);
         // 颜色断点
         gr.addColorStop(1, "rgba(92,197,255,0)");
         gr.addColorStop(0, "rgba(92,197,255,0.5)");
-
-        context.lineWidth = 1; // 设置线段宽度
-
         // 绘制圆角矩形
-        drawRoundRect(context, 300, 78, 160, 24, 12, gr);
+        drawRoundRect(context, 98, 1, 90, 22, 12, gr);
 
-        var gr = context.createLinearGradient(240, 63, 450, 0);
+        var gr = context.createLinearGradient(35, 0, 75, 0);
         // 颜色断点
         gr.addColorStop(1, "rgba(92,197,255,0)");
         gr.addColorStop(0, "rgba(92,197,255,0.5)");
-        drawRoundRect(context, 300, 148, 160, 24, 12, gr);
+        drawRoundRect(context, -1, 136, 80, 20, 12, gr);
 
-        var gr = context.createLinearGradient(240, 63, 450, 0);
+        var gr = context.createLinearGradient(230, 0, 275, 0);
         // 颜色断点
         gr.addColorStop(1, "rgba(92,197,255,0)");
         gr.addColorStop(0, "rgba(92,197,255,0.5)");
-        drawRoundRect(context, 300, 218, 160, 24, 12, gr);
+        context.lineWidth = 1; // 设置线段宽度
+        drawRoundRect(context, 211, 136, 220, 20, 12, gr);
+
 
-        var gr = context.createLinearGradient(400, 63, 450, 0);
+        const domMap3 = document.getElementById("chart3");
+        let parentDiv3 = domMap3.firstChild;
+        // 创建canvas
+        let canvas3 = document.createElement("canvas");
+        canvas3.width = parentDiv3.offsetWidth;
+        canvas3.height = parentDiv3.offsetHeight;
+        parentDiv3.appendChild(canvas3);
+        const context3 = canvas3.getContext("2d");
+        context3.lineWidth = 1; // 设置线段宽度
+
+        // 填充渐变颜色
+        var gr = context3.createLinearGradient(140, 0, 180, 0);
         // 颜色断点
         gr.addColorStop(1, "rgba(92,197,255,0)");
         gr.addColorStop(0, "rgba(92,197,255,0.5)");
+        // 绘制圆角矩形
+        drawRoundRect(context3, 98, 4, 90, 20, 12, gr);
 
-        drawRoundRect(context, 460, 78, 160, 24, 12, gr);
-        var gr = context.createLinearGradient(350, 63, 450, 0);
+        var gr = context3.createLinearGradient(35, 0, 75, 0);
         // 颜色断点
         gr.addColorStop(1, "rgba(92,197,255,0)");
         gr.addColorStop(0, "rgba(92,197,255,0.5)");
-        drawRoundRect(context, 460, 148, 160, 24, 12, gr);
-        var gr = context.createLinearGradient(300, 63, 450, 0);
+        drawRoundRect(context3, -1, 138, 80, 20, 12, gr);
+
+        var gr = context3.createLinearGradient(240, 0, 290, 0);
         // 颜色断点
         gr.addColorStop(1, "rgba(92,197,255,0)");
         gr.addColorStop(0, "rgba(92,197,255,0.5)");
-        drawRoundRect(context, 460, 218, 160, 24, 12, gr);
+        context3.lineWidth = 1; // 设置线段宽度
+        drawRoundRect(context3, 211, 138, 220, 20, 12, gr);
       });
     });
   },
@@ -420,7 +385,7 @@ export default {
     width: 100%;
     font-size: 14px;
 
-    > div {
+    >div {
       display: inline-flex;
       flex-direction: column;
       height: 100%;
@@ -436,7 +401,7 @@ export default {
     .chartOrg {
       flex-direction: row !important;
 
-      > div {
+      >div {
         display: inline-flex;
         flex-direction: column;
         width: 50%;
@@ -444,7 +409,7 @@ export default {
       }
 
       .itemChart {
-        > .title {
+        >.title {
           display: inline-flex;
           width: 100%;
           height: 30px;

From 4d461f12c214d3c22bda5083b4cec40a95abf92a Mon Sep 17 00:00:00 2001
From: hui <770260999@qq.com>
Date: Fri, 8 Mar 2024 18:00:55 +0800
Subject: [PATCH 13/15] =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/assets/styles/JiHeExpressway.scss     |  15 +-
 .../JiHeExpressway/components/Adaptation.vue  |   8 +-
 .../components/InputSearch/index.vue          |   2 +-
 .../pages/service/board/index.vue             | 183 ++++++++++++------
 4 files changed, 138 insertions(+), 70 deletions(-)

diff --git a/ruoyi-ui/src/assets/styles/JiHeExpressway.scss b/ruoyi-ui/src/assets/styles/JiHeExpressway.scss
index 36e5c973..660da6bd 100644
--- a/ruoyi-ui/src/assets/styles/JiHeExpressway.scss
+++ b/ruoyi-ui/src/assets/styles/JiHeExpressway.scss
@@ -1,14 +1,17 @@
 .theme-jihe {
+  $lightBlue: #3de8ff;
   $textColor: #f4f4f4;
   $inputHeight: 26px;
   color: $textColor;
 
+  .text-center{ text-align: center;}
+  .tc-lb{ color: $lightBlue;}
   .el-tabs__item {
     color: $textColor;
   }
 
   .el-form-item {
-    margin-bottom: 14px;
+    margin-bottom: 8px;
   }
 
   .el-form-item__label {
@@ -47,11 +50,14 @@
 
   // 多选框组
   .el-checkbox-group {
+    // height: $inputHeight;
     .el-checkbox__label {
       color: $textColor;
+      padding-left: 6px;
     }
 
     .el-checkbox {
+      margin-right: 16px;
       .el-checkbox__inner {
         width: 20px;
         height: 20px;
@@ -92,12 +98,17 @@
       color: #fff;
 
       &.is-disabled {
-        color: #006a99;
+        color: #096d8c;
       }
     }
 
     .el-input {
       margin: 0;
+      .el-input__inner{
+          height: calc($inputHeight + 2px);
+          background-color: #096d8c;
+          padding:0 28px;
+      }
     }
   }
 // 单选按钮
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/Adaptation.vue b/ruoyi-ui/src/views/JiHeExpressway/components/Adaptation.vue
index 8d34a74d..ff5a269d 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/components/Adaptation.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/Adaptation.vue
@@ -101,10 +101,10 @@ export default {
   mounted() {
     this.initScale();
 
-    // window.addEventListener(
-    //   "resize",
-    //   _.debounce(this.initScale.bind(this), 360)
-    // );
+    window.addEventListener(
+      "resize",
+      _.debounce(this.initScale.bind(this), 360)
+    );
   },
 };
 </script>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/InputSearch/index.vue b/ruoyi-ui/src/views/JiHeExpressway/components/InputSearch/index.vue
index 52426051..f5e4f510 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/components/InputSearch/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/InputSearch/index.vue
@@ -165,7 +165,7 @@ export default {
         "reset"
       );
     },
-    async handleSearch() {
+    async handleSearch(value) {
       if (this.types === "input") {
         let params = {};
         params[this.params] = this.value;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/index.vue
index 14477d93..cb8fa6b1 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/index.vue
@@ -10,28 +10,63 @@
         <!-- </div> -->
         <WgtTitle :title="'情报板列表'"></WgtTitle>
         <el-form
-          ref="form"
-          :model="form"
-          class="partCon"
-          style="display: flex; flex-direction: column"
+        :model="form"
+        class="formSearch" size="mini"
         >
-          <el-form-item style="margin-bottom: 12px">
-            <el-select
-              v-model="form.selectedDirection"
-              size="medium"
-              placeholder="请选择方向"
-              class="direction"
-            >
-              <el-option
-                v-for="item in boardDirectionList"
-                :key="item.dictValue"
-                :label="item.dictLabel"
-                :value="item.dictValue"
-                @click.native="____changeDirection(item.dictValue)"
-              />
-            </el-select>
+        <!-- class="partCon" -->
+        <!-- style="display: flex; flex-direction: column" -->
+        <!-- ref="form" -->
+          <el-form-item>
+            <el-col :span="12">
+              <el-select
+                v-model="form.selectedDirection"
+                size="medium"
+                placeholder="请选择方向"
+                class="direction"
+              >
+                <el-option
+                  v-for="item in boardDirectionList"
+                  :key="item.dictValue"
+                  :label="item.dictLabel"
+                  :value="item.dictValue"
+                  />
+                  <!-- @click.native="____changeDirection(item.dictValue)" -->
+              </el-select>
+            </el-col>
+            <el-col :span="11" :offset="1">
+                <el-checkbox-group v-model="form.status" style="height:26px">
+                  <el-checkbox label="1">在线</el-checkbox>
+                  <el-checkbox label="0">离线</el-checkbox>
+                </el-checkbox-group>
+            </el-col>
+          </el-form-item>
+          <el-form-item label="开始桩号:">
+            <el-col :span="2" class="text-center tc-lb">K</el-col>
+            <el-col :span="7">
+              <el-input-number v-model="form.stakeFrom[0]" style="width: 100%;" :precision="0" :min="0" :max="1000"></el-input-number>
+            </el-col>
+            <el-col :span="2" class="text-center tc-lb">+</el-col>
+            <el-col :span="7">
+              <el-input-number v-model="form.stakeFrom[1]" style="width: 100%;" :precision="0" :min="0" :max="1000"></el-input-number>
+            </el-col>
+          </el-form-item>
+          <el-form-item label="结束桩号:">
+            <el-col :span="2" class="text-center tc-lb">K</el-col>
+            <el-col :span="7">
+              <el-input-number v-model="form.stakeTo[0]" style="width: 100%;" :precision="0" :min="0" :max="1000"></el-input-number>
+            </el-col>
+            <el-col :span="2" class="text-center tc-lb">+</el-col>
+            <el-col :span="7">
+              <el-input-number v-model="form.stakeTo[1]" style="width: 100%;" :precision="0" :min="0" :max="1000"></el-input-number>
+            </el-col>
           </el-form-item>
-          <vuescroll :ops="scrollOptions" style="flex: 1; height: 0">
+          <el-form-item style="display: flex; justify-content: center;">
+            <el-button class="btnInfoBoard" type="add" @click.native="____onSearchDevice()">搜索</el-button>
+            <el-button type="publish" @click.native="____onResetSearchDevice()">重置</el-button>
+          </el-form-item>
+        </el-form>
+        <div style="flex:1; height: 0; padding:0 10px 10px">
+          <vuescroll :ops="scrollOptions">
             <el-collapse
               v-model="selectedSize"
               accordion
@@ -46,7 +81,7 @@
               >
                 <div v-if="item.list.length > 0">
                   <el-checkbox-group
-                    class="checkbox"
+                    class="deviceList"
                     v-model="checkedDeviceIds"
                     :max="2"
                     @change="____onSelectDevices"
@@ -80,7 +115,7 @@
               </el-collapse-item>
             </el-collapse>
           </vuescroll>
-        </el-form>
+        </div>
       </div>
       <!-- ++++++++++中间部分：单个设备++++++++++ -->
       <div style="width: 37.8%" class="part partMiddle">
@@ -357,13 +392,7 @@ export default {
       deviceList: [], //分辨率
       checkedDeviceIds: [], //多选 选中项
       templateAvailable: [],
-      form: {
-        selectedDirection: "",
-        company: null,
-        mechanism: null,
-        localInfo: null,
-        selectedPixel: null,
-      }, //情报板列表表单
+      form: {},
       supplier: null, //报文类型
       activeNames: [], //模板 展开项
       tplCategory: [], //模板
@@ -408,6 +437,7 @@ export default {
     // }
   },
   created() {
+    this.____resetForm();
     Promise.all([
       this.____initDirection(),
       this.____getBoardPixel(),
@@ -501,9 +531,25 @@ export default {
       this.____getIotBoard();
     },
 
+    ____onSearchDevice(){
+      this.____getIotBoard();
+    },
+    ____resetForm(){
+      this.form = {
+        selectedDirection: "",
+        status: ["0", "1"],
+        stakeFrom: [55, 378],
+        stakeTo: [208, 153]
+      }
+    },
+    ____onResetSearchDevice(){
+      this.____resetForm();
+      this.____initDirection();
+      this.____getIotBoard();
+    },
     // 情报板设备 折叠面板
     ____getIotBoard() {
-      this.checkAll = false;
+      // this.checkAll = false;
       for (let key in this.boardSizeDic) {
         this.boardSizeDic[key].list = [];
       }
@@ -511,6 +557,13 @@ export default {
       let param = {
         direction: this.form.selectedDirection,
       };
+      let stakeFrom = this.form.stakeFrom[0] * 1000 + this.form.stakeFrom[1];
+      let stakeTo = this.form.stakeTo[0] * 1000 + this.form.stakeTo[1];
+      let statusForm = _.cloneDeep(this.form.status);
+      if(statusForm.includes("0")){
+        statusForm.push(null)
+      } 
+    
       if (IS_TESTING) {
         let res = testDeviceList;
         res.data.forEach((item) => {
@@ -534,7 +587,12 @@ export default {
               item.otherConfig = JSON.parse(item.otherConfig);
             }
             item.iotDeviceId = item.iotDeviceId || "null_" + item.id;
-            this.boardSizeDic[item.otherConfig.screenSize].list.push(item);
+            
+            let stakeThis = +item?.stakeMark?.replace(/[K\+]/g, "") || -1;
+
+            if(stakeThis >= stakeFrom && stakeThis <= stakeTo && statusForm.includes(item.deviceState)){
+              this.boardSizeDic[item.otherConfig.screenSize].list.push(item);
+            }
             if (!this.selectedSize) {
               this.selectedSize = item.otherConfig.screenSize;
             }
@@ -1109,10 +1167,15 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+
+::v-deep .formSearch{
+  padding: 20px 20px 0;
+  .el-form-item__label{ color: #fff;}
+}
 .direction {
   ::v-deep .el-input {
     .el-input__inner {
-      font-size: 16px !important;
+      font-size: 14px !important;
       padding: 8px 5px;
     }
   }
@@ -1291,32 +1354,34 @@ export default {
   padding-bottom: 0px;
 }
 
-::v-deep .el-checkbox__label {
-  display: flex !important;
-  justify-content: space-between;
-  width: 100%;
-  .title{ flex:1; width:0; overflow: hidden; text-overflow: ellipsis; word-break: keep-all;}
-  .state{ width: 18px; height: 18px; margin-right: 4px;}
-  .huiduButton {
-    background: transparent;
-    border: none;
-    height: 18px;
-    width: 18px;
-    line-height: 20px;
-    padding: 0;
-    color: #fff;
-    font-size: 16px;
-  }
+.deviceList{
+  ::v-deep .el-checkbox__label {
+    display: flex !important;
+    justify-content: space-between;
+    width: 100%;
+    .title{ flex:1; width:0; overflow: hidden; text-overflow: ellipsis; word-break: keep-all;}
+    .state{ width: 18px; height: 18px; margin-right: 4px;}
+    .huiduButton {
+      background: transparent;
+      border: none;
+      height: 18px;
+      width: 18px;
+      line-height: 20px;
+      padding: 0;
+      color: #fff;
+      font-size: 16px;
+    }
 
-  .huiduButton:hover {
-    color: #05afe3 !important;
+    .huiduButton:hover {
+      color: #05afe3 !important;
+    }
   }
-}
 
-.el-checkbox {
-  display: flex !important;
-  padding-top: 10px;
-  margin: 0;
+  .el-checkbox {
+    display: flex !important;
+    padding-top: 10px;
+    margin: 0;
+  }
 }
 
 ::v-deep .el-table {
@@ -1383,10 +1448,6 @@ export default {
   padding-left: 5px;
 }
 
-::v-deep .el-checkbox + .el-checkbox {
-  margin-left: 0px !important;
-}
-
 ::v-deep .el-collapse-item__header {
   background-color: #053b4f;
   color: #fff;
@@ -1410,10 +1471,6 @@ export default {
   border: none;
 }
 
-::v-deep .el-checkbox__label {
-  color: #ff0;
-}
-
 ::v-deep .el-button--medium {
   width: 96px;
   height: 23px;

From 64feec226335945e97bf8b3614cf46b8fc1fc533 Mon Sep 17 00:00:00 2001
From: zhangzhang <1747194829@qq.com>
Date: Mon, 11 Mar 2024 10:29:28 +0800
Subject: [PATCH 14/15] =?UTF-8?q?=E6=9B=B4=E6=94=B9=E5=9B=BE=E4=BE=8B?=
 =?UTF-8?q?=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/composeFeatures/assets/charts.js  |  5 ++++-
 .../components/crowding/assets/charts.js         |  5 ++++-
 .../components/saturationMax/assets/charts.js    |  5 ++++-
 .../trafficIndicators/assets/charts.js           |  3 +++
 .../trafficIndicators/assets/chartsRadar.js      | 16 ++++++++--------
 5 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/composeFeatures/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/composeFeatures/assets/charts.js
index 9ca5c810..c9b4d618 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/composeFeatures/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/composeFeatures/assets/charts.js
@@ -11,6 +11,9 @@ var options = {
   tooltip: {
     show: true,
     trigger: "axis",
+    valueFormatter: function (value) {
+      return value + " 指标";
+    },
   },
   xAxis: {
     type: "category",
@@ -44,7 +47,7 @@ var options = {
   },
   yAxis: {
     type: "value",
-    name: '(指标)',
+    name: "(指标)",
     nameTextStyle: {
       color: "#fff",
       fontSize: 10,
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/crowding/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/crowding/assets/charts.js
index 7696e28c..47104b29 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/crowding/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/crowding/assets/charts.js
@@ -11,6 +11,9 @@ var options = {
   tooltip: {
     show: true,
     trigger: "axis",
+    valueFormatter: function (value) {
+      return value + " 指标";
+    },
   },
   xAxis: {
     type: "category",
@@ -44,7 +47,7 @@ var options = {
   },
   yAxis: {
     type: "value",
-    name: '(指标)',
+    name: "(指标)",
     nameTextStyle: {
       color: "#fff",
       fontSize: 10,
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/saturationMax/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/saturationMax/assets/charts.js
index f04430e7..168648d2 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/saturationMax/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/saturationMax/assets/charts.js
@@ -4,6 +4,9 @@ var options = {
   tooltip: {
     show: true,
     trigger: "axis",
+    valueFormatter: function (value) {
+      return value + " 指标";
+    },
   },
   grid: {
     left: "2px",
@@ -45,7 +48,7 @@ var options = {
   },
   yAxis: {
     type: "value",
-    name: '(指标)',
+    name: "(指标)",
     nameTextStyle: {
       color: "#fff",
       fontSize: 10,
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts.js
index 316af6d6..0eacaff7 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts.js
@@ -62,6 +62,9 @@ var options = {
   tooltip: {
     show: true,
     trigger: "axis",
+    valueFormatter: function (value) {
+      return value + " 指标";
+    },
   },
   legend: {
     // orient: 'vertical',
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/chartsRadar.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/chartsRadar.js
index 8cdbbc06..df7684bf 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/chartsRadar.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/chartsRadar.js
@@ -1,4 +1,4 @@
-window.radarData = {'交通特征':9,'拥挤度':8,'饱和度':5,}
+window.radarData = { 交通特征: 9, 拥挤度: 8, 饱和度: 5 };
 
 let options = {
   legend: {
@@ -8,15 +8,15 @@ let options = {
     trigger: "item",
     formatter: function (params) {
       let data = params.data;
-      return `交通特征: ${data.value[0]}<br>拥挤度: ${data.value[1]}<br>饱和度: ${data.value[2]}`;
+      return `<span style="width:60px;display:inline-block">交通特征:</span> <span style="font-weight: bold;"> ${data.value[0]} 指标</span><br><span style="width:60px;display:inline-block">拥挤度: </span><span style="font-weight: bold;"> ${data.value[1]} 指标</span><br><span style="width:60px;display:inline-block">饱和度:</span> <span style="font-weight: bold;"> ${data.value[2]} 指标</span>`;
     },
   },
   radar: [
     {
       indicator: [
-        { name: "交通特征",max: 10 }, 
-        { name: "拥挤度" ,max: 10},
-        { name: "饱和度",max: 10 }, 
+        { name: "交通特征", max: 10 },
+        { name: "拥挤度", max: 10 },
+        { name: "饱和度", max: 10 },
       ],
       center: ["50%", "55%"],
       radius: 70,
@@ -25,8 +25,8 @@ let options = {
       shape: "circle",
       axisName: {
         formatter: function (value) {
-          return value + ' '+ (radarData[value] / 10 * 100) + "%";
-      },
+          return value + " " + (radarData[value] / 10) * 100 + "%";
+        },
         color: "#fff",
       },
       splitArea: {
@@ -55,7 +55,7 @@ let options = {
       },
       data: [
         {
-          value: [9,8,5],
+          value: [9, 8, 5],
           name: "月指标",
           areaStyle: {
             color: {

From e56d4259d3dfbd861a1428378930353ea797ce2a Mon Sep 17 00:00:00 2001
From: qingzhengli <1204552371@qq.com>
Date: Mon, 11 Mar 2024 11:22:35 +0800
Subject: [PATCH 15/15] =?UTF-8?q?feat=20=20=E5=A2=9E=E5=8A=A0enum=E7=B1=BB?=
 =?UTF-8?q?=E5=9E=8B=20=20&=20map=E4=B8=AD=E6=A1=A9=E5=8F=B7=E6=96=87?=
 =?UTF-8?q?=E5=AD=97=E6=98=BE=E7=A4=BA=E9=9A=90=E8=97=8F=E6=8E=A7=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ruoyi-ui/src/App.vue                          |  5 +
 .../images/home-Vector/Vector.svg             |  3 +
 .../images/mapBg/active_title.svg             | 20 ++++
 .../images/mapBg/fault_title.svg              | 20 ++++
 .../Home/components/HomeVector/index.vue      | 96 +++++++++++++++++++
 .../components/RoadAndEvents/utils/map.js     | 90 ++++++++++++-----
 .../views/JiHeExpressway/pages/Home/index.vue | 17 ++--
 .../src/views/JiHeExpressway/utils/enum.js    |  6 +-
 8 files changed, 224 insertions(+), 33 deletions(-)
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/images/home-Vector/Vector.svg
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/images/mapBg/active_title.svg
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/images/mapBg/fault_title.svg
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeVector/index.vue

diff --git a/ruoyi-ui/src/App.vue b/ruoyi-ui/src/App.vue
index 535fc08c..93f035b3 100644
--- a/ruoyi-ui/src/App.vue
+++ b/ruoyi-ui/src/App.vue
@@ -64,4 +64,9 @@ export default {
   font-family: "PangMenZhengDao-3";
   src: url("/static/fonts/庞门正道标题体3.ttf");
 }
+
+.amap-marker-label {
+  border: 0;
+  background-color: transparent;
+}
 </style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/home-Vector/Vector.svg b/ruoyi-ui/src/views/JiHeExpressway/images/home-Vector/Vector.svg
new file mode 100644
index 00000000..e3158ed2
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/images/home-Vector/Vector.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="28" viewBox="0 0 22 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M20.2028 0.382867H2.03965C1.20334 0.382867 0.526367 1.0602 0.526367 1.8964V15.5182C0.526367 16.355 1.2034 17.0318 2.03965 17.0318H9.60758V27.627H12.6347V17.0318H20.2027C21.0392 17.0318 21.7163 16.355 21.7163 15.5183V1.8964C21.7163 1.06023 21.0393 0.382812 20.2027 0.382812L20.2028 0.382867ZM5.06641 14.0047H3.55365V9.46395H5.06647V14.0047H5.06641ZM9.60725 14.0047H8.09438V9.46395H9.60725V14.0047ZM14.1482 14.0047H12.6348V9.46395H14.1483V14.0047H14.1482ZM18.6892 14.0047H17.1755V9.46395H18.6892V14.0047ZM20.2028 6.43713H2.03965V1.8964H20.2027V6.43713H20.2028ZM8.09438 3.40927H3.55368V4.92321H8.09441L8.09438 3.40927Z" fill="white"/>
+</svg>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/mapBg/active_title.svg b/ruoyi-ui/src/views/JiHeExpressway/images/mapBg/active_title.svg
new file mode 100644
index 00000000..f09c1e6b
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/images/mapBg/active_title.svg
@@ -0,0 +1,20 @@
+<svg width="74" height="22" viewBox="0 0 74 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Rectangle 3852">
+<g filter="url(#filter0_i_809_62)">
+<rect width="74" height="22" rx="3" fill="#1E1904"/>
+</g>
+<rect x="0.5" y="0.5" width="73" height="21" rx="2.5" stroke="#BEA019"/>
+</g>
+<defs>
+<filter id="filter0_i_809_62" x="0" y="0" width="74" height="22" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="2.4"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.745098 0 0 0 0 0.627451 0 0 0 0 0.0980392 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_809_62"/>
+</filter>
+</defs>
+</svg>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/mapBg/fault_title.svg b/ruoyi-ui/src/views/JiHeExpressway/images/mapBg/fault_title.svg
new file mode 100644
index 00000000..9009a869
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/images/mapBg/fault_title.svg
@@ -0,0 +1,20 @@
+<svg width="74" height="22" viewBox="0 0 74 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Rectangle 3851">
+<g filter="url(#filter0_i_809_38)">
+<rect width="74" height="22" rx="3" fill="#330303"/>
+</g>
+<rect x="0.5" y="0.5" width="73" height="21" rx="2.5" stroke="#D20000"/>
+</g>
+<defs>
+<filter id="filter0_i_809_38" x="0" y="0" width="74" height="22" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="2.4"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.823529 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_809_38"/>
+</filter>
+</defs>
+</svg>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeVector/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeVector/index.vue
new file mode 100644
index 00000000..6940b663
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeVector/index.vue
@@ -0,0 +1,96 @@
+<template>
+  <div class="HomeVector">
+    <Button :class="['btn', { 'btn-active': activeIcon }]" slot="reference" @click.native="handleClick('Vector')">
+      <img src="@screen/images/home-Vector/Vector.svg" />
+    </Button>
+  </div>
+</template>
+
+<script>
+import Button from "@screen/components/Buttons/Button.vue";
+import Form from "@screen/components/FormConfig";
+import * as PresetFormItems from "@screen/pages/control/event/event/FormEvent/PresetFormItems.js";
+import { merge, cloneDeep } from "lodash";
+import { markerClusterIns } from "@screen/pages/Home/components/RoadAndEvents/utils/map.js"
+export default {
+  name: "HomeVector",
+  components: {
+    Button,
+    Form,
+  },
+  data() {
+    return {
+      activeIcon: null,
+    };
+  },
+  methods: {
+    handleClick(type) {
+      this.activeIcon = this.activeIcon === type ? null : type;
+      if (this.activeIcon) window.showStakeText = true;
+      else window.showStakeText = false;
+      markerClusterIns.setData();
+    },
+    filterEnd(data) {
+      this.activeIcon = null;
+      // this.filterData = data;
+      this.$parent.$refs.RoadAndEventsRef?.setFilterData?.(data);
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+div.el-popper.global-input-search-popover {
+  background: rgba(6, 66, 88, 0.8);
+  border: 1px solid rgba(42, 217, 253, 0.6);
+  position: relative;
+  padding-top: 36px;
+  transform: translateY(24px);
+  // margin-top: 6vh;
+
+  .body {
+    .title {
+      background: linear-gradient(90deg,
+          #237e9b 0%,
+          rgba(23, 145, 184, 0) 100%);
+      padding: 3px 9px;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+    }
+
+    .close {
+      padding: 3px 9px;
+      cursor: pointer;
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: fit-content;
+    }
+
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+.image {
+  width: 50vw;
+  height: 65vh;
+}
+
+.HomeVector {
+  .btn {
+    padding: 9px;
+    background: linear-gradient(180deg, #152e3c 0%, #163a45 100%);
+    border-radius: 4px;
+    overflow: hidden;
+    height: unset;
+    border: 1px solid rgba(40, 144, 167, 1);
+  }
+
+  .btn-active {
+    background: linear-gradient(180deg, #005c79 0%, #009bcc 100%);
+  }
+}
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js
index 8aeb6151..12e76a5b 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js
@@ -24,6 +24,8 @@ import { upperFirst } from "lodash";
  */
 const faultBg = require(`@screen/images/mapBg/fault.svg`);
 const normalBg = require(`@screen/images/mapBg/active.svg`);
+const faultTitleBg = require(`@screen/images/mapBg/fault_title.svg`);
+const normalTitleBg = require(`@screen/images/mapBg/active_title.svg`);
 
 /**
  * 聚合点
@@ -206,12 +208,37 @@ export class MarkerCluster {
           lnglat: { lat, lng },
         } = markerData;
         const lngLatStr = `${lng}/${lat}`;
-
-        if (lngLatMap[lngLatStr]) {
-          context.marker.setContent(getContent(lngLatMap[lngLatStr]));
+        const data = lngLatMap[lngLatStr];
+        if (data) {
+          const state = getState(data);
+          let nowTitleBg, nowTitleColor;
+          if (state) {
+            nowTitleBg = normalTitleBg;
+            nowTitleColor = "#FFDB82";
+          } else {
+            nowTitleBg = faultTitleBg;
+            nowTitleColor = "#FF7575";
+          }
+          const item = data[0];
+          const { stakeMark } = item.extData;
+          const titleTemplate = window.showStakeText
+            ? `<p style="background-image: url('${nowTitleBg}');background-size: 100% 100%;background-repeat: no-repeat;padding: 5px;
+        font-family: PingFang SC, PingFang SC;font-weight: 400;font-size: 14px; line-height: 16px; color: ${nowTitleColor};
+        "> ${stakeMark} </p>`
+            : "";
 
           context.marker.setAnchor("bottom-center");
 
+          context.marker.setLabel({
+            direction: "bottom",
+            // offset: new AMap.Pixel(10, 0), //设置文本标注偏移量
+            content: titleTemplate, //设置文本标注内容
+          });
+
+          context.marker.setContent(getContent(data));
+          // if (window.showStakeText) context.marker.setAnchor("center");
+          // else context.marker.setAnchor("bottom-center");
+
           const offset = new AMap.Pixel(0, 0);
           context.marker.setOffset(offset);
 
@@ -278,32 +305,50 @@ export class MarkerCluster {
 
     this.markerCluster.setData(this.data);
   }
+
+  setData() {
+    this.markerCluster.setData(this.data);
+  }
 }
 
 export function getContent(data) {
   // const faultBg = require(`@screen/images/mapBg/fault.svg`);
   // const normalBg = require(`@screen/images/mapBg/active.svg`);
-  const nowBg = getState(data) ? normalBg : faultBg;
+  const state = getState(data);
+  let nowBg, nowTitleBg, nowTitleColor;
+  if (state) {
+    nowBg = normalBg;
+    nowTitleBg = normalTitleBg;
+    nowTitleColor = "#FFDB82";
+  } else {
+    nowBg = faultBg;
+    nowTitleBg = faultTitleBg;
+    nowTitleColor = "#FF7575";
+  }
+
+  const item = data[0];
+  const { stakeMark } = item.extData;
   if (data.length === 1) {
     return `
-    <div style="
-      background-image: url(${nowBg});
-      background-size: 100% 100%;
-      background-repeat: no-repeat;
-      width: 51px;
-      height: 51px;
-      display: flex;
-      justify-content: center;
-    ">
-      <img style="
-          min-width: 24px;
-          min-height: 24px;
-          width: 24px;
-          height: 24px;
-          margin-top: 8.1px;
-        " src='${getIcon(data[0])}'
-      >
-    </div>
+      <div style="
+        background-image: url(${nowBg});
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        width: 51px;
+        height: 51px;
+        display: flex;
+        align-self: center;
+        justify-content: center;
+      ">
+        <img style="
+            min-width: 24px;
+            min-height: 24px;
+            width: 24px;
+            height: 24px;
+            margin-top: 8.1px;
+          " src='${getIcon(item)}'
+        >
+      </div>
   `;
   } else {
     const width = `${36 + `${data.length}`.length * 15}px`;
@@ -319,6 +364,7 @@ export function getContent(data) {
       justify-content: center;
       align-items: center;
       padding-bottom: 9px;
+      align-self: center;
     ">
       ${data.length}
     </div>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue
index 2e0435c8..54a0cfad 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue
@@ -14,8 +14,9 @@
       <!-- 右侧 -->
       <div class="content-r">
         <div class="home-icons">
-          <HomeFilter class="filter" />
-          <HomeFrame class="Frame" />
+          <HomeFilter class="item" />
+          <HomeFrame class="item" />
+          <HomeVector class="item" />
         </div>
         <ConditionStatistics class="right card-menu" />
       </div>
@@ -41,6 +42,7 @@ import RoadAndEvents from "./components/RoadAndEvents/index.vue";
 import AMapContainer from "./components/AMapContainer/index.vue";
 import HomeFilter from "./components/HomeFilter/index.vue";
 import HomeFrame from "./components/HomeFrame/index.vue";
+import HomeVector from "./components/HomeVector/index.vue";
 import Button from '@screen/components/Buttons/Button.vue';
 
 // import InfoBoard from "./components/InfoBoard"
@@ -56,6 +58,7 @@ export default {
     Button,
     HomeFilter,
     HomeFrame,
+    HomeVector,
     // InfoBoard
   },
   data() {
@@ -148,17 +151,11 @@ export default {
         gap: 0px;
         flex-direction: column;
 
-        .filter {
-          display: flex;
-          gap: 9px;
+        .item {
           padding-top: 15px;
         }
 
-        .Frame {
-          display: flex;
-          gap: 9px;
-          padding-top: 15px;
-        }
+
       }
 
       .right {
diff --git a/ruoyi-ui/src/views/JiHeExpressway/utils/enum.js b/ruoyi-ui/src/views/JiHeExpressway/utils/enum.js
index cad7cfc3..0e405ccb 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/utils/enum.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/utils/enum.js
@@ -131,7 +131,7 @@ export const InfoWarningSource = {
   },
   7: {
     text: "气象监测器",
-  }
+  },
 };
 
 // 事件主类 warningType
@@ -147,6 +147,7 @@ export const WarningType = {
   9: "护栏碰撞",
   10: "交通事故",
   11: "车辆故障",
+  99: "其他",
 };
 
 export const WarningTypeList = Object.keys(WarningType).map((key) => {
@@ -208,6 +209,9 @@ export const WarningSubclass = {
     "9-2": "只倾斜无碰撞",
     "9-3": "碰撞后倾斜",
   },
+  99: {
+    "99-1": "其他",
+  },
 };
 
 export const WarningSubclassList = Object.keys(WarningSubclass).reduce(