From f81a659ec41ec6ccd021eb4f4dd9a237919e3a7f Mon Sep 17 00:00:00 2001
From: Jack <1638169491@qq.com>
Date: Fri, 5 Aug 2022 10:14:02 +0800
Subject: [PATCH 1/4] =?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=E6=9B=B4?=
 =?UTF-8?q?=E6=94=B9=E5=8D=87=E9=99=8D=E6=9C=BA=E8=AE=BE=E5=A4=87=EF=BC=8C?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0legend?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../digitalSite/components/DeviceCard.vue     |  1 +
 .../projectHuScreen/digitalSite/rightTop.vue  | 32 ++++++++++++++++++-
 2 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/components/DeviceCard.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/components/DeviceCard.vue
index 50b838f2..53eb4b1c 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/components/DeviceCard.vue
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/components/DeviceCard.vue
@@ -50,6 +50,7 @@ export default {
 
 <style lang="less" scoped>
 .h-device-card {
+  position: relative;
   width: 100%;
   height: 100%;
   .counts {
diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/rightTop.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/rightTop.vue
index 62d30fd1..2207d32b 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/rightTop.vue
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/rightTop.vue
@@ -1,6 +1,10 @@
 <template>
   <Card :title="title">
     <DeviceCard :leftCount="{ value: 22, label: '塔吊设备数' }" :rightCount="{ value: 65, label: '今日报警数' }">
+      <div class="legend">
+        <div class="item">报警数</div>
+        <div class="item">离线</div>
+      </div>
       <JBarChart :tooltip="{}" :xData="xData" :yData="yData" />
     </DeviceCard>
   </Card>
@@ -42,4 +46,30 @@ export default {
 }
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.legend {
+  position: absolute;
+  top: 76px;
+  left: 10px;
+  display: flex;
+  .item {
+    margin-right: 36px;
+    font-size: 12px;
+    display: flex;
+    align-items: center;
+    &::before {
+      margin-right: 8px;
+      content: '';
+      width: 16px;
+      height: 6px;
+      border-radius: 2px;
+    }
+    &:first-child:before {
+      background-color: #3cabfd;
+    }
+    &:last-child:before {
+      background-color: #ff6c7f;
+    }
+  }
+}
+</style>

From 65df1404d6b82823182d1def2d87a6d0b46685df Mon Sep 17 00:00:00 2001
From: Jack <1638169491@qq.com>
Date: Fri, 5 Aug 2022 10:16:05 +0800
Subject: [PATCH 2/4] =?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=E6=9B=B4?=
 =?UTF-8?q?=E6=94=B9=E5=A1=94=E5=90=8A=E8=AE=BE=E5=A4=87=EF=BC=8C=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0legend?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../projectHuScreen/digitalSite/leftTop.vue   | 32 ++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/leftTop.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/leftTop.vue
index 62d30fd1..2207d32b 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/leftTop.vue
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/leftTop.vue
@@ -1,6 +1,10 @@
 <template>
   <Card :title="title">
     <DeviceCard :leftCount="{ value: 22, label: '塔吊设备数' }" :rightCount="{ value: 65, label: '今日报警数' }">
+      <div class="legend">
+        <div class="item">报警数</div>
+        <div class="item">离线</div>
+      </div>
       <JBarChart :tooltip="{}" :xData="xData" :yData="yData" />
     </DeviceCard>
   </Card>
@@ -42,4 +46,30 @@ export default {
 }
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.legend {
+  position: absolute;
+  top: 76px;
+  left: 10px;
+  display: flex;
+  .item {
+    margin-right: 36px;
+    font-size: 12px;
+    display: flex;
+    align-items: center;
+    &::before {
+      margin-right: 8px;
+      content: '';
+      width: 16px;
+      height: 6px;
+      border-radius: 2px;
+    }
+    &:first-child:before {
+      background-color: #3cabfd;
+    }
+    &:last-child:before {
+      background-color: #ff6c7f;
+    }
+  }
+}
+</style>

From 37c8a9df85db575bbf496194edabf2a7eeadc1f8 Mon Sep 17 00:00:00 2001
From: Jack <1638169491@qq.com>
Date: Fri, 5 Aug 2022 11:42:39 +0800
Subject: [PATCH 3/4] =?UTF-8?q?=E6=B9=96=E9=87=8C=E5=A4=A7=E5=B1=8F?=
 =?UTF-8?q?=EF=BC=9A=E6=89=A9=E5=B1=95=20jChart/pie/JProblemChart.vue=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../jChart/pie/JProblemChart.vue              | 115 +++++++++---------
 1 file changed, 60 insertions(+), 55 deletions(-)

diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/jChart/pie/JProblemChart.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/jChart/pie/JProblemChart.vue
index 36915069..bbc98546 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/jChart/pie/JProblemChart.vue
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/jChart/pie/JProblemChart.vue
@@ -1,10 +1,10 @@
 <template>
-<!-- 质量问题 -->
-    <div class="myChart" ref="myChart" />
+  <!-- 质量问题 -->
+  <div class="myChart" ref="myChart" />
 </template>
 
 <script>
-import echarts from "echarts4";
+import echarts from 'echarts4'
 export default {
   props: {
     title: {
@@ -22,24 +22,55 @@ export default {
     },
     color: {
       type: Array,
-      default: () => ['#3cabfd','#57ec72','#f294c6','#f43a8d','#6ee4f0']
+      default: () => ['#3cabfd', '#57ec72', '#f294c6', '#f43a8d', '#6ee4f0']
     },
+    centerPie: {
+      type: Object,
+      default: () => null
+    }
   },
   data() {
-    return {
+    return {}
+  },
+  mounted() {
+    this.initMyChart()
+  },
+  methods: {
+    initMyChart() {
+      const myChart = echarts.init(this.$refs.myChart)
+      const { data, centerPie } = this
+      const setSeries = ((data, centerPie) => {
+        const series = [
+          {
+            type: 'pie',
+            radius: ['50%', '65%'],
+            center: ['30%', '50%'],
+            avoidLabelOverlap: true,
+            label: { show: false },
+            emphasis: {
+              label: { show: false }
+            },
+            labelLine: { show: false },
+            data
+          }
+        ]
+        if (centerPie) {
+          series.push({
+            type: 'pie',
+            roseType: 'area',
+            label: { show: false },
+            color: centerPie.color,
+            radius: centerPie.radius,
+            data: centerPie.data
+          })
+        }
+        return series
+      })(data, centerPie)
 
-    };
-  },
-  mounted(){
-    this.initMyChart();
-  },
-  methods:{
-     initMyChart() {
-      const myChart = echarts.init(this.$refs.myChart);
       const option = {
         title: {
-          x: this.title.x || '29%' ,
-          y: this.title.y || '43%' ,
+          x: this.title.x || '29%',
+          y: this.title.y || '43%',
           show: true,
           text: this.title.text,
           subtext: this.title.subTitle,
@@ -47,16 +78,16 @@ export default {
           textStyle: {
             fontSize: 20,
             fontWeight: 'normal',
-            color: '#fff',
+            color: '#fff'
           },
           subtextStyle: {
             fontSize: 16,
             fontWeight: 'normal',
             color: '#fff'
-          },
+          }
         },
         tooltip: {
-          trigger: "item",
+          trigger: 'item'
         },
         legend: {
           type: 'scroll',
@@ -69,48 +100,22 @@ export default {
           icon: 'circle',
           textStyle: {
             color: '#ffffff',
-            fontSize: 14,
+            fontSize: 14
           }
         },
         color: this.color,
-        series: [
-          {
-            type: "pie",
-            radius: ["50%", "65%"],
-            center: ['30%', '50%'],
-            avoidLabelOverlap: true,
-            label: {
-              show: false,
-              position: "center",
-            },
-            emphasis: {
-              label: {
-                show: false,
-                fontSize: "20",
-                color: '#fff',
-                fontWeight: "bold",
-              },
-              scaleSize: 12,
-            },
-            labelLine: {
-              show: false,
-            },
-            data: this.data,
-          },
-        ],
-      };
-
-      myChart.setOption(option);
-    },
-  },
+        series: setSeries
+      }
 
+      myChart.setOption(option)
+    }
+  }
 }
 </script>
 
 <style lang="less" scoped>
-  .myChart {
-    width: 100%;
-    height: 100%;
-  }
-
-</style>
\ No newline at end of file
+.myChart {
+  width: 100%;
+  height: 100%;
+}
+</style>

From e48371f370c7f1e2f02a760cad5d34edcc4b3fe3 Mon Sep 17 00:00:00 2001
From: Jack <1638169491@qq.com>
Date: Fri, 5 Aug 2022 13:50:37 +0800
Subject: [PATCH 4/4] =?UTF-8?q?=E6=B9=96=E9=87=8C=E5=A4=A7=E5=B1=8F?=
 =?UTF-8?q?=EF=BC=9A=E5=9B=9E=E6=BB=9A=20jChart/pie/JProblemChart.vue=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../digitalSite/leftCenter.vue                | 54 ++++++++---------
 .../jChart/pie/JProblemChart.vue              | 59 ++++++++-----------
 2 files changed, 52 insertions(+), 61 deletions(-)

diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/leftCenter.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/leftCenter.vue
index 74e6d586..536ab5c0 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/leftCenter.vue
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/leftCenter.vue
@@ -1,42 +1,42 @@
 <template>
-<!-- 人员概览 -->
-<div class="container">
-    <div class="titleTxt">{{ title }}</div>
-
-</div>
+  <Card :title="title">
+    <JProblemChart
+      :title="{ text: 654, subTitle: '本周总任务', y: '35%' }"
+      :color="['#3cabfd', '#57ec72', '#f294c6', '#f43a8d', '#6ee4f0']"
+      :data="data"
+      :centerPie="centerPie"
+    />
+  </Card>
 </template>
 
 <script>
+import Card from '../components/Card.vue'
+import JProblemChart from '../jChart/pie/JProblemChart.vue'
 export default {
-
+  components: { Card, JProblemChart },
   props: {
     title: {
       type: String,
-      default: "default title"
+      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]
+      }
+    }
+  }
 }
 </script>
 
-<style lang="less" scoped>
-.container {
-  width: 100%;
-  height: 100%;
-  border: 1px solid #0081c3;
-
-  .titleTxt {
-    font-size: 18px;
-    color: #6ee4f0;
-    margin-top: 5px;
-    margin-left: 5px;
-  }
-}
-</style>
-
+<style lang="less" scoped></style>
diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/jChart/pie/JProblemChart.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/jChart/pie/JProblemChart.vue
index bbc98546..c46e5938 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/jChart/pie/JProblemChart.vue
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/jChart/pie/JProblemChart.vue
@@ -23,10 +23,6 @@ export default {
     color: {
       type: Array,
       default: () => ['#3cabfd', '#57ec72', '#f294c6', '#f43a8d', '#6ee4f0']
-    },
-    centerPie: {
-      type: Object,
-      default: () => null
     }
   },
   data() {
@@ -38,35 +34,6 @@ export default {
   methods: {
     initMyChart() {
       const myChart = echarts.init(this.$refs.myChart)
-      const { data, centerPie } = this
-      const setSeries = ((data, centerPie) => {
-        const series = [
-          {
-            type: 'pie',
-            radius: ['50%', '65%'],
-            center: ['30%', '50%'],
-            avoidLabelOverlap: true,
-            label: { show: false },
-            emphasis: {
-              label: { show: false }
-            },
-            labelLine: { show: false },
-            data
-          }
-        ]
-        if (centerPie) {
-          series.push({
-            type: 'pie',
-            roseType: 'area',
-            label: { show: false },
-            color: centerPie.color,
-            radius: centerPie.radius,
-            data: centerPie.data
-          })
-        }
-        return series
-      })(data, centerPie)
-
       const option = {
         title: {
           x: this.title.x || '29%',
@@ -104,7 +71,31 @@ export default {
           }
         },
         color: this.color,
-        series: setSeries
+        series: [
+          {
+            type: 'pie',
+            radius: ['50%', '65%'],
+            center: ['30%', '50%'],
+            avoidLabelOverlap: true,
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: false,
+                fontSize: '20',
+                color: '#fff',
+                fontWeight: 'bold'
+              },
+              scaleSize: 12
+            },
+            labelLine: {
+              show: false
+            },
+            data: this.data
+          }
+        ]
       }
 
       myChart.setOption(option)