From b9664a6dcbe4c962a6d623d705255c7209a38854 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AA=86=E4=B9=90?= <342503599@qq.com>
Date: Wed, 3 Aug 2022 18:42:55 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B9=96=E9=87=8C=E5=A4=A7=E5=B1=8F(=E8=BF=9B?=
 =?UTF-8?q?=E5=BA=A6=E8=AE=A1=E5=88=92):=E5=AE=8C=E6=88=90problemChart?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=B0=81=E8=A3=85=20=E8=B4=A8=E9=87=8F?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../jChart/pie/problemChart.vue               | 116 ++++++++++++++++++
 .../projectHuScreen/jChart/pie/progress.vue   |   2 +-
 .../projectHuScreen/planProgress/index.vue    |   2 +-
 .../planProgress/leftBottom.vue               |  24 +++-
 .../projectHuScreen/planProgress/leftTop.vue  |   6 +-
 .../projectHuli/intelligentManage.vue         |   4 +-
 .../projectHuli/qualityProblem.vue            | 108 +++-------------
 .../projectHuli/videoPhoto.vue                |   2 +-
 8 files changed, 160 insertions(+), 104 deletions(-)
 create mode 100644 src/views/projectAdmin/dataBoard/projectHuScreen/jChart/pie/problemChart.vue

diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/jChart/pie/problemChart.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/jChart/pie/problemChart.vue
new file mode 100644
index 00000000..36915069
--- /dev/null
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/jChart/pie/problemChart.vue
@@ -0,0 +1,116 @@
+<template>
+<!-- 质量问题 -->
+    <div class="myChart" ref="myChart" />
+</template>
+
+<script>
+import echarts from "echarts4";
+export default {
+  props: {
+    title: {
+      type: Object,
+      default: () => ({
+        text: '',
+        subTitle: '',
+        x: '48%',
+        y: '36%'
+      })
+    },
+    data: {
+      type: Array,
+      default: () => [{ value: 1, name: '' }]
+    },
+    color: {
+      type: Array,
+      default: () => ['#3cabfd','#57ec72','#f294c6','#f43a8d','#6ee4f0']
+    },
+  },
+  data() {
+    return {
+
+    };
+  },
+  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%' ,
+          show: true,
+          text: this.title.text,
+          subtext: this.title.subTitle,
+          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: true,
+          icon: 'circle',
+          textStyle: {
+            color: '#ffffff',
+            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);
+    },
+  },
+
+}
+</script>
+
+<style lang="less" scoped>
+  .myChart {
+    width: 100%;
+    height: 100%;
+  }
+
+</style>
\ No newline at end of file
diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/jChart/pie/progress.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/jChart/pie/progress.vue
index 8c620b1b..0ec19267 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/jChart/pie/progress.vue
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/jChart/pie/progress.vue
@@ -74,7 +74,7 @@ export default {
     align-items: center;
     .box{
       text-align: center;
-      margin-right: 5.5%;
+      margin-right: 4.9%;
     }
     .title{
       font-size: 14px;
diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/index.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/index.vue
index 970bf171..5743acbd 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/index.vue
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/index.vue
@@ -9,7 +9,7 @@
             <leftCenter title="状态统计" />
       </div>
       <div class="leftBottom">
-            <leftCenter title="质量问题" />
+            <leftBottom title="质量问题" />
       </div>
     </div>
     <div class="centerBox">
diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/leftBottom.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/leftBottom.vue
index b7b6db70..7938cc91 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/leftBottom.vue
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/leftBottom.vue
@@ -1,14 +1,26 @@
 <template>
 <!-- 质量问题 -->
-<div class="container">
+<div class="containerBox">
     <div class="titleTxt">{{ title }}</div>
-
+    <div class="myChart">
+      <problemChart 
+      :title="{ text: 654, subTitle: '本周总任务' }" 
+      :color="['#3cabfd','#57ec72','#f294c6','#f43a8d','#6ee4f0']"
+      :data="[
+            { value: 45, name: '未开始' },
+            { value: 5, name: '未开始延期' },
+            { value: 15, name: '进行中' },
+            { value: 10, name: '执行中延期' },
+            { value: 45, name: '完成' }
+          ]" />
+    </div>
 </div>
 </template>
 
 <script>
+import problemChart from '../jChart/pie/problemChart.vue'
 export default {
-
+components:{problemChart},
   props: {
     title: {
       type: String,
@@ -26,7 +38,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.container {
+.containerBox {
   width: 100%;
   height: 100%;
   border: 1px solid #0081c3;
@@ -37,6 +49,10 @@ export default {
     margin-top: 5px;
     margin-left: 5px;
   }
+  .myChart{
+    width: 100%;
+    height: 100%;
+  }
 }
 </style>
 
diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/leftTop.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/leftTop.vue
index ba43f57c..bd5121fe 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/leftTop.vue
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/leftTop.vue
@@ -18,21 +18,21 @@
     </div>
     <div class="charts">
       <div class="chart">
-        <JRingChart title="89%" subTitle="总进度" :color="['#547ced','#162a51']" 
+        <JRingChart :title="{ text: '89%', subTitle: '总进度' }" :color="['#547ced','#162a51']" 
         :data="[
             { value: 7, name: '' },
             { value: 3, name: '' }
           ]"/>
       </div>
       <div class="chart">
-        <JRingChart title="89%" subTitle="总进度" :color="['#5be1f5','#193f54']" 
+        <JRingChart :title="{ text: '89%', subTitle: '总进度' }" :color="['#5be1f5','#193f54']" 
         :data="[
             { value: 3, name: '' },
             { value: 5, name: '' }
           ]"/>
       </div>
       <div class="chart">
-        <JRingChart title="89%" subTitle="总进度" :color="['#fe6b7e','#39273d']" 
+        <JRingChart :title="{ text: '89%', subTitle: '总进度' }" :color="['#fe6b7e','#39273d']" 
         :data="[
             { value: 4, name: '' },
             { value: 6, name: '' }
diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/projectHuli/intelligentManage.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/projectHuli/intelligentManage.vue
index 1943e6f5..ae0ca15f 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/projectHuli/intelligentManage.vue
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/projectHuli/intelligentManage.vue
@@ -89,8 +89,8 @@ export default {
     margin-left: 5px;
   }
 .myChart {
-    width: 100%;
-    height: 100%;
+    width: 95%;
+    height: 90%;
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/projectHuli/qualityProblem.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/projectHuli/qualityProblem.vue
index dfceaf00..a415e98a 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/projectHuli/qualityProblem.vue
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/projectHuli/qualityProblem.vue
@@ -1,113 +1,37 @@
 <template>
 <!-- 质量问题 -->
-  <div class="qualityProblem">
+  <div class="containerBox">
     <div class="titleTxt">{{ title }}</div>
-    <div class="myChart" ref="myChart" />
+    <div class="myChart">
+      <problemChart 
+      :title="{  subTitle: '隐患类别', y: '30%'}" 
+      :color="['#3cabfd', '#58ec72', '#f294c6', '#f43a8d', '#6ee4f0']" 
+      :data="[
+            { value: 15, name: '文明施工' },
+            { value: 2, name: '未分类' },
+            { value: 5, name: '安全管理' },
+            { value: 6, name: '施工安全' },
+            { value: 20, name: '基础工程' },
+          ]" />
+    </div>
   </div>
 </template>
 
 <script>
-import echarts from "echarts4";
+import problemChart from '../jChart/pie/problemChart.vue'
 export default {
+  components:{problemChart},
   props: {
     title: {
       type: String,
       default: "default title"
     }
   },
-  data() {
-    return {
-
-    };
-  },
-  mounted(){
-    this.initMyChart();
-  },
-  methods:{
-     initMyChart() {
-      const myChart = echarts.init(this.$refs.myChart);
-      const option = {
-        title: {
-          subtext: "质量问题",
-          textAlign: 'center',
-          x: '29%',
-          y: '43%',
-          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: true,
-          icon: 'circle',
-          textStyle: {
-            color: '#ffffff',
-            fontSize: 14,
-          }
-        },
-        color: ['#3cabfd', '#58ec72', '#f294c6', '#f43a8d', '#6ee4f0',],
-        series: [
-          {
-            type: "pie",
-            radius: ["50%", "65%"],
-            center: ['30%', '50%'],
-            avoidLabelOverlap: true,
-            // itemStyle: {
-            //   borderRadius: 8,
-            //   borderColor: '#11316c',
-            //   borderWidth: 6,
-            // },
-            label: {
-              show: false,
-              position: "center",
-            },
-            emphasis: {
-              label: {
-                show: false,
-                fontSize: "20",
-                color: '#fff',
-                fontWeight: "bold",
-              },
-              scaleSize: 12,
-            },
-            labelLine: {
-              show: false,
-            },
-            data: [
-              { value: 15, name: "文明施工" },
-              { value: 2, name: "未分类" },
-              { value: 5, name: "安全管理" },
-              { value: 6, name: "施工安全" },
-              { value: 20, name: "基础工程" },
-            ],
-          },
-        ],
-      };
-
-      myChart.setOption(option);
-    },
-  },
-
 }
 </script>
 
 <style lang="less" scoped>
-.qualityProblem {
+.containerBox {
   width: 100%;
   height: 100%;
   border: 1px solid #0081c3;
diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/projectHuli/videoPhoto.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/projectHuli/videoPhoto.vue
index fa888730..35a9aeaa 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/projectHuli/videoPhoto.vue
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/projectHuli/videoPhoto.vue
@@ -2,7 +2,7 @@
 <!-- 视频宣传 -->
   <div class="videoPhoto">
     <div class="titleTxt">{{ title }}</div>
-    <img src="@/assets/images/projectImg/videoPic.png" alt="" />
+    <img style="height:85%;width:90%; margin-left:5%; margin-top:2%;" src="@/assets/images/projectImg/videoPic.png" alt="" />
   </div>
 </template>