diff --git a/ruoyi-ui/src/App.vue b/ruoyi-ui/src/App.vue
index a215604d..93f035b3 100644
--- a/ruoyi-ui/src/App.vue
+++ b/ruoyi-ui/src/App.vue
@@ -9,7 +9,7 @@
 <template>
   <div id="app">
     <router-view />
-    <!-- <websocket /> -->
+    <websocket />
     <!-- <websocket_phone /> -->
   </div>
 </template>
diff --git a/ruoyi-ui/src/api/MonthlyEquipment/index.js b/ruoyi-ui/src/api/MonthlyEquipment/index.js
index f1a14095..e7c06df5 100644
--- a/ruoyi-ui/src/api/MonthlyEquipment/index.js
+++ b/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",
+  });
+}
diff --git a/ruoyi-ui/src/api/perception/meteorologyCheck.js b/ruoyi-ui/src/api/perception/meteorologyCheck.js
index 3bc24c6f..59101ae2 100644
--- a/ruoyi-ui/src/api/perception/meteorologyCheck.js
+++ b/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",
+  });
+}
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/HeaderMenu/WarningList.vue b/ruoyi-ui/src/views/JiHeExpressway/components/HeaderMenu/WarningList.vue
index 629c8935..4b6bff56 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/components/HeaderMenu/WarningList.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/HeaderMenu/WarningList.vue
@@ -6,8 +6,18 @@
     </el-tabs>
 
     <div>
-      <Table :data="tableData" :show-header="false">
-        <ElTableColumn prop="remark" width="280" />
+      <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' ? ('交通拥堵') : '交通拥堵'}.svg`)})` }" />
+              <p>{{ activeTab == 'first' ? WarningType[scope.row.warningType] : scope.row.stringEventType }}</p>
+            </div>
+            <P> {{ scope.row.remark }}</P>
+          </template>
+
+        </ElTableColumn>
       </Table>
     </div>
 
@@ -17,17 +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: {
@@ -36,10 +65,6 @@ export default {
       },
     };
   },
-  components: {
-    Table,
-    Pagination
-  },
   computed: {
   },
   mounted() {
@@ -49,13 +74,30 @@ 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') {
         request({
-          url: `perceivedEvents/warning/perceivedEventsList?pageNum=${this.searchData.pageNum}&pageSize=${this.searchData.pageSize}`,
+          url: `/perceivedEvents/warning/warningListPage?pageNum=${this.searchData.pageNum}&pageSize=${this.searchData.pageSize}`,
           method: "POST",
-          data: {}
+          data: {
+            warningState: 1,
+          }
         })
           .then((result) => {
             if (result.code != 200) return;
@@ -71,13 +113,78 @@ export default {
           .then((result) => {
             if (result.code != 200) return;
             result.rows.forEach(item => {
-              item.remark = item.occurrenceTime + " " + item.stakeMark + " " + item.direction + " 发生" + item.stringEventType + "( " + item.eventSubclass + ")事件"
+              item.remark = (item.occurrenceTime || '') + " " + (item.stakeMark || '') + " " + (item.direction || '') + " 发生" + (item.stringEventType || '') + "( " + (item.eventSubclass || '') + ")事件"
+              // item.remark = item.stakeMark + " " + item.direction + " 发生" + item.stringEventType + "( " + item.eventSubclass + ")事件"
             })
             this.tableData = result.rows;
             this.total = result.total;
           })
       }
     },
+    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();
@@ -87,5 +194,28 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.warning_list {}
+.warning_list {
+  .leftColumn {
+    display: flex;
+    justify-content: center;
+    margin-right: 8px;
+    border: 1px solid #FF5F5F;
+    float: left;
+
+    p {
+      color: #FF5F5F;
+      font-size: 15px;
+      margin-right: 3px;
+    }
+
+    .device-icon {
+      height: 22px;
+      width: 22px;
+      background-repeat: no-repeat;
+      background-size: auto;
+      background-position: center;
+    }
+
+  }
+}
 </style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/TimeLine/TimeLine2/index.vue b/ruoyi-ui/src/views/JiHeExpressway/components/TimeLine/TimeLine2/index.vue
index 10c64934..0a9430f5 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/components/TimeLine/TimeLine2/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/TimeLine/TimeLine2/index.vue
@@ -2,7 +2,7 @@
   <div class="TimeLine2">
     <!-- { "time": "2024/4/16 11:30:07", "name": "1", "desc": "111", "source": 1 } -->
     <div class="node" v-for="(item, index) in data" :key="index">
-      <div class="content">
+      <div class="content" v-if="!item.onlyright">
         <template v-if="item.source == 2">
           <!-- <template v-if="direction === 'auto' ? !!((index + 1) & 1) : true"> -->
           <span class="title" v-if="item.title">{{ item.title }}</span>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/event/交通拥堵.svg b/ruoyi-ui/src/views/JiHeExpressway/images/event/交通拥堵.svg
new file mode 100644
index 00000000..db8d76cb
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/images/event/交通拥堵.svg
@@ -0,0 +1,24 @@
+<svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 10179">
+<g id="Group 1142814080">
+<g id="&#233;&#161;&#181;&#233;&#157;&#162;-1">
+<g id="&#233;&#166;&#150;&#233;&#161;&#181;-&#229;&#185;&#179;&#233;&#157;&#162;3">
+<g id="&#231;&#188;&#150;&#231;&#187;&#132;-16&#229;&#164;&#135;&#228;&#187;&#189;">
+<g id="1">
+<g id="&#232;&#183;&#175;&#233;&#157;&#162;&#231;&#138;&#182;&#230;&#128;&#129;">
+<g id="Frame" clip-path="url(#clip0_1136_5461)">
+<path id="Vector" d="M17.3553 14.5934L17.2314 14.2352C17.1953 14.1362 17.1314 14.0497 17.0473 13.9862C16.9632 13.9226 16.8626 13.8847 16.7575 13.877H16.3404C16.1516 13.3442 15.9484 12.8166 15.731 12.2947C15.6161 12.1431 15.4702 12.0176 15.303 11.9267C15.1359 11.8357 14.9513 11.7814 14.7615 11.7673C14.0799 11.6377 13.3853 11.5895 12.6924 11.6238C11.9994 11.5902 11.3049 11.6384 10.6233 11.7673C10.2376 11.8166 9.88583 12.0125 9.64083 12.3144C9.56906 12.4579 9.2962 13.1269 9.03147 13.8831H8.61643C8.51095 13.8896 8.40971 13.927 8.32541 13.9907C8.2411 14.0544 8.17747 14.1416 8.14248 14.2413L8.03144 14.5927C8.01216 14.6355 8.00313 14.6822 8.00507 14.7291C8.007 14.7761 8.01985 14.8219 8.04259 14.863C8.06533 14.904 8.09734 14.9392 8.13607 14.9658C8.1748 14.9923 8.21919 15.0095 8.26571 15.0159H8.67601C8.56565 15.3348 8.49388 15.4844 8.49388 15.4844C8.45971 15.6007 8.44216 15.7213 8.44175 15.8426V18.4987C8.44102 18.5927 8.4776 18.6832 8.54346 18.7504C8.60932 18.8175 8.6991 18.8558 8.79314 18.8569H9.78234C9.82942 18.857 9.87608 18.8479 9.91961 18.83C9.96315 18.812 10.0027 18.7857 10.036 18.7524C10.0693 18.7191 10.0957 18.6795 10.1136 18.636C10.1315 18.5924 10.1407 18.5458 10.1405 18.4987V18.0065H15.2679V18.5014C15.2678 18.5483 15.277 18.5948 15.2949 18.6382C15.3128 18.6815 15.3391 18.7209 15.3722 18.7541C15.4053 18.7874 15.4447 18.8137 15.488 18.8317C15.5314 18.8496 15.5778 18.8589 15.6247 18.8589H16.6133C16.6603 18.8591 16.707 18.8499 16.7505 18.832C16.7941 18.8141 16.8336 18.7877 16.8669 18.7544C16.9002 18.7211 16.9266 18.6815 16.9445 18.638C16.9625 18.5945 16.9716 18.5478 16.9714 18.5007V15.8446C16.971 15.7233 16.9535 15.6028 16.9193 15.4864C16.9193 15.4864 16.8475 15.3381 16.7284 15.0179H17.1346C17.181 15.0117 17.2252 14.9944 17.2635 14.9676C17.3018 14.9407 17.3331 14.9051 17.3548 14.8636C17.3765 14.8222 17.3879 14.7761 17.3881 14.7293C17.3883 14.6825 17.3773 14.6364 17.356 14.5947L17.3553 14.5934ZM10.6077 16.7302H10.1392C9.71599 16.7302 9.29959 16.6625 9.29959 16.372V16.0152C9.28837 15.9641 9.29056 15.9109 9.30594 15.8608C9.32132 15.8108 9.34938 15.7655 9.38738 15.7295C9.42539 15.6935 9.47206 15.6678 9.52287 15.6552C9.57368 15.6425 9.62691 15.6431 9.67739 15.657C9.96541 15.7106 10.2425 15.8118 10.4973 15.9563C10.6253 15.9798 10.7453 16.035 10.8465 16.1168C10.9476 16.1987 11.0266 16.3046 11.0762 16.4248C11.0633 16.6334 10.9591 16.7309 10.6077 16.7309V16.7302ZM9.61916 14.2691C9.74465 13.7401 9.93929 13.2299 10.1981 12.7518C10.2434 12.6414 10.2888 12.2893 12.6971 12.2893C15.1054 12.2893 15.1569 12.6868 15.163 12.6956C15.4163 13.1995 15.6191 13.7272 15.7683 14.2711C14.7655 14.5267 13.7314 14.6384 12.6971 14.6029C11.6608 14.6329 10.6253 14.5213 9.61916 14.2711V14.2691ZM15.2673 16.7302H14.798C14.4399 16.7302 14.3363 16.6327 14.3363 16.4309C14.3879 16.312 14.4675 16.2073 14.5683 16.1257C14.6691 16.0441 14.7881 15.9881 14.9152 15.9624C15.17 15.8179 15.4471 15.7167 15.7351 15.6631C15.7856 15.6494 15.8387 15.6489 15.8894 15.6617C15.9402 15.6744 15.9867 15.7001 16.0247 15.736C16.0626 15.772 16.0907 15.8172 16.1061 15.8671C16.1216 15.9171 16.1239 15.9702 16.1129 16.0213V16.3727C16.1061 16.6659 15.6837 16.7309 15.2666 16.7309L15.2673 16.7302ZM8.55211 13.286C8.76064 12.7064 8.9685 12.1925 9.05314 12.0293C9.1789 11.8283 9.34509 11.6557 9.54114 11.5223C9.73719 11.389 9.95882 11.2979 10.192 11.2548C10.2492 11.2403 10.3057 11.2229 10.3612 11.2026C11.1009 11.0471 11.8576 10.988 12.6125 11.0266H12.6517C12.645 11.0137 12.645 11.007 12.6389 10.9941H13.0451C13.0912 10.9871 13.135 10.9696 13.1732 10.9428C13.2114 10.9161 13.2428 10.8809 13.2651 10.84C13.2874 10.7991 13.2999 10.7536 13.3017 10.707C13.3035 10.6604 13.2944 10.6141 13.2753 10.5716L13.1514 10.2202C13.1153 10.1212 13.0514 10.0347 12.9673 9.97118C12.8832 9.90764 12.7826 9.86974 12.6775 9.86203H12.2597C12.0765 9.32717 11.8732 8.79936 11.6504 8.27973C11.5362 8.12885 11.3914 8.00385 11.2254 7.91294C11.0595 7.82204 10.8762 7.76729 10.6876 7.75229C10.006 7.62291 9.31139 7.57495 8.61846 7.60943C7.92554 7.57563 7.23105 7.62358 6.54934 7.75229C6.16373 7.80163 5.81192 7.99754 5.56692 8.29936C5.49515 8.44223 5.22229 9.11184 4.96162 9.86813H4.54929C4.44384 9.87465 4.34264 9.9121 4.25835 9.9758C4.17406 10.0395 4.1104 10.1266 4.07534 10.2263L3.95144 10.5777C3.93216 10.6205 3.92313 10.6672 3.92506 10.7141C3.927 10.7611 3.93985 10.8069 3.96259 10.848C3.98533 10.889 4.01734 10.9242 4.05607 10.9508C4.0948 10.9773 4.13919 10.9945 4.1857 11.0009H4.59533C4.48497 11.3198 4.4132 11.4694 4.4132 11.4694C4.37903 11.5857 4.36148 11.7063 4.36106 11.8276V14.4837C4.36034 14.5777 4.39692 14.6682 4.46278 14.7354C4.52864 14.8025 4.61842 14.8408 4.71246 14.8419H5.70166C5.74874 14.842 5.7954 14.8329 5.83893 14.815C5.88247 14.797 5.92202 14.7706 5.95532 14.7374C5.98861 14.7041 6.01499 14.6645 6.03293 14.621C6.05086 14.5774 6.06 14.5308 6.05982 14.4837V13.9894H7.56291C7.64265 13.7906 7.77874 13.6193 7.95448 13.4967C8.13022 13.3742 8.33794 13.3056 8.55211 13.2995V13.286ZM6.52091 12.7003H6.05305C5.62989 12.7003 5.2074 12.6414 5.2074 12.3421V11.9907C5.19623 11.9396 5.19843 11.8865 5.21378 11.8366C5.22914 11.7866 5.25712 11.7414 5.29504 11.7054C5.33295 11.6694 5.37952 11.6438 5.43023 11.631C5.48094 11.6182 5.53408 11.6188 5.58452 11.6326C5.87254 11.6861 6.14964 11.7873 6.40445 11.9318C6.53243 11.9553 6.65247 12.0105 6.75361 12.0923C6.85474 12.1742 6.93373 12.2801 6.98334 12.4004C6.98334 12.6089 6.87908 12.6996 6.52158 12.6996L6.52091 12.7003ZM5.53848 10.2392C5.66409 9.71041 5.85872 9.20049 6.11738 8.72253C6.16274 8.61217 6.20878 8.26009 8.61643 8.26009C11.0241 8.26009 11.0762 8.65753 11.0823 8.66633C11.3343 9.17079 11.5371 9.69842 11.6876 10.2419C10.6848 10.4975 9.6507 10.6092 8.61643 10.5736C7.57994 10.6087 6.5437 10.497 5.53848 10.2419V10.2392ZM10.2888 6.43743C10.3341 6.32707 10.3802 5.97499 12.7878 5.97499C15.1955 5.97499 15.2476 6.37243 15.2537 6.38123C15.5058 6.88566 15.7085 7.4133 15.859 7.95677C14.8562 8.21236 13.8221 8.32407 12.7878 8.28853C12.6639 8.28853 12.5603 8.28176 12.4432 8.28176C12.5786 8.61352 12.71 8.95206 12.84 9.29059H12.8528C13.0778 9.29653 13.2956 9.37103 13.4771 9.50412C13.6586 9.63722 13.7951 9.82256 13.8684 10.0354L13.9923 10.3868C14.0686 10.6077 14.0595 10.8493 13.9666 11.0638C14.3238 11.0744 14.6792 11.1197 15.0276 11.1992L15.1318 11.225C15.3847 11.2578 15.6265 11.349 15.8381 11.4914C16.0496 11.6338 16.2251 11.8236 16.3506 12.0456C16.3898 12.1302 16.4609 12.3123 16.5584 12.5466H16.7013C16.7484 12.5468 16.795 12.5376 16.8386 12.5197C16.8821 12.5018 16.9217 12.4754 16.9549 12.4421C16.9882 12.4088 17.0146 12.3692 17.0326 12.3257C17.0505 12.2822 17.0596 12.2355 17.0595 12.1884V9.52959C17.059 9.40835 17.0415 9.28776 17.0073 9.17143C17.0073 9.17143 16.9315 9.02179 16.815 8.7029H17.2213C17.2679 8.69664 17.3123 8.67958 17.3511 8.65307C17.39 8.62655 17.422 8.59133 17.4448 8.55021C17.4676 8.50909 17.4804 8.46321 17.4822 8.41624C17.4841 8.36928 17.475 8.32253 17.4555 8.27973L17.3316 7.92833C17.2955 7.82932 17.2316 7.74285 17.1475 7.67931C17.0634 7.61577 16.9628 7.57787 16.8577 7.57016H16.4379C16.2491 7.03733 16.0459 6.50971 15.8285 5.98786C15.7135 5.83626 15.5676 5.71083 15.4005 5.6199C15.2333 5.52897 15.0487 5.47461 14.859 5.46042C14.1765 5.33085 13.481 5.28289 12.7872 5.31756C12.0942 5.28376 11.3997 5.33171 10.718 5.46042C10.3325 5.50982 9.98067 5.70572 9.73562 6.00749C9.68349 6.11786 9.51422 6.6717 9.31922 7.18559C9.57922 7.19236 9.79317 7.20522 9.98952 7.212C10.1324 6.86669 10.2495 6.53493 10.2888 6.43743ZM16.1975 9.70563V10.0638C16.1975 10.357 15.7744 10.422 15.3512 10.422H14.8827C14.5245 10.422 14.4209 10.3245 14.4209 10.1227C14.4725 10.0038 14.5521 9.89905 14.6529 9.81747C14.7537 9.7359 14.8727 9.67988 14.9998 9.65417C15.2546 9.50963 15.5317 9.40849 15.8197 9.35491C15.8696 9.34036 15.9225 9.33902 15.973 9.35103C16.0236 9.36304 16.0702 9.38798 16.1082 9.42341C16.1462 9.45884 16.1744 9.50355 16.1899 9.55314C16.2055 9.60273 16.2079 9.65551 16.1969 9.70631L16.1975 9.70563Z" fill="#FF5F5F"/>
+</g>
+</g>
+</g>
+</g>
+</g>
+</g>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_1136_5461">
+<rect width="13.5579" height="13.5579" fill="white" transform="translate(3.92871 5.30615)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/event/行人.svg b/ruoyi-ui/src/views/JiHeExpressway/images/event/行人.svg
new file mode 100644
index 00000000..c43719a5
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/images/event/行人.svg
@@ -0,0 +1,7 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 10181">
+<g id="Group 1142814237">
+<path id="Vector" d="M13.3779 18.1716L13.119 17.6455L11.9421 21.1608C11.8483 21.4009 11.7215 21.6263 11.5655 21.8304L9.21156 25.2141C9.11074 25.3714 9.04393 25.5487 9.01552 25.7342C8.98712 25.9197 8.99778 26.1092 9.04679 26.2902C9.08788 26.4754 9.16535 26.6503 9.27455 26.8044C9.38376 26.9585 9.52245 27.0886 9.68233 27.1869C9.93838 27.3664 10.2422 27.4624 10.5533 27.4619C10.6589 27.4737 10.7655 27.4737 10.8711 27.4619C11.0643 27.4207 11.2469 27.3387 11.4071 27.2213C11.5672 27.104 11.7014 26.9538 11.8008 26.7804L14.0253 23.4326C14.298 22.997 14.5304 22.5367 14.7196 22.0575L15.367 20.2282L15.1904 20.1325C14.4165 19.6654 13.7882 18.9856 13.3779 18.1716ZM17.6385 9.35951C18.3388 9.36589 19.0131 9.09017 19.5138 8.59271C20.0145 8.09524 20.3008 7.41653 20.3101 6.70511C20.3078 5.98684 20.0252 5.29881 19.5245 4.79176C19.0237 4.28471 18.3455 4 17.6385 4C16.9315 4 16.2533 4.28471 15.7525 4.79176C15.2517 5.29881 14.9692 5.98684 14.9668 6.70511C14.9761 7.41654 15.2625 8.09525 15.7632 8.59272C16.2639 9.09019 16.9382 9.36589 17.6385 9.35951ZM20.1336 21.0292L18.0739 17.2151L18.0033 17.0955L17.8033 16.7966L17.9562 16.0194L18.6153 13.3172C18.801 12.4824 18.6589 11.607 18.2194 10.877C17.7799 10.1469 17.0775 9.61967 16.2614 9.40731C16.0029 9.322 15.733 9.27764 15.4611 9.27579C15.2073 9.24126 14.9491 9.26176 14.7037 9.33596C14.4582 9.41016 14.231 9.53636 14.037 9.70625L11.3772 12.2769C11.2291 12.4476 11.1026 12.6364 11.0005 12.8389L9.47047 16.115C9.39672 16.263 9.35407 16.4249 9.34522 16.5905C9.33637 16.756 9.36152 16.9217 9.41908 17.0769C9.47663 17.232 9.56533 17.3734 9.67954 17.4918C9.79374 17.6103 9.93096 17.7034 10.0825 17.7651C10.3859 17.9127 10.733 17.938 11.0541 17.8359C11.3751 17.7339 11.6461 17.512 11.8126 17.2151L13.3662 13.9031L13.8134 13.4726L13.425 15.1824C13.0366 16.6412 13.2249 18.7695 16.2614 20.4314L16.3556 20.4912L17.2618 22.1532C17.7165 23.6632 18.0355 25.2119 18.2151 26.7804C18.2405 26.9717 18.3062 27.1551 18.4077 27.3181C18.5093 27.4811 18.6443 27.6199 18.8036 27.725C19.0682 27.905 19.3797 28.0008 19.6981 28H19.8864C20.2691 27.9562 20.6217 27.7686 20.875 27.4739C21.0063 27.3079 21.1015 27.1155 21.1542 26.9094C21.207 26.7033 21.2161 26.4882 21.181 26.2783L20.6043 22.2369C20.5051 21.8135 20.3466 21.4068 20.1336 21.0292H20.1336ZM21.899 15.8879C21.8506 15.7387 21.7737 15.6006 21.6727 15.4816C21.5717 15.3626 21.4487 15.265 21.3105 15.1944L18.9567 13.9987L18.3446 16.5335L20.1571 17.514C20.3376 17.6277 20.545 17.6897 20.7574 17.6933C20.9607 17.6764 21.1577 17.6129 21.3335 17.5077C21.5094 17.4024 21.6595 17.2582 21.7727 17.0857C21.8859 16.9132 21.9592 16.7169 21.9872 16.5116C22.0152 16.3062 21.9971 16.0971 21.9343 15.8998L21.899 15.8879Z" fill="#FF5F5F"/>
+</g>
+</g>
+</svg>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/event/非机动车.svg b/ruoyi-ui/src/views/JiHeExpressway/images/event/非机动车.svg
new file mode 100644
index 00000000..e21639bd
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/images/event/非机动车.svg
@@ -0,0 +1,22 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 10182">
+<g id="&#233;&#161;&#181;&#233;&#157;&#162;-1">
+<g id="&#233;&#166;&#150;&#233;&#161;&#181;-&#229;&#185;&#179;&#233;&#157;&#162;3">
+<g id="&#231;&#188;&#150;&#231;&#187;&#132;-16&#229;&#164;&#135;&#228;&#187;&#189;">
+<g id="1">
+<g id="&#232;&#183;&#175;&#233;&#157;&#162;&#231;&#138;&#182;&#230;&#128;&#129;">
+<g id="Frame" clip-path="url(#clip0_1136_5516)">
+<path id="Vector" d="M10.4988 13.6273C9.82189 13.631 9.27448 14.0608 9.27448 14.591V16.0385C9.27448 16.1195 9.29224 16.199 9.31677 16.274C9.34131 16.352 9.38108 16.4263 9.42931 16.4945C9.44284 16.5148 9.45384 16.535 9.47076 16.5538C9.48854 16.5763 9.51137 16.598 9.53337 16.6198C9.55791 16.6445 9.5816 16.6685 9.60952 16.6932C9.62898 16.709 9.65182 16.7255 9.67213 16.7405C9.70682 16.766 9.74151 16.79 9.78043 16.8118C9.79904 16.823 9.81935 16.8328 9.83797 16.8425C9.90034 16.8733 9.96508 16.9001 10.0317 16.9228C10.0901 16.9415 10.1519 16.9573 10.2162 16.97C10.2263 16.9715 10.2356 16.9753 10.2466 16.9768C10.3236 16.9903 10.4017 16.9979 10.4801 16.9993H10.4759C10.4818 16.9985 10.4895 17 10.4971 17L10.5191 16.9985H10.5148C10.6683 16.9953 10.8202 16.9695 10.9641 16.922C10.9802 16.9168 10.9971 16.9093 11.014 16.9048C11.0639 16.886 11.1113 16.8642 11.157 16.8418C11.1773 16.8313 11.1968 16.8223 11.2154 16.811C11.2535 16.79 11.2898 16.7638 11.3237 16.7398C11.3449 16.724 11.366 16.709 11.3863 16.6925C11.4134 16.67 11.4379 16.6445 11.4624 16.619C11.4828 16.5973 11.5064 16.5755 11.5251 16.553C11.5411 16.5342 11.5513 16.5125 11.5657 16.4938C11.6643 16.3575 11.7182 16.1996 11.7214 16.0378V14.5903C11.723 14.0608 11.1756 13.6295 10.4988 13.6273ZM15.4391 5C15.4213 5 15.406 5.0015 15.3874 5.003L15.2309 5.00375C15.2191 5.00375 15.2081 5.0015 15.1962 5.0015C15.1793 5.0015 15.1649 5.00375 15.1505 5.00525L12.493 5.036L11.7171 6.878H9.28039L8.50369 5.036L5.84614 5.00525C5.83006 5.00375 5.81567 5.0015 5.80044 5.0015C5.7886 5.0015 5.7776 5.00375 5.76576 5.00375L5.61008 5.003C5.59317 5.0015 5.57624 5 5.55847 5C5.40796 5.00276 5.26479 5.05816 5.16018 5.15412C5.05557 5.25008 4.99801 5.37882 5.00005 5.51225V5.618C5.00005 5.89925 5.25134 6.13025 5.55846 6.13025C5.572 6.13025 5.58469 6.13025 5.59739 6.12875H5.76408C5.7759 6.12875 5.78691 6.13251 5.80046 6.13251C5.814 6.13251 5.82498 6.13025 5.83684 6.12875H8.05188L8.80574 8.201C8.76786 8.25681 8.7334 8.3144 8.70251 8.3735L7.7219 8.37575C7.71127 8.37585 7.70077 8.37781 7.69101 8.38153C7.68124 8.38525 7.6724 8.39065 7.66501 8.39741C7.65761 8.40418 7.6518 8.41218 7.64791 8.42095C7.64403 8.42972 7.64214 8.43908 7.64237 8.4485V10.0468C6.92744 10.9843 6.4147 12.8765 6.4147 13.6273C6.4147 14.6413 7.3547 16.2515 8.46139 16.2515H8.91996C8.88465 16.1466 8.86614 16.0378 8.86497 15.9283V14.3203C8.86497 13.7285 9.35654 13.2485 9.96149 13.2485H11.0403C11.6452 13.2485 12.1359 13.7285 12.1359 14.3203V15.9283C12.1359 16.04 12.1131 16.148 12.0809 16.2515H12.5387C13.6454 16.2515 14.5845 14.6398 14.5845 13.6273C14.5845 12.878 14.0718 10.9858 13.3568 10.0468V8.45C13.3572 8.44062 13.3554 8.43127 13.3516 8.42251C13.3478 8.41374 13.3421 8.40573 13.3348 8.39896C13.3274 8.39218 13.3186 8.38677 13.3089 8.38304C13.2992 8.37932 13.2887 8.37735 13.2782 8.37725L12.2975 8.37425C12.2671 8.31482 12.2323 8.2572 12.1935 8.20175L12.9482 6.1295H15.1624C15.1742 6.1295 15.1852 6.13326 15.1988 6.13326C15.2123 6.13326 15.2233 6.131 15.236 6.1295H15.4018C15.4154 6.131 15.4281 6.131 15.4416 6.131C15.7487 6.131 16 5.9 16 5.61875V5.513C15.9975 5.23099 15.7462 5 15.4391 5ZM10.4988 10.5433C9.67298 10.5395 9.00457 9.92375 9.00457 9.16625C9.00457 8.40876 9.67298 7.793 10.4988 7.78925C11.3245 7.793 11.9929 8.408 11.9929 9.16625C11.9929 9.92451 11.3245 10.5395 10.4988 10.5433Z" fill="#FF5F5F"/>
+</g>
+</g>
+</g>
+</g>
+</g>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_1136_5516">
+<rect width="12.3051" height="12.3051" fill="white" transform="translate(3.85547 4.6167)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/PerceiveEvent/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/PerceiveEvent/index.vue
index 5b92b9f2..2a9c0d0f 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/PerceiveEvent/index.vue
+++ b/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 {
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/RoadNetworkFacilities/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/RoadNetworkFacilities/index.vue
index 866028f1..7c17759d 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/RoadNetworkFacilities/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/RoadNetworkFacilities/index.vue
@@ -79,6 +79,13 @@ export default {
   flex-direction: column;
   gap: 12px;
 
+  ::v-deep {
+    .el-tabs__content {
+      overflow-y: auto;
+      max-height: 220px;
+    }
+  }
+
   .camera-video {
     flex: 1.5;
   }
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/TrafficIncidents/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/TrafficIncidents/index.vue
index 60edfa4f..717baa51 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/TrafficIncidents/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/TrafficIncidents/index.vue
@@ -11,7 +11,7 @@
           <Button @click.native="handleEventRelieve" style="width: 100px;">
             事件解除
           </Button>
-          <Button @click.native="goStrategy" style="width: 100px;">
+          <Button @click.native="goDispatch" style="width: 100px;">
             设备管控
           </Button>
           <Button @click.native="goDispatch" style="width: 100px;">
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFrameControl/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFrameControl/index.vue
index 7cc30117..67e2b74b 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFrameControl/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFrameControl/index.vue
@@ -16,12 +16,12 @@
         <span class="close" @click="() => { this.activeIcon = null; }">
           <i class="el-icon-close" />
         </span>
-        <div v-if="tabAction === '1'" style="width:70vw;">
+        <div v-if="tabAction === '1'" style="width:70vw; min-height: 500px;">
           <Form v-model="data" labelWidth="90px" column="2" class="form" ref="FormConfigRef" :formList="formList" />
-          <component ref="ControlComponent" :is="componentMap[DeviceTopics[data.deviceType]]" :isMultiControl="true"
-            :visible="true" :selectItems="data.childType" @update:activeIcon="(val) => { this.activeIcon = val }"
-            @update:submitting="(val) => { submitting = val }"></component>
-          <div v-if="hiddenDevices.indexOf(componentMap[DeviceTopics[data.deviceType]]) == -1" class="footer">
+              <component ref="ControlComponent" :is="componentMap[DeviceTopics[data.deviceType]]" :isMultiControl="true"
+                :visible="true" :selectItems="data.childType" @update:activeIcon="(val) => { this.activeIcon = val }"
+                @update:submitting="(val) => { submitting = val }"></component>
+              <div v-if="hiddenDevices.indexOf(componentMap[DeviceTopics[data.deviceType]]) == -1" class="footer">
             <Button @click.native="submitClick" :loading="submitting">
               确认
             </Button>
@@ -53,9 +53,10 @@
         <div v-if="tabAction === '3'" style="width:70vw;height: 500px;display: flex;flex-direction: column; justify-content: center;align-items: flex-start;" >
           <Form v-model="dataRecord" style="width:100%;" labelWidth="90px" column="2" class="form" ref="FormRecordRef" :formList="formRecord" />
           <Table :data="tableData" height="500px" style="margin: 20px;width:95%">
-            <ElTableColumn label="管控时间" prop="operTime" width="300"/>
-            <ElTableColumn label="管控方式" prop="operType" width="200"/>
-            <ElTableColumn label="操作人" prop="operName" width="200"/>
+            <ElTableColumn label="管控时间" prop="operTime" width="200"/>
+            <ElTableColumn label="设备名称" prop="dcDeviceName" width="300"/>
+            <ElTableColumn label="管控方式" prop="operType" width="100"/>
+            <ElTableColumn label="操作人" prop="operName" width="100"/>
             <ElTableColumn label="执行结果" prop="stakeMark" >
               <template slot-scope="scope">
                 <el-popover
@@ -71,7 +72,7 @@
 
           <!-- 分页 -->
           <div class="footer" style="margin-top:-20px;margin-bottom: 30px">
-            <ElPagination @current-change="bindResult" @size-change="onSizeChange" width="'100%'" :page-sizes="[10, 20, 30, 40, 50]"
+            <ElPagination @current-change="bindRecord" @size-change="onSizeChange" width="'100%'" :page-sizes="[10, 20, 30, 40, 50]"
               :page-size="searchData.pageSize" :current-page.sync="searchData.pageNum" layout="total, sizes, prev, pager, next"
               :total="tableTotal" class="Pagination">
             </ElPagination>
@@ -191,8 +192,8 @@ export default {
           type: "select",
           options: {
             options: [
-              { key: "1", label: "济南方向" },
-              { key: "3", label: "菏泽方向" },
+              { key: "1", label: "菏泽方向" },
+              { key: "3", label: "济南方向" },
               { key: "2", label: "双向" },
             ],
           },
@@ -310,6 +311,7 @@ export default {
           key: "childType",
           type: "select",
           isAlone: true,
+          width: '100%',
           options: {
             clearable: true,
             options: [],
@@ -362,11 +364,11 @@ export default {
           type: "select",
           options: {
             options:  [
-        { key: "0", label: "手动控制" },
-        { key: "1", label: "定时控制" },
-        { key: "2", label: "批量控制" },
-        { key: "3", label: "预案控制" }
-      ],
+              { key: "0", label: "手动控制" },
+              { key: "1", label: "定时控制" },
+              { key: "2", label: "批量控制" },
+              { key: "3", label: "预案控制" }
+            ],
           },
         },
         {
@@ -375,7 +377,7 @@ export default {
           required: false,
           type: "datePicker",
           options: {
-            style: "width: auto",
+            style: "width: 96%",
             type: "datetimerange",
             format: "yyyy-MM-dd HH:mm:ss",
             valueFormat: "yyyy-MM-dd HH:mm:ss",
@@ -423,21 +425,10 @@ export default {
     },
     tabClick() {
       if(this.tabAction === '2'){
-        request({
-          url: `/business/dcBatchFunctionsJobGroup/list`,
-          method: "get",
-          params: {},
-        })
-          .then((result) => {
-            if (result.code != 200) return;
-            this.tableTotal = result.total;
-            this.data = result.rows;
-          })
-          .finally(() => {
-          });
+       this.bindTimeing();
       } else if(this.tabAction === '3'){
         this.dataRecord.operTime = [moment().startOf('month').format('YYYY-MM-DD 00:00:00'),moment().endOf('month').format('YYYY-MM-DD 23:59:59'),]
-        this.bindResult();
+        this.bindRecord();
       }
     },
     handleClick(type) {
@@ -466,11 +457,21 @@ export default {
           Message.success(`操作成功!`);
         })
     },
-    bindResult(){
-      // dataRecord:{
-      //   operType: "0",
-      //   operTime:['2024-04-01 00:00:00','2024-04-25 23:59:59']
-      // },
+    bindTimeing(){
+      request({
+          url: `/business/dcBatchFunctionsJobGroup/list`,
+          method: "get",
+          params: {},
+        })
+          .then((result) => {
+            if (result.code != 200) return;
+            this.tableTotal = result.total;
+            this.data = result.rows;
+          })
+          .finally(() => {
+          });
+    },
+    bindRecord(){
       request({
         url: `/business/dcOperLog/list`,
         method: "get",
@@ -482,6 +483,7 @@ export default {
             e.operTime = moment(e.operTime).format('YYYY-MM-DD HH:mm:ss')
             e.operType = _.find(this.Enum_ControlType,{key:e.operType}).label
           });
+          console.log(result.rows)
           this.tableData = result.rows;
           this.tableTotal = result.total;
         })
@@ -492,7 +494,7 @@ export default {
       this.tableData = [];
       this.searchData.pageSize = pageSize;
       this.searchData.pageNum = 1;
-      this.bindResult();
+      this.bindRecord();
     },
     showResult(res){
       this.digResultVisible = true
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/httpList.js b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/httpList.js
index 68a48f72..209fa293 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/httpList.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/httpList.js
@@ -371,24 +371,24 @@ export function getEventTopicList(eventType, options = {}) {
  */
 export function getPerceiveEventList(data = {}, options = {}) {
   return new Promise((resolve, reject) => {
-    const completeTime = moment().add(1, "d").format("YYYY-MM-DD");
-    const startTime = moment().add(-7, "d").format("YYYY-MM-DD");
-    data.startTime = startTime;
-    data.completeTime = completeTime;
-
-    const { endStakeMark, startStakeMark } = options;
-    if (endStakeMark) {
-      let formatEndStakeMark = `K${padZero(endStakeMark[0])}+${padZero(
-        endStakeMark[1]
-      )}`;
-      data.endStakeMark = formatEndStakeMark;
-    }
-    if (startStakeMark) {
-      let formatStartStakeMark = `K${padZero(startStakeMark[0])}+${padZero(
-        startStakeMark[1]
-      )}`;
-      data.startStakeMark = formatStartStakeMark;
-    }
+    // const completeTime = moment().add(1, "d").format("YYYY-MM-DD");
+    // const startTime = moment().add(-7, "d").format("YYYY-MM-DD");
+    // data.startTime = startTime;
+    // data.completeTime = completeTime;
+
+    // const { endStakeMark, startStakeMark } = options;
+    // if (endStakeMark) {
+    //   let formatEndStakeMark = `K${padZero(endStakeMark[0])}+${padZero(
+    //     endStakeMark[1]
+    //   )}`;
+    //   data.endStakeMark = formatEndStakeMark;
+    // }
+    // if (startStakeMark) {
+    //   let formatStartStakeMark = `K${padZero(startStakeMark[0])}+${padZero(
+    //     startStakeMark[1]
+    //   )}`;
+    //   data.startStakeMark = formatStartStakeMark;
+    // }
 
     request({
       url: `/perceivedEvents/warning/warningList`,
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/CrowdnessIndicatorRankings/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/CrowdnessIndicatorRankings/index.vue
index 3d429934..f19ba0b8 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/CrowdnessIndicatorRankings/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/CrowdnessIndicatorRankings/index.vue
@@ -202,9 +202,12 @@ export default {
     }
   }
 }
-.weather span {
-  margin-right: 20px;
-  display: inline-block;
+.weather {
+  width: 435px;
+  span {
+    margin-right: 20px;
+    display: inline-block;
+  }
 }
 .statistics {
   width: 300px;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DisposalProcess/DialogVisible/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DisposalProcess/DialogVisible/index.vue
index c781c6b4..17ae4079 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DisposalProcess/DialogVisible/index.vue
+++ b/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,
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/dispatch/EventDetailDialog/Carousel/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/dispatch/EventDetailDialog/Carousel/index.vue
index 42b14da7..eb1dff33 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/dispatch/EventDetailDialog/Carousel/index.vue
+++ b/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.svg"
-        },
-        {
-          "imageURL": "shareWith/website-active.svg"
-        },
-        {
-          "imageURL": "shareWith/website.svg"
-        },
-        {
-          "imageURL": "shareWith/weChat-active.svg"
-        },
-        {
-          "imageURL": "shareWith/weChat-active.svg"
-        }
+        // {
+        //   "imageURL": "shareWith/message-active.svg"
+        // },
+        // {
+        //   "imageURL": "shareWith/message.svg"
+        // },
+        // {
+        //   "imageURL": "shareWith/website-active.svg"
+        // },
+        // {
+        //   "imageURL": "shareWith/website.svg"
+        // },
+        // {
+        //   "imageURL": "shareWith/weChat-active.svg"
+        // },
+        // {
+        //   "imageURL": "shareWith/weChat-active.svg"
+        // }
       ],
       settings: {
         infinite: true,
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/dispatch/EventDetailDialog/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/dispatch/EventDetailDialog/index.vue
index 9bbd6616..0e823752 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/dispatch/EventDetailDialog/index.vue
+++ b/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" />
 
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/index.vue
index 2c2b9f61..a30ca6bd 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/index.vue
@@ -72,38 +72,20 @@
     </div>
 
     <!-- 确认弹窗 -->
-    <EventPlanDialog
-      :visible="isShowDialog"
-      :info="info"
-      :eventFormData="formData"
-      :activeName="activeName"
-      @reInitData="
-        () => {
-          this.$emit('update:value', false);
-          this.$emit('queryData', true);
-        }
-      "
-      @close="onCloseAddNew"
-    />
+    <EventPlanDialog :visible="isShowDialog" :info="info" :eventFormData="formData" :activeName="activeName"
+      @reInitData="() => {
+    this.$emit('update:value', false);
+    this.$emit('queryData', true);
+  }
+    " @close="onCloseAddNew" />
 
     <template #footer>
-      <Button
-        v-if="activeName == '-1' || activeName == '0'"
-        style="padding: 0 24px"
-        @click.native="onDelete"
-        >误报</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
-      >
+      <Button v-if="activeName == '-1' || activeName == '0'" style="padding: 0 24px"
+        @click.native="onDelete">误报</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>
@@ -146,7 +128,7 @@ export default {
     activeName: String,
     formData: {
       type: Object,
-      default: () => {},
+      default: () => { },
     },
   },
   data() {
@@ -200,7 +182,7 @@ export default {
         method: "get",
         params: { eventId: this.formData.id },
       }).then((rows) => {
-        console.log('rows',rows)
+        console.log('rows', rows)
         // if (result.code != 200) return Message.error(result?.msg);
         // const rows = result.rows;
         this.timeLine1List = [];
@@ -296,22 +278,59 @@ export default {
       }
     },
     onSubmit() {
-      return;
-      let url = "/business/plans/list/warning/type";
-      if (this.activeName == "-1") {
-        url = "/business/plans/list/warning/type";
+      // let url = "/business/plans/list/warning/type";
+      // if (this.activeName == "-1") {
+      //   url = "/business/plans/list/warning/type";
+      // } else {
+      //   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: '/business/warning/updateWarningConvert',
+          method: "post",
+          data: reData,
+        }).then((result) => {
+          if (result.code != 200) return Message.error(result?.msg);
+          else Message.success("成功！");
+
+          this.modelVisible = false;
+          this.$emit("queryData", true);
+        });
       } else {
-        url = "/business/plans/list/event/type";
+        let eventId = this.formData.id;
+        this.modelVisible = false;
+        
+        setTimeout(() => {
+          this.$router.push(`/control/event/commandDispatch?eventId=${eventId}`);
+          // this.$router.push(`/control/event/commandDispatch`);
+        })
+
       }
-      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;
-      });
+
     },
     reInitData() {
       console.log("reInitData");
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/index.vue
index 501dd3be..2bc8b0fa 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/index.vue
+++ b/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 = {
-  1: '视频AI',
-  2: '雷达识别',
-  3: '锥桶',
-  4: '护栏碰撞',
-  5: '扫码报警',
-  6: '非机预警',
-  // 7: '气象监测器'
-}
-const gzDirectionMapping = {
-  '1': '菏泽方向',
-  '2': '双向',
-  '3': '济南方向'
-}
-const warningStateMapping = {
-  1: '上报',
-  2: '已完成',
-  3: '已终止',
-  4: '自动结束'
-}
+// const warningSourceMapping = {
+//   1: '视频AI',
+//   2: '雷达识别',
+//   3: '锥桶',
+//   4: '护栏碰撞',
+//   5: '扫码报警',
+//   6: '非机预警',
+//   // 7: '气象监测器'
+// }
+// const gzDirectionMapping = {
+//   '1': '菏泽方向',
+//   '2': '双向',
+//   '3': '济南方向'
+// }
+// const warningStateMapping = {
+//   1: '上报',
+//   2: '已完成',
+//   3: '已终止',
+//   4: '自动结束'
+// }
 
 export default {
   name: "RoadNetworkMonitoring2",
@@ -199,8 +199,16 @@ export default {
           if (result.code != 200) return Message.error(result?.msg);
           result.rows.forEach(it => {
             it.stringDirection = gzDirectionMapping[it.direction] || it.direction;
-            it.startTime = it?.occurrenceTime || '';
             it.stringEventType = it.stringEventType + (it.eventSubclass ? `(${it.eventSubclass})` : '');
+
+            if (this.activeName == '0') {
+              it.startTime = it?.occurrenceTime || '';
+            } else if (this.activeName == '1') {
+
+            } else if (this.activeName == '2') {
+              it.startTime = it?.endTime || '';
+            }
+
             // if (it.otherConfig) {
             //   let otherConfig = JSON.parse(it.otherConfig);
             //   it.pictures = otherConfig.pictures || [];
@@ -331,6 +339,9 @@ export default {
       }
 
     },
+    onLastBtnClick(id) {
+      this.$router.push(`/control/event/commandDispatch?eventId=${id}`);
+    },
     handleClose() {
       this.eventDetailDialogVisible = false;
     },
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/onLineBarCharts/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/onLineBarCharts/index.vue
index a549ecb2..c37e9398 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/onLineBarCharts/index.vue
+++ b/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);
-        newD.forEach((element) => {
-          xData.push(element.title);
-          valueData.push(+element.pctOnl.replace("%", ""));
-        });
+        for (let key in newD) {
+          xData.push(key);
+          valueData.push(newD[key].sucessRate.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 });
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue
index 60fa0f77..74e47dff 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue
+++ b/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>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/TemperatureTrend/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/TemperatureTrend/index.vue
index f3c1a32b..194beca0 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/TemperatureTrend/index.vue
+++ b/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,
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/visibilityTrends/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/visibilityTrends/assets/charts.js
index 2e6bf6dd..4c35fec9 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/visibilityTrends/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/visibilityTrends/assets/charts.js
@@ -5,7 +5,7 @@ var options = {
     show: true,
     trigger: "axis",
     valueFormatter: function (value) {
-      return value + " M";
+      return value + " km";
     },
   },
   grid: {
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/visibilityTrends/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/visibilityTrends/index.vue
index 15769caa..d264d44a 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/visibilityTrends/index.vue
+++ b/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);
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/weaterData/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/weaterData/index.vue
index 4a61f985..427e1797 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/weaterData/index.vue
+++ b/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>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherWarning/components/infowWarningList/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherWarning/components/infowWarningList/index.vue
index daa74c2f..407a1058 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherWarning/components/infowWarningList/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherWarning/components/infowWarningList/index.vue
@@ -1,116 +1,75 @@
 <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-column prop="nem" label="" width="30">
+        <el-table
+          :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="name" label="能见度" class-name="showClass" width="250">
+          <el-table-column
+            prop="visibility"
+            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>
     </div>
   </div>
 </template>
-  
+
 <script>
-import Card from "@screen/components/Card1/index.vue"
-import WgtTitle from '../../../../../widgets/title'
+import Card from "@screen/components/Card1/index.vue";
+import WgtTitle from "../../../../../widgets/title";
+import {
+  getMeteorologicalEarlyWarning,
+  getListVisibility,
+} from "@/api/perception/meteorologyCheck";
 
 export default {
-  name: 'infoWarning',
+  name: "infoWarning",
   components: {
-    WgtTitle
+    WgtTitle,
   },
   data() {
     return {
-      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'
-      },
-      ]
-    }
+      tableData: [],
+    };
   },
 
-  created() {
-
-  },
+  created() {},
   methods: {
     selectItem(index) {
       this.selectIndex = index;
     },
+    getWarningType() {
+      getListVisibility().then((res) => {
+        console.log("获取预警类型", res.rows);
+        this.tableData = res.rows;
+      });
+    },
   },
   mounted() {
-
-    setTimeout(() => {
-      this.$nextTick(() => {
-
-      });
-    });
+    this.getWarningType();
   },
-}
+};
 </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,15 +134,13 @@ export default {
     flex-direction: column;
     margin-top: 20px;
 
-
-
     .warningList {
       display: inline-flex;
       flex-direction: column;
       width: 100%;
       height: calc(100% - 40px);
 
-      >div {
+      > div {
         display: inline-flex;
         width: 100%;
         height: 138px;
@@ -191,16 +148,21 @@ 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 {
+        > .left-w {
           display: inline-flex;
           width: 40%;
           height: 100%;
@@ -213,7 +175,7 @@ export default {
             height: 30px;
             flex-direction: row;
 
-            >.value {
+            > .value {
               color: #fff;
             }
 
@@ -221,13 +183,12 @@ export default {
               font-size: 14px;
               font-family: PangMenZhengDao;
               font-weight: 400;
-              color: #F4A125
+              color: #f4a125;
             }
-
           }
         }
 
-        >.right-w {
+        > .right-w {
           margin-left: 30px;
           display: inline-flex;
           width: 100%;
@@ -242,7 +203,6 @@ export default {
             color: #fff;
           }
         }
-
       }
     }
 
@@ -252,12 +212,11 @@ export default {
       width: 100%;
       height: 40px;
 
-
       .buttons {
         width: 100%;
         height: 38px;
 
-        >div {
+        > div {
           display: inline-flex;
           width: 10%;
           height: 35px;
@@ -266,36 +225,56 @@ export default {
           font-size: 12px;
           font-family: PangMenZhengDao;
           font-weight: 800;
-          color: #FFFFFF;
+          color: #ffffff;
           z-index: 9;
         }
 
-        >div::after {
+        > div::after {
           content: "";
           position: absolute;
           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,21 +317,25 @@ 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;
         align-items: center;
 
-        >span.text {
+        > span.text {
           display: inline-flex;
           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>
-  
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/topology/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/topology/index.vue
index ac4d64f9..48dc6739 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/topology/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/topology/index.vue
@@ -1,52 +1,277 @@
 <template>
-  <div class='topolog'>
+  <div class="topolog">
     <div class="list">
-      <div v-for="(item,index) in list" class="listItem  keep-ratio">
-        {{ item.switchName }}
+      <div
+        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="title">
-        <view class="t-left">{{ list[selIndex].switchName }}</view>
+      <div class="top">
+        <div class="t-left">{{ name }}</div>
+        <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
+            >个
+            <div class="space"></div>
+            故障数：<span class="len err">{{ item.error }}</span
+            >个
+          </div>
+        </div>
+      </div>
+      <div class="content" v-if="selIndex === 0">
+        <div class="c c-border">
+          <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"></div>
+            <div class="arrow"></div>
+            <div class="arrow"></div>
+            <div class="arrow"></div>
+          </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 :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>
+            <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: 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="arrowdow arrowtop"></div>
+            <div class="arrowdow arrowtop"></div>
+          </div>
+        </div>
+        <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 :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>
+            <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')"
+              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>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="content" v-else>
+        <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"></div>
+            <div class="arrow"></div>
+            <div class="arrow"></div>
+            <div class="arrow"></div>
+          </div>
+          <div class="cscorll">
+            <!-- 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
+                  :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
+                  :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: 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="arrowdow"></div>
+            <div class="arrowdow"></div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import request from '@/utils/request'
+import request from "@/utils/request";
 import { Message } from "element-ui";
-
+const enum_device_type = [{ type: "1", label: "枪机" }];
 export default {
-  name: 'InDevelopment',
-  components: {
-  },
-  
+  name: "InDevelopment",
+  components: {},
+
   data() {
     return {
       list: [],
-      selIndex: 0
-    }
+      selIndex: 0,
+      name: "",
+      card: [{ total: 0, error: 0 }],
+      topo: [],
+    };
   },
   mounted() {
-    this.bind()
+    this.bind();
+    request({
+      url: "/type/list",
+      method: "get",
+    }).then((res) => {
+      console.log(res);
+    });
   },
-  methods:{
-    bind(){
+  methods: {
+    bind() {
       request({
-          url: '/business/switch/list',
-          method: 'get'
-        }).then(result=>{
-          if (result.code != 200) return Message.error(result?.msg);
-          this.list = result.data
-          console.log(this.list)
-        })
-    }
-  }
-}
+        url: "/business/switch/list",
+        method: "get",
+      }).then((result) => {
+        if (result.code != 200) return Message.error(result?.msg);
+        this.map = result.data[0];
+        let list = [{ name: this.map.switchName }];
+        this.map.children.forEach((e) => {
+          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.card = [
+            {
+              total: this.map.children.length,
+              error: this.map.children.filter((x) => x.netWorkStatus === 0)
+                .length,
+            },
+          ]);
+        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);
+        if (list1) {
+          cards.push({
+            total: list1.length,
+            error: list1.filter((x) => x.netWorkStatus === 0).length,
+          });
+          topo.push(list1);
+        }
+        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,
+          });
+          topo.push(list2);
+        }
+        this.topo = topo;
+        this.card = cards;
+      }
+    },
+  },
+};
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .topolog {
   width: 100%;
   height: 100%;
@@ -61,25 +286,268 @@ export default {
     font-size: 200px;
   }
 }
-.list{
-  width: 20vw;
+
+.list {
+  width: 15vw;
   height: 100%;
   color: white;
-  margin: 0px 20px;
-  .listItem{
+  margin: 0px 40px 0px 20px;
+
+  .listItem {
     background-image: url(../topology/left-bg.png);
     background-repeat: no-repeat;
     background-size: 100% 100%;
-    height: 44px;
+    height: 50px;
     width: 100%;
     text-align: center;
-    line-height: 44px;
+    line-height: 50px;
     margin-top: 20px;
   }
-  
+
+  .listItemAction {
+    background-image: url(../topology/left-bg-action.png);
+  }
 }
-.card{
+
+.card {
   flex: 1;
-  
+  height: 100%;
+
+  .top {
+    width: 99%;
+    height: 50px;
+    margin-top: 20px;
+    display: flex;
+    justify-content: space-between;
+
+    .t-left {
+      height: 50px;
+      padding: 0px 20px;
+      line-height: 50px;
+      border-radius: 5px;
+      background: linear-gradient(to top, #278ea9, #ffffff00);
+    }
+
+    .t-right {
+      display: flex;
+      padding: 0px 30px;
+      border-radius: 5px;
+      background: linear-gradient(to top, #278ea9, #ffffff00);
+      justify-content: center;
+      align-items: flex-end;
+      padding-bottom: 10px;
+      margin-left: 20px;
+      .len {
+        color: #12f7b2;
+        font-size: 26px;
+        font-weight: bold;
+        margin: 0px 10px;
+      }
+
+      .err {
+        color: #ff5935;
+      }
+
+      .space {
+        width: 40px;
+      }
+    }
+  }
+}
+
+.content {
+  width: 99%;
+  margin-top: 20px;
+}
+
+.c {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  height: 315px;
+}
+
+.c-border {
+  border: 2px solid #34d3eb;
+  position: relative;
+  // width: 98%;
+  // margin: auto;
+  // overflow: auto;
+}
+
+.arrow-panel {
+  position: absolute;
+  z-index: 999;
+  width: 65%;
+  display: flex;
+  justify-content: space-around;
+
+  .arrow {
+    width: 25px;
+    height: 10px;
+    background: linear-gradient(to right, #34d3eb, #ffffff00);
+    border-radius: 50%;
+  }
+
+  .arrowrig {
+    background: linear-gradient(to left, #34d3eb, #ffffff00);
+  }
+}
+
+.arrow-right {
+  width: 100%;
+  position: absolute;
+  background-color: #ff0000dd;
+}
+
+.arrow-panel-line {
+  height: 300px;
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  margin-left: -100.1%;
+  z-index: 99999;
+  justify-content: space-around;
+
+  .arrowdow {
+    border-radius: 50%;
+    width: 10px;
+    height: 20px;
+    background: linear-gradient(to top, #34d3eb, #ffffff00);
+  }
+
+  .arrowtop {
+    background: linear-gradient(to bottom, #34d3eb, #ffffff00);
+  }
+}
+.cscorll {
+  // width: 80vw;
+  width: 100%;
+  position: absolute;
+  display: flex;
+  justify-content: space-around;
+  height: 310px;
+  padding: 0 20px;
+  overflow-y: hidden;
+  overflow-x: auto;
+  z-index: 9999;
+}
+.switchScro {
+  height: 300px;
+  width: 200px;
+  margin-right: 20px;
+  float: left;
+}
+.switch {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+
+  .line {
+    height: 50px;
+    background-color: #34d3eb;
+    width: 2px;
+  }
+
+  .liner {
+    background-color: #ff5935;
+  }
+
+  .arrowdown {
+    width: 10px;
+    height: 20px;
+    background: linear-gradient(to top, #34d3eb, #ffffff00);
+    margin-top: -25px;
+    border-radius: 50%;
+  }
+
+  .arrowr {
+    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%
+    );
+    border-radius: 4px;
+    padding: 10px 30px;
+    margin-top: 5px;
+    border: 1px solid #34d3eb;
+  }
+  .c-namesw {
+    padding: 0px 50px;
+    margin-top: -5px;
+    font-size: 14px;
+    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%
+    );
+    border: 1px solid #ff5935;
+    // white-space: nowrap;
+    // overflow: hidden;
+    // text-overflow: ellipsis;
+  }
+
+  .c-desc {
+    background: linear-gradient(to bottom, #102229 5%, #34d3eb);
+    padding: 5px 50px;
+    margin-bottom: 30px;
+    font-size: 14px;
+    padding-top: 10px;
+  }
+
+  .c-descr {
+    background: linear-gradient(to bottom, #102229 5%, #ff5935);
+  }
+
+  img {
+    width: 70px;
+    height: 50px;
+    margin-top: 10px;
+  }
+}
+.device-list {
+  border: 1px dashed #34d3eb;
+  min-height: 110px;
+  min-width: 160px;
+  margin-top: 10px;
+  overflow: auto;
+}
+.device-list-r {
+  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 {
+  overflow: hidden;
+  img {
+    margin: 0;
+    width: 25px;
+    height: 25px;
+  }
+  .device-item-text {
+    width: 40px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 12px;
+  }
 }
 </style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/topology/left-bg-action.png b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/topology/left-bg-action.png
new file mode 100644
index 00000000..97046432
Binary files /dev/null and b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/topology/left-bg-action.png differ
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/topology/left-bg.png b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/topology/left-bg.png
index 97046432..5897f492 100644
Binary files a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/topology/left-bg.png and b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/topology/left-bg.png differ
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/topology/switch0.png b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/topology/switch0.png
new file mode 100644
index 00000000..1c079049
Binary files /dev/null and b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/topology/switch0.png differ
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/topology/switch1.png b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/topology/switch1.png
new file mode 100644
index 00000000..7160edd4
Binary files /dev/null and b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/topology/switch1.png differ
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/topology/t10.png b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/topology/t10.png
new file mode 100644
index 00000000..d11e783a
Binary files /dev/null and b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/topology/t10.png differ
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/topology/t11.png b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/topology/t11.png
new file mode 100644
index 00000000..2992fb95
Binary files /dev/null and b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/topology/t11.png differ
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/InformationReleaseManagement/Cards/AuditDetails/DetailCard.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/service/InformationReleaseManagement/Cards/AuditDetails/DetailCard.vue
index 61c250e4..a35b6761 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/service/InformationReleaseManagement/Cards/AuditDetails/DetailCard.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/InformationReleaseManagement/Cards/AuditDetails/DetailCard.vue
@@ -16,17 +16,17 @@
       <div class="content">
         {{ data.desc }}
       </div>
-      <div class="people">
+      <!-- <div class="people">
         <img src="@screen/images/people.svg" alt="">
         <span>发布对象: 甘易玫</span>
-      </div>
+      </div> -->
       <div class="people">
         <img src="@screen/images/people.svg" alt="">
-        <span>当前管制: 甘易玫</span>
+        <span>当前管制: {{data.posts}}</span>
       </div>
-      <div class="suffix remark">
+      <!-- <div class="suffix remark">
         备注: 无
-      </div>
+      </div> -->
       <div class="suffix share-with">
         分享至
         <img v-for="item in shareWithData" :key="item" :src="require(`@screen/images/shareWith/${item}.svg`)">
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/InformationReleaseManagement/Cards/AuditDetails/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/service/InformationReleaseManagement/Cards/AuditDetails/index.vue
index f7afbfc3..b698cc35 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/service/InformationReleaseManagement/Cards/AuditDetails/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/InformationReleaseManagement/Cards/AuditDetails/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <Card2 class='AuditDetails' title="审核详情">
+  <Card2 class='AuditDetails' title="详情">
     <TimeLine2 :data="timeLine2List" style="flex: 1;" direction="right">
       <template #content="{ data }">
         <DetailCard :data="data" />
@@ -12,6 +12,7 @@
 import Card2 from "@screen/components/Card2/Card.vue";
 import TimeLine2 from "@screen/components/TimeLine/TimeLine2/index";
 import DetailCard from "./DetailCard.vue"
+import request from '@/utils/request'
 
 export default {
   name: 'AuditDetails',
@@ -22,14 +23,33 @@ export default {
   },
   data() {
     return {
-      timeLine2List: Array.from({ length: 6 }).map(() => ({
-        time: "2023-12-21 16:35:44",
-        name: "甘易玫",
-        descTitle: "事件详情",
-        desc: "因改扩建施工，接交警通知，G3京台高速崮山（辅）、泰安西站双向入口临时关闭，万德站北京方向入口临时关闭，崮山（主）站北京方向出口临时关闭；济南崮山服务区（台北方向）入口临时关闭。泰安服务区（北京方向）入口临时关闭。泰山枢纽（G22青兰高速兰州方向转G3京台高速北京方向匝道、G22青兰高速青岛方向转G3京台高速北京方向匝道）临时关闭。",
-        posts: '淄博发展公司管理员',
-        state: 0,
-      })),
+      timeLine2List: [],
+    }
+  },
+  methods:{
+    bind(id){
+      request({
+        url: '/business/manage/listEvent?eventId='+id,
+        method: 'get'
+      }).then(res=>{
+        console.log(id, res)
+        let list = []
+        res.data.forEach(e => {
+          list.push({
+            source: "1",
+            onlyright:true,
+            time: e.eventTime,
+            name: e.createBy,
+            descTitle: "事件详情",
+            desc: e.contentDetails,
+            posts: e.facilityName,
+            channel:e.publishChannels,
+            state: 0,
+          })
+        });
+          this.timeLine2List = list;
+       
+      })
     }
   }
 }
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/InformationReleaseManagement/Cards/AuditLists/ListItem.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/service/InformationReleaseManagement/Cards/AuditLists/ListItem.vue
index bd26aa99..b54853ac 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/service/InformationReleaseManagement/Cards/AuditLists/ListItem.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/InformationReleaseManagement/Cards/AuditLists/ListItem.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class='ListItem'>
-    <img class="prefix" :src="require(`@screen/images/ListItem/${eventTypeIcon[data.type]}.svg`)" />
-    <div class="center">
+  <div class='ListItem'  v-on="$listeners">
+    <img class="prefix keep-ratio" :src="require(`@screen/images/ListItem/${data.icon}.svg`)" />
+    <div class="center keep-ratio">
       <div class="header">
         <span class="title">{{ data.title || '-' }}</span>
         <span class="state" :style="{ backgroundColor: state[data.isverify].color }">{{ state[data.isverify].text
@@ -9,7 +9,7 @@
       </div>
       <div class="content">{{ data.content || '-' }}</div>
     </div>
-    <img class="suffix" :src="require(`@screen/images/ListItem/${state[data.isverify].icon}.svg`)" />
+    <!-- <img class="suffix keep-ratio" :src="require(`@screen/images/ListItem/${state[data.isverify].icon}.svg`)" /> -->
   </div>
 </template>
 
@@ -27,25 +27,21 @@ export default {
   },
   data() {
     return {
-      eventTypeIcon: {
-        0: 'AbnormalWeather',
-        1: 'TrafficControl',
-      },
       state: {
         0: {
           color: "#00B1A0",
-          text: "待审核",
+          text: "待确认",
           icon: 'ToBeReviewed'
         },
 
         1: {
           color: "#057DD3",
-          text: "已审核",
+          text: "处理中",
           icon: 'Reviewed'
         },
         2: {
           color: "#C55253",
-          text: "未通过",
+          text: "已完成",
           icon: 'Failed'
         },
       }
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/InformationReleaseManagement/Cards/AuditLists/data.js b/ruoyi-ui/src/views/JiHeExpressway/pages/service/InformationReleaseManagement/Cards/AuditLists/data.js
index 53f9c406..7ec3d5d0 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/service/InformationReleaseManagement/Cards/AuditLists/data.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/InformationReleaseManagement/Cards/AuditLists/data.js
@@ -11,40 +11,40 @@ export const searchFormList = [
       options: [
         {
           key: "0",
-          label: "未解决",
+          label: "待确认",
         },
         {
           key: "1",
-          label: "已解决",
+          label: "处理中",
         },
         {
           key: "2",
-          label: "已关闭",
-        },
-      ],
-    },
-  },
-  {
-    label: "审核状态:",
-    key: "checkState",
-    type: "RadioGroup",
-    options: {
-      options: [
-        {
-          key: "0",
-          label: "待审核",
-        },
-        {
-          key: "1",
-          label: "已审核",
-        },
-        {
-          key: "2",
-          label: "未通过",
+          label: "已完成",
         },
       ],
     },
   },
+  // {
+  //   label: "审核状态:",
+  //   key: "checkState",
+  //   type: "RadioGroup",
+  //   options: {
+  //     options: [
+  //       {
+  //         key: "0",
+  //         label: "待审核",
+  //       },
+  //       {
+  //         key: "1",
+  //         label: "已审核",
+  //       },
+  //       {
+  //         key: "2",
+  //         label: "未通过",
+  //       },
+  //     ],
+  //   },
+  // },
   {
     label: "时间范围:",
     key: "daterange",
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/InformationReleaseManagement/Cards/AuditLists/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/service/InformationReleaseManagement/Cards/AuditLists/index.vue
index bcf17179..4238988d 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/service/InformationReleaseManagement/Cards/AuditLists/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/InformationReleaseManagement/Cards/AuditLists/index.vue
@@ -1,17 +1,20 @@
 <template>
   <Card2 class="Auditlists" title="审核列表">
-    <InputSearch style="width: 100%" :formList="searchFormList" />
+    <InputSearch style="width: 100%" :formList="searchFormList" @handleSearch="handleSearch"  />
     <div class="body">
       <ListItem
         v-for="item in list.rows"
         :key="item.id"
         :data="item"
         origin="left"
-        class="middle-ratio"
+        @click.native="onClick(item)"
       />
     </div>
     <div class="footer">
-      <Pagination layout="total,prev, pager, next, jumper" :total="list.total" />
+      <Pagination layout="total,prev, pager, next, jumper" :total="list.total" 
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="bindList" />
     </div>
   </Card2>
 </template>
@@ -25,6 +28,19 @@ import ListItem from "./ListItem.vue";
 import { method } from "lodash";
 import request from '@/utils/request'
 import {DirectionTypes} from '@screen/utils/enum.js';
+const enum_event_type = [
+  {key:'1',value:'交通事故',icon:"TrafficControl"},
+  {key:'2',value:'车辆故障',icon:"TrafficControl"},
+  {key:'3',value:'交通管制',icon:"TrafficControl"},
+  {key:'4',value:'交通拥堵',icon:"TrafficControl"},
+  {key:'5',value:'非法上路',icon:"TrafficControl"},
+  {key:'6',value:'路障清除',icon:"TrafficControl"},
+  {key:'7',value:'施工建设',icon:"TrafficControl"},
+  {key:'8',value:'服务区异常',icon:"TrafficControl"},
+  {key:'9',value:'设施设备隐患',icon:"TrafficControl"},
+  {key:'10',value:'异常天气', icon:"AbnormalWeather"},
+  {key:'11',value:'其他事件',icon:"TrafficControl"}
+]
 export default {
   name: "Auditlists",
   components: {
@@ -38,65 +54,54 @@ export default {
     return {
       searchFormList,
       list:{total:0,rows:[]},
-      eventType:[
-        '交通事故',
-        '车辆故障',
-        '交通管制',
-        '交通拥堵',
-        '非法上路',
-        '路障清除',
-        '施工建设',
-        '',
-        '',
-        '',
-        '',
-      ],
-      list1: Array.from({ length: 3 }).map(() => ({
-        title: "异常天气",
-        content: "2023.12.23 13:00:00 济南方向K100+000 中雪",
-        type: 0,
-        isverify: (() => {
-          const min = 0;
-          const max = 2;
-          return Math.floor(Math.random() * (max - min + 1)) + min;
-        })(),
-      })),
-      list2: Array.from({ length: 10 }).map(() => ({
-        title: "交通事故",
-        content: "2023.12.23 13:00:00 济南方向K100+000 交通事故",
-        type: 1,
-        isverify: (() => {
-          const min = 0;
-          const max = 2;
-          return Math.floor(Math.random() * (max - min + 1)) + min;
-        })(),
-      })),
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      p:{}
     };
   },
   created() {
     this.bindList()
-    // axiosIns.get("/business/dcPublishInfo/list")
-    //   .then((result) => {
-    //     console.log("%c [ result ]-39-「index.vue」", "font-size:15px; background:#4bd543; color:#8fff87;", result);
-    //     if (result.code !== 200) return this.list = [];
-    //     this.list = result.rows;
-    //   }).catch((err) => {
-    //   });
   },
   methods:{
+    onClick(e){
+      this.$emit("click",e.eventId);
+    },
+    handleSearch(e){
+      let p = {};
+      if(e.eventState){
+        p['eventState']= e.eventState
+      }
+      if(e.eventType){
+        p['eventState']= e.eventState
+      }
+      if(e.startStakeMark && e.startStakeMark.length === 2){
+        p['startStakeMarkValue']= `K${e.startStakeMark[0]}+${e.startStakeMark[1]}`
+      }
+      if(e.endStakeMark && e.endStakeMark.length === 2){
+        p['endStakeMarkValue']= `K${e.endStakeMark[0]}+${e.endStakeMark[1]}`
+      }
+      this.p = p;
+      this.list = [];
+      this.bindList()
+    },
     bindList(){
       request({
         url: '/business/manage/list',
         method: 'get',
-        data: {}
+        params: this.p
       }).then(res=>{
         res.rows.forEach(e => {
-          console.log(e)
+          const ev = _.find(enum_event_type,{key:e.eventType})
           e.content = `${e.eventTime} ${e.stakeMark} ${DirectionTypes[e.direction]} ${e.contentDetails}`
           e.type = e.eventType
+          e.icon = ev.icon
+          e.title = ev.value
           e.isverify = e.eventState
         });
         this.list = res
+        this.$emit("click",res.rows[0].eventId);
       })
     }
   }
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/InformationReleaseManagement/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/service/InformationReleaseManagement/index.vue
index ceda660c..ecb64f56 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/service/InformationReleaseManagement/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/InformationReleaseManagement/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class='info_publish'>
-    <AuditLists class="card" />
-    <AuditDetails class="card" />
+    <AuditLists @click="onListClick" class="card" />
+    <AuditDetails ref="refDetail" class="card" />
   </div>
 </template>
 
@@ -14,6 +14,12 @@ export default {
   components: {
     AuditLists,
     AuditDetails
+  },
+
+  methods:{
+    onListClick(id){
+      this.$refs.refDetail.bind(id)
+    }
   }
 }
 </script>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/utils/enum.js b/ruoyi-ui/src/views/JiHeExpressway/utils/enum.js
index 750f6db8..2e9f6390 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/utils/enum.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/utils/enum.js
@@ -162,11 +162,28 @@ export const InfoWarningSource = {
   6: {
     text: "非机预警",
   },
-  7: {
-    text: "气象监测器",
-  },
+  // 7: {
+  //   text: "气象监测器",
+  // },
 };
 
+export const warningSourceMapping = {
+  1: '视频AI',
+  2: '雷达识别',
+  3: '锥桶',
+  4: '护栏碰撞',
+  5: '扫码报警',
+  6: '非机预警',
+  // 7: '气象监测器'
+}
+
+export const warningStateMapping = {
+  1: '上报',
+  2: '已完成',
+  3: '已终止',
+  4: '自动结束'
+}
+
 // 感知事件主类 warningType
 export const WarningType = {
   1: "交通拥堵",