感知事件检测

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/index.vue

@@ -140,9 +140,9 @@ export default {
         context.lineWidth = 1; // 设置线段宽度
 
         // 绘制圆角矩形
-        // drawRoundRect(context, 260, 50, 120, 24, 12, gr)
+        drawRoundRect(context, 260, 50, 120, 24, 12, gr)
-        // drawRoundRect(context, 260, 78, 120, 24, 12, gr)
+        drawRoundRect(context, 260, 78, 120, 24, 12, gr)
-        // drawRoundRect(context, 260, 106, 120, 24, 12, gr)
+        drawRoundRect(context, 260, 106, 120, 24, 12, gr)
 
       });
     });

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts3.js

@@ -125,7 +125,6 @@ let options = {
         opacity: 0.6,
         color: function (params) {
           var a = params.name;
-          console.log("==========a=============", a);
           if (a == "6月") {
             return new echarts.graphic.LinearGradient(
               0,

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue

@@ -392,17 +392,51 @@ export default {
         if (res.code == 200) {
           let data = res.data;
           if (this.year != "quarter") {
+            const maxObject = data.filter(it => it.sectionNumber > 0).reduce((prev, current) => (current.sectionNumber > prev.sectionNumber ? current : prev));
             let zhs = [];
-            let values = [];
+            let values1 = [];
+            let values2 = [];
+
             data.forEach((it) => {
               if (it.sectionNumber > 0) {
-                values.push(it.sectionNumber);
+                values2.push(it.sectionNumber);
                 zhs.push(it.stakeMarkId);
+
+                if (maxObject && maxObject.sectionNumber == it.sectionNumber) {
+                  values1.push({
+                    value: it.sectionNumber,
+                    itemStyle: {
+                      color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 0,
+                        y2: 1,
+                        colorStops: [{
+                          offset: 0, color: '#01D5BC' // 0% 处的颜色
+                        }, {
+                          offset: 1, color: '#003B4E' // 100% 处的颜色
+                        }],
+                        global: false // 缺省为 false
+                      },
+                      borderRadius: 6
+                    },
+                  })
+                } else {
+                  values1.push({
+                    value: it.sectionNumber,
+                    itemStyle: {
+                      borderRadius: 6
+                    },
+                  })
+                }
+
               }
             })
+
             chart3.xAxis.data = zhs;
-            chart3.series[0].data = values;
+            chart3.series[0].data = values1;
-            chart3.series[1].data = values;
+            chart3.series[1].data = values2;
           } else {
             let zhs = [];
             let values = [];

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/index.vue

@@ -91,7 +91,7 @@ export default {
                 }
 
                 number.push(it.number);
-                // drawRoundRect(context, 241, 37 + (index * 27), 134, 20, 12, gr);
+                drawRoundRect(context, 231, 37 + (index * 27), 138, 20, 12, gr);
               })
               let colorList = ['#006EDF', '#00FF00', '#FFC30D', '#FF8400', '#1DA7FF', '#2967EA'];
               let lengData = [];
@@ -154,7 +154,7 @@ export default {
         const context = canvas.getContext('2d');
 
         // 填充渐变颜色
-        let gr = context.createLinearGradient(247, 63, 450, 0);
+        let gr = context.createLinearGradient(230, 0, 360, 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);

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/index.vue

@@ -41,10 +41,40 @@ export default {
             if (data.length > 0) {
               let texts = [];
               let datas = [];
+              const maxObject = data.reduce((prev, current) => (current.number > prev.number ? current : prev));
 
               data.forEach(it => {
                 texts.push(it.sectionName);
-                datas.push(it.number);
+
+                if (it.number == maxObject.number) {
+                  datas.push({
+                    value: it.number,
+                    itemStyle: {
+                      color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 0,
+                        y2: 1,
+                        colorStops: [{
+                          offset: 0, color: '#0469FF' // 0% 处的颜色
+                        }, {
+                          offset: 1, color: '#699CFF' // 100% 处的颜色
+                        }],
+                        global: false // 缺省为 false
+                      },
+                      borderRadius: 6
+                    },
+                  });
+                } else {
+                  datas.push({
+                    value: it.number,
+                    itemStyle: {
+                      borderRadius: 6
+                    },
+                  });
+                }
+
               });
 
               chartsStatistics.xAxis.data = texts;

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/index.vue

@@ -117,7 +117,7 @@ export default {
                 });
               }
 
-              drawRoundRect(context, 260, 8 + i * 28, 120, 24, 12, gr)
+              drawRoundRect(context, 254, 8 + i * 28, 120, 24, 12, gr)
             }
 
             chartsStatistics.legend.data = typeAnalysisData?.map(x => x.name);

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

@@ -2,15 +2,15 @@
   <div class='TrafficFlow'>
     <section class="content">
       <Railway class="content-l" />
-        <div class="content-m" >
+      <div class="content-m">
         <RailWayDay class="content-m-t" />
         <DayTotal class="content-m-t" />
       </div>
-        <div class="content-m" >
+      <div class="content-m">
         <EventSource class="content-m-t" />
         <DailyDisposal class="content-m-t" />
       </div>
-        <div class="content-m" >
+      <div class="content-m">
         <MonthStatistice class="content-m-t" />
         <TypeAnalysis class="content-m-t" />
       </div>
@@ -19,19 +19,19 @@
       <EventQuery class="foot-w" />
     </section>
   </div>
-  </template>
+</template>
-  
+  
-  <script> 
+<script>
-  import Railway from './components/railway/index.vue';
+import Railway from './components/railway/index.vue';
-  import RailWayDay from './components/railwayDay/index.vue';
+import RailWayDay from './components/railwayDay/index.vue';
-  import DayTotal from './components/dayTotal/index.vue';
+import DayTotal from './components/dayTotal/index.vue';
-  import EventSource from './components/eventSource/index.vue';
+import EventSource from './components/eventSource/index.vue';
-  import DailyDisposal from './components/dailyDisposal/index.vue';
+import DailyDisposal from './components/dailyDisposal/index.vue';
-  import TypeAnalysis from './components/typeAnalysis';
+import TypeAnalysis from './components/typeAnalysis';
-  import MonthStatistice from './components/monthStatistics/index.vue';
+import MonthStatistice from './components/monthStatistics/index.vue';
-  import EventQuery from './components/eventQuery';
+import EventQuery from './components/eventQuery';
-
+
-  export default {
+export default {
   name: 'EventDetection',
   components: {
     Railway,
@@ -43,22 +43,23 @@
     MonthStatistice,
     EventQuery,
   }
-  }
+}
-  </script>
+</script>
   
-  <style lang='scss' scoped>
+<style lang='scss' scoped>
-  .TrafficFlow {
+.TrafficFlow {
   width: 100%;
   height: 100%;
   position: relative;
   z-index: 6;
   color: white;
 
-    .head{
+  .head {
     width: 98%;
     margin: auto;
     margin-top: 15px;
   }
+
   .content {
     width: 98%;
     margin: auto;
@@ -66,14 +67,15 @@
     flex: 1;
     pointer-events: none;
     margin-top: 19px;
+
     >div {
       pointer-events: auto;
     }
 
     .content-l {
       width: calc(100% / 4 - 25px * 3);
-        min-width:460px;
+      min-width: 475px;
-        margin-right:15px;
+      margin-right: 15px;
 
     }
 
@@ -81,20 +83,22 @@
     .content-m {
       display: inline-flex;
       flex-direction: column;
-        width: calc(100% / 4 );
+      width: calc(100% / 4);
-        margin-right:15px;
+      margin-right: 15px;
 
       .content-m-t {
-            width:100%;
+        width: 100%;
-            height:240px;
+        height: 240px;
         margin-bottom: 15px;
       }
     }
+
     .content-r {
       width: 49.4%;
     }
   }
-    .foot{
+
+  .foot {
     width: 98%;
     margin: auto;
     display: flex;
@@ -102,25 +106,27 @@
     flex: 1;
     pointer-events: none;
     margin-top: 0px;
+
     >div {
       pointer-events: auto;
     }
 
     .foot-w {
-        width:100%;
+      width: 100%;
 
     }
 
     .foot-l {
       width: 726px;
     }
+
     .foot-m {
       width: 613px;
     }
+
     .foot-r {
       width: 493px;
     }
   }
-  }
+}</style>
-  </style>