From 846d776ccc7c46e2eca5d3575e74842f0162032b Mon Sep 17 00:00:00 2001
From: zhangzhang <1747194829@qq.com>
Date: Mon, 26 Feb 2024 16:31:08 +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/eventSource/assets/charts.js   |   6 +-
 .../components/eventSource/index.vue          | 191 ++++++++++--------
 2 files changed, 116 insertions(+), 81 deletions(-)

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 c2b70d9f..6ea73b0c 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
@@ -125,16 +125,18 @@ var options = {
     data: lengData,
     formatter: function (name) {
       let target = 0;
+      let percent = 0;
       if (!mainData) return "";
       for (let i = 0; i < window.mainData.length; i++) {
         if (window.mainData[i].name === name) {
           target = window.mainData[i].value;
+          percent = window.mainData[i].percent;
         }
       }
-      console.log('starget',target)
+      console.log("starget", target);
       var arr = [
         "{ast|" + name + "}",
-        "{bst|" + Math.round((target * 100).toFixed(0)) + "%  }",
+        "{bst|" + Math.round((percent * 100).toFixed(0)) + "%  }",
         "{cst|" + Math.round(target) + "起}",
       ];
       return arr.join("  ");
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 92eb61d0..4ec2128f 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,49 +1,56 @@
 <template>
-  <div @resize="changeReisze" class='congestion'>
+  <div @resize="changeReisze" class="congestion">
     <WgtTitle :title="'感知事件源分析'"></WgtTitle>
     <div class="board">
-      <div class="charts keep-ratio " id="eventSource"></div>
+      <div class="charts keep-ratio" id="eventSource"></div>
     </div>
   </div>
 </template>
-  
-<script>
 
-import WgtTitle from '../../../widgets/title'
+<script>
+import WgtTitle from "../../../widgets/title";
 import * as echarts from "echarts";
 import chartsStatistics from "./assets/charts";
-import { getWarningSourceGroup } from '../../../../../../../api/event/perceiveEvent';
+import { getWarningSourceGroup } 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: 'EventSource',
+  name: "EventSource",
   components: {
-    WgtTitle
+    WgtTitle,
   },
   data() {
-    return {
-
-    }
+    return {};
   },
 
-  created() {
-
-  },
+  created() {},
   methods: {
     changeReisze() {
       this.myChart.resize();
@@ -52,7 +59,7 @@ export default {
   mounted() {
     setTimeout(() => {
       this.$nextTick(() => {
-        var myChart = echarts.init(document.getElementById('eventSource'));
+        var myChart = echarts.init(document.getElementById("eventSource"));
 
         getWarningSourceGroup().then((res) => {
           if (res.code == 200) {
@@ -63,32 +70,36 @@ export default {
             let chartData = [
               {
                 average: 0,
-                name: '视频AI',
-                percent: 0.3
+                name: "视频AI",
+                percent: 0.3,
               },
               {
                 average: 0,
-                name: '雷达识别',
-                percent: 0.2
-              }, {
+                name: "雷达识别",
+                percent: 0.2,
+              },
+              {
                 average: 0,
-                name: '锥桶',
-                percent: 0.1
-              }, {
+                name: "锥桶",
+                percent: 0.1,
+              },
+              {
                 average: 0,
-                name: '护栏碰撞',
-                percent: 0.2
-              }, {
+                name: "护栏碰撞",
+                percent: 0.2,
+              },
+              {
                 average: 0,
-                name: '扫码报警',
-                percent: 0.1
-              }, {
+                name: "扫码报警",
+                percent: 0.1,
+              },
+              {
                 average: 0,
-                name: '非机预警',
-                percent: 0.1
+                name: "非机预警",
+                percent: 0.1,
               },
-            ]
-            data.forEach(it => {
+            ];
+            data.forEach((it) => {
               if (it.warningSource == 1) {
                 chartData[0].average += it.number;
               }
@@ -109,9 +120,16 @@ export default {
               }
               // total ++;
               // drawRoundRect(context, 231, 37 + (index * 27), 138, 20, 12, gr);
-            })
+            });
             // console.log('data',chartData)
-            let colorList = ['#006EDF', '#00FF00', '#FFC30D', '#FF8400', '#1DA7FF', '#2967EA'];
+            let colorList = [
+              "#006EDF",
+              "#00FF00",
+              "#FFC30D",
+              "#FF8400",
+              "#1DA7FF",
+              "#2967EA",
+            ];
             let lengData = [];
             let mainData = [];
 
@@ -126,55 +144,70 @@ export default {
                 name: it.name,
                 color: colorList[i],
                 value: it.average,
-                percent: (it.average / total) || 0
-              })
+                percent: it.average / total || 0,
+              });
             }
             window.mainData = mainData;
-            // console.log('mainData', mainData)
+            console.log("mainData", mainData);
             chartsStatistics.title.text = `{tb|${total}}`;
             chartsStatistics.title.subtext = "{zb|总数}";
 
             chartsStatistics.legend.data = lengData;
             chartsStatistics.series[0].data = mainData;
-
-            myChart.on('mouseover', (params) => {
-              // console.log('params',params)
-              if (params.componentType == 'graphic') {
-                return
-              }
-              chartsStatistics.title.text = `{tb|${params.percent}%}`;
-              chartsStatistics.title.subtext = `{zb|${params.data.name}}`;
-              // chartsStatistics.title.left = "22%";
-              myChart.setOption(chartsStatistics);
-            })
-
-            // 用户鼠标移出时，重新开始自动切换
-            myChart.on('mouseout', (params) => {
-              chartsStatistics.title.text = `{tb|${total}}`;
-              chartsStatistics.title.subtext = "{zb|总数}";
-              // chartsStatistics.title.left = "25%";
-              myChart.setOption(chartsStatistics);
-            })
+            // chartsStatistics.legend.formatter = (name) => {
+            //   let target = 0;
+            //   if (!mainData) return "";
+            //   for (let i = 0; i < window.mainData.length; i++) {
+            //     if (window.mainData[i].name === name) {
+            //       target = window.mainData[i].value;
+            //     }
+            //   }
+            //   console.log("starget", target);
+            //   var arr = [
+            //     "{ast|" + name + "}",
+            //     "{bst|" + Math.round((target * 100).toFixed(0)) + "%  }",
+            //     "{cst|" + Math.round(target) + "起}",
+            //   ];
+            //   return arr.join("  ");
+            // };
+
+            // myChart.on("mouseover", (params) => {
+            //   // console.log('params',params)
+            //   if (params.componentType == "graphic") {
+            //     return;
+            //   }
+            //   chartsStatistics.title.text = `{tb|${params.percent}%}`;
+            //   chartsStatistics.title.subtext = `{zb|${params.data.name}}`;
+            //   // chartsStatistics.title.left = "22%";
+            //   myChart.setOption(chartsStatistics);
+            // });
+
+            // // 用户鼠标移出时，重新开始自动切换
+            // myChart.on("mouseout", (params) => {
+            //   chartsStatistics.title.text = `{tb|${total}}`;
+            //   chartsStatistics.title.subtext = "{zb|总数}";
+            //   // chartsStatistics.title.left = "25%";
+            //   myChart.setOption(chartsStatistics);
+            // });
             // }
-
           }
 
           myChart.setOption(chartsStatistics);
-        })
+        });
 
         const domMap = document.getElementById("eventSource");
         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");
 
         // 填充渐变颜色
         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)');
+        gr.addColorStop(1, "rgba(92,197,255,0)");
+        gr.addColorStop(0, "rgba(92,197,255,0.3)");
         drawRoundRect(context, 214, 15, 134, 21, 12, gr);
         drawRoundRect(context, 214, 42, 134, 21, 12, gr);
         drawRoundRect(context, 214, 69, 134, 21, 12, gr);
@@ -184,17 +217,14 @@ export default {
 
         context.lineWidth = 1; // 设置线段宽度
 
-
-
         this.myChart = myChart;
-
       });
     });
   },
-}
+};
 </script>
-  
-<style lang='scss' scoped>
+
+<style lang="scss" scoped>
 .congestion {
   width: 100%;
 
@@ -206,11 +236,15 @@ export default {
     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;
+    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;
-
   }
 }
 
@@ -219,4 +253,3 @@ export default {
   width: 100%;
 }
 </style>
-  
\ No newline at end of file