diff --git a/ruoyi-ui/package.json b/ruoyi-ui/package.json
index 33d3cf89..7272b6b1 100644
--- a/ruoyi-ui/package.json
+++ b/ruoyi-ui/package.json
@@ -74,6 +74,7 @@
     "less-loader": "^7.2.1",
     "lodash": "^4.17.21",
     "mathjs": "^11.7.0",
+    "mitt": "^3.0.1",
     "moment": "^2.29.1",
     "mpegts.js": "^1.7.3",
     "normalize.css": "7.0.0",
@@ -104,11 +105,10 @@
     "vue-slick-carousel": "^1.0.6",
     "vue-splitpane": "1.0.4",
     "vue-video-player": "^5.0.2",
-    "vuedraggable": "2.24.3",
+    "vuedraggable": "^2.24.3",
     "vuescroll": "^4.18.1",
     "vuex": "3.6.0",
-    "zrender": "^5.4.4",
-    "mitt": "^3.0.1"
+    "zrender": "^5.4.4"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "4.4.6",
@@ -154,4 +154,4 @@
     "> 1%",
     "last 2 versions"
   ]
-}
\ No newline at end of file
+}
diff --git a/ruoyi-ui/src/assets/styles/JiHeExpressway.scss b/ruoyi-ui/src/assets/styles/JiHeExpressway.scss
index cc02947f..0395d767 100644
--- a/ruoyi-ui/src/assets/styles/JiHeExpressway.scss
+++ b/ruoyi-ui/src/assets/styles/JiHeExpressway.scss
@@ -277,4 +277,14 @@
       .el-time-spinner__item.active{ color: #fff !important;}
     }
 
+    .el-picker-panel{
+      .today div a,.today div span{
+        color: #ff0 !important;
+        font-weight: bold !important;
+      }
+      .current div a.cell {
+        // background-color: #000 !important;
+      }
+    }
+
 }
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 dab0013a..2a6194a2 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
@@ -3,35 +3,17 @@
     <div class="PerceiveEvent">
       <!-- <Video class="item-video" /> -->
       <div class="video-pic">
-        <Video
-          style="height: 100%; flex: 1"
-          :showHeader="false"
-          :url="dialogData.formData.videoList[0]"
-          videoType="mp4"
-        />
-        <Carousel
-          style="flex: 1; height: 100%"
-          :pictures="dialogData.formData.pictures"
-        />
+        <Video style="height: 100%; flex: 1" :showHeader="false" :url="dialogData.formData.videoList[0]"
+          videoType="mp4" />
+        <Carousel style="flex: 1; height: 100%" :pictures="dialogData.formData.pictures" />
       </div>
       <LineChart class="chart" />
-      <Form
-        class="form"
-        v-loading="loading"
-        v-model="data"
-        ref="FormConfigRef"
-        :formList="formList"
-        column="1"
-      />
+      <Form class="form" v-loading="loading" v-model="data" ref="FormConfigRef" :formList="formList" column="1" />
     </div>
 
     <template #footer>
-      <Button>误报</Button>
-      <Button
-        style="background-color: rgba(0, 179, 204, 0.3)"
-        @click.native="obverseVisible = false"
-        >取消</Button
-      >
+      <Button @click.native="onDelete">误报</Button>
+      <Button style="background-color: rgba(0, 179, 204, 0.3)" @click.native="obverseVisible = false">取消</Button>
       <Button @click.native="updateEvent" :loading="btnLoading">确定</Button>
     </template>
   </Dialog>
@@ -203,7 +185,7 @@ export default {
     this.getDetails();
     this.getVehicleTypeList();
   },
-  async mounted() {},
+  async mounted() { },
   beforeDestroy() {
     clearInterval(this.interval);
   },
@@ -255,7 +237,7 @@ export default {
             })
           );
         })
-        .catch((err) => {});
+        .catch((err) => { });
     },
     convertSecToHHmmss(sec) {
       let currentTime = moment.duration(sec, "seconds");
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/InfoBoard/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/InfoBoard/index.vue
index 28b7f398..9e48a5ab 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/InfoBoard/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/InfoBoard/index.vue
@@ -61,20 +61,20 @@
                 <el-tabs v-model="activeTab" @tab-click="tabClickFn">
                   <el-tab-pane label="详情信息" name="first">
                     <div class="show_bottom_tab_box">
-                      <div class="deviceInfo">
-                        <div class="deviceInfo_l">设备名称</div>
+                      <div class="deviceInfo title">
+                        <div class="deviceInfo_l">设备名称:</div>
                         <div class="deviceInfo_r">
                           {{ selectedDevice.deviceName }}
                         </div>
                       </div>
                       <div class="deviceInfo">
-                        <div class="deviceInfo_l">设备桩号</div>
+                        <div class="deviceInfo_l">设备桩号:</div>
                         <div class="deviceInfo_r">
                           {{ selectedDevice.stakeMark }}
                         </div>
                       </div>
                       <div class="deviceInfo">
-                        <div class="deviceInfo_l">屏幕像素</div>
+                        <div class="deviceInfo_l">屏幕像素:</div>
                         <div class="deviceInfo_r">
                           {{
                             JSON.parse(selectedDevice.otherConfig).screenSize
@@ -82,6 +82,12 @@
                           px
                         </div>
                       </div>
+                      <div class="deviceInfo">
+                        <div class="deviceInfo_l">设备状态</div>
+                        <div class="deviceInfo_r">
+                          {{ selectedDevice.deviceState == 1 ? "在线" : "离线" }}
+                        </div>
+                      </div>
                       <!-- <div class="deviceInfo" v-for="item in tabDataInfoList" :key="item.id">
                       <div class="deviceInfo_l">{{ item.tit }}: </div>
                       <div class="deviceInfo_r" :style="{ 'color': item.col }"> {{ item.txt }}</div>
@@ -763,11 +769,12 @@ export default {
 }
 
 .deviceInfo {
-  width: 50%;
+  width: 33.333%;
   padding: 10px 0;
   display: flex;
   // flex-wrap: wrap;
-  align-items: stretch;
+  align-items: center;
+  &.title{ width: 100%;}
 }
 
 .show_bottom_tab_box {
@@ -780,7 +787,7 @@ export default {
 .deviceInfo_l {
   color: #3de8ff;
   font-size: 14px;
-  width: 70px;
+  width: 60px;
   display: flex;
   flex-direction: row;
   align-items: center;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/index.vue
index 40647287..9ff12937 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/index.vue
@@ -96,7 +96,8 @@ export default {
       layerData: [],
       active: "事件专题",
       tabContentData: [],
-
+      nowSelected: null, //当前点击选中的事件 title
+      nowSelectedCompleted: true, //选中事件的处理是否完成
       // 路测设备-摄像机
       dialogConfig: {
         // 0 有 可控（球机） ControlCamera | 1 ⽆ 不可控（枪机） Camera
@@ -161,6 +162,7 @@ export default {
     this.active = layerData[defaultActive].title;
 
     this.minLayers = 3;
+    this.emitter.on("selectedCompleted", this.selectedCompletedHandle);
   },
   mounted() {
     // 获取原始 Layer
@@ -176,7 +178,13 @@ export default {
 
     getMinMapLayers();
   },
+  beforeDestroy() {
+    this.emitter.off("selectedCompleted", this.selectedCompletedHandle);
+  },
   methods: {
+    selectedCompletedHandle(item) {
+      if (this.nowSelected === item.title) this.nowSelectedCompleted = true;
+    },
     setFilterDataNoAction(data) { //纯更新data
       this.filterData = data;
     },
@@ -219,6 +227,10 @@ export default {
 
       const status = item.status;
 
+      console.log(item, "item");
+      if (!status) { this.nowSelected = item.title; this.nowSelectedCompleted = false; }
+      else if (this.nowSelected === item.title && this.nowSelectedCompleted === false) return;
+
       item.status = item.status ? "" : "_active";
 
       console.log("%c [ key ]-102-「index.vue」", "font-size:15px; background:#9d63e9; color:#e1a7ff;", key);
@@ -228,8 +240,8 @@ export default {
 
       await eventMap[`${key}${status ? "_close" : ""}`]?.call(this, item, this.filterData, isDefault, this.cb);
     },
-    handleDevice: debounce(function (item) {
-      this.handleDeviceImmediate(item);
+    handleDevice: debounce(async function (item) {
+      await this.handleDeviceImmediate(item);
     }, 360),
     handleCleared() {
       const { mapIns } = this.getMap();
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/buttonEvent.js b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/buttonEvent.js
index 3c457eb9..bd316ae4 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/buttonEvent.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/buttonEvent.js
@@ -166,8 +166,8 @@ export const eventMap = {
       removeData
     );
     addDataPreHandle(removeData);
-
     markerClusterIns.addData(removeData, isDefault);
+    this.emitter.emit("selectedCompleted", item);
 
     cacheRemoveFunc[`地图路测设备/${item.title}`] = () => {
       cbCall();
@@ -225,6 +225,7 @@ export const eventMap = {
     );
     addDataPreHandle(removeData);
     markerClusterIns.addData(removeData, isDefault);
+    this.emitter.emit("selectedCompleted", item);
 
     cacheRemoveFunc[`地图事件专题/${item.title}`] = () => {
       cbCall();
@@ -275,6 +276,7 @@ export const eventMap = {
     );
     addDataPreHandle(removeData);
     markerClusterIns.addData(removeData, isDefault);
+    this.emitter.emit("selectedCompleted", item);
 
     loadingMessage?.close();
 
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js
index 1b95f325..e5724ffc 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js
@@ -343,9 +343,10 @@ export class MarkerCluster {
       const findIndex = this.data.findIndex(
         (removeData) => removeData === item
       );
-      let { stakeMark } = item.extData;
+      let { stakeMark, direction } = item.extData;
       stakeMark = upperFirst(stakeMark); //统一格式 大写K
-      const existNode = graphInstance.getCellById(stakeMark);
+      const id = `${stakeMark}_${direction || ""}`;
+      const existNode = graphInstance.getCellById(id);
       const lnglat = item.lnglat;
       if (lnglat) {
         const { lat, lng } = getLatAndLng(lnglat);
@@ -357,10 +358,10 @@ export class MarkerCluster {
               window.graphInstance.removeNode(existNode.id);
             else {
               //更新节点
-              const updateNode = graphInstance.getCellById(stakeMark);
+              const updateNode = graphInstance.getCellById(id);
               updateNode.updateData(getDataConf(lngLatArr, item.extData));
             }
-          } else window.graphInstance.removeNode(stakeMark);
+          } else window.graphInstance.removeNode(id);
         }
       }
       if (findIndex > -1) this.data.splice(findIndex, 1);
@@ -482,9 +483,10 @@ export function marksAddInGraph(data) {
 export function addInGraphHandle(data) {
   const graphInstance = window.graphInstance;
   const extData = data[0].extData;
+  console.log(extData, "extData");
   const { item: eventItem } = data[0].config;
   if (eventItem.id.match("./事件专题")) {
-    let { stakeMark, lang } = extData;
+    let { stakeMark, lang, direction } = extData;
     stakeMark = upperFirst(stakeMark); //统一格式 大写K
     const distance =
       (Number(
@@ -496,7 +498,8 @@ export function addInGraphHandle(data) {
 
     const node = { shape: "custom-html", effect: ["data"] };
     node.data = getDataConf(data, extData);
-    const existNode = graphInstance.getCellById(stakeMark);
+    const id = `${stakeMark}_${direction || ""}`;
+    const existNode = graphInstance.getCellById(id);
     if (existNode) {
       existNode.updateData(node.data);
     } else {
@@ -508,7 +511,7 @@ export function addInGraphHandle(data) {
         height: 20,
         ...node,
         zIndex: 1,
-        id: stakeMark,
+        id: id,
       });
       // }, 0);
     }
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/data.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/data.js
index f5ceb632..5f52ea9f 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/data.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/data.js
@@ -80,14 +80,14 @@ export const gjSearchFormList = [
           key: "5",
           label: "扫码报警",
         },
-        {
-          key: "6",
-          label: "非机预警",
-        },
         // {
-        //   key: "7",
-        //   label: "气象监测器",
+        //   key: "6",
+        //   label: "非机预警",
         // },
+        {
+          key: "7",
+          label: "气象监测器",
+        },
       ],
     },
   },
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 c3abcd58..7608e4bc 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
@@ -238,7 +238,13 @@ export default {
         background: "#00000052",
         text: "文件正在下载...",
       });
-      request.post(url, {}, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, responseType: 'blob' })
+      // request.post(url, {}, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, responseType: 'blob' })
+      request({
+        url: url,//感知事件
+        method: "post",
+        data: { ...this.searchData, warningState: 1 },
+        responseType: 'blob'
+      })
         .then((res) => {
           console.log(res);
           const url = window.URL.createObjectURL(new Blob([res]));
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts.js
index ba6f7ba6..d38f2096 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts.js
@@ -62,7 +62,7 @@ var options = {
   grid: {
     top: "15%", //上边距
     right: "5px", //右边距
-    left: "0", //左边距
+    left: "10px", //左边距
     bottom: "2%", //下边距
     containLabel: true,
   },
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue
index 21ceab64..680259b4 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue
@@ -88,7 +88,7 @@
     <div class="comp_body">
       <div>
         <WgtTitle :title="'感知事件趋势分析'"></WgtTitle>
-        <div class="unit_con">
+        <div class="unit_con unit_con_01">
           <Empty
             v-if="!chart1List || chart1List.length <= 0"
             text="暂无数据..."
@@ -108,15 +108,14 @@
           ></Empty>
           <div
             ref="chart2"
-            class="chart_div"
-            style="width: 540px; height: 270px"
+            class="chart_div keep-ratio"
           ></div>
         </div>
       </div>
 
       <div>
         <WgtTitle :title="'桩号范围内事件分析趋势'"></WgtTitle>
-        <div class="unit_con">
+        <div class="unit_con unit_con_03">
           <Empty
             v-show="!chart3List || chart3List.length <= 0"
             text="暂无数据..."
@@ -695,21 +694,35 @@ export default {
       flex: 1;
       height: 0;
       padding: 0;
-      margin: 95px 20px 30px;
       position: relative;
-      // &.unit_con_02{ margin: 105px 0px 20px; }
       display: flex;
       align-items: center;
+      &.unit_con_01{
+        margin: 100px 20px 0;
+        .chart_div {
+          width: 100%;
+          height: 240px;
+        }
+      }
+      &.unit_con_02{
+        margin: 70px 20px 0;
+        .chart_div {
+          width: 100%;
+          height: 290px;
+        }
+      }
+      &.unit_con_03{
+        margin: 70px 20px 0;
+        .chart_div {
+          width: 100%;
+          height: 280px;
+        }
+      }
     }
 
     .empty {
       position: absolute;
     }
-
-    .chart_div {
-      width: 100%;
-      height: 200px;
-    }
   }
 
   .condition {
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/assets/charts.js
index a2bb57fc..db4e8596 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/assets/charts.js
@@ -14,13 +14,18 @@ window.colorList = [
   "#FFDD69",
   "#F6A73C",
   "#7390FD",
+  "#2967EA",
+  "#1DA7FF",
+  "#219f73",
+  "#7cedd5",
 ];
 
-window.colorList1 = ["#61D8FF", "#FFB905", "#6AE0BC"];
+// window.colorList1 = ["#61D8FF", "#FFB905", "#6AE0BC"];
 
 var options = {
   color: colorList,
   legend: {
+    show: false,
     width: "500px",
     height: "160px",
     orient: "vertical",
@@ -87,8 +92,10 @@ var options = {
     {
       name: "",
       type: "pie",
+      // radius: "70%",
+      // center: ["30%", "50%"],
       radius: "70%",
-      center: ["30%", "50%"],
+      center: ["40%", "50%"],
       clockwise: false,
       // roseType: "area",
       startAngle1: 180,
@@ -133,7 +140,8 @@ var options = {
       hoverAnimation: false,
       emphasis: { scale: false },
       clockwise: false,
-      center: ["30%", "50%"],
+      // center: ["30%", "50%"],
+      center: ["40%", "50%"],
       // roseType: "area",
       label: {
         show: false,
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/index.vue
index fe56e6c1..e1c91b50 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/index.vue
@@ -3,6 +3,21 @@
     <WgtTitle :title="'感知事件类型分析'"></WgtTitle>
     <div class="board fl-1">
       <div class="charts keep-ratio" id="typeAnalysis"></div>
+      <div class="legend-box">
+        <el-carousel height="200px" direction="vertical">
+          <el-carousel-item
+            v-for="(item, index) in dataList"
+            :key="index"
+            class="legend-item"
+          >
+            <div v-for="(items, index) in item" class="legend-items">
+              <span class="legend-name">{{ items.name }}</span>
+              <span class="legend-num">{{ items.value }} 起</span>
+              <span class="legend-percert">{{ items.percert }}%</span>
+            </div>
+          </el-carousel-item>
+        </el-carousel>
+      </div>
     </div>
   </div>
 </template>
@@ -13,33 +28,33 @@ import * as echarts from "echarts";
 import chartsStatistics from "./assets/charts";
 import { getWarningTypeDay } from "../../../../../../../api/event/perceiveEvent";
 
-const drawRoundRect = (ctx, x, y, width, height, radius, gr) => {
-  // ctx, 矩形距离x坐标位置, 矩形距离y坐标的位置, 矩形的宽, 矩形的长,圆角角度
-  ctx.beginPath();
-  ctx.fillStyle = gr;
-  ctx.arc(x + radius, y + radius, radius, Math.PI, (Math.PI * 3) / 2);
-  ctx.lineTo(width - radius + x, y);
-  ctx.arc(
-    width - radius + x,
-    radius + y,
-    radius,
-    (Math.PI * 3) / 2,
-    Math.PI * 2
-  );
-  ctx.lineTo(width + x, height + y - radius);
-  ctx.arc(
-    width - radius + x,
-    height - radius + y,
-    radius,
-    0,
-    (Math.PI * 1) / 2
-  );
-  ctx.lineTo(radius + x, height + y);
-  ctx.arc(radius + x, height - radius + y, radius, (Math.PI * 1) / 2, Math.PI);
-  ctx.closePath();
-  //ctx.stroke();
-  ctx.fill();
-};
+// const drawRoundRect = (ctx, x, y, width, height, radius, gr) => {
+//   // ctx, 矩形距离x坐标位置, 矩形距离y坐标的位置, 矩形的宽, 矩形的长,圆角角度
+//   ctx.beginPath();
+//   ctx.fillStyle = gr;
+//   ctx.arc(x + radius, y + radius, radius, Math.PI, (Math.PI * 3) / 2);
+//   ctx.lineTo(width - radius + x, y);
+//   ctx.arc(
+//     width - radius + x,
+//     radius + y,
+//     radius,
+//     (Math.PI * 3) / 2,
+//     Math.PI * 2
+//   );
+//   ctx.lineTo(width + x, height + y - radius);
+//   ctx.arc(
+//     width - radius + x,
+//     height - radius + y,
+//     radius,
+//     0,
+//     (Math.PI * 1) / 2
+//   );
+//   ctx.lineTo(radius + x, height + y);
+//   ctx.arc(radius + x, height - radius + y, radius, (Math.PI * 1) / 2, Math.PI);
+//   ctx.closePath();
+//   //ctx.stroke();
+//   ctx.fill();
+// };
 
 export default {
   name: "TypeAnalysis",
@@ -47,9 +62,9 @@ export default {
     WgtTitle,
   },
   data() {
-    return {};
+    return { dataList: [] };
   },
-  created() { },
+  created() {},
   methods: {},
   mounted() {
     setTimeout(() => {
@@ -57,10 +72,8 @@ export default {
         var myChart = echarts.init(document.getElementById("typeAnalysis"));
 
         getWarningTypeDay().then((res) => {
-          console.log(res);
           if (res.code == 200) {
             let data = res.data;
-            console.log("===================22", data);
             typeAnalysisData = [
               {
                 name: "交通拥堵",
@@ -123,15 +136,31 @@ export default {
                 value: 0,
               },
             ];
+            let total = null;
+            data.forEach((item, index) => {
+              total += item.number;
+            });
             data.forEach((item, index) => {
               typeAnalysisData.forEach((r) => {
                 if (item.warningType == r.warningType) {
-                  r.value += item.number;
+                  r.value = item.number;
+                  this.dataList.push({
+                    name: r.name,
+                    value: r.value,
+                    percert:
+                      total == 0 ? 0 : ((r.value / total) * 100).toFixed(2),
+                  });
                 }
               });
               // drawRoundRect(context, 250, 8 + index * 28, 120, 24, 12, gr);
             });
 
+            const list = this.dataList.reduce((acc, curr, index) => {
+              if (index % 6 === 0) acc.push([]);
+              acc[Math.floor(index / 6)].push(curr);
+              return acc;
+            }, []);
+            this.dataList = list;
             chartsStatistics.legend.data = typeAnalysisData?.map((x) => x.name);
             chartsStatistics.series[0].data = typeAnalysisData.map(
               (item, index) => {
@@ -158,29 +187,29 @@ export default {
           myChart.setOption(chartsStatistics);
         });
 
-        const domMap = document.getElementById("typeAnalysis");
-        let parentDiv = domMap.firstChild;
-        // 创建canvas
-        let canvas = document.createElement("canvas");
-        canvas.width = parentDiv.offsetWidth;
-        canvas.height = parentDiv.offsetHeight;
-        parentDiv.appendChild(canvas);
-        const context = canvas.getContext("2d");
+        // const domMap = document.getElementById("typeAnalysis");
+        // let parentDiv = domMap.firstChild;
+        // // 创建canvas
+        // let canvas = document.createElement("canvas");
+        // canvas.width = parentDiv.offsetWidth;
+        // canvas.height = parentDiv.offsetHeight;
+        // parentDiv.appendChild(canvas);
+        // const context = canvas.getContext("2d");
 
-        // 填充渐变颜色
-        var gr = context.createLinearGradient(230, 0, 360, 0);
-        // 颜色断点
-        gr.addColorStop(1, "rgba(92,197,255,0)");
-        gr.addColorStop(0, "rgba(92,197,255,0.5)");
+        // // 填充渐变颜色
+        // var gr = context.createLinearGradient(230, 0, 360, 0);
+        // // 颜色断点
+        // gr.addColorStop(1, "rgba(92,197,255,0)");
+        // gr.addColorStop(0, "rgba(92,197,255,0.5)");
 
-        context.lineWidth = 1; // 设置线段宽度
+        // context.lineWidth = 1; // 设置线段宽度
 
-        // 绘制圆角矩形
-        drawRoundRect(context, 228, 8, 280, 24, 12, gr);
-        drawRoundRect(context, 228, 36, 280, 24, 12, gr);
-        drawRoundRect(context, 228, 64, 280, 24, 12, gr);
-        drawRoundRect(context, 228, 92, 280, 24, 12, gr);
-        drawRoundRect(context, 228, 120, 280, 24, 12, gr);
+        // // 绘制圆角矩形
+        // drawRoundRect(context, 228, 8, 280, 24, 12, gr);
+        // drawRoundRect(context, 228, 36, 280, 24, 12, gr);
+        // drawRoundRect(context, 228, 64, 280, 24, 12, gr);
+        // drawRoundRect(context, 228, 92, 280, 24, 12, gr);
+        // drawRoundRect(context, 228, 120, 280, 24, 12, gr);
       });
     });
   },
@@ -191,23 +220,199 @@ export default {
 .congestion {
   .board {
     padding: 0px 20px;
-    background: linear-gradient(180deg,
-        rgba(6, 66, 88, 0.2) 0%,
-        #06425888 100%);
+    background: linear-gradient(
+      180deg,
+      rgba(6, 66, 88, 0.2) 0%,
+      #06425888 100%
+    );
     border-radius: 5px 5px 5px 5px;
     opacity: 1;
     border: 1px solid;
-    border-image: linear-gradient(360deg,
+    border-image: linear-gradient(
+        360deg,
         rgba(55, 231, 255, 0.1),
-        rgba(55, 231, 255, 0)) 1 1;
+        rgba(55, 231, 255, 0)
+      )
+      1 1;
     display: flex;
     justify-content: center;
     align-items: center;
+    .legend-box {
+      width: 60%;
+      margin: auto;
+      margin-top: 20px;
+      height: 185px;
+      overflow: hidden;
+
+      .legend-item {
+        width: 100%;
+        /**
+         单个动画循环样式 勿删
+        */
+        // height: 30px;
+        // display: flex;
+        // justify-content: space-between;
+        // align-items: center;
+        // animation: 5s infinite roll;
+        // position: relative;
+
+        // &::before {
+        //   // position: absolute;
+        //   content: "";
+        //   width: 8px;
+        //   height: 8px;
+        //   left: 0px;
+        //   border-radius: 50%;
+        //   background: #37e7ff;
+        // }
+        .legend-items {
+          width: 100%;
+          height: 24px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding-left: 20px;
+          background: linear-gradient(to right, #327799 0%, #0d3443 60%);
+          border-top-left-radius: 25px;
+          border-bottom-left-radius: 25px;
+          margin-bottom: 5px;
+          &::before {
+            // position: absolute;
+            content: "";
+            width: 8px;
+            height: 8px;
+            left: 0px;
+            border-radius: 50%;
+            background: #37e7ff;
+          }
+        }
+        .legend-name {
+          width: 60px;
+          margin-left: 10px;
+          font-size: 12px;
+        }
+        .legend-num,
+        .legend-percert {
+          width: 50px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          font-size: 12px;
+          color: #37e7ff;
+          font-weight: bold;
+        }
+      }
+      .legend-item:nth-child(1) {
+        .legend-items:nth-child(1) {
+          &::before {
+            background: #019aff;
+          }
+        }
+        .legend-items:nth-child(2) {
+          &::before {
+            background: #3cc3f0;
+          }
+        }
+        .legend-items:nth-child(3) {
+          &::before {
+            background: #51d5ad;
+          }
+        }
+        .legend-items:nth-child(4) {
+          &::before {
+            background: #ffdd69;
+          }
+        }
+        .legend-items:nth-child(5) {
+          &::before {
+            background: #f6a73c;
+          }
+        }
+        .legend-items:nth-child(6) {
+          &::before {
+            background: #7390fd;
+          }
+        }
+      }
+      .legend-item:nth-child(2) {
+        .legend-items:nth-child(1) {
+          &::before {
+            background: #2967ea;
+          }
+        }
+        .legend-items:nth-child(2) {
+          &::before {
+            background: #1da7ff;
+          }
+        }
+        .legend-items:nth-child(3) {
+          &::before {
+            background: #219f73;
+          }
+        }
+        .legend-items:nth-child(4) {
+          &::before {
+            background: #7cedd5;
+          }
+        }
+      }
+      /**
+      单个动画循环样式 勿删
+       */
+      // .legend-item:nth-child(1) {
+      //   &::before {
+      //     background: #68f4dd;
+      //   }
+      // }
+      // .legend-item:nth-child(2) {
+      //   &::before {
+      //     background: #1785c0;
+      //   }
+      // }
+      // .legend-item:nth-child(3) {
+      //   &::before {
+      //     background: #476dbc;
+      //   }
+      // }
+      // .legend-item:nth-child(4) {
+      //   &::before {
+      //     background: #b55233;
+      //   }
+      // }
+      // .legend-item:nth-child(5) {
+      //   &::before {
+      //     background: #b0862c;
+      //   }
+      // }
+      // .legend-item:nth-child(6) {
+      //   &::before {
+      //     background: #35ad6b;
+      //   }
+      // }
+      // .legend-item:nth-child(7) {
+      //   &::before {
+      //     background: #219f73;
+      //   }
+      // }
+      // .legend-item:nth-child(8) {
+      //   &::before {
+      //     background: #7cedd5;
+      //   }
+      // }
+
+      // .legend-item:nth-child(9) {
+      //   &::before {
+      //     background: #68f4dd;
+      //   }
+      // }
+    }
   }
 }
-
+::v-deep .el-carousel__indicators--vertical {
+  display: none;
+}
 .charts {
   height: 180px;
-  width: 100%;
+  width: 50%;
 }
 </style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/flowstate/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/flowstate/index.vue
index ebec4e95..eae17a4d 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/flowstate/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/flowstate/index.vue
@@ -67,7 +67,7 @@ export default {
   .tag1 {
     position: absolute;
     margin-top: -174px;
-    margin-left: 80px;
+    margin-left: 120px;
     font-size: 12px;
   }