From 567c7b76cef33b734a99d334232417b100ca6f40 Mon Sep 17 00:00:00 2001
From: xiangxy <shione_xxy@163.com>
Date: Tue, 7 Mar 2023 09:06:36 +0800
Subject: [PATCH] prod

---
 src/assets/js/getData1.js     | 111 ++++-
 src/pages/ProdCount2.vue      |  33 +-
 src/pages/StorageMonitor2.vue | 823 ++++++++++++++++++++++++++++++++++
 src/router/index.js           |   2 +-
 4 files changed, 936 insertions(+), 33 deletions(-)
 create mode 100644 src/pages/StorageMonitor2.vue

diff --git a/src/assets/js/getData1.js b/src/assets/js/getData1.js
index 09ab5d1..fea4510 100644
--- a/src/assets/js/getData1.js
+++ b/src/assets/js/getData1.js
@@ -10,23 +10,28 @@ export const storageMonitor = () => {
         'point_id': '1597551506607968256',
         'point_code': 'YZJHJ04',
         'point_name': '压制机旧料盅货架04',
+        'point_status': '1',
         'material_id': 1556534702800769024,
+        'material_code': 'HW00001',
         'material_name': '木质花纹2cm',
         'vehicle_code': '1M3000009',
         'ivt_qty': 1000.000000,
         'ivt_weight': 800.000000,
         'instorage_time': '2023-2-27 16:07:09',
         'standing_time': 20,
+        'standing_status': null,
         'warn_time': '5',
         'is_full': '1'
       }
     ],
     'materialTask': [
       {
-        'point_id': '1518061204965298176',
-        'point_code': 'YZJ0904',
-        'point_name': '压制机9料盅位4',
+        'point_id': '1597551506607968256',
+        'point_code': 'YZJHJ04',
+        'point_name': '压制机旧料盅货架04',
+        'point_status': '1',
         'material_id': 1556534702800769024,
+        'material_code': 'HW00001',
         'material_name': '木质花纹2cm',
         'vehicle_code': '1M3000009',
         'ivt_qty': 1000.000000,
@@ -34,7 +39,46 @@ export const storageMonitor = () => {
         'instorage_time': '2023-2-27 16:07:09',
         'standing_time': 20,
         'standing_status': '静置完成',
-        'warn_time': '5'
+        'warn_time': '5',
+        'is_full': '是'
+      }
+    ],
+    'productionList': [
+      {
+        'point_id': '1597551506607968256',
+        'point_code': 'YZJHJ04',
+        'point_name': '压制机旧料盅货架04',
+        'point_status': '1',
+        'material_id': 1556534702800769024,
+        'material_code': 'HW00001',
+        'material_name': '木质花纹2cm',
+        'vehicle_code': '1M3000009',
+        'ivt_qty': 1000.000000,
+        'ivt_weight': 800.000000,
+        'instorage_time': '2023-2-27 16:07:09',
+        'standing_time': 20,
+        'standing_status': null,
+        'warn_time': '5',
+        'is_full': '1'
+      }
+    ],
+    'materialList': [
+      {
+        'point_id': '1597551506607968256',
+        'point_code': 'YZJHJ04',
+        'point_name': '压制机旧料盅货架04',
+        'point_status': '1',
+        'material_id': 1556534702800769024,
+        'material_code': 'HW00001',
+        'material_name': '木质花纹2cm',
+        'vehicle_code': '1M3000009',
+        'ivt_qty': 1000.000000,
+        'ivt_weight': 800.000000,
+        'instorage_time': '2023-2-27 16:07:09',
+        'standing_time': 20,
+        'standing_status': '静置完成',
+        'warn_time': '5',
+        'is_full': '是'
       }
     ]
   }
@@ -48,40 +92,67 @@ export const productionStatistics = () => {
   let res = {
     'finishedTask': [
       {
-        'realqty': '130',
-        'planqty': '300',
-        'workorder_procedure': '2'
+        'workorder_procedure': '今日压制量',
+        'real_qty': 130
       },
       {
-        'realqty': '160',
-        'planqty': '200',
-        'workorder_procedure': '3'
+        'workorder_procedure': '今日干燥量',
+        'real_qty': 160
       },
       {
-        'realqty': '70',
-        'planqty': '100',
-        'workorder_procedure': '4'
+        'workorder_procedure': '今日成品量',
+        'real_qty': 70
+      }
+    ],
+    'planRes': [
+      {
+        'workorder_procedure': '压制',
+        'plan_qty': 300,
+        'real_qty': 130
+      },
+      {
+        'workorder_procedure': '干燥',
+        'plan_qty': 200,
+        'real_qty': 160
+      },
+      {
+        'workorder_procedure': '包装',
+        'plan_qty': 100,
+        'real_qty': 70
+      }
+    ],
+    'materialTask': [
+      {
+        'plan_qty': '600',
+        'real_qty': '360'
       }
     ],
     'productionTask': [
       {
         'workorder_id': '1597564588067524613',
-        'label': '烧制工序',
+        'label': '烧制',
         'device_name': '混料机3',
         'material_code': 'HW00001',
         'material_name': '木质花纹2cm',
         'cust_name': '新余钢铁',
         'plan_qty': 100,
         'real_qty': 80,
-        'order_status': '5',
+        'order_status': '完成',
         'shift_type': '烧制白班',
         'realproducestart_date': '2023-2-27 12:40:00'
-      }
-    ],
-    'materialTask': [
+      },
       {
-        'realqty': '360',
-        'planqty': '600'
+        'workorder_id': '1597564588067524608',
+        'label': '压制',
+        'device_name': '混料机3',
+        'material_code': 'HW00001',
+        'material_name': '木质花纹2cm',
+        'cust_name': '新余钢铁',
+        'plan_qty': 100,
+        'real_qty': 0,
+        'order_status': '暂停',
+        'shift_type': '压制白班',
+        'realproducestart_date': '2023-2-27 09:15:00'
       }
     ]
   }
diff --git a/src/pages/ProdCount2.vue b/src/pages/ProdCount2.vue
index 669a4ea..3f701d9 100644
--- a/src/pages/ProdCount2.vue
+++ b/src/pages/ProdCount2.vue
@@ -1,6 +1,6 @@
 <template>
   <section>
-    <t-header index='2'></t-header>
+    <t-header index='1'></t-header>
     <section>
       <div class="con1">
         <div class="c-title c-left">
@@ -21,7 +21,7 @@
         <div class="c-title c-right" style="marginLeft: 1.5rem;">
           <span>今日成品量：</span>
           <div class="num">
-            <div class="bg" v-for="item in showNum2" :key="item" :class="{dot: item === '.'}">{{item}}</div>
+            <div class="bg" v-for="item in showNum3" :key="item" :class="{dot: item === '.'}">{{item}}</div>
           </div>
           <span>吨</span>
         </div>
@@ -30,8 +30,8 @@
         <div class="con2">
           <div class="title">原料计划完成情况</div>
           <div class="desc">
-            <div>计划生产：<span>12</span>吨</div>
-            <div>已生产：<span>2</span>吨</div>
+            <div>计划生产：<span>{{planqty}}</span>吨</div>
+            <div>已生产：<span>{{realqty}}</span>吨</div>
           </div>
           <div class="item_content_0">
             <div id="echart_d01" style="width: 100%; height: 100%"></div>
@@ -94,7 +94,9 @@ export default {
       materData: [],
       deviceData: [],
       resData: {},
-      taskData: []
+      taskData: [],
+      realqty: '',
+      planqty: ''
     }
   },
   computed: {
@@ -132,18 +134,24 @@ export default {
       let res = await productionStatistics()
       this.resData = res
       this.taskData = [...res.productionTask]
+      this.realqty = res.materialTask[0].real_qty
+      this.planqty = res.materialTask[0].plan_qty
+      this.showNum1 = (res.finishedTask[0].real_qty + '').split('')
+      this.showNum2 = (res.finishedTask[1].real_qty + '').split('')
+      this.showNum3 = (res.finishedTask[2].real_qty + '').split('')
       this.setEchart01()
       this.setEchart05()
     },
     setEchart01 () {
       // let data = [100, 30, 80, 50]
       let data = []
-      data.push(this.resData.materialTask[0].realqty)
-      data.push(this.resData.materialTask[0].planqty)
+      data.push(this.resData.materialTask[0].real_qty)
+      data.push(this.resData.materialTask[0].plan_qty)
       var option = {
         legend: {
           orient: 'vertical',
-          right: 0,
+          right: 'right',
+          top: '8%',
           data: ['未完成重量', '已经完成重量', '重量3', '重量4'],
           textStyle: {
             color: '#ffffff',
@@ -176,10 +184,10 @@ export default {
       var data05d0 = []
       var data05d1 = []
       var data05d2 = []
-      this.resData.finishedTask.map(el => {
+      this.resData.planRes.map(el => {
         data05d0.push(el.workorder_procedure)
-        data05d1.push(el.planqty)
-        data05d2.push(el.realqty)
+        data05d1.push(el.plan_qty)
+        data05d2.push(el.real_qty)
       })
       let option = {
         grid: {
@@ -665,8 +673,9 @@ export default {
     position absolute
     top .3rem
     left .25rem
-    height 375px
+    height 360px
     width 95%
+    margin-bottom .1rem
 .con4
   float left
   margin-left .49rem
diff --git a/src/pages/StorageMonitor2.vue b/src/pages/StorageMonitor2.vue
new file mode 100644
index 0000000..badceab
--- /dev/null
+++ b/src/pages/StorageMonitor2.vue
@@ -0,0 +1,823 @@
+<template>
+  <section>
+    <t-header index='2'></t-header>
+    <div class="content clearfix">
+      <div class="con1">
+        <div class="yard-wrap">
+          <div class="yard_group clearfix">
+            <div class="yard_group_ul yard_group_ul_1">
+              <div class="yard_group_cell" v-for="(e, i) in group01" :key="i" :class="{lock:e.lock_type ==='01'}">
+                <div class="yard_group_p" @click="getInfo1(e)">
+                  <p class="fontselect">{{e.struct_code}}</p>
+                  <div v-if="e.struct_url == '1'" class="machine_1"></div>
+                  <div class="ingbox" :style="{height:(Number(e.show_struct_qty)/1000*60+'px')}" :class="{blue:e.struct_status ==='01',green:e.struct_status ==='02',yellow:e.struct_status ==='03',red:e.struct_status ==='04',gray:e.struct_status ==='05'}"></div>
+                </div>
+                <div v-show="code1 === e.sequence_number" class="locate-wrap clearfix">
+                  <div :class="e.aline">
+                    <div class="foldcricle0 foldcricle1"></div>
+                    <div class="foldline0 foldline1"></div>
+                  </div>
+                  <div :class="e.bline">
+                    <div class="foldline0 foldline2"></div>
+                    <div class="foldcricle0 foldcricle2"></div>
+                  </div>
+                  <div class="clearfix locate-content" :class="e.coordinate">
+                    <div class="tan_pline">
+                      <p class="tan_p">货位：{{e.struct_code}}</p>
+                      <p class="tan_p">载具：{{e.storagevehicle_code}}</p>
+                      <p class="tan_p">物料：{{e.material_code}}</p>
+                      <p class="tan_p">名称：{{e.material_name}}</p>
+                      <p class="tan_p">重量：{{e.ivt_qty}}</p>
+                      <p class="tan_p">入库时间：{{e.instorage_time}}</p>
+                      <p class="tan_p">静置(h)：{{e.finish_times}}</p>
+                    </div>
+                    <div class="iconfont icon-guanbi close_btn" @click="closebtn"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="corridor_2">&nbsp;</div>
+          <div class="yard_group clearfix">
+            <div class="yard_group_ul yard_group_ul_2">
+              <div class="yard_group_cell" v-for="(e, i) in group02" :key="i" :class="{lock:e.lock_type ==='01'}">
+                <div class="yard_group_p" @click="getInfo1(e)">
+                  <p class="fontselect">{{e.struct_code}}</p>
+                  <div v-if="e.struct_url == '1'" class="machine_1"></div>
+                  <div class="ingbox" :style="{height:(Number(e.show_struct_qty)/1000*60+'px')}" :class="{blue:e.struct_status ==='01',green:e.struct_status ==='02',yellow:e.struct_status ==='03',red:e.struct_status ==='04',gray:e.struct_status ==='05'}"></div>
+                </div>
+                <div v-show="code1 === e.sequence_number" class="locate-wrap clearfix">
+                  <div :class="e.aline">
+                    <div class="foldcricle0 foldcricle1"></div>
+                    <div class="foldline0 foldline1"></div>
+                  </div>
+                  <div :class="e.bline">
+                    <div class="foldline0 foldline2"></div>
+                    <div class="foldcricle0 foldcricle2"></div>
+                  </div>
+                  <div class="clearfix locate-content" :class="e.coordinate">
+                    <div class="tan_pline">
+                      <p class="tan_p">货位：{{e.struct_code}}</p>
+                      <p class="tan_p">载具：{{e.storagevehicle_code}}</p>
+                      <p class="tan_p">物料：{{e.material_code}}</p>
+                      <p class="tan_p">名称：{{e.material_name}}</p>
+                      <p class="tan_p">重量：{{e.ivt_qty}}</p>
+                      <p class="tan_p">入库时间：{{e.instorage_time}}</p>
+                      <p class="tan_p">静置(h)：{{e.finish_times}}</p>
+                    </div>
+                    <div class="iconfont icon-guanbi close_btn" @click="closebtn"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="corridor_2">&nbsp;</div>
+          <div class="yard_group clearfix">
+            <div class="yard_group_ul yard_group_ul_3">
+              <div class="yard_group_cell" v-for="(e, i) in group03" :key="i" :class="{lock:e.lock_type ==='01'}">
+                <div class="yard_group_p" @click="getInfo1(e)">
+                  <p class="fontselect">{{e.struct_code}}</p>
+                  <div v-if="e.struct_url == '1'" class="machine_1"></div>
+                  <div class="ingbox" :style="{height:(Number(e.show_struct_qty)/1000*60+'px')}" :class="{blue:e.struct_status ==='01',green:e.struct_status ==='02',yellow:e.struct_status ==='03',red:e.struct_status ==='04',gray:e.struct_status ==='05'}"></div>
+                </div>
+                <div v-show="code1 === e.sequence_number" class="locate-wrap clearfix">
+                  <div :class="e.aline">
+                    <div class="foldcricle0 foldcricle1"></div>
+                    <div class="foldline0 foldline1"></div>
+                  </div>
+                  <div :class="e.bline">
+                    <div class="foldline0 foldline2"></div>
+                    <div class="foldcricle0 foldcricle2"></div>
+                  </div>
+                  <div class="clearfix locate-content" :class="e.coordinate">
+                    <div class="tan_pline">
+                      <p class="tan_p">货位：{{e.struct_code}}</p>
+                      <p class="tan_p">载具：{{e.storagevehicle_code}}</p>
+                      <p class="tan_p">物料：{{e.material_code}}</p>
+                      <p class="tan_p">名称：{{e.material_name}}</p>
+                      <p class="tan_p">重量：{{e.ivt_qty}}</p>
+                      <p class="tan_p">入库时间：{{e.instorage_time}}</p>
+                      <p class="tan_p">静置(h)：{{e.finish_times}}</p>
+                    </div>
+                    <div class="iconfont icon-guanbi close_btn" @click="closebtn"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="tag_block">
+          <div class="tag_type">
+            <div class="type_color green"></div>
+            <div class="tag_text">静置中</div>
+          </div>
+          <div class="tag_type">
+            <div class="type_color blue"></div>
+            <div class="tag_text">空盅</div>
+          </div>
+          <div class="tag_type">
+            <div class="type_color gray"></div>
+            <div class="tag_text">禁用</div>
+          </div>
+          <div class="tag_type">
+            <div class="type_color yellow"></div>
+            <div class="tag_text">静置完成</div>
+          </div>
+          <div class="tag_type">
+            <div class="type_color red"></div>
+            <div class="tag_text">强制完成</div>
+          </div>
+        </div>
+      </div>
+      <div class="con-b con3">
+        <div class="block_h2">
+          <h2>原料库存</h2>
+        </div>
+        <div class="list_scroll_title">
+          <span>货位</span><span>物料编码</span><span>物料名称</span><span>重量</span><span>已静置时间</span><span>状态</span>
+        </div>
+        <vue-seamless-scroll :data="array1" :class-option="classOption" class="content-block-scroll">
+          <ul class="content-block-scroll-ul">
+            <li v-for="(e, i) in array1" :key="i">
+              <span>{{e.point_name}}</span><span>{{e.material_id}}</span><span>{{e.material_name}}</span><span>{{e.ivt_weight}}</span><span>{{e.standing_time}}</span><span>{{e.standing_status}}</span>
+            </li>
+          </ul>
+        </vue-seamless-scroll>
+      </div>
+      <div class="con-b con3">
+        <div class="block_h2">
+          <h2>成品库存</h2>
+        </div>
+        <div class="list_scroll_title">
+          <span>货位</span><span>物料编码</span><span>物料名称</span><span>库存数</span><span>是否满托</span><span>托盘号</span>
+        </div>
+        <vue-seamless-scroll :data="array2" :class-option="classOption" class="content-block-scroll">
+          <ul class="content-block-scroll-ul">
+            <li v-for="(e, i) in array2" :key="i">
+              <span>{{e.point_name}}</span><span>{{e.material_id}}</span><span>{{e.material_name}}</span><span>{{e.ivt_qty}}</span><span>{{e.is_full}}</span><span>{{e.vehicle_code}}</span>
+            </li>
+          </ul>
+        </vue-seamless-scroll>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+import THeader from '@components/header.vue'
+import * as echarts from 'echarts'
+import { storageMonitor } from '@js/getData1'
+export default {
+  name: 'StorageMonitor',
+  components: {
+    THeader
+  },
+  data () {
+    return {
+      interTime: this.$store.getters.setTime,
+      timer: null,
+      materArr1: [],
+      materArr2: [],
+      structArr: [],
+      array1: [],
+      array2: [],
+      group01: [],
+      group02: [],
+      group03: [],
+      code1: ''
+    }
+  },
+  computed: {
+    // classOption () {
+    //   return {
+    //     step: 0.4,
+    //     limitMoveNum: 6
+    //   }
+    // }
+    classOption () {
+      return {
+        step: 0.2, // 数值越大速度滚动越快
+        limitMoveNum: 3, // 开始无缝滚动的数据量 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)
+      }
+    }
+  },
+  mounted () {
+    // lock_type 00空闲，01锁定
+    // struct_status 00为空，01为空盅，02为静置中，03为静置完成，04为强制完成，05为禁用
+    // 编号排布
+    // 12排
+    let pai1 = []
+    let pai2 = []
+    let pai12 = []
+    for (let i = 1; i <= 20; i++) {
+      if (i <= 10) {
+        pai1.push({sequence_number: i * 2 - 1, coordinate: 'coordinate1', aline: 'aline1', bline: 'bline1', show: 0})
+        pai2.push({sequence_number: i * 2, coordinate: 'coordinate1', aline: 'aline1', bline: 'bline1', show: 0})
+      } else {
+        pai1.push({sequence_number: i * 2 - 1, coordinate: 'coordinate2', aline: 'aline2', bline: 'bline2', show: 0})
+        pai2.push({sequence_number: i * 2, coordinate: 'coordinate2', aline: 'aline2', bline: 'bline2', show: 0})
+      }
+    }
+    pai12 = pai1.concat(pai2)
+    this.group01 = pai12
+    // 34排
+    let pai3 = []
+    let pai4 = []
+    let pai34 = []
+    for (let i = 21; i <= 38; i++) {
+      if (i <= 30) {
+        pai3.push({sequence_number: i * 2 - 1, coordinate: 'coordinate1', aline: 'aline1', bline: 'bline1', show: 0})
+        pai4.push({sequence_number: i * 2, coordinate: 'coordinate3', aline: 'aline3', bline: 'bline3', show: 0})
+      } else {
+        pai3.push({sequence_number: i * 2 - 1, coordinate: 'coordinate2', aline: 'aline2', bline: 'bline2', show: 0})
+        pai4.push({sequence_number: i * 2, coordinate: 'coordinate3', aline: 'aline3', bline: 'bline3', show: 0})
+      }
+    }
+    pai34 = pai3.concat(pai4)
+    this.group02 = pai34
+    // 56排
+    let pai5 = []
+    let pai6 = []
+    let pai56 = []
+    for (let i = 39; i <= 46; i++) {
+      if (i <= 4) {
+        pai5.push({sequence_number: i * 2 - 1, coordinate: 'coordinate3', aline: 'aline3', bline: 'bline3', show: 0})
+        pai6.push({sequence_number: i * 2, coordinate: 'coordinate3', aline: 'aline3', bline: 'bline3', show: 0})
+      } else {
+        pai5.push({sequence_number: i * 2 - 1, coordinate: 'coordinate3', aline: 'aline3', bline: 'bline3', show: 0})
+        pai6.push({sequence_number: i * 2, coordinate: 'coordinate3', aline: 'aline3', bline: 'bline3', show: 0})
+      }
+    }
+    pai56 = pai5.concat(pai6)
+    this.group03 = pai56
+    // end
+    // 加载echarts图表
+    this.initData()
+    // this.refresh()
+  },
+  beforeDestroy () {
+    clearInterval(this.timer)
+  },
+  methods: {
+    refresh () {
+      this.timer = setInterval(() => {
+        this.code1 = ''
+        this.initData()
+      }, this.interTime)
+    },
+    async initData () {
+      let res = await storageMonitor()
+      this.array1 = res.materialList
+      this.array2 = res.productionList
+    },
+    // getdata(e) {
+    //   // getdata(21),22,23
+    //   // this.code1 = this.code1 === id ? '' : id
+
+    //   // list：【
+    //     id:xxx,
+    //     show: false
+    //   】
+    //   e.show = true
+    //   {show: true}
+    //   show:false
+    // },
+    getInfo1 (e) {
+      this.code1 = this.code1 === e.sequence_number ? '' : e.sequence_number
+    },
+    closebtn () {
+      this.code1 = ''
+    },
+    getEchart1 () {
+      var finishArr = []
+      var materArr = []
+      this.materArr1.map(el => {
+        finishArr.push(el.finished_qty)
+        materArr.push(el.material_code)
+      })
+      var option = {
+        legend: {
+          top: 10,
+          right: 10,
+          textStyle: {
+            color: '#ffffff',
+            fontSize: 12,
+            lineHeight: 20
+          },
+          itemGap: 20,
+          itemHeight: 8,
+          data: ['完成物料']
+        },
+        xAxis: {
+          type: 'category',
+          // data: ['1号砖', '2号砖', '3号砖', '4号砖', '5号砖', '6号砖', '7号砖'],
+          data: materArr,
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: '#fff'
+            }
+          }
+        },
+        // yAxis: {
+        //   type: 'value'
+        // },
+        yAxis: {
+          // splitNumber: 5,
+          // 设置坐标轴字体颜色和宽度
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: '#fff'
+            }
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        series: [{
+          name: '完成物料',
+          // data: [10, 50, 30, 20, 60, 70, 80],
+          data: finishArr,
+          type: 'bar',
+          barWidth: 10,
+          itemStyle: {
+            normal: {
+              // label: {
+              //   show: true,
+              //   position: 'top',
+              //   color: '#fff',
+              //   distance: 15
+              // },
+              color: '#dc33e6'
+            }
+          }
+        }]
+      }
+
+      var echart = document.getElementById('echarts1')
+      var myChart = echarts.init(echart)
+      myChart.setOption(option)
+      window.addEventListener('resize', function () {
+        myChart.resize()
+      })
+    },
+    getEchart3 () {
+      var statusqtyArr = []
+      this.materArr2.map(el => {
+        statusqtyArr.push(el.status__qty)
+      })
+      // 基于准备好的dom，初始化echarts实例
+      var myChart = echarts.init(document.getElementById('echarts3'))
+      var option = {
+        color: ['#30EBC9 ', '#E2BB0E', '#FF0000'],
+        legend: {
+          top: 40,
+          right: 160,
+          textStyle: {
+            color: '#ffffff',
+            fontSize: 12,
+            lineHeight: 20
+          },
+          itemGap: 20,
+          itemHeight: 8,
+          data: ['状态汇总']
+          // data: ['静置中', '静置完成', '强制完成']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'value',
+          position: 'top',
+          offset: -10,
+          splitLine: {
+            show: false
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: '#fff'
+            }
+          },
+          axisTick: {
+            show: false
+          },
+          boundaryGap: [0, 0.4]
+        },
+        yAxis: {
+          type: 'category',
+          axisLine: {
+            show: false
+          }
+        },
+        series: [
+          {
+            name: '状态汇总',
+            type: 'bar',
+            barWidth: 10,
+            // data: [120, 200, 150],
+            data: statusqtyArr,
+            itemStyle: {
+              normal: {
+                // label: {
+                //   show: true,
+                //   position: 'right',
+                //   color: '#fff'
+                // },
+                color: function (params) {
+                  // 注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
+                  var colorList = ['#30EBC9 ', '#E2BB0E', '#FF0000']
+                  return colorList[params.dataIndex]
+                }
+              }
+            }
+          }
+        ]
+      }
+      // 使用刚指定的配置项和数据显示图表。
+      myChart.setOption(option)
+      window.addEventListener('resize', function () {
+        myChart.resize()
+      })
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import '~@css/mixin'
+.cgreen
+  color #30EBC9 !important
+.cyellow
+  color #E2BB0E !important
+.cred
+  color #FF0000 !important
+.status1
+  color #32C5FF
+.status2
+  color #F7B502
+.content
+  width 100%
+  padding .15rem .54rem 0
+  .con1
+    position relative
+    // height 5.7rem
+    height 570px
+    .tag_block
+      position absolute
+      // bottom .1rem
+      bottom 10px
+      right .3rem
+    .tag_type
+      display inline-block
+      padding-left .3rem
+    .type_color
+      display inline-block
+      width .1rem
+      height .1rem
+      border-radius 50%
+    .tag_text
+      display inline-block
+      font-size .14rem
+      line-height .2rem
+    .blue
+      background #32C5FF !important
+    .green
+      background #30EBC9 !important
+    .gray
+      background #516282 !important
+    .yellow
+      background #E2BB0E !important
+    .orange
+      background #F96700 !important
+    .red
+      background #FF0000 !important
+    .lock
+      border .02rem solid #f00 !important
+    .yard-wrap
+      // height 6.95rem
+      height 100%
+      width 100%
+      // padding .1rem 0
+    .yard_group
+      width 100%
+      // height 1.8rem
+      height 180px
+      clear both
+    .yard_group_ul
+      float left
+      display grid
+      grid-gap 0
+      justify-items center
+      align-items center
+      margin-top -.01rem
+    .yard_group_ul_1
+      width 100%
+      position absolute
+      grid-template-columns repeat(20, 100% / 20)
+      // grid-template-rows repeat(2, 1.8rem / 2)
+      grid-template-rows repeat(2, 90px)
+    .yard_group_ul_2
+      width 90%
+      grid-template-columns repeat(18, 100% / 18)
+      // grid-template-rows repeat(2, 1.8rem / 2)
+      grid-template-rows repeat(2, 90px)
+    .yard_group_ul_3
+      width 40%
+      grid-template-columns repeat(8, 100% / 8)
+      // grid-template-rows repeat(2, 1.8rem / 2)
+      grid-template-rows repeat(2, 90px)
+    .yard_group_cell
+      position relative
+      display inline-block
+      width 100%
+      // height calc(1.8rem / 2)
+      height 90px
+      box-sizing border-box
+      border .01rem solid #32C5FF
+      background #000F2B
+      border-radius 8px
+    .yard_group_p
+      // height calc(1.8rem / 2)
+      height 90px
+      p
+        font-size 12px
+        // line-height 0.28rem
+        line-height 28px
+        height 28px
+        -webkit-text-size-adjust none
+        text-align center
+        white-space nowrap
+      img
+        display block
+        width 60%
+        // height 0.6rem
+        height 60px
+        margin 0 auto
+      .machine_1
+        position absolute
+        width 60%
+        width 100%
+        height 60px
+        overflow hidden
+        background center center / 100% 100% url(../assets/images/zhong.png) no-repeat
+        margin 0 auto
+        z-index 98
+        // left 50%
+        // margin-left -30%
+        opacity 0.5
+      .ingbox
+        position absolute
+        bottom 0
+        width 100%
+        z-index 97 //
+    .corridor_2
+      width 100%
+      // line-height .1rem
+      line-height 10px
+      text-align center
+    .locate-wrap
+      position absolute
+      width 100%
+    .locate-content
+      position absolute
+      width 2.4rem
+      height 2.8rem
+      z-index 99
+      background center center / 100% 100% url(../assets/images/popover_1.png) no-repeat
+      padding .36rem .3rem
+    .tan_pline
+      width 100%
+      margin 0 auto
+    .tan_p
+      font-size .14rem
+      line-height .26rem
+      height .26rem
+      overflow hidden
+      color #fff
+    .close_btn
+      position absolute
+      top 3%
+      right 10%
+      margin-right -.25rem
+      font-size .14rem
+      line-height .34rem
+      padding 0 .16rem
+      border-radius 5px
+      cursor pointer
+  .con-b
+    width 49%
+    // height 3.45rem
+    height 345px
+    overflow hidden
+    position relative
+    background center center / 100% 100% url(../assets/images/sctj_bg3.png) no-repeat
+    margin-top .1rem
+    float left
+  .con2
+    margin-right .2rem
+    #echarts1
+      // margin-left 2rem
+      position absolute
+      top 0
+      left 0
+      z-index 9
+    #echarts3
+      // margin-left 2rem
+      position absolute
+      top -30px
+      // left 60px
+      left .60rem
+      z-index 10
+    .title
+      position absolute
+      top .15rem
+      left .25rem
+  .con3
+    padding 0 .27rem 0 .27rem
+    .block_h2
+      h2
+        font-size .16rem
+        line-height .22rem
+        margin .15rem 0 .15rem 0
+    .list_scroll_title
+      width 100%
+      background #262F52
+      span
+        display inline-block
+        width 16.6%
+        text-align center
+        line-height .32rem
+        font-size 14px
+        // float left
+    .content-block-scroll
+      width 100%
+      height calc(100% - 0.6rem)
+      overflow hidden
+    .content-block-scroll-ul
+      li
+        width 100%
+        &:nth-child(2n)
+          background rgba(38,47,82,0.50)
+        span
+          display inline-block
+          width 16.6%
+          padding 0 .1rem
+          font-size 12px
+          text-align center
+          line-height .38rem
+          box-sizing border-box
+          // float left
+.foldcricle0
+  position absolute
+  z-index 102
+  width .24rem
+  height .24rem
+  background center center / 100% 100% url(../assets/images/dot.png) no-repeat
+.foldcricle2
+  top .50rem
+  left .55rem
+.foldcricle1
+  top 0
+  left -0.1rem
+.foldline0
+  position absolute
+  z-index 102
+  border 1px dashed #32C5FF
+  height 1px
+.foldline1
+  width .30rem
+  top .12rem
+  left .09rem
+.foldline2
+  width .60rem
+  top .38rem
+  left .24rem
+  transform rotate(60deg)
+.coordinate1
+  left .9rem
+  top -.14rem
+.coordinate2
+  right .86rem
+  top -.14rem
+.coordinate3
+  left .9rem
+  bottom .86rem
+.aline1
+  position absolute
+  z-index 102
+  top -.70rem
+  left .88rem
+.bline1
+  position absolute
+  top -.70rem
+  left .93rem
+.aline2
+  position absolute
+  z-index 102
+  transform rotate(180deg)
+  top -.50rem
+  left 0px
+.bline2
+  position absolute
+  z-index 102
+  transform rotate(60deg)
+  top -1.01rem
+  right 1.38rem
+.aline3
+  position absolute
+  z-index 102
+  transform rotate(0deg)
+  bottom .7rem
+  left .88rem
+.bline3
+  position absolute
+  z-index 102
+  transform rotate(-120deg)
+  bottom .2rem
+  left 1.38rem
+// .foldcricle0
+//   position absolute
+//   z-index 102
+//   width 24px
+//   height 24px
+//   background center center / 100% 100% url(../assets/images/dot.png) no-repeat
+// .foldcricle2
+//   top 50px
+//   left 55px
+// .foldcricle1
+//   top 0
+//   left -0.1rem
+// .foldline0
+//   position absolute
+//   z-index 102
+//   border 1px dashed #32C5FF
+//   height 1px
+// .foldline1
+//   width 30px
+//   top 12px
+//   left 9px
+// .foldline2
+//   width 60px
+//   top 38px
+//   left 24px
+//   transform rotate(60deg)
+// .coordinate1
+//   left 38px
+//   top -14px
+// .coordinate2
+//   right 53px
+//   top -14px
+// .coordinate3
+//   left 38px
+//   bottom 66px
+// .aline1
+//   position absolute
+//   z-index 102
+//   top -70px
+//   left 88px
+// .bline1
+//   position absolute
+//   top -70px
+//   left 88px
+// .aline2
+//   position absolute
+//   z-index 102
+//   transform rotate(180deg)
+//   top -50px
+//   left 0px
+// .bline2
+//   position absolute
+//   z-index 102
+//   transform rotate(60deg)
+//   top -100px
+//   right 138px
+// .aline3
+//   position absolute
+//   z-index 102
+//   transform rotate(0deg)
+//   bottom 50px
+//   left 88px
+// .bline3
+//   position absolute
+//   z-index 102
+//   transform rotate(-120deg)
+//   bottom -2px
+//   left 138px
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index aaefd22..7168149 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -4,7 +4,7 @@ import Router from 'vue-router'
 const Test = r => require.ensure([], () => r(require('@page/Test')), 'Test2')
 const Setup = r => require.ensure([], () => r(require('@page/Setup')), 'Setup')
 const HomePage = r => require.ensure([], () => r(require('@page/HomePage')), 'HomePage')
-const StorageMonitor = r => require.ensure([], () => r(require('@page/StorageMonitor')), 'StorageMonitor')
+const StorageMonitor = r => require.ensure([], () => r(require('@page/StorageMonitor2')), 'StorageMonitor')
 const DeviceMonitor = r => require.ensure([], () => r(require('@page/DeviceMonitor')), 'DeviceMonitor')
 const LogisticsTech = r => require.ensure([], () => r(require('@page/LogisticsTech')), 'LogisticsTech')
 const ProdCount = r => require.ensure([], () => r(require('@page/ProdCount2')), 'ProdCount')