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..c1a4801a 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>
@@ -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) => {
@@ -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: 14px;
+        }
+        .legend-num,
+        .legend-percert {
+          width: 50px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          font-size: 14px;
+          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;
   }