screen-lnsh/src/pages/StorageMonitor2.vue

<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_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.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_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">重量(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_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_code}}</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.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">
                  <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_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">库存(kg)：{{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><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
      this.group01 = [...res.materialTask]
      this.group02 = [...res.productionTask]
      // 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.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>