日期可切换

src/pages/quality/components/monthBar.vue

@@ -0,0 +1,187 @@
+<template>
+  <div class="content">
+    <div class="card" style="border-bottom-right-radius: 20%">
+      <p class="chartTitle">D产线</p>
+      <div class="imgcss">
+        <div class="img-left"></div>
+        <div class="img-right"></div>
+      </div>
+      <div id="monthPie" class="bar"></div>
+    </div>
+    <div class="card" style="border-bottom-left-radius: 20%">
+      <p class="chartTitle">E产线</p>
+      <div class="imgcss">
+        <div class="img-left"></div>
+        <div class="img-right"></div>
+      </div>
+      <div id="monthCircle" class="bar"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  data () {
+    return {
+      chart: null
+    }
+  },
+  mounted () {
+    this.initChart()
+    this.pieChart()
+  },
+  methods: {
+    beforeDestroy () {
+      if (!this.chart) {
+        return
+      }
+      this.chart.dispose()
+      this.chart = null
+    },
+    initChart () {
+      echarts.init(document.getElementById('monthPie')).setOption(
+        {
+          tooltip: {
+            trigger: 'item'
+          },
+          legend: {
+            orient: 'vertical',
+            icon: 'circle',
+            top: '15%',
+            right: '10%'
+          },
+          color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'],
+          series: [
+            {
+              name: 'Access From',
+              center: ['35%', '43%'],
+              type: 'pie',
+              radius: '75%',
+              avoidLabelOverlap: false,
+              label: {
+                show: false,
+                position: 'center'
+              },
+              emphasis: {
+                label: {
+                  show: true,
+                  fontSize: '20',
+                  fontWeight: 'bold'
+                }
+              },
+              labelLine: {
+                show: false
+              },
+              data: [
+                { value: 123, name: '擦划伤' },
+                { value: 122, name: '脏污' },
+                { value: 67, name: '崩边' },
+                { value: 42, name: '气泡' },
+                { value: 12, name: '凹凸物' }
+              ]
+            }
+          ]
+        }
+      )
+    },
+    pieChart () {
+      echarts.init(document.getElementById('monthCircle')).setOption(
+        {
+          tooltip: {
+            trigger: 'item'
+          },
+          legend: {
+            orient: 'vertical',
+            icon: 'circle',
+            top: '15%',
+            right: '10%'
+          },
+          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'
+              },
+              emphasis: {
+                label: {
+                  show: true,
+                  fontSize: '20',
+                  fontWeight: 'bold'
+                }
+              },
+              labelLine: {
+                show: false
+              },
+              data: [
+                { value: 123, name: '擦划伤' },
+                { value: 122, name: '脏污' },
+                { value: 67, name: '崩边' },
+                { value: 42, name: '气泡' },
+                { value: 12, name: '凹凸物' }
+              ]
+            }
+          ]
+        }
+      )
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.content{
+    display: flex;
+    justify-content: space-around;
+    margin-top: 0.1rem;
+    font-size: 0.135rem;
+
+    .card{
+      width: 3.4rem;
+      height: 63vh;
+      background-color: white;
+      border-radius: 5%;
+      text-align: center;
+      color: #276BFF;
+      font-size: 0.16rem;
+      font-weight: 600;
+      opacity: 0.8;
+
+      .chartTitle{
+        margin: 5vh auto 0.5vh 0.25rem;
+        text-align: left;
+      }
+
+      .imgcss{
+        display: flex;
+        width: 0.8rem;
+        height: 0.8vh;
+        margin-left: 0.25rem;
+
+        .img-left{
+          width: 0.1rem;
+          background-color: #276BFF;
+        }
+
+        .img-right{
+          width: 0.64rem;
+          margin-left: 0.01rem;
+          // background-color: #276BFF;
+          background: linear-gradient(to right, #276BFF 0%, #FFFFFF 100%);
+        }
+      }
+    }
+
+    .bar{
+      width: 3.4rem;
+      height: 60vh;
+    }
+  }
+</style>

src/pages/quality/components/monthPie.vue

@@ -0,0 +1,187 @@
+<template>
+  <div class="content">
+    <div class="card" style="border-bottom-right-radius: 20%">
+      <p class="chartTitle">B产线</p>
+      <div class="imgcss">
+        <div class="img-left"></div>
+        <div class="img-right"></div>
+      </div>
+      <div id="monthB" class="bar"></div>
+    </div>
+    <div class="card" style="border-bottom-left-radius: 20%">
+      <p class="chartTitle">C产线</p>
+      <div class="imgcss">
+        <div class="img-left"></div>
+        <div class="img-right"></div>
+      </div>
+      <div id="monthC" class="bar"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  data () {
+    return {
+      chart: null
+    }
+  },
+  mounted () {
+    this.pieChart1()
+    this.pieChart2()
+  },
+  methods: {
+    beforeDestroy () {
+      if (!this.chart) {
+        return
+      }
+      this.chart.dispose()
+      this.chart = null
+    },
+    pieChart1 () {
+      echarts.init(document.getElementById('monthB')).setOption(
+        {
+          tooltip: {
+            trigger: 'item'
+          },
+          legend: {
+            orient: 'vertical',
+            icon: 'circle',
+            top: '15%',
+            right: '10%'
+          },
+          color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'],
+          series: [
+            {
+              name: 'Access From',
+              center: ['35%', '43%'],
+              type: 'pie',
+              radius: '75%',
+              avoidLabelOverlap: false,
+              label: {
+                show: false,
+                position: 'center'
+              },
+              emphasis: {
+                label: {
+                  show: true,
+                  fontSize: '20',
+                  fontWeight: 'bold'
+                }
+              },
+              labelLine: {
+                show: false
+              },
+              data: [
+                { value: 123, name: '擦划伤' },
+                { value: 122, name: '脏污' },
+                { value: 67, name: '崩边' },
+                { value: 42, name: '气泡' },
+                { value: 12, name: '凹凸物' }
+              ]
+            }
+          ]
+        }
+      )
+    },
+    pieChart2 () {
+      echarts.init(document.getElementById('monthC')).setOption(
+        {
+          tooltip: {
+            trigger: 'item'
+          },
+          legend: {
+            orient: 'vertical',
+            icon: 'circle',
+            top: '15%',
+            right: '10%'
+          },
+          color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'],
+          series: [
+            {
+              name: 'Access From',
+              center: ['35%', '43%'],
+              type: 'pie',
+              radius: '75%',
+              avoidLabelOverlap: false,
+              label: {
+                show: false,
+                position: 'center'
+              },
+              emphasis: {
+                label: {
+                  show: true,
+                  fontSize: '20',
+                  fontWeight: 'bold'
+                }
+              },
+              labelLine: {
+                show: false
+              },
+              data: [
+                { value: 123, name: '擦划伤' },
+                { value: 122, name: '脏污' },
+                { value: 67, name: '崩边' },
+                { value: 42, name: '气泡' },
+                { value: 12, name: '凹凸物' }
+              ]
+            }
+          ]
+        }
+      )
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.content{
+    display: flex;
+    justify-content: space-around;
+    margin-top: 0.1rem;
+    font-size: 0.135rem;
+
+    .card{
+      width: 3.4rem;
+      height: 63vh;
+      background-color: white;
+      border-radius: 5%;
+      text-align: center;
+      color: #276BFF;
+      font-size: 0.16rem;
+      font-weight: 600;
+      opacity: 0.8;
+
+      .chartTitle{
+        margin: 5vh auto 0.5vh 0.25rem;
+        text-align: left;
+      }
+
+      .imgcss{
+        display: flex;
+        width: 0.8rem;
+        height: 0.8vh;
+        margin-left: 0.25rem;
+
+        .img-left{
+          width: 0.1rem;
+          background-color: #276BFF;
+        }
+
+        .img-right{
+          width: 0.64rem;
+          margin-left: 0.01rem;
+          // background-color: #276BFF;
+          background: linear-gradient(to right, #276BFF 0%, #FFFFFF 100%);
+        }
+      }
+    }
+
+    .bar{
+      width: 3.4rem;
+      height: 60vh;
+    }
+  }
+</style>

src/pages/quality/components/monthPies.vue

@@ -0,0 +1,182 @@
+<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%">
+      <p class="chartTitle">缺陷总量排名</p>
+      <div class="imgcss">
+        <div class="img-left"></div>
+        <div class="img-right"></div>
+      </div>
+      <div id="monthAll" class="bar"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  data () {
+    return {
+      chart: null
+    }
+  },
+  mounted () {
+    this.initChart()
+    this.pieChart()
+  },
+  methods: {
+    beforeDestroy () {
+      if (!this.chart) {
+        return
+      }
+      this.chart.dispose()
+      this.chart = null
+    },
+    initChart () {
+      this.chart = echarts.init(document.getElementById('monthAll'))
+      this.chart.setOption(
+        {
+          grid: {
+            left: 50,
+            top: 23
+          },
+          xAxis: {
+            type: 'category',
+            axisLabel: {
+              interval: 0,
+              rotate: 40
+            },
+            data: ['擦划伤', '脏污', '崩边', '气泡', '凹凸物']
+          },
+          yAxis: {
+            type: 'value'
+          },
+          series: [{
+            data: [518, 400, 289, 123, 24],
+            type: 'bar',
+            showBackground: true,
+            barWidth: '35%',
+            label: {
+              show: true,
+              position: 'top'
+            },
+            itemStyle: {
+              color: function (params) {
+                var colorList = ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40']
+                return colorList[params.dataIndex]
+              }
+            },
+            backgroundStyle: {
+              color: 'rgba(220, 220, 220, 0.4)'
+            }
+          }]
+        }
+      )
+    },
+    pieChart () {
+      echarts.init(document.getElementById('monthA')).setOption(
+        {
+          tooltip: {
+            trigger: 'item'
+          },
+          legend: {
+            orient: 'vertical',
+            icon: 'circle',
+            top: '15%',
+            right: '10%'
+          },
+          color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'],
+          series: [
+            {
+              name: 'Access From',
+              center: ['35%', '43%'],
+              type: 'pie',
+              radius: '75%',
+              avoidLabelOverlap: false,
+              label: {
+                show: false,
+                position: 'center'
+              },
+              emphasis: {
+                label: {
+                  show: true,
+                  fontSize: '20',
+                  fontWeight: 'bold'
+                }
+              },
+              labelLine: {
+                show: false
+              },
+              data: [
+                { value: 123, name: '擦划伤' },
+                { value: 122, name: '脏污' },
+                { value: 67, name: '崩边' },
+                { value: 42, name: '气泡' },
+                { value: 12, name: '凹凸物' }
+              ]
+            }
+          ]
+        }
+      )
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.content{
+    display: flex;
+    justify-content: space-around;
+    margin-top: 0.1rem;
+    font-size: 0.135rem;
+
+    .card{
+      width: 3.4rem;
+      height: 63vh;
+      background-color: white;
+      border-radius: 5%;
+      text-align: center;
+      color: #276BFF;
+      font-size: 0.16rem;
+      font-weight: 600;
+      opacity: 0.8;
+
+      .chartTitle{
+        margin: 5vh auto 0.5vh 0.25rem;
+        text-align: left;
+      }
+
+      .imgcss{
+        display: flex;
+        width: 0.8rem;
+        height: 0.8vh;
+        margin-left: 0.25rem;
+
+        .img-left{
+          width: 0.1rem;
+          background-color: #276BFF;
+        }
+
+        .img-right{
+          width: 0.64rem;
+          margin-left: 0.01rem;
+          // background-color: #276BFF;
+          background: linear-gradient(to right, #276BFF 0%, #FFFFFF 100%);
+        }
+      }
+    }
+
+    .bar{
+      width: 3.4rem;
+      height: 60vh;
+    }
+  }
+</style>

src/pages/quality/components/swipeBar.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="content">
     <div class="card" style="border-bottom-right-radius: 20%">
-      <p class="chartTitle">A产线</p>
+      <p class="chartTitle">D产线</p>
       <div class="imgcss">
         <div class="img-left"></div>
         <div class="img-right"></div>
@@ -9,7 +9,7 @@
       <div id="bar" class="bar"></div>
     </div>
     <div class="card" style="border-bottom-left-radius: 20%">
-      <p class="chartTitle">B产线</p>
+      <p class="chartTitle">E产线</p>
       <div class="imgcss">
         <div class="img-left"></div>
         <div class="img-right"></div>
@@ -102,7 +102,7 @@ export default {
           series: [
             {
               name: 'Access From',
-              center: ['35%', '45%'],
+              center: ['35%', '43%'],
               type: 'pie',
               radius: ['50%', '75%'],
               avoidLabelOverlap: false,

src/pages/quality/components/swipePie.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="content">
     <div class="card" style="border-bottom-right-radius: 20%">
-      <p class="chartTitle">C产线</p>
+      <p class="chartTitle">B产线</p>
       <div class="imgcss">
         <div class="img-left"></div>
         <div class="img-right"></div>
@@ -9,7 +9,7 @@
       <div id="pie1" class="bar"></div>
     </div>
     <div class="card" style="border-bottom-left-radius: 20%">
-      <p class="chartTitle">D产线</p>
+      <p class="chartTitle">C产线</p>
       <div class="imgcss">
         <div class="img-left"></div>
         <div class="img-right"></div>

src/pages/quality/components/swipePies.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="content">
     <div class="card" style="border-bottom-right-radius: 20%">
-      <p class="chartTitle">E产线</p>
+      <p class="chartTitle">A产线</p>
       <div class="imgcss">
         <div class="img-left"></div>
         <div class="img-right"></div>
@@ -69,11 +69,11 @@ export default {
               position: 'top'
             },
             itemStyle: {
-              normal: {
+              // normal: {
               color: function (params) {
                 var colorList = ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40']
                 return colorList[params.dataIndex]
-                }
+                // }
               }
             },
             backgroundStyle: {

src/pages/quality/quality.vue

@@ -21,134 +21,47 @@
           <p style="font-size: 0.142rem;">23.12</p>
         </div>
         <div class="date">
-          <p class="day">日</p>
+          <p :class="chooseDate ? 'day' : 'month'" @click="changeDate(1)">日</p>
-          <p class="month">月</p>
+          <p :class="chooseDate ? 'month' : 'day'" @click="changeDate(0)">月</p>
         </div>
       </div>
     </div>
-    <div class="swipDiv">
+    <div v-if="chooseDate" class="swipDiv">
       <van-swipe class="my-swipe" indicator-color="white">
-        <van-swipe-item><swipe-bar></swipe-bar></van-swipe-item>
-        <van-swipe-item><swipe-pie></swipe-pie></van-swipe-item>
         <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>
   </div>
 </template>
 
 <script>
-import * as echarts from 'echarts'
 import SwipeBar from './components/swipeBar.vue'
 import SwipePie from './components/swipePie.vue'
 import SwipePies from './components/swipePies.vue'
+import MonthBar from './components/monthBar.vue'
+import MonthPie from './components/monthPie.vue'
+import MonthPies from './components/monthPies.vue'
 
 export default {
   data () {
     return {
-      chart: null
+      chart: null,
+      chooseDate: 1
     }
   },
-  components: { SwipeBar, SwipePie, SwipePies },
+  components: { SwipeBar, SwipePie, SwipePies, MonthBar, MonthPie, MonthPies },
-  mounted () {
-    // this.initChart()
-    // this.pieChart()
-  },
   methods: {
-    beforeDestroy () {
+    changeDate (date) {
-      if (!this.chart) {
+      this.chooseDate = date
-        return
-      }
-      this.chart.dispose()
-      this.chart = null
-    },
-    initChart () {
-      this.chart = echarts.init(document.getElementById('bar'))
-      this.chart.setOption(
-        {
-          grid: {
-            left: 50,
-            top: 23
-          },
-          xAxis: {
-            type: 'category',
-            axisLabel: {
-              interval: 0,
-              rotate: 40
-            },
-            data: ['擦划伤', '脏污', '崩边', '气泡', '凹凸物']
-          },
-          yAxis: {
-            type: 'value'
-          },
-          series: [{
-            data: [518, 400, 289, 123, 24],
-            type: 'bar',
-            showBackground: true,
-            barWidth: '35%',
-            label: {
-              show: true,
-              position: 'top'
-            },
-            itemStyle: {
-              normal: {
-                color: function (params) {
-                  var colorList = ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40']
-                  return colorList[params.dataIndex]
-                }
-              }
-            },
-            backgroundStyle: {
-              color: 'rgba(220, 220, 220, 0.4)'
-            }
-          }]
-        }
-      )
-    },
-    pieChart () {
-      echarts.init(document.getElementById('pie')).setOption(
-        {
-          tooltip: {
-            trigger: 'item'
-          },
-          legend: {
-            orient: 'vertical',
-            icon: 'circle',
-            top: '15%',
-            right: '10%'
-          },
-          color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'],
-          series: [
-            {
-              name: 'Access From',
-              center: ['35%', '45%'],
-              type: 'pie',
-              radius: ['50%', '70%'],
-              avoidLabelOverlap: false,
-              label: {
-                show: false,
-                position: 'center'
-              },
-              emphasis: {
-                label: {
-                  show: true,
-                  fontSize: '20',
-                  fontWeight: 'bold'
-                }
-              },
-              labelLine: {
-                show: false
-              },
-              data: [
-                { value: 123, name: '擦划伤' },
-                { value: 122, name: '脏污' },
-                { value: 67, name: '崩边' },
-                { value: 42, name: '气泡' },
-                { value: 12, name: '凹凸物' }
-              ]
-            }
-          ]
-        }
-      )
     }
   }
 }
@@ -199,7 +112,7 @@ export default {
           height: 8.4vh;
           width: 0.64rem;
           background-color: #4E9AFF;
-          border-radius: 3px 0 0 3px;
+          border-radius: 2px;
           border: #4E9AFF 1px solid;
         }
 
@@ -208,7 +121,7 @@ export default {
           width: 0.64rem;
           background-color: #276BFF;
           border: #88ADFF 1px solid;
-          border-radius: 0 3px 3px 0;
+          border-radius: 2px;
           margin-left: -0.05rem;
         }
       }