From c4df3b65d99525b5f34d2e97737b7130e471d4f8 Mon Sep 17 00:00:00 2001
From: Jack <1638169491@qq.com>
Date: Fri, 5 Aug 2022 14:50:11 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E6=B9=96=E9=87=8C=E5=A4=A7=E5=B1=8F(?=
 =?UTF-8?q?=E6=95=B0=E5=AD=97=E5=B7=A5=E5=9C=B0)=EF=BC=9A=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90=20AI=20=E5=88=86=E6=9E=90=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../digitalSite/leftCenter.vue                | 26 +----
 .../jChart/pie/JNestedRingChart.vue           | 95 +++++++++++++++++++
 2 files changed, 99 insertions(+), 22 deletions(-)
 create mode 100644 src/views/projectAdmin/dataBoard/projectHuScreen/jChart/pie/JNestedRingChart.vue

diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/leftCenter.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/leftCenter.vue
index 536ab5c0..a42fe298 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/leftCenter.vue
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/leftCenter.vue
@@ -1,19 +1,14 @@
 <template>
   <Card :title="title">
-    <JProblemChart
-      :title="{ text: 654, subTitle: '本周总任务', y: '35%' }"
-      :color="['#3cabfd', '#57ec72', '#f294c6', '#f43a8d', '#6ee4f0']"
-      :data="data"
-      :centerPie="centerPie"
-    />
+    <JNestedRingChart />
   </Card>
 </template>
 
 <script>
 import Card from '../components/Card.vue'
-import JProblemChart from '../jChart/pie/JProblemChart.vue'
+import JNestedRingChart from '../jChart/pie/JNestedRingChart.vue'
 export default {
-  components: { Card, JProblemChart },
+  components: { Card, JNestedRingChart },
   props: {
     title: {
       type: String,
@@ -21,20 +16,7 @@ export default {
     }
   },
   data() {
-    return {
-      data: [
-        { value: 45, name: '未开始' },
-        { value: 5, name: '未开始延期' },
-        { value: 15, name: '进行中' },
-        { value: 10, name: '执行中延期' },
-        { value: 45, name: '完成' }
-      ],
-      centerPie: {
-        color: ['#0B1B35', '#244D8F'],
-        radius: ['10%', '12%'],
-        data: [30, 40, 30, 40]
-      }
-    }
+    return {}
   }
 }
 </script>
diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/jChart/pie/JNestedRingChart.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/jChart/pie/JNestedRingChart.vue
new file mode 100644
index 00000000..f1642bc0
--- /dev/null
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/jChart/pie/JNestedRingChart.vue
@@ -0,0 +1,95 @@
+<template>
+  <div class="j-nested-ring-chart" ref="jNestedRingChart"></div>
+</template>
+
+<script>
+import echarts from 'echarts4'
+export default {
+  props: {},
+  mounted() {
+    this.jNestedRingChart = echarts.init(this.$refs.jNestedRingChart)
+    this.createChart()
+  },
+  data() {
+    return {
+      jNestedRingChart: null
+    }
+  },
+  methods: {
+    createChart() {
+      const { title } = this
+      const option = {
+        title: {
+          x: '29%',
+          y: '35%',
+          show: true,
+          text: 654,
+          subtext: '本周总任务',
+          textAlign: 'center',
+          textStyle: {
+            fontSize: 20,
+            fontWeight: 'normal',
+            color: '#fff'
+          },
+          subtextStyle: {
+            fontSize: 16,
+            fontWeight: 'normal',
+            color: '#fff'
+          }
+        },
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          type: 'scroll',
+          orient: 'vertical',
+          right: 50,
+          top: 'center',
+          itemWidth: 10,
+          itemHeight: 10,
+          selectedMode: false,
+          icon: 'circle',
+          textStyle: {
+            color: '#ffffff',
+            fontSize: 14
+          }
+        },
+        series: [
+          {
+            type: 'pie',
+            label: false,
+            color: ['#3cabfd', '#57ec72', '#f294c6', '#f43a8d', '#6ee4f0', 'red'],
+            radius: ['65%', '80%'],
+            center: ['30%', '50%'],
+            data: [
+              { value: 45, name: '未戴安全帽' },
+              { value: 5, name: '危险区域闯入' },
+              { value: 15, name: '人员聚集报警' },
+              { value: 10, name: '未穿反光衣' },
+              { value: 45, name: '明火监测报警' },
+              { value: 45, name: '烟雾监测报警' }
+            ]
+          },
+          {
+            type: 'pie',
+            label: false,
+            roseType: 'area',
+            color: ['#0B1B35', '#244D8F'],
+            radius: ['58%', '54%'],
+            center: ['30%', '50%'],
+            data: [30, 40, 30, 40]
+          }
+        ]
+      }
+      this.jNestedRingChart.setOption(option)
+    }
+  }
+}
+</script>
+
+<style>
+.j-nested-ring-chart {
+  width: 100%;
+  height: 100%;
+}
+</style>

From 34bc0c6178f656e7e7c89b6afe6d6dbf2c4ebb54 Mon Sep 17 00:00:00 2001
From: Jack <1638169491@qq.com>
Date: Fri, 5 Aug 2022 15:57:14 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E6=B9=96=E9=87=8C=E5=A4=A7=E5=B1=8F?=
 =?UTF-8?q?=EF=BC=9A=E6=96=B0=E5=A2=9E=20jChart/pie/JNestedRingChart.vue?=
 =?UTF-8?q?=20=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../digitalSite/leftCenter.vue                | 24 ++++++-
 .../jChart/pie/JNestedRingChart.vue           | 66 ++++++++++---------
 2 files changed, 56 insertions(+), 34 deletions(-)

diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/leftCenter.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/leftCenter.vue
index a42fe298..dbac5646 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/leftCenter.vue
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/leftCenter.vue
@@ -1,6 +1,6 @@
 <template>
   <Card :title="title">
-    <JNestedRingChart />
+    <JNestedRingChart :title="{ text: 652, subTitle: '本周总任务' }" :series="series" />
   </Card>
 </template>
 
@@ -16,7 +16,27 @@ export default {
     }
   },
   data() {
-    return {}
+    return {
+      series: [
+        {
+          color: ['#3CABFD', '#F43A8B', '#F294C6', '#56EC6F', '#786FF0', '#6EE4EE'],
+          data: [
+            { value: 45, name: '未戴安全帽' },
+            { value: 5, name: '危险区域闯入' },
+            { value: 15, name: '人员聚集报警' },
+            { value: 10, name: '未穿反光衣' },
+            { value: 45, name: '明火监测报警' },
+            { value: 45, name: '烟雾监测报警' }
+          ]
+        },
+        {
+          roseType: 'area',
+          radius: ['58%', '54%'],
+          color: ['#0B1B35', '#244D8F'],
+          data: [30, 40, 30, 40]
+        }
+      ]
+    }
   }
 }
 </script>
diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/jChart/pie/JNestedRingChart.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/jChart/pie/JNestedRingChart.vue
index f1642bc0..59b42eba 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/jChart/pie/JNestedRingChart.vue
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/jChart/pie/JNestedRingChart.vue
@@ -5,7 +5,22 @@
 <script>
 import echarts from 'echarts4'
 export default {
-  props: {},
+  props: {
+    title: {
+      type: Object,
+      default: () => ({
+        text: '',
+        subTitle: '',
+        x: '48%',
+        y: '36%'
+      })
+    },
+    series: {
+      required: true,
+      type: Array,
+      default: () => []
+    }
+  },
   mounted() {
     this.jNestedRingChart = echarts.init(this.$refs.jNestedRingChart)
     this.createChart()
@@ -17,14 +32,26 @@ export default {
   },
   methods: {
     createChart() {
-      const { title } = this
+      const { title, series } = this
+      const setSeries = (series => {
+        return series.map(item => ({
+          type: 'pie',
+          label: false,
+          center: ['30%', '50%'],
+          radius: item.radius || ['65%', '80%'],
+          roseType: item.roseType,
+          color: item.color,
+          data: item.data
+        }))
+      })(series)
+
       const option = {
         title: {
-          x: '29%',
-          y: '35%',
+          text: title.text,
+          subtext: title.subTitle,
+          x: title.x || '29%',
+          y: title.y || '35%',
           show: true,
-          text: 654,
-          subtext: '本周总任务',
           textAlign: 'center',
           textStyle: {
             fontSize: 20,
@@ -54,32 +81,7 @@ export default {
             fontSize: 14
           }
         },
-        series: [
-          {
-            type: 'pie',
-            label: false,
-            color: ['#3cabfd', '#57ec72', '#f294c6', '#f43a8d', '#6ee4f0', 'red'],
-            radius: ['65%', '80%'],
-            center: ['30%', '50%'],
-            data: [
-              { value: 45, name: '未戴安全帽' },
-              { value: 5, name: '危险区域闯入' },
-              { value: 15, name: '人员聚集报警' },
-              { value: 10, name: '未穿反光衣' },
-              { value: 45, name: '明火监测报警' },
-              { value: 45, name: '烟雾监测报警' }
-            ]
-          },
-          {
-            type: 'pie',
-            label: false,
-            roseType: 'area',
-            color: ['#0B1B35', '#244D8F'],
-            radius: ['58%', '54%'],
-            center: ['30%', '50%'],
-            data: [30, 40, 30, 40]
-          }
-        ]
+        series: setSeries
       }
       this.jNestedRingChart.setOption(option)
     }