右侧大屏

src/config/getData2.js

@@ -3875,6 +3875,8 @@ export const sortingAndPackaging = () => post('api/cockpit/sortingAndPackaging',
 // }
 
 /**
- * 新版大屏首页左侧报表
+ * 新版大屏首页
  */
 export const homepageDataLeft = () => post('api/dashboard/homepageDataLeft', {})
+export const homepageDataRight = () => post('api/dashboard/homepageDataRight', {})
+export const homepageEquipment = () => post('api/dashboard/homepageEquipment', {})

src/config/mork2.js

@@ -252,6 +252,20 @@ export const homepageDataLeft = () => {
         'materialName': '物料五',
         // 数量
         'qty': 100
+      },
+      {
+        // 物料编码
+        'materialCode': 'GBMCZ3027L323217GM003ZX22-30',
+        'materialName': '物料6',
+        // 数量
+        'qty': 100
+      },
+      {
+        // 物料编码
+        'materialCode': 'GBMCZ3027L323217GM003ZX22-30',
+        'materialName': '物料7',
+        // 数量
+        'qty': 100
       }
     ]
   }
@@ -263,18 +277,10 @@ export const homepageDataLeft = () => {
  */
 export const homepageDataRight = () => {
   let res = {
-    'capacityRate': {
+    'capacityRate': [{'device_name': '混料设备', 'numerical': '60'}, {'device_name': '压制设备', 'numerical': '60'}, {'device_name': '压制设备2', 'numerical': '60'}, {'device_name': '压制设备3', 'numerical': '60'}],
-      'mix': 65.1543659,
-      'press': 75.12341242,
-      'dry': 55.13421,
-      'sort': 70.124352521
-    },
     'stateStatistics': {
-      'count': 110,
+      count: '20',
-      'running': 50,
+      fourState: [{'status': '5', 'stateName': '正常运行'}, {'status': '5', 'stateName': '暂未生产'}, {'status': '5', 'stateName': '空闲设备'}, {'status': '5', 'stateName': '故障设备'}]
-      'pausing': 30,
-      'shutdown': 20,
-      'inTrouble': 10
     },
     'areaDeviceStatus': {
       'mix': {
@@ -349,7 +355,51 @@ export const homepageDataRight = () => {
         'process': '压制',
         'deviceCode': 'YJ01',
         'deviceName': '压机1',
-        'status': '运行',
+        'status': '0',
+        'workOrder': 'GD0001',
+        'bom': '1001C1',
+        'material': 'ZLMCZ1001C122211GM001BD20-8',
+        'qty': '1000块',
+        'startTime': '2023-11-20 14:32:32'
+      },
+      {
+        'process': '压制',
+        'deviceCode': 'YJ01',
+        'deviceName': '压机1',
+        'status': '0',
+        'workOrder': 'GD0001',
+        'bom': '1001C1',
+        'material': 'ZLMCZ1001C122211GM001BD20-8',
+        'qty': '1000块',
+        'startTime': '2023-11-20 14:32:32'
+      },
+      {
+        'process': '压制',
+        'deviceCode': 'YJ01',
+        'deviceName': '压机1',
+        'status': '1',
+        'workOrder': 'GD0001',
+        'bom': '1001C1',
+        'material': 'ZLMCZ1001C122211GM001BD20-8',
+        'qty': '1000块',
+        'startTime': '2023-11-20 14:32:32'
+      },
+      {
+        'process': '压制',
+        'deviceCode': 'YJ01',
+        'deviceName': '压机1',
+        'status': '1',
+        'workOrder': 'GD0001',
+        'bom': '1001C1',
+        'material': 'ZLMCZ1001C122211GM001BD20-8',
+        'qty': '1000块',
+        'startTime': '2023-11-20 14:32:32'
+      },
+      {
+        'process': '压制',
+        'deviceCode': 'YJ01',
+        'deviceName': '压机1',
+        'status': '1',
         'workOrder': 'GD0001',
         'bom': '1001C1',
         'material': 'ZLMCZ1001C122211GM001BD20-8',
@@ -360,3 +410,11 @@ export const homepageDataRight = () => {
   }
   return res
 }
+
+/**
+ * 大屏首页设备
+ */
+export const homepageEquipment = () => {
+  let res = {'productReport': [{'number': '192块', 'create_time': '2023-11-18 13:33:52', 'material_code': 'GBMAC3019C123270GM005BB20-30'}, {'number': '324块', 'create_time': '2023-11-11 15:45:02', 'material_code': 'GBMAC3003C123268GM002BB19-8'}, {'number': '240块', 'create_time': '2023-11-11 13:19:43', 'material_code': 'GBMAC3038C223271GM016BB25-30'}, {'number': '324块', 'create_time': '2023-11-11 10:58:42', 'material_code': 'GBMAC3003C123268GM002BB19-8'}, {'number': '240块', 'create_time': '2023-11-08 09:19:05', 'material_code': 'GBMCZ3059L323288GM029ZJTH21-10'}, {'number': '126块', 'create_time': '2023-11-06 16:04:40', 'material_code': 'GBMCZ3053M223268GM002ZJTH-201'}, {'number': '270块', 'create_time': '2023-11-06 15:41:37', 'material_code': 'GBMCZ3053M223268GM002ZJTH-201'}, {'number': '270块', 'create_time': '2023-11-06 14:57:32', 'material_code': 'GBMCZ3053M223268GM002ZJTH-201'}, {'number': '270块', 'create_time': '2023-11-06 14:12:48', 'material_code': 'GBMCZ3053M223268GM002ZJTH-201'}, {'number': '270块', 'create_time': '2023-11-06 13:28:01', 'material_code': 'GBMCZ3053M223268GM002ZJTH-201'}, {'number': '270块', 'create_time': '2023-11-06 12:41:13', 'material_code': 'GBMCZ3053M223268GM002ZJTH-201'}, {'number': '270块', 'create_time': '2023-11-06 11:03:33', 'material_code': 'GBMCZ3053M223268GM002ZJTH-201'}, {'number': '270块', 'create_time': '2023-11-06 10:16:51', 'material_code': 'GBMCZ3053M223268GM002ZJTH-201'}, {'number': '246块', 'create_time': '2023-11-04 15:44:12', 'material_code': 'GBMCZ3053M223268GM002ZJTH-201'}, {'number': '210块', 'create_time': '2023-11-04 13:09:49', 'material_code': 'GBMCZ3053M223268GM002ZJTH-201'}, {'number': '210块', 'create_time': '2023-11-04 12:35:26', 'material_code': 'GBMCZ3053M223268GM002ZJTH-201'}, {'number': '210块', 'create_time': '2023-11-04 11:11:36', 'material_code': 'GBMCZ3053M223268GM002ZJTH-201'}, {'number': '240块', 'create_time': '2023-11-04 10:36:37', 'material_code': 'GBMCZ3059L323288GM029ZJTH21-10'}, {'number': '210块', 'create_time': '2023-11-04 10:35:52', 'material_code': 'GBMCZ3053M223268GM002ZJTH-201'}, {'number': '210块', 'create_time': '2023-11-04 10:09:29', 'material_code': 'GBMCZ3053M223268GM002ZJTH-201'}], 'deviceReport': [{'failure_info': '99', 'device_code': 'FJMDJXS01', 'failure_time': '2023-11-27 09:33:21'}, {'failure_info': '1', 'device_code': 'MDJXS01', 'failure_time': '2023-11-25 16:02:40'}, {'failure_info': '-', 'device_code': 'MDJXS02', 'failure_time': '2023-11-25 14:02:22'}, {'failure_info': '1', 'device_code': 'BZJ01', 'failure_time': '2023-11-25 08:01:38'}, {'failure_info': '-', 'device_code': 'JYHJ01', 'failure_time': '2023-11-22 13:24:07'}, {'failure_info': '-', 'device_code': 'CPJ01', 'failure_time': '2023-11-20 11:03:01'}, {'failure_info': '-', 'device_code': 'RGV01', 'failure_time': '2023-11-17 13:59:38'}, {'failure_info': '-', 'device_code': 'MDJXS03', 'failure_time': '2023-11-15 15:02:08'}, {'failure_info': '-', 'device_code': 'MDJXS04', 'failure_time': '2023-11-03 07:37:52'}, {'failure_info': '-', 'device_code': 'CYHJ01', 'failure_time': '2023-10-25 11:47:21'}]}
+  return res
+}

src/pages/modules/home/left/left.vue

@@ -106,6 +106,7 @@
 
 <script>
 import { homepageDataLeft } from '@js/mork2.js'
+// import { homepageDataLeft } from '@js/getData2.js'
 import symbol1 from '@img/symbol_1.png'
 import symbol2 from '@img/symbol_2.png'
 import symbol3 from '@img/symbol_3.png'
@@ -665,7 +666,7 @@ export default {
         })
       })
       let option = {
-        color: ['#1980EA', '#67D470', '#B4C9EF', '#BCBF5C', '#EF5252'],
+        color: ['#1980EA', '#67D470', '#B4C9EF', '#BCBF5C', '#EF5252', '#6d5edd', '#bf41bb'],
         grid: {
           top: 0,
           left: 0,
@@ -737,17 +738,19 @@ export default {
         imgSrc2: symbol4,
         imgSrc3: lineSelected
       }
+      let total = 0
+      this.history.map(el => {
+        total = Math.max(total, Number(el.press), Number(el.sort))
+      })
       let barName = []
       let barData1 = []
       let barData2 = []
+      let totalDate = []
       this.history.map(el => {
         barName.push(el.date)
         barData1.push(el.press)
         barData2.push(el.sort)
-      })
+        totalDate.push(total)
-      let total = 0
-      this.history.map(el => {
-        total = Math.max(total, Number(el.press), Number(el.sort))
       })
       let option = {
         grid: {
@@ -773,10 +776,10 @@ export default {
                 y2: 1,
                 colorStops: [{
                   offset: 0,
-                  color: 'rgba(254,254,254,0)'
+                  color: 'rgba(254,254,254,0.1)'
                 }, {
                   offset: 1,
-                  color: 'rgba(254,254,254,0)'
+                  color: 'rgba(254,254,254,0.8)'
                 }],
                 global: false
               }
@@ -926,38 +929,41 @@ export default {
             data: barData2
           },
           {
-            // name: '阴影',
-            // type: 'bar',
-            // barWidth: '38px',
-            // itemStyle: {
-            //   normal: {
-            //     color: {
-            //       type: 'linear',
-            //       x: 0,
-            //       y: 0,
-            //       x2: 0,
-            //       y2: 1,
-            //       colorStops: [
-            //         {
-            //           offset: 0.1,
-            //           color: 'rgba(254,254,254,0.1)'
-            //         },
-            //         {
-            //           offset: 1,
-            //           color: 'rgba(254,254,254,0.1)'
-            //         }
-            //       ]
-            //     }
-            //   }
-            // },
-            // data: [total],
-            // z: -1
             name: '阴影',
-            type: 'pictorialBar',
+            type: 'bar',
             barWidth: '38px',
-            symbol: 'image://' + img.imgSrc3,
+            itemStyle: {
-            data: [total],
+              normal: {
+                color: {
+                  type: 'linear',
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [
+                    {
+                      offset: 0.1,
+                      color: 'rgba(254,254,254,0.1)'
+                    },
+                    {
+                      offset: 1,
+                      color: 'rgba(254,254,254,0.1)'
+                    }
+                  ]
+                }
+              }
+            },
+            data: totalDate,
             z: -1
+            // name: '阴影',
+            // type: 'pictorialBar',
+            // barWidth: '38px',
+            // symbol: 'image://' + img.imgSrc3,
+            // data: totalDate,
+            // itemStyle: {
+            //   opacity: itemOpacity
+            // },
+            // z: -1
           }
         ]
       }
@@ -988,8 +994,8 @@ export default {
 .left_wraper
     _wh(100%, 100%)
 .item_wraper
-    _wh(100%, calc((100% - 50px) / 3))
+    _wh(100%, calc((100% - 40px) / 3))
-    margin-bottom 25px
+    margin-bottom 20px
     &:last-child
         margin-bottom 0
 .title_wraper
@@ -1049,11 +1055,10 @@ export default {
 .pie_legend
   _wh(calc(100% - 195px), 100%)
   margin-left 195px
-  // _fj(row, flex-start)
+  _fj(, center)
-  // flex-wrap: wrap
 .pie_legend_item
   width 100%
-  padding 0 0px 5px 20px
+  padding 0 0px 2px 20px
 .pie_legend_item_bg_1
   background top left / 18px auto url('../../../../images/fk_1.png') no-repeat
 .pie_legend_item_bg_2
@@ -1064,18 +1069,22 @@ export default {
   background top left / 18px auto url('../../../../images/fk_4.png') no-repeat
 .pie_legend_item_bg_5
   background top left / 18px auto url('../../../../images/fk_5.png') no-repeat
+.pie_legend_item_bg_6
+  background top left / 18px auto url('../../../../images/fk_6.png') no-repeat
+.pie_legend_item_bg_7
+  background top left / 18px auto url('../../../../images/fk_7.png') no-repeat
 .pie_legend_txt_1
   font-size: 12px;
-  line-height: 18px
+  line-height: 14px
   font-family: 'SourceHanSansCN-Regular';
   color: #9BB9DD;
   word-wrap: break-word;
 .pie_legend_txt_wraper
-  _wh(100%, 20px)
+  _wh(100%, 18px)
   _fj(row)
 .pie_legend_txt_2
-  font-size 20px
+  font-size 18px
-  line-height: 20px
+  line-height: 18px
   font-family: 'YouSheBiaoTiHei'
   color: transparent;
   background: linear-gradient(0deg, #E5F2FC 0%, #CDEAFC 53.3154296875%, #A0DBFC 100%);
@@ -1083,8 +1092,8 @@ export default {
   -webkit-background-clip: text;
   background-clip: text;
 .pie_legend_txt_3
-  font-size: 16px;
+  font-size: 14px;
-  line-height: 20px
+  line-height: 18px
   font-family: 'SourceHanSansCN-Regular';
   color: #9BB9DD;
   opacity: 0.5;

src/pages/modules/home/right/left.vue

@@ -1,10 +1,176 @@
 <template>
-    <div class="left_wraper"></div>
+    <div class="left_wraper">
+        <div class="table_wraper_1">
+          <div class="scroll_wrap">
+            <div class="scroll_title">
+              <p>生产完成</p>
+            </div>
+            <div class="scroll_container_1">
+              <vue-seamless-scroll :data="productReport" :class-option="defaultOption1">
+                <ul class="scroll-ul_1">
+                  <li v-for="(e, i) in productReport" :key="i">
+                  <div class="scroll-ul_1_div">{{e.create_time}}</div>
+                  <div class="scroll-ul_1_div">{{e.material_code}}</div>
+                  <div class="scroll-ul_1_div">{{e.number}}</div>
+                  </li>
+                </ul>
+              </vue-seamless-scroll>
+            </div>
+          </div>
+        </div>
+        <div class="table_wraper_2">
+          <div class="scroll_wrap">
+            <div class="scroll_title">
+              <p>设备状态</p>
+            </div>
+            <div class="scroll_container_1">
+              <vue-seamless-scroll :data="deviceReport" :class-option="defaultOption1">
+                <ul class="scroll-ul_1 scroll-ul_2">
+                  <li v-for="(e, i) in deviceReport" :key="i">
+                  <div class="scroll-ul_1_div">{{e.failure_time}}</div>
+                  <div class="scroll-ul_1_div">{{e.device_code}}</div>
+                  <div class="scroll-ul_1_div">
+                    <span class="state" :class="'state_' + e.failure_info"></span>
+                    <p class="state_name">{{['关机', '待机', '生产中', '故障'][Number(e.failure_info)]}}</p>
+                  </div>
+                  </li>
+                </ul>
+              </vue-seamless-scroll>
+            </div>
+          </div>
+        </div>
+    </div>
 </template>
 
+<script>
+// import { homepageEquipment } from '@js/mork2.js'
+import { homepageEquipment } from '@js/getData2.js'
+export default {
+  data () {
+    return {
+      interTime: this.$store.getters.setTime,
+      timer: null,
+      productReport: [],
+      deviceReport: []
+    }
+  },
+  computed: {
+    defaultOption1 () {
+      return {
+        step: 0.4, // 数值越大速度滚动越快
+        limitMoveNum: 55, // 开始无缝滚动的数据量 this.dataList.length
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
+      }
+    }
+  },
+  created () {
+    this._homepageEquipment()
+    this.refresh()
+  },
+  methods: {
+    refresh () {
+      this.timer = setInterval(() => {
+        this._homepageEquipment()
+      }, this.interTime)
+    },
+    async _homepageEquipment () {
+      let res = await homepageEquipment()
+      this.productReport = [...res.productReport]
+      this.deviceReport = [...res.deviceReport]
+    }
+  }
+}
+</script>
+
 <style lang="stylus" scoped>
 @import '~@style/mixin'
 .left_wraper
+    position relative
     _wh(100%, 100%)
     background center / 100% 100% url('../../../../images/bg-center_right.jpg') no-repeat
+.table_wraper_1
+  position absolute
+  top 678px
+  right 408px
+  _wh(358px, 195px)
+.table_wraper_2
+  position absolute
+  top 678px
+  right 30px
+  _wh(358px, 195px)
+.scroll_wrap
+    _wh(100%, 100%)
+.scroll_title
+  _wh(100%, 31px)
+  background center / 100% 100% url('../../../../images/bg-title_3.png') no-repeat
+  padding 8px 8px 0 39px
+  p
+    font-size 20px
+    font-family: 'YouSheBiaoTiHei';
+    font-style: italic;
+    color: transparent;
+    line-height 20px
+    background: linear-gradient(0deg, #F9FEFF 0%, #F5FCFF 53.3154296875%, #BAE9FF 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+.scroll_container_1
+  width 100%
+  height calc(100% - 31px)
+  overflow hidden
+.scroll-ul_1
+  li
+    _wh(100%, 40px)
+    border-bottom 1px solid rgba(122,159,224,0.17)
+    background-color rgba(31,46,73,0.9)
+    &:nth-child(2)
+      opacity: 0.9
+    &:nth-child(3)
+      opacity: 0.7
+    &:nth-child(4)
+      opacity: 0.5
+    .scroll-ul_1_div
+      float left
+      height 40px
+      _fj(row, center)
+      _font(16px, 16px, #B2BBD7,,center)
+      font-family: 'SourceHanSansCN-Regular';
+      font-style: italic;
+      word-wrap break-word
+      word-break break-all
+      // white-space nowrap
+      padding 0 5px
+      overflow hidden
+      &:nth-child(1)
+        width 30%
+      &:nth-child(2)
+        width 50%
+      &:nth-child(3)
+        width 20%
+      .state
+        display block
+        _wh(20px, 14px)
+      .state_name
+        width calc(100% - 20px)
+.scroll-ul_2
+  li
+    .scroll-ul_1_div
+      &:nth-child(1)
+        width 50%
+      &:nth-child(2)
+        width 30%
+      &:nth-child(3)
+        width 20%
+.state_0
+  background center / 100% 100% url('../../../../images/state_0.png') no-repeat
+.state_1
+  background center / 100% 100% url('../../../../images/state_1.png') no-repeat
+.state_2
+  background center / 100% 100% url('../../../../images/state_2.png') no-repeat
+.state_3
+  background center / 100% 100% url('../../../../images/state_3.png') no-repeat
 </style>

src/pages/modules/home/right/right.vue

@@ -15,9 +15,20 @@
                 <div class="title_wraper">
                     <p>设备运行统计</p>
                 </div>
-                <div class="content_wraper">
+                <div class="content_wraper relative">
-                  <div class="echart_wraper">
+                  <div class="pie_wraper_2">
+                    <div class="echart_wraper">
                       <div id="new_home_echart_7" style="width: 100%; height: 100%;"></div>
+                    </div>
+                  </div>
+                  <div class="pie_legend">
+                    <div class="pie_legend_item" v-for="(e, i) in stateStatistics.fourState" :key="i" :class="'pie_legend_item_bg_' + (i + 1)">
+                      <p class="pie_legend_txt_1">{{ e.stateName }}</p>
+                      <div class="pie_legend_txt_wraper">
+                        <p class="pie_legend_txt_2">{{ e.status }}</p>
+                        <p class="pie_legend_txt_3">{{ e.rate }}</p>
+                      </div>
+                    </div>
                   </div>
                 </div>
             </div>
@@ -29,7 +40,7 @@
                 </div>
                 <div class="content_wraper">
                   <div class="echart_wraper">
-                      <div id="new_home_echart_6" style="width: 100%; height: 100%;"></div>
+                      <div id="new_home_echart_8" style="width: 100%; height: 100%;"></div>
                   </div>
                 </div>
             </div>
@@ -37,9 +48,9 @@
                 <div class="title_wraper">
                     <p>30天故障-TOP10</p>
                 </div>
-                <div class="content_wraper">
+                <div class="content_wraper content_wraper_1">
                   <div class="echart_wraper">
-                      <div id="new_home_echart_7" style="width: 100%; height: 100%;"></div>
+                      <div id="new_home_echart_9" style="width: 100%; height: 100%;"></div>
                   </div>
                 </div>
             </div>
@@ -49,27 +60,86 @@
                 <p>设备工单生产</p>
             </div>
             <div class="content_wraper">
+              <div class="scroll_wrap">
+                <ul class="scroll_tab_1">
+                  <li>工序</li>
+                  <li>设备号</li>
+                  <li>设备名称</li>
+                  <li>状态</li>
+                  <li>生产工单</li>
+                  <li>BOM号</li>
+                  <li>物料</li>
+                  <li>数量</li>
+                  <li>开始时间</li>
+                </ul>
+                <div class="scroll_container_1">
+                  <vue-seamless-scroll :data="deviceWorkOrder" :class-option="defaultOption1">
+                    <ul class="scroll-ul_1">
+                      <li v-for="(e, i) in deviceWorkOrder" :key="i">
+                      <div class="scroll-ul_1_div">{{e.process}}</div>
+                      <div class="scroll-ul_1_div">{{e.deviceCode}}</div>
+                      <div class="scroll-ul_1_div">{{e.deviceName}}</div>
+                      <div class="scroll-ul_1_div">
+                        <span class="state" :class="'state_' + e.status"></span>
+                        <p class="state_name">{{['关机', '待机', '生产中', '故障'][Number(e.status)]}}</p>
+                      </div>
+                      <div class="scroll-ul_1_div">{{e.workOrder}}</div>
+                      <div class="scroll-ul_1_div">{{e.bom}}</div>
+                      <div class="scroll-ul_1_div">{{e.material}}</div>
+                      <div class="scroll-ul_1_div">{{e.qty}}</div>
+                      <div class="scroll-ul_1_div">{{e.startTime}}</div>
+                      </li>
+                    </ul>
+                  </vue-seamless-scroll>
+                </div>
+              </div>
             </div>
         </div>
     </div>
 </template>
 
 <script>
-import { homepageDataRight } from '@js/mork2.js'
+// import { homepageDataRight } from '@js/mork2.js'
+import { homepageDataRight } from '@js/getData2.js'
+import bg1 from '@img/bg1.png'
+import bg2 from '@img/bg2.png'
+import bg3 from '@img/bg3.png'
+import bg4 from '@img/bg4.png'
+import pointerImg from '@img/pointer.png'
 export default {
   data () {
     return {
       interTime: this.$store.getters.setTime,
       timer: null,
-      capacityRate: {}, // 设备产能利用
+      chart7Timer: null,
-      stateStatistics: {},
+      capacityRate: [], // 设备产能利用
-      deviceWorkOrder: [] // 设备工单生产
+      stateStatistics: {}, // 设备运行统计
+      deviceWorkOrder: [], // 设备工单生产
+      areaDeviceStatus: [{process: '混料'}, {process: '压制'}, {process: '干燃'}, {process: '包装'}], // 工序设备状态
+      top10Of30Days: [] // 30天故障top10
+    }
+  },
+  computed: {
+    defaultOption1 () {
+      return {
+        step: 0.4, // 数值越大速度滚动越快
+        limitMoveNum: 55, // 开始无缝滚动的数据量 this.dataList.length
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
+      }
     }
   },
   created () {
     this._homepageDataRight()
     this.refresh()
   },
+  beforeDestroy () {
+    clearInterval(this.chart7Timer)
+  },
   methods: {
     refresh () {
       this.timer = setInterval(() => {
@@ -78,8 +148,694 @@ export default {
     },
     async _homepageDataRight () {
       let res = await homepageDataRight()
-      this.capacityRate = res.capacityRate
+      clearInterval(this.chart7Timer)
+      this.capacityRate = [...res.capacityRate]
+      res.stateStatistics.fourState.map(el => {
+        let rate = Number(el.status) * 100 / Number(res.stateStatistics.count)
+        rate = rate.toFixed(2) + '%'
+        this.$set(el, 'rate', rate)
+      })
+      this.stateStatistics = res.stateStatistics
       this.deviceWorkOrder = [...res.deviceWorkOrder]
+      this.areaDeviceStatus.map((e, i) => {
+        if (i === 0) {
+          this.$set(e, 'running', res.areaDeviceStatus.mix.running)
+          this.$set(e, 'pausing', res.areaDeviceStatus.mix.pausing)
+          this.$set(e, 'shutdown', res.areaDeviceStatus.mix.shutdown)
+          this.$set(e, 'inTrouble', res.areaDeviceStatus.mix.inTrouble)
+        }
+        if (i === 1) {
+          this.$set(e, 'running', res.areaDeviceStatus.press.running)
+          this.$set(e, 'pausing', res.areaDeviceStatus.press.pausing)
+          this.$set(e, 'shutdown', res.areaDeviceStatus.press.shutdown)
+          this.$set(e, 'inTrouble', res.areaDeviceStatus.press.inTrouble)
+        }
+        if (i === 2) {
+          this.$set(e, 'running', res.areaDeviceStatus.dry.running)
+          this.$set(e, 'pausing', res.areaDeviceStatus.dry.pausing)
+          this.$set(e, 'shutdown', res.areaDeviceStatus.dry.shutdown)
+          this.$set(e, 'inTrouble', res.areaDeviceStatus.dry.inTrouble)
+        }
+        if (i === 3) {
+          this.$set(e, 'running', res.areaDeviceStatus.sort.running)
+          this.$set(e, 'pausing', res.areaDeviceStatus.sort.pausing)
+          this.$set(e, 'shutdown', res.areaDeviceStatus.sort.shutdown)
+          this.$set(e, 'inTrouble', res.areaDeviceStatus.sort.inTrouble)
+        }
+      })
+      this.top10Of30Days = [...res.top10Of30Days]
+      this.top10Of30Days.map((e, i) => {
+        this.$set(e, 'sort', i + 1)
+      })
+      this.top10Of30Days = this.top10Of30Days.reverse()
+      this.setEchart1()
+      this.setEchart2()
+      this.setEchart3()
+      this.setEchart4()
+    },
+    setEchart1 () {
+      let img = {pointerImg: pointerImg}
+      let cdata = []
+      this.capacityRate.map(el => {
+        cdata.push({name: el.device_name, data: el.numerical})
+      })
+      let centerArr = [['25%', '35%'], ['75%', '35%'], ['25%', '90%'], ['75%', '90%']]
+      let topArr = ['35%', '35%', '90%', '90%']
+      let leftArr = ['0%', '50%', '0%', '50%']
+      let titleArr = []
+      let seriesArr = []
+      cdata.forEach((item, index) => {
+        titleArr.push({
+          text: item.name,
+          top: topArr[index],
+          left: leftArr[index],
+          textAlign: 'left',
+          textStyle: {
+            color: '#AEC3DC',
+            fontSize: 16
+          }
+        })
+        seriesArr.push({
+          name: item.name,
+          type: 'gauge',
+          splitNumber: 10,
+          radius: '70%',
+          startAngle: 180,
+          endAngle: 0,
+          center: centerArr[index],
+          pointer: {// 仪表盘指针
+            icon: 'image://' + img.pointerImg,
+            width: 24,
+            height: 88,
+            length: '90%',
+            offsetCenter: [0, 10]
+          },
+          axisLine: { // 坐标轴线
+            lineStyle: {
+              width: 10,
+              color: [
+                [1 / 4, '#67D470'],
+                [1 / 2, '#1980EA'],
+                [3 / 4, '#13448B'],
+                [1, '#324C66']
+              ]
+            }
+          },
+          axisLabel: {
+            show: false
+          },
+          axisTick: {
+            show: true,
+            splitNumber: 3,
+            distance: 0,
+            lineStyle: {
+              color: '#fff', // 用颜色渐变函数不起作用
+              width: 1
+            },
+            length: -4
+          },
+          splitLine: {
+            show: true,
+            distance: 0,
+            lineStyle: {
+              color: '#fff',
+              width: 1
+            },
+            length: -12
+          },
+          title: {
+            show: false
+          },
+          detail: {
+            fontSize: 20,
+            fontFamily: 'YouSheBiaoTiHei',
+            color: '#D5F2FF',
+            align: 'right',
+            offsetCenter: ['100%', 12],
+            valueAnimation: true,
+            formatter: '{value}' + '%'
+          },
+          data: [{
+            value: item.data
+          }]
+        })
+        seriesArr.push({
+          type: 'gauge',
+          radius: '40%',
+          startAngle: 180,
+          endAngle: 0,
+          center: centerArr[index],
+          splitLine: { // 表盘上的轴线
+            show: false
+          },
+          axisLabel: { // 表盘上的刻度数值文字
+            show: false
+          },
+          axisTick: { // 表盘上的刻度线
+            show: false
+          },
+          axisLine: { // 坐标轴线
+            lineStyle: {
+              width: 16,
+              color: [
+                [1, '#20406A']
+              ]
+            }
+          },
+          z: 1
+        })
+      })
+      let option = {
+        grid: {
+          top: 55,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          containLabel: true
+        },
+        title: titleArr,
+        series: seriesArr
+      }
+      let echart = this.$echarts.init(document.getElementById('new_home_echart_6'))
+      echart.setOption(option)
+      window.addEventListener('resize', () => {
+        echart.resize()
+      })
+    },
+    setEchart2 () {
+      let arr = this.stateStatistics.fourState
+      arr.map((el, i) => {
+        el.value = el.status
+        el.name = el.stateName
+      })
+      let total = this.stateStatistics.count
+      let seriesData = []
+      arr.forEach(r => {
+        seriesData.push(r)
+        seriesData.push({
+          name: '',
+          value: 5,
+          tooltip: { show: false },
+          itemStyle: {
+            label: {
+              show: false
+            },
+            labelLine: {
+              show: false
+            },
+            color: 'rgba(0, 0, 0, 0)',
+            borderColor: 'rgba(0, 0, 0, 0)',
+            borderWidth: 0
+          }
+        })
+      })
+      let option = {
+        color: ['#1980EA', '#67D470', '#B4C9EF', '#BCBF5C', '#EF5252', '#6d5edd', '#bf41bb'],
+        grid: {
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          containLabel: true
+        },
+        title: {
+          text: `{a|总数}\n{b|${total}}`,
+          x: 'center',
+          y: '39%',
+          textStyle: {
+            rich: {
+              a: {
+                fontSize: 16,
+                lineHeight: 20,
+                color: '#A8C3E6',
+                fontFamily: 'SourceHanSansCN-Regular'
+              },
+              b: {
+                fontSize: 30,
+                lineHeight: 36,
+                color: '#DBE7F6',
+                fontFamily: 'YouSheBiaoTiHei'
+              }
+            }
+          }
+        },
+        series: [{
+          name: '库存量监控',
+          type: 'pie',
+          radius: ['50%', '57%'],
+          center: ['50%', '50%'],
+          labelLine: {
+            show: false
+          },
+          tooltip: {
+            show: false
+          },
+          label: {
+            show: false
+          },
+          selectedMode: 'single',
+          selectedOffset: 20,
+          data: seriesData
+        }]
+      }
+      let echart = this.$echarts.init(document.getElementById('new_home_echart_7'))
+      echart.setOption(option)
+      let bu = 0
+      this.chart7Timer = setInterval(() => {
+        if (bu > seriesData.length - 1) {
+          bu = 0
+        }
+        echart.dispatchAction({
+          type: 'select', // 默认显示江苏的提示框
+          seriesIndex: 0, // 这行不能省
+          dataIndex: bu
+        })
+        bu++
+      }, 2000)
+      window.addEventListener('resize', () => {
+        echart.resize()
+      })
+    },
+    setEchart3 () {
+      let barName = []
+      let barData1 = []
+      let barData2 = []
+      let barData3 = []
+      let barData4 = []
+      this.areaDeviceStatus.map(el => {
+        barName.push(el.process)
+        barData1.push(el.running)
+        barData2.push(el.pausing)
+        barData3.push(el.shutdown)
+        barData4.push(el.inTrouble)
+      })
+      let option = {
+        grid: {
+          top: 55,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          containLabel: true
+        },
+        legend: {
+          icon: 'rect',
+          top: '0',
+          right: '0',
+          textStyle: {
+            color: '#9BB9DD',
+            fontSize: 16,
+            lineHeight: 16
+          },
+          itemGap: 30,
+          itemWidth: 8,
+          itemHeight: 8,
+          data: [{name: '运行', itemStyle: {color: '#1980EA'}}, {name: '待机', itemStyle: {color: '#67D470'}}, {name: '关机', itemStyle: {color: '#B4C9EF'}}, {name: '故障', itemStyle: {color: '#EF5252'}}]
+        },
+        xAxis: {
+          type: 'category',
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              width: 1,
+              color: '#3C5787'
+            }
+          },
+          axisLabel: {
+            interval: 0,
+            color: '#7591B2',
+            fontSize: 16,
+            lineHeight: 16,
+            fontFamily: 'SourceHanSansCN-Regular',
+            margin: 10
+          },
+          data: barName
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            show: false
+          },
+          splitNumber: 4,
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            color: '#B5C5D4',
+            fontSize: 16,
+            fontFamily: 'SourceHanSansCN-Regular'
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: [4, 3],
+              color: '#455C86'
+            }
+          }
+        },
+        series: [
+          {
+            name: '运行',
+            type: 'pictorialBar',
+            symbolRepeat: 'fixed',
+            symbolMargin: 2,
+            symbol: 'rect',
+            symbolClip: true,
+            symbolSize: [9, 4],
+            symbolPosition: 'center',
+            symbolOffset: [-24, 0],
+            itemStyle: {
+              color: '#1980EA'
+            },
+            data: barData1
+          },
+          {
+            name: '待机',
+            type: 'pictorialBar',
+            symbolRepeat: 'fixed',
+            symbolMargin: 2,
+            symbol: 'rect',
+            symbolClip: true,
+            symbolSize: [9, 4],
+            symbolPosition: 'center',
+            symbolOffset: [-9, 0],
+            itemStyle: {
+              color: '#67D470'
+            },
+            data: barData2
+          },
+          {
+            name: '关机',
+            type: 'pictorialBar',
+            symbolRepeat: 'fixed',
+            symbolMargin: 2,
+            symbol: 'rect',
+            symbolClip: true,
+            symbolSize: [9, 4],
+            symbolPosition: 'center',
+            symbolOffset: [9, 0],
+            itemStyle: {
+              color: '#B4C9EF'
+            },
+            data: barData3
+          },
+          {
+            name: '故障',
+            type: 'pictorialBar',
+            symbolRepeat: 'fixed',
+            symbolMargin: 2,
+            symbol: 'rect',
+            symbolClip: true,
+            symbolSize: [9, 4],
+            symbolPosition: 'center',
+            symbolOffset: [24, 0],
+            itemStyle: {
+              color: '#EF5252'
+            },
+            data: barData4
+          }
+        ]
+      }
+      let echart = this.$echarts.init(document.getElementById('new_home_echart_8'))
+      echart.setOption(option)
+      window.addEventListener('resize', () => {
+        echart.resize()
+      })
+    },
+    setEchart4 () {
+      let ydata = []
+      let xdata = []
+      let total = 0
+      this.top10Of30Days.map(el => {
+        total = Math.max(total, Number(el.count))
+      })
+      let data = []
+      this.top10Of30Days.map(el => {
+        ydata.push(el.deviceName)
+        xdata.push({name: el.deviceName, value: el.count, sort: el.sort})
+        data.push({value: total, num: el.count})
+      })
+      let img = {
+        bg1: bg1,
+        bg2: bg2,
+        bg3: bg3,
+        bg4: bg4
+      }
+      let colorArray = [
+        {
+          top: '#537BCB',
+          bottom: '#ADC0E6'
+        },
+        {
+          top: '#537BCB',
+          bottom: '#ADC0E6'
+        },
+        {
+          top: '#537BCB',
+          bottom: '#ADC0E6'
+        },
+        {
+          top: '#537BCB',
+          bottom: '#ADC0E6'
+        },
+        {
+          top: '#537BCB',
+          bottom: '#ADC0E6'
+        },
+        {
+          top: '#537BCB',
+          bottom: '#ADC0E6'
+        },
+        {
+          top: '#537BCB',
+          bottom: '#ADC0E6'
+        },
+        {
+          top: '#6B4C43',
+          bottom: '#B8A590'
+        },
+        {
+          top: '#3261FB',
+          bottom: '#6BB5FB'
+        }, {
+          top: '#8C620F',
+          bottom: '#C7B51C'
+        }
+      ]
+      let option = {
+        grid: {
+          top: 13,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          containLabel: true
+        },
+        xAxis: {
+          splitLine: {
+            show: false
+          },
+          axisLine: {
+            show: false
+          },
+          axisLabel: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        yAxis: {
+          type: 'category',
+          data: ydata,
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            show: false
+          },
+          max: total
+        },
+        series: [{
+          type: 'bar',
+          showBackground: true,
+          backgroundStyle: {
+            color: '#FFFFFF',
+            borderWidth: 5
+          },
+          label: {
+            show: true,
+            position: [-2, -32],
+            formatter: (value) => {
+              let o = value.data
+              if (o.sort === 1) {
+                return '{one|' + 'TOP' + o.sort + '} {a|' + o.name + '}'
+              } else if (o.sort === 2) {
+                return '{two|' + 'TOP' + o.sort + '} {a|' + o.name + '}'
+              } else if (o.sort === 3) {
+                return '{three|' + 'TOP' + o.sort + '} {a|' + o.name + '}'
+              } else {
+                return '{four|' + 'TOP' + o.sort + '} {a|' + o.name + '}'
+              }
+            },
+            rich: {
+              // 第一名
+              one: {
+                backgroundColor: {
+                  image: img.bg1
+                },
+                color: '#fff',
+                width: 60,
+                height: 32,
+                fontSize: 16,
+                lineHeight: 16,
+                align: 'center',
+                fontFamily: 'YouSheBiaoTiHei'
+              },
+              // 第二名
+              two: {
+                backgroundColor: {
+                  image: img.bg2
+                },
+                color: '#fff',
+                width: 60,
+                height: 32,
+                fontSize: 16,
+                lineHeight: 16,
+                align: 'center',
+                fontFamily: 'YouSheBiaoTiHei'
+              },
+              // 第三名
+              three: {
+                backgroundColor: {
+                  image: img.bg3
+                },
+                color: '#fff',
+                width: 60,
+                height: 32,
+                fontSize: 16,
+                lineHeight: 16,
+                align: 'center',
+                fontFamily: 'YouSheBiaoTiHei'
+              },
+              four: {
+                backgroundColor: {
+                  image: img.bg4
+                },
+                color: '#fff',
+                width: 60,
+                height: 32,
+                fontSize: 16,
+                lineHeight: 16,
+                align: 'center',
+                fontFamily: 'YouSheBiaoTiHei'
+              },
+              a: {
+                color: '#AEC3DC',
+                height: 32,
+                fontSize: 16,
+                lineHeight: 16,
+                padding: [0, 0, 0, 7],
+                fontFamily: 'SourceHanSansCN-Regular'
+              }
+            }
+          },
+          barWidth: 3,
+          itemStyle: {
+            normal: {
+              color: (params) => {
+                let num = colorArray.length
+                return {
+                  type: 'linear',
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: colorArray[params.dataIndex % num].bottom
+                    },
+                    {
+                      offset: 1,
+                      color: colorArray[params.dataIndex % num].top
+                    },
+                    {
+                      offset: 0,
+                      color: colorArray[params.dataIndex % num].bottom
+                    },
+                    {
+                      offset: 1,
+                      color: colorArray[params.dataIndex % num].top
+                    },
+                    {
+                      offset: 0,
+                      color: colorArray[params.dataIndex % num].bottom
+                    },
+                    {
+                      offset: 1,
+                      color: colorArray[params.dataIndex % num].top
+                    }
+                  ]
+                  // globalCoord: false
+                }
+              }
+            }
+          },
+          data: xdata
+        }, {
+          name: '背景',
+          type: 'bar',
+          barWidth: 3,
+          barGap: '-100%',
+          itemStyle: {
+            color: '#fff'
+          },
+          z: 1,
+          label: {
+            show: true,
+            position: ['93%', -30],
+            formatter: (value) => {
+              return '{a|' + value.data.num + '}'
+            },
+            rich: {
+              a: {
+                height: 32,
+                fontSize: 20,
+                lineHeight: 20,
+                align: 'right',
+                fontFamily: 'YouSheBiaoTiHei',
+                color: '#E1F6FF'
+              }
+            }
+          },
+          data: data
+        }],
+        dataZoom: [
+          {
+            yAxisIndex: [0, 1], // 这里是从X轴的0刻度开始
+            show: false, // 是否显示滑动条，不影响使用
+            type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
+            startValue: 9, // 从头开始。
+            endValue: 6 // 展示到第几个。
+          }
+        ]
+      }
+      let echart = this.$echarts.init(document.getElementById('new_home_echart_9'))
+      echart.setOption(option)
+      this.chart9Timer = setInterval(() => {
+        if (option.dataZoom[0].endValue === 0) {
+          option.dataZoom[0].endValue = 6
+          option.dataZoom[0].startValue = 9
+        } else {
+          option.dataZoom[0].endValue = option.dataZoom[0].endValue - 1
+          option.dataZoom[0].startValue = option.dataZoom[0].startValue - 1
+        }
+        echart.setOption(option)
+      }, 2000)
+      window.addEventListener('resize', () => {
+        echart.resize()
+      })
     }
   }
 }
@@ -90,8 +846,8 @@ export default {
 .right_wraper
     _wh(100%, 100%)
 .item_wraper
-    _wh(100%, calc((100% - 50px) / 3))
+    _wh(100%, calc((100% - 40px) / 3))
-    margin-bottom 25px
+    margin-bottom 20px
     &:last-child
         margin-bottom 0
 .l_item_wraper
@@ -119,4 +875,127 @@ export default {
     background center / 100% url('../../../../images/bg-m_1.png') no-repeat
 .echart_wraper
     _wh(100%, 100%)
+.scroll_wrap
+    _wh(100%, 100%)
+    padding 20px 20px 0 20px
+.scroll_tab_1
+  _wh(100%, 38px)
+  background center / 100% url('../../../../images/table-bg_1.png') no-repeat
+  li
+    float left
+    width 10%
+    _font(16px,38px,#AFBED8,,center)
+    font-family: 'SourceHanSansCN-Regular';
+    font-weight: bold;
+    font-style: italic;
+    word-wrap break-word
+    word-break break-all
+    white-space nowrap
+    padding 0 5px
+    overflow hidden
+    box-sizing border-box
+    &:nth-child(1), &:nth-child(2), &:nth-child(3), &:nth-child(4)
+        width 8%
+    &:nth-child(7)
+        width 19%
+    &:nth-child(9)
+      width 19%
+    .state
+      display block
+        _wh(20px, 14px)
+    .state_name
+      width calc(100% - 20px)
+.scroll_container_1
+  width 100%
+  height calc(100% - 38px)
+  overflow hidden
+.scroll-ul_1
+  li
+    _wh(100%, 40px)
+    border-bottom 1px solid rgba(122,159,224,0.17)
+    &:nth-child(even)
+      background rgba(31,46,73,0.7)
+    &:nth-child(odd)
+      background rgba(31,46,73,0.55)
+    &:nth-child(5)
+      opacity: 0.5
+    .scroll-ul_1_div
+      float left
+      _wh(10%, 39px)
+      _fj(row, center)
+      _font(16px, 16px, #B2BBD7,,center)
+      font-family: 'SourceHanSansCN-Regular';
+      font-style: italic;
+      word-wrap break-word
+      word-break break-all
+      // white-space nowrap
+      padding 0 5px
+      overflow hidden
+      &:nth-child(1), &:nth-child(2), &:nth-child(3), &:nth-child(4)
+        width 8%
+      &:nth-child(7)
+        width 19%
+      &:nth-child(9)
+        width 19%
+      .state
+        display block
+        _wh(20px, 14px)
+      .state_name
+        width calc(100% - 20px)
+.pie_wraper_2
+    position absolute
+    top 17px
+    left 0
+    _wh(222px, 222px)
+    background center / 100% auto url('../../../../images/pie-bg_2.png') no-repeat
+.pie_legend
+  _wh(calc(100% - 200px), 100%)
+  margin-left 200px
+  _fj(row,)
+  flex-wrap: wrap
+.pie_legend_item
+  width 50%
+  padding 0 0px 2px 20px
+.pie_legend_item_bg_1
+  background top left / 18px auto url('../../../../images/fk_1.png') no-repeat
+.pie_legend_item_bg_2
+  background top left / 18px auto url('../../../../images/fk_2.png') no-repeat
+.pie_legend_item_bg_3
+  background top left / 18px auto url('../../../../images/fk_3.png') no-repeat
+.pie_legend_item_bg_4
+  background top left / 18px auto url('../../../../images/fk_4.png') no-repeat
+.pie_legend_item_bg_5
+  background top left / 18px auto url('../../../../images/fk_5.png') no-repeat
+.pie_legend_item_bg_6
+  background top left / 18px auto url('../../../../images/fk_6.png') no-repeat
+.pie_legend_item_bg_7
+  background top left / 18px auto url('../../../../images/fk_7.png') no-repeat
+.pie_legend_txt_1
+  font-size: 16px;
+  line-height: 16px
+  font-family: 'SourceHanSansCN-Regular';
+  color: #9BB9DD;
+  margin-bottom 8px
+.pie_legend_txt_wraper
+  width 100%
+.pie_legend_txt_2
+  font-size 20px
+  line-height: 20px
+  font-family: 'YouSheBiaoTiHei'
+  color: transparent;
+  background: linear-gradient(0deg, #E5F2FC 0%, #CDEAFC 53.3154296875%, #A0DBFC 100%);
+  filter: drop-shadow(rgba(5,28,55,0.42) 0px 2px 8px);
+  -webkit-background-clip: text;
+  background-clip: text;
+  margin-bottom 8px
+.pie_legend_txt_3
+  font-size: 16px;
+  line-height: 16px
+  font-family: 'SourceHanSansCN-Regular';
+  color: #9BB9DD;
+  opacity: 0.5;
+.content_wraper_1
+  padding-bottom: 0
+  .echart_wraper
+    height calc(100% + 21px)
 </style>

src/style/layout.styl

@@ -1,2 +1,11 @@
 @import 'mixin.styl'
-@import 'iconfont.styl'
+@import 'iconfont.styl'
+
+.state_0
+  background center / 100% 100% url('../images/state_0.png') no-repeat
+.state_1
+  background center / 100% 100% url('../images/state_1.png') no-repeat
+.state_2
+  background center / 100% 100% url('../images/state_2.png') no-repeat
+.state_3
+  background center / 100% 100% url('../images/state_3.png') no-repeat