天气对接

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",
+  });
+}

ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/roadNetwork/index.vue

@@ -1,9 +1,12 @@
 <template>
-    <div class='congestion'>
+  <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="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>
@@ -12,7 +15,11 @@
           <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
+              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>
@@ -23,13 +30,13 @@
 </template>
 
 <script>
-  
+import WgtTitle from "../../../widgets/title";
-  import WgtTitle from '../../../widgets/title'
+import { getQueryTheNumberOfMeteorologicalWarning } from "@/api/perception/meteorologyCheck";
 
 export default {
-    name: 'MonthStatistics',
+  name: "MonthStatistics",
   components: {
-      WgtTitle
+    WgtTitle,
   },
   data() {
     return {
@@ -37,52 +44,52 @@
         {
           text: "气象正常路段里程",
           value: "189",
-                class:"km"
+          class: "km",
         },
         {
           text: "降水路段里程",
           value: "0",
-                class:"km"
+          class: "km",
         },
         {
           text: "团雾路段里程",
           type: "array",
-                value:["0",'0'],
+          value: ["0", "0"],
-                class:['处',"km"]
+          class: ["处", "km"],
         },
         {
           text: "气象预警信息",
           type: "red",
           value: "0",
-                class:""
+          class: "",
         },
         {
           text: "能见度检测器",
           type: "arrayRed",
-                value:["0",'5'],
+          value: ["0", "5"],
-                class:['',""]
+          class: ["", ""],
-            }
-        ]
-      }
         },
-  
+      ],
-    created() {
+    };
-      
   },
-    methods: {
 
+  created() {},
+  methods: {
+    getWeatherNum() {
+      getQueryTheNumberOfMeteorologicalWarning().then((res) => {
+        this.dataList[3].value = res.data;
+        console.log("res", res);
+      });
+    },
   },
   mounted() {
-      setTimeout(() => {
+    this.getWeatherNum();
-        this.$nextTick(() => {
+    //
-         
-        });
-      });
   },
-  }
+};
 </script>
 
-  <style lang='scss' scoped>
+<style lang="scss" scoped>
 .congestion {
   width: 100%;
   .board {
@@ -93,7 +100,12 @@
     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;
@@ -110,7 +122,7 @@
           font-size: 20px;
           font-family: PangMenZhengDao;
           font-weight: 400;
-                color: #D9001B;
+          color: #d9001b;
           position: relative;
           left: 30px;
         }
@@ -118,13 +130,13 @@
 
       .item.arrayRed {
         .num span:first-child {
-                color: #D9001B;
+          color: #d9001b;
           margin: 0px;
           margin-left: 20px;
         }
 
         .midd {
-              color:#00D1FF !important;
+          color: #00d1ff !important;
         }
 
         .typeClass {
@@ -143,7 +155,7 @@
           font-size: 14px;
           font-family: PingFang SC, PingFang SC;
           font-weight: 500;
-                color: #FFFFFF;
+          color: #ffffff;
         }
 
         .num {
@@ -151,7 +163,7 @@
           font-size: 20px;
           font-family: PangMenZhengDao;
           font-weight: 400;
-                color: #00D1FF;
+          color: #00d1ff;
           position: relative;
         }
 
@@ -165,13 +177,10 @@
         }
       }
     }
-
   }
 }
 .charts {
   height: 180px;
   width: 100%;
 }
-  
 </style>
-  

ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/sortFaceForecast/index.vue

@@ -1,12 +1,71 @@
 <template>
-    <div class='congestion'>
+  <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>
+          <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="(it,index) in pointList" >
+          <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="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>
@@ -16,7 +75,7 @@
                 <span class="text">{{ item.value }}</span>
               </div>
             </div>
-            </div>
+          </div> -->
         </div>
       </div>
     </div>
@@ -24,54 +83,72 @@
 </template>
 
 <script>
-  export default {
+import {
-    name: 'SortFaceForecast',
+  getWeatherFacts,
-    components: {
+  getHourlyWeather,
+} from "@/api/perception/meteorologyCheck";
+import moment from "moment";
 
-    },
+export default {
+  name: "SortFaceForecast",
+  components: {},
   data() {
     return {
+      moment: moment,
       selectIndex: 0,
       buttons: [
         {
-            text:"实时"
+          text: "实时",
+          id: 0,
         },
         {
-            text:"1小时"
+          text: "1小时",
+          id: 1,
         },
         {
-            text:"2小时"
+          text: "2小时",
+          id: 2,
         },
         {
-            text:"3小时"
+          text: "3小时",
+          id: 3,
         },
         {
-            text:"4小时"
+          text: "4小时",
+          id: 4,
         },
         {
-            text:"5小时"
+          text: "5小时",
+          id: 5,
         },
         {
-            text:"6小时"
+          text: "6小时",
+          id: 6,
         },
         {
-            text:"10小时"
+          text: "10小时",
+          id: 10,
         },
         {
-            text:"14小时"
+          text: "14小时",
+          id: 14,
         },
         {
-            text:"20小时"
+          text: "20小时",
+          id: 20,
         },
         {
-            text:"24小时"
+          text: "24小时",
+          id: 24,
         },
         {
-            text:"36小时"
+          text: "36小时",
+          id: 36,
         },
         {
-            text:"48小时"
+          text: "48小时",
-          }
+          id: 48,
+        },
       ],
       pointList: [
         {
@@ -163,8 +240,8 @@
             {
               label: "风向：",
               value: "西",
-              }
+            },
-            ]
+          ],
         },
         {
           textList: [
@@ -212,7 +289,7 @@
               label: "风速：",
               value: "2.3m/s",
             },
-            ]
+          ],
         },
         {
           textList: [
@@ -260,7 +337,7 @@
               label: "风速：",
               value: "2.3m/s",
             },
-            ]
+          ],
         },
         {
           textList: [
@@ -308,7 +385,7 @@
               label: "风速：",
               value: "2.3m/s",
             },
-            ]
+          ],
         },
         {
           textList: [
@@ -356,7 +433,7 @@
               label: "风速：",
               value: "2.3m/s",
             },
-            ]
+          ],
         },
         {
           textList: [
@@ -404,32 +481,97 @@
               label: "风速：",
               value: "2.3m/s",
             },
-            ]
+          ],
-          }
-        ]
-      }
         },
-  
+      ],
-    created() {
+      weatherList: [],
-      
+    };
   },
+
+  created() {},
   methods: {
-      selectItem(index){
+    selectItem(id, index) {
-        this.selectIndex = index;
+      this.selectIndex = id;
+      if (id === 0) {
+        this.getRealtimeWeatherFacts();
+      } else {
+        this.getHourlyWeatherFacts(id);
+      }
     },
+    // 实时天气
+    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() {
+    // 按小时查询天气
-   
+    getHourlyWeatherFacts(id) {
-      setTimeout(() => {
+      getHourlyWeather().then((response) => {
-        this.$nextTick(() => {
+        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);
       });
     },
-  }
+  },
+  mounted() {
+    this.getRealtimeWeatherFacts();
+  },
+};
 </script>
 
-  <style lang='scss' scoped>
+<style lang="scss" scoped>
 .congestion {
   width: 100%;
   height: 100%;
@@ -437,11 +579,10 @@
   .board {
     height: calc(100% - 235px);
     width: 100%;
-      padding: 0px 20px;
+    // padding: 0px 20px;
     border-radius: 5px 5px 5px 5px;
     opacity: 1;
 
-
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -477,11 +618,12 @@
           font-size: 14px;
           font-family: PingFang SC, PingFang SC;
           font-weight: 400;
-              color: #FFFFFF;
+          color: #ffffff;
           cursor: pointer;
         }
 
-           .btn:hover,.btn.action {
+        .btn:hover,
+        .btn.action {
           background-image: url(./assets/button_hover.png);
         }
       }
@@ -523,18 +665,26 @@
               height: 2px;
               top: 14px;
               left: -200px;
-                  background:  linear-gradient(90deg, rgba(59, 216, 188, 1), rgba(29, 171, 215, 1));
+              background: linear-gradient(
+                90deg,
+                rgba(59, 216, 188, 1),
+                rgba(29, 171, 215, 1)
+              );
             }
 
             span::before {
               content: "";
               position: absolute;
               display: inline-flex;
-                  width:189px;;
+              width: 189px;
               height: 2px;
               top: 14px;
               left: 35px;
-                  background:  linear-gradient(90deg, rgba(59, 216, 188, 1), rgba(29, 171, 215, 1));
+              background: linear-gradient(
+                90deg,
+                rgba(59, 216, 188, 1),
+                rgba(29, 171, 215, 1)
+              );
             }
           }
 
@@ -549,14 +699,14 @@
           .messBody::-webkit-scrollbar-thumb {
             border-radius: 6px;
             -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-                background: #3785A0;
+            background: #3785a0;
           }
 
           /*滚动条里面轨道*/
           .messBody::-webkit-scrollbar-track {
             -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
             border-radius: 10px;
-                background: #11485A;
+            background: #11485a;
           }
           .messBody {
             position: relative;
@@ -567,10 +717,19 @@
             margin-top: 35px;
             min-height: 402.8px;
             max-height: 624px;
-                background:linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #06425880 100%);
+            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;
+            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;
@@ -578,37 +737,32 @@
               display: inline-flex;
               width: auto;
               height: 21px;
-                  margin:9px 29px;
+              margin: 9px 20px;
 
               > span.title {
-                    display: inline-flex;
+                display: block;
                 font-size: 14px;
                 font-family: PingFang SC, PingFang SC;
                 font-weight: 400;
-                    color: #37E7FF;
+                color: #37e7ff;
-                    width:84px;
+                width: 100px;
               }
 
               > .text {
                 font-size: 14px;
                 font-family: PingFang SC, PingFang SC;
                 font-weight: 500;
-                    color: #FFFFFF;
+                color: #ffffff;
               }
-
             }
           }
         }
-
       }
     }
-
   }
 }
 .charts {
   height: 180px;
   width: 100%;
 }
-  
 </style>
-  

ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherForecast/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class='congestion'>
+  <div class="congestion">
     <WgtTitle :title="'天气预报'"></WgtTitle>
     <div class="board">
       <div class="showRoad">
@@ -44,13 +44,12 @@
 </template>
 
 <script>
-  
+import WgtTitle from "../../../widgets/title";
-  import WgtTitle from '../../../widgets/title'
 
 export default {
-    name: 'MonthStatistics',
+  name: "MonthStatistics",
   components: {
-      WgtTitle
+    WgtTitle,
   },
   data() {
     return {
@@ -76,28 +75,22 @@
         {
           text: "紫外线",
           value: "3",
-            }
-        ]
-      }
         },
-  
+      ],
-    created() {
+    };
-      
   },
-    methods: {
 
-    },
+  created() {},
+  methods: {},
   mounted() {
     setTimeout(() => {
-        this.$nextTick(() => {
+      this.$nextTick(() => {});
-         
-        });
     });
   },
-  }
+};
 </script>
 
-  <style lang='scss' scoped>
+<style lang="scss" scoped>
 .congestion {
   width: 100%;
   .board {
@@ -108,7 +101,12 @@
     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;
@@ -124,7 +122,6 @@
       > div {
         display: inline-flex;
         flex-direction: column;
-          
       }
 
       .weaterIcon {
@@ -139,19 +136,17 @@
           display: inline-flex;
           width: 43px;
           height: 43px;
-
         }
 
         > div {
           font-size: 12px;
           font-family: PingFang SC, PingFang SC;
           font-weight: 500;
-                color: #FFFFFF; 
+          color: #ffffff;
           margin-top: 10px;
         }
       }
 
-
       .weaterNum {
         display: inline-flex;
         width: 60px;
@@ -164,17 +159,16 @@
           font-size: 34px;
           font-family: PingFang SC, PingFang SC;
           font-weight: 500;
-                color: #FFFFFF; 
+          color: #ffffff;
         }
 
         .maxMin {
           font-size: 12px;
           font-family: PingFang SC, PingFang SC;
           font-weight: 500;
-                color: #FFFFFF;
+          color: #ffffff;
           margin-top: 6px;
         }
-
       }
 
       .windType {
@@ -195,18 +189,18 @@
           background: rgba(245, 80, 80, 0.4);
           border-radius: 2px 2px 2px 2px;
           opacity: 1;
-                border: 1px solid #F55050;
+          border: 1px solid #f55050;
           font-size: 12px;
           font-family: Source Han Sans SC, Source Han Sans SC;
           font-weight: 400;
-                color: #F55050;
+          color: #f55050;
         }
 
         .windTypeStr {
           font-size: 12px;
           font-family: PingFang SC, PingFang SC;
           font-weight: 500;
-                color: #FFFFFF;
+          color: #ffffff;
           margin-top: 13px;
         }
       }
@@ -218,7 +212,12 @@
         height: 86px;
         opacity: 1;
         border: 1px solid;
-            border-image: linear-gradient(320deg, rgba(6, 92, 120, 1), rgba(6, 92, 120, 0)) 1 1;
+        border-image: linear-gradient(
+            320deg,
+            rgba(6, 92, 120, 1),
+            rgba(6, 92, 120, 0)
+          )
+          1 1;
       }
 
       .cityType {
@@ -232,15 +231,14 @@
         img {
           width: 38px;
           height: 40px;
-
         }
 
         .cityText {
           font-size: 12px;
           font-family: PingFang SC, PingFang SC;
           font-weight: 500;
-                color: #FFFFFF;
+          color: #ffffff;
-                margin-top: 10px;;
+          margin-top: 10px;
         }
       }
 
@@ -252,7 +250,12 @@
         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-image: linear-gradient(
+            180deg,
+            rgba(1, 37, 48, 0),
+            rgba(1, 149, 196, 1)
+          )
+          1 1;
         border-radius: 8px;
 
         > div {
@@ -278,7 +281,7 @@
             font-size: 14px;
             font-family: PingFang SC, PingFang SC;
             font-weight: 500;
-                    color: #FFFFFF;
+            color: #ffffff;
             position: relative;
             left: 10px;
           }
@@ -291,6 +294,4 @@
   height: 180px;
   width: 100%;
 }
-  
 </style>
-  

ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherWarning/components/infoWarning/index.vue

@@ -1,149 +1,167 @@
 <template>
-    <div class='congestion'>
+  <div class="congestion">
     <WgtTitle :title="'气象预警信息'"></WgtTitle>
     <div class="board">
       <div class="weaterMain">
         <div class="weaterTitle">
           <span class="text">当前气象预警信息数：</span>
-                    <span class="num">113</span>
+          <span class="num">{{ warningData.length }}</span>
         </div>
         <div>
-                    <el-select v-model="colorSelect" size="mini" class="selectRoad" placeholder="请选择">
+          <el-select
-                        <el-option v-for="item in colors" :key="item.value" :label="item.label" :value="item.value">
+            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">
+      <div class="warningList" v-if="warningList.length > 0">
-                <div class="itemWarning" v-for="(item, i) in warnings">
+        <div class="itemWarning" v-for="item in warningList">
           <div class="left-w">
             <div class="left-row">
-                            <div class="label">
+              <div class="label">预警类型：</div>
-                                预警类型：
-                            </div>
               <div class="value">
-                                {{ item.class }}
+                {{ item.typeName }}
               </div>
             </div>
             <div class="left-row">
-                            <div class="label">
+              <div class="label">预警等级：</div>
-                                预警等级：
+              <div :class="item.severityColor">
-                            </div>
+                {{ item.severityColor }}
-                            <div :class="'value ' + item.type">
+                {{
-                                {{ item.lay }}
+                  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="left-row">
+            <!-- <div class="left-row">
-                            <div class="label">
+              <div class="label">预警范围：</div>
-                                预警范围：
-                            </div>
               <div class="value">
                 {{ item.scope }}
               </div>
-                        </div>
+            </div> -->
             <div class="left-row">
-                            <div class="label">
+              <div class="label">预警发布时间：</div>
-                                预警发布时间：
-                            </div>
               <div class="value">
-                                {{ item.dateTime }}
+                {{ item.pubTime }}
               </div>
             </div>
           </div>
           <div class="right-w">
-                        <div class="right-row">
+            <div class="right-row">预警内容:</div>
-                            预警内容:
-                        </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 { color } from "echarts";
-import WgtTitle from '../../../../../widgets/title'
+import WgtTitle from "../../../../../widgets/title";
+import { getMeteorologicalEarlyWarning } from "@/api/perception/meteorologyCheck";
 
 export default {
-    name: 'infoWarning',
+  name: "infoWarning",
   components: {
-        WgtTitle
+    WgtTitle,
   },
   data() {
     return {
-            colorSelect: "org",
+      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: "all" },
-                { label: '橙色', value: "org" },
+        { label: "白色", value: "White" },
-                { label: '红色', value: "red" },
+        { label: "蓝色", value: "Blue" },
-                { label: '蓝色', value: "bule" },
+        { label: "绿色", value: "Green" },
+        { label: "黄色", value: "Yellow" },
+        { label: "橙色", value: "Orange" },
+        { label: "红色", value: "Red" },
+        { label: "黑色", value: "Black" },
       ],
-            warnings: [
+    };
-                {
-                    type: "org",
-                    class: "道路结冰",
-                    lay: "橙色",
-                    scope: "K100+000",
-                    dateTime: "2023-12-31 13:00:00",
-                    text: "威海市文登区气象台2023年12月21日7时30分将道路结冰黄色预警信号升级为道路结冰橙色预警信号：受降雪和低温影响，我区全部乡镇和街道仍有对交通有较大影响的道路结冰和积雪。请注意防范道路结冰对交通运输、室外作业、农业生产等带来的不利影响。"
   },
-                {
+  watch: {
-                    type: "org",
+    colorSelect(val) {
-                    class: "道路结冰",
+      if (val !== "all") {
-                    lay: "橙色",
+        const data = this.warningData.filter(
-                    scope: "K100+000",
+          (item) => item.severityColor === val
-                    dateTime: "2023-12-31 13:00:00",
+        );
-                    text: "威海市文登区气象台2023年12月21日7时30分将道路结冰黄色预警信号升级为道路结冰橙色预警信号：受降雪和低温影响，我区全部乡镇和街道仍有对交通有较大影响的道路结冰和积雪。请注意防范道路结冰对交通运输、室外作业、农业生产等带来的不利影响。"
+        this.warningList = data;
+        this.warningList = data;
+      } else {
+        this.warningList = this.warningData;
+      }
+
+      // this.changeValue(val);
     },
-                {
-                    type: "org",
-                    class: "道路结冰",
-                    lay: "橙色",
-                    scope: "K100+000",
-                    dateTime: "2023-12-31 13:00:00",
-                    text: "威海市文登区气象台2023年12月21日7时30分将道路结冰黄色预警信号升级为道路结冰橙色预警信号：受降雪和低温影响，我区全部乡镇和街道仍有对交通有较大影响的道路结冰和积雪。请注意防范道路结冰对交通运输、室外作业、农业生产等带来的不利影响。"
   },
-                {
+  created() {},
-                    type: "org",
+  methods: {
-                    class: "道路结冰",
+    getWarningData() {
-                    lay: "橙色",
+      getMeteorologicalEarlyWarning().then((res) => {
-                    scope: "K100+000",
+        console.log("气象预警", res.data);
-                    dateTime: "2023-12-31 13:00:00",
+        let data = [];
-                    text: "威海市文登区气象台2023年12月21日7时30分将道路结冰黄色预警信号升级为道路结冰橙色预警信号：受降雪和低温影响，我区全部乡镇和街道仍有对交通有较大影响的道路结冰和积雪。请注意防范道路结冰对交通运输、室外作业、农业生产等带来的不利影响。"
+        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;
-    created() {
+      });
-
-    },
-    methods: {
-        selectItem(index) {
-            this.selectIndex = index;
     },
   },
   mounted() {
-
+    this.getWarningData();
-        setTimeout(() => {
-            this.$nextTick(() => {
-
-            });
-        });
   },
-}
+};
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .selectRoad {
   width: 89px;
   margin-top: 5px;
   margin-left: 20px;
-    border: 1px solid #00B3CC;
+  border: 1px solid #00b3cc;
 
   ::v-deep {
     .el-input__inner {
@@ -214,13 +232,18 @@ export default {
         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;
+        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;
+        color: #37e7ff;
 
         > .left-w {
           display: inline-flex;
@@ -244,9 +267,29 @@ export default {
               margin-top: 2px;
               font-family: PangMenZhengDao;
               font-weight: 400;
-                            color: #F4A125
+              color: #f4a125;
+            }
+            .White {
+              color: #fff;
+            }
+            .Blue {
+              color: blue;
+            }
+            .Green {
+              color: green;
+            }
+            .Yellow {
+              color: yellow;
+            }
+            .Orange {
+              color: orange;
+            }
+            .Red {
+              color: red;
+            }
+            .Black {
+              color: #000;
             }
-
           }
         }
 
@@ -265,7 +308,6 @@ export default {
             color: #fff;
           }
         }
-
       }
     }
 
@@ -275,7 +317,6 @@ export default {
       width: 100%;
       height: 40px;
 
-
       .buttons {
         width: 100%;
         height: 38px;
@@ -290,7 +331,7 @@ export default {
           font-size: 12px;
           font-family: PangMenZhengDao;
           font-weight: 800;
-                    color: #FFFFFF;
+          color: #ffffff;
           z-index: 9;
         }
 
@@ -300,7 +341,11 @@ export default {
           display: inline-flex;
           width: 55px;
           height: 36px;
-                    background: linear-gradient(180deg, #6557D7 0%, rgba(101, 87, 216, 0) 100%);
+          background: linear-gradient(
+            180deg,
+            #6557d7 0%,
+            rgba(101, 87, 216, 0) 100%
+          );
           border-radius: 50%;
           opacity: 1;
           z-index: -1;
@@ -308,19 +353,35 @@ export default {
         }
 
         .redSel::after {
-                    background: linear-gradient(180deg, #E73A14 0%, rgba(240, 92, 9, 0) 100%);
+          background: linear-gradient(
+            180deg,
+            #e73a14 0%,
+            rgba(240, 92, 9, 0) 100%
+          );
         }
 
         .yelSel::after {
-                    background: linear-gradient(180deg, #FFFA79 0%, rgba(255, 208, 137, 0) 100%);
+          background: linear-gradient(
+            180deg,
+            #fffa79 0%,
+            rgba(255, 208, 137, 0) 100%
+          );
         }
 
         .bluSel::after {
-                    background: linear-gradient(180deg, #121ADE 0%, rgba(40, 18, 228, 0) 100%);
+          background: linear-gradient(
+            180deg,
+            #121ade 0%,
+            rgba(40, 18, 228, 0) 100%
+          );
         }
 
         .orgSel::after {
-                    background: linear-gradient(180deg, #FFA623 0%, rgba(255, 173, 53, 0) 100%);
+          background: linear-gradient(
+            180deg,
+            #ffa623 0%,
+            rgba(255, 173, 53, 0) 100%
+          );
         }
       }
 
@@ -331,7 +392,12 @@ export default {
         left: 0px;
         width: 100%;
         height: 2px;
-                background: linear-gradient(90deg, rgba(189, 255, 246, 0) 0%, #BDFFF6 52%, rgba(189, 255, 246, 0) 100%);
+        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;
       }
@@ -343,7 +409,12 @@ export default {
         left: 0px;
         width: 100%;
         height: 2px;
-                background: linear-gradient(90deg, rgba(189, 255, 246, 0) 0%, #BDFFF6 52%, rgba(189, 255, 246, 0) 100%);
+        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;
       }
@@ -353,23 +424,25 @@ export default {
         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%);
+        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;
+          color: #ffffff;
         }
 
-
         .num {
           display: inline-flex;
           justify-content: center;
@@ -377,11 +450,10 @@ export default {
           font-size: 20px;
           font-family: PangMenZhengDao;
           font-weight: 400;
-                    color: #D9001B;
+          color: #d9001b;
         }
       }
     }
-
   }
 }
 
@@ -390,4 +462,3 @@ export default {
   width: 100%;
 }
 </style>
-  

ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/index.vue

@@ -1,8 +1,8 @@
 <template>
-    <div class='TrafficFlow'>
+  <div class="TrafficFlow">
     <section class="content">
       <RoadNetwork class="content-l" />
-        <WeatherForecast 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">
@@ -23,44 +23,42 @@
 </template>
 
 <script>
-  import RoadNetwork from './components/roadNetwork';
+import RoadNetwork from "./components/roadNetwork";
-  import WeatherForecast from './components/weatherForecast';
+import WeatherForecast from "./components/weatherForecast";
-  import SortFaceForecast from './components/sortFaceForecast';
+import SortFaceForecast from "./components/sortFaceForecast";
-  import WeatherInfoQuery from './components/weatherInfoQuery';
+import WeatherInfoQuery from "./components/weatherInfoQuery";
-  import WeatherWarning from './components/weatherWarning';
+import WeatherWarning from "./components/weatherWarning";
 
 export default {
-    name: 'MeteorologyCheck',
+  name: "MeteorologyCheck",
   components: {
     RoadNetwork,
     WeatherForecast,
     SortFaceForecast,
     WeatherInfoQuery,
-        WeatherWarning
+    WeatherWarning,
   },
   data() {
     return {
-            activeName:"first"
+      activeName: "first",
-        }
+    };
   },
   methods: {
     changeTabs() {
       this.$refs.infoQuery.resizeChart();
-      }
+    },
-    }
+  },
-    
+};
-  }
 </script>
 
-  <style lang='scss' scoped>
+<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;
+  color: #ffffff;
   min-width: 128px;
   position: relative;
   left: 10px;
@@ -77,8 +75,7 @@
 
 .footTabs {
   display: inline;
-     width:99%;
+  width: 100%;
-
 }
 
 .TrafficFlow {
@@ -108,10 +105,8 @@
       width: calc(50%);
       min-width: 460px;
       margin-right: 20px;
-
     }
 
-  
     .content-m {
       display: inline-flex;
       flex-direction: column;
@@ -142,7 +137,6 @@
 
     .foot-w {
       width: 100%;
-
     }
 
     .foot-l {
@@ -157,4 +151,3 @@
   }
 }
 </style>
-  

ruoyi-ui/src/views/event/event/dispatch.vue

@@ -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>
+              <h4 style="color: #fff">{{ activity.flowDescription }}</h4>
-              <p style="color: #fff;">用户:{{activity.nickName}}</p>
+              <p style="color: #fff">用户:{{ activity.nickName }}</p>
             </el-card>
           </el-timeline-item>
         </el-timeline>
@@ -62,7 +63,7 @@
       <div class="dispatchLeft">
         <div class="video">
           <div class="title">
-              <i class="el-icon-video-camera" style="margin-right:15px;"></i>
+            <i class="el-icon-video-camera" style="margin-right: 15px"></i>
             实时视频
             <span>VIDEO MONITORING</span>
             <div class="touping" @click="handleTouping">投屏</div>
@@ -121,7 +122,7 @@
         </div>
         <div class="evtMessage">
           <div class="title">
-              <i class="el-icon-notebook-2" style="margin-right:15px;"></i>
+            <i class="el-icon-notebook-2" style="margin-right: 15px"></i>
             事件信息
             <span>EVENT INFORMATION</span>
           </div>
@@ -144,8 +145,16 @@
                 <div>{{ getDirection(eventForm.direction, eventForm) }}</div>
               </div>
               <div>
-                  <div style="display: flex;justify-content: left;align-items: center;">影响车道：</div>
+                <div
-                  <div style="width: 45%;">{{ eventForm.laneNoName }}</div>
+                  style="
+                    display: flex;
+                    justify-content: left;
+                    align-items: center;
+                  "
+                >
+                  影响车道：
+                </div>
+                <div style="width: 45%">{{ eventForm.laneNoName }}</div>
               </div>
               <div>
                 <div>桩号：</div>
@@ -162,7 +171,10 @@
                   fluid
                 ></video>
               </div>
-                <div class="evtMessImg" v-if="eventForm.iconUrlList && eventForm.iconUrlList.length > 0">
+              <div
+                class="evtMessImg"
+                v-if="eventForm.iconUrlList && eventForm.iconUrlList.length > 0"
+              >
                 <el-image
                   v-for="(item, index) of eventForm.iconUrlList"
                   :key="index"
@@ -175,14 +187,18 @@
         </div>
         <div class="plan">
           <div class="title">
-              <i class="el-icon-phone-outline" style="margin-right:15px;"></i>
+            <i class="el-icon-phone-outline" style="margin-right: 15px"></i>
             调度联络
             <span>DISPATCHING LIAISON</span>
           </div>
           <div>
             <el-tabs v-model="activeName" @tab-click="handleClick" type="card">
-                <el-tab-pane v-for="(item,index) in emergencyList" :key="index"
+              <el-tab-pane
-                 :label="item.dictLabel" :name="item.dictValue">
+                v-for="(item, index) in emergencyList"
+                :key="index"
+                :label="item.dictLabel"
+                :name="item.dictValue"
+              >
                 <el-table
                   :data="implementList"
                   stripe
@@ -196,12 +212,22 @@
                     prop="userName"
                     width="100"
                   />
-              <el-table-column label="联系方式" align="center" prop="phone" width="150">
+                  <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-column
+                    label="岗位"
+                    align="center"
+                    prop="groupName"
+                    width="150"
+                  />
                 </el-table>
               </el-tab-pane>
             </el-tabs>
@@ -210,10 +236,10 @@
       </div>
     </div>
     <div class="disLeftBox">
-      <div style="height:100%;">
+      <div style="height: 100%">
         <div class="IncHand">
           <div class="title">
-          <i class="el-icon-document" style="margin-right:15px;"></i>
+            <i class="el-icon-document" style="margin-right: 15px"></i>
             事件处置
             <span class="small">EVENT HANDLING</span>
           </div>
@@ -228,24 +254,40 @@
                 <p>{{ deadline4 }}</p>
               </div>
             </div>
-          <div class="dieBox" style="height: 75%;overflow-y: auto;">
+            <div class="dieBox" style="height: 75%; overflow-y: auto">
-            <div class="heightBox" style="height:100%;">
+              <div class="heightBox" style="height: 100%">
                 <div
                   v-for="(item, index) of incHandList"
                   :key="index"
-                :class="item.reserveId?'incHandContent incHandContentBox':'incHandContent'"
+                  :class="
+                    item.reserveId
+                      ? 'incHandContent incHandContentBox'
+                      : 'incHandContent'
+                  "
                   :ref="'incHandContent' + index"
                 >
-                <div :class="item.reserveId?'classification classificationBox':'classification'">
+                  <div
-                  <div class="topDashed" v-show="index != 0"
+                    :class="
-                    :style="{'top':item.circlePosition}">
+                      item.reserveId
-                    <p
+                        ? 'classification classificationBox'
-                      :style="{'height':item.lineHeight+'px'}">
+                        : 'classification'
-                    </p>
+                    "
+                  >
+                    <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-tooltip
+                        class="item"
+                        effect="dark"
+                        :content="item.flowContent"
+                        placement="right"
+                      >
                         <div
                           class="type"
                           :style="{
@@ -262,23 +304,34 @@
                       </el-tooltip>
                       <div
                         v-show="getShow(item, index) == false && index != '0'"
-                      class="yijian" @click="getYiJian(item)"
+                        class="yijian"
-                      style="cursor: pointer">
+                        @click="getYiJian(item)"
+                        style="cursor: pointer"
+                      >
                         一键
                       </div>
 
-                    <div class="yijian"
+                      <div
+                        class="yijian"
                         v-show="getShow(item, index) == true && index != '0'"
                         @click="getYiJian(item)"
-                      style="cursor: pointer;">
+                        style="cursor: pointer"
+                      >
                         详情
                       </div>
                     </div>
-                  <div class="dashed"
+                    <div
+                      class="dashed"
                       :style="{ top: index == 0 ? '55px' : '76px' }"
-                    v-show="index != incHandList.length - 1">
+                      v-show="index != incHandList.length - 1"
+                    >
                       <span class="circle"></span>
-                    <p :style="{height:index == 0?'50px':item.lineHeight + 12 + 'px'}"></p>
+                      <p
+                        :style="{
+                          height:
+                            index == 0 ? '50px' : item.lineHeight + 12 + 'px',
+                        }"
+                      ></p>
                     </div>
                   </div>
 
@@ -297,40 +350,58 @@
                         : '',
                     }"
                   ></div>
-                <div style="width:100%;">
+                  <div style="width: 100%">
                     <div
                       v-for="(itm, inx) of item.children"
                       :key="inx"
                       class="contentList"
-                    style="width:100%;"
+                      style="width: 100%"
                     >
-                    <div style="float: left;padding-right: 20px;line-height: 20px;">{{ itm.flowContent }}</div>
+                      <div
+                        style="
+                          float: left;
+                          padding-right: 20px;
+                          line-height: 20px;
+                        "
+                      >
+                        {{ itm.flowContent }}
+                      </div>
                       <!-- 预警完成按钮 -->
-                    <el-button type="success"
+                      <el-button
+                        type="success"
                         plain
                         size="mini"
-                      style="float: right; "
+                        style="float: right"
                         icon="el-icon-check"
-                      v-show="itm.eventState != '0' && !itm.processId">
+                        v-show="itm.eventState != '0' && !itm.processId"
+                      >
                         完成
                       </el-button>
                       <!-- 预案完成按钮 -->
-                    <el-button type="success"
+                      <el-button
+                        type="success"
                         plain
                         size="mini"
-                      style="float: right; "
+                        style="float: right"
                         icon="el-icon-check"
-                      v-show="itm.eventState != '0' && itm.processId && itm.eqTypeId != '29'"
+                        v-show="
-                      @click="getManagementDevice(itm)">
+                          itm.eventState != '0' &&
+                          itm.processId &&
+                          itm.eqTypeId != '29'
+                        "
+                        @click="getManagementDevice(itm)"
+                      >
                         完成
                       </el-button>
-                    <el-button type="success"
+                      <el-button
+                        type="success"
                         plain
                         size="mini"
-                      style="float: right; "
+                        style="float: right"
                         icon="el-icon-check"
                         v-show="itm.eventState != '0' && itm.eqTypeId == '29'"
-                      @click="getManagementDevice(itm)">
+                        @click="getManagementDevice(itm)"
+                      >
                         打开
                       </el-button>
                       <!-- <img
@@ -339,8 +410,17 @@
                       v-show="itm.eventState != '0'"
                     /> -->
                       <!-- 下发 -->
-                    <div class="sendMsg" v-show="itm.eventState == '0'" @click="getManagementDevice(itm)">
+                      <div
-                      <el-button type="primary" size="mini" icon="el-icon-pie-chart">处置</el-button>
+                        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; "
@@ -358,7 +438,9 @@
             <!-- <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-button round type="warning" @click="levelTop"
+                >警情升级</el-button
+              >
             </div>
           </div>
         </div>
@@ -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,52 +772,61 @@
       :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
+              <el-input v-model="levelForm.typeName" :disabled="true">
-                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
+              <el-input v-model="levelForm.dengji" :disabled="true"> </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
+              <el-input v-model="levelForm.yaName" :disabled="true"> </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-select
-                <el-option v-for="dict in eventGradeList"
+                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-select
-              <el-option label="区域一"  v-for="(item,index) in ReservePlanList"
+                v-model="levelForm.currencyId"
+                placeholder="请选择预案"
+              >
+                <el-option
+                  label="区域一"
+                  v-for="(item, index) in ReservePlanList"
                   :key="item.id"
                   :label="item.planName"
                   :value="item.id"
@@ -746,14 +841,17 @@
                 type="textarea"
                 :rows="5"
                 placeholder="请输入升级原因"
-              v-model="levelForm.remark">
+                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>
@@ -774,7 +872,7 @@
       <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"
@@ -783,16 +881,8 @@
               :fit="true"
               empty-text="该桩号下暂无匹配设备"
             >
-                <el-table-column
+              <el-table-column label="设备名称" align="center" prop="eqName" />
-                  label="设备名称"
+              <el-table-column label="桩号" align="center" prop="eqPile" />
-                  align="center"
-                  prop="eqName"
-                />
-                <el-table-column
-                  label="桩号"
-                  align="center"
-                  prop="eqPile"
-                />
               <el-table-column label="执行状态" align="center">
                 <template>
                   <span>{{ deviceStateName }}</span>
@@ -802,49 +892,78 @@
             <!-- </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
-                <div :style="{
+                style="
-                  'width':GDeviceData.vmsData['width'] + 'px',
+                  display: flex;
-                  'height':GDeviceData.vmsData['height'] + 'px',
+                  justify-content: flex-start;
-                  'color':GDeviceData.vmsData['font_color'],
+                  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',
+                    position: 'relative',
-                  }">
+                  }"
-                  <span :style="{
+                >
-                    'position':'absolute',
+                  <span
-                    'top':GDeviceData.vmsData['top'] + 'px',
+                    :style="{
-                    'left':GDeviceData.vmsData['left'] + 'px',
+                      position: 'absolute',
+                      top: GDeviceData.vmsData['top'] + 'px',
+                      left: GDeviceData.vmsData['left'] + 'px',
                     }"
                     style="line-height: 1"
-                  v-html="GDeviceData.vmsData['content'].replace(
+                    v-html="
-                              /\n|\r\n/g,
+                      GDeviceData.vmsData['content']
-                              '<br>'
+                        .replace(/\n|\r\n/g, '<br>')
-                            ).replace(/ /g, ' &nbsp')">
+                        .replace(/ /g, ' &nbsp')
+                    "
+                  >
                   </span>
                 </div>
               </div>
             </el-card>
           </el-col>
-          <el-col :span="24" v-if="boxName == '下发指令' || boxName == '执行文件' && GDeviceData.deviceList != undefined">
+          <el-col
-            <p style="padding:15px;">{{boxName}}:</p>
+            :span="24"
-            <el-card v-show="GDeviceData && !GDeviceData.vmsData" shadow="always">
+            v-if="
-              <div style="display: flex;align-items: center;">
+              boxName == '下发指令' ||
-                <img v-for="(items,idx) in GDeviceData.deviceIconUrl" :key="idx"
+              (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
-        <el-button @click="cancelIssuedDialog" class="closeButton">取 消</el-button>
+          v-show="buttonDisable"
+          @click="changeIncHand"
+          class="submitButton"
+          >执 行</el-button
+        >
+        <el-button @click="cancelIssuedDialog" class="closeButton"
+          >取 消</el-button
+        >
       </div>
     </el-dialog>
     <!-- 一键详情弹窗 -->
@@ -863,73 +982,107 @@
       </div>
       <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">
+        <div
+          v-for="(item, index) in oneKeyList"
+          :key="index"
+          class="GDeviceCard"
+        >
           <el-card>
-            <p style="padding-bottom:15px;">{{item.processName}}</p>
+            <p style="padding-bottom: 15px">{{ item.processName }}</p>
             <el-table
               v-show="oneKeyList.length >= 1"
               :data="item.deviceList"
               style="width: 100%"
-              class="phoneTable">
+              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"
+                v-if="
+                  item.deviceType != '22' &&
+                  item.deviceType != '16' &&
+                  item.deviceType != '36'
+                "
               >
-              </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 }}
               </el-table-column>
-              <el-table-column label="执行文件" align="center" v-if="item.deviceType == '22'">
+              <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>
             <!-- 情报板 -->
-            <p v-if="item.deviceType == '16' || item.deviceType == '36'" style="padding-bottom:15px;">执行模板:</p>
+            <p
-            <div class="templateImg" v-if="item.deviceType == '16' || item.deviceType == '36'">
+              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
-                  <div :style="{
+                  style="
-                    'width':item.vmsData['width'] + 'px',
+                    display: flex;
-                    'height':item.vmsData['height'] + 'px',
+                    justify-content: flex-start;
-                    'color':item.vmsData['font_color'],
+                    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',
+                      position: 'relative',
-                    }">
+                    }"
-                    <span :style="{
+                  >
-                      'position':'absolute',
+                    <span
-                      'top':item.vmsData['top'] + 'px',
+                      :style="{
-                      'left':item.vmsData['left'] + 'px',
+                        position: 'absolute',
+                        top: item.vmsData['top'] + 'px',
+                        left: item.vmsData['left'] + 'px',
                       }"
                       style="line-height: 1"
-                     v-html="item.vmsData['content'].replace(
+                      v-html="
-                              /\n|\r\n/g,
+                        item.vmsData['content']
-                              '<br>'
+                          .replace(/\n|\r\n/g, '<br>')
-                            ).replace(/ /g, ' &nbsp')">
+                          .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" />
@@ -937,10 +1090,28 @@
               </el-card>
             </div>
             <!-- 其他设备 -->
-            <p v-if="item.deviceType != '16' && item.deviceType != '36' && item.deviceType != '22'" style="padding-bottom:15px;">执行状态:</p>
+            <p
-            <div class="templateImg" v-if="item.deviceType != '16' && item.deviceType != '36' && item.deviceType != '22'">
+              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"
+                <img
+                  v-for="(items, idx) in item.deviceIconUrl"
+                  :key="idx"
                   :src="items"
                 />
                 <p>{{ item.deviceState }}</p>
@@ -953,10 +1124,13 @@
         <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>
     <!-- 巡检机器人 -->
@@ -974,8 +1148,16 @@
       />
     </el-dialog>
 
-    <jointControl ref = "jointControl" :show="visibleSync" :eqIdList="eqIdList"></jointControl>
+    <jointControl
-    <workBench class="workBenchBox" ref="workBenchRef" :robotPositon="robotPositon"/>
+      ref="jointControl"
+      :show="visibleSync"
+      :eqIdList="eqIdList"
+    ></jointControl>
+    <workBench
+      class="workBenchBox"
+      ref="workBenchRef"
+      :robotPositon="robotPositon"
+    />
 
     <!-- </el-dialog> -->
   </div>
@@ -984,7 +1166,11 @@
 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 {
+  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";
@@ -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: "",
@@ -1241,7 +1428,7 @@ export default {
   },
   methods: {
     openWorkBench() {
-      this.$refs.workBenchRef.init(this.workBenchProp)
+      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) => {
             this.evtHandle();
-          })
+          });
         }
         return;
       }
@@ -1719,15 +1906,15 @@ export default {
         });
         this.$nextTick(() => {
           let heightBox = document.querySelectorAll(".heightBox > *");
-          let arr = []
+          let arr = [];
 
           for (let i = 0; i < heightBox.length; i++) {
-            let obj = {}
+            let obj = {};
-            obj.incHandContentBox = 0
+            obj.incHandContentBox = 0;
-            obj.classificationBox = 0
+            obj.classificationBox = 0;
             obj.incHandContentBox = heightBox[i].offsetHeight;
-            obj.classificationBox = heightBox[i].firstChild.offsetHeight
+            obj.classificationBox = heightBox[i].firstChild.offsetHeight;
-            arr.push(obj)
+            arr.push(obj);
           }
           for (let i = 0; i < this.incHandList.length; i++) {
             for (let itm of this.incHandList[i].children) {
@@ -1739,8 +1926,10 @@ export default {
             }
             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].lineHeight =
-                this.incHandList[i].circlePosition = "-" + (this.incHandList[i].lineHeight + 10) + "px"
+                  (arr[j].incHandContentBox - arr[j].classificationBox) / 2;
+                this.incHandList[i].circlePosition =
+                  "-" + (this.incHandList[i].lineHeight + 10) + "px";
               }
             }
           }
@@ -1763,18 +1952,17 @@ 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
+            tunnelId: response.rows[0].tunnelId,
-          }
+          };
           if (response.rows[0].tunnelId == "JQ-JiNan-WenZuBei-MJY") {
             listTunnels1().then((res) => {
               for (let item of res.rows) {
@@ -1783,7 +1971,7 @@ export default {
                     Number(item.endPileNum) - Number(item.startPileNum) + 10;
                 }
               }
-            })
+            });
             this.robotTimer = setInterval(() => {
               setTimeout(this.getRobot, 0);
             }, 1000 * 5);
@@ -1812,10 +2000,8 @@ export default {
       };
       await getWorkStagingRobot(param).then((res) => {
         // console.log(res, "机器人");
-        this.robotPositon = (
+        this.robotPositon =
-          (Number(res.data.position) / this.tunnelLang) *
+          ((Number(res.data.position) / this.tunnelLang) * 100).toFixed(2) - 1;
-          100
-        ).toFixed(2) - 1;
       });
     },
     // 左上角视频