From ff079741c7a06a5622996b75b9756339ed9cdfde Mon Sep 17 00:00:00 2001
From: kun <1422840143@qq.com>
Date: Tue, 21 May 2024 01:19:55 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20BUG=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/js/http.js                         |   2 +-
 .../videoDataAnalysis/monitorAnalysis.vue     | 240 +++++++++++++++++-
 2 files changed, 232 insertions(+), 10 deletions(-)

diff --git a/src/assets/js/http.js b/src/assets/js/http.js
index a211b315..0679d524 100644
--- a/src/assets/js/http.js
+++ b/src/assets/js/http.js
@@ -87,7 +87,7 @@ if (process.env.NODE_ENV == 'development') {
   // axios.defaults.baseURL ='http://192.168.34.221:19111/' //郭圣雄本地
   axios.defaults.baseURL = 'http://192.168.34.155:19111/' //彭洁本地
   // axios.defaults.baseURL = 'http://182.90.224.237:51234' //郭圣雄远程
-  axios.defaults.baseURL = 'http://jxj.zhgdyun.com:61212/' //彭洁远程
+  // axios.defaults.baseURL = 'http://jxj.zhgdyun.com:61212/' //彭洁远程
   // axios.defaults.baseURL ='http://101.43.164.214:45020/' //沈阳和盈
   // axios.defaults.baseURL ='http://183.249.224.118:9000/' //嘉兴王江泾公用码头
   // axios.defaults.baseURL ='http://101.43.164.214:11111/' // 百色三标段项目
diff --git a/src/views/projectFront/videoDataAnalysis/monitorAnalysis.vue b/src/views/projectFront/videoDataAnalysis/monitorAnalysis.vue
index 73a5d6ff..d97ee0b4 100644
--- a/src/views/projectFront/videoDataAnalysis/monitorAnalysis.vue
+++ b/src/views/projectFront/videoDataAnalysis/monitorAnalysis.vue
@@ -14,6 +14,24 @@
                     </div>
                 </div> -->
       </div>
+      <div class="top-content-three">
+        <div class="chart" ref="ChartTwo"></div>
+        <!-- <div v-if="statsEnterpriseList.length == 0">
+                    <div class="placeholderBox">
+                        <img src="@/assets/images/noData.png" alt="" />
+                        <p>暂无数据</p>
+                    </div>
+                </div> -->
+      </div>
+      <div class="top-content-four">
+        <div class="chart" ref="ChartThree"></div>
+        <!-- <div v-if="statsEnterpriseList.length == 0">
+                    <div class="placeholderBox">
+                        <img src="@/assets/images/noData.png" alt="" />
+                        <p>暂无数据</p>
+                    </div>
+                </div> -->
+      </div>
       <!-- <div class="topLeft whiteBlock2">
                 <div class="blockInner blockInnerup">
                     <div class="box-between">
@@ -33,8 +51,210 @@ export default {
   created() {},
   mounted() {
     this.topChartOne();
+    this.topChartTwo();
+    this.topChartThree();
   },
   methods: {
+    // 顶部图3
+    topChartThree() {
+      let ageChart = echarts.init(this.$refs.ChartThree);
+      let option = {
+        color: ["#36CE90", "#FF952C", "#FE0B0F","#CCCCCC"],
+        title: {
+          //饼图中间的文字设置
+          show: true,
+          left: "32%",
+          top: "40%",
+          text: "100.00%",
+          textStyle: {
+            fontSize: 20,
+            color: "#000"
+          },
+          subtext: "录像完整率",
+          subtextStyle: {
+            fontSize: 12,
+            color: "#000"
+          },
+        },
+        tooltip: {
+          trigger: "item",
+        },
+        legend: {
+          //图例设置
+          right: 120,
+          top: "middle",
+          bottom: 20,
+          orient: "vertical", //垂直
+          itemGap: 15, //图例之间间距
+          textStyle: {
+            //数据右对齐样式
+            color: "#687F96",
+            rich: {
+              name: {
+                //legend左边的文字
+                fontSize: 10,
+                padding: [3, 10, 0, 0], //1.左边的文字添加右边距10(可自己调整)
+              },
+              value: {
+                //legend右边的值
+                fontSize: 12,
+                color: "#182F41",
+                backgroundColor: "transparent", //2.右边的值添加背景色
+                align: "right", //3.右对齐
+                padding: [5, -100, 0, 0], //4.设置右边距为-100(-70/-80..可自己调整)
+              },
+            },
+          },
+          formatter: function (name) {
+            let data = option.series[0].data;
+            let total = 0;
+            let tarValue;
+            for (let i = 0; i < data.length; i++) {
+              total += data[i].value;
+              if (data[i].name == name) {
+                tarValue = data[i].value;
+              }
+            }
+            let v = tarValue;
+            return [`{name|${name}}` + `{value|${v}}`].join("");
+          },
+        },
+        series: [
+          {
+            name: "Access From",
+            type: "pie",
+            center: ["40%", "50%"], //饼图位置
+            radius: ["55%", "80%"], //圆环大小
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: "center",
+            },
+
+            emphasis: {
+              label: {
+                show: false,
+                fontSize: 40,
+                fontWeight: "bold",
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            data: [
+              { value: 1048, name: "录像完整" },
+              { value: 735, name: "录像丢失" },
+              { value: 580, name: "诊断失败" },
+              { value: 580, name: "未检测" }
+            ],
+          },
+        ],
+      };
+      ageChart.setOption(option);
+      window.addEventListener("resize", () => {
+        ageChart.resize();
+      });
+    },
+    // 顶部图2
+    topChartTwo() {
+      let ageChart = echarts.init(this.$refs.ChartTwo);
+      let option = {
+        color: ["#36CE90", "#FF952C", "#FE0B0F","#CCCCCC"],
+        title: {
+          //饼图中间的文字设置
+          show: true,
+          left: "32%",
+          top: "40%",
+          text: "100.00%",
+          textStyle: {
+            fontSize: 20,
+            color: "#000"
+          },
+          subtext: "录像正常率",
+          subtextStyle: {
+            fontSize: 12,
+            color: "#000"
+          },
+        },
+        tooltip: {
+          trigger: "item",
+        },
+        legend: {
+          //图例设置
+          right: 120,
+          top: "middle",
+          bottom: 20,
+          orient: "vertical", //垂直
+          itemGap: 15, //图例之间间距
+          textStyle: {
+            //数据右对齐样式
+            color: "#687F96",
+            rich: {
+              name: {
+                //legend左边的文字
+                fontSize: 10,
+                padding: [3, 10, 0, 0], //1.左边的文字添加右边距10(可自己调整)
+              },
+              value: {
+                //legend右边的值
+                fontSize: 12,
+                color: "#182F41",
+                backgroundColor: "transparent", //2.右边的值添加背景色
+                align: "right", //3.右对齐
+                padding: [5, -100, 0, 0], //4.设置右边距为-100(-70/-80..可自己调整)
+              },
+            },
+          },
+          formatter: function (name) {
+            let data = option.series[0].data;
+            let total = 0;
+            let tarValue;
+            for (let i = 0; i < data.length; i++) {
+              total += data[i].value;
+              if (data[i].name == name) {
+                tarValue = data[i].value;
+              }
+            }
+            let v = tarValue;
+            return [`{name|${name}}` + `{value|${v}}`].join("");
+          },
+        },
+        series: [
+          {
+            name: "Access From",
+            type: "pie",
+            center: ["40%", "50%"], //饼图位置
+            radius: ["55%", "80%"], //圆环大小
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: "center",
+            },
+
+            emphasis: {
+              label: {
+                show: false,
+                fontSize: 40,
+                fontWeight: "bold",
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            data: [
+              { value: 1048, name: "图像正常" },
+              { value: 735, name: "图像异常" },
+              { value: 580, name: "诊断失败" },
+              { value: 735, name: "未检测" }
+            ],
+          },
+        ],
+      };
+      ageChart.setOption(option);
+      window.addEventListener("resize", () => {
+        ageChart.resize();
+      });
+    },
     // 顶部图1
     topChartOne() {
       let ageChart = echarts.init(this.$refs.ChartOne);
@@ -43,15 +263,17 @@ export default {
         title: {
           //饼图中间的文字设置
           show: true,
-          left: "24%",
-          top: "42%",
-          text: "十类问题",
+          left: "32%",
+          top: "40%",
+          text: "100.00%",
           textStyle: {
-            fontSize: 12,
-          },
-          subtext: "8800",
-          subtextStyle: {
             fontSize: 20,
+            color: "#000"
+          },
+          subtext: "监控点在线率",
+          subtextStyle: {
+            fontSize: 12,
+            color: "#000"
           },
         },
         tooltip: {
@@ -59,7 +281,7 @@ export default {
         },
         legend: {
           //图例设置
-          right: 100,
+          right: 120,
           top: "middle",
           bottom: 20,
           orient: "vertical", //垂直
@@ -161,7 +383,7 @@ export default {
         font-size: 36px;
       }
     }
-    &-two {
+    &-two, &-three, &-four {
       .chart {
         width: 100%;
         height: 100%;