成品显示

src/pages/StorageMonitor2.vue

@@ -44,7 +44,7 @@
               <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.point_code}}</p>
-                  <div v-if="e.struct_url == '1'" class="machine_1"></div>
+                  <div v-if="e.struct_url == '2'" class="machine_2"></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.point_code" class="locate-wrap clearfix">
@@ -282,168 +282,6 @@ export default {
     },
     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()
-      })
     }
   }
 }
@@ -571,6 +409,18 @@ export default {
         // left 50%
         // margin-left -30%
         opacity 0.5
+      .machine_2
+        position absolute
+        width 60%
+        width 100%
+        height 60px
+        overflow hidden
+        background center center / 100% 100% url(../assets/images/cp1.jpg) no-repeat
+        margin 0 auto
+        z-index 98
+        // left 50%
+        // margin-left -30%
+        opacity 0.5
       .ingbox
         position absolute
         bottom 0