大屏1

src/pages/MonitoringScreen1.vue

@@ -18,8 +18,8 @@
       <div class="left_wrap">
         <div class="item_wrap">
           <div class="item_tip">
-            <div class="item_tip_left">计划达成</div>
+            <div class="item_tip_left" style="width: 40%">计划达成</div>
-            <div class="item_tip_right">
+            <div class="item_tip_right" style="width: 60%">
               <span :class="{'span1': swiper === true}">日计划达成</span><span :class="{'span1': swiper === false}">/月计划达成</span>
             </div>
           </div>
@@ -142,7 +142,7 @@
       <div class="center_wrap">
         <div class="item_wrap_2">
           <div class="item_tip item_tip_2">
-            <div class="item_tip_left">近30天产量走势</div>
+            <div class="item_tip_left">今日排产生产进度跟踪</div>
           </div>
           <div class="item_content_2">
             <div class="scroll_wrap">
@@ -162,7 +162,7 @@
                       <div class="scroll-ul_1_div">{{e.plan_qty}}</div>
                       <div class="scroll-ul_1_div">{{e.real_qty}}</div>
                       <div class="scroll-ul_1_div">{{e.gap_qty}}</div>
-                      <div class="scroll-ul_1_div">{{e.finish_rate}}</div>
+                      <div class="scroll-ul_1_div">{{e.finish_rate | numFixed(1)}}</div>
                       <div class="scroll-ul_1_div">
                         <div class="progress_line_wrap">
                           <div class="progress_dot_wrap">
@@ -361,7 +361,8 @@ export default {
       array2: [],
       array3: [],
       objL1: {},
-      arrR1: []
+      arrR1: [],
+      docState: 'saved'
     }
   },
   computed: {
@@ -461,7 +462,7 @@ export default {
       })
       let option = {
         grid: {
-          top: 50,
+          top: this.fontSize(50),
           left: 0,
           right: 0,
           bottom: 0,
@@ -471,12 +472,12 @@ export default {
           icon: 'rect',
           textStyle: {
             color: '#fff',
-            fontSize: 14,
+            fontSize: this.fontSize(14),
-            lineHeight: 14
+            lineHeight: this.fontSize(14)
           },
-          itemGap: 30.86,
+          itemGap: this.fontSize(30.86),
-          itemWidth: 14.16,
+          itemWidth: this.fontSize(14.16),
-          itemHeight: 7.38,
+          itemHeight: this.fontSize(7.38),
           data: [{name: '弯头工段', itemStyle: {color: '#0E90FD'}}, {name: '综合工段', itemStyle: {color: '#33CCCC'}}, {name: '成品工段', itemStyle: {color: '#EAAD24'}}]
         },
         dataZoom: [
@@ -503,7 +504,7 @@ export default {
             interval: 0,
             textStyle: {
               color: '#8FABBF',
-              fontSize: 16
+              fontSize: this.fontSize(16)
             }
           },
           data: date
@@ -520,7 +521,7 @@ export default {
           axisLabel: {
             textStyle: {
               color: '#8FABBF',
-              fontSize: 14
+              fontSize: this.fontSize(14)
             }
           },
           splitLine: {
@@ -618,9 +619,9 @@ export default {
       })
       let option = {
         grid: {
-          top: 50,
+          top: this.fontSize(50),
           left: 0,
-          right: 0,
+          right: this.fontSize(25),
           bottom: 0,
           containLabel: true
         },
@@ -629,7 +630,7 @@ export default {
             show: false, // 为true滚动条出现
             type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动
             startValue: 0, // 从头开始。
-            endValue: 4 // end百分比显示范围，endValue具体显示几个数值
+            endValue: 5 // end百分比显示范围，endValue具体显示几个数值
           }
         ],
         xAxis: {
@@ -649,8 +650,8 @@ export default {
             interval: 0,
             textStyle: {
               color: '#8FABBF',
-              fontSize: 16,
+              fontSize: this.fontSize(16),
-              align: 'left'
+              align: 'center'
             }
           },
           data: date
@@ -667,7 +668,7 @@ export default {
           axisLabel: {
             textStyle: {
               color: '#8FABBF',
-              fontSize: 14
+              fontSize: this.fontSize(14)
             }
           },
           splitLine: {
@@ -735,7 +736,7 @@ export default {
       } else if (type === 2) {
         this.timeOut2 = setInterval(() => {
           if (Number(option.dataZoom[0].endValue) === option.series[0].data.length - 1) {
-            option.dataZoom[0].endValue = 4
+            option.dataZoom[0].endValue = 5
             option.dataZoom[0].startValue = 0
           } else {
             option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
@@ -758,24 +759,24 @@ export default {
             textStyle: {
               rich: {
                 a: {
-                  fontSize: 32,
+                  fontSize: this.fontSize(26),
                   color: '#00D9FF',
                   fontFamily: 'SourceHanSansCN',
                   foontWeight: '700'
                 },
                 b: {
-                  fontSize: 16,
+                  fontSize: this.fontSize(16),
                   color: '#ffffff',
                   fontFamily: 'SourceHanSansCN',
                   foontWeight: '700',
-                  padding: [10, 0, 0, 5]
+                  padding: [this.fontSize(10), 0, 0, this.fontSize(3)]
                 },
                 c: {
                   color: '#FFFFFF',
-                  fontSize: 13,
+                  fontSize: this.fontSize(13),
                   fontWeight: '700',
                   fontFamily: 'SourceHanSansCN',
-                  padding: [10, 0, 0, 0]
+                  padding: [this.fontSize(10), 0, 0, 0]
                 }
               }
             }
@@ -866,6 +867,12 @@ export default {
         this.myCharts4.resize()
       })
     },
+    fontSize (res) {
+      const clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
+      if (!clientWidth) return
+      let fontSize = clientWidth * res / 1920
+      return fontSize
+    },
     /** 左一 */
     async _planReached () {
       let res = await planReached()
@@ -1292,19 +1299,22 @@ header
   clear both
 .item_5_l
   float left
-  _wh(1.83rem, .3rem)
+  _wh(1.83rem, 100%)
 .item_5_r
   float right
-  _wh(1.83rem, .3rem)
+  _wh(1.83rem, 100%)
+  _fj()
+  flex-direction column
   .right_1_down_inner_3_i
     margin-bottom .045rem
 .item_5_l_1
-  _wh(100%, 1.42rem)
+  _wh(100%, 60%)
   background right center / .02rem 100% url(../assets/images/screen1/line_3.png) no-repeat
 .item_5_l_2
-  _wh(100%, calc(100% - 1.42rem))
+  _wh(100%, 40%)
   .right_1_down_inner_3_i
-    margin-bottom .03rem
+    &:nth-child(1), &:nth-child(2)
+      margin-bottom 5%
 .color1
   background-color #07E083
 .color2