感知事件检测

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, 78, 120, 24, 12, gr)
-        // drawRoundRect(context, 260, 106, 120, 24, 12, gr)
+        drawRoundRect(context, 260, 50, 120, 24, 12, gr)
+        drawRoundRect(context, 260, 78, 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[1].data = values;
+            chart3.series[0].data = values1;
+            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

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