质量

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;
     }
   }

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: {

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: {

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;

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: {

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: {

src/pages/quality/quality.vue

@@ -21,25 +21,29 @@
           <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 ? 'day' : 'month'" style="border-radius: 4px 0 0 4px;" @click="changeDate(1)">日</p>
-          <p :class="chooseDate ? 'month' : 'day'" @click="changeDate(0)">月</p>
+          <p :class="chooseDate ? 'month' : 'day'" style="border-radius: 0 4px 4px 0;" @click="changeDate(0)">周</p>
         </div>
       </div>
     </div>
+    <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" indicator-color="white">
+        <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" indicator-color="white">
+        <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,12 +138,40 @@ export default {
           width: 0.64rem;
           background-color: #276BFF;
           border: #88ADFF 1px solid;
-          border-radius: 2px;
-          margin-left: -0.05rem;
         }
       }
     }
   }
+  .content{
+    // display: flex;
+    width: 100%;
+
+    .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%;
 
@@ -136,4 +181,5 @@ export default {
         text-align: center;
       }
     }
+  }
 </style>