screen-lnsh/src/pages/StorageMonitor2.vue

<template>
  <section>
    <t-header index='2'></t-header>
    <div class="content clearfix">
      <div class="top_wrapper">
        <div class="yard-wrap">
          <div class="corridor_2">原料仓储监控</div>
          <div class="yard_group clearfix">
            <div class="yard_group_ul yard_group_ul_1 fl">
              <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="{green:e.stand_status ==='2',yellow:e.stand_status ==='3',red:e.stand_status ==='4',blue:e.stand_status ==='5'}"></div> -->
                  <div class="ingbox" style="height:78px;" :class="{green:e.stand_status ==='2',yellow:e.stand_status ==='3',red:e.stand_status ==='4',blue:e.stand_status ==='5'}"></div>
                </div>
                <div v-show="code1 === e.point_code" class="locate-wrap clearfix" :class="e.mgl">
                  <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}}<span :class="{cgreen:e.stand_status ==='2',cyellow:e.stand_status ==='3',cred:e.stand_status ==='4',cblue:e.stand_status ==='5'}">{{e.stand_status_name}}</span></p>
                      <p class="tan_p">载具：{{e.vehicle_code}}</p>
                      <p class="tan_p">BOM：{{e.material_code}}</p>
                      <p class="tan_p">重量(千克)：{{e.ivt_qty}}</p>
                      <p class="tan_p">入库时间：{{e.instorage_time}}</p>
                      <p class="tan_p">静置(小时)：{{e.standing_time}}</p>
                    </div>
                    <div class="iconfont icon-guanbi close_btn" @click="closebtn"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="yard_group_ul yard_group_ul_3 fr">
              <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.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="{green:e.stand_status ==='2',yellow:e.stand_status ==='3',red:e.stand_status ==='4',blue:e.stand_status ==='5'}"></div> -->
                  <div class="ingbox" style="height:78px;" :class="{green:e.stand_status ==='2',yellow:e.stand_status ==='3',red:e.stand_status ==='4',blue:e.stand_status ==='5'}"></div>
                </div>
                <div v-show="code1 === e.point_code" class="locate-wrap clearfix" :class="e.mgl">
                  <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}}<span :class="{cgreen:e.stand_status ==='2',cyellow:e.stand_status ==='3',cred:e.stand_status ==='4',cblue:e.stand_status ==='5'}">{{e.stand_status_name}}</span></p>
                      <p class="tan_p">载具：{{e.vehicle_code}}</p>
                      <p class="tan_p">BOM：{{e.material_code}}</p>
                      <p class="tan_p">重量(千克)：{{e.ivt_qty}}</p>
                      <p class="tan_p">入库时间：{{e.instorage_time}}</p>
                      <p class="tan_p">静置(小时)：{{e.standing_time}}</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_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.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')}"></div>
                </div>
                <div v-show="code1 === e.point_code" class="locate-wrap clearfix" :class="e.mgl">
                  <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 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 class="tag_type">
            <div class="type_color blue"></div>
            <div class="tag_text">静置超时</div>
          </div>
        </div>
      </div>
      <div class="bottom_wrapper">
        <div class="bottom_wrapper_l">
          <div class="block_h2">
            <h2>原料库存</h2>
          </div>
          <div class="list_scroll_title">
            <span>货位</span><span>BOM</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.stand_status_name}}</span>
              </li>
            </ul>
          </vue-seamless-scroll>
        </div>
        <div class="bottom_wrapper_l">
          <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>
    </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.6, // 数值越大速度滚动越快
        limitMoveNum: 10, // 开始无缝滚动的数据量 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锁定
    // stand_status 0为空，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]
      this.group03 = [...res.result.materialYJTask]
      for (let i = 0; i < this.group01.length; i++) {
        this.group01[i] = Object.assign(this.group01[i], {mgl: 'mgl1', coordinate: 'coordinate1', aline: 'aline1', bline: 'bline1', show: 0})
      }
      for (let i = 0; i < this.group03.length; i++) {
        this.group03[i] = Object.assign(this.group03[i], {mgl: 'mgl2', coordinate: 'coordinate2', aline: 'aline2', bline: 'bline2', show: 0})
      }
      for (let i = 0; i < this.group02.length; i++) {
        if (i === 21 || i === 22 || i === 23 || i === 24 || i === 25 || i === 47 || i === 48 || i === 49 || i === 50 || i === 51) {
          this.group02[i] = Object.assign(this.group02[i], {mgl: 'mgl2', coordinate: 'coordinate2', aline: 'aline2', bline: 'bline2', show: 0})
        } else {
          this.group02[i] = Object.assign(this.group02[i], {mgl: 'mgl1', 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 calc(100% - 108px)
  height calc(100% - 108px)
  margin 12px auto
.top_wrapper
  position relative
  height 45%
.tag_block
  position absolute
  // bottom .1rem
  top -5px
  right .3rem
  _fj(row)
.tag_type
  _fj(row)
  padding-left .3rem
.type_color
  width .1rem
  height .1rem
  border-radius 50%
  margin-right 10px
.tag_text
  font-size .12rem
  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
.cblue
  color #32C5FF !important
.cgreen
  color #30EBC9 !important
.cgray
  color #516282 !important
.cyellow
  color #E2BB0E !important
.corange
  color #F96700 !important
.cred
  color #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 calc(50% - 46px)
  clear both
  &:nth-child(1)
    margin-bottom 20px
.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, 83.4% / 20)
  // grid-template-rows repeat(2, 1.8rem / 2)
  grid-template-rows repeat(2, 110px)
.yard_group_ul_2
  width 100%
  position absolute
  grid-template-columns repeat(26, 100% / 26)
  // grid-template-rows repeat(2, 1.8rem / 2)
  grid-template-rows repeat(2, 110px)
.yard_group_ul_3
  width 12.5%
  grid-template-columns repeat(3, 100% / 3)
  // grid-template-rows repeat(2, 1.8rem / 2)
  grid-template-rows repeat(2, 110px)
.yard_group_cell
  position relative
  display inline-block
  width 100%
  // height calc(1.8rem / 2)
  height 100%
  box-sizing border-box
  border 1px 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 78px
  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
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
.machine_2
  position absolute
  width 60%
  width 100%
  height 78px
  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
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
.ingbox
  position absolute
  bottom 0
  width 100%
  z-index 97 //
.corridor_2
  _wh(100%,22px)
  _font(16px, 22px, #fff,,left)
  margin 22px 12px 30px 0
.locate-wrap
  position absolute
  width 100%
  bottom -40%
.locate-content
  position absolute
  width 2.9rem
  height 2.74rem
  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 .12rem
  line-height .36rem
  height .36rem
  overflow hidden
  color #fff
  span
    padding-right .4rem
    float right
.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
.bottom_wrapper
  width 100%
  height 55%
  padding-top 60px
  padding-bottom 40px
  _fj(row)
.bottom_wrapper_l
  _wh(calc(50% - 10px), 100%)
  position relative
  background center center / 100% 100% url(../assets/images/sctj_bg3.png) no-repeat
#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
.block_h2
  _wh(100%, 22px)
  margin 12px
  h2
    font-size 16px
    line-height 22px
.list_scroll_title
  width calc(100% - 30px)
  margin 0 15px
  background #262F52
  span
    display inline-block
    width 18%
    text-align center
    line-height 32px
    font-size 12px
    color rgba(255,255,255,0.60)
    // float left
    &:nth-child(2)
      width 28%
.content-block-scroll
  width calc(100% - 30px)
  margin 0 15px 4px 15px
  height calc(100% - 82px)
  overflow hidden
.content-block-scroll-ul
  width 100%
  li
    width 100%
    height 38px
    _fj(row, center)
    &:nth-child(2n)
      background rgba(38,47,82,0.50)
    span
      display inline-block
      width 18%
      padding 0 10px
      font-size 12px
      text-align center
      line-height 38px
      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 .6rem
.foldcricle1
  top 0
  left -0.1rem
.foldline0
  position absolute
  z-index 102
  border 1px dashed #32C5FF
  height 1px
.foldline1
  width .33rem
  top .12rem
  left .09rem
.foldline2
  width .60rem
  top .39rem
  left .27rem
  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.05rem
  right 1.28rem
.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
.yard_group_p
  _wh(100%, 100%)
.fontselect
  _font(12px, 30px, #fff,,)
  // transform scale(0.8)
  white-space:nowrap
.mgl1
  margin-left -22px
.mgl2
  margin-left 0px
</style>