Merge branch 'develop' of http://39.106.31.193:9211/mengff/jihe-hs into develop

ruoyi-ui/src/api/MonthlyEquipment/index.js

@@ -55,10 +55,17 @@ export function getSystemStatusExport(query) {
 }
 
 // 拖拽排序
-
 export function getStatusRule(rule) {
   return request({
     url: "/system/status/rule?rule=" + rule,
     method: "get",
   });
 }
+
+// 拖拽排序
+export function getStatusSection() {
+  return request({
+    url: "/system/status/section",
+    method: "get",
+  });
+}

ruoyi-ui/src/api/perception/meteorologyCheck.js

@@ -55,3 +55,11 @@ export function getIdDevices(id) {
     method: "get",
   });
 }
+
+// 查询气象预警筛选类别
+export function getListVisibility() {
+  return request({
+    url: "/dc/system/meteorologicalDetector/listVisibility",
+    method: "get",
+  });
+}

ruoyi-ui/src/views/JiHeExpressway/components/HeaderMenu/WarningList.vue

@@ -6,12 +6,12 @@
     </el-tabs>
 
     <div>
-      <Table :data="tableData" :show-header="false">
+      <Table :data="tableData" :show-header="false" @cell-click="onCellClick">
         <ElTableColumn prop="remark" width="280">
           <template slot-scope="scope">
             <div class="leftColumn">
               <div class="device-icon"
-                :style="{ backgroundImage: `url(${require(`@screen/images/event/${activeTab == 'first' ? (WarningType[scope.row.warningType] || '交通拥堵') : '交通拥堵'}.svg`)})` }" />
+                :style="{ backgroundImage: `url(${require(`@screen/images/event/${activeTab == 'first' ? ('交通拥堵') : '交通拥堵'}.svg`)})` }" />
               <p>{{ activeTab == 'first' ? WarningType[scope.row.warningType] : scope.row.stringEventType }}</p>
             </div>
             <P> {{ scope.row.remark }}</P>
@@ -27,20 +27,36 @@
         layout="total, sizes, prev, pager, next" :total="total">
       </Pagination>
     </div>
+
+    <!-- "详情"弹出框 -->
+    <EventDetailDialog :visible="eventDetailDialogVisible" :formData="detailDialogFormData" :activeName="activeName"
+      @update:value="handleDialogClose" @queryData="reData" />
+
   </div>
 </template>
 
 <script>
 import request from "@/utils/request";
+import EventDetailDialog from "@screen/pages/control/event/event/EventDetailDialog/index";
 import Table from '@screen/components/Table.vue';
 import Pagination from '@screen/components/Pagination.vue';
 import { WarningType } from "@screen/utils/enum.js";
+import { Message } from "element-ui";
+import { WarningType as warningTypeMapping, DirectionTypes as gzDirectionMapping, warningSourceMapping, warningStateMapping } from "@screen/utils/enum.js"
 
 export default {
+  components: {
+    Table,
+    Pagination,
+    EventDetailDialog
+  },
   data() {
     return {
       activeTab: "first",
       WarningType,
+      eventDetailDialogVisible: false,
+      detailDialogFormData: {},
+      activeName: '-1',
       tableData: [],
       total: 10,
       searchData: {
@@ -49,10 +65,6 @@ export default {
       },
     };
   },
-  components: {
-    Table,
-    Pagination
-  },
   computed: {
   },
   mounted() {
@@ -62,6 +74,21 @@ export default {
     onChangeTab(tab, event) {
       console.log(tab, event);
       this.getMainData();
+    },
+    onCellClick(row, column, cell, event) {
+      // console.log('55', row, column, cell, event)
+      if (this.activeTab == 'first') {
+        this.activeName = '-1'
+      } else {
+        this.activeName = '0'
+      }
+      this.firstBtnClick(row.id);
+    },
+    handleDialogClose() {
+      this.eventDetailDialogVisible = false;
+    },
+    reData() {
+
     },
     getMainData() {
       if (this.activeTab == 'first') {
@@ -70,7 +97,6 @@ export default {
           method: "POST",
           data: {
             warningState: 1,
-            pageNum: 1, pageSize: 10
           }
         })
           .then((result) => {
@@ -95,6 +121,70 @@ export default {
           })
       }
     },
+    firstBtnClick(id) {//点击去确认/详情/处置记录等第一个按钮
+      console.log("id", id);
+      if (this.activeName == '-1') {
+        request({
+          url: `/perceivedEvents/warning/getWarningById`,//感知事件
+          method: "post",
+          data: { id }
+        }).then((result) => {
+          if (result.code != 200) return Message.error(result?.msg);
+          let data = result.data;
+
+          data.stringEventSource = data?.warningSource ? warningSourceMapping[data.warningSource] : '';
+          data.nickName = data.userName;
+          data.direction = gzDirectionMapping[data.direction] || data.direction;
+          data.startTime = data.warningTime;
+          data.stringEventState = warningStateMapping[data.warningState];
+          data.stringEventType = warningTypeMapping[data.warningType];
+
+          data.videoList = [];
+          if (data.otherConfig) {
+            let otherConfig = JSON.parse(data.otherConfig);
+
+            data.waterFilmThickness = otherConfig.waterFilmThickness;
+            data.windSpeed = otherConfig.windSpeed;
+            data.visibility = otherConfig.visibility;
+
+            data.pictures = otherConfig.pictures || [];
+            data.videoList = otherConfig.videoList || [];
+            // data.videoList = ['https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-480p.mp4',
+            // 'https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-480p.mp4']
+          }
+          data.videoType = "mp4";
+          data.component = "Video";
+          this.detailDialogFormData = data;
+          // console.log('data', this.detailDialogFormData)
+
+          this.eventDetailDialogVisible = true;
+        });
+      } else {
+        request({
+          url: `/dc/system/event/${id}`,//交通事件
+          method: "get",
+        }).then(async (result) => {
+          if (result.code != 200) return Message.error(result?.msg);
+          let data = result.data;
+          data.stringDirection = gzDirectionMapping[data.direction] || data.direction;
+          data.startTime = data?.occurrenceTime || '';
+
+
+          data.videoList = [];
+          data.component = "VideoMulti";
+
+          // const { downCamera, upCamera } = ((await getNearCameraNew(data.stakeMark))?.data || {});//新的上下游摄像头接口
+          // data.downCamId = downCamera?.camId;
+          // data.upCamId = upCamera?.camId;
+          data.videoType = "flv";
+
+          this.detailDialogFormData = data;
+
+          this.eventDetailDialogVisible = true;
+        });
+      }
+
+    },
     onSizeChange(pageSize) {
       this.searchData.pageSize = pageSize;
       this.getMainData();

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/PerceiveEvent/index.vue

@@ -366,6 +366,7 @@ export default {
     height: 190px;
     gap: 15px;
     justify-content: space-around;
+    max-width: 470px;
   }
 
   .item-video {

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/CrowdnessIndicatorRankings/index.vue

@@ -202,10 +202,13 @@ export default {
     }
   }
 }
-.weather span {
+.weather {
+  width: 435px;
+  span {
     margin-right: 20px;
     display: inline-block;
   }
+}
 .statistics {
   width: 300px;
   height: 180px;

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DisposalProcess/DialogVisible/index.vue

@@ -134,12 +134,12 @@ export default {
         chemicalsStatus: "",
         fireStatus: "",
       },
-      fromDept: "济青济南运管中心",
+      fromDept: "齐鲁高速股份有限公司",
       createTime: "2024年04月24日17时22分",
       title: "关于G20青银高速K305+208交通事故的续报1",
       toDept: "智慧管理中心",
       content: "路管等单位及清障救援车辆已到达现场。预计结束时间为12时44分。",
-      createName: "智慧高速菜单",
+      createName: "张三",
       phoneNumber: "18678866677",
       issued: "康传刚",
       // submitting: false,

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/dispatch/EventDetailDialog/Carousel/index.vue

@@ -25,24 +25,24 @@ export default {
   data() {
     return {
       carouselItems: [
-        {
+        // {
-          "imageURL": "shareWith/message-active.svg"
+        //   "imageURL": "shareWith/message-active.svg"
-        },
+        // },
-        {
+        // {
-          "imageURL": "shareWith/message.svg"
+        //   "imageURL": "shareWith/message.svg"
-        },
+        // },
-        {
+        // {
-          "imageURL": "shareWith/website-active.svg"
+        //   "imageURL": "shareWith/website-active.svg"
-        },
+        // },
-        {
+        // {
-          "imageURL": "shareWith/website.svg"
+        //   "imageURL": "shareWith/website.svg"
-        },
+        // },
-        {
+        // {
-          "imageURL": "shareWith/weChat-active.svg"
+        //   "imageURL": "shareWith/weChat-active.svg"
-        },
+        // },
-        {
+        // {
-          "imageURL": "shareWith/weChat-active.svg"
+        //   "imageURL": "shareWith/weChat-active.svg"
-        }
+        // }
       ],
       settings: {
         infinite: true,

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/dispatch/EventDetailDialog/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <Dialog v-model="modelVisible" title="事件详情" width="885px">
+  <Dialog v-model="modelVisible" title="事件详情" width="885px" top="7%">
     <div class="EventDetail">
       <Form :formList="formList" :dFormData="formData" label-width="100px" />
 

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/index.vue

@@ -72,38 +72,20 @@
     </div>
 
     <!-- 确认弹窗 -->
-    <EventPlanDialog
+    <EventPlanDialog :visible="isShowDialog" :info="info" :eventFormData="formData" :activeName="activeName"
-      :visible="isShowDialog"
+      @reInitData="() => {
-      :info="info"
-      :eventFormData="formData"
-      :activeName="activeName"
-      @reInitData="
-        () => {
     this.$emit('update:value', false);
     this.$emit('queryData', true);
   }
-      "
+    " @close="onCloseAddNew" />
-      @close="onCloseAddNew"
-    />
 
     <template #footer>
-      <Button
+      <Button v-if="activeName == '-1' || activeName == '0'" style="padding: 0 24px"
-        v-if="activeName == '-1' || activeName == '0'"
+        @click.native="onDelete">误报</Button>
-        style="padding: 0 24px"
+      <Button :style="{ backgroundColor: '#C9C9C9', padding: '0 24px' }"
-        @click.native="onDelete"
+        @click.native="modelVisible = false">取消</Button>
-        >误报</Button
+      <Button v-if="activeName == '-1' || activeName == '0'" style="padding: 0 24px"
-      >
+        @click.native="onSubmit">确认</Button>
-      <Button
-        :style="{ backgroundColor: '#C9C9C9', padding: '0 24px' }"
-        @click.native="modelVisible = false"
-        >取消</Button
-      >
-      <Button
-        v-if="activeName == '-1' || activeName == '0'"
-        style="padding: 0 24px"
-        @click.native="onSubmit"
-        >确认</Button
-      >
     </template>
   </Dialog>
 </template>
@@ -296,22 +278,59 @@ export default {
       }
     },
     onSubmit() {
-      return;
+      // let url = "/business/plans/list/warning/type";
-      let url = "/business/plans/list/warning/type";
+      // if (this.activeName == "-1") {
-      if (this.activeName == "-1") {
+      //   url = "/business/plans/list/warning/type";
-        url = "/business/plans/list/warning/type";
+      // } else {
-      } else {
+      //   url = "/business/plans/list/event/type";
-        url = "/business/plans/list/event/type";
+      // }
+      // request({
+      //   url: url,
+      //   method: "post",
+      //   data: this.formData,
+      // }).then((result) => {
+      //   if (result.code != 200) return Message.error(result?.msg);
+      //   this.info = result.data;
+      //   this.isShowDialog = true;
+      // });
+
+      let reData = {
+        id: this.formData.id,
+        stakeMark: this.formData.stakeMark,
+        direction: this.formData.direction == '济南方向' ? 3 : 1,
+        warningType: this.formData.warningType,
+        warningSource: this.formData.warningSource,
+        deptId: this.formData.deptId,
+        warningTime: this.formData.warningTime,
+        warningLevel: this.formData.warningLevel,
+        warningSubclass: this.formData.warningSubclass,
+        warningTitle: this.formData.warningTitle,
+        lane: this.formData.lane,
+        remark: this.formData.remark,
       }
+      if (this.activeName == '-1') {
         request({
-        url: url,
+          url: '/business/warning/updateWarningConvert',
           method: "post",
-        data: this.formData,
+          data: reData,
         }).then((result) => {
           if (result.code != 200) return Message.error(result?.msg);
-        this.info = result.data;
+          else Message.success("成功！");
-        this.isShowDialog = true;
+
+          this.modelVisible = false;
+          this.$emit("queryData", true);
         });
+      } else {
+        let eventId = this.formData.id;
+        this.modelVisible = false;
+        
+        setTimeout(() => {
+          this.$router.push(`/control/event/commandDispatch?eventId=${eventId}`);
+          // this.$router.push(`/control/event/commandDispatch`);
+        })
+
+      }
+
     },
     reInitData() {
       console.log("reInitData");

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/index.vue

@@ -33,7 +33,7 @@
     <!-- 内容 -->
     <div class="body" v-loading>
       <RoadStateCard v-for="(item, index) in data" :key="index" v-bind="getStateCardBind(item)"
-        @firstBtnClick="firstBtnClick" />
+        @firstBtnClick="firstBtnClick" @lastBtnClick="onLastBtnClick" />
     </div>
 
     <!-- 分页 -->
@@ -64,29 +64,29 @@ import { tabMap, gjSearchFormList, gzSearchFormList } from "./data";
 import request from "@/utils/request";
 import { Message } from "element-ui";
 import { Loading } from 'element-ui';
-import { WarningType as warningTypeMapping, WarningSubclass as warningSubclassTypeMapping } from "@screen/utils/enum.js"
+import { WarningType as warningTypeMapping, WarningSubclass as warningSubclassTypeMapping, DirectionTypes as gzDirectionMapping, warningSourceMapping, warningStateMapping } from "@screen/utils/enum.js"
 import { getNearCameraNew } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js"
 
-const warningSourceMapping = {
+// const warningSourceMapping = {
-  1: '视频AI',
+//   1: '视频AI',
-  2: '雷达识别',
+//   2: '雷达识别',
-  3: '锥桶',
+//   3: '锥桶',
-  4: '护栏碰撞',
+//   4: '护栏碰撞',
-  5: '扫码报警',
+//   5: '扫码报警',
-  6: '非机预警',
+//   6: '非机预警',
-  // 7: '气象监测器'
+//   // 7: '气象监测器'
-}
+// }
-const gzDirectionMapping = {
+// const gzDirectionMapping = {
-  '1': '菏泽方向',
+//   '1': '菏泽方向',
-  '2': '双向',
+//   '2': '双向',
-  '3': '济南方向'
+//   '3': '济南方向'
-}
+// }
-const warningStateMapping = {
+// const warningStateMapping = {
-  1: '上报',
+//   1: '上报',
-  2: '已完成',
+//   2: '已完成',
-  3: '已终止',
+//   3: '已终止',
-  4: '自动结束'
+//   4: '自动结束'
-}
+// }
 
 export default {
   name: "RoadNetworkMonitoring2",
@@ -339,6 +339,9 @@ export default {
       }
 
     },
+    onLastBtnClick(id) {
+      this.$router.push(`/control/event/commandDispatch?eventId=${id}`);
+    },
     handleClose() {
       this.eventDetailDialogVisible = false;
     },

ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/onLineBarCharts/index.vue

@@ -40,11 +40,14 @@ export default {
         }
         let xData = [];
         let valueData = [];
-        console.log("newD", newD);
+        for (let key in newD) {
-        newD.forEach((element) => {
+          xData.push(key);
-          xData.push(element.title);
+          valueData.push(newD[key].sucessRate.replace("%", ""));
-          valueData.push(+element.pctOnl.replace("%", ""));
+        }
-        });
+        // newD.forEach((element) => {
+        //   xData.push(element.title);
+        //   valueData.push(+element.pctOnl.replace("%", ""));
+        // });
         // newD.forEach((element) => {
         //   value.push(+element.pctOnl.replace("%", ""));
         //   indicator.push({ name: element.title, max: 100 });

ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue

@@ -8,7 +8,7 @@
         ></DeviceSummary>
         <div class="bottomTabs">
           <DeviceUptime :dataList="equipments" class="tabs-lo" />
-          <OnLineBarCharts :dataList="equipments" class="tabs-mo" />
+          <OnLineBarCharts :dataList="sectionData" class="tabs-mo" />
           <!-- <MonthlyEquipment class="tabs-mo" :dataList="equipments" /> -->
         </div>
       </el-tab-pane>
@@ -128,6 +128,7 @@ import {
   getSystemStatusTabList,
   getSystemStatusType,
   getSystemStatusExport,
+  getStatusSection,
 } from "@/api/MonthlyEquipment";
 // import { download } from "../../../../../utils/request.js";
 import Pagination from "@screen/components/Pagination.vue";
@@ -182,6 +183,7 @@ export default {
       activeName: "first",
       tableData: [],
       interval: null,
+      sectionData: [],
     };
   },
   provide() {
@@ -193,6 +195,11 @@ export default {
     clearInterval(this.interval);
   },
   methods: {
+    getSection() {
+      getStatusSection().then((res) => {
+        this.sectionData = res.data;
+      });
+    },
     handleSizeChange(size) {
       this.pageSize = size;
       this.initData();
@@ -242,7 +249,6 @@ export default {
       this.initQueryTable(1);
     },
     handleSearch(data) {
-      console.log(777, data);
       this.typeQuery = data.type;
       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");
@@ -273,7 +279,6 @@ export default {
         type: this.typeQuery,
       })
         .then((res) => {
-          console.log(res);
           const url = window.URL.createObjectURL(new Blob([res]));
           let link = document.createElement("a");
           link.style.display = "none";
@@ -312,7 +317,6 @@ export default {
       getSystemStatusType().then((res) => {
         let allList = [];
         let sort = res.data["排序规则"].rule.split(",");
-        console.log("sort", sort);
         sort.forEach((i) => {
           for (let key in res.data) {
             let val = res.data[key];
@@ -365,9 +369,6 @@ export default {
         type: this.typeQuery,
       }).then((res) => {
         if (res.code == 200) {
-          console.log("res.data", res.data);
-          // if (res.data && Object.keys(res.data).length > 0) {
-          console.log("res.data", res.data);
           this.setStatus("01", "finish");
           let origin = res.data;
           let startStamp = +moment(this.startTime).startOf("day").format("x");
@@ -429,6 +430,7 @@ export default {
   },
   async mounted() {
     await this.initData();
+    this.getSection();
   },
 };
 </script>

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

@@ -30,10 +30,13 @@ export default {
     data: {
       handler(data) {
         let newData = [];
+        // let xData = [];
         data.forEach((item) => {
-          newData.push(item.avgVisibility);
+          newData.push(item.avgTemperature);
+          // xData.push(item.timeSlot);
         });
         temperatureCharts.series[0].data = newData;
+        // temperatureCharts.xAxis.data = newData;
         this.myChart.setOption(temperatureCharts);
       },
       deep: true,

ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/visibilityTrends/assets/charts.js

@@ -5,7 +5,7 @@ var options = {
     show: true,
     trigger: "axis",
     valueFormatter: function (value) {
-      return value + " M";
+      return value + " km";
     },
   },
   grid: {

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

@@ -26,7 +26,7 @@ export default {
       handler(data) {
         let newData = [];
         data.forEach((item) => {
-          newData.push(item.avgTemperature);
+          newData.push(item.avgVisibility);
         });
         visibilityCharts.series[0].data = newData;
         this.myChart.setOption(visibilityCharts);

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

@@ -28,11 +28,17 @@
           }}</span>
         </div>
         <div class="item">
-          <span class="label">能见度：</span>
+          <span class="label">能见度等级：</span>
           <span class="text">{{
             data.visibilityType ? data.visibilityType + "级" : "-"
           }}</span>
         </div>
+        <div class="item">
+          <span class="label">能见度：</span>
+          <span class="text">{{
+            data.visibility ? data.visibility + "km" : "-"
+          }}</span>
+        </div>
         <!-- <div class="item">
           <span class="label">能见度类型：</span>
           <span class="text">{{ data.visibilityType }}</span>
@@ -43,12 +49,44 @@
             data.recipitationType ? data.recipitationType : "-"
           }}</span>
         </div> -->
+        <div class="item">
+          <span class="label">下雨类型：</span>
+          <span class="text">{{
+            data.rainfall == 0
+              ? "无降"
+              : data.rainfall == 1
+              ? "雨"
+              : data.rainfall == 2
+              ? "雪"
+              : data.rainfall == 3
+              ? "毛毛雨"
+              : "雨夹雪"
+          }}</span>
+        </div>
         <div class="item">
           <span class="label">降雨量：</span>
           <span class="text">{{
             data.rainfall ? data.rainfall + "mm" : "-"
           }}</span>
         </div>
+        <div class="item">
+          <span class="label">路面状态：</span>
+          <span class="text">{{
+            data.remoteRoadSurfaceStatus == "00"
+              ? "干燥"
+              : data.rainfall == "01"
+              ? "潮湿"
+              : data.rainfall == "02"
+              ? "积水"
+              : data.rainfall == "03"
+              ? "结冰"
+              : data.rainfall == "04"
+              ? "积雪"
+              : data.rainfall == "05"
+              ? "冰水混合物"
+              : "泥泞"
+          }}</span>
+        </div>
         <div class="item">
           <span class="label">路面温度：</span>
           <span class="text">{{
@@ -63,6 +101,12 @@
             data.atmosphericPressure ? data.atmosphericPressure + "Pa" : "-"
           }}</span>
         </div>
+        <div class="item">
+          <span class="label"> 水膜厚度：</span>
+          <span class="text">{{
+            data.waterFilmlceSnowValue ? data.waterFilmlceSnowValue + "mm" : "-"
+          }}</span>
+        </div>
       </div>
     </div>
   </div>

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

@@ -1,19 +1,28 @@
 <template>
-  <div class='congestion'>
+  <div class="congestion">
     <WgtTitle :title="'能见度异常信息'"></WgtTitle>
     <div class="board">
       <div class="weaterMain">
-        <el-table :border="false" :data="tableData" height="670" style="width: 100%">
+        <el-table
-          <el-table-column prop="nem" label="" width="30">
+          :border="false"
+          :data="tableData"
+          height="670"
+          style="width: 100%"
+        >
+          <el-table-column prop="nem" label="" width="30"> </el-table-column>
+          <el-table-column prop="stakeMark" label="桩号范围" width="230">
           </el-table-column>
-          <el-table-column prop="address" label="桩号范围" width="230">
+          <el-table-column
-          </el-table-column>
+            prop="visibility"
-          <el-table-column prop="name" label="能见度" class-name="showClass" width="250">
+            label="能见度"
+            class-name="showClass"
+            width="250"
+          >
             <template slot-scope="scope">
-              <span class="showClass">{{ scope.row.name }}</span>
+              <span class="showClass">{{ scope.row.visibility }}km</span>
             </template>
           </el-table-column>
-          <el-table-column prop="date" label="发生时间" width="230">
+          <el-table-column prop="createTime" label="发生时间" width="230">
           </el-table-column>
         </el-table>
       </div>
@@ -22,95 +31,45 @@
 </template>
 
 <script>
-import Card from "@screen/components/Card1/index.vue"
+import Card from "@screen/components/Card1/index.vue";
-import WgtTitle from '../../../../../widgets/title'
+import WgtTitle from "../../../../../widgets/title";
+import {
+  getMeteorologicalEarlyWarning,
+  getListVisibility,
+} from "@/api/perception/meteorologyCheck";
 
 export default {
-  name: 'infoWarning',
+  name: "infoWarning",
   components: {
-    WgtTitle
+    WgtTitle,
   },
   data() {
     return {
-      tableData: [{
+      tableData: [],
-        date: '2023-12-31 13:00:00',
+    };
-        name: '2640.78m',
-        address: 'K100+000-K110+000'
-      }, {
-        date: '2023-12-31 13:00:00',
-        name: '2640.78m',
-        address: 'K100+000-K110+000'
-      }, {
-        date: '2023-12-31 13:00:00',
-        name: '2640.78m',
-        address: 'K100+000-K110+000'
-      }, {
-        date: '2023-12-31 13:00:00',
-        name: '2640.78m',
-        address: 'K100+000-K110+000'
-      }, {
-        date: '2023-12-31 13:00:00',
-        name: '2640.78m',
-        address: 'K100+000-K110+000'
-      }, {
-        date: '2023-12-31 13:00:00',
-        name: '2640.78m',
-        address: 'K100+000-K110+000'
-      }, {
-        date: '2023-12-31 13:00:00',
-        name: '2640.78m',
-        address: 'K100+000-K110+000'
-      }, {
-        date: '2023-12-31 13:00:00',
-        name: '2640.78m',
-        address: 'K100+000-K110+000'
-      }, {
-        date: '2023-12-31 13:00:00',
-        name: '2640.78m',
-        address: 'K100+000-K110+000'
-      }, {
-        date: '2023-12-31 13:00:00',
-        name: '2640.78m',
-        address: 'K100+000-K110+000'
-      }, {
-        date: '2023-12-31 13:00:00',
-        name: '2640.78m',
-        address: 'K100+000-K110+000'
-      }, {
-        date: '2023-12-31 13:00:00',
-        name: '2640.78m',
-        address: 'K100+000-K110+000'
-      }, {
-        date: '2023-12-31 13:00:00',
-        name: '2640.78m',
-        address: 'K100+000-K110+000'
-      },
-      ]
-    }
   },
 
-  created() {
+  created() {},
-
-  },
   methods: {
     selectItem(index) {
       this.selectIndex = index;
     },
+    getWarningType() {
+      getListVisibility().then((res) => {
+        console.log("获取预警类型", res.rows);
+        this.tableData = res.rows;
+      });
+    },
   },
   mounted() {
-
+    this.getWarningType();
-    setTimeout(() => {
-      this.$nextTick(() => {
-
-      });
-    });
   },
-}
+};
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .showClass {
-  color: #00EBC1;
+  color: #00ebc1;
 }
 
 ::v-deep .el-table .cell {
@@ -119,7 +78,7 @@ export default {
 
 ::v-deep .el-table .el-table__header-wrapper th {
   background-color: #064258 !important;
-  color: #00D1FF;
+  color: #00d1ff;
   border-color: #064258 !important;
   border: 0px !important;
   font-size: 12px !important;
@@ -138,11 +97,11 @@ export default {
 
 ::v-deep .el-table tr:hover td {
   background: #1b2528 !important;
-  color: #00D1FF;
+  color: #00d1ff;
 }
 
 ::v-deep .el-table tr:nth-child(odd) td {
-  background-color: #13272F;
+  background-color: #13272f;
   border: 0px !important;
 }
 
@@ -175,8 +134,6 @@ export default {
     flex-direction: column;
     margin-top: 20px;
 
-
-
     .warningList {
       display: inline-flex;
       flex-direction: column;
@@ -191,14 +148,19 @@ export default {
         border-radius: 2px 2px 2px 2px;
         opacity: 1;
         border: 1px solid;
-        border-image: linear-gradient(360deg, rgba(55, 231, 255, 1), rgba(55, 231, 255, 0)) 1 1;
+        border-image: linear-gradient(
+            360deg,
+            rgba(55, 231, 255, 1),
+            rgba(55, 231, 255, 0)
+          )
+          1 1;
         overflow: hidden;
         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;
@@ -221,9 +183,8 @@ export default {
               font-size: 14px;
               font-family: PangMenZhengDao;
               font-weight: 400;
-              color: #F4A125
+              color: #f4a125;
             }
-
           }
         }
 
@@ -242,7 +203,6 @@ export default {
             color: #fff;
           }
         }
-
       }
     }
 
@@ -252,7 +212,6 @@ export default {
       width: 100%;
       height: 40px;
 
-
       .buttons {
         width: 100%;
         height: 38px;
@@ -266,7 +225,7 @@ export default {
           font-size: 12px;
           font-family: PangMenZhengDao;
           font-weight: 800;
-          color: #FFFFFF;
+          color: #ffffff;
           z-index: 9;
         }
 
@@ -276,26 +235,46 @@ 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;
         }
 
         .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%
+          );
         }
       }
 
@@ -306,7 +285,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;
       }
@@ -318,7 +302,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;
       }
@@ -328,7 +317,12 @@ export default {
         display: inline-flex;
         width: 277px;
         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;
@@ -339,10 +333,9 @@ export default {
           font-size: 16px;
           font-family: PangMenZhengDao;
           font-weight: 400;
-          color: #FFFFFF;
+          color: #ffffff;
         }
 
-
         .num {
           display: inline-flex;
           justify-content: center;
@@ -350,11 +343,10 @@ export default {
           font-size: 22px;
           font-family: PangMenZhengDao;
           font-weight: 400;
-          color: #D9001B;
+          color: #d9001b;
         }
       }
     }
-
   }
 }
 
@@ -363,4 +355,3 @@ export default {
   width: 100%;
 }
 </style>
-  

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

@@ -1,19 +1,29 @@
 <template>
-  <div class='topolog'>
+  <div class="topolog">
     <div class="list">
-      <div v-for="(item, index) in list" @click="listClick(index)"
+      <div
-        :class="'listItem  keep-ratio ' + (selIndex === index ? 'listItemAction' : '')">
+        v-for="(item, index) in list"
+        @click="listClick(index)"
+        :class="
+          'listItem  keep-ratio ' + (selIndex === index ? 'listItemAction' : '')
+        "
+      >
         {{ item.name }}
       </div>
     </div>
     <div class="card">
       <div class="top">
         <div class="t-left">{{ name }}</div>
-        <div style="display: flex;">
+        <div style="display: flex">
           <div class="t-right" v-for="(item, index) in card">
-            交换机总数 <template v-if="card.length>1">({{ index+1 }})</template>：<span class="len">{{ item.total }}</span>个
+            交换机总数
+            <template v-if="card.length > 1">({{ index + 1 }})</template>：<span
+              class="len"
+              >{{ item.total }}</span
+            >个
             <div class="space"></div>
-            故障数：<span class="len err">{{ item.error }}</span>个
+            故障数：<span class="len err">{{ item.error }}</span
+            >个
           </div>
         </div>
       </div>
@@ -23,7 +33,7 @@
             <div class="arrowdow"></div>
             <div class="arrowdow"></div>
           </div>
-          <div class="arrow-panel" style="margin-top: -5px;">
+          <div class="arrow-panel" style="margin-top: -5px">
             <div class="arrow"></div>
             <div class="arrow"></div>
             <div class="arrow"></div>
@@ -31,41 +41,61 @@
           </div>
           <div v-for="(item, index) in topo" v-if="index < 5" class="switch">
             <div :class="'line ' + (item.netWorkStatus ? '' : 'liner')"></div>
-            <div :class="'arrowdown ' + (item.netWorkStatus ? '' : 'arrowr')"></div>
+            <div
-            <div :class="'c-name ' + (item.netWorkStatus ? '' : 'c-namer')">{{ item.switchName }}</div>
+              :class="'arrowdown ' + (item.netWorkStatus ? '' : 'arrowr')"
+            ></div>
+            <div :class="'c-name ' + (item.netWorkStatus ? '' : 'c-namer')">
+              {{ item.switchName }}
+            </div>
             <div :class="'line ' + (item.netWorkStatus ? '' : 'liner')"></div>
-            <div :class="'arrowdown ' + (item.netWorkStatus ? '' : 'arrowr')" style="margin-top:-35px;"></div>
+            <div
-            <img v-if="item.netWorkStatus" src="./switch1.png">
+              :class="'arrowdown ' + (item.netWorkStatus ? '' : 'arrowr')"
-            <img v-else src="./switch0.png">
+              style="margin-top: -35px"
-            <div :class="'c-name c-namesw ' + (item.netWorkStatus ? '' : 'c-namer')">sw</div>
+            ></div>
+            <img v-if="item.netWorkStatus" src="./switch1.png" />
+            <img v-else src="./switch0.png" />
+            <div
+              :class="
+                'c-name c-namesw ' + (item.netWorkStatus ? '' : 'c-namer')
+              "
+            ></div>
             <div :class="'c-desc ' + (item.netWorkStatus ? '' : 'c-descr')">
               <div>桩号：{{ item.stakeMark }}</div>
               <div>IP：{{ item.switchIp }}</div>
             </div>
           </div>
-          <div class="arrow-panel" style="margin-top: 292px;">
+          <div class="arrow-panel" style="margin-top: 308px">
             <div class="arrow arrowrig"></div>
             <div class="arrow arrowrig"></div>
             <div class="arrow arrowrig"></div>
             <div class="arrow arrowrig"></div>
           </div>
 
-          <div class="arrow-panel-line" style="margin-left: 100.1%;">
+          <div class="arrow-panel-line" style="margin-left: 100.1%">
             <div class="arrowdow arrowtop"></div>
             <div class="arrowdow arrowtop"></div>
           </div>
         </div>
-        <div class="c " style="margin-top: -5px;">
+        <div class="c" style="margin-top: -5px">
           <div v-for="(item, index) in topo" v-if="index >= 5" class="switch">
             <div :class="'line ' + (item.netWorkStatus ? '' : 'liner')"></div>
-            <div :class="'arrowdown ' + (item.netWorkStatus ? '' : 'arrowr')"></div>
+            <div
-            <div :class="'c-name ' + (item.netWorkStatus ? '' : 'c-namer')">{{ item.switchName }}</div>
+              :class="'arrowdown ' + (item.netWorkStatus ? '' : 'arrowr')"
+            ></div>
+            <div :class="'c-name ' + (item.netWorkStatus ? '' : 'c-namer')">
+              {{ item.switchName }}
+            </div>
             <div :class="'line ' + (item.netWorkStatus ? '' : 'liner')"></div>
-            <div :class="'arrowdown ' + (item.netWorkStatus ? '' : 'arrowr')" style="margin-top:-35px;"></div>
+            <div
+              :class="'arrowdown ' + (item.netWorkStatus ? '' : 'arrowr')"
+              style="margin-top: -35px"
+            ></div>
             <img class="imgsw" v-if="item.netWorkStatus" src="./switch1.png" />
             <img class="imgsw" v-else src="./switch0.png" />
-            <div :class="'c-name ' + (item.netWorkStatus ? '' : 'c-namer')"
+            <div
-              style="padding:0px 50px;margin-top: -5px;border:0px">sw</div>
+              :class="'c-name ' + (item.netWorkStatus ? '' : 'c-namer')"
+              style="padding: 0px 50px; margin-top: -5px; border: 0px"
+            ></div>
             <div :class="'c-desc ' + (item.netWorkStatus ? '' : 'c-descr')">
               <div>桩号：{{ item.stakeMark }}</div>
               <div>IP：{{ item.switchIp }}</div>
@@ -74,50 +104,80 @@
         </div>
       </div>
       <div class="content" v-else>
-        <div class="c c-border" style="margin-bottom: 30px;" v-for="(item,index) of topo">
+        <div
-        
+          class="c c-border"
+          style="margin-bottom: 30px"
+          v-for="(item, index) of topo"
+        >
           <div class="arrow-panel-line">
             <div class="arrowdow"></div>
             <div class="arrowdow"></div>
           </div>
-          <div class="arrow-panel" style="margin-top: -5px;">
+          <div class="arrow-panel" style="margin-top: -5px">
             <div class="arrow"></div>
             <div class="arrow"></div>
             <div class="arrow"></div>
             <div class="arrow"></div>
           </div>
           <div class="cscorll">
-            <div :style="' height: 290px;width:'+item.length*200+'px;'">
+            <!-- width:' + item.length * 200 + 'px;' -->
+            <!-- <div style="height: 290px"> -->
             <div v-for="(itm, idx) in item" class="switchScro">
               <div class="switch">
-                  <div :class="'line ' + (itm.netWorkStatus ? '' : 'liner')"></div>
+                <div
-                  <div :class="'arrowdown ' + (itm.netWorkStatus ? '' : 'arrowr')" style="margin-top: -30px;"></div>
+                  :class="'line ' + (itm.netWorkStatus ? '' : 'liner')"
-                  <img class="imgsw" v-if="itm.netWorkStatus" src="./switch1.png" />
+                ></div>
+                <div
+                  :class="'arrowdown ' + (itm.netWorkStatus ? '' : 'arrowr')"
+                  style="margin-top: -30px"
+                ></div>
+                <img
+                  class="imgsw"
+                  v-if="itm.netWorkStatus"
+                  src="./switch1.png"
+                />
                 <img class="imgsw" v-else src="./switch0.png" />
-                  <div :class="'c-name c-namesw ' + (itm.netWorkStatus ? '' : 'c-namer')">{{itm.switchName}}({{index+1}})</div>
+                <div
-                  <div :class="'line ' + (itm.netWorkStatus ? '' : 'liner')" style="height: 40px"></div>
+                  :class="
-                  <div :class="'arrowdown ' + (itm.netWorkStatus ? '' : 'arrowr')" style="margin-top: -30px;"></div>
+                    'c-name c-namesw ' + (itm.netWorkStatus ? '' : 'c-namer')
-                  <div :class="'device-list ' + (itm.netWorkStatus ? '' : 'device-list-r')">
+                  "
-                    <div v-for="(idv,idvx) in itm.dcDeviceList">
+                >
-                      <div class="device-item">
+                  {{ itm.switchName }}({{ index + 1 }})
-                        <img src="./t10.png" />
-                        <div>{{ idv.deviceName }}</div>
-                      </div>
                 </div>
+                <div
+                  :class="'line ' + (itm.netWorkStatus ? '' : 'liner')"
+                  style="height: 40px"
+                ></div>
+                <div
+                  :class="'arrowdown ' + (itm.netWorkStatus ? '' : 'arrowr')"
+                  style="margin-top: -30px"
+                ></div>
+                <div
+                  :class="
+                    'device-list ' + (itm.netWorkStatus ? '' : 'device-list-r')
+                  "
+                >
+                  <div
+                    v-for="(idv, idvx) in itm.dcDeviceList"
+                    class="device-item"
+                  >
+                    <img src="./t10.png" />
+                    <div class="device-item-text">{{ idv.deviceName }}</div>
                   </div>
                 </div>
               </div>
             </div>
+            <!-- </div> -->
           </div>
 
-          <div class="arrow-panel" style="margin-top: 292px;">
+          <div class="arrow-panel" style="margin-top: 308px">
             <div class="arrow"></div>
             <div class="arrow"></div>
             <div class="arrow"></div>
             <div class="arrow"></div>
           </div>
 
-          <div class="arrow-panel-line" style="margin-left: 100.1%;">
+          <div class="arrow-panel-line" style="margin-left: 100.1%">
             <div class="arrowdow"></div>
             <div class="arrowdow"></div>
           </div>
@@ -128,90 +188,90 @@
 </template>
 
 <script>
-import request from '@/utils/request'
+import request from "@/utils/request";
 import { Message } from "element-ui";
-const enum_device_type = [
+const enum_device_type = [{ type: "1", label: "枪机" }];
-  {type: "1", label: "枪机",}
-]
 export default {
-  name: 'InDevelopment',
+  name: "InDevelopment",
-  components: {
+  components: {},
-  },
 
   data() {
     return {
       list: [],
       selIndex: 0,
-      name: '',
+      name: "",
       card: [{ total: 0, error: 0 }],
-      topo: []
+      topo: [],
-    }
+    };
   },
   mounted() {
-    this.bind()
+    this.bind();
     request({
       url: "/type/list",
       method: "get",
-  }).then(res=>{
+    }).then((res) => {
-    console.log(res)
+      console.log(res);
     });
   },
   methods: {
     bind() {
       request({
-        url: '/business/switch/list',
+        url: "/business/switch/list",
-        method: 'get'
+        method: "get",
-      }).then(result => {
+      }).then((result) => {
         if (result.code != 200) return Message.error(result?.msg);
         this.map = result.data[0];
-        let list = [{ name: this.map.switchName }]
+        let list = [{ name: this.map.switchName }];
-        this.map.children.forEach(e => {
+        this.map.children.forEach((e) => {
-        list.push({ name: e.switchName })
+          list.push({ name: e.switchName });
         });
         this.list = list;
         this.listClick();
-      })
+      });
     },
     listClick(e = 0) {
       this.selIndex = e;
       if (e === 0) {
-        this.name = this.map.switchName,
+        (this.name = this.map.switchName),
-        this.card = [{
+          (this.card = [
+            {
               total: this.map.children.length,
-          error: this.map.children.filter(x => x.netWorkStatus === 0).length
+              error: this.map.children.filter((x) => x.netWorkStatus === 0)
-        }]
+                .length,
-        this.topo = this.map.children
+            },
+          ]);
+        this.topo = this.map.children;
       } else {
         this.name = this.map.children[e - 1].switchName;
         let cards = [];
         let topo = [];
         const list = this.map.children[e - 1].children;
 
-        const list1 = list.filter(x=>x.ringNetWork === 1)
+        const list1 = list.filter((x) => x.ringNetWork === 1);
         if (list1) {
           cards.push({
             total: list1.length,
-            error: list1.filter(x => x.netWorkStatus === 0).length
+            error: list1.filter((x) => x.netWorkStatus === 0).length,
-          })
+          });
-          topo.push(list1)
+          topo.push(list1);
         }
-        const list2 = list.filter(x=>x.ringNetWork === 2)
+        const list2 = list.filter((x) => x.ringNetWork === 2);
         if (list2 && list2.length > 0) {
           cards.push({
             total: list2.length,
-            error: list2.filter(x => x.netWorkStatus === 0).length
+            error: list2.filter((x) => x.netWorkStatus === 0).length,
-          })
+          });
-          topo.push(list2)
+          topo.push(list2);
         }
         this.topo = topo;
         this.card = cards;
       }
-    }
+    },
-  }
+  },
-}
+};
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .topolog {
   width: 100%;
   height: 100%;
@@ -278,14 +338,14 @@ export default {
       padding-bottom: 10px;
       margin-left: 20px;
       .len {
-        color: #12F7B2;
+        color: #12f7b2;
         font-size: 26px;
         font-weight: bold;
         margin: 0px 10px;
       }
 
       .err {
-        color: #FF5935;
+        color: #ff5935;
       }
 
       .space {
@@ -304,12 +364,15 @@ export default {
   display: flex;
   flex-direction: row;
   justify-content: space-around;
-  height: 300px;
+  height: 315px;
 }
 
 .c-border {
   border: 2px solid #34d3eb;
   position: relative;
+  // width: 98%;
+  // margin: auto;
+  // overflow: auto;
 }
 
 .arrow-panel {
@@ -358,10 +421,15 @@ export default {
   }
 }
 .cscorll {
-  width: 80vw;
+  // width: 80vw;
-  height: 290px;
+  width: 100%;
-  overflow-x: auto;
+  position: absolute;
+  display: flex;
+  justify-content: space-around;
+  height: 310px;
+  padding: 0 20px;
   overflow-y: hidden;
+  overflow-x: auto;
   z-index: 9999;
 }
 .switchScro {
@@ -383,7 +451,7 @@ export default {
   }
 
   .liner {
-    background-color: #FF5935;
+    background-color: #ff5935;
   }
 
   .arrowdown {
@@ -395,11 +463,16 @@ export default {
   }
 
   .arrowr {
-    background: linear-gradient(to top, #FF5935, #ffffff00);
+    background: linear-gradient(to top, #ff5935, #ffffff00);
   }
 
   .c-name {
-    background: linear-gradient(270deg, rgba(61, 231, 253, 0) 0%, rgba(61, 231, 253, 0.7) 51%, rgba(61, 231, 253, 0) 100%);
+    background: linear-gradient(
+      270deg,
+      rgba(61, 231, 253, 0) 0%,
+      rgba(61, 231, 253, 0.7) 51%,
+      rgba(61, 231, 253, 0) 100%
+    );
     border-radius: 4px;
     padding: 10px 30px;
     margin-top: 5px;
@@ -412,8 +485,16 @@ export default {
     border: 0px !important;
   }
   .c-namer {
-    background: linear-gradient(270deg, rgba(255, 90, 54, 0) 0%, rgba(255, 90, 54, 0.8) 51%, rgba(255, 90, 54, 0) 100%);
+    background: linear-gradient(
-    border: 1px solid #FF5935;
+      270deg,
+      rgba(255, 90, 54, 0) 0%,
+      rgba(255, 90, 54, 0.8) 51%,
+      rgba(255, 90, 54, 0) 100%
+    );
+    border: 1px solid #ff5935;
+    // white-space: nowrap;
+    // overflow: hidden;
+    // text-overflow: ellipsis;
   }
 
   .c-desc {
@@ -425,7 +506,7 @@ export default {
   }
 
   .c-descr {
-    background: linear-gradient(to bottom, #102229 5%, #FF5935);
+    background: linear-gradient(to bottom, #102229 5%, #ff5935);
   }
 
   img {
@@ -436,17 +517,37 @@ export default {
 }
 .device-list {
   border: 1px dashed #34d3eb;
-  height: 90px;
+  min-height: 110px;
   min-width: 160px;
   margin-top: 10px;
+  overflow: auto;
 }
 .device-list-r {
-  border-color: #FF5935;
+  border-color: #ff5935;
+  // display: flex;
+  // flex-wrap: wrap;
+  // justify-content: space-around;
+  display: grid;
+  grid-template-rows: repeat(2, minmax(30px, auto));
+  grid-auto-columns: 1fr;
+  grid-gap: 0px;
+  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
+  // overflow: hidden;
+  padding: 10px;
 }
 .device-item {
-  image{
+  overflow: hidden;
-    width: 30px;
+  img {
-    height: 30px;
+    margin: 0;
+    width: 25px;
+    height: 25px;
+  }
+  .device-item-text {
+    width: 40px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 12px;
   }
 }
 </style>

ruoyi-ui/src/views/JiHeExpressway/utils/enum.js

@@ -162,11 +162,28 @@ export const InfoWarningSource = {
   6: {
     text: "非机预警",
   },
-  7: {
+  // 7: {
-    text: "气象监测器",
+  //   text: "气象监测器",
-  },
+  // },
 };
 
+export const warningSourceMapping = {
+  1: '视频AI',
+  2: '雷达识别',
+  3: '锥桶',
+  4: '护栏碰撞',
+  5: '扫码报警',
+  6: '非机预警',
+  // 7: '气象监测器'
+}
+
+export const warningStateMapping = {
+  1: '上报',
+  2: '已完成',
+  3: '已终止',
+  4: '自动结束'
+}
+
 // 感知事件主类 warningType
 export const WarningType = {
   1: "交通拥堵",