From fe7b9d8116dc412bc50a27f84a556c2e49ec7f79 Mon Sep 17 00:00:00 2001
From: helloDy <1615073571@qq.com>
Date: Tue, 20 Sep 2022 16:15:02 +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  |  8 +-
 src/pages/quality/components/monthPies.vue |  7 +-
 src/pages/quality/components/swipeBar.vue  | 41 +++++++---
 src/pages/quality/components/swipePie.vue  |  8 +-
 src/pages/quality/components/swipePies.vue |  7 +-
 src/pages/quality/quality.vue              | 92 ++++++++++++++++------
 7 files changed, 138 insertions(+), 57 deletions(-)

diff --git a/src/pages/quality/components/monthBar.vue b/src/pages/quality/components/monthBar.vue
index 64ca22b..ea761cd 100644
--- a/src/pages/quality/components/monthBar.vue
+++ b/src/pages/quality/components/monthBar.vue
@@ -55,14 +55,14 @@ export default {
           color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'],
           series: [
             {
-              name: 'Access From',
               center: ['35%', '43%'],
               type: 'pie',
               radius: '75%',
               avoidLabelOverlap: false,
               label: {
                 show: false,
-                position: 'center'
+                position: 'center',
+                textBorderColor: 'none'
               },
               emphasis: {
                 label: {
@@ -98,21 +98,39 @@ 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: [
             {
-              name: 'Access From',
               center: ['35%', '43%'],
               type: 'pie',
               radius: ['50%', '75%'],
               avoidLabelOverlap: false,
               label: {
                 show: false,
-                position: 'center'
+                position: 'center',
+                textBorderColor: 'none'
               },
               emphasis: {
                 label: {
-                  show: true,
+                  show: false,
                   fontSize: '20',
                   fontWeight: 'bold'
                 }
@@ -144,7 +162,7 @@ export default {
     font-size: 0.135rem;
 
     .card{
-      width: 3.4rem;
+      width: 3.37rem;
       height: 63vh;
       background-color: white;
       border-radius: 5%;
@@ -180,7 +198,7 @@ export default {
     }
 
     .bar{
-      width: 3.4rem;
+      // width: 4.7rem;
       height: 60vh;
     }
   }
diff --git a/src/pages/quality/components/monthPie.vue b/src/pages/quality/components/monthPie.vue
index fd4f84b..5b39f4c 100644
--- a/src/pages/quality/components/monthPie.vue
+++ b/src/pages/quality/components/monthPie.vue
@@ -55,14 +55,14 @@ export default {
           color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'],
           series: [
             {
-              name: 'Access From',
               center: ['35%', '43%'],
               type: 'pie',
               radius: '75%',
               avoidLabelOverlap: false,
               label: {
                 show: false,
-                position: 'center'
+                position: 'center',
+                textBorderColor: 'none'
               },
               emphasis: {
                 label: {
@@ -101,14 +101,14 @@ export default {
           color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'],
           series: [
             {
-              name: 'Access From',
               center: ['35%', '43%'],
               type: 'pie',
               radius: '75%',
               avoidLabelOverlap: false,
               label: {
                 show: false,
-                position: 'center'
+                position: 'center',
+                textBorderColor: 'none'
               },
               emphasis: {
                 label: {
diff --git a/src/pages/quality/components/monthPies.vue b/src/pages/quality/components/monthPies.vue
index ff74feb..83b1519 100644
--- a/src/pages/quality/components/monthPies.vue
+++ b/src/pages/quality/components/monthPies.vue
@@ -66,7 +66,8 @@ export default {
             barWidth: '35%',
             label: {
               show: true,
-              position: 'top'
+              position: 'top',
+              textBorderColor: 'none'
             },
             itemStyle: {
               color: function (params) {
@@ -96,14 +97,14 @@ export default {
           color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'],
           series: [
             {
-              name: 'Access From',
               center: ['35%', '43%'],
               type: 'pie',
               radius: '75%',
               avoidLabelOverlap: false,
               label: {
                 show: false,
-                position: 'center'
+                position: 'center',
+                textBorderColor: 'none'
               },
               emphasis: {
                 label: {
diff --git a/src/pages/quality/components/swipeBar.vue b/src/pages/quality/components/swipeBar.vue
index 632f5da..fc08178 100644
--- a/src/pages/quality/components/swipeBar.vue
+++ b/src/pages/quality/components/swipeBar.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="bar" class="bar"></div>
     </div>
-    <div class="card" style="border-bottom-left-radius: 20%">
+    <div class="card" style="border-bottom-left-radius: 40px">
       <p class="chartTitle">E产线</p>
       <div class="imgcss">
         <div class="img-left"></div>
@@ -55,14 +55,14 @@ export default {
           color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'],
           series: [
             {
-              name: 'Access From',
               center: ['35%', '43%'],
               type: 'pie',
               radius: '75%',
               avoidLabelOverlap: false,
               label: {
                 show: false,
-                position: 'center'
+                position: 'center',
+                textBorderColor: 'none'
               },
               emphasis: {
                 label: {
@@ -98,28 +98,43 @@ 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: [
             {
-              name: 'Access From',
               center: ['35%', '43%'],
               type: 'pie',
               radius: ['50%', '75%'],
               avoidLabelOverlap: false,
               label: {
                 show: false,
-                position: 'center'
+                position: 'center',
+                textBorderColor: 'none'
               },
               emphasis: {
                 label: {
-                  show: true,
+                  show: false,
                   fontSize: '20',
                   fontWeight: 'bold'
                 }
               },
-              labelLine: {
-                show: false
-              },
               data: [
                 { value: 123, name: '擦划伤' },
                 { value: 122, name: '脏污' },
@@ -144,15 +159,15 @@ export default {
     font-size: 0.135rem;
 
     .card{
-      width: 3.4rem;
+      width: 3.62rem;
       height: 63vh;
       background-color: white;
-      border-radius: 5%;
+      border-radius: 14px;
       text-align: center;
       color: #276BFF;
       font-size: 0.16rem;
       font-weight: 600;
-      opacity: 0.8;
+      opacity: 0.9;
 
       .chartTitle{
         margin: 5vh auto 0.5vh 0.25rem;
diff --git a/src/pages/quality/components/swipePie.vue b/src/pages/quality/components/swipePie.vue
index e9530f4..5bd763a 100644
--- a/src/pages/quality/components/swipePie.vue
+++ b/src/pages/quality/components/swipePie.vue
@@ -55,14 +55,14 @@ export default {
           color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'],
           series: [
             {
-              name: 'Access From',
               center: ['35%', '43%'],
               type: 'pie',
               radius: '75%',
               avoidLabelOverlap: false,
               label: {
                 show: false,
-                position: 'center'
+                position: 'center',
+                textBorderColor: 'none'
               },
               emphasis: {
                 label: {
@@ -101,14 +101,14 @@ export default {
           color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'],
           series: [
             {
-              name: 'Access From',
               center: ['35%', '43%'],
               type: 'pie',
               radius: '75%',
               avoidLabelOverlap: false,
               label: {
                 show: false,
-                position: 'center'
+                position: 'center',
+                textBorderColor: 'none'
               },
               emphasis: {
                 label: {
diff --git a/src/pages/quality/components/swipePies.vue b/src/pages/quality/components/swipePies.vue
index f53ebd7..d0adb0f 100644
--- a/src/pages/quality/components/swipePies.vue
+++ b/src/pages/quality/components/swipePies.vue
@@ -66,7 +66,8 @@ export default {
             barWidth: '35%',
             label: {
               show: true,
-              position: 'top'
+              position: 'top',
+              textBorderColor: 'none'
             },
             itemStyle: {
               // normal: {
@@ -98,14 +99,14 @@ export default {
           color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'],
           series: [
             {
-              name: 'Access From',
               center: ['35%', '43%'],
               type: 'pie',
               radius: '75%',
               avoidLabelOverlap: false,
               label: {
                 show: false,
-                position: 'center'
+                position: 'center',
+                textBorderColor: 'none'
               },
               emphasis: {
                 label: {
diff --git a/src/pages/quality/quality.vue b/src/pages/quality/quality.vue
index 9feed3c..f9d9ce7 100644
--- a/src/pages/quality/quality.vue
+++ b/src/pages/quality/quality.vue
@@ -21,24 +21,28 @@
           <p style="font-size: 0.142rem;">23.12</p>
         </div>
         <div class="date">
-          <p :class="chooseDate ? 'day' : 'month'" @click="changeDate(1)">日</p>
-          <p :class="chooseDate ? 'month' : 'day'" @click="changeDate(0)">月</p>
+          <p :class="chooseDate ? 'day' : 'month'" style="border-radius: 4px 0 0 4px;" @click="changeDate(1)">日</p>
+          <p :class="chooseDate ? 'month' : 'day'" style="border-radius: 0 4px 4px 0;" @click="changeDate(0)">周</p>
         </div>
       </div>
     </div>
-    <div v-if="chooseDate" class="swipDiv">
-      <van-swipe class="my-swipe" indicator-color="white">
-        <van-swipe-item><swipe-pies></swipe-pies></van-swipe-item>
-        <van-swipe-item><swipe-pie></swipe-pie></van-swipe-item>
-        <van-swipe-item><swipe-bar></swipe-bar></van-swipe-item>
-      </van-swipe>
-    </div>
-    <div v-else class="swipDiv">
-      <van-swipe class="my-swipe" indicator-color="white">
-        <van-swipe-item><month-pies></month-pies></van-swipe-item>
-        <van-swipe-item><month-pie></month-pie></van-swipe-item>
-        <van-swipe-item><month-bar></month-bar></van-swipe-item>
-      </van-swipe>
+    <div class="content">
+      <van-button class="arrowButton" @click="prev()"><van-icon name="arrow-left" /></van-button>
+      <div v-if="chooseDate" class="swipDiv">
+        <van-swipe class="my-swipe" ref="swiper" :show-indicators="false">
+          <van-swipe-item><swipe-pies></swipe-pies></van-swipe-item>
+          <van-swipe-item><swipe-pie></swipe-pie></van-swipe-item>
+          <van-swipe-item><swipe-bar></swipe-bar></van-swipe-item>
+        </van-swipe>
+      </div>
+      <div v-else class="swipDiv">
+        <van-swipe class="my-swipe" ref="weekSwiper" :show-indicators="false">
+          <van-swipe-item><month-pies></month-pies></van-swipe-item>
+          <van-swipe-item><month-pie></month-pie></van-swipe-item>
+          <van-swipe-item><month-bar></month-bar></van-swipe-item>
+        </van-swipe>
+      </div>
+      <van-button class="arrowRightButton" @click="next()"><van-icon name="arrow" /></van-button>
     </div>
   </div>
 </template>
@@ -62,6 +66,20 @@ export default {
   methods: {
     changeDate (date) {
       this.chooseDate = date
+    },
+    prev () {
+      if (this.chooseDate === 1) {
+        this.$refs.swiper.prev()
+      } else {
+        this.$refs.weekSwiper.prev()
+      }
+    },
+    next () {
+      if (this.chooseDate === 1) {
+        this.$refs.swiper.next()
+      } else {
+        this.$refs.weekSwiper.next()
+      }
     }
   }
 }
@@ -112,7 +130,6 @@ export default {
           height: 8.4vh;
           width: 0.64rem;
           background-color: #4E9AFF;
-          border-radius: 2px;
           border: #4E9AFF 1px solid;
         }
 
@@ -121,19 +138,48 @@ export default {
           width: 0.64rem;
           background-color: #276BFF;
           border: #88ADFF 1px solid;
-          border-radius: 2px;
-          margin-left: -0.05rem;
         }
       }
     }
   }
-  .swipDiv{
+  .content{
+    // display: flex;
     width: 100%;
 
-    .my-swipe .van-swipe-item {
-      color: #fff;
-      height: 67vh;
-      text-align: center;
+    .arrowButton{
+      position: fixed;
+      z-index: 999;
+      top: 15vh;
+      margin-top: 0.1rem;
+      left: 0;
+      padding: 10px;
+      height: 63vh;
+      width: 0.2rem;
+      border: none;
+      background-color: rgba($color: #e0e0e0, $alpha: 0);
+    }
+
+    .arrowRightButton{
+      position: fixed;
+      z-index: 999;
+      top: 15vh;
+      margin-top: 0.1rem;
+      right: 0;
+      padding: 10px;
+      height: 63vh;
+      width: 0.2rem;
+      border: none;
+      background-color: rgba($color: #e0e0e0, $alpha: 0);
+    }
+
+    .swipDiv{
+      width: 100%;
+
+      .my-swipe .van-swipe-item {
+        color: #fff;
+        height: 67vh;
+        text-align: center;
+      }
     }
   }
 </style>