From f0cbfeebd2b54a0e68e6a316b9083fca45a8ed58 Mon Sep 17 00:00:00 2001
From: zhangzhang <1747194829@qq.com>
Date: Mon, 26 Feb 2024 17:09:45 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/typeAnalysis/assets/charts.js  |  11 ++
 .../components/typeAnalysis/index.vue         | 182 ++++++++++--------
 2 files changed, 117 insertions(+), 76 deletions(-)

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 7fe27863..16fed38e 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
@@ -21,6 +21,8 @@ window.colorList1 = ["#61D8FF", "#FFB905", "#6AE0BC"];
 var options = {
   color: colorList,
   legend: {
+    width: "500px",
+    height: "220px",
     orient: "vertical",
     top: "10",
     icon: "circle",
@@ -54,9 +56,11 @@ var options = {
     },
     formatter: (params) => {
       let count = 0;
+      console.log("typeAnalysisData", typeAnalysisData);
       typeAnalysisData.forEach((it) => {
         count += it.value;
       });
+      console.log("count", count);
       let obj = typeAnalysisData.filter((it) => {
         return it.name == params;
       });
@@ -65,6 +69,13 @@ var options = {
         Math.round((obj[0].value / count) * 100) || 0
       }%} {cst|${obj[0].value}起}`;
     },
+    pageIconColor: "#fff",
+    pageIconSize: 10,
+    pageTextStyle: {
+      color: "#fff",
+    },
+    type: "scroll",
+    pageButtonPosition: "end",
     // data: typeAnalysisData?.map(x => x.name),
   },
   tooltip: {
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 a31445f2..111df349 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,162 +1,185 @@
 <template>
-  <div class='congestion'>
+  <div class="congestion">
     <WgtTitle :title="'感知事件类型分析'"></WgtTitle>
     <div class="board">
-      <div class="charts keep-ratio " id="typeAnalysis"></div>
+      <div class="charts keep-ratio" id="typeAnalysis"></div>
     </div>
   </div>
 </template>
 
 <script>
-
-import WgtTitle from '../../../widgets/title'
+import WgtTitle from "../../../widgets/title";
 import * as echarts from "echarts";
 import chartsStatistics from "./assets/charts";
-import { getWarningTypeDay } from '../../../../../../../api/event/perceiveEvent';
-
+import { getWarningTypeDay } from "../../../../../../../api/event/perceiveEvent";
 
 const drawRoundRect = (ctx, x, y, width, height, radius, gr) => {
-  // ctx, 矩形距离x坐标位置, 矩形距离y坐标的位置, 矩形的宽, 矩形的长,圆角角度 
+  // ctx, 矩形距离x坐标位置, 矩形距离y坐标的位置, 矩形的宽, 矩形的长,圆角角度
   ctx.beginPath();
   ctx.fillStyle = gr;
-  ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2);
+  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.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.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.arc(radius + x, height - radius + y, radius, (Math.PI * 1) / 2, Math.PI);
   ctx.closePath();
   //ctx.stroke();
-  ctx.fill()
-}
-
+  ctx.fill();
+};
 
 export default {
-  name: 'TypeAnalysis',
+  name: "TypeAnalysis",
   components: {
-    WgtTitle
+    WgtTitle,
   },
   data() {
-    return {
-
-    }
-  },
-  created() {
-
-  },
-  methods: {
-
+    return {};
   },
+  created() {},
+  methods: {},
   mounted() {
     setTimeout(() => {
       this.$nextTick(() => {
-        var myChart = echarts.init(document.getElementById('typeAnalysis'));
+        var myChart = echarts.init(document.getElementById("typeAnalysis"));
 
-
-        getWarningTypeDay().then(res => {
+        getWarningTypeDay().then((res) => {
           console.log(res);
           if (res.code == 200) {
             let data = res.data;
-            console.log("===================", data);
+            console.log("===================22", data);
             typeAnalysisData = [];
             for (var i = 0; i < data.length; i++) {
               var it = data[i];
               if (it.warningType == 1) {
                 typeAnalysisData.push({
-                  name: '交通拥堵',
-                  value: it.number
+                  name: "交通拥堵",
+                  value: it.number || 0,
                 });
               }
               if (it.warningType == 2) {
                 typeAnalysisData.push({
-                  name: '行人',
-                  value: it.number
+                  name: "行人",
+                  value: it.number || 0,
                 });
               }
               if (it.warningType == 3) {
                 typeAnalysisData.push({
-                  name: '非机动车',
-                  value: it.number
+                  name: "非机动车",
+                  value: it.number || 0,
                 });
               }
               if (it.warningType == 4) {
                 typeAnalysisData.push({
-                  name: '停车',
-                  value: it.number
+                  name: "停车",
+                  value: it.number || 0,
                 });
               }
               if (it.warningType == 5) {
                 typeAnalysisData.push({
-                  name: '倒车/逆行',
-                  value: it.number
+                  name: "倒车/逆行",
+                  value: it.number || 0,
                 });
               }
               if (it.warningType == 6) {
                 typeAnalysisData.push({
-                  name: '烟火',
-                  value: it.number
+                  name: "烟火",
+                  value: it.number || 0,
                 });
               }
               if (it.warningType == 7) {
                 typeAnalysisData.push({
-                  name: '撒落物',
-                  value: it.number
+                  name: "撒落物",
+                  value: it.number || 0,
                 });
               }
               if (it.warningType == 8) {
                 typeAnalysisData.push({
-                  name: '异常天气',
-                  value: it.number
+                  name: "异常天气",
+                  value: it.number || 0,
                 });
               }
               if (it.warningType == 9) {
                 typeAnalysisData.push({
-                  name: '护栏碰撞',
-                  value: it.number
+                  name: "护栏碰撞",
+                  value: it.number || 0,
+                });
+              }
+              if (it.warningType == 10) {
+                typeAnalysisData.push({
+                  name: "交通事故",
+                  value: it.number || 0,
+                });
+              }
+              if (it.warningType == 11) {
+                typeAnalysisData.push({
+                  name: "车辆故障",
+                  value: it.number || 0,
+                });
+              }
+              if (it.warningType == 99) {
+                typeAnalysisData.push({
+                  name: "其他",
+                  value: it.number || 0,
                 });
               }
 
-              drawRoundRect(context, 250, 8 + i * 28, 120, 24, 12, gr)
+              drawRoundRect(context, 250, 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.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.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');
+        let canvas = document.createElement("canvas");
         canvas.width = parentDiv.offsetWidth;
         canvas.height = parentDiv.offsetHeight;
         parentDiv.appendChild(canvas);
-        const context = canvas.getContext('2d');
+        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)');
-
+        gr.addColorStop(1, "rgba(92,197,255,0)");
+        gr.addColorStop(0, "rgba(92,197,255,0.5)");
 
         context.lineWidth = 1; // 设置线段宽度
 
@@ -170,10 +193,10 @@ export default {
       });
     });
   },
-}
+};
 </script>
-  
-<style lang='scss' scoped>
+
+<style lang="scss" scoped>
 .congestion {
   width: 100%;
 
@@ -181,15 +204,23 @@ export default {
     height: 200px;
     width: 100%;
     padding: 0px 20px;
-    background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #06425888 100%);
+    background: linear-gradient(
+      180deg,
+      rgba(6, 66, 88, 0.2) 0%,
+      #06425888 100%
+    );
     border-radius: 5px 5px 5px 5px;
     opacity: 1;
     border: 1px solid;
-    border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.1), rgba(55, 231, 255, 0)) 1 1;
+    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;
-
   }
 }
 
@@ -198,4 +229,3 @@ export default {
   width: 100%;
 }
 </style>
-  
\ No newline at end of file