设备screenys

src/pages/DeviceScreen.vue

@@ -20,12 +20,26 @@
           <div class="item_tip">
             <div class="item_tip_left">设备实时状态</div>
           </div>
-          <div class="item_content_1">
+          <div class="item_5_l">
-            <div id="echart_d01" style="width: 100%; height: 100%"></div>
+            <div class="item_content_0">
+              <div id="echart_d01" style="width: 100%; height: 100%"></div>
+            </div>
+            <div class="total">
+              <div>110<span>台</span></div>
+            </div>
+            <div class="total-desc">设备总数</div>
           </div>
-          <div class="total">
+          <div class="item_5_r">
-            <!-- <div>总数</div> -->
+            <div class="right_1_down_inner_3_i"  v-for="(e, i) in arrR01" :key="i">
-            <div>110<span>台</span></div>
+              <div class="right_1_down_inner_3_l">
+                <span :style="{'background-color': e.color}"><i :style="{'background-color': e.color}"></i></span>
+                <span>{{e.name}}</span>
+              </div>
+              <div class="right_1_down_inner_3_r">
+                <span>{{e.qty}}</span>
+                <span>台</span>
+              </div>
+            </div>
           </div>
         </div>
         <div class="item_wrap">
@@ -48,8 +62,8 @@
                 <p class="item_content_1_inner_2_p2">6h</p>
               </div>
               <div class="item_content_1_inner_2">
-                <p class="item_content_1_inner_2_p1">报警：</p>
+                <p class="item_content_1_inner_2_p1 cred">报警：</p>
-                <p class="item_content_1_inner_2_p2">4次</p>
+                <p class="item_content_1_inner_2_p2 cred">4次</p>
               </div>
             </div>
             <div class="item_content_1_inner">
@@ -66,9 +80,9 @@
                 <p class="item_content_1_inner_2_p1">MTTR：</p>
                 <p class="item_content_1_inner_2_p2">6h</p>
               </div>
-              <div class="item_content_1_inner_2">
+              <div class="item_content_1_inner_2 cred">
-                <p class="item_content_1_inner_2_p1">报警：</p>
+                <p class="item_content_1_inner_2_p1 cred">报警：</p>
-                <p class="item_content_1_inner_2_p2">4次</p>
+                <p class="item_content_1_inner_2_p2 cred">4次</p>
               </div>
             </div>
             <div class="item_content_1_inner">
@@ -85,9 +99,9 @@
                 <p class="item_content_1_inner_2_p1">MTTR：</p>
                 <p class="item_content_1_inner_2_p2">6h</p>
               </div>
-              <div class="item_content_1_inner_2">
+              <div class="item_content_1_inner_2 cred">
-                <p class="item_content_1_inner_2_p1">报警：</p>
+                <p class="item_content_1_inner_2_p1 cred">报警：</p>
-                <p class="item_content_1_inner_2_p2">4次</p>
+                <p class="item_content_1_inner_2_p2 cred">4次</p>
               </div>
             </div>
           </div>
@@ -149,7 +163,7 @@
                       <div class="scroll-ul_1_div">{{e.material_code}}</div>
                       <div class="scroll-ul_1_div">{{e.material_code}}</div>
                       <div class="scroll-ul_1_div">{{e.material_code}}</div>
-                      <div class="scroll-ul_1_div">{{e.material_code}}</div>
+                      <div class="scroll-ul_1_div"><span :style="{'background-color': ddddcolor}"><i></i></span>{{e.material_code}}</div>
                       <div class="scroll-ul_1_div">{{e.material_code}}</div>
                       <div class="scroll-ul_1_div">{{e.material_code}}</div>
                       <div class="scroll-ul_1_div">{{e.material_code}}</div>
@@ -218,9 +232,32 @@
 <script>
 import * as echarts from 'echarts'
 export default {
-  name: 'MonitoringScreen1',
+  name: 'MonitoringScreen2',
   data () {
     return {
+      ddddcolor: '#f00',
+      arrR01: [
+        {
+          color: '#2D7CEB',
+          name: '正常运行',
+          qty: '10'
+        },
+        {
+          color: '#07E083',
+          name: '暂未生产',
+          qty: '20'
+        },
+        {
+          color: '#00D5FF',
+          name: '空闲设备',
+          qty: '30'
+        },
+        {
+          color: '#CC6060',
+          name: '故障设备',
+          qty: '40'
+        }
+      ],
       data01: [{value: 500, name: '正常运行'}, {value: 300, name: '暂未生产'}, {value: 200, name: '空闲设备'}, {value: 100, name: '故障设备'}],
       chartData1: [
         {
@@ -353,6 +390,12 @@ export default {
     this.setEchart05()
   },
   methods: {
+    fontSize (res) {
+      const clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
+      if (!clientWidth) return
+      let fontSize = clientWidth * res / 1920
+      return fontSize
+    },
     updateTime () {
       let cd = new Date()
       let year = cd.getFullYear()
@@ -401,11 +444,11 @@ export default {
           {
             axisTick: 'none',
             axisLine: 'none',
-            offset: '27',
+            offset: '5',
             axisLabel: {
               textStyle: {
-                color: '#ffffff', // y轴字体颜色
+                color: '#8FABBF', // y轴字体颜色
-                fontSize: '16'
+                fontSize: '12'
               }
             },
             data: ['设备01', '设备02', '设备03', '设备04', '设备05']
@@ -417,19 +460,19 @@ export default {
             axisLabel: {
               textStyle: {
                 color: '#ffffff',
-                fontSize: '16'
+                fontSize: '12'
               }
             },
             data: [1, 1, 1, 1]
           },
           {
-
             axisLine: {
               lineStyle: {
                 type: [8, 4],
                 dashOffset: 4,
                 // color: 'rgba(0,0,0,0)' // y轴线颜色
-                color: '#3D5266' // y轴线颜色
+                color: '#3D5266', // y轴线颜色
+                opacity: 0.4
               }
             },
             data: []
@@ -461,7 +504,7 @@ export default {
               normal: {
                 show: false,
                 position: 'right',
-                distance: 10,
+                distance: 2,
                 formatter: function (param) {
                   return param.value + '%'
                 },
@@ -486,7 +529,7 @@ export default {
             // },
             itemStyle: {
               normal: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                   {
                     offset: 0,
                     color: '#B68845',
@@ -514,7 +557,7 @@ export default {
               normal: {
                 show: true,
                 position: 'right',
-                distance: 10,
+                distance: 2,
                 color: '#ffffff',
                 formatter: function (data) {
                   return dataLine[data.dataIndex] + '次'
@@ -575,7 +618,15 @@ export default {
     },
     setEchart04 () {
       // 多列柱状图
+      // 到外面壳边框的距离
       let option = {
+        grid: {
+          top: this.fontSize(50),
+          left: 0,
+          right: this.fontSize(25),
+          bottom: 0,
+          containLabel: true
+        },
         // 图例
         legend: {
           // icon: 'rect',
@@ -605,7 +656,7 @@ export default {
             interval: 0,
             textStyle: {
               color: '#8FABBF',
-              fontSize: 16
+              fontSize: 14
             }
           },
           data: this.xData
@@ -630,7 +681,8 @@ export default {
             lineStyle: {
               type: [8, 4],
               dashOffset: 4,
-              color: '#8FABBF'
+              color: '#8FABBF',
+              opacity: 0.2
             }
           }
         },
@@ -756,7 +808,7 @@ export default {
             interval: 0,
             textStyle: {
               color: '#8FABBF',
-              fontSize: 16
+              fontSize: 14
             }
           },
           data: ['设备综合效率OEE', '产能利用效率TEEP']
@@ -782,7 +834,8 @@ export default {
             lineStyle: {
               type: [8, 4],
               dashOffset: 4,
-              color: '#8FABBF'
+              color: '#8FABBF',
+              opacity: 0.2
             }
           }
         },
@@ -921,7 +974,7 @@ export default {
           itemGap: 30.86,
           itemWidth: 14.16,
           itemHeight: 7.38,
-          data: [{name: '运行设备', itemStyle: {color: '#0E90FD'}}, {name: '暂未生产设备', itemStyle: {color: '#33CCCC'}}, {name: '关机设备', itemStyle: {color: '#EAAD24'}}, {name: '故障设备', itemStyle: {color: '#ff0000'}}]
+          data: [{name: '运行设备', itemStyle: {color: '#0E90FD'}}, {name: '暂未生产设备', itemStyle: {color: '#07E083'}}, {name: '关机设备', itemStyle: {color: '#EAAD24'}}, {name: '故障设备', itemStyle: {color: '#CC6060'}}]
         },
         xAxis: {
           type: 'category',
@@ -939,7 +992,7 @@ export default {
             interval: 0,
             textStyle: {
               color: '#8FABBF',
-              fontSize: 16
+              fontSize: 14
             }
           },
           data: ['无屑下料机1', '无屑下料机1', '无屑下料机1', '无屑下料机1', '无屑下料机1', '无屑下料机1']
@@ -964,7 +1017,8 @@ export default {
             lineStyle: {
               type: [8, 4],
               dashOffset: 4,
-              color: '#8FABBF'
+              color: '#8FABBF',
+              opacity: 0.2
             }
           }
         },
@@ -1002,7 +1056,7 @@ export default {
                 color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                   {
                     offset: 0,
-                    color: '#33CCCC',
+                    color: '#07E083',
                     opacity: 1
                   },
                   {
@@ -1048,12 +1102,12 @@ export default {
                 color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                   {
                     offset: 0,
-                    color: '#ff0000',
+                    color: '#CC6060',
                     opacity: 1
                   },
                   {
                     offset: 1,
-                    color: 'rgba(122,50,99,0.25)',
+                    color: 'rgba(123,33,33,0.25)',
                     opacity: 0.25
                   }
                 ])
@@ -1140,24 +1194,23 @@ export default {
             }
           },
           splitLine: {
-            show: true,
+            show: false,
             lineStyle: {
               type: [8, 4],
               dashOffset: 4,
-              color: '#8FABBF'
+              color: '#8FABBF',
+              opacity: 0.2
             }
           },
           max: max
         },
         series: [
           {
-            name: '总库存',
             type: 'bar',
-            barWidth: 10,
+            barWidth: 8,
             itemStyle: {
               normal: {
                 show: true,
-                // color: '#67c23a',
                 color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                   {
                     offset: 0,
@@ -1269,20 +1322,20 @@ export default {
             color: '#909399'
           },
           splitLine: {
-            show: true,
+            show: false,
             lineStyle: {
               type: [8, 4],
               dashOffset: 4,
-              color: '#8FABBF'
+              color: '#8FABBF',
+              opacity: 0.2
             }
           },
           max: max
         },
         series: [
           {
-            name: '总库存',
             type: 'bar',
-            barWidth: 10,
+            barWidth: 8,
             itemStyle: {
               normal: {
                 show: true,
@@ -1414,6 +1467,11 @@ header
   letter-spacing .02rem
   text-shadow 0 0 .09rem #159AFF
   padding-left .38rem
+.item_content_0
+  width 2.2rem
+  height 2.2rem
+  // _fj(space-around)
+  // padding .17rem 0 .24rem
 .item_content_1
   _wh(100%, calc(100% - .32rem))
   _fj(space-around)
@@ -1501,6 +1559,12 @@ header
       overflow hidden
       &:nth-child(8)
         width 13.2%
+      &:nth-child(4)
+        span
+          _wh(.0725rem, .0725rem)
+          border-radius 100%
+          background-color #2D7CEB
+          margin-right .1rem
 // scroll2
 .scroll_tab_2
   _wh(100%, .4rem)
@@ -1612,7 +1676,7 @@ header
     &:nth-child(1)
       _wh(.0725rem, .0725rem)
       border-radius 100%
-      background-color #07E083
+      background-color #2D7CEB
       margin-left .15rem
     &:nth-child(2)
       font-family "SourceHanSansCN"
@@ -1641,22 +1705,26 @@ header
   _wh(1.83rem, .3rem)
 .item_5_r
   float right
-  _wh(1.83rem, .3rem)
+  margin-top .4rem
+  _wh(1.83rem, 60%)
+  _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%
 .total
   position absolute
-  top 2.7rem
+  top 2.5rem
-  left 0.3rem
+  left .3rem
   text-align center
-  width 4rem
+  width 2.2rem
   div
     line-height 0.24rem
     // color #f80
@@ -1664,4 +1732,9 @@ header
     font-size .3rem
     margin-top 0.08rem
     font-weight 700
+.total-desc
+  width 2.2rem
+  text-align center
+.cred
+  color #CC6060
 </style>