更新

src/main.js

@@ -2,7 +2,7 @@
  * @Author: gtz
  * @Date: 2022-07-25 14:18:00
  * @LastEditors: DY
- * @LastEditTime: 2022-09-07 09:21:31
+ * @LastEditTime: 2022-09-16 14:13:07
  * @Description: file content
  * @FilePath: \hf-pda\src\main.js
  */
@@ -20,9 +20,9 @@ import './assets/css/iconfont.css'
 import './components/'
 import store from '@/store'
 
-import { Button, Field, Icon, Dialog, Grid, GridItem, NavBar, Popup, Row, Col, Stepper, Picker, DatetimePicker, PullRefresh, Cell, CellGroup, Tag, Checkbox, CheckboxGroup, Tab, Tabs, Sticky, Calendar, Uploader, SwipeCell, Radio, RadioGroup } from 'vant'
+import { Button, Field, Icon, Dialog, Grid, GridItem, NavBar, Popup, Row, Col, Stepper, Picker, DatetimePicker, PullRefresh, Cell, CellGroup, Tag, Checkbox, CheckboxGroup, Tab, Tabs, Sticky, Calendar, Uploader, SwipeCell, Radio, RadioGroup, Swipe, SwipeItem } from 'vant'
 
-Vue.use(Button).use(Field).use(Icon).use(Dialog).use(Grid).use(GridItem).use(NavBar).use(Popup).use(Row).use(Col).use(Stepper).use(Picker).use(DatetimePicker).use(PullRefresh).use(Cell).use(CellGroup).use(Tag).use(Checkbox).use(CheckboxGroup).use(Tab).use(Tabs).use(Sticky).use(Calendar).use(Uploader).use(SwipeCell).use(Radio).use(RadioGroup)
+Vue.use(Button).use(Field).use(Icon).use(Dialog).use(Grid).use(GridItem).use(NavBar).use(Popup).use(Row).use(Col).use(Stepper).use(Picker).use(DatetimePicker).use(PullRefresh).use(Cell).use(CellGroup).use(Tag).use(Checkbox).use(CheckboxGroup).use(Tab).use(Tabs).use(Sticky).use(Calendar).use(Uploader).use(SwipeCell).use(Radio).use(RadioGroup).use(Swipe).use(SwipeItem)
 
 // const vConsole = new Vconsole()
 

src/pages/index/index.vue

@@ -97,15 +97,14 @@ export default {
     color: white;
   }
   .un-button{
-    font-size: 0.1px;
+    margin: 2.5vh auto 0 auto;
-    margin: 0.15rem auto 0 auto;
     width: 0.64rem;
-    height: 0.57rem;
+    height: 13vh;
     color: #0B58FF;
     // text-align: center;
   }
   .van-button{
-    margin-top: -0.25rem;
+    margin-top: -5.5vh;
     background-color: #0B58FF;
     color: white;
     width: 0.64rem;
@@ -121,16 +120,19 @@ export default {
   }
   .nav-div{
     // background-image: url('../../assets/img/nav.png');
-    background-size: 100% 0.727rem;
+    background-size: 100% 17vh;
     background-repeat: no-repeat;
     position: absolute;
     bottom: 0px;
     width: 100%;
-    height: 0.762rem;
+    height: 17vh;
+    font-size: 0.1rem;
   }
   .index{
     // width: 100vh;
-    height: 4.21rem;
+    height: 100vh;
+    overflow: hidden;
+    overflow-y: auto;
     background-color: #EDEFF0;
   }
 </style>

src/pages/overview/overview.vue

@@ -217,12 +217,12 @@ export default {
 }
 .top{
   // width: 100%;
-  height: 0.64rem;
+  height: 15vh;
   background: #276BFF;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0 0.2rem;
+  padding: 0 4.7vh;
 
   p{
     font-size: 0.247rem;
@@ -241,7 +241,7 @@ export default {
   .description{
     font-size: 0.1rem;
     opacity: 0.7;
-    margin-top: 0.05rem;
+    margin-top: 1.1vh;
   }
 
   .right{
@@ -255,38 +255,38 @@ export default {
 }
 .middle {
   width: 6.89rem;
-  height: 2.6rem;
+  height: 61vh;
-  margin: 0.09rem auto;
+  margin: 2.4vh auto;
   background-color: white;
   .week {
     width: 100%;
-    height: 0.37rem;
+    height: 8.6vh;
     li {
       float: left;
-      height: 0.37rem;
+      height: 8.6vh;
       width: 1.362rem;
       background-color: white;
       margin-right: 0.016rem;
       h2 {
-        height: 0.181rem;
+        height: 4.2vh;
         font-size: 0.158rem;
         font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
         text-align: center;
-        margin-top: 0.11rem;
+        margin-top: 2.4vh;
         color: rgba(19, 20, 21, 0.85);
         text-shadow: 0.09rem 0rem 0.181rem rgba(197, 199, 206, 0.55);
       }
       div {
         margin-left: 0.1rem;
-        margin-top: 0.03rem;
+        margin-top: 0.7vh;
         span {
           font-size: 0.181rem;
           font-family: PingFangSC-Medium, PingFang SC;
           font-weight: 500;
           color: #ff4d4f;
-          line-height: 0.181rem;
+          line-height: 4.2vh;
-          margin-top: 0.1rem;
+          margin-top: 2.4vh;
           text-shadow: 0.09rem 0rem 0.181rem rgba(197, 199, 206, 0.55);
         }
         span:first-child {
@@ -307,37 +307,37 @@ export default {
   }
   .day {
     width: 100%;
-    height: 0.37rem;
+    height: 8.6vh;
 
     li {
       float: left;
-      height: 0.37rem;
+      height: 8.6vh;
       width: 1.362rem;
       background-color: rgba(197, 199, 206, 0.55);
       margin-right: 0.016rem;
 
       h2 {
-        height: 0.181rem;
+        height: 4.2vh;
         font-size: 0.158rem;
         font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
         text-align: center;
-        margin-top: 0.11rem;
+        margin-top: 2.4vh;
         color: rgba(19, 20, 21, 0.85);
         text-shadow: 0.09rem 0rem 0.181rem rgba(197, 199, 206, 0.55);
       }
 
       div {
         margin-left: 0.1rem;
-        margin-top: 0.03rem;
+        margin-top: 0.7vh;
 
         span {
           font-size: 0.158rem;
           font-family: PingFangSC-Medium, PingFang SC;
           font-weight: 500;
           color: #ff4d4f;
-          line-height: 0.181rem;
+          line-height: 4.2vh;
-          margin-top: 0.1rem;
+          margin-top: 2.4vh;
           text-shadow: 0.09rem 0rem 0.181rem rgba(197, 199, 206, 0.55);
         }
 
@@ -349,37 +349,37 @@ export default {
   }
   .pass {
     width: 100%;
-    height: 0.37rem;
+    height: 8.6vh;
 
     li {
       float: left;
-      height: 0.37rem;
+      height: 8.6vh;
       width: 1.362rem;
       background-color: white;
       margin-right: 0.016rem;
 
       h2 {
-        height: 0.181rem;
+        height: 4.2vh;
         font-size: 0.158rem;
         font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
         text-align: center;
-        margin-top: 0.11rem;
+        margin-top: 2.4vh;
         color: rgba(19, 20, 21, 0.85);
         text-shadow: 0.09rem 0rem 0.181rem rgba(197, 199, 206, 0.55);
       }
 
       div {
         margin-left: 0.1rem;
-        margin-top: 0.03rem;
+        margin-top: 0.7vh;
 
         span {
           font-size: 0.158rem;
           font-family: PingFangSC-Medium, PingFang SC;
           font-weight: 500;
           color: #ff4d4f;
-          line-height: 0.181rem;
+          line-height: 4.2vh;
-          margin-top: 0.1rem;
+          margin-top: 2.4vh;
           text-shadow: 0.09rem 0rem 0.181rem rgba(197, 199, 206, 0.55);
         }
 
@@ -403,37 +403,37 @@ export default {
   }
   .energy {
     width: 100%;
-    height: 0.37rem;
+    height: 8.6vh;
 
     li {
       float: left;
-      height: 0.37rem;
+      height: 8.6vh;
       width: 1.362rem;
       background-color: rgba(197, 199, 206, 0.55);
       margin-right: 0.016rem;
 
       h2 {
-        height: 0.181rem;
+        height: 4.2vh;
         font-size: 0.158rem;
         font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
         text-align: center;
-        margin-top: 0.11rem;
+        margin-top: 2.4vh;
         color: rgba(19, 20, 21, 0.85);
         text-shadow: 0.09rem 0rem 0.181rem rgba(197, 199, 206, 0.55);
       }
 
       div {
         margin-left: 0.1rem;
-        margin-top: 0.03rem;
+        margin-top: 0.7vh;
 
         span {
           font-size: 0.158rem;
           font-family: PingFangSC-Medium, PingFang SC;
           font-weight: 500;
           color: #ff4d4f;
-          line-height: 0.181rem;
+          line-height: 4.2vh;
-          margin-top: 0.1rem;
+          margin-top: 2.4vh;
           text-shadow: 0.09rem 0rem 0.181rem rgba(197, 199, 206, 0.55);
         }
 
@@ -445,37 +445,37 @@ export default {
   }
   .unit {
     width: 100%;
-    height: 0.37rem;
+    height: 8.6vh;
 
     li {
       float: left;
-      height: 0.37rem;
+      height: 8.6vh;
       width: 1.362rem;
       background-color: white;
       margin-right: 0.016rem;
 
       h2 {
-        height: 0.181rem;
+        height: 4.2vh;
         font-size: 0.158rem;
         font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
         text-align: center;
-        margin-top: 0.11rem;
+        margin-top: 2.4vh;
         color: rgba(19, 20, 21, 0.85);
         text-shadow: 0.09rem 0rem 0.181rem rgba(197, 199, 206, 0.55);
       }
 
       div {
         margin-left: 0.1rem;
-        margin-top: 0.03rem;
+        margin-top: 0.7vh;
 
         span {
           font-size: 0.158rem;
           font-family: PingFangSC-Medium, PingFang SC;
           font-weight: 500;
           color: #ff4d4f;
-          line-height: 0.181rem;
+          line-height: 4.2vh;
-          margin-top: 0.1rem;
+          margin-top: 2.4vh;
           text-shadow: 0.09rem 0rem 0.181rem rgba(197, 199, 206, 0.55);
         }
 
@@ -499,37 +499,37 @@ export default {
   }
   .equipment {
     width: 100%;
-    height: 0.37rem;
+    height: 8.7vh;
 
     li {
       float: left;
-      height: 0.37rem;
+      height: 8.6vh;
       width: 1.362rem;
       background-color: rgba(197, 199, 206, 0.55);
       margin-right: 0.016rem;
 
       h2 {
-        height: 0.181rem;
+        height: 4.2vh;
         font-size: 0.158rem;
         font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
         text-align: center;
-        margin-top: 0.11rem;
+        margin-top: 2.4vh;
         color: rgba(19, 20, 21, 0.85);
         text-shadow: 0.09rem 0rem 0.181rem rgba(197, 199, 206, 0.55);
       }
 
       div {
         margin-left: 0.1rem;
-        margin-top: 0.03rem;
+        margin-top: 0.7vh;
 
         span {
           font-size: 0.158rem;
           font-family: PingFangSC-Medium, PingFang SC;
           font-weight: 500;
           color: #ff4d4f;
-          line-height: 0.181rem;
+          line-height: 4.2vh;
-          margin-top: 0.1rem;
+          margin-top: 2.4vh;
           text-shadow: 0.09rem 0rem 0.181rem rgba(197, 199, 206, 0.55);
         }
 
@@ -541,37 +541,37 @@ export default {
   }
   .monitor {
     width: 100%;
-    height: 0.37rem;
+    height: 8.6vh;
 
     li {
       float: left;
-      height: 0.37rem;
+      height: 8.6vh;
       width: 1.362rem;
       background-color: white;
       margin-right: 0.016rem;
 
       h2 {
-        height: 0.181rem;
+        height: 4.2vh;
         font-size: 0.158rem;
         font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
         text-align: center;
-        margin-top: 0.11rem;
+        margin-top: 2.5vh;
         color: rgba(19, 20, 21, 0.85);
         text-shadow: 0.09rem 0rem 0.181rem rgba(197, 199, 206, 0.55);
       }
 
       div {
         margin-left: 0.1rem;
-        margin-top: 0.03rem;
+        margin-top: 0.7vh;
 
         span {
           font-size: 0.158rem;
           font-family: PingFangSC-Medium, PingFang SC;
           font-weight: 500;
           color: #ff4d4f;
-          line-height: 0.181rem;
+          line-height: 4.2vh;
-          margin-top: 0.1rem;
+          margin-top: 2.3vh;
           text-shadow: 0.09rem 0rem 0.181rem rgba(197, 199, 206, 0.55);
         }
 

src/pages/quality/components/swipeBar.vue

@@ -0,0 +1,187 @@
+<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="bar" class="bar"></div>
+    </div>
+    <div class="card" style="border-bottom-left-radius: 20%">
+      <p class="chartTitle">B产线</p>
+      <div class="imgcss">
+        <div class="img-left"></div>
+        <div class="img-right"></div>
+      </div>
+      <div id="pie" 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('bar')).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('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%', '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/swipePie.vue

@@ -0,0 +1,187 @@
+<template>
+  <div class="content">
+    <div class="card" style="border-bottom-right-radius: 20%">
+      <p class="chartTitle">C产线</p>
+      <div class="imgcss">
+        <div class="img-left"></div>
+        <div class="img-right"></div>
+      </div>
+      <div id="pie1" class="bar"></div>
+    </div>
+    <div class="card" style="border-bottom-left-radius: 20%">
+      <p class="chartTitle">D产线</p>
+      <div class="imgcss">
+        <div class="img-left"></div>
+        <div class="img-right"></div>
+      </div>
+      <div id="pie2" 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('pie1')).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('pie2')).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/swipePies.vue

@@ -0,0 +1,184 @@
+<template>
+  <div class="content">
+    <div class="card" style="border-bottom-right-radius: 20%">
+      <p class="chartTitle">E产线</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%">
+      <p class="chartTitle">缺陷总量排名</p>
+      <div class="imgcss">
+        <div class="img-left"></div>
+        <div class="img-right"></div>
+      </div>
+      <div id="barDiv" 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('barDiv'))
+      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('pieDiv')).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/quality.vue

@@ -17,7 +17,7 @@
       <p>质量缺陷</p>
       <div class="right">
         <div>
-          <p style="font-size: 0.1rem;">2022.12.24</p>
+          <p style="font-size: 0.1rem; opacity: 0.8;">2022.12.24</p>
           <p style="font-size: 0.142rem;">23.12</p>
         </div>
         <div class="date">
@@ -26,15 +26,21 @@
         </div>
       </div>
     </div>
-    <div class="content">
+    <div class="swipDiv">
-      <div id="bar" class="bar" style="border-bottom-right-radius: 20%"></div>
+      <van-swipe class="my-swipe" indicator-color="white">
-      <div id="pie" class="bar" style="border-bottom-left-radius: 20%"></div>
+        <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>
     </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'
 
 export default {
   data () {
@@ -42,9 +48,10 @@ export default {
       chart: null
     }
   },
+  components: { SwipeBar, SwipePie, SwipePies },
   mounted () {
-    this.initChart()
+    // this.initChart()
-    this.pieChart()
+    // this.pieChart()
   },
   methods: {
     beforeDestroy () {
@@ -58,17 +65,9 @@ export default {
       this.chart = echarts.init(document.getElementById('bar'))
       this.chart.setOption(
         {
-          title: {
-            text: '总量排名',
-            textStyle: {
-              color: '#276BFF'
-            },
-            top: '1%',
-            left: '2%'
-          },
           grid: {
             left: 50,
-            bottom: 60
+            top: 23
           },
           xAxis: {
             type: 'category',
@@ -93,7 +92,7 @@ export default {
             itemStyle: {
               normal: {
                 color: function (params) {
-                  var colorList = ['#2760FF', '#8167F6', '#5B9BFF', '#CCCCCC', '#FFD160', '#FF8A40']
+                  var colorList = ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40']
                   return colorList[params.dataIndex]
                 }
               }
@@ -111,24 +110,17 @@ export default {
           tooltip: {
             trigger: 'item'
           },
-          title: {
-            text: 'B产线',
-            textStyle: {
-              color: '#276BFF'
-            },
-            top: '1%',
-            left: '2%'
-          },
           legend: {
             orient: 'vertical',
-            top: 'center',
+            icon: 'circle',
-            right: '5%'
+            top: '15%',
+            right: '10%'
           },
-          color: ['#2760FF', '#8167F6', '#5B9BFF', '#CCCCCC', '#FFD160', '#FF8A40'],
+          color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'],
           series: [
             {
               name: 'Access From',
-              center: ['35%', '53%'],
+              center: ['35%', '45%'],
               type: 'pie',
               radius: ['50%', '70%'],
               avoidLabelOverlap: false,
@@ -164,8 +156,7 @@ export default {
 
 <style  lang="scss" scoped>
   .top{
-    // width: 100%;
+    height: 15vh;
-    height: 0.64rem;
     background: #276BFF;
     display: flex;
     justify-content: space-between;
@@ -188,7 +179,7 @@ export default {
     .description{
       font-size: 0.1rem;
       opacity: 0.7;
-      margin-top: 0.05rem;
+      margin-top: 1vh;
     }
 
     .right{
@@ -202,37 +193,33 @@ export default {
         display: flex;
         text-align: center;
         align-items: center;
-        line-height: 0.36rem;
+        line-height: 8.4vh;
 
         .day{
-          height: 0.36rem;
+          height: 8.4vh;
           width: 0.64rem;
           background-color: #4E9AFF;
-          border-radius: 5px;
+          border-radius: 3px 0 0 3px;
+          border: #4E9AFF 1px solid;
         }
 
         .month{
-          height: 0.36rem;
+          height: 8.4vh;
           width: 0.64rem;
           background-color: #276BFF;
           border: #88ADFF 1px solid;
-          border-radius: 5px;
+          border-radius: 0 3px 3px 0;
           margin-left: -0.05rem;
         }
       }
     }
   }
-  .content{
+  .swipDiv{
-    display: flex;
+    width: 100%;
-    justify-content: space-around;
-    margin-top: 0.1rem;
-    font-size: 0.135rem;
 
-    .bar{
+    .my-swipe .van-swipe-item {
-      width: 3.4rem;
+      color: #fff;
-      height: 2.66rem;
+      height: 67vh;
-      background-color: white;
-      border-radius: 5%;
       text-align: center;
     }
   }

src/pages/threeDimensional/threeDimensional.vue

@@ -115,23 +115,23 @@ export default {
 }
 .top {
   width: 100%;
-  height: 1.1rem;
+  height: 25vh;
   overflow: hidden;
   display: flex;
   .left{
     float: left;
     img{
       width: 1.96rem;
-      margin-top: 0.329rem;
+      margin-top: 7.7vh;
       margin-left: 0.238rem;
     }
   }
   .topMiddle{
     color: white;
-    margin-top: 0.181rem;
+    margin-top: 4vh;
     width: 2.68rem;
     float: left;
-    height: 0.378rem;
+    height: 8.8vh;
     .base{
         margin-left: 0.181rem;
       img{
@@ -139,7 +139,7 @@ export default {
       }
       span{
         width: 1.862rem;
-        height: 0.135rem;
+        height: 3.1vh;
         font-size: 0.15rem;
         text-align: center;
         font-family: PingFangSC-Semibold, PingFang SC;
@@ -151,7 +151,7 @@ export default {
     .factory{
       width: 2.68rem;
       text-align: center;
-      height: 0.181rem;
+      height: 4.2vh;
       font-size: 0.181rem;
       font-family: PingFangSC-Semibold, PingFang SC;
       font-weight: 600;
@@ -163,24 +163,25 @@ export default {
           float:left;
           .rightLogo {
             width: 1.5rem;
-            margin-top: 0.329rem;
+            margin-top: 7vh;
           }
           .user{
-            margin: 0.18rem auto auto 0.4rem;
+            margin: 4.5vh auto auto 0.5rem;
             width: 0.363rem;
             height: 0.363rem;
           }
         }
 }
 .middle {
-  width: 100%;
+  width: 100vw;
-  height: 2.58rem;
+  height: 66vh;
   background: url("../../assets/img/background.png") no-repeat;
   background-size: 100% 100%;
   overflow: hidden;
   img{
-    width: 100%;
+    width: 90%;
-    margin-top: 0.61rem;
+    margin: 14vh auto;
+    display: block;
   }
 }
 </style>