From 4adbeb2aeebc7cdb723414ef780d1fac6b7e254b Mon Sep 17 00:00:00 2001
From: xzt <1113240624@qq.com>
Date: Thu, 6 Jun 2024 18:37:23 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../declare/components/dataCharts.vue         |  1 -
 .../examine/components/dataCharts.vue         |  2 --
 .../declare/components/dataCharts.vue         | 29 +++++++++++++++++--
 .../examine/components/dataCharts.vue         | 29 +++++++++++++++++--
 4 files changed, 54 insertions(+), 7 deletions(-)

diff --git a/src/views/dike/safetyManage/declarationManage/declare/components/dataCharts.vue b/src/views/dike/safetyManage/declarationManage/declare/components/dataCharts.vue
index cd0a221..712fe2e 100644
--- a/src/views/dike/safetyManage/declarationManage/declare/components/dataCharts.vue
+++ b/src/views/dike/safetyManage/declarationManage/declare/components/dataCharts.vue
@@ -11,7 +11,6 @@ export default {
   data() {
     return {
       pieChartData: [],
-      seriesData: [],
       selected: {},
       barChartData: [],
       loading: true,
diff --git a/src/views/dike/safetyManage/declarationManage/examine/components/dataCharts.vue b/src/views/dike/safetyManage/declarationManage/examine/components/dataCharts.vue
index fec58f2..b1aec55 100644
--- a/src/views/dike/safetyManage/declarationManage/examine/components/dataCharts.vue
+++ b/src/views/dike/safetyManage/declarationManage/examine/components/dataCharts.vue
@@ -11,7 +11,6 @@ export default {
   data() {
     return {
       pieChartData: [],
-      seriesData: [],
       selected: {},
       barChartData: [],
       loading: true,
@@ -27,7 +26,6 @@ export default {
       const res2 = await getHistogram();
       this.pieChartData = [];
       for (let key in res1[0]) {
-        let name = key;
         this.pieChartData.push({
           value: res1[0][key],
           name: key?.substring(0, 10),
diff --git a/src/views/sluice/safetyManage/declarationManage/declare/components/dataCharts.vue b/src/views/sluice/safetyManage/declarationManage/declare/components/dataCharts.vue
index a88dc10..d383f19 100644
--- a/src/views/sluice/safetyManage/declarationManage/declare/components/dataCharts.vue
+++ b/src/views/sluice/safetyManage/declarationManage/declare/components/dataCharts.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="content">
+  <div class="content" v-loading="loading">
     <div ref="pieEle" style="width: 30%; height: 100%"></div>
     <div ref="barEle" style="width: 70%; height: 100%"></div>
   </div>
@@ -11,7 +11,9 @@ export default {
   data() {
     return {
       pieChartData: [],
+      selected: {},
       barChartData: [],
+      loading: true,
     };
   },
   created() {
@@ -19,11 +21,19 @@ export default {
   },
   methods: {
     async getData() {
+      this.loading = true;
       const res1 = await getPie();
       const res2 = await getHistogram();
       this.pieChartData = [];
       for (let key in res1[0]) {
-        this.pieChartData.push({ value: res1[0][key], name: key });
+        this.pieChartData.push({
+          value: res1[0][key],
+          name: key?.substring(0, 10),
+        });
+      }
+      for (let i = 0; i < this.pieChartData.length; i++) {
+        let name = this.pieChartData[i].name;
+        this.selected[name] = i < 7; //限制图表中起始显示10个，这里必须保证 name 不为空
       }
       // for (let key in res1[0]) {
       //   this.barChartData.push({ value: res1[0][key], name: key });
@@ -31,6 +41,7 @@ export default {
       this.barChartData = res2;
       this.pieInit();
       this.barInit();
+      this.loading = false;
       console.log("pieChartData", this.pieChartData);
       console.log("barChartData", this.barChartData);
     },
@@ -51,6 +62,8 @@ export default {
           orient: "horizontal",
           bottom: "2%",
           icon: "circle",
+          type: "scroll",
+          selected: this.selected,
         },
         series: [
           {
@@ -106,6 +119,18 @@ export default {
           bottom: "12%",
           containLabel: true,
         },
+        dataZoom: [
+          {
+            type: "inside",
+            show: false,
+            xAxisIndex: [0],
+            start: 0,
+            end: 50,
+            // textStyle: {
+            //   color: "#ccd7d7",
+            // },
+          },
+        ],
         xAxis: {
           type: "category",
           axisLine: {
diff --git a/src/views/sluice/safetyManage/declarationManage/examine/components/dataCharts.vue b/src/views/sluice/safetyManage/declarationManage/examine/components/dataCharts.vue
index a88dc10..d383f19 100644
--- a/src/views/sluice/safetyManage/declarationManage/examine/components/dataCharts.vue
+++ b/src/views/sluice/safetyManage/declarationManage/examine/components/dataCharts.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="content">
+  <div class="content" v-loading="loading">
     <div ref="pieEle" style="width: 30%; height: 100%"></div>
     <div ref="barEle" style="width: 70%; height: 100%"></div>
   </div>
@@ -11,7 +11,9 @@ export default {
   data() {
     return {
       pieChartData: [],
+      selected: {},
       barChartData: [],
+      loading: true,
     };
   },
   created() {
@@ -19,11 +21,19 @@ export default {
   },
   methods: {
     async getData() {
+      this.loading = true;
       const res1 = await getPie();
       const res2 = await getHistogram();
       this.pieChartData = [];
       for (let key in res1[0]) {
-        this.pieChartData.push({ value: res1[0][key], name: key });
+        this.pieChartData.push({
+          value: res1[0][key],
+          name: key?.substring(0, 10),
+        });
+      }
+      for (let i = 0; i < this.pieChartData.length; i++) {
+        let name = this.pieChartData[i].name;
+        this.selected[name] = i < 7; //限制图表中起始显示10个，这里必须保证 name 不为空
       }
       // for (let key in res1[0]) {
       //   this.barChartData.push({ value: res1[0][key], name: key });
@@ -31,6 +41,7 @@ export default {
       this.barChartData = res2;
       this.pieInit();
       this.barInit();
+      this.loading = false;
       console.log("pieChartData", this.pieChartData);
       console.log("barChartData", this.barChartData);
     },
@@ -51,6 +62,8 @@ export default {
           orient: "horizontal",
           bottom: "2%",
           icon: "circle",
+          type: "scroll",
+          selected: this.selected,
         },
         series: [
           {
@@ -106,6 +119,18 @@ export default {
           bottom: "12%",
           containLabel: true,
         },
+        dataZoom: [
+          {
+            type: "inside",
+            show: false,
+            xAxisIndex: [0],
+            start: 0,
+            end: 50,
+            // textStyle: {
+            //   color: "#ccd7d7",
+            // },
+          },
+        ],
         xAxis: {
           type: "category",
           axisLine: {