diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/assets/charts.js
index 43114d0f..9b141dbe 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/assets/charts.js
@@ -1,144 +1,143 @@
 window.echartsData = [
-    { value: 25, name: '处理中' },
-    { value: 32, name: '待处理' },
-    { value: 30, name: '已处理' },]
- 
+   { value: 25, name: '处理中' },
+   { value: 40, name: '待处理' },
+   { value: 35, name: '已处理' },]
+
 window.colorList = [
    "#FFee0B",
    "#61D8FF",
    "#6AE0BC",
-    
-    ]
+
+]
 window.count = 0;
 
-    echartsData.forEach((it)=>{
-       count += it.value;
-    })
- 
- 
- var options = {
-    color: colorList,
-    legend: {
-       orient: 'vertical',
-       top: "center",
-       icon: "circle",
-       right: 30,
-       itemGap: 16,
-       itemWidth: 8,
-       itemHeight: 8,
-       textStyle: {
-          color: "#fff",
-          fontSize: 12,
-          rich:{
+echartsData.forEach((it) => {
+   count += it.value;
+})
+
+
+var options = {
+   color: colorList,
+   legend: {
+      orient: 'vertical',
+      top: "center",
+      icon: "circle",
+      right: 30,
+      itemGap: 16,
+      itemWidth: 8,
+      itemHeight: 8,
+      textStyle: {
+         color: "#fff",
+         fontSize: 12,
+         rich: {
             ast: {
                align: "left",
                fontSize: 12,
-               width:35,
+               width: 35,
             },
             bst: {
-              align: "left",
-              fontSize: 12,
-              marginLeft:20,
-              color:"#37E7FF"
-           }
-          }
-       },
-       formatter: (params) => {
-         let obj = echartsData.filter(it=>{ return it.name == params})
-         console.log(obj);
-         return `{ast|${obj[0].name}}        {bst|${Math.round(obj[0].value/count* 100) }%}`
+               align: "left",
+               fontSize: 12,
+               marginLeft: 20,
+               color: "#37E7FF"
+            }
+         }
       },
-       data: echartsData?.map(x => x),
-    },
-    tooltip: {
-       trigger: 'item',
-    },
-    series: [{
-       name: '',
-       type: 'pie',
-       radius:  '78%',
-       center: ['40%', '50%'],
-       roseType: 'radius',
-       label: {
-          show: false,
-          position: 'outside',
-          fontSize: 16,
-          formatter: (params) => {
-             return `{a|${params.name}} {b|${params.value/count}%}`
-          },
-          rich: {
-             a: {
-                align: "left",
-                fontSize: 12,
-             },
-             b: {
+      formatter: (params) => {
+         let obj = echartsData.filter(it => { return it.name == params })
+         return `{ast|${obj[0].name}}        {bst|${Math.round(obj[0].value)}%}`
+      },
+      data: echartsData?.map(x => x),
+   },
+   tooltip: {
+      trigger: 'item',
+   },
+   series: [{
+      name: '',
+      type: 'pie',
+      radius: '78%',
+      center: ['40%', '50%'],
+      roseType: 'radius',
+      label: {
+         show: false,
+         position: 'outside',
+         fontSize: 16,
+         formatter: (params) => {
+            return `{a|${params.name}} {b|${params.value / count}%}`
+         },
+         rich: {
+            a: {
+               align: "left",
+               fontSize: 12,
+            },
+            b: {
                align: "left",
                fontSize: 12,
             }
-          },
-       },
-        itemStyle: {
+         },
+      },
+      itemStyle: {
          normal: {
-           shadowColor: "rgba(0, 0, 0, 0.5)",
-           shadowBlur: 50,
+            shadowColor: "rgba(0, 0, 0, 0.5)",
+            shadowBlur: 50,
          },
-       },
-       labelLine: {
-          show:false,
-          length: 10,
-          length2: 30,
-       },
-       data: echartsData.map((item, index) => {
-          return {
-             ...item,
-             label: {
-                color: colorList[index]
-             }
-          }
-       })
-    },{
-       name: '',
-       type: 'pie',
-       radius: '90%',
-        hoverAnimation: false,
-         emphasis: { scale: false },
-       center: ['40%', '50%'],
-       roseType: 'radius',
-       label: {
-          show: false,
-          position: 'outside',
-          fontSize: 16,
-          formatter: (params) => {
-             return `{a|${params.name}} `
-          },
-          rich: {
-             a: {
-                align: "left",
-                fontSize: 12,
-             }
-          },
-       },
-        itemStyle: {
+      },
+      labelLine: {
+         show: false,
+         length: 10,
+         length2: 30,
+      },
+      data: echartsData.map((item, index) => {
+         return {
+            ...item,
+            label: {
+               color: colorList[index]
+            }
+         }
+      })
+   }, {
+      name: '',
+      type: 'pie',
+      radius: '90%',
+      hoverAnimation: false,
+      emphasis: { scale: false },
+      center: ['40%', '50%'],
+      roseType: 'radius',
+      label: {
+         show: false,
+         position: 'outside',
+         fontSize: 16,
+         formatter: (params) => {
+            return `{a|${params.name}} `
+         },
+         rich: {
+            a: {
+               align: "left",
+               fontSize: 12,
+            }
+         },
+      },
+      itemStyle: {
          normal: {
-          opacity:0.3,
-           shadowColor: "rgba(0, 0, 0, 0.8)",
-           shadowBlur: 50,
+            opacity: 0.3,
+            shadowColor: "rgba(0, 0, 0, 0.8)",
+            shadowBlur: 50,
          },
-       },
-       labelLine: {
-          show:false,
-          length: 10,
-          length2: 30,
-       },
-       data: echartsData.map((item, index) => {
-          return {
-             ...item,
-             label: {
-                color: colorList[index]
-             }
-          }
-       })
-    }]
- };
+      },
+      labelLine: {
+         show: false,
+         length: 10,
+         length2: 30,
+      },
+      data: echartsData.map((item, index) => {
+         return {
+            ...item,
+            label: {
+               color: colorList[index]
+            }
+         }
+      })
+   }]
+};
 
- export default options;
\ No newline at end of file
+export default options;
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/index.vue
index e0dcaaa4..8c81f79b 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/index.vue
@@ -1,178 +1,178 @@
 <template>
-    <div class='congestion'>
-      <WgtTitle :title="'日事件处置情况占比'"></WgtTitle>
-      <div class="board">
-        <div class="charts keep-ratio " id="dailyDisposal"></div>
-       </div>
+  <div class='congestion'>
+    <WgtTitle :title="'日事件处置情况占比'"></WgtTitle>
+    <div class="board">
+      <div class="charts keep-ratio " id="dailyDisposal"></div>
     </div>
-  </template>
+  </div>
+</template>
   
-  <script>
-  
-  import WgtTitle from '../../../widgets/title'
-  import * as echarts from "echarts";
-  import chartsStatistics from "./assets/charts";
-  import { getWarningStateDay } from '../../../../../../../api/event/perceiveEvent';
+<script>
+
+import WgtTitle from '../../../widgets/title'
+import * as echarts from "echarts";
+import chartsStatistics from "./assets/charts";
+import { getWarningStateDay } from '../../../../../../../api/event/perceiveEvent';
 
-  const drawRoundRect = ( ctx, x, y, width, height, radius ,gr) => {   
+const drawRoundRect = (ctx, x, y, width, height, radius, gr) => {
   // ctx, 矩形距离x坐标位置, 矩形距离y坐标的位置, 矩形的宽, 矩形的长,圆角角度 
-	ctx.beginPath();    
+  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.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: 'dailyDisposal',
-    components: {
-      WgtTitle
-    },
-    data() {
-      return {
-       
-      }
-    },
-  
-    created() {
-      
-    },
-    methods: {
-  
-    },
-    mounted() {
-      setTimeout(() => {
-        this.$nextTick(() => {
-          var myChart = echarts.init(document.getElementById('dailyDisposal'));
-
-          getWarningStateDay().then(res=>{
-              if ( res.code == 200 ) {
-               let data = res.data;
-                console.log(data);
-                window.echartsData = [];
-                for (let i = 0;i < data.length;i++){
-                    let it = data[i];
-                    if ( it.warningState == 1 ) {
-                      echartsData.push({
-                        name:"上报",
-                        value: it.number
-                      });
-                    }
-                    if (it.warningState == 2 ) {
-                      echartsData.push({
-                        name:"已完成",
-                        value: it.number
-                      });
-                      
-                    }
-                    if (it.warningState == 3 ) {
-                      echartsData.push({
-                        name:"已终止",
-                        value: it.number
-                      });
-                      
-                    }
-                    if (it.warningState == 4 ) {
-                      echartsData.push({
-                        name:"自动结束",
-                        value: it.number
-                      });
-                      
-                    }
-                    
-                    
+export default {
+  name: 'dailyDisposal',
+  components: {
+    WgtTitle
+  },
+  data() {
+    return {
+
+    }
+  },
+
+  created() {
+
+  },
+  methods: {
+
+  },
+  mounted() {
+    setTimeout(() => {
+      this.$nextTick(() => {
+        var myChart = echarts.init(document.getElementById('dailyDisposal'));
+
+        getWarningStateDay().then(res => {
+          if (res.code == 200) {
+            let data = res.data;
+            if (data.lemgth > 0) {
+              window.echartsData = [];
+              for (let i = 0; i < data.length; i++) {
+                let it = data[i];
+                if (it.warningState == 1) {
+                  echartsData.push({
+                    name: "上报",
+                    value: it.number
+                  });
+                }
+                if (it.warningState == 2) {
+                  echartsData.push({
+                    name: "已完成",
+                    value: it.number
+                  });
+
+                }
+                if (it.warningState == 3) {
+                  echartsData.push({
+                    name: "已终止",
+                    value: it.number
+                  });
+
+                }
+                if (it.warningState == 4) {
+                  echartsData.push({
+                    name: "自动结束",
+                    value: it.number
+                  });
+
+                }
+
+
+              }
+              let count = 0;
+
+              echartsData.forEach((it) => {
+                count += it.value;
+              })
+
+              chartsStatistics.legend.data = window.echartsData?.map(x => x);
+              chartsStatistics.series[0].data = echartsData.map((item, index) => {
+                return {
+                  ...item,
+                  label: {
+                    color: colorList[index]
+                  }
                 }
-                count = 0;
-
-                echartsData.forEach((it)=>{
-                  count += it.value;
-                })
-
-                console.log(echartsData);
-
-                chartsStatistics.legend.data = window.echartsData?.map(x => x);
-                chartsStatistics.series[0].data = echartsData.map((item, index) => {
-                                                                return {
-                                                                  ...item,
-                                                                  label: {
-                                                                      color: colorList[index]
-                                                                  }
-                                                                }
-                                                            })
-                 chartsStatistics.series[1].data = echartsData.map((item, index) => {
-                                                                return {
-                                                                  ...item,
-                                                                  label: {
-                                                                      color: colorList[index]
-                                                                  }
-                                                                }
-                                                            })                                                            
-              } 
-
-              myChart.setOption(chartsStatistics);
-          });
-
-         
-
-
-          const domMap = document.getElementById("dailyDisposal");
-          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)');
-        
-        
-          context.lineWidth = 1; // 设置线段宽度
-        
-          // 绘制圆角矩形
-          drawRoundRect(context, 260, 50, 120, 24, 12,gr)
-          drawRoundRect(context, 260, 78, 120, 24, 12,gr)
-          drawRoundRect(context, 260, 106, 120, 24, 12,gr)
-          
-          });
+              })
+              chartsStatistics.series[1].data = echartsData.map((item, index) => {
+                return {
+                  ...item,
+                  label: {
+                    color: colorList[index]
+                  }
+                }
+              })
+            }
+          }
+
+          myChart.setOption(chartsStatistics);
+        });
+
+
+
+
+        const domMap = document.getElementById("dailyDisposal");
+        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)');
+
+
+        context.lineWidth = 1; // 设置线段宽度
+
+        // 绘制圆角矩形
+        // drawRoundRect(context, 260, 50, 120, 24, 12, gr)
+        // drawRoundRect(context, 260, 78, 120, 24, 12, gr)
+        // drawRoundRect(context, 260, 106, 120, 24, 12, gr)
+
       });
-    },
-  }
-  </script>
+    });
+  },
+}
+</script>
   
-  <style lang='scss' scoped>
-  .congestion {
+<style lang='scss' scoped>
+.congestion {
+  width: 100%;
+
+  .board {
+    height: 200px;
     width: 100%;
-    .board{
-      height:200px;
-      width: 100%;
-      padding: 0px 20px;
-      background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%);
-      border-radius: 5px 5px 5px 5px;
-      opacity: 1;
-      border: 1px solid;
-      border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-     
-    }
+    padding: 0px 20px;
+    background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%);
+    border-radius: 5px 5px 5px 5px;
+    opacity: 1;
+    border: 1px solid;
+    border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
   }
-      .charts {
-        height:180px;
-        width: 100%;
-      }
-  
-  </style>
+}
+
+.charts {
+  height: 180px;
+  width: 100%;
+}
+</style>
   
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dayTotal/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dayTotal/assets/charts.js
index bc60c727..f458cd48 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dayTotal/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dayTotal/assets/charts.js
@@ -8,23 +8,13 @@ const sxnja = [
  })
  console.log(minArray)
  let xaxisData = [
-   '1月',
-   '2月',
-   '3月',
-   '4月',
-   '5月',
-   '6月',
-   '7月',
-   '8月',
-   '9月',
-   '10月',
  ];
  
  var options = {
    title: {
-     text: '单位/%',
-     top: '4%',
-     left: '3%',
+    //  text: '单位/%',
+     top: '0%',
+     left: '0%',
      textStyle: {
        fontSize: '10px',
        fontWeight: 300,
@@ -34,7 +24,7 @@ const sxnja = [
    },
    tooltip: {
      valueFormatter: function (value) {
-       return (value + minNumber).toFixed(2) + ' %';
+       return (value + minNumber).toFixed(2);
      }
    },
    grid: {
@@ -100,7 +90,7 @@ const sxnja = [
    ],
    series: [
      {
-       name: '审限内结案率',
+      //  name: '审限内结案率',
        data: minArray,
        type: 'pictorialBar',
        symbol: 'roundRect',
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dayTotal/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dayTotal/index.vue
index 75fe3643..b3c8a8b2 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dayTotal/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dayTotal/index.vue
@@ -1,88 +1,134 @@
 <template>
-    <div class='congestion'>
-      <WgtTitle :title="'日累计感知事件'"></WgtTitle>
-      <div class="board">
-        <div class="charts keep-ratio " id="daytotal"></div>
-       </div>
+  <div class='congestion'>
+    <WgtTitle :title="'日累计感知事件趋势'"></WgtTitle>
+    <div class="board">
+      <div class="charts keep-ratio " id="daytotal"></div>
     </div>
-  </template>
+  </div>
+</template>
   
-  <script>
-  
-  import WgtTitle from '../../../widgets/title'
-  import * as echarts from "echarts";
-  import chartsStatistics from "./assets/charts";
-  import { getDailyCumulative } from '../../../../../../../api/event/perceiveEvent';
+<script>
 
-  export default {
-    name: 'RailWayDay',
-    components: {
-      WgtTitle
-    },
-    data() {
-      return {
-       
-      }
-    },
-  
-    created() {
-      
-    },
-    methods: {
-  
-    },
-    mounted() {
-      setTimeout(() => {
-        this.$nextTick(() => {
-          var myChart = echarts.init(document.getElementById('daytotal'));
+import WgtTitle from '../../../widgets/title'
+import * as echarts from "echarts";
+import chartsStatistics from "./assets/charts";
+import { getDailyCumulative } from '../../../../../../../api/event/perceiveEvent';
 
-          getDailyCumulative().then(res=>{
-            if ( res.code == 200) {
-              let data = res.data;
-              let timer = [];
-              let number = [];
+export default {
+  name: 'RailWayDay',
+  components: {
+    WgtTitle
+  },
+  data() {
+    return {
+
+    }
+  },
 
-              data.forEach((it)=>{
-                timer.push(it.time);
-                number.push(it.number);
-              });
+  created() {
 
-              chartsStatistics.xAxis.data = timer;
-              chartsStatistics.series[0].data = number;
+  },
+  methods: {
 
-              myChart.setOption(chartsStatistics);
+  },
+  mounted() {
+    setTimeout(() => {
+      this.$nextTick(() => {
+        var myChart = echarts.init(document.getElementById('daytotal'));
+
+        getDailyCumulative().then(res => {
+          if (res.code == 200) {
+            let data = res.data;
+            let timer = [];
+            let number = [];
+            //默认数值
+            if(data.length < 1){
+              data = [
+                {
+                  time: '00:00',
+                  number: 800
+                },
+                {
+                  time: '02:00',
+                  number: 1000
+                },
+                {
+                  time: '04:00',
+                  number: 800
+                },
+                {
+                  time: '06:00',
+                  number: 700
+                },
+                {
+                  time: '08:00',
+                  number: 400
+                },
+                {
+                  time: '10:00',
+                  number: 1000
+                },
+                {
+                  time: '12:00',
+                  number: 800
+                },
+                {
+                  time: '14:00',
+                  number: 500
+                },
+                {
+                  time: '16:00',
+                  number: 800
+                },
+                {
+                  time: '18:00',
+                  number: 500
+                },
+              ]
             }
-           
-          });
-         
+
+            data.forEach((it) => {
+              timer.push(it.time);
+              number.push(it.number);
+            });
+
+            chartsStatistics.xAxis.data = timer;
+            chartsStatistics.series[0].data = number;
+
+            myChart.setOption(chartsStatistics);
+          }
+
         });
+
       });
-    },
-  }
-  </script>
+    });
+  },
+}
+</script>
   
-  <style lang='scss' scoped>
-  .congestion {
+<style lang='scss' scoped>
+.congestion {
+  width: 100%;
+
+  .board {
+    height: 200px;
     width: 100%;
-    .board{
-      height:200px;
-      width: 100%;
-      padding: 0px 20px;
-      background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%);
-      border-radius: 5px 5px 5px 5px;
-      opacity: 1;
-      border: 1px solid;
-      border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-     
-    }
+    padding: 0px 20px;
+    background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%);
+    border-radius: 5px 5px 5px 5px;
+    opacity: 1;
+    border: 1px solid;
+    border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
   }
-      .charts {
-        height:180px;
-        width: 100%;
-      }
-  
-  </style>
+}
+
+.charts {
+  height: 180px;
+  width: 100%;
+}
+</style>
   
\ No newline at end of file
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 0b0076cc..4f5f83cb 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
@@ -1,8 +1,8 @@
 
 /* 数据 */
 let nameList = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]; // 类别
-let valueList = [800, 520, 650, 950, 420, 600, 450, 720, 303, 503 , 203 ,703 , 903  ]; // 人数
-var yList = [ "1000","800","轻度拥堵","基本畅通","畅通"]
+let valueList = [800, 520, 650, 950, 420, 600, 450, 720, 303, 503, 203, 703, 903]; // 人数
+// var yList = ["1000", "800", "轻度拥堵", "基本畅通", "畅通"]
 /* 数据整合 */
 let dataList = [];
 nameList.map((item, index) => {
@@ -32,7 +32,7 @@ nameList.map((item, index) => {
       dataList.push({
          name: item,
          value: valueList[index],
-         itemStyle:{
+         itemStyle: {
             borderRadius: 6
          }
       })
@@ -41,11 +41,14 @@ nameList.map((item, index) => {
 
 var options = {
    grid: {
-      top: '5%',//上边距
+      top: '7%',//上边距
       right: '0',//右边距
       left: '0',//左边距
-      bottom: "0%",//下边距
+      bottom: "2%",//下边距
       containLabel: true,
+   },
+   tooltip: {
+
    },
    xAxis: {
       type: 'category',
@@ -61,14 +64,14 @@ var options = {
       axisLabel: {
          show: true,
          color: '#B6E6FF',
-         fontSize:8,
+         fontSize: 8,
          fontFamily: 'Source Han Sans CN-Regular',
       },
    },
    yAxis: [{
       type: 'value',
       name: "",
-      splitNumber:5,
+      splitNumber: 5,
       nameTextStyle: {
          color: '#B6E6FF',
          fontSize: 13,
@@ -99,14 +102,14 @@ var options = {
    series: [{
       type: 'bar',
       data: dataList,
-      z:4,
+      z: 4,
       itemStyle: {
          color: {
             type: 'linear',
             x: 0,
             y: 0,
             x2: 0,
-            y2: 1, 
+            y2: 1,
             colorStops: [{
                offset: 0, color: '#06D7B1' // 0% 处的颜色
             }, {
@@ -116,8 +119,9 @@ var options = {
          },
          borderRadius: [4, 4, 0, 0]
       },
-      barWidth:10,
-      label: {show:false,
+      barWidth: 10,
+      label: {
+         show: false,
       }
    },
    ]
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts2.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts2.js
index b65fef45..994bfc9a 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts2.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts2.js
@@ -1,272 +1,267 @@
-import * as echarts from "echarts";
-let data = [{
-    average:20,
-    typeName:'行人',
-    percent:0.2
- },{
-    average:35,
-    typeName:'非机动车',
-    percent:0.25
- },{
-    average:23,
-    typeName:'抛洒物',
-    percent:0.08
- },{
-    average:20,
-    typeName:'烟火',
-    percent:0.14
- },{
-  average:8,
-  typeName:'拥堵',
-  percent:0.14
-},{
-  average:5,
-  typeName:'逆行',
-  percent:0.14
-}]
- let chartData = [],lengData=[], colorList = ['#50EED3', '#5DEF9E', '#29B3FF', '#FB5C38', '#FB5C38','#FCBB14'];
- for (let i = 0; i < data.length; i++) {
-    chartData.push({
-       value: data[i].average,
-       name: data[i].typeName,
-       percent: data[i].percent,
-       color: colorList[i]
-    })
-    lengData.push({
-       name: data[i].typeName,
-       color: colorList[i]
-    })
- }
- 
- let a = chartData.map(t=>{
-    t.value = parseInt(t.value)
-    return t
- })
- const sum = a.reduce((per, cur) => per + cur.value, 0);
- const gap = (1 * sum) / 100;
- const pieData1 = [];
- const gapData = {
-    name: "",
-    value: gap,
-    itemStyle: {
-       color: "transparent",
-    },
- };
- let total = 0;
- chartData.forEach((item) => {
-    total += parseInt(item.value);
- });
- 
- for (let i = 0; i < chartData.length; i++) {
-    // 第一圈数据
-    pieData1.push({
-       ...chartData[i],
-    });
-    pieData1.push(gapData);
- }
+let data = [
+  {
+    average: 10,
+    typeName: "交通拥堵",
+    percent: 0.1,
+  },
+  {
+    average: 11,
+    typeName: "行人",
+    percent: 0.11,
+  },
+  {
+    average: 12,
+    typeName: "非机动车",
+    percent: 0.12,
+  },
+  {
+    average: 13,
+    typeName: "停车",
+    percent: 0.13,
+  },
+  {
+    average: 5,
+    typeName: "倒车/逆行",
+    percent: 0.05,
+  },
+  {
+    average: 15,
+    typeName: "烟火",
+    percent: 0.15,
+  },
+  {
+    average: 10,
+    typeName: "撒落物",
+    percent: 0.1,
+  },
+  {
+    average: 10,
+    typeName: "异常天气",
+    percent: 0.1,
+  },
+  {
+    average: 14,
+    typeName: "护栏碰撞",
+    percent: 0.14,
+  },
+];
+let chartData = [],
+  lengData = [],
+  colorList = [
+    "#50EED3",
+    "#5DEF9E",
+    "#29B3FF",
+    "#FB5C38",
+    "#FB5C38",
+    "#FCBB14",
+  ];
+for (let i = 0; i < data.length; i++) {
+  chartData.push({
+    value: data[i].average,
+    name: data[i].typeName,
+    percent: data[i].percent,
+    color: colorList[i],
+  });
+  lengData.push({
+    name: data[i].typeName,
+    color: colorList[i],
+  });
+}
+
+let a = chartData.map((t) => {
+  t.value = parseInt(t.value);
+  return t;
+});
+const sum = a.reduce((per, cur) => per + cur.value, 0);
+const gap = (1 * sum) / 100;
+const pieData1 = [];
+const gapData = {
+  name: "",
+  value: gap,
+  itemStyle: {
+    color: "transparent",
+  },
+};
+let total = 0;
+chartData.forEach((item) => {
+  total += parseInt(item.value);
+});
 
- console.log(pieData1);
- var options = {
-    tooltip: {
-       confine: true,
-       textStyle: {
-          fontSize: 14 // 字体大小
-       },
+for (let i = 0; i < chartData.length; i++) {
+  // 第一圈数据
+  pieData1.push({
+    ...chartData[i],
+  });
+  pieData1.push(gapData);
+}
+
+console.log(pieData1);
+var options = {
+  tooltip: {
+    confine: true,
+    textStyle: {
+      fontSize: 14, // 字体大小
+    },
+  },
+  title: {
+    //圆环中间内容
+    text: "100%",
+    subtext: "类型分析",
+    left: "19%",
+    top: "40%",
+    textStyle: {
+      color: "#fff",
+      fontSize: 26,
+      align: "center",
     },
-    title:{   //圆环中间内容
-       text: '100%',
-       subtext: '类型分析',
-       left:"19%",
-       top:"40%",
-       textStyle:{
-          color:"#fff",
-          fontSize:26,
-          align:"center"
-       },
-       subtextStyle: {
-          fontSize: 18,
-          fontWeight: '400',
-          top: -8,
+    subtextStyle: {
+      fontSize: 18,
+      fontWeight: "400",
+      top: -8,
 
-          align:"center",
-          color:'#fff'
-       },
+      align: "center",
+      color: "#fff",
+    },
+  },
+  color: colorList,
+  legend: {
+    top: "15%",
+    right: -5,
+    orient: "vertical", //改变排列方式
+    icon: "circle", //改变legend小图标形状
+    itemGap: 20, // 设置legend的间距
+    itemWidth: 10, // 设置宽度
+    itemHeight: 10, // 设置高度
+    textStyle: {
+      right: -19,
+      fontSize: 30,
+      color: "#fff",
+      rich: {
+        a: {
+          width: 45,
+          fontSize: 12,
+        },
+        b: {
+          fontSize: 14,
+          color: "#37E7FF",
+          marginLeft: -0,
+        },
+      },
     },
-    color:['#50EED3', '#5F8EFE','#29B3FF', '#5DEF9E', '#FB5C38', '#FCBB14','#50EED3'],
-    legend: {
-       top:'20%',
-       right: -10,
-       orient: "vertical", //改变排列方式
-       icon: "circle", //改变legend小图标形状
-       itemGap: 20, // 设置legend的间距
-       itemWidth: 12, // 设置宽度
-       itemHeight: 12, // 设置高度
-       itemStyle:{
-       
-       },
-       textStyle: {
-          right: -19,
-          fontSize: 50,
+    itemStyle: {
+      borderColor: "transparent",
+    },
+    data: lengData,
+    formatter: function (name) {
+      let total = 0;
+      let target;
+      for (let i = 0; i < data.length; i++) {
+        total += data[i].average;
+        if (data[i].typeName == name) {
+          target = data[i].average;
+        }
+      }
+      var arr = [
+        "{a|" + name + "}",
+        "{b|" + ((target / total) * 100).toFixed(2) + "%}",
+      ];
+      return arr.join("  ");
+    },
+  },
+  series: [
+    {
+      name: "",
+      roseType: "radius",
+      startAngle: -220,
+      avoidLabelOverlap: true, //防止标签重叠
+      type: "pie",
+      radius: ["50%", "80%"], //大小
+      center: ["25%", "50%"], //位置
+      hoverAnimation: true,
+      itemStyle: {
+        normal: {
+          borderWidth: 6,
+          shadowBlur: 10,
+          borderRadius: 0, // 圆角
+        },
+      },
+      labelLine: {
+        show: false,
+        lineStyle: {
+          width: 3,
+        },
+        normal: {
+          length: 30, // 指示线长度
+          length2: 80,
+        },
+      },
+      data: pieData1,
+      label: {
+        show: false,
+        formatter: function (params) {},
+        textStyle: {
+          fontSize: "18",
+          fontWeight: "bold",
           color: "#fff",
-           rich:{
-              a:{
-                  width:45,
-                  fontSize: 12,
-              },
-                 b:{
-                     fontSize:14,
-                     color:"#37E7FF",
-                     marginLeft:-0,
-                   }
-       },
-       },
-       itemStyle: {
-          borderColor: "transparent",
-       },
-       data: lengData,
-       formatter: function(name){
-         let total = 0
-             let target
-             for (let i = 0; i < data.length; i++) {
-               total += data[i].average
-               if (data[i].typeName === name) {
-                 target = data[i].average
-               }
-             }
-             var arr = [
-               '{a|' + name + '}',
-               '{b|' + ((target / total) * 100).toFixed(2) + '%}',
-             ]
-             return arr.join('  ')
-       },
-      
+        },
+        rich: {
+          color0: {
+            color: "#D56383",
+          },
+          color1: {
+            color: "#00FF95",
+          },
+          color3: {
+            color: "#FFE900",
+          },
+          color2: {
+            color: "#F5B157",
+          },
+          color4: {
+            color: "#1DA7FF",
+          },
+          color5: {
+            color: "#2967EA",
+          },
+        },
+      },
+      emphasis: {
+        show: false,
+      },
     },
-    series: [
-     {
-       name: '',
-       roseType: 'radius',
-       startAngle:-220,
-       avoidLabelOverlap: true,//防止标签重叠
-       type: 'pie',
-       radius: ['63%', '90%'], //大小
-       center : ['25%','50%'], //位置
-       hoverAnimation: true,
-       itemStyle: {
-       normal: {
-                borderWidth: 6,
-                shadowBlur: 10,
-                borderRadius: 0, // 圆角
-             },
-       },
-       labelLine: {
-         show:false,
-         lineStyle: {
-           width: 3,
-         },
-         normal: {
-           length: 30, // 指示线长度
-           length2:80
-         },
-       },
-       data: pieData1,
-       label: {
-         show: false,
-         formatter: function(params){ },
-         textStyle: {
-           fontSize: '18',
-           fontWeight: 'bold',
-           color:'#fff'
-         },
-         rich: {
-           color0: {
-             color: '#D56383',
-           },
-           color1: {
-             color: '#00FF95',
-           },
-           color3: {
-             color: '#FFE900',
-           },
-           color2: {
-             color: '#F5B157',
-           },
-           color4: {
-             color: '#1DA7FF',
-           },
-           color5:{
-             color:'#2967EA'
-           }
-         },
-       },
-       emphasis: {
-         show: false,
-       },
-     },
-    //    {
-    //    type: 'gauge',
-    //    zlevel: 0,
-    //    splitNumber: 360,
-    //    radius: '50%',
-    //    center: ['25%', '50%'],
-    //    startAngle: 90,
-    //    endAngle: -269.9999,
-    //    axisLine: {
-    //      show: false,
-    //    },
-    //    axisTick: {
-    //      show: false,
-    //    },
-    //    axisLabel: {
-    //      show: false,
-    //    },
-    //    splitLine: {
-    //      show: true,
-    //      length:68,
-    //      lineStyle: {
-    //        width: 2,
-    //        color: '#277DCA',
-    //      },
-    //    },
-    //    pointer: {
-    //      show: 0,
-    //    },
-    //    detail: {
-    //      show: 0,
-    //    },
-    //  },
-     {
-       type: 'gauge',
-       zlevel: 2,
-       splitNumber: 185,
-       radius: '70%',
-       center: ['25%', '50%'],
-       startAngle: 90,
-       endAngle: -269.9999,
-       axisLine: {
-         show: false,
-       },
-       axisTick: {
-         show: false,
-       },
-       axisLabel: {
-         show: false,
-       },
-       splitLine: {
-         show: true,
-         length:2,
-         lineStyle: {
-           width: 1,
-           color: '#017383',
-         },
-       },
-       pointer: {
-         show: 0,
-       },
-       detail: {
-         show: 0,
-       },
-     },
-   ]
- };
- 
- export default options
\ No newline at end of file
+    {
+      type: "gauge",
+      zlevel: 2,
+      splitNumber: 185,
+      radius: "70%",
+      center: ["25%", "50%"],
+      startAngle: 90,
+      endAngle: -269.9999,
+      axisLine: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+      axisLabel: {
+        show: false,
+      },
+      splitLine: {
+        show: true,
+        length: 2,
+        lineStyle: {
+          width: 1,
+          color: "#017383",
+        },
+      },
+      pointer: {
+        show: 0,
+      },
+      detail: {
+        show: 0,
+      },
+    },
+  ],
+};
+
+export default options;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts3.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts3.js
index fceb5480..ec3148c6 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts3.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts3.js
@@ -1,163 +1,105 @@
 import * as echarts from "echarts";
 
 let xData = [
-    "1月",
-    "2月",
-    "3月",
-    "4月",
-    "5月",
-    "6月",
-    "7月",
-    "8月",
-    "9月",
-    "10月",
-    "11月",
-    "12月"
-  ];
-  let data1 = [200, 530, 920, 400, 600, 700, 300, 800, 900, 120, 570, 800];
-  let options = {
-    tooltip: {
-      show:false,
-      trigger: "axis",
-      axisPointer: {
-        // 坐标轴指示器，坐标轴触发有效
-        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
-      },
-      textStyle: {
+  "1月",
+  "2月",
+  "3月",
+  "4月",
+  "5月",
+  "6月",
+  "7月",
+  "8月",
+  "9月",
+  "10月",
+  "11月",
+  "12月"
+];
+let data1 = [200, 530, 920, 400, 600, 700, 300, 800, 900, 120, 570, 800];
+let options = {
+  tooltip: {
+  },
+  grid: {
+    left: "2%",
+    right: "4%",
+    top: "5%",
+    bottom: "5%",
+    containLabel: true,
+  },
+  xAxis: {
+    data: xData,
+    show: true,
+    axisTick: {
+      show: false,
+      lineStyle: {
         color: "#fff",
-        fontSize: 14,
       },
-      backgroundColor: "rgba(3, 31, 71, .0)", //设置背景颜色
-      borderColor: "rgba(3, 31, 71, .1)",
-      formatter: "健康监测<br>{b1}：{c1}人",
     },
-    grid: {
-      left: "2%",
-      right: "4%",
-      top: "5%",
-      bottom: "5%",
-      containLabel: true,
+    axisLine: {
+      lineStyle: {
+        color: "#1C82C5",
+      },
     },
-    xAxis: {
-      data: xData,
-      show: true,
-      axisTick: {
-        show: false,
-        lineStyle: {
-          color: "#fff",
-        },
+    axisLabel: {
+      interval: 0,
+      align: "center",
+      rotate: "1",
+      margin: "20",
+      textStyle: {
+        fontSize: 12,
+        color: "#50A2C1",
       },
+    },
+  },
+  yAxis: [
+    {
+      min: 0,
       axisLine: {
         lineStyle: {
           color: "#1C82C5",
         },
       },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "rgba(28, 130, 197, .3)",
+          type: "solid",
+        },
+      },
       axisLabel: {
-        interval: 0,
-        align: "center",
-        rotate: "1",
-        margin: "20",
+        color: "#DEEBFF",
         textStyle: {
           fontSize: 12,
-          color: "#50A2C1",
-        },
-      },
-    },
-    yAxis: [
-      {
-        min: 0,
-        axisLine: {
-          lineStyle: {
-            color: "#1C82C5",
-          },
-        },
-        splitLine: {
-          show: true,
-          lineStyle: {
-            color: "rgba(28, 130, 197, .3)",
-            type: "solid",
-          },
-        },
-        axisLabel: {
-          color: "#DEEBFF",
-          textStyle: {
-            fontSize: 12,
-          },
-        },
-        axisTick: {
-          show: false,
         },
       },
-    ],
-    legend: {
-      show: false,
-      top: "5%",
-      left: "50%",
-      textStyle: {
-        color: "#fff",
-        fontSize: 14,
+      axisTick: {
+        show: false,
       },
-      itemGap: 12, // 设置间距
     },
-    series: [
-      // 下半截柱状图linear-gradient(180deg, #61D8FF 0%, #003B4E 100%); linear-gradient(180deg, #06D7B1 0%, #003B4E 100%)
-      {
-        name: "种植面积",
-        type: "bar",
-        barWidth: "10px",
-        barGap: "-100%",
-        selectedMode:true,
-        select:{
-          itemStyle:{
-            opacity: 1,
-            color: function (params) {
-              var a = params;
-             
-              return new echarts.graphic.LinearGradient(
-                0,
-                0,
-                0,
-                1,
-                [
-                  {
-                    offset: 0,
-                    color: "#01D5BC", // 0% 处的颜色
-                  },
-                  {
-                    offset: 1,
-                    color: "#003B4E", // 100% 处的颜色
-                  },
-                ],
-                false
-              );
-            },
-          },
-        },
+  ],
+  legend: {
+    show: false,
+    top: "5%",
+    left: "50%",
+    textStyle: {
+      color: "#fff",
+      fontSize: 14,
+    },
+    itemGap: 12, // 设置间距
+  },
+  series: [
+    // 下半截柱状图linear-gradient(180deg, #61D8FF 0%, #003B4E 100%); linear-gradient(180deg, #06D7B1 0%, #003B4E 100%)
+    {
+      // name: "种植面积",
+      type: "bar",
+      barWidth: "10px",
+      barGap: "-100%",
+      selectedMode: true,
+      select: {
         itemStyle: {
-          // lenged文本
-          opacity: 0.6,
+          opacity: 1,
           color: function (params) {
-            var a = params.name;
-            console.log("==========a=============",a);
-            if ( a == "6月" ) {
-                return new echarts.graphic.LinearGradient(
-                    0,
-                    0,
-                    0,
-                    1,
-                    [
-                      {
-                        offset: 0,
-                        color: "#01D5BC", // 0% 处的颜色
-                      },
-                      {
-                        offset: 1,
-                        color: "#003B4E", // 100% 处的颜色
-                      },
-                    ],
-                    false
-                  );
-            } else
+            var a = params;
+
             return new echarts.graphic.LinearGradient(
               0,
               0,
@@ -166,7 +108,7 @@ let xData = [
               [
                 {
                   offset: 0,
-                  color: "#61D8FF", // 0% 处的颜色
+                  color: "#01D5BC", // 0% 处的颜色
                 },
                 {
                   offset: 1,
@@ -177,32 +119,77 @@ let xData = [
             );
           },
         },
-        data: data1,
       },
+      itemStyle: {
+        // lenged文本
+        opacity: 0.6,
+        color: function (params) {
+          var a = params.name;
+          console.log("==========a=============", a);
+          if (a == "6月") {
+            return new echarts.graphic.LinearGradient(
+              0,
+              0,
+              0,
+              1,
+              [
+                {
+                  offset: 0,
+                  color: "#01D5BC", // 0% 处的颜色
+                },
+                {
+                  offset: 1,
+                  color: "#003B4E", // 100% 处的颜色
+                },
+              ],
+              false
+            );
+          } else
+            return new echarts.graphic.LinearGradient(
+              0,
+              0,
+              0,
+              1,
+              [
+                {
+                  offset: 0,
+                  color: "#61D8FF", // 0% 处的颜色
+                },
+                {
+                  offset: 1,
+                  color: "#003B4E", // 100% 处的颜色
+                },
+              ],
+              false
+            );
+        },
+      },
+      data: data1,
+    },
     // 进度条的小圆圈
-{
-  name: "小圈圈",
-  type: "scatter",
-  emphasis: {
-     scale: false
-  },
-  symbol:
-     "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAACCpJREFUSEuFl+uPXVUZxn/rus9lru200zt2SrEJjQSlDWAipv2AGtQYouGDJhpDofgnmNhTv/pFjAItaGL8QtRojCbEaJXEBKUU4YNtKNCW0tqm6XRmembOZe91M2vP9AKWspJ9zsneZ69nvc9a7/M+r+BjRkpJ3HcYfRHGo2BaSFaX0DJgiAgnqbSkKyLdpmL2vW9zKQEizytE/nnLUT//4EiCBEnA3R3MwnpmnGZrCpj8PwWE/HFthGs3l28k6JM4r5ucu/Qt+jcji5sW8n/AnU6SnQOw5hlmMGyXAusDSMEVZZgLA+baLYbvnaWfgTasRzvPWDKMkdiYJGMikWJkkAQn557gnOgg6JBSyiQss1ADZzqFyN9wEMTTz7JTSrZiQQbmUuTdEcu8n0fE9vI7Nw/ZI7EJdI/Ugwk822NktRBElTiz/yLHOwdI+c1r4CuTLNPbOYj42SbuiYktIhGs4h0rOVtVSOeRl5cQq5ori+0jmARR5jdhboIwnVk/TbJ3EKvIHZXnziTRInJu9iJvpgP1DtZ7fyPig4jJ9dxtJTNJMhAVbyrJUmgi3AIqBmRMyGQRowaxCLTL5UX0JFFOEicrUneRaCYIZpa4MMFIK3FviDR15PT+fRzv1CHWVCfR6SB+PMVmbbmHQBwWvDrm6FUaFTwy9FAtjYoRWShU0ojBCtfCk5pA2SDIAVG3CL1A0J5gNDEa2t6xG4GSieNPXeRMpyNiDTz9I1p+nAcQtIXjrcYU75eXUe0W2vVQzqOjQkWJKgpkf4BsKMQQaGTQSGgZkoyEqsSbSXxvjmA24ovzhDjOljKyQwbcFsFfju3DC1ISU7/gruTYIRVzxSLHygLlNco7dENggkVHgRoBM4zI5FBJIawF54j5EMlEqIE1XoMzFt8f4m0T3zxN6G1kV0pMWsPbF74j3hL5RK97nr0+0haCoxauZoqrq5iGxCwW6DGNjRqtEiYJlHaoSiJwdQ4n4Yle4qXEK4HLwAs9nBrBWYGznlC1GE9DdktBuSVwREwdSusR7EqCpVHNKwOFKq9gQgttI0UwaOOxQWIVmAO72P3QJva1DXdJweii4/W35/njk3/nDwqcB6cNlRvijKMajuJMHz++FXf1v+yuo068IiZfSDtVZAbPycaQ94fjaNdAF32sr7BaY2WiyMAvPsxT2yZ4/FYaeGqB5x/7M8+oSBU0VZCUaoArCyp7BTeyFtd1bDOwDclpsfZwejBE1sjAq0bTHZbopsTMG2yOuGUpgsf+dA+P7lrLgY/S3qxDfzrNkz88xr8GjrLdpPQVZemoTMS11uGG80wowa4AV8Waw+mLMWJl4Ijsk6oxtAdjGxS6qqNuSEPxt6/xwqjlM7cBZtFxbM9v2BcjQ92kXOwxVJYq73kTnLXYJcfnjKQSU4fTV1JETK/ipStDTDVAuxI73qRYcthmpOkNxbHHeP12oPlZSHTv/y2fD31KM8LQl5SFpBzM4+YncVzET2/gC0GSxNRz6csJ5JVVvLRhHj0AUxisU1gdKFyO2NM4+k1ezofpY8DTfS9yX0wMtViOeFxT1fvcxY8W+IU2D6tEuk51FLyc6cjAzdE6cqtKGj5RSCiOfJ2fjxV8+rZUVxzb83ser4ElZRhSWks1LKnm5vCfmkFcGLL3GtUPAeMkXss5XB+ucUw5xPocdaTIEf/gAe5/ZIZDtztcb8xy8Mm/8rsgKL2kdCWl1HiTgT1uqs2E0uxKgVkx/WzaGRQzEU61ljhdp1OJtjmFwFxPp0Tx4pfY/5Hp1OX5R1/iGamp6pQqKUtLpRZxRUF1uYXf6NjiFTtE4JTYcChNVYIHhWD+8kaOTh9HN6cwVyp0obH1yVbYWGGUwj63h69un+SRTHuMLC053vnHBQ5//yivNsCFLB6BSmcF6+GGAVesxl1awK9u8lkhaBM4Jvh1smsW2BsFVgx5bcOQq+cL1JxGjQiMddggMKbA6IjOkpl1m4DIimkUyRuCKAlZMn2gUi1c2cdJg8+SOXsVn2lOkt0kelce50hdJFYf5pNCcJeILLQLjg5mUXU+N9DNCu0HmGjQVi6DpoQka3UFaJLIVyI4h897WvZwExrfN/hcHtst/ELJbi2ZsIqTF74rTtZlkZ9g11j2RoXJZdEqzrlJpJ9HtRpo36/rsra5SkXksAG2QolAwpDKXJ2yGVipUKbE99qErNHmMrHazOYU2aEC/anAP098TywtAydY+0tmYuBuPEFFXsvuI9udXB6DQo0EZDciGxKFRqTqhvcSGTRfitiPBHWTEega2saxW0p0EXlj30XOdzorFqg2eyvWR0pmVGIoh/xbFvSy9bnkkBNdVBxFpuEN63NNTUSDtNQjZv+1oIhrFDG7jwxqHfcKuWx9Lj3Bfz5k9mqvmS2oWHPN7EW8Dbxrm5x9r42YHiKDQ8beitkrVjx7m8QcyDZJzRFVjyTHSLHNHQPYJhNaWM7Nvs+bdERcduw3m70Vv5n919Mb2Slha16OZNnezpbMbfLI2EVcWA8bgAvZV68oirVEzsLSeiZF4M6oWK0FEcOZ/Wc5nunNgB8Avq5GKYk6jg5i/SY2x8j2AK1cRFAsisR5EouqSzfr7rvAJwLNpRbNKFiVPKukYVU29AJcI/H2uX2crluaD7UzHzDn9V5f854J1v2KVnBsUoHNSJoh1hzlKa53JnVLc5OOCoFPklNrRzlz4gSe2shnh5Wbhhu91C16pxudxfJ8y/RMHWKdiqxOijEH41aiM6CI+NwvaZiViUsTk3RPfENUWR9WTsEtG7f/ARqeIzUaHVUWAAAAAElFTkSuQmCC",
-  symbolSize: [26, 26],
-  itemStyle: {
-     color: "#FFF",
-     shadowColor: "rgba(0, 255, 254, 0.53)",
-     shadowBlur: 5,
-     borderWidth: 1,
-     opacity: 1
-  },
-  z: 2,
-  zlevel: 10,
-  data: data1,
-  animationDelay: 500
-}
-    ],
-  };
+    {
+      name: "小圈圈",
+      type: "scatter",
+      emphasis: {
+        scale: false
+      },
+      symbol:
+        "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAACCpJREFUSEuFl+uPXVUZxn/rus9lru200zt2SrEJjQSlDWAipv2AGtQYouGDJhpDofgnmNhTv/pFjAItaGL8QtRojCbEaJXEBKUU4YNtKNCW0tqm6XRmembOZe91M2vP9AKWspJ9zsneZ69nvc9a7/M+r+BjRkpJ3HcYfRHGo2BaSFaX0DJgiAgnqbSkKyLdpmL2vW9zKQEizytE/nnLUT//4EiCBEnA3R3MwnpmnGZrCpj8PwWE/HFthGs3l28k6JM4r5ucu/Qt+jcji5sW8n/AnU6SnQOw5hlmMGyXAusDSMEVZZgLA+baLYbvnaWfgTasRzvPWDKMkdiYJGMikWJkkAQn557gnOgg6JBSyiQss1ADZzqFyN9wEMTTz7JTSrZiQQbmUuTdEcu8n0fE9vI7Nw/ZI7EJdI/Ugwk822NktRBElTiz/yLHOwdI+c1r4CuTLNPbOYj42SbuiYktIhGs4h0rOVtVSOeRl5cQq5ori+0jmARR5jdhboIwnVk/TbJ3EKvIHZXnziTRInJu9iJvpgP1DtZ7fyPig4jJ9dxtJTNJMhAVbyrJUmgi3AIqBmRMyGQRowaxCLTL5UX0JFFOEicrUneRaCYIZpa4MMFIK3FviDR15PT+fRzv1CHWVCfR6SB+PMVmbbmHQBwWvDrm6FUaFTwy9FAtjYoRWShU0ojBCtfCk5pA2SDIAVG3CL1A0J5gNDEa2t6xG4GSieNPXeRMpyNiDTz9I1p+nAcQtIXjrcYU75eXUe0W2vVQzqOjQkWJKgpkf4BsKMQQaGTQSGgZkoyEqsSbSXxvjmA24ovzhDjOljKyQwbcFsFfju3DC1ISU7/gruTYIRVzxSLHygLlNco7dENggkVHgRoBM4zI5FBJIawF54j5EMlEqIE1XoMzFt8f4m0T3zxN6G1kV0pMWsPbF74j3hL5RK97nr0+0haCoxauZoqrq5iGxCwW6DGNjRqtEiYJlHaoSiJwdQ4n4Yle4qXEK4HLwAs9nBrBWYGznlC1GE9DdktBuSVwREwdSusR7EqCpVHNKwOFKq9gQgttI0UwaOOxQWIVmAO72P3QJva1DXdJweii4/W35/njk3/nDwqcB6cNlRvijKMajuJMHz++FXf1v+yuo068IiZfSDtVZAbPycaQ94fjaNdAF32sr7BaY2WiyMAvPsxT2yZ4/FYaeGqB5x/7M8+oSBU0VZCUaoArCyp7BTeyFtd1bDOwDclpsfZwejBE1sjAq0bTHZbopsTMG2yOuGUpgsf+dA+P7lrLgY/S3qxDfzrNkz88xr8GjrLdpPQVZemoTMS11uGG80wowa4AV8Waw+mLMWJl4Ijsk6oxtAdjGxS6qqNuSEPxt6/xwqjlM7cBZtFxbM9v2BcjQ92kXOwxVJYq73kTnLXYJcfnjKQSU4fTV1JETK/ipStDTDVAuxI73qRYcthmpOkNxbHHeP12oPlZSHTv/y2fD31KM8LQl5SFpBzM4+YncVzET2/gC0GSxNRz6csJ5JVVvLRhHj0AUxisU1gdKFyO2NM4+k1ezofpY8DTfS9yX0wMtViOeFxT1fvcxY8W+IU2D6tEuk51FLyc6cjAzdE6cqtKGj5RSCiOfJ2fjxV8+rZUVxzb83ser4ElZRhSWks1LKnm5vCfmkFcGLL3GtUPAeMkXss5XB+ucUw5xPocdaTIEf/gAe5/ZIZDtztcb8xy8Mm/8rsgKL2kdCWl1HiTgT1uqs2E0uxKgVkx/WzaGRQzEU61ljhdp1OJtjmFwFxPp0Tx4pfY/5Hp1OX5R1/iGamp6pQqKUtLpRZxRUF1uYXf6NjiFTtE4JTYcChNVYIHhWD+8kaOTh9HN6cwVyp0obH1yVbYWGGUwj63h69un+SRTHuMLC053vnHBQ5//yivNsCFLB6BSmcF6+GGAVesxl1awK9u8lkhaBM4Jvh1smsW2BsFVgx5bcOQq+cL1JxGjQiMddggMKbA6IjOkpl1m4DIimkUyRuCKAlZMn2gUi1c2cdJg8+SOXsVn2lOkt0kelce50hdJFYf5pNCcJeILLQLjg5mUXU+N9DNCu0HmGjQVi6DpoQka3UFaJLIVyI4h897WvZwExrfN/hcHtst/ELJbi2ZsIqTF74rTtZlkZ9g11j2RoXJZdEqzrlJpJ9HtRpo36/rsra5SkXksAG2QolAwpDKXJ2yGVipUKbE99qErNHmMrHazOYU2aEC/anAP098TywtAydY+0tmYuBuPEFFXsvuI9udXB6DQo0EZDciGxKFRqTqhvcSGTRfitiPBHWTEega2saxW0p0EXlj30XOdzorFqg2eyvWR0pmVGIoh/xbFvSy9bnkkBNdVBxFpuEN63NNTUSDtNQjZv+1oIhrFDG7jwxqHfcKuWx9Lj3Bfz5k9mqvmS2oWHPN7EW8Dbxrm5x9r42YHiKDQ8beitkrVjx7m8QcyDZJzRFVjyTHSLHNHQPYJhNaWM7Nvs+bdERcduw3m70Vv5n919Mb2Slha16OZNnezpbMbfLI2EVcWA8bgAvZV68oirVEzsLSeiZF4M6oWK0FEcOZ/Wc5nunNgB8Avq5GKYk6jg5i/SY2x8j2AK1cRFAsisR5EouqSzfr7rvAJwLNpRbNKFiVPKukYVU29AJcI/H2uX2crluaD7UzHzDn9V5f854J1v2KVnBsUoHNSJoh1hzlKa53JnVLc5OOCoFPklNrRzlz4gSe2shnh5Wbhhu91C16pxudxfJ8y/RMHWKdiqxOijEH41aiM6CI+NwvaZiViUsTk3RPfENUWR9WTsEtG7f/ARqeIzUaHVUWAAAAAElFTkSuQmCC",
+      symbolSize: [26, 26],
+      itemStyle: {
+        color: "#FFF",
+        shadowColor: "rgba(0, 255, 254, 0.53)",
+        shadowBlur: 5,
+        borderWidth: 1,
+        opacity: 1
+      },
+      z: 2,
+      zlevel: 10,
+      data: data1,
+      animationDelay: 500
+    }
+  ],
+};
 
 
-  export default options;
\ No newline at end of file
+export default options;
\ No newline at end of file
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 dbc8ba65..7638da9d 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
@@ -1,626 +1,676 @@
 <template>
-    <div class='congestion'>
-      <WgtTitle :title="'感知事件查询'" ></WgtTitle>
-      <div class="board">
-        <ProgressBar class="keep-ratio" @selectItem="selectProgress" :dataList="dataList"  :selectIndex="7" />
-        <div class="searchPanel">
-          <el-select v-model="area" size="mini" class="selectRoad" placeholder="请选择">
-            <el-option
-              v-for="item in areaOptions"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value">
-            </el-option>
-          </el-select>
-          <el-select v-model="year" size="mini" class="selectRoad" placeholder="请选择">
-            <el-option
-              v-for="item in yearOptions"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value">
-            </el-option>
-          </el-select>
-          <el-date-picker
-          size="mini"
-          v-if="year != 'quarter'"
-          class="selectRoad"
-            v-model="dateTime"
-            style="width:140px;"
-            :type="year"
-            placeholder="请选择"
-        />
-        <el-quarter-picker  size="mini" class="selectRoad" style="width:180px;" v-if="year == 'quarter'" v-model="dateTime" aria-placeholder="请选季度" />
-
-          <el-button type="primary" size="mini" class="btnSearch" @click="searchQuery" icon="el-icon-search">查询</el-button>
-          <el-button class="btnReset"  size="mini" icon="el-icon-refresh-left" >重置</el-button>
-        </div>
-      </div>  
-      <div class="body" >
-        <div  id="chart1" class="keep-ratio" >
-
-        </div>
-        <div   id="chart2" class="keep-ratio" >
-            
-        </div>
-        <div   id="chart3" class="keep-ratio" >
-            
-        </div>
+  <div class='congestion'>
+    <div class="board">
+      <ProgressBar class="keep-ratio" @selectItem="selectProgress" :dataList="dataList" :selectIndex="selectId" />
+      <div class="searchPanel">
+        <el-select v-model="area" size="mini" class="selectRoad" placeholder="请选择" default-first-option>
+          <el-option v-for="item in areaOptions" :key="item.value" :label="item.label" :value="item.value">
+          </el-option>
+        </el-select>
+        <el-select v-model="year" size="mini" class="selectRoad" placeholder="请选择">
+          <el-option v-for="item in yearOptions" :key="item.value" :label="item.label" :value="item.value">
+          </el-option>
+        </el-select>
+        <el-date-picker size="mini" v-if="year != 'quarter'" class="selectRoad" v-model="dateTime" style="width:140px;"
+          :type="year" placeholder="请选择" />
+        <el-quarter-picker size="mini" class="selectRoad" style="width:180px;" v-if="year == 'quarter'" v-model="dateTime"
+          aria-placeholder="请选季度" />
+
+        <el-button type="primary" size="mini" class="btnSearch" @click="searchQuery" icon="el-icon-search">查询</el-button>
+        <el-button class="btnReset" size="mini" icon="el-icon-refresh-left" @click="onReset">重置</el-button>
       </div>
     </div>
-  </template>
-  
-  <script>
+
+    <div class="body">
+      <div>
+        <WgtTitle :title="'感知事件趋势分析'"></WgtTitle>
+        <div id="chart1" class="btnChart" />
+      </div>
+
+      <div>
+        <WgtTitle :title="'感知事件类型分析'"></WgtTitle>
+        <div id="chart2" class="btnChart" />
+      </div>
+
+      <div>
+        <WgtTitle :title="'桩号范围内事件分析趋势'"></WgtTitle>
+        <div id="chart3" class="btnChart" />
+      </div>
+    </div>
+
+  </div>
+</template>
   
-  import WgtTitle from '../../../widgets/title'
-  import ProgressBar from './progressBar.vue';
-  import * as echarts from "echarts";
-  import chart1 from "./assets/charts";
-  import chart2 from "./assets/charts2";
-  import chart3 from "./assets/charts3";
-  import ElQuarterPicker from './ElQuarterPicker'
-  import { getWarningTrend,getWarningSectionType,getSectionMarkNumber,getRoadSectionList } from '../../../../../../../api/event/perceiveEvent';
-
-  const drawRoundRect = ( ctx, x, y, width, height, radius ,gr) => {   
+<script>
+
+import WgtTitle from '../../../widgets/title'
+import ProgressBar from './progressBar';
+import * as echarts from "echarts";
+import chart1 from "./assets/charts";
+import chart2 from "./assets/charts2";
+import chart3 from "./assets/charts3";
+import ElQuarterPicker from './ElQuarterPicker'
+import { getWarningTrend, getWarningSectionType, getSectionMarkNumber, getRoadSectionList } from '../../../../../../../api/event/perceiveEvent';
+
+const drawRoundRect = (ctx, x, y, width, height, radius, gr) => {
   // ctx, 矩形距离x坐标位置, 矩形距离y坐标的位置, 矩形的宽, 矩形的长,圆角角度 
-	ctx.beginPath();    
+  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.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: 'EventQuery',
-    components: {
-      WgtTitle,
-      ProgressBar,
-      ElQuarterPicker
-    },
-    data() {
-      return {
-        yearOptions:[
+export default {
+  name: 'EventQuery',
+  components: {
+    WgtTitle,
+    ProgressBar,
+    ElQuarterPicker
+  },
+  data() {
+    return {
+      yearOptions: [
         {
-            value: 'year',
-           label: '年'
-        },{
-            value: 'month',
-           label: '月'
+          value: 'year',
+          label: '年度'
+        }, {
+          value: 'month',
+          label: '月'
         },
         {
-            value: 'date',
-           label: '日'
+          value: 'date',
+          label: '日'
         },
         {
-            value: 'quarter',
-           label: '季'
+          value: 'quarter',
+          label: '季'
         },],
-        areaOptions: [{
-          value: '0531',
-          label: '济南'
-        }, {
-          value: '菏泽',
-          label: '菏泽'
+      areaOptions: [{
+        value: '1',
+        label: '济南方向'
+      }, {
+        value: '2',
+        label: '菏泽方向'
       }],
-      dateTime:"",
-      area: '0531',
-      dataList:[
+      dateTime: "2024",
+      area: '1',
+      dataList: [
         {
-          title:"殷家林枢纽"
+          title: "殷家林枢纽"
         },
         {
-          title:"大学城立交"
+          title: "大学城立交"
         },
         {
-          title:"长清立交"
+          title: "长清立交"
         },
         {
-          title:"松竹枢纽"
+          title: "松竹枢纽"
         },
         {
-          title:"孝里立交"
+          title: "孝里立交"
         },
         {
-          title:"平阴立交"
+          title: "平阴立交"
         },
         {
-          title:"孔村枢纽"
+          title: "孔村枢纽"
         },
         {
-          title:"平阴南立交"
+          title: "平阴南立交"
         },
         {
-          title:"魏雪枢纽"
+          title: "魏雪枢纽"
         },
         {
-          title:"东平立交"
+          title: "东平立交"
         },
         {
-          title:"东平湖枢纽"
+          title: "东平湖枢纽"
         },
         {
-          title:"韩岗立交"
+          title: "韩岗立交"
         },
         {
-          title:"梁山立交"
+          title: "梁山立交"
         },
         {
-          title:"鄄郓枢纽"
+          title: "鄄郓枢纽"
         },
         {
-          title:"嘉祥西立交"
+          title: "嘉祥西立交"
         },
         {
-          title:"王官屯枢纽"
+          title: "王官屯枢纽"
         }
       ],
-      quarter:"",
-      selectId:1,
-      year:"year",
-        list:[
-          {name:'大学城-长清', direction:'济南方向', state:"正常",speed:'108.14km/h', follow:'161'},
-          {name:'大学城-长清', direction:'济南方向', state:"正常",speed:'108.14km/h', follow:'161'},
-          {name:'大学城-长清', direction:'济南方向', state:"正常",speed:'108.14km/h', follow:'161'},
-          {name:'大学城-长清', direction:'济南方向', state:"正常",speed:'108.14km/h', follow:'161'},
-          {name:'大学城-长清', direction:'济南方向', state:"正常",speed:'108.14km/h', follow:'161'},
-          {name:'大学城-长清', direction:'济南方向', state:"正常",speed:'108.14km/h', follow:'161'}
-        ]
-      }
+      quarter: "",
+      selectId: 3,
+      year: "year",
+      list: [
+        { name: '大学城-长清', direction: '济南方向', state: "正常", speed: '108.14km/h', follow: '161' },
+        { name: '大学城-长清', direction: '济南方向', state: "正常", speed: '108.14km/h', follow: '161' },
+        { name: '大学城-长清', direction: '济南方向', state: "正常", speed: '108.14km/h', follow: '161' },
+        { name: '大学城-长清', direction: '济南方向', state: "正常", speed: '108.14km/h', follow: '161' },
+        { name: '大学城-长清', direction: '济南方向', state: "正常", speed: '108.14km/h', follow: '161' },
+        { name: '大学城-长清', direction: '济南方向', state: "正常", speed: '108.14km/h', follow: '161' }
+      ]
+    }
+  },
+  created() {
+
+  },
+  methods: {
+    selectProgress(item) {
+      this.selectId = item.id;
     },
-  
-    created() {
-      
+    onReset() {
+      this.area = '1';
+      this.year = "year";
+      this.dateTime = '2024';
+      this.selectId = 1;
     },
-    methods: {
-      selectProgress(item){
-        this.selectId = item.id;
-      },
-      searchQuery(){
-        let dateTime = this.dateTime;
-        if ( dateTime == "" ) {
-          this.$message.error('没有选日期参数！');
-          return 
-        }
-        var quarter = 0;
-        if ( this.year == "year") {
-          dateTime = new Date(dateTime);
-          dateTime = dateTime.getFullYear() + "-01-01 00:00:00";
-          console.log(dateTime);
-        }
-        if ( this.year == "month") {
-          dateTime = new Date(dateTime);
-          let m = dateTime.getMonth()+1;
-          m = m < 10?"0"+m:m;
-          dateTime = dateTime.getFullYear() + "-" + m +"-01 00:00:00";
-          console.log(dateTime);
-        }
-        if ( this.year == "quarter" ) {
-          console.log(dateTime);
-          dateTime = new Date(dateTime);
-          let m = dateTime.getMonth()+1;
-          if ( m == 1) m = 1;
-          if ( m == 2) m = 4;
-          if ( m == 3) m = 7;
-          if ( m == 4) m = 10;
-
-          quarter = m;
-          m = m < 10?"0"+m:m;
-          dateTime = dateTime.getFullYear() + "-" + m +"-01 00:00:00";
-          console.log(dateTime);
-        }
-
-        if ( this.year == "date"  ) {
-          this.year = "day";
-          dateTime = new Date(dateTime);
-          let m = dateTime.getMonth()+1;
-          m = m < 10?"0"+m:m;
-          let d = dateTime.getDate();
-          d = d < 10?"0"+d:d;
-          dateTime = dateTime.getFullYear() + "-" + m +"-"+d+" 00:00:00";
-        }
-
-        //感知事件趋势
-        getWarningTrend({
-            "type": this.year,
-            "sectionId": this.selectId,
-            "createTime": dateTime,
-            "direction":1,
-        }).then(res=>{
-          console.log(res);
-          chart1.series[0].data = [];
-          if ( res.code == 200 ) {
-            let data = res.data;
-            if ( this.year == "year" ) {
-              let years = [];
-              let numbers = [];
-              data.forEach(it=>{
-                years.push(it.month+"月");
-                numbers.push(it.number);
-              })
-              chart1.xAxis.data = years;
-              chart1.series[0].data = numbers;
-            }
-
-            if ( this.year == "month" ) {
-              let months = [];
-              let numbers = [];
-              data.forEach(it=>{
-                months.push(it.day.split("-")[2]+"日");
-                numbers.push(it.number);
-              })
-              chart1.xAxis.data = months;
-              chart1.series[0].data = numbers;
-            }
-
-            if ( this.year == "day" ) {
-              let times = [];
-              let numbers = [];
-              data.forEach(it=>{
-                times.push(it.time.split(" ")[1]+"小时");
-                numbers.push(it.number);
-              })
-              chart1.xAxis.data = times;
-              chart1.series[0].data = numbers;
-            }
+    searchQuery() {
+      let dateTime = this.dateTime;
+      if (dateTime == "") {
+        this.$message.error('没有选日期参数！');
+        return
+      }
+      var quarter = 0;
+      if (this.year == "year") {
+        dateTime = new Date(dateTime);
+        dateTime = dateTime.getFullYear() + "-01-01 00:00:00";
+        console.log(dateTime);
+      }
+      if (this.year == "month") {
+        dateTime = new Date(dateTime);
+        let m = dateTime.getMonth() + 1;
+        m = m < 10 ? "0" + m : m;
+        dateTime = dateTime.getFullYear() + "-" + m + "-01 00:00:00";
+        console.log(dateTime);
+      }
+      if (this.year == "quarter") {
+        console.log(dateTime);
+        dateTime = new Date(dateTime);
+        let m = dateTime.getMonth() + 1;
+        if (m == 1) m = 1;
+        if (m == 2) m = 4;
+        if (m == 3) m = 7;
+        if (m == 4) m = 10;
 
-            if ( this.year == "quarter" ) {
-              let months = [];
-              let numbers = [];
-              data.forEach(it=>{
-                months.push(it.MONTH+"月");
-                numbers.push(it.number);
-              })
-              chart1.xAxis.data = months;
-              chart1.series[0].data = numbers;
-            }
-          }
+        quarter = m;
+        m = m < 10 ? "0" + m : m;
+        dateTime = dateTime.getFullYear() + "-" + m + "-01 00:00:00";
+        console.log(dateTime);
+      }
 
-          this.myChart1.setOption(chart1);
-        });
+      if (this.year == "date") {
+        this.year = "day";
+        dateTime = new Date(dateTime);
+        let m = dateTime.getMonth() + 1;
+        m = m < 10 ? "0" + m : m;
+        let d = dateTime.getDate();
+        d = d < 10 ? "0" + d : d;
+        dateTime = dateTime.getFullYear() + "-" + m + "-" + d + " 00:00:00";
+      }
 
-        //类型占比
-        getWarningSectionType({
-            "type": this.year,
-            "sectionId": this.selectId,
-            "createTime": dateTime,
-            "direction":1,
-        }).then(res=>{
-          console.log(res);
-         
-          chart2.series[0].data = [];
-          if ( res.code == 200 ) {
-             let types = [];
-             let numbers = [];
-             const gapData = {
-                name: "",
-                value: 0.5,
-                itemStyle: {
-                  color: "transparent",
-                },
-            };
-            let data = res.data.warningTypeList;
-            let total= res.data.total;
-
-            data.forEach((it)=>{
-              // 1-交通拥堵 2-行人 3-非机动车 4-停车5-倒车/逆行 6-烟火7-撒落物8-异常天气 9-护栏碰撞
-              if ( it.warningType == 1) {
-                types.push("交通拥堵");
+      //感知事件趋势
+      getWarningTrend({
+        "type": this.year,
+        "sectionId": this.selectId,
+        "createTime": dateTime,
+        "direction": this.area,
+      }).then(res => {
+        if (res.code == 200) {
+          let data = res.data;
+          chart1.series[0].data = [];
+          if (data.length > 0) {
+            const maxObject = data.reduce((prev, current) => (current.number > prev.number ? current : prev));
+            let xData = [];
+            let numbers = [];
 
+            data.forEach(it => {
+              if (this.year == "year") {
+                xData.push(it.month + "月");
               }
-              if ( it.warningType == 2) {
-                types.push("行人");
-              }
-              if ( it.warningType == 3) {
-                types.push("非机动车");
-              }
-              if ( it.warningType == 4) {
-                types.push("停车");
-              }
-              if ( it.warningType == 5) {
-                types.push("倒车/逆行");
-              }
-              if ( it.warningType == 6) {
-                types.push("烟火");
+              if (this.year == "month") {
+                xData.push(it.day.split("-")[2] + "日");
               }
-              if ( it.warningType == 7) {
-                types.push("撒落物");
+              if (this.year == "day") {
+                xData.push(it.time.split(" ")[1] + "小时");
               }
-              if ( it.warningType == 8) {
-                types.push("异常天气");
+              if (this.year == "quarter") {
+                xData.push(it.QUARTER);
               }
-              if ( it.warningType == 9) {
-                types.push("护栏碰撞");
+              if (it.number == maxObject.number) {
+                numbers.push({
+                  value: it.number,
+                  itemStyle: {
+                    color: {
+                      type: 'linear',
+                      x: 0,
+                      y: 0,
+                      x2: 0,
+                      y2: 1,
+                      colorStops: [{
+                        offset: 0, color: '#FFB904' // 0% 处的颜色
+                      }, {
+                        offset: 1, color: '#FF6969' // 100% 处的颜色
+                      }],
+                      global: false // 缺省为 false
+                    },
+                    borderRadius: 6
+                  }
+                });
+              } else {
+                numbers.push({
+                  value: it.number,
+                  itemStyle: {
+                    borderRadius: 6
+                  }
+                });
               }
-              
-              numbers.push({
-                name:types[types.length - 1],
-                value:it.number
-              });
-              numbers.push(gapData);
+
             })
-            console.log(types);
-            chart2.legend.data = types;
-            chart2.legend.formatter = function(name){
+
+            chart1.xAxis.data = xData;
+            chart1.series[0].data = numbers;
+
+          }
+        }
+        this.myChart1.setOption(chart1);
+      });
+
+      //类型占比
+      getWarningSectionType({
+        "type": this.year,
+        "sectionId": this.selectId,
+        "createTime": dateTime,
+        "direction": this.area,
+      }).then(res => {
+        chart2.series[0].data = [];
+        if (res.code == 200) {
+          let types = [];
+          let numbers = [];
+
+          let data = res.data.warningTypeList;
+          let total = res.data.total;
+
+          data.forEach((it) => {
+            if (it.warningType == 1) {
+              types.push("交通拥堵");
+            }
+            if (it.warningType == 2) {
+              types.push("行人");
+            }
+            if (it.warningType == 3) {
+              types.push("非机动车");
+            }
+            if (it.warningType == 4) {
+              types.push("停车");
+            }
+            if (it.warningType == 5) {
+              types.push("倒车/逆行");
+            }
+            if (it.warningType == 6) {
+              types.push("烟火");
+            }
+            if (it.warningType == 7) {
+              types.push("撒落物");
+            }
+            if (it.warningType == 8) {
+              types.push("异常天气");
+            }
+            if (it.warningType == 9) {
+              types.push("护栏碰撞");
+            }
+
+            numbers.push({
+              name: types[types.length - 1],
+              value: it.number
+            });
+          })
+          chart2.legend.data = types;
+          chart2.legend.formatter = function (name) {
             let total = 0
             let target
-             for (let i = 0; i < numbers.length; i++) {
-               total += numbers[i].value;
-               if (types[i] === name) {
-                 target = numbers[i].value;
-               }
-             }
-             var arr = [
-               '{a|' + name + '}',
-               '{b|' + ((target / total) * 100).toFixed(2) + '%}',
-             ]
-             return arr.join('  ')
-       };
+            for (let i = 0; i < numbers.length; i++) {
+              total += numbers[i].value;
+              if (types[i] == name) {
+                target = numbers[i].value;
+              }
+            }
+            var arr = [
+              '{a|' + name + '}',
+              '{b|' + ((target / total) * 100).toFixed(2) + '%}',
+            ]
+            return arr.join('  ')
+          };
 
           chart2.series[0].data = numbers;
-              // 用户鼠标悬浮到某一图形时，停止自动切换并高亮鼠标悬浮的图形
-              this.myChart2.on('mouseover', (params) => {
-                    if (params.componentType == 'graphic') {
-                      return
-                    }
-                    console.log(params);
-                    chart2.title.text = Math.round(params.data.value/total * 100) + "%";
-                    chart2.title.subtext = params.data.name;
-                    this.myChart2.setOption(chart2);
-                })
-
-                // 用户鼠标移出时，重新开始自动切换
-                this.myChart2.on('mouseout', (params) => {
-                    chart2.title.text = total;
-                    chart2.title.subtext = "类型分析";
-                    this.myChart2.setOption(chart2);
-                })
-          }
-          this.myChart2.setOption(chart2);
-              
-        })
-          //路段范围内桩号分布
-          getSectionMarkNumber({
-            "type": this.year,
-            "sectionId": this.selectId,
-            "createTime": dateTime,
-            "direction":1,
-        }).then(res=>{
-          console.log(res);
-          chart3.series[0].data = [];
-          chart3.series[1].data = [];
-          if ( res.code == 200 ) {
-            let data = res.data;
-            if ( this.year != "quarter" ) {
-              let zhs = [];
-              let values = [];
-              data.forEach((it)=>{
-                console.log(it);
+          // 用户鼠标悬浮到某一图形时，停止自动切换并高亮鼠标悬浮的图形
+          this.myChart2.on('mouseover', (params) => {
+            if (params.componentType == 'graphic') {
+              return
+            }
+            console.log(params);
+            chart2.title.text = Math.round(params.data.value / total * 100) + "%";
+            chart2.title.subtext = params.data.name;
+            this.myChart2.setOption(chart2);
+          })
+
+          // 用户鼠标移出时，重新开始自动切换
+          this.myChart2.on('mouseout', (params) => {
+            chart2.title.text = total;
+            chart2.title.subtext = "类型分析";
+            this.myChart2.setOption(chart2);
+          })
+        }
+        this.myChart2.setOption(chart2);
+
+      })
+      //路段范围内桩号分布
+      getSectionMarkNumber({
+        "type": this.year,
+        "sectionId": this.selectId,
+        "createTime": dateTime,
+        "direction": this.area,
+      }).then(res => {
+        chart3.series[0].data = [];
+        chart3.series[1].data = [];
+        if (res.code == 200) {
+          let data = res.data;
+          if (this.year != "quarter") {
+            let zhs = [];
+            let values = [];
+            data.forEach((it) => {
+              if (it.sectionNumber > 0) {
                 values.push(it.sectionNumber);
                 zhs.push(it.stakeMarkId);
+              }
+            })
+            chart3.xAxis.data = zhs;
+            chart3.series[0].data = values;
+            chart3.series[1].data = values;
+          } else {
+            let zhs = [];
+            let values = [];
+            data.forEach((dt, i) => {
+              dt.forEach((it) => {
+                if (it.number > 0) {
+                  if (quarter == 1 && it.QUARTER == "第一季度") {
+                    values[i] = it.number;
+                    zhs[i] = it.stakeMark;
+                  }
+                  if (quarter == 4 && it.QUARTER == "第二季度") {
+                    values[i] = it.number;
+                    zhs[i] = it.stakeMark;
+                  }
+                  if (quarter == 7 && it.QUARTER == "第三季度") {
+                    values[i] = it.number;
+                    zhs[i] = it.stakeMark;
+                  }
+                  if (quarter == 10 && it.QUARTER == "第四季度") {
+                    values[i] = it.number;
+                    zhs[i] = it.stakeMark;
+                  }
+                }
+
               })
-              chart3.xAxis.data = zhs;
-              chart3.series[0].data = values;
-              chart3.series[1].data = values;
-            } else {
-              let zhs = [];
-              let values = [];
-              data.forEach((dt,i)=>{
-                dt.forEach((it)=>{
-                      console.log(it);
-                      if ( quarter == 1 && it.QUARTER == "第一季度") {
-                        values[i] = it.number;
-                        zhs[i] = it.stakeMark;
-                      }
-                      if ( quarter == 4 && it.QUARTER == "第二季度") {
-                        values[i] = it.number;
-                        zhs[i] = it.stakeMark;
-                      }
-                      if ( quarter == 7 && it.QUARTER == "第三季度") {
-                        values[i] = it.number;
-                        zhs[i] = it.stakeMark;
-                      }
-                      if ( quarter == 10 && it.QUARTER == "第四季度") {
-                        values[i] = it.number;
-                        zhs[i] = it.stakeMark;
-                      }
-                })
-              })
-              chart3.xAxis.data = zhs;
-              chart3.series[0].data = values;
-              chart3.series[1].data = values;
-            }
+            })
+            chart3.xAxis.data = zhs;
+            chart3.series[0].data = values;
+            chart3.series[1].data = values;
           }
+        }
 
-          this.myChart3.setOption(chart3);
-        })
-        if ( this.year == "day" )
+        this.myChart3.setOption(chart3);
+      })
+      if (this.year == "day")
         this.year = "date";
-      },
     },
-    mounted() {
-      setTimeout(() => {
-        this.$nextTick(() => {
-
-          getRoadSectionList().then(res=>{
-              console.log(res);
-              if ( res.code == 200 ) {
-                let rows = res.rows;
-                this.dataList = [];
-                rows.forEach(it=>{
-                    this.dataList.push({
-                      title:it.sectionName.split("-")[0],
-                      id:it.id,
-
-                    });
-                })
-              }
-             
+  },
+  mounted() {
+    setTimeout(() => {
+      this.$nextTick(() => {
 
-          })
+        getRoadSectionList().then(res => {
+          console.log(res);
+          if (res.code == 200) {
+            let rows = res.rows;
+            this.dataList = [];
+            rows.forEach(it => {
+              this.dataList.push({
+                title: it.sectionName.split("-")[0],
+                id: it.id,
+
+              });
+            })
+            if (rows.length > 0) {
+              let lastRoad = rows[rows.length - 1].sectionName.split("-")[1];
+              this.dataList.push({
+                title: lastRoad,
+                id: rows[rows.length - 1].id,
+              });
+            }
+
+          }
+          this.searchQuery();
+
+
+        })
+
+        var myChart1 = echarts.init(document.getElementById('chart1'));
+        myChart1.setOption(chart1);
+        var myChart2 = echarts.init(document.getElementById('chart2'));
+        myChart2.setOption(chart2);
+        var myChart3 = echarts.init(document.getElementById('chart3'));
+        myChart3.setOption(chart3);
+
+
+        this.myChart1 = myChart1;
+        this.myChart2 = myChart2;
+        this.myChart3 = myChart3;
 
-            var myChart1 = echarts.init(document.getElementById('chart1'));
-             myChart1.setOption(chart1);
-             var myChart2 = echarts.init(document.getElementById('chart2'));
-             myChart2.setOption(chart2);
-             var myChart3 = echarts.init(document.getElementById('chart3'));
-             myChart3.setOption(chart3);
-
-             
-             this.myChart1 = myChart1;
-             this.myChart2 = myChart2;
-             this.myChart3 = myChart3;
-             
         const domMap = document.getElementById("chart2");
-        let parentDiv = domMap.firstChild; 
+        let parentDiv = domMap.firstChild;
         // 创建canvas
         let canvas = document.createElement('canvas');
         canvas.width = parentDiv.offsetWidth;
-        canvas.height =parentDiv.offsetHeight;
+        canvas.height = parentDiv.offsetHeight;
         parentDiv.appendChild(canvas);
-        const context = canvas.getContext('2d'); 
-        
-        // 填充渐变颜色
-        var gr = context.createLinearGradient(247, 63, 450, 0);
-        // 颜色断点
-        gr.addColorStop(1, 'rgba(92,197,255,0)');
-        gr.addColorStop(0, 'rgba(92,197,255,0.5)');
-       
-      
+        const context = canvas.getContext('2d');
         context.lineWidth = 1; // 设置线段宽度
-      
-        // 绘制圆角矩形
-        drawRoundRect(context, 300, 78, 160, 24, 12,gr)
-         
-        var gr = context.createLinearGradient(240, 63, 450, 0);
-        // 颜色断点
-        gr.addColorStop(1, 'rgba(92,197,255,0)');
-        gr.addColorStop(0, 'rgba(92,197,255,0.5)');
-        drawRoundRect(context, 300, 148, 160, 24, 12,gr)
-         
-        var gr = context.createLinearGradient(240, 63, 450, 0);
-        // 颜色断点
-        gr.addColorStop(1, 'rgba(92,197,255,0)');
-        gr.addColorStop(0, 'rgba(92,197,255,0.5)');
-        drawRoundRect(context, 300, 218, 160, 24, 12,gr)
-        
-        var gr = context.createLinearGradient(400, 63, 450, 0);
-        // 颜色断点
-        gr.addColorStop(1, 'rgba(92,197,255,0)');
-        gr.addColorStop(0, 'rgba(92,197,255,0.5)');
-        
 
-        drawRoundRect(context, 460, 78, 160, 24, 12,gr)
-        var gr = context.createLinearGradient(350, 63, 450, 0);
-        // 颜色断点
-        gr.addColorStop(1, 'rgba(92,197,255,0)');
-        gr.addColorStop(0, 'rgba(92,197,255,0.5)');
-        drawRoundRect(context, 460, 148, 160, 24, 12,gr)
-        var gr = context.createLinearGradient(300, 63, 450, 0);
+        // 填充渐变颜色
         // 颜色断点
-        gr.addColorStop(1, 'rgba(92,197,255,0)');
-        gr.addColorStop(0, 'rgba(92,197,255,0.5)');
-        drawRoundRect(context, 460, 218, 160, 24, 12,gr)
-        });
+        // var gr = context.createLinearGradient(247, 63, 450, 0);
+        // gr.addColorStop(1, 'rgba(92,197,255,0)');
+        // gr.addColorStop(0, 'rgba(92,197,255,0.5)');
+        // drawRoundRect(context, 267, 57, 140, 24, 12, gr)
+
+        // // 颜色断点
+        // var gr = context.createLinearGradient(247, 63, 450, 0);
+        // gr.addColorStop(1, 'rgba(92,197,255,0)');
+        // gr.addColorStop(0, 'rgba(92,197,255,0.5)');
+        // drawRoundRect(context, 267, 108, 140, 24, 12, gr)
+
+        // // 颜色断点
+        // var gr = context.createLinearGradient(240, 63, 450, 0);
+        // gr.addColorStop(1, 'rgba(92,197,255,0)');
+        // gr.addColorStop(0, 'rgba(92,197,255,0.5)');
+        // drawRoundRect(context, 267, 157, 140, 24, 12, gr)
+
+        // // 颜色断点
+        // var gr = context.createLinearGradient(240, 63, 450, 0);
+        // gr.addColorStop(1, 'rgba(92,197,255,0)');
+        // gr.addColorStop(0, 'rgba(92,197,255,0.5)');
+        // drawRoundRect(context, 267, 208, 140, 24, 12, gr)
+
+        // // 颜色断点
+        // var gr = context.createLinearGradient(240, 63, 450, 0);
+        // gr.addColorStop(1, 'rgba(92,197,255,0)');
+        // gr.addColorStop(0, 'rgba(92,197,255,0.5)');
+        // drawRoundRect(context, 267, 258, 140, 24, 12, gr)
+
+        // // 颜色断点
+        // var gr = context.createLinearGradient(400, 63, 450, 0);
+        // gr.addColorStop(1, 'rgba(92,197,255,0)');
+        // gr.addColorStop(0, 'rgba(92,197,255,0.5)');
+        // drawRoundRect(context, 416, 57, 140, 24, 12, gr)
+
+        // // 颜色断点
+        // var gr = context.createLinearGradient(350, 63, 450, 0);
+        // gr.addColorStop(1, 'rgba(92,197,255,0)');
+        // gr.addColorStop(0, 'rgba(92,197,255,0.5)');
+        // drawRoundRect(context, 416, 108, 140, 24, 12, gr)
+
+        // // 颜色断点
+        // var gr = context.createLinearGradient(300, 63, 450, 0);
+        // gr.addColorStop(1, 'rgba(92,197,255,0)');
+        // gr.addColorStop(0, 'rgba(92,197,255,0.5)');
+        // drawRoundRect(context, 416, 157, 140, 24, 12, gr)
+
+        // // 颜色断点
+        // var gr = context.createLinearGradient(300, 63, 450, 0);
+        // gr.addColorStop(1, 'rgba(92,197,255,0)');
+        // gr.addColorStop(0, 'rgba(92,197,255,0.5)');
+        // drawRoundRect(context, 416, 208, 140, 24, 12, gr);
+
       });
-    },
-  }
-  </script>
+
+    });
+  },
+}
+</script>
   
-  <style lang='scss' scoped>
-  .congestion {
-    width: 100%;
-    .body {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        height: 320px;
-        width:100%;
-        font-size: 14px;
-        
-        > div {
-            display: inline-flex;
-            height:100%;
-            width:33%;
-            margin-right:px;
-            background: linear-gradient(180deg, rgba(6,66,88,0) 0%, rgba(19, 39, 47, 0.9725490196) 93%);
-            padding: 10px;
-        }
-      }
+<style lang='scss' scoped>
+.congestion {
+  width: 100%;
+  position: relative;
 
-    .board{
-      height:100px;
-      width: 100%;
-      padding:10px 20px;
-      background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%);
-      border-radius: 5px 5px 5px 5px;
-      opacity: 1;
+  .body {
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+    font-size: 14px;
+
+    >div {
+      width: 33%;
+      height: 470px;
+      background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%);
       border: 1px solid;
-      border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1;
+      border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1;
+    }
+
+    :nth-child(1) {
+      margin-right: 6px;
+    }
+
+    :nth-child(2) {
+      margin-left: 6px;
+      margin-right: 6px;
+    }
+
+    :nth-child(3) {
+      margin-left: 6px;
+    }
+
+    .btnChart {
+      height: 330px;
+      width: 90%;
+      margin: 95px auto 0;
+    }
+
+  }
+
+  .board {
+    height: 100px;
+    width: 100%;
+    position: absolute;
+    top: 30px;
+    padding: 18px 20px;
+    // background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%);
+    border-radius: 5px 5px 5px 5px;
+    opacity: 1;
+    // border: 1px solid;
+    // border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: column;
+
+
+    .searchPanel {
       display: flex;
-      justify-content: space-between;
+
       align-items: center;
-      flex-direction: column;
+      height: 40px;
+      width: 100%;
+      font-size: 14px;
+      margin-top: 10px;
 
-  
-      .searchPanel{
-        display: flex;
-      
-        align-items: center;
-        height: 40px;
-        width:100%;
-        font-size: 14px;
-        margin-top: 10px;
-    div{
-      white-space: nowrap;
-      margin-right: 4px;
-    }
-    .inputZh{
-      width: 47px;
-      ::v-deep{
-        .el-input__inner{
-          background-color: #064258 !important;
-          border-width: 0px !important;
+      div {
+        white-space: nowrap;
+        margin-right: 4px;
+      }
+
+      .inputZh {
+        width: 47px;
+
+        ::v-deep {
+          .el-input__inner {
+            background-color: #064258 !important;
+            border-width: 0px !important;
+          }
         }
       }
-    }
-    .inputJl{
-      margin-left: 5px;
-      margin-right: 10px;
-    }
-    .selectRoad{
-      width:89px;
-      border:1px solid #00B3CC;
-      ::v-deep{
-        .el-input__inner{
-          background-color: #064258 !important;
-          border-width: 0px !important;
+
+      .inputJl {
+        margin-left: 5px;
+        margin-right: 10px;
+      }
+
+      .selectRoad {
+        width: 100px;
+        border: 1px solid #00B3CC;
+
+        ::v-deep {
+          .el-input__inner {
+            background-color: #064258 !important;
+            border-width: 0px !important;
+          }
         }
       }
-    }
-    .btnSearch{
-      background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);
-      margin-left: 10px;
-      border-color: transparent;
-    }
-    .btnReset{
-      background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);;
-      border-color: transparent;
-      color: white;
-    }
-   }
 
+      .btnSearch {
+        background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);
+        margin-left: 10px;
+        border-color: transparent;
+      }
+
+      .btnReset {
+        background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);
+        ;
+        border-color: transparent;
+        color: white;
+      }
     }
+
   }
-      .charts {
-        height:100px;
-        width: 100%;
-      }
-  
-  </style>
+}
+
+.charts {
+  height: 100px;
+  width: 100%;
+}
+</style>
   
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/progressBar.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/progressBar.vue
index 6a7c89d1..88b6925c 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/progressBar.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/progressBar.vue
@@ -1,77 +1,79 @@
 <template>
     <div class='congestion'>
-       <div :style="{width: dataList.length * 300}" >
-        <div :class="selectIndex == index?selectLine < 1?'item action Abefore':'item action Aafter':selectIndex + selectLine == index?selectLine < 1?'item action Aafter':'item action Abefore':'item'" v-for="(item,index) in dataList"   :key="index"  >
-            <i class="after" @click="selectItem(index,-1, dataList[index - 1])"></i>
-            <i class="before" @click="selectItem(index,+1,item)" ></i>
-            <span></span>
-            <div>{{ item.title }}</div>
+        <div :style="{ width: dataList.length * 300 }">
+            <div :class="selectIndex == index ? selectLine < 1 ? 'item action Abefore' : 'item action Aafter' : selectIndex + selectLine == index ? selectLine < 1 ? 'item action Aafter' : 'item action Abefore' : 'item'"
+                v-for="(item, index) in dataList" :key="index">
+                <i class="after" @click="selectItem(index, -1, dataList[index - 1])"></i>
+                <i class="before" @click="selectItem(index, +1, item)"></i>
+                <span></span>
+                <div>{{ item.title }}</div>
+            </div>
         </div>
-        </div> 
     </div>
-  </template>
+</template>
   
-  <script>
-import { number } from 'echarts';
+<script>
 
-
-  export default {
+export default {
     name: 'ProgressBar',
     components: {
     },
-    props:{
-        dataList:{
-            type:Array,
+    props: {
+        dataList: {
+            type: Array,
             default: () => {
                 return []
             }
         },
+        selectIndex: {
+            type: Number,
+            default: 1
+        }
     },
     data() {
-      return {
-        selectIndex:0,
-        selectLine:-1,
-      }
+        return {
+            // selectIndex: 0,
+            selectLine: -1,
+        }
     },
-  
     created() {
-      
+
     },
     methods: {
-        selectItem(index,num,item){
+        selectItem(index, num, item) {
             this.selectIndex = index;
             this.selectLine = num;
-            if (  item )
-            this.$emit("selectItem",item);
+            if (item)
+                this.$emit("selectItem", item);
         }
     },
     mounted() {
-      
+
     },
-  }
-  </script>
+}
+</script>
   
-  <style lang='scss' scoped>
-  .congestion {
+<style lang='scss' scoped>
+.congestion {
     width: 100%;
-    height:35px;
+    height: 35px;
     display: inline-flex;
     flex-direction: row;
 
-    > div {
+    >div {
         position: relative;
         width: 100%;
-        height:35px;
+        height: 35px;
         display: inline-flex;
-        flex-direction: row;  
+        flex-direction: row;
 
         >.item .after {
             position: absolute;
             display: inline-flex;
-            left:0px;
-            top:-5px;
-            width:45px !important;
-            height:35px !important;
+            left: 0px;
+            top: -5px;
+            width: 45px !important;
+            height: 35px !important;
             background-color: transparent;
             cursor: pointer;
         }
@@ -80,20 +82,20 @@ import { number } from 'echarts';
             content: "";
             position: absolute;
             display: inline-flex;
-            left:0px;
-            top:8px;
-            width:45px !important;
-            height:3px !important;
+            left: 0px;
+            top: 8px;
+            width: 45px !important;
+            height: 3px !important;
             background-color: #C7C7C7;
         }
 
         >.item .before {
             position: absolute;
             display: inline-flex;
-            right:0px;
-            top:-5px;
-            width:45px;
-            height:35px;
+            right: 0px;
+            top: -5px;
+            width: 45px;
+            height: 35px;
             background-color: transparent;
             cursor: pointer;
         }
@@ -102,96 +104,96 @@ import { number } from 'echarts';
             content: "";
             position: absolute;
             display: inline-flex;
-            left:0px;
-            top:8px;
-            width:45px !important;
-            height:3px !important;
+            left: 0px;
+            top: 8px;
+            width: 45px !important;
+            height: 3px !important;
             background-color: #C7C7C7;
         }
 
         .item.action .after::after {
-            background-color: #72FDC9 ;
+            background-color: #72FDC9;
         }
 
-        .item.action.Aafter  .after::after{
-            background-color: #C7C7C7  !important;
+        .item.action.Aafter .after::after {
+            background-color: #C7C7C7 !important;
         }
 
-       > .item.action.Aafter .before::after {
-            background-color: #72FDC9 ;
+        >.item.action.Aafter .before::after {
+            background-color: #72FDC9;
         }
 
-        > .item.action.Abefore .after::after {
-            background-color: #72FDC9 ;
+        >.item.action.Abefore .after::after {
+            background-color: #72FDC9;
         }
 
-        > .bef::before {
+        >.bef::before {
             background-color: #72FDC9 !important;
         }
 
-        > .aft::after {
+        >.aft::after {
             background-color: #72FDC9 !important;
         }
 
-        > .item.action span {
-            background-color: #72FDC9 ;
+        >.item.action span {
+            background-color: #72FDC9;
             cursor: pointer;
         }
 
-        > .item.action span::after {
-            border-color: #72FDC9 ;
+        >.item.action span::after {
+            border-color: #72FDC9;
         }
 
-        > .action div {
-            color:#72FDC9 !important;
+        >.action div {
+            color: #72FDC9 !important;
         }
-        
+
 
         >.item {
             position: relative;
             width: 113px;
-            height:35px;
+            height: 35px;
             display: inline-flex;
             flex-direction: column;
             justify-items: center;
-           
+
 
             >span {
                 position: absolute;
-                display:inline-flex;
+                display: inline-flex;
                 width: 9px;
                 height: 9px;
                 background: #C7C7C7;
                 border-radius: 50%;
                 opacity: 1;
-                left:53px;
+                left: 53px;
             }
 
             >div {
                 position: relative;
-                display:inline-flex;
-                width:100%;
+                display: inline-flex;
+                width: 100%;
                 align-items: center;
                 justify-content: center;
                 top: 5px;
-                margin-top:10px;
-                color:#C7C7C7;
+                margin-top: 10px;
+                color: #C7C7C7;
             }
 
             >span::after {
                 content: "";
                 position: absolute;
-                display:inline-flex;
+                display: inline-flex;
                 width: 15px;
                 height: 15px;
-                border:1px solid #C7C7C7;
+                border: 1px solid #C7C7C7;
                 border-radius: 50%;
                 opacity: 1;
-                top:-3.5px;
-                left:-3px;
+                top: -3.5px;
+                left: -3px;
             }
         }
     }
-  }
-  </style>
+}
+</style>
   
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/assets/charts.js
index 2fdc8690..734b892f 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/assets/charts.js
@@ -1,175 +1,174 @@
 let data = [{
-   average:30,
-   typeName:'视频识别',
-   percent:0.2
-},{
-   average:25,
-   typeName:'雷达识别',
-   percent:0.25
-},{
-   average:15,
-   typeName:'锥桶',
-   percent:0.08
-},{
-   average:30,
-   typeName:'护栏碰撞',
-   percent:0.14
+  average: 30,
+  typeName: '视频识别',
+  percent: 0.2
+}, {
+  average: 25,
+  typeName: '雷达识别',
+  percent: 0.25
+}, {
+  average: 15,
+  typeName: '锥桶',
+  percent: 0.08
+}, {
+  average: 30,
+  typeName: '护栏碰撞',
+  percent: 0.14
 }]
 
 window.mainData = data;
 
-let chartData = [],lengData=[], colorList = ['#006EDF', '#00FF00', '#FFC30D', '#FF8400', '#1DA7FF','#2967EA'];
+let chartData = [], lengData = [], colorList = ['#006EDF', '#00FF00', '#FFC30D', '#FF8400', '#1DA7FF', '#2967EA'];
 for (let i = 0; i < data.length; i++) {
-   chartData.push({
-      value: data[i].average,
-      name: data[i].typeName,
-      percent: data[i].percent,
-      color: colorList[i]
-   })
-   lengData.push({
-      name: data[i].typeName,
-      color: colorList[i]
-   })
+  chartData.push({
+    value: data[i].average,
+    name: data[i].typeName,
+    percent: data[i].percent,
+    color: colorList[i]
+  })
+  lengData.push({
+    name: data[i].typeName,
+    color: colorList[i]
+  })
 }
 
-let a = chartData.map(t=>{
-   t.value = parseInt(t.value)
-   return t
+let a = chartData.map(t => {
+  t.value = parseInt(t.value)
+  return t
 })
 const sum = a.reduce((per, cur) => per + cur.value, 0);
 const gap = (1 * sum) / 100;
 const pieData1 = [];
 const gapData = {
-   name: "",
-   value: gap,
-   itemStyle: {
-      color: "transparent",
-   },
+  name: "",
+  value: gap,
+  itemStyle: {
+    color: "transparent",
+  },
 };
 let total = 0;
 chartData.forEach((item) => {
-   total += parseInt(item.value);
+  total += parseInt(item.value);
 });
 
 for (let i = 0; i < chartData.length; i++) {
-   // 第一圈数据
-   pieData1.push({
-      ...chartData[i],
-   });
-   pieData1.push(gapData);
+  // 第一圈数据
+  pieData1.push({
+    ...chartData[i],
+  });
+  pieData1.push(gapData);
 }
-console.log(pieData1);
 
 var options = {
-   tooltip: {
-      confine: true,
-      textStyle: {
-         fontSize: 10, // 字体大小
-         color:'#333',
-      },
-      color:'#333',
-      backgroundColor:"#ffffff",
-   },
-   title:{   //圆环中间内容
-      text: '99% ',
-      subtext: '  占比',
-      left:"22%",
-      top:"40%",
-      textStyle:{
-         color:"#fff",
-         fontSize:21,
-         align:"center"
-      },
-      subtextStyle: {
-         fontSize: 13,
-         fontWeight: '400',
-         top: 0,
-         marginLeft:20,
-         align:"center",
-         color:'#fff'
-      },
-   },
-   color:['#5973FF', '#14d8b4', '#FFC30D', '#61D8FF', '#1DA7FF','#2967EA'],
-   legend: {
-      top:'20%',
-      right: 0,
-      orient: "vertical", //改变排列方式
-      icon: "circle", //改变legend小图标形状
-      itemGap: 15, // 设置legend的间距
-      itemWidth: 10, // 设置宽度
-      itemHeight: 15, // 设置高度
-      textStyle: {
-         fontSize: 12,
-         color: "#fff",
-          rich:{
-             a:{
-                 fontSize: 12,
-             },
-                b:{
-                    fontSize: 12,
-                    padding: 5,
-                    marginLeft:5,
-                    color:"#37E7FF",
-                  }
-      },
-      },
-      itemStyle: {
-         borderColor: "transparent",
-      },
-      data: lengData,
-      formatter: function(name){
-        let total = 0
-            let target
-            if ( !mainData ) return "";
-            for (let i = 0; i < data.length; i++) {
-              if ( window.mainData[i] ) {
-                total += window.mainData[i].value
-                if ( window.mainData[i].name === name) {
-                  target = window.mainData[i].value
-                }
-              }
-            }
-            var arr = [
-              '{a|' + name + '}',
-              '{b|' + ((target / total) * 100).toFixed(2) + '%}',
-            ]
-            return arr.join('  ')
+  tooltip: {
+    confine: true,
+    textStyle: {
+      fontSize: 10, // 字体大小
+      color: '#333',
+    },
+    color: '#333',
+    backgroundColor: "#ffffff",
+  },
+  title: {   //圆环中间内容
+    text: '99% ',
+    subtext: '  占比',
+    left: "22%",
+    top: "40%",
+    textStyle: {
+      color: "#fff",
+      fontSize: 21,
+      align: "center"
+    },
+    subtextStyle: {
+      fontSize: 13,
+      fontWeight: '400',
+      top: 0,
+      marginLeft: 20,
+      align: "center",
+      color: '#fff'
+    },
+  },
+  color: ['#5973FF', '#14d8b4', '#FFC30D', '#61D8FF', '#1DA7FF', '#2967EA'],
+  legend: {
+    top: '20%',
+    right: 0,
+    orient: "vertical", //改变排列方式
+    icon: "circle", //改变legend小图标形状
+    itemGap: 15, // 设置legend的间距
+    itemWidth: 10, // 设置宽度
+    itemHeight: 15, // 设置高度
+    textStyle: {
+      fontSize: 12,
+      color: "#fff",
+      rich: {
+        a: {
+          fontSize: 12,
+        },
+        b: {
+          fontSize: 12,
+          padding: 5,
+          marginLeft: 5,
+          color: "#37E7FF",
+        }
       },
-     
-   },
-   series: [
+    },
+    itemStyle: {
+      borderColor: "transparent",
+    },
+    data: lengData,
+    formatter: function (name) {
+      let total = 0
+      let target = 0
+      if (!mainData) return "";
+      for (let i = 0; i < data.length; i++) {
+        if (window.mainData[i]) {
+          total += window.mainData[i].percent
+          if (window.mainData[i].typeName === name) {
+            target = window.mainData[i].percent
+          }
+        }
+      }
+      var arr = [
+        '{a|' + name + (name.length == 4 ? '}' : '}      '),
+        '{b|' + ((target / total) * 100).toFixed(2) + '%}',
+      ]
+      return arr.join('  ')
+    },
+
+  },
+  series: [
     {
       name: '',
       avoidLabelOverlap: true,//防止标签重叠
       type: 'pie',
       radius: ['63%', '73%'], //大小
-      center : ['30%','50%'], //位置
+      center: ['30%', '50%'], //位置
       hoverAnimation: true,
       itemStyle: {
-      normal: {
-               borderWidth: 6,
-               shadowBlur: 10,
-               borderRadius: 10, // 圆角
-            },
+        normal: {
+          borderWidth: 6,
+          shadowBlur: 10,
+          borderRadius: 10, // 圆角
+        },
       },
       labelLine: {
-        show:false,
+        show: false,
         lineStyle: {
           width: 3,
         },
         normal: {
           length: 30, // 指示线长度
-          length2:80
+          length2: 80
         },
       },
       data: pieData1,
       label: {
         show: false,
-        formatter: function(params){ },
+        formatter: function (params) { },
         textStyle: {
           fontSize: '18',
           fontWeight: 'bold',
-          color:'#fff'
+          color: '#fff'
         },
         rich: {
           color0: {
@@ -187,8 +186,8 @@ var options = {
           color4: {
             color: '#1DA7FF',
           },
-          color5:{
-            color:'#2967EA'
+          color5: {
+            color: '#2967EA'
           }
         },
       },
@@ -196,7 +195,7 @@ var options = {
         show: false,
       },
     },
-      {
+    {
       type: 'gauge',
       zlevel: 0,
       splitNumber: 360,
@@ -215,7 +214,7 @@ var options = {
       },
       splitLine: {
         show: true,
-        length:68,
+        length: 68,
         lineStyle: {
           width: 2,
           color: '#277DCA',
@@ -247,7 +246,7 @@ var options = {
       },
       splitLine: {
         show: true,
-        length:2,
+        length: 2,
         lineStyle: {
           width: 1,
           color: '#017383',
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/index.vue
index f8ed933e..2d3a1c8e 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/index.vue
@@ -1,102 +1,118 @@
 <template>
-    <div @resize="changeReisze" class='congestion'>
-      <WgtTitle :title="'感知事件源分析'"></WgtTitle>
-      <div class="board">
-        <div class="charts keep-ratio " id="eventSource"></div>
-       </div>
+  <div @resize="changeReisze" class='congestion'>
+    <WgtTitle :title="'感知事件源分析'"></WgtTitle>
+    <div class="board">
+      <div class="charts keep-ratio " id="eventSource"></div>
     </div>
-  </template>
+  </div>
+</template>
   
-  <script>
-  
-  import WgtTitle from '../../../widgets/title'
-  import * as echarts from "echarts";
-  import chartsStatistics from "./assets/charts";
-  import { getWarningSourceGroup } from '../../../../../../../api/event/perceiveEvent';
-
-  export default {
-    name: 'EventSource',
-    components: {
-      WgtTitle
-    },
-    data() {
-      return {
-       
-      }
-    },
-  
-    created() {
-      
-    },
-    methods: {
-       changeReisze(){
-          this.myChart.resize();
-       },
+<script>
+
+import WgtTitle from '../../../widgets/title'
+import * as echarts from "echarts";
+import chartsStatistics from "./assets/charts";
+import { getWarningSourceGroup } 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()
+}
+
+export default {
+  name: 'EventSource',
+  components: {
+    WgtTitle
+  },
+  data() {
+    return {
+
+    }
+  },
+
+  created() {
+
+  },
+  methods: {
+    changeReisze() {
+      this.myChart.resize();
     },
-    mounted() {
-      setTimeout(() => {
-        let currentIndex = -1;
-        this.$nextTick(() => {
-          var myChart = echarts.init(document.getElementById('eventSource'));
-
-          getWarningSourceGroup().then((res)=>{
-            if ( res.code == 200 ) {
-              console.log("=================",res);
-              let data = res.data.warningSourceList;
-              let total =  res.data.total;
+  },
+  mounted() {
+    setTimeout(() => {
+      this.$nextTick(() => {
+        var myChart = echarts.init(document.getElementById('eventSource'));
+
+        getWarningSourceGroup().then((res) => {
+          if (res.code == 200) {
+            let data = res.data.warningSourceList;
+            let total = res.data.total;
+            if (data.length > 0) {
               let warningTypes = [];
               let number = [];
-              data.forEach(it=>{
-                  if ( it.warningSource == 1) {
-                    warningTypes.push('交通拥堵');
-                  }
-                  if ( it.warningSource == 2) {
-                    warningTypes.push('行人');
-                  }
-                  if ( it.warningSource == 3) {
-                    warningTypes.push('非机动车');
-                  }
-                  if ( it.warningSource == 4) {
-                    warningTypes.push('停车');
-                  }
-                  if ( it.warningSource == 5) {
-                    warningTypes.push('倒车/逆行');
-                  }
-                  if ( it.warningSource == 6) {
-                    warningTypes.push('烟火');
-                  }
-                  if ( it.warningSource == 7) {
-                    warningTypes.push('撒落物');
-                  }
-                  if ( it.warningSource == 8) {
-                    warningTypes.push('异常天气');
-                  }
-                  if ( it.warningSource == 9) {
-                    warningTypes.push('护栏碰撞');
-                  }
-
-                  number.push(it.number);
+              data.forEach((it, index )=> {
+                if (it.warningSource == 1) {
+                  warningTypes.push('交通拥堵');
+                }
+                if (it.warningSource == 2) {
+                  warningTypes.push('行人');
+                }
+                if (it.warningSource == 3) {
+                  warningTypes.push('非机动车');
+                }
+                if (it.warningSource == 4) {
+                  warningTypes.push('停车');
+                }
+                if (it.warningSource == 5) {
+                  warningTypes.push('倒车/逆行');
+                }
+                if (it.warningSource == 6) {
+                  warningTypes.push('烟火');
+                }
+                if (it.warningSource == 7) {
+                  warningTypes.push('撒落物');
+                }
+                if (it.warningSource == 8) {
+                  warningTypes.push('异常天气');
+                }
+                if (it.warningSource == 9) {
+                  warningTypes.push('护栏碰撞');
+                }
+
+                number.push(it.number);
+                // drawRoundRect(context, 241, 37 + (index * 27), 134, 20, 12, gr);
               })
-              let  colorList = ['#006EDF', '#00FF00', '#FFC30D', '#FF8400', '#1DA7FF','#2967EA'];
+              let colorList = ['#006EDF', '#00FF00', '#FFC30D', '#FF8400', '#1DA7FF', '#2967EA'];
               let lengData = [];
               let mainData = [];
               let mainCount = 0;
-              for (let j =0;j < number.length;j++){
-                mainCount+= number[j];
+              for (let j = 0; j < number.length; j++) {
+                mainCount += number[j];
               }
-              for (let i = 0;i < warningTypes.length;i++){
+              for (let i = 0; i < warningTypes.length; i++) {
                 let it = warningTypes[i];
-                  lengData.push({
-                    name:it,
-                    color:colorList[i],
-                    value:number[i],
-                  });
-                  mainData.push({
-                    name:it,
-                    color:colorList[i],
-                    value:number[i],
-                    percent: number[i]/mainCount
-                  })
+                lengData.push({
+                  name: it,
+                  color: colorList[i],
+                  value: number[i],
+                });
+                mainData.push({
+                  name: it,
+                  color: colorList[i],
+                  value: number[i],
+                  percent: number[i] / mainCount
+                })
               }
               window.mainData = mainData;
               //console.log("--------------",mainData);
@@ -104,57 +120,80 @@
               chartsStatistics.series[0].data = mainData;
 
               myChart.on('mouseover', (params) => {
-                    if (params.componentType == 'graphic') {
-                      return
-                    }
-                    console.log(params);
-                    chartsStatistics.title.text = params.percent  + "%";
-                    chartsStatistics.title.subtext = params.data.name;
-                    chartsStatistics.title.left = "22%";
-                    myChart.setOption(chartsStatistics);
-                })
+                if (params.componentType == 'graphic') {
+                  return
+                }
+                chartsStatistics.title.text = params.percent + "%";
+                chartsStatistics.title.subtext = params.data.name;
+                chartsStatistics.title.left = "22%";
+                myChart.setOption(chartsStatistics);
+              })
 
-                // 用户鼠标移出时，重新开始自动切换
-                myChart.on('mouseout', (params) => {
-                    chartsStatistics.title.text = total;
-                    chartsStatistics.title.subtext = "总数";
-                    chartsStatistics.title.left = "25%";
-                    myChart.setOption(chartsStatistics);
-                })
+              // 用户鼠标移出时，重新开始自动切换
+              myChart.on('mouseout', (params) => {
+                chartsStatistics.title.text = total;
+                chartsStatistics.title.subtext = "总数";
+                chartsStatistics.title.left = "25%";
+                myChart.setOption(chartsStatistics);
+              })
             }
-            myChart.setOption(chartsStatistics);
-          })
-          
-          this.myChart = myChart;
+          }
+          myChart.setOption(chartsStatistics);
+        })
+
+        const domMap = document.getElementById("eventSource");
+        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');
+
+        // 填充渐变颜色
+        let gr = context.createLinearGradient(247, 63, 450, 0);
+        gr.addColorStop(1, 'rgba(92,197,255,0)');
+        gr.addColorStop(0, 'rgba(92,197,255,0.3)');
+        // drawRoundRect(context, 241, 37, 134, 20, 12, gr);
+        // drawRoundRect(context, 241, 64, 134, 20, 12, gr);
+        // drawRoundRect(context, 241, 91, 134, 20, 12, gr);
+        // drawRoundRect(context, 241, 118, 134, 20, 12, gr);
+
+        context.lineWidth = 1; // 设置线段宽度
+
+
+
+        this.myChart = myChart;
 
-        });
       });
-    },
-  }
-  </script>
+    });
+  },
+}
+</script>
   
-  <style lang='scss' scoped>
-  .congestion {
+<style lang='scss' scoped>
+.congestion {
+  width: 100%;
+
+  .board {
+    height: 200px;
     width: 100%;
-    .board{
-      height:200px;
-      width: 100%;
-      padding: 40px 40px;
-      background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%);
-      border-radius: 5px 5px 5px 5px;
-      opacity: 1;
-      border: 1px solid;
-      border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-     
-    }
+    padding: 40px 40px;
+    background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%);
+    border-radius: 5px 5px 5px 5px;
+    opacity: 1;
+    border: 1px solid;
+    border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
   }
-      .charts {
-        height:180px;
-        width: 100%;
-      }
-  
-  </style>
+}
+
+.charts {
+  height: 180px;
+  width: 100%;
+}
+</style>
   
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/monthStatistics/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/monthStatistics/assets/charts.js
index e6b2f002..c7b9fe97 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/monthStatistics/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/monthStatistics/assets/charts.js
@@ -30,38 +30,38 @@ var options = {
          //    'image://data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTg2NDg1MzkzMjI2IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ3MzUiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNTEyIDBDMjI2Ljc0Mjg1NyAwIDAgMjI2Ljc0Mjg1NyAwIDUxMnMyMjYuNzQyODU3IDUxMiA1MTIgNTEyIDUxMi0yMjYuNzQyODU3IDUxMi01MTItMjI2Ljc0Mjg1Ny01MTItNTEyLTUxMnogbTAgODc3LjcxNDI4NmMtMjA0LjggMC0zNjUuNzE0Mjg2LTE2MC45MTQyODYtMzY1LjcxNDI4Ni0zNjUuNzE0Mjg2czE2MC45MTQyODYtMzY1LjcxNDI4NiAzNjUuNzE0Mjg2LTM2NS43MTQyODYgMzY1LjcxNDI4NiAxNjAuOTE0Mjg2IDM2NS43MTQyODYgMzY1LjcxNDI4Ni0xNjAuOTE0Mjg2IDM2NS43MTQyODYtMzY1LjcxNDI4NiAzNjUuNzE0Mjg2eiIgZmlsbD0iIzRBQkRDRiIgcC1pZD0iNDczNiI+PC9wYXRoPjxwYXRoIGQ9Ik01MTIgNTEybS0zNjUuNzE0Mjg2IDBhMzY1LjcxNDI4NiAzNjUuNzE0Mjg2IDAgMSAwIDczMS40Mjg1NzIgMCAzNjUuNzE0Mjg2IDM2NS43MTQyODYgMCAxIDAtNzMxLjQyODU3MiAwWiIgZmlsbD0iI0ZGRkZGRiIgcC1pZD0iNDczNyI+PC9wYXRoPjwvc3ZnPg==',
          handleStyle: {
             color: '#0BDADA',
-            borderWidth :0,
+            borderWidth: 0,
          },
-         moveHandleStyle:{
+         moveHandleStyle: {
             color: 'transparent',
-            borderWidth:0,
-            opacity:0,
+            borderWidth: 0,
+            opacity: 0,
          },
-         selectedDataBackground:{
+         selectedDataBackground: {
             color: 'transparent',
-           areaStyle: {
-              opacity: 0
-           },
-           lineStyle: {
-              opacity: 0
-           }
+            areaStyle: {
+               opacity: 0
+            },
+            lineStyle: {
+               opacity: 0
+            }
          },
-         backgroundColor:new echarts.graphic.LinearGradient(
+         backgroundColor: new echarts.graphic.LinearGradient(
             0, 0, 1, 0,
             [{
-              offset: 0,
-              color: 'rgba(71, 180, 124, 0.70)'
+               offset: 0,
+               color: 'rgba(71, 180, 124, 0.70)'
             },
             {
-              offset: 1,
-              color: 'rgba(71, 180, 124, 0)'
+               offset: 1,
+               color: 'rgba(71, 180, 124, 0)'
             }
             ],
             false
-          ),
+         ),
          //  shadowColor: 'rgba(255, 214, 62, 0.10)',
          //  shadowBlur: 10
-         
+
          fillerColor: 'transparent',
          borderColor: 'transparent',
          textStyle: {
@@ -175,9 +175,9 @@ var options = {
          showSymbol: false,
          smooth: true, // 是否曲线
          name: "", // 图例对应类别
-         data: [400, 600, 700, 200, 500, 700, 900,400, 600, 700, 200, 500, 700, 900,400, 600, 700, 200, 500, 700, 900,400, 600, 700, 200, 500, 700, 900], // 纵坐标数据
-         lineStyle :{
-            color:"#39B1FF"
+         data: [400, 600, 700, 200, 500, 700, 900, 400, 600, 700, 200, 500, 700, 900, 400, 600, 700, 200, 500, 700, 900, 400, 600, 700, 200, 500, 700, 900], // 纵坐标数据
+         lineStyle: {
+            color: "#39B1FF"
          },
          areaStyle: {
             // 区域颜色
@@ -204,14 +204,14 @@ var options = {
                   },
                   {
                      offset: 1,
-                     opacity:0.01,
+                     opacity: 0.01,
                      color: '#39b1ff01' // 100% 处的颜色
                   }
                ]
             },
          },
       },
-     
+
    ],
 };
 
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/monthStatistics/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/monthStatistics/index.vue
index 62497e7d..9bd095b6 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/monthStatistics/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/monthStatistics/index.vue
@@ -1,96 +1,97 @@
 <template>
-    <div class='congestion'>
-      <WgtTitle :title="'近一月感知事件时段分布统计'"></WgtTitle>
-      <div class="board">
-        <div class="charts keep-ratio " id="monthStatistics"></div>
-       </div>
+  <div class='congestion'>
+    <WgtTitle :title="'近一月感知事件时段分布统计'"></WgtTitle>
+    <div class="board">
+      <div class="charts keep-ratio " id="monthStatistics"></div>
     </div>
-  </template>
+  </div>
+</template>
   
-  <script>
-  
-  import WgtTitle from '../../../widgets/title'
-  import * as echarts from "echarts";
-  import chartsStatistics from "./assets/charts";
-  import { getDailyCumulativeMonth } from '../../../../../../../api/event/perceiveEvent';
+<script>
 
-  export default {
-    name: 'MonthStatistics',
-    components: {
-      WgtTitle
-    },
-    data() {
-      return {
-       
-      }
-    },
-  
-    created() {
-      
-    },
-    methods: {
-  
-    },
-    mounted() {
-      setTimeout(() => {
-        this.$nextTick(() => {
-          var myChart = echarts.init(document.getElementById('monthStatistics'));
-          getDailyCumulativeMonth().then((res)=>{
-            console.log(res);
-            if ( res.code == 200 ) {
-              let data = res.data;
-              let timeData = [];
-              let datasN = [];
-              for (var i = 0; i < 24;i++){
-                let k = 0;
-                 for (var j = 0;j < data.length;j++){
-                    let it = data[j];
-                      if ( it.time == i ) {
-                       timeData.push( i +"点至"+ (i +1)+"点");
-                       datasN.push(it.number);
-                       k++;
-                    }
-                 }
-                 if ( k == 0 ) {
-                   timeData.push( i +"点至"+ (i +1)+"点");
-                   datasN.push(0);
-                 }
+import WgtTitle from '../../../widgets/title'
+import * as echarts from "echarts";
+import chartsStatistics from "./assets/charts";
+import { getDailyCumulativeMonth } from '../../../../../../../api/event/perceiveEvent';
+
+export default {
+  name: 'MonthStatistics',
+  components: {
+    WgtTitle
+  },
+  data() {
+    return {
+
+    }
+  },
+
+  created() {
+
+  },
+  methods: {
+
+  },
+  mounted() {
+    setTimeout(() => {
+      this.$nextTick(() => {
+        var myChart = echarts.init(document.getElementById('monthStatistics'));
+        getDailyCumulativeMonth().then((res) => {
+          console.log(res);
+          if (res.code == 200) {
+            let data = res.data;
+            let timeData = [];
+            let datasN = [];
+            for (var i = 0; i < 24; i++) {
+              let k = 0;
+              for (var j = 0; j < data.length; j++) {
+                let it = data[j];
+                if (it.time == i) {
+                  timeData.push(i + "点至" + (i + 1) + "点");
+                  datasN.push(it.number);
+                  k++;
+                }
+              }
+              if (k == 0) {
+                timeData.push(i + "点至" + (i + 1) + "点");
+                datasN.push(0);
               }
-              chartsStatistics.xAxis.data =  timeData;
-              chartsStatistics.series[0].data = datasN;
-              
-              myChart.setOption(chartsStatistics);
             }
-           
-          });
+            chartsStatistics.xAxis.data = timeData;
+            chartsStatistics.series[0].data = datasN;
+
+            myChart.setOption(chartsStatistics);
+          }
+
         });
       });
-    },
-  }
-  </script>
+    });
+  },
+}
+</script>
   
-  <style lang='scss' scoped>
-  .congestion {
+<style lang='scss' scoped>
+.congestion {
+  width: 100%;
+
+  .board {
+    height: 200px;
     width: 100%;
-    .board{
-      height:200px;
-      width: 100%;
-      padding: 0px 20px;
-      background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%);
-      border-radius: 5px 5px 5px 5px;
-      opacity: 1;
-      border: 1px solid;
-      border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-     
-    }
+    padding: 0px 20px;
+    background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%);
+    border-radius: 5px 5px 5px 5px;
+    opacity: 1;
+    border: 1px solid;
+    border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
   }
-      .charts {
-        height:180px;
-        width: 100%;
-      }
-  
-  </style>
+}
+
+.charts {
+  height: 180px;
+  width: 100%;
+}
+</style>
   
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/assets/charts.js
index d3b60046..f12e058c 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/assets/charts.js
@@ -11,115 +11,114 @@ let dataZoomMove = {
    end: 4
 }
 var options = {
-      
-      grid: {
-         containLabel: true,
-         // 边距自行修改
-         bottom: '0%',
-         left: '0%',
-         top: '20%',
-         right: '10%',
+   grid: {
+      containLabel: true,
+      // 边距自行修改
+      bottom: '0%',
+      left: '0%',
+      top: '2%',
+      right: '15%',
+   },
+   xAxis: {
+      type: 'value',
+      axisLabel: {
+         show: false
       },
-      xAxis: {
-         type: 'value',
+      axisLine: {
+         show: false,
+      },
+      axisTick: {
+         show: false,
+      },
+      splitLine: {
+         show: false,
+      },
+   },
+   yAxis: [
+      {
+         type: 'category',
+         data: xdata.value,
+         inverse: true,
          axisLabel: {
-            show: false
+            fontSize: '14px',
+            inside: true,
+            verticalAlign: 'bottom',
+            color: '#fff',
+            padding: 10,
+            margin: -5,
+            formatter: function (value, index) {
+               // let index = xdata.value.indexOf(value);
+               return `{a|Top${index + 1}} {b|${value}}`
+            },
+            rich: {
+               a: {
+                  fontSize: '14px',
+               },
+
+               b: {
+                  fontSize: '14px',
+                  padding: [0, 0, 0, 70],
+               }
+            },
          },
          axisLine: {
             show: false,
          },
          axisTick: {
             show: false,
-         },
-         splitLine: {
-            show: false,
-         },
-      },
-      yAxis: [
-         {
-            type: 'category',
-            data: xdata.value,
-            inverse: true,
-            axisLabel: {
-               fontSize: '14px',
-               inside: true,
-               verticalAlign: 'bottom',
-               color:'#fff',
-               padding:10,
-               margin:-5,
-               formatter: function (value) {
-                  let index = xdata.value.indexOf(value);
-                  return `{a|Top${index + 2}} {b|${value}}`
-               },
-               rich: {
-                  a: {
-                     fontSize: '14px',
+         }
+      }
+   ],
+   series: [
+      {
+         data: sdata.value,
+         type: 'bar',
+         barWidth: 8,
+         itemStyle: {
+            borderRadius: 40,
+            color: {
+               type: 'linear',
+               x: 0,
+               y: 0,
+               x2: 1,
+               y2: 0,
+               colorStops: [
+                  {
+                     offset: 0,
+                     color: '#1cd0f000', // 0% 处的颜色
                   },
-   
-                  b: {
-                     fontSize: '14px',
-                     padding: [0, 0, 0, 70],
-                  }
-               },
-            },
-            axisLine: {
-               show: false,
-            },
-            axisTick: {
-               show: false,
+                  {
+                     offset: 1,
+                     color: '#1cd0f0', // 100% 处的颜色
+                  },
+               ],
+               global: false, // 缺省为 false
             }
-         }
-      ],
-      series: [
-         {
-            data: sdata.value,
-            type: 'bar',
-            barWidth: 8,
-            itemStyle: {
-               borderRadius: 40,
-               color: {
-                  type: 'linear',
-                  x: 0,
-                  y: 0,
-                  x2: 1,
-                  y2: 0,
-                  colorStops: [
-                     {
-                        offset: 0,
-                        color: '#1cd0f000', // 0% 处的颜色
-                     },
-                     {
-                        offset: 1,
-                        color: '#1cd0f0', // 100% 处的颜色
-                     },
-                  ],
-                  global: false, // 缺省为 false
-               }
+         },
+         label: {
+            show: true,
+            position: 'right',
+            distance: -10,
+            data: sdata,
+            color: '#fff',
+            formatter: (c) => {
+               return `{a|}{b|${c.value}辆}`
             },
-            label: {
-               show: true,
-               position: 'right',
-               distance: -10,
-               data: sdata,
-               color:'#fff',
-               formatter: (c) => {
-                  return `{a|}{b|${c.value}辆}`
-               },
-               rich: {
-                  a: {
-                     widht: 20,
-                     height: 20,
-                     backgroundColor: {
-                        image: chartIcon
-                     },
+            rich: {
+               a: {
+                  widht: 20,
+                  height: 20,
+                  backgroundColor: {
+                     image: chartIcon
                   },
-                  b:{
-                     padding:[0,0,0,10]
-                  }
+               },
+               b: {
+                  padding: [0, 0, 0, 10]
                }
             }
          }
-      ]
+      }
+   ]
 }
 
 export default options;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/index.vue
index 27edd589..2dba7636 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/index.vue
@@ -1,111 +1,158 @@
 <template>
-    <div class='situation'>
-      <WgtTitle :title="'路段感知事件排名'"></WgtTitle>
-      <div class="board">
-        <!-- <div class="tag">
+  <div class="situation">
+    <WgtTitle :title="'路段感知事件排名'"></WgtTitle>
+    <div class="board">
+      <!-- <div class="tag">
           <div class="checked">路段车流量Top10</div>
           <div>断面交通量Top10</div>
         </div> -->
-        <div class="charts keep-ratio " id="situationEchartBox"></div>
-       </div>
+      <div class="charts keep-ratio" id="situationEchartBox"></div>
     </div>
-  </template>
-  
-  <script>
-  
-  import WgtTitle from '../../../widgets/title'
-  import * as echarts from "echarts";
-  import chartsStatistics from "./assets/charts";
-  import { getSectionPerceivedList } from '../../../../../../../api/event/perceiveEvent';
+  </div>
+</template>
 
-  export default {
-    name: 'Situation',
-    components: {
-      WgtTitle
-    },
-    data() {
-      return {
-       
-      }
-    },
-  
-    mounted() {
-      setTimeout(() => {
-        this.$nextTick(() => {
-          var myChart = echarts.init(document.getElementById('situationEchartBox'));
-         
-          getSectionPerceivedList({}).then((res)=>{
-             console.log(res);
-             if ( res.code == 200 ) {
-               let data = res.data;
-               let texts = [];
-               let datas = [];
+<script>
+import WgtTitle from "../../../widgets/title";
+import * as echarts from "echarts";
+import chartsStatistics from "./assets/charts";
+import { getSectionPerceivedList } from "../../../../../../../api/event/perceiveEvent";
 
-               data.forEach(it => {
-                  texts.push(it.sectionName);
-                  datas.push(it.number);
-               });
+export default {
+  name: "Situation",
+  components: {
+    WgtTitle,
+  },
+  data() {
+    return {};
+  },
 
-               chartsStatistics.yAxis[0].data = texts;
-               chartsStatistics.series[0].data = datas;
+  mounted() {
+    setTimeout(() => {
+      this.$nextTick(() => {
+        var myChart = echarts.init(
+          document.getElementById("situationEchartBox")
+        );
 
-               myChart.setOption(chartsStatistics);
-             }
-          });
+        getSectionPerceivedList({}).then((res) => {
+          console.log(res);
+          if (res.code == 200) {
+            let data = res.data;
 
-        
+            let texts = [];
+            let datas = [];
+            //默认显示数值
+            if (data.length <= 0) {
+              data = [
+                {
+                  sectionName: "华山北枢纽-济南虚",
+                  number: 32774,
+                },
+                {
+                  sectionName: "东客站虚-华山北枢纽",
+                  number: 30067,
+                },
+                {
+                  sectionName: "小许家枢纽-东客站虚",
+                  number: 30057,
+                },
+                {
+                  sectionName: "临沂枣园枢纽-临沂虚",
+                  number: 28774,
+                },
+                {
+                  sectionName: "华山北枢纽-济南虚",
+                  number: 26021,
+                },
+                {
+                  sectionName: "华山北枢纽-济南虚",
+                  number: 24061,
+                },
+                {
+                  sectionName: "华山北枢纽-济南虚",
+                  number: 20150,
+                },
+                {
+                  sectionName: "华山北枢纽-济南虚",
+                  number: 20140,
+                },
+                {
+                  sectionName: "华山北枢纽-济南虚",
+                  number: 20050,
+                },
+                {
+                  sectionName: "华山北枢纽-济南虚",
+                  number: 20010,
+                },
+              ];
+            }
+            data.forEach((it) => {
+              texts.push(it.sectionName);
+              datas.push(it.number);
+            });
+
+            chartsStatistics.yAxis[0].data = texts;
+            chartsStatistics.series[0].data = datas;
+
+            myChart.setOption(chartsStatistics);
+          }
         });
       });
-    },
-    created() {
-      
-    },
-    methods: {
-  
-    }
+    });
+  },
+  created() {},
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.situation {
+  width: 100%;
+
+  .board {
+    height: 455px;
+    width: 100%;
+    padding: 10px 10px;
+    background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%);
+    border-radius: 5px 5px 5px 5px;
+    opacity: 1;
+    border: 1px solid;
+    border-image: linear-gradient(
+        360deg,
+        rgba(55, 231, 255, 0.3),
+        rgba(55, 231, 255, 0)
+      )
+      1 1;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-direction: column;
   }
-  </script>
-  
-  <style lang='scss' scoped>
-  .situation {
+
+  .charts {
+    // margin-top: -40px;
+    height: 450px;
     width: 100%;
-    .board{
-      height: 455px;
-      width: 100%;
-      padding: 0px 30px;
-      background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%);
-      border-radius: 5px 5px 5px 5px;
-      opacity: 1;
-      border: 1px solid;
-      border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1;
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-      flex-direction: column;
-    }
-    .charts {
-      margin-top: -40px;
-        height: 400px;
-        width: 100%;
+  }
+
+  .tag {
+    margin-top: 20px;
+    display: flex;
+    width: 100%;
+    justify-content: flex-start;
+
+    div {
+      width: 150px;
+      height: 25px;
+      line-height: 25px;
+      border-radius: 20px;
+      text-align: center;
+      background-color: #c87800;
+      margin-right: 10px;
     }
-    .tag{
-      margin-top: 20px;
-      display: flex;
-      width: 100%;
-      justify-content: flex-start;
-      div{
-        width: 150px;
-        height: 25px;
-        line-height: 25px;
-        border-radius: 20px;
-        text-align: center;
-        background-color: #C87800;
-        margin-right: 10px;
-      }
-      .checked{
-        background-color: #00B3CC;;
-      }
+
+    .checked {
+      background-color: #00b3cc;
     }
   }
-  </style>
-  
\ No newline at end of file
+}
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/assets/charts.js
index 59186783..95ace8f2 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/assets/charts.js
@@ -1,12 +1,13 @@
 
 /* 数据 */
 let nameList = ["大学城", "长清", "孝里", "安城", "平阴北", "平阴南", "东平", "梁山东", "嘉祥西"]; // 类别
-let valueList = [800, 520, 650, 950, 420, 600, 450, 720, 303 ]; // 人数
-var yList = [ "1000","800","轻度拥堵","基本畅通","畅通"]
+let valueList = [800, 520, 650, 950, 420, 600, 450, 720, 303]; // 人数
+// var yList = [ "1000","800","轻度拥堵","基本畅通","畅通"]
 /* 数据整合 */
+const minNumber = 0;
 let dataList = [];
 nameList.map((item, index) => {
-   if (index === 4) {
+   if (index === 3) {
       dataList.push({
          name: item,
          value: valueList[index],
@@ -32,7 +33,7 @@ nameList.map((item, index) => {
       dataList.push({
          name: item,
          value: valueList[index],
-         itemStyle:{
+         itemStyle: {
             borderRadius: 6
          }
       })
@@ -47,6 +48,11 @@ var options = {
       bottom: "0%",//下边距
       containLabel: true,
    },
+   tooltip: {
+      valueFormatter: function (value) {
+        return (value + minNumber).toFixed(2);
+      }
+    },
    xAxis: {
       type: 'category',
       data: nameList,
@@ -61,7 +67,7 @@ var options = {
       axisLabel: {
          show: true,
          color: '#B6E6FF',
-         fontSize:8,
+         fontSize: 8,
          fontFamily: 'Source Han Sans CN-Regular',
       },
    },
@@ -99,14 +105,14 @@ var options = {
    series: [{
       type: 'bar',
       data: dataList,
-      z:4,
+      z: 4,
       itemStyle: {
          color: {
             type: 'linear',
             x: 0,
             y: 0,
             x2: 0,
-            y2: 1, 
+            y2: 1,
             colorStops: [{
                offset: 0, color: '#0BA7DA' // 0% 处的颜色
             }, {
@@ -116,8 +122,9 @@ var options = {
          },
          borderRadius: [4, 4, 0, 0]
       },
-      barWidth:10,
-      label: {show:false,
+      barWidth: 10,
+      label: {
+         show: false,
       }
    },
    ]
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/index.vue
index 9d7eab39..3195d87b 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/index.vue
@@ -3,7 +3,7 @@
     <WgtTitle :title="'路段日感知事件'"></WgtTitle>
     <div class="board">
       <div class="charts keep-ratio " id="railwayDay"></div>
-     </div>
+    </div>
   </div>
 </template>
 
@@ -21,12 +21,12 @@ export default {
   },
   data() {
     return {
-     
+
     }
   },
 
   created() {
-    
+
   },
   methods: {
 
@@ -35,21 +35,23 @@ export default {
     setTimeout(() => {
       this.$nextTick(() => {
         var myChart = echarts.init(document.getElementById('railwayDay'));
-        getSectionPerceivedNumber().then((res)=>{
-          if ( res.code == 200 ) {
+        getSectionPerceivedNumber().then((res) => {
+          if (res.code == 200) {
             let data = res.data;
-               let texts = [];
-               let datas = [];
+            if (data.length > 0) {
+              let texts = [];
+              let datas = [];
 
-               data.forEach(it => {
-                  texts.push(it.sectionName);
-                  datas.push(it.number);
-               });
+              data.forEach(it => {
+                texts.push(it.sectionName);
+                datas.push(it.number);
+              });
 
-               chartsStatistics.xAxis.data = texts;
-               chartsStatistics.series[0].data = datas;
+              chartsStatistics.xAxis.data = texts;
+              chartsStatistics.series[0].data = datas;
+            }
+            myChart.setOption(chartsStatistics);
 
-               myChart.setOption(chartsStatistics);
           }
         })
       });
@@ -61,24 +63,25 @@ export default {
 <style lang='scss' scoped>
 .congestion {
   width: 100%;
-  .board{
-    height:200px;
+
+  .board {
+    height: 200px;
     width: 100%;
     padding: 0px 20px;
-    background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%);
+    background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%);
     border-radius: 5px 5px 5px 5px;
-      opacity: 1;
-      border: 1px solid;
-      border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1;
+    opacity: 1;
+    border: 1px solid;
+    border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1;
     display: flex;
     justify-content: space-between;
     align-items: center;
-   
+
   }
 }
-    .charts {
-      height:180px;
-      width: 100%;
-    }
 
+.charts {
+  height: 180px;
+  width: 100%;
+}
 </style>
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 b6dfeb33..373f01a7 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
@@ -1,10 +1,11 @@
 window.typeAnalysisData = [
    { value: 100, name: '行人' },
-   { value: 90, name: '非机动车' },
-   { value: 80, name: '拥堵' },
-    { value: 60, name: '逆行' },
-     { value: 50, name: '抛洒物' },
-     { value: 45, name: '烟火' }]
+   // { value: 90, name: '非机动车' },
+   // { value: 80, name: '拥堵' },
+   // { value: 60, name: '逆行' },
+   // { value: 50, name: '抛洒物' },
+   // { value: 45, name: '烟火' }
+]
 
 window.colorList = [
    "#019AFF",
@@ -19,13 +20,6 @@ window.colorList1 = [
    "#FFB905",
    "#6AE0BC",]
 
-window.count = 0;
-
-typeAnalysisData.forEach((it)=>{
-      count += it.value;
-   })
-  
-
 var options = {
    color: colorList,
    legend: {
@@ -39,26 +33,30 @@ var options = {
       textStyle: {
          color: "#fff",
          fontSize: 12,
-         rich:{
-           ast: {
-              align: "left",
-              fontSize: 12,
-              width:30,
-           },
-           bst: {
-             align: "left",
-             fontSize: 12,
-             marginLeft:20,
-             color:"#37E7FF"
-          }
+         rich: {
+            ast: {
+               align: "left",
+               fontSize: 12,
+               width: 30,
+            },
+            bst: {
+               align: "left",
+               fontSize: 12,
+               marginLeft: 20,
+               color: "#37E7FF"
+            }
          }
       },
       formatter: (params) => {
-        let obj = typeAnalysisData.filter(it=>{ return it.name == params})
-        console.log(obj);
-        return `{ast|${obj[0].name}}        {bst|${Math.round(obj[0].value/count* 100) }%}`
-     },
-      data: typeAnalysisData?.map(x => x.name),
+         let count = 0;
+         typeAnalysisData.forEach((it) => {
+            count += it.value;
+         })
+         let obj = typeAnalysisData.filter(it => { return it.name == params })
+         // console.log(obj);
+         return `{ast|${obj[0].name}}        {bst|${Math.round((obj[0].value / count) * 100)}%}`
+      },
+      // data: typeAnalysisData?.map(x => x.name),
    },
    tooltip: {
       trigger: 'item',
@@ -66,11 +64,11 @@ var options = {
    series: [{
       name: '',
       type: 'pie',
-      radius:  '80%',
+      radius: '80%',
       center: ['40%', '50%'],
-      clockwise:false,
+      clockwise: false,
       roseType: 'radius',
-      startAngle1:180,
+      startAngle1: 180,
       label: {
          show: false,
          position: 'outside',
@@ -85,14 +83,14 @@ var options = {
             }
          },
       },
-       itemStyle: {
-        normal: {
-          shadowColor: "rgba(0, 0, 0, 0.8)",
-          shadowBlur: 50,
-        },
+      itemStyle: {
+         normal: {
+            shadowColor: "rgba(0, 0, 0, 0.8)",
+            shadowBlur: 50,
+         },
       },
       labelLine: {
-         show:false,
+         show: false,
          length: 10,
          length2: 30,
       },
@@ -104,13 +102,13 @@ var options = {
             }
          }
       })
-   },{
+   }, {
       name: '',
       type: 'pie',
       radius: '90%',
-       hoverAnimation: false,
-        emphasis: { scale: false },
-        clockwise:false,
+      hoverAnimation: false,
+      emphasis: { scale: false },
+      clockwise: false,
       center: ['40%', '50%'],
       roseType: 'radius',
       label: {
@@ -127,15 +125,15 @@ var options = {
             }
          },
       },
-       itemStyle: {
-        normal: {
-         opacity:0.3,
-          shadowColor: "rgba(0, 0, 0, 0.8)",
-          shadowBlur: 50,
-        },
+      itemStyle: {
+         normal: {
+            opacity: 0.3,
+            shadowColor: "rgba(0, 0, 0, 0.8)",
+            shadowBlur: 50,
+         },
       },
       labelLine: {
-         show:false,
+         show: false,
          length: 10,
          length2: 30,
       },
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 6fc6e6f3..aaae505b 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
@@ -1,201 +1,201 @@
 <template>
-    <div class='congestion'>
-      <WgtTitle :title="'感知事件类型分析'"></WgtTitle>
-      <div class="board">
-        <div class="charts keep-ratio " id="typeAnalysis"></div>
-       </div>
+  <div class='congestion'>
+    <WgtTitle :title="'感知事件类型分析'"></WgtTitle>
+    <div class="board">
+      <div class="charts keep-ratio " id="typeAnalysis"></div>
     </div>
-  </template>
+  </div>
+</template>
   
-  <script>
-  
-  import WgtTitle from '../../../widgets/title'
-  import * as echarts from "echarts";
-  import chartsStatistics from "./assets/charts";
-  import { getWarningTypeDay } from '../../../../../../../api/event/perceiveEvent';
+<script>
 
-  
-  const drawRoundRect = ( ctx, x, y, width, height, radius ,gr) => {   
+import WgtTitle from '../../../widgets/title'
+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.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.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',
-    components: {
-      WgtTitle
-    },
-    data() {
-      return {
-       
-      }
-    },
-  
-    created() {
-      
-    },
-    methods: {
-  
-    },
-    mounted() {
-      setTimeout(() => {
-        this.$nextTick(() => {
-          var myChart = echarts.init(document.getElementById('typeAnalysis'));
-          
-
-          getWarningTypeDay().then(res=>{
-             console.log(res);
-             if ( res.code == 200 ) {
-                let data = res.data;
-                console.log("===================",data);
-                typeAnalysisData = [];
-                for (var i = 0;i < data.length;i++){
-                  var it = data[i];
-                  if ( it.warningType == 1) {
-                    typeAnalysisData.push({
-                       name:'交通拥堵',
-                       value:it.number
-                    });
-                  }
-                  if ( it.warningType == 2) {
-                    typeAnalysisData.push({
-                       name:'行人',
-                       value:it.number
-                    });
-                  }
-                  if ( it.warningType == 3) {
-                    typeAnalysisData.push({
-                       name:'非机动车',
-                       value:it.number
-                    });
-                  }
-                  if ( it.warningType == 4) {
-                    typeAnalysisData.push({
-                       name:'停车',
-                       value:it.number
-                    });
-                  }
-                  if ( it.warningType == 5) {
-                    typeAnalysisData.push({
-                       name:'倒车/逆行',
-                       value:it.number
-                    });
-                  }
-                  if ( it.warningType == 6) {
-                    typeAnalysisData.push({
-                       name:'烟火',
-                       value:it.number
-                    });
-                  }
-                  if ( it.warningType == 7) {
-                    typeAnalysisData.push({
-                       name:'撒落物',
-                       value:it.number
-                    });
-                  }
-                  if ( it.warningType == 8) {
-                    typeAnalysisData.push({
-                       name:'异常天气',
-                       value:it.number
-                    });
-                  }
-                  if ( it.warningType == 9) {
-                    typeAnalysisData.push({
-                       name:'护栏碰撞',
-                       value:it.number
-                    });
-                  }
-
-                  drawRoundRect(context, 260, 8 + i * 28, 120, 24, 12,gr)
+export default {
+  name: 'TypeAnalysis',
+  components: {
+    WgtTitle
+  },
+  data() {
+    return {
+
+    }
+  },
+  created() {
+
+  },
+  methods: {
+
+  },
+  mounted() {
+    setTimeout(() => {
+      this.$nextTick(() => {
+        var myChart = echarts.init(document.getElementById('typeAnalysis'));
+
+
+        getWarningTypeDay().then(res => {
+          console.log(res);
+          if (res.code == 200) {
+            let data = res.data;
+            console.log("===================", data);
+            typeAnalysisData = [];
+            for (var i = 0; i < data.length; i++) {
+              var it = data[i];
+              if (it.warningType == 1) {
+                typeAnalysisData.push({
+                  name: '交通拥堵',
+                  value: it.number
+                });
+              }
+              if (it.warningType == 2) {
+                typeAnalysisData.push({
+                  name: '行人',
+                  value: it.number
+                });
+              }
+              if (it.warningType == 3) {
+                typeAnalysisData.push({
+                  name: '非机动车',
+                  value: it.number
+                });
+              }
+              if (it.warningType == 4) {
+                typeAnalysisData.push({
+                  name: '停车',
+                  value: it.number
+                });
+              }
+              if (it.warningType == 5) {
+                typeAnalysisData.push({
+                  name: '倒车/逆行',
+                  value: it.number
+                });
+              }
+              if (it.warningType == 6) {
+                typeAnalysisData.push({
+                  name: '烟火',
+                  value: it.number
+                });
+              }
+              if (it.warningType == 7) {
+                typeAnalysisData.push({
+                  name: '撒落物',
+                  value: it.number
+                });
+              }
+              if (it.warningType == 8) {
+                typeAnalysisData.push({
+                  name: '异常天气',
+                  value: it.number
+                });
+              }
+              if (it.warningType == 9) {
+                typeAnalysisData.push({
+                  name: '护栏碰撞',
+                  value: it.number
+                });
+              }
+
+              drawRoundRect(context, 260, 8 + i * 28, 120, 24, 12, gr)
+            }
+
+            chartsStatistics.legend.data = typeAnalysisData?.map(x => x.name);
+            chartsStatistics.series[0].data = typeAnalysisData.map((item, index) => {
+              return {
+                ...item,
+                label: {
+                  color: colorList[index]
+                }
+              }
+            })
+            chartsStatistics.series[1].data = typeAnalysisData.map((item, index) => {
+              return {
+                ...item,
+                label: {
+                  color: colorList[index]
                 }
+              }
+            })
+          }
 
-                chartsStatistics.legend.data = typeAnalysisData?.map(x => x.name);
-                chartsStatistics.series[0].data = typeAnalysisData.map((item, index) => {
-                                                                  return {
-                                                                      ...item,
-                                                                      label: {
-                                                                        color: colorList[index]
-                                                                      }
-                                                                  }
-                                                                })
-                chartsStatistics.series[1].data = typeAnalysisData.map((item, index) => {
-                                                                  return {
-                                                                      ...item,
-                                                                      label: {
-                                                                        color: colorList[index]
-                                                                      }
-                                                                  }
-                                                                })                                                              
-             }
-
-             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'); 
-          
-          // 填充渐变颜色
-          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; // 设置线段宽度
-        
-          // 绘制圆角矩形
-       
-          // drawRoundRect(context, 260, 36, 120, 24, 12,gr)
-          // drawRoundRect(context, 260, 64, 120, 24, 12,gr)
-          // drawRoundRect(context, 260, 92, 120, 24, 12,gr)
-          // drawRoundRect(context, 260, 120, 120, 24, 12,gr)
-          // drawRoundRect(context, 260, 148, 120, 24, 12,gr)
-        });
+          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');
+
+        // 填充渐变颜色
+        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; // 设置线段宽度
+
+        // 绘制圆角矩形
+
+        // drawRoundRect(context, 260, 36, 120, 24, 12,gr)
+        // drawRoundRect(context, 260, 64, 120, 24, 12,gr)
+        // drawRoundRect(context, 260, 92, 120, 24, 12,gr)
+        // drawRoundRect(context, 260, 120, 120, 24, 12,gr)
+        // drawRoundRect(context, 260, 148, 120, 24, 12,gr)
       });
-    },
-  }
-  </script>
+    });
+  },
+}
+</script>
   
-  <style lang='scss' scoped>
-  .congestion {
+<style lang='scss' scoped>
+.congestion {
+  width: 100%;
+
+  .board {
+    height: 200px;
     width: 100%;
-    .board{
-      height:200px;
-      width: 100%;
-      padding: 0px 20px;
-      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, rgba(55, 231, 255,0.1), rgba(55, 231, 255, 0)) 1 1;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-     
-    }
+    padding: 0px 20px;
+    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, rgba(55, 231, 255, 0.1), rgba(55, 231, 255, 0)) 1 1;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
   }
-      .charts {
-        height:180px;
-        width: 100%;
-      }
-  
-  </style>
+}
+
+.charts {
+  height: 180px;
+  width: 100%;
+}
+</style>
   
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/index.vue
index 25fab668..08e5d247 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/index.vue
@@ -1,9 +1,7 @@
 <template>
     <div class='TrafficFlow'>
       <section class="content">
-        <!-- 在途车流量车型分类 -->
         <Railway class="content-l" />
-        <!-- -->
         <div class="content-m" >
             <RailWayDay class="content-m-t" />
             <DayTotal class="content-m-t" />