From b8a4a4c1a2b840d8573e21d561e24d9d745d5fde Mon Sep 17 00:00:00 2001
From: xiangxy <shione_xxy@163.com>
Date: Tue, 9 May 2023 11:10:59 +0800
Subject: [PATCH] storagemonitorbf

---
 src/pages/StorageMonitor2bf.vue | 684 ++++++++++++++++++++++++++++++++
 1 file changed, 684 insertions(+)
 create mode 100644 src/pages/StorageMonitor2bf.vue

diff --git a/src/pages/StorageMonitor2bf.vue b/src/pages/StorageMonitor2bf.vue
new file mode 100644
index 0000000..fc6cd07
--- /dev/null
+++ b/src/pages/StorageMonitor2bf.vue
@@ -0,0 +1,684 @@
+<template>
+  <section>
+    <t-header index='2'></t-header>
+    <div class="content clearfix">
+      <div class="con1">
+        <div class="yard-wrap">
+          <div class="corridor_2">原料仓储监控</div>
+          <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.point_name}}</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.standing_status ==='1',green:e.standing_status ==='2',yellow:e.standing_status ==='3',red:e.standing_status ==='4',gray:e.standing_status ==='5'}"></div>
+                </div>
+                <div v-show="code1 === e.point_code" 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.point_name}}</p>
+                      <p class="tan_p">载具：{{e.vehicle_code}}</p>
+                      <p class="tan_p">物料：{{e.material_code}}</p>
+                      <p class="tan_p">重量(kg)：{{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">成品仓储监控</div>
+          <div class="yard_group clearfix">
+            <div class="yard_group_ul yard_group_ul_1">
+              <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_name}}</p>
+                  <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.standing_status ==='1',green:e.standing_status ==='2',yellow:e.standing_status ==='3',red:e.standing_status ==='4',gray:e.standing_status ==='5'}"></div>
+                </div>
+                <div v-show="code1 === e.point_code" 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.point_name}}</p>
+                      <p class="tan_p">载具：{{e.vehicle_code}}</p>
+                      <p class="tan_p">物料：{{e.material_code}}</p>
+                      <p class="tan_p">库存(块)：{{e.ivt_qty}}</p>
+                      <p class="tan_p">入库时间：{{e.instorage_time}}</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>
+        </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_code}}</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>
+        </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_code}}</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 { 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锁定
+    // standing_status 00为空，1为空盅，2为静置中，3为静置完成，4为强制完成，5为禁用
+    // 编号排布
+    // 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
+    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.result.materialList
+      this.array2 = res.result.productionList
+      this.group01 = [...res.result.materialTask]
+      this.group02 = [...res.result.productionTask]
+      for (let i = 0; i < this.group01.length; i++) {
+        if (i === 16 || i === 17 || i === 18 || i === 19 || i === 36 || i === 37 || i === 38 || i === 39) {
+          this.group01[i] = Object.assign(this.group01[i], {coordinate: 'coordinate2', aline: 'aline2', bline: 'bline2', show: 0})
+        } else {
+          this.group01[i] = Object.assign(this.group01[i], {coordinate: 'coordinate1', aline: 'aline1', bline: 'bline1', show: 0})
+        }
+      }
+      for (let i = 0; i < this.group02.length; i++) {
+        if (i === 16 || i === 17 || i === 18 || i === 19 || i === 36 || i === 37 || i === 38 || i === 39) {
+          this.group02[i] = Object.assign(this.group02[i], {coordinate: 'coordinate2', aline: 'aline2', bline: 'bline2', show: 0})
+        } else {
+          this.group02[i] = Object.assign(this.group02[i], {coordinate: 'coordinate1', aline: 'aline1', bline: 'bline1', show: 0})
+        }
+      }
+      // for (let i = 1; i <= 20; i++) {
+      //   if (i <= 10) {
+      //     group01.push({sequence_number: i * 2 - 1, coordinate: 'coordinate1', aline: 'aline1', bline: 'bline1', show: 0})
+      //     group01.push({sequence_number: i * 2, coordinate: 'coordinate1', aline: 'aline1', bline: 'bline1', show: 0})
+      //   } else {
+      //     group01.push({sequence_number: i * 2 - 1, coordinate: 'coordinate2', aline: 'aline2', bline: 'bline2', show: 0})
+      //     group01.push({sequence_number: i * 2, coordinate: 'coordinate2', aline: 'aline2', bline: 'bline2', show: 0})
+      //   }
+      // }
+      // for (let i = 0; i < this.structArr.length; i++) {
+      //   for (let j = 0; j < this.group01.length; j++) {
+      //     if (this.structArr[i].sequence_number === this.group01[j].sequence_number + '') {
+      //       this.group01[j] = Object.assign(this.group01[j], this.structArr[i])
+      //     }
+      //   }
+      // }
+      // for (let i = 0; i < this.structArr.length; i++) {
+      //   for (let j = 0; j < this.group02.length; j++) {
+      //     if (this.structArr[i].sequence_number === this.group02[j].sequence_number + '') {
+      //       this.group02[j] = Object.assign(this.group02[j], this.structArr[i])
+      //     }
+      //   }
+      // }
+      // for (let i = 0; i < this.structArr.length; i++) {
+      //   for (let j = 0; j < this.group03.length; j++) {
+      //     if (this.structArr[i].sequence_number === this.group03[j].sequence_number + '') {
+      //       this.group03[j] = Object.assign(this.group03[j], this.structArr[i])
+      //     }
+      //   }
+      // }
+    },
+    // 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.point_code ? '' : e.point_code
+    },
+    closebtn () {
+      this.code1 = ''
+    }
+  }
+}
+</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
+      top 25px
+      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
+      .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
+        width 100%
+        z-index 97 //
+    .corridor_2
+      width 100%
+      height 60px
+      line-height 60px
+    .locate-wrap
+      position absolute
+      width 100%
+    .locate-content
+      position absolute
+      width 2.9rem
+      height 2.56rem
+      z-index 99
+      background center center / 100% 100% url(../assets/images/popover_1.png) no-repeat
+      padding .36rem .15rem
+    .tan_pline
+      width 100%
+      margin 0 auto
+    .tan_p
+      font-size .13rem
+      line-height .36rem
+      height .36rem
+      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 18%
+        text-align center
+        line-height .32rem
+        font-size 14px
+        // float left
+        &:nth-child(2)
+          width 28%
+    .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 18%
+          padding 0 .1rem
+          font-size 12px
+          text-align center
+          line-height .38rem
+          box-sizing border-box
+          // float left
+          &:nth-child(2)
+            width 28%
+.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>