From b3bc8c6dfd30346161d4a1b4db312fa0efc0650e Mon Sep 17 00:00:00 2001
From: helloDy <1615073571@qq.com>
Date: Wed, 21 Sep 2022 14:41:05 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B4=A8=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/quality/components/monthBar.vue  | 32 +++++++++---
 src/pages/quality/components/monthPie.vue  | 54 ++++++++++++++++----
 src/pages/quality/components/monthPies.vue | 48 ++++++++++++------
 src/pages/quality/components/swipeBar.vue  | 30 +++++++++---
 src/pages/quality/components/swipePie.vue  | 57 +++++++++++++++++-----
 src/pages/quality/components/swipePies.vue | 51 ++++++++++++-------
 6 files changed, 205 insertions(+), 67 deletions(-)

diff --git a/src/pages/quality/components/monthBar.vue b/src/pages/quality/components/monthBar.vue
index ea761cd..131ab1d 100644
--- a/src/pages/quality/components/monthBar.vue
+++ b/src/pages/quality/components/monthBar.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="content">
-    <div class="card" style="border-bottom-right-radius: 20%">
+    <div class="card" style="border-bottom-right-radius: 40px">
       <p class="chartTitle">D产线</p>
       <div class="imgcss">
         <div class="img-left"></div>
@@ -8,7 +8,7 @@
       </div>
       <div id="monthPie" class="bar"></div>
     </div>
-    <div class="card" style="border-bottom-left-radius: 20%">
+    <div class="card" style="border-bottom-left-radius: 40px; margin-left: 0.07rem">
       <p class="chartTitle">E产线</p>
       <div class="imgcss">
         <div class="img-left"></div>
@@ -52,12 +52,30 @@ export default {
             top: '15%',
             right: '10%'
           },
+          title: {
+            text: '451',
+            subtext: '合计',
+            left: '33%',
+            top: '33%',
+            textAlign: 'center',
+            textStyle: {
+              color: '#276BFF',
+              fontSize: '0.27rem',
+              height: '0.39rem'
+            },
+            subtextStyle: {
+              color: '#276BFF',
+              fontSize: '0.16rem',
+              align: 'center',
+              verticalAlign: 'top'
+            }
+          },
           color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'],
           series: [
             {
               center: ['35%', '43%'],
               type: 'pie',
-              radius: '75%',
+              radius: ['50%', '75%'],
               avoidLabelOverlap: false,
               label: {
                 show: false,
@@ -66,7 +84,7 @@ export default {
               },
               emphasis: {
                 label: {
-                  show: true,
+                  show: false,
                   fontSize: '20',
                   fontWeight: 'bold'
                 }
@@ -157,15 +175,15 @@ export default {
 <style lang="scss" scoped>
 .content{
     display: flex;
-    justify-content: space-around;
+    justify-content: center;
     margin-top: 0.1rem;
     font-size: 0.135rem;
 
     .card{
-      width: 3.37rem;
+      width: 3.65rem;
       height: 63vh;
       background-color: white;
-      border-radius: 5%;
+      border-radius: 14px;
       text-align: center;
       color: #276BFF;
       font-size: 0.16rem;
diff --git a/src/pages/quality/components/monthPie.vue b/src/pages/quality/components/monthPie.vue
index 5b39f4c..0be552f 100644
--- a/src/pages/quality/components/monthPie.vue
+++ b/src/pages/quality/components/monthPie.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="content">
-    <div class="card" style="border-bottom-right-radius: 20%">
+    <div class="card" style="border-bottom-right-radius: 40px">
       <p class="chartTitle">B产线</p>
       <div class="imgcss">
         <div class="img-left"></div>
@@ -8,7 +8,7 @@
       </div>
       <div id="monthB" class="bar"></div>
     </div>
-    <div class="card" style="border-bottom-left-radius: 20%">
+    <div class="card" style="border-bottom-left-radius: 40px; margin-left: 0.07rem">
       <p class="chartTitle">C产线</p>
       <div class="imgcss">
         <div class="img-left"></div>
@@ -52,12 +52,30 @@ export default {
             top: '15%',
             right: '10%'
           },
+          title: {
+            text: '454',
+            subtext: '合计',
+            left: '33%',
+            top: '33%',
+            textAlign: 'center',
+            textStyle: {
+              color: '#276BFF',
+              fontSize: '0.27rem',
+              height: '0.39rem'
+            },
+            subtextStyle: {
+              color: '#276BFF',
+              fontSize: '0.16rem',
+              align: 'center',
+              verticalAlign: 'top'
+            }
+          },
           color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'],
           series: [
             {
               center: ['35%', '43%'],
               type: 'pie',
-              radius: '75%',
+              radius: ['50%', '75%'],
               avoidLabelOverlap: false,
               label: {
                 show: false,
@@ -66,7 +84,7 @@ export default {
               },
               emphasis: {
                 label: {
-                  show: true,
+                  show: false,
                   fontSize: '20',
                   fontWeight: 'bold'
                 }
@@ -98,12 +116,30 @@ export default {
             top: '15%',
             right: '10%'
           },
+          title: {
+            text: '456',
+            subtext: '合计',
+            left: '33%',
+            top: '33%',
+            textAlign: 'center',
+            textStyle: {
+              color: '#276BFF',
+              fontSize: '0.27rem',
+              height: '0.39rem'
+            },
+            subtextStyle: {
+              color: '#276BFF',
+              fontSize: '0.16rem',
+              align: 'center',
+              verticalAlign: 'top'
+            }
+          },
           color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'],
           series: [
             {
               center: ['35%', '43%'],
               type: 'pie',
-              radius: '75%',
+              radius: ['50%', '75%'],
               avoidLabelOverlap: false,
               label: {
                 show: false,
@@ -112,7 +148,7 @@ export default {
               },
               emphasis: {
                 label: {
-                  show: true,
+                  show: false,
                   fontSize: '20',
                   fontWeight: 'bold'
                 }
@@ -139,15 +175,15 @@ export default {
 <style lang="scss" scoped>
 .content{
     display: flex;
-    justify-content: space-around;
+    justify-content: center;
     margin-top: 0.1rem;
     font-size: 0.135rem;
 
     .card{
-      width: 3.4rem;
+      width: 3.65rem;
       height: 63vh;
       background-color: white;
-      border-radius: 5%;
+      border-radius: 14px;
       text-align: center;
       color: #276BFF;
       font-size: 0.16rem;
diff --git a/src/pages/quality/components/monthPies.vue b/src/pages/quality/components/monthPies.vue
index 83b1519..25247c6 100644
--- a/src/pages/quality/components/monthPies.vue
+++ b/src/pages/quality/components/monthPies.vue
@@ -1,14 +1,6 @@
 <template>
   <div class="content">
-    <div class="card" style="border-bottom-right-radius: 20%">
-      <p class="chartTitle">A产线</p>
-      <div class="imgcss">
-        <div class="img-left"></div>
-        <div class="img-right"></div>
-      </div>
-      <div id="monthA" class="bar"></div>
-    </div>
-    <div class="card" style="border-bottom-left-radius: 20%">
+    <div class="card" style="border-bottom-right-radius: 40px">
       <p class="chartTitle">缺陷总量排名</p>
       <div class="imgcss">
         <div class="img-left"></div>
@@ -16,6 +8,14 @@
       </div>
       <div id="monthAll" class="bar"></div>
     </div>
+     <div class="card" style="border-bottom-left-radius: 40px; margin-left: 0.07rem">
+      <p class="chartTitle">A产线</p>
+      <div class="imgcss">
+        <div class="img-left"></div>
+        <div class="img-right"></div>
+      </div>
+      <div id="monthA" class="bar"></div>
+    </div>
   </div>
 </template>
 
@@ -45,7 +45,7 @@ export default {
       this.chart.setOption(
         {
           grid: {
-            left: 50,
+            left: 60,
             top: 23
           },
           xAxis: {
@@ -94,12 +94,30 @@ export default {
             top: '15%',
             right: '10%'
           },
+          title: {
+            text: '454',
+            subtext: '合计',
+            left: '33%',
+            top: '33%',
+            textAlign: 'center',
+            textStyle: {
+              color: '#276BFF',
+              fontSize: '0.27rem',
+              height: '0.39rem'
+            },
+            subtextStyle: {
+              color: '#276BFF',
+              fontSize: '0.16rem',
+              align: 'center',
+              verticalAlign: 'top'
+            }
+          },
           color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'],
           series: [
             {
               center: ['35%', '43%'],
               type: 'pie',
-              radius: '75%',
+              radius: ['50%', '75%'],
               avoidLabelOverlap: false,
               label: {
                 show: false,
@@ -108,7 +126,7 @@ export default {
               },
               emphasis: {
                 label: {
-                  show: true,
+                  show: false,
                   fontSize: '20',
                   fontWeight: 'bold'
                 }
@@ -135,15 +153,15 @@ export default {
 <style lang="scss" scoped>
 .content{
     display: flex;
-    justify-content: space-around;
+    justify-content: center;
     margin-top: 0.1rem;
     font-size: 0.135rem;
 
     .card{
-      width: 3.4rem;
+      width: 3.65rem;
       height: 63vh;
       background-color: white;
-      border-radius: 5%;
+      border-radius: 14px;
       text-align: center;
       color: #276BFF;
       font-size: 0.16rem;
diff --git a/src/pages/quality/components/swipeBar.vue b/src/pages/quality/components/swipeBar.vue
index fc08178..0cfc128 100644
--- a/src/pages/quality/components/swipeBar.vue
+++ b/src/pages/quality/components/swipeBar.vue
@@ -8,7 +8,7 @@
       </div>
       <div id="bar" class="bar"></div>
     </div>
-    <div class="card" style="border-bottom-left-radius: 40px">
+    <div class="card" style="border-bottom-left-radius: 40px; margin-left: 0.07rem">
       <p class="chartTitle">E产线</p>
       <div class="imgcss">
         <div class="img-left"></div>
@@ -52,12 +52,30 @@ export default {
             top: '15%',
             right: '10%'
           },
+          title: {
+            text: '455',
+            subtext: '合计',
+            left: '33%',
+            top: '33%',
+            textAlign: 'center',
+            textStyle: {
+              color: '#276BFF',
+              fontSize: '0.27rem',
+              height: '0.39rem'
+            },
+            subtextStyle: {
+              color: '#276BFF',
+              fontSize: '0.16rem',
+              align: 'center',
+              verticalAlign: 'top'
+            }
+          },
           color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'],
           series: [
             {
               center: ['35%', '43%'],
               type: 'pie',
-              radius: '75%',
+              radius: ['50%', '75%'],
               avoidLabelOverlap: false,
               label: {
                 show: false,
@@ -66,7 +84,7 @@ export default {
               },
               emphasis: {
                 label: {
-                  show: true,
+                  show: false,
                   fontSize: '20',
                   fontWeight: 'bold'
                 }
@@ -99,7 +117,7 @@ export default {
             right: '10%'
           },
           title: {
-            text: '452',
+            text: '456',
             subtext: '合计',
             left: '33%',
             top: '33%',
@@ -154,12 +172,12 @@ export default {
 <style lang="scss" scoped>
 .content{
     display: flex;
-    justify-content: space-around;
+    justify-content: center;
     margin-top: 0.1rem;
     font-size: 0.135rem;
 
     .card{
-      width: 3.62rem;
+      width: 3.65rem;
       height: 63vh;
       background-color: white;
       border-radius: 14px;
diff --git a/src/pages/quality/components/swipePie.vue b/src/pages/quality/components/swipePie.vue
index 5bd763a..dce9c89 100644
--- a/src/pages/quality/components/swipePie.vue
+++ b/src/pages/quality/components/swipePie.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="content">
-    <div class="card" style="border-bottom-right-radius: 20%">
+    <div class="card" style="border-bottom-right-radius: 40px">
       <p class="chartTitle">B产线</p>
       <div class="imgcss">
         <div class="img-left"></div>
@@ -8,7 +8,7 @@
       </div>
       <div id="pie1" class="bar"></div>
     </div>
-    <div class="card" style="border-bottom-left-radius: 20%">
+    <div class="card" style="border-bottom-left-radius: 40px;  margin-left: 0.07rem">
       <p class="chartTitle">C产线</p>
       <div class="imgcss">
         <div class="img-left"></div>
@@ -52,12 +52,30 @@ export default {
             top: '15%',
             right: '10%'
           },
+          title: {
+            text: '454',
+            subtext: '合计',
+            left: '33%',
+            top: '33%',
+            textAlign: 'center',
+            textStyle: {
+              color: '#276BFF',
+              fontSize: '0.27rem',
+              height: '0.39rem'
+            },
+            subtextStyle: {
+              color: '#276BFF',
+              fontSize: '0.16rem',
+              align: 'center',
+              verticalAlign: 'top'
+            }
+          },
           color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'],
           series: [
             {
               center: ['35%', '43%'],
               type: 'pie',
-              radius: '75%',
+              radius: ['50%', '75%'],
               avoidLabelOverlap: false,
               label: {
                 show: false,
@@ -66,7 +84,7 @@ export default {
               },
               emphasis: {
                 label: {
-                  show: true,
+                  show: false,
                   fontSize: '20',
                   fontWeight: 'bold'
                 }
@@ -98,12 +116,30 @@ export default {
             top: '15%',
             right: '10%'
           },
+          title: {
+            text: '453',
+            subtext: '合计',
+            left: '33%',
+            top: '33%',
+            textAlign: 'center',
+            textStyle: {
+              color: '#276BFF',
+              fontSize: '0.27rem',
+              height: '0.39rem'
+            },
+            subtextStyle: {
+              color: '#276BFF',
+              fontSize: '0.16rem',
+              align: 'center',
+              verticalAlign: 'top'
+            }
+          },
           color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'],
           series: [
             {
               center: ['35%', '43%'],
               type: 'pie',
-              radius: '75%',
+              radius: ['50%', '75%'],
               avoidLabelOverlap: false,
               label: {
                 show: false,
@@ -112,14 +148,11 @@ export default {
               },
               emphasis: {
                 label: {
-                  show: true,
+                  show: false,
                   fontSize: '20',
                   fontWeight: 'bold'
                 }
               },
-              labelLine: {
-                show: false
-              },
               data: [
                 { value: 123, name: '擦划伤' },
                 { value: 122, name: '脏污' },
@@ -139,15 +172,15 @@ export default {
 <style lang="scss" scoped>
 .content{
     display: flex;
-    justify-content: space-around;
+    justify-content: center;
     margin-top: 0.1rem;
     font-size: 0.135rem;
 
     .card{
-      width: 3.4rem;
+      width: 3.65rem;
       height: 63vh;
       background-color: white;
-      border-radius: 5%;
+      border-radius: 14px;
       text-align: center;
       color: #276BFF;
       font-size: 0.16rem;
diff --git a/src/pages/quality/components/swipePies.vue b/src/pages/quality/components/swipePies.vue
index d0adb0f..0289c45 100644
--- a/src/pages/quality/components/swipePies.vue
+++ b/src/pages/quality/components/swipePies.vue
@@ -1,14 +1,6 @@
 <template>
   <div class="content">
-    <div class="card" style="border-bottom-right-radius: 20%">
-      <p class="chartTitle">A产线</p>
-      <div class="imgcss">
-        <div class="img-left"></div>
-        <div class="img-right"></div>
-      </div>
-      <div id="pieDiv" class="bar"></div>
-    </div>
-    <div class="card" style="border-bottom-left-radius: 20%">
+    <div class="card" style="border-bottom-right-radius: 40px">
       <p class="chartTitle">缺陷总量排名</p>
       <div class="imgcss">
         <div class="img-left"></div>
@@ -16,6 +8,14 @@
       </div>
       <div id="barDiv" class="bar"></div>
     </div>
+    <div class="card" style="border-bottom-left-radius: 40px; margin-left: 0.07rem">
+      <p class="chartTitle">A产线</p>
+      <div class="imgcss">
+        <div class="img-left"></div>
+        <div class="img-right"></div>
+      </div>
+      <div id="pieDiv" class="bar"></div>
+    </div>
   </div>
 </template>
 
@@ -45,7 +45,7 @@ export default {
       this.chart.setOption(
         {
           grid: {
-            left: 50,
+            left: 60,
             top: 23
           },
           xAxis: {
@@ -96,12 +96,30 @@ export default {
             top: '15%',
             right: '10%'
           },
+          title: {
+            text: '452',
+            subtext: '合计',
+            left: '33%',
+            top: '33%',
+            textAlign: 'center',
+            textStyle: {
+              color: '#276BFF',
+              fontSize: '0.27rem',
+              height: '0.39rem'
+            },
+            subtextStyle: {
+              color: '#276BFF',
+              fontSize: '0.16rem',
+              align: 'center',
+              verticalAlign: 'top'
+            }
+          },
           color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'],
           series: [
             {
               center: ['35%', '43%'],
               type: 'pie',
-              radius: '75%',
+              radius: ['50%', '75%'],
               avoidLabelOverlap: false,
               label: {
                 show: false,
@@ -110,14 +128,11 @@ export default {
               },
               emphasis: {
                 label: {
-                  show: true,
+                  show: false,
                   fontSize: '20',
                   fontWeight: 'bold'
                 }
               },
-              labelLine: {
-                show: false
-              },
               data: [
                 { value: 123, name: '擦划伤' },
                 { value: 122, name: '脏污' },
@@ -137,15 +152,15 @@ export default {
 <style lang="scss" scoped>
 .content{
     display: flex;
-    justify-content: space-around;
+    justify-content: center;
     margin-top: 0.1rem;
     font-size: 0.135rem;
 
     .card{
-      width: 3.4rem;
+      width: 3.65rem;
       height: 63vh;
       background-color: white;
-      border-radius: 5%;
+      border-radius: 14px;
       text-align: center;
       color: #276BFF;
       font-size: 0.16rem;