screenkb-hengsen/src/pages/modules/index1.vue

<template>
  <div class="box relative">
    <t-header title2="浙江恒森实业集团WMS系统">
      <el-select class="header_select" v-model="value" placeholder="请选择" @change="change">
        <el-option
          v-for="item in options"
          :key="item.code"
          :label="item.name"
          :value="item.code">
        </el-option>
      </el-select>
    </t-header>
    <div class="box body_container">
      <div v-if="itemData.length >= 1" class="relative n_wraper">
        <div class="absolute bg_j bg_j_1"></div>
        <div class="absolute bg_j bg_j_2"></div>
        <div class="absolute bg_j bg_j_3"></div>
        <div class="absolute bg_j bg_j_4"></div>
        <div class="relative title_wraper">
          <p class="relative title_h1">装配一车间</p>
          <p class="absolute title_h2">当前任务&nbsp;-&nbsp;<span style="color: #00b678;font-weight: 700;">{{ itemData[0].task_code }}</span></p>
        </div>
        <div class="zd-row content_wraper">
          <div class="zd-col-20">
            <div class="zd-row flexwrap item_wraper">
              <div class="info_item">
                <div class="box zd-row jccenter info_item_i">
                  <div class="zd-col-8 item_label">库内料箱</div>
                  <div class="zd-col-16 item_value">{{ itemData[0].vehicle_code }}<span class="item_unit"></span></div>
                </div>
              </div>
              <div class="info_item">
                <div class="box zd-row jccenter info_item_i">
                  <div class="zd-col-8 item_label">物料名称</div>
                  <div class="zd-col-16 item_value">{{ itemData[0].material_name }}<span class="item_unit"></span></div>
                </div>
              </div>
              <div class="info_item">
                <div class="box zd-row jccenter info_item_i">
                  <div class="zd-col-8 item_label">规格</div>
                  <div class="zd-col-16 item_value">{{ itemData[0].material_spec }}<span class="item_unit"></span></div>
                </div>
              </div>
              <div class="info_item">
                <div class="box zd-row jccenter info_item_i">
                  <div class="zd-col-8 item_label">数量</div>
                  <div class="zd-col-16 item_value">{{ itemData[0].qty }}<span class="item_unit">个</span></div>
                </div>
              </div>
              <div class="info_item">
                <div class="box zd-row jccenter info_item_i">
                  <div class="zd-col-8 item_label">需出数量</div>
                  <div class="zd-col-16 item_value">{{ itemData[0].assign_qty }}<span class="item_unit">个</span></div>
                </div>
              </div>
              <div class="info_item">
                <div class="box zd-row jccenter info_item_i">
                  <div class="zd-col-8 item_label">单重</div>
                  <div class="zd-col-16 item_value">{{ itemData[0].single_weight }}<span class="item_unit">g</span></div>
                </div>
              </div>
              <div class="info_item">
                <div class="box zd-row jccenter info_item_i">
                  <div class="zd-col-8 item_label">拣选称重</div>
                  <div class="zd-col-16 item_value">{{ itemData[0].actual_weight }}<span class="item_unit">g</span></div>
                </div>
              </div>
              <div class="info_item">
                <div class="box zd-row jccenter info_item_i">
                  <div class="zd-col-8 item_label">理论数量</div>
                  <div class="zd-col-16 item_value">{{ itemData[0].theory_qty }}<span class="item_unit">个</span></div>
                </div>
              </div>
              <div class="info_item">
                <div class="box zd-row jccenter info_item_i">
                  <div class="zd-col-8 item_label">箱内剩余</div>
                  <div class="zd-col-16 item_value">{{ itemData[0].remaining_qty }}<span class="item_unit">个</span></div>
                </div>
              </div>
            </div>
          </div>
          <div class="zd-col-4 tip_wraper" :class="itemData[0].assign_qty === itemData[0].theory_qty ? 'tip_wraper_bg1' : 'tip_wraper_bg2'">
            <div class="tip_txt">料箱{{ itemData[0].vehicle_code }}<br/>{{itemData[0].assign_qty === itemData[0].theory_qty ? '拣选成功！' : '称重错误！'}}</div>
          </div>
        </div>
      </div>
      <div v-if="itemData.length >= 2" class="relative n_wraper">
        <div class="absolute bg_j bg_j_1"></div>
        <div class="absolute bg_j bg_j_2"></div>
        <div class="absolute bg_j bg_j_3"></div>
        <div class="absolute bg_j bg_j_4"></div>
        <div class="relative title_wraper">
          <p class="relative title_h1">装配二车间</p>
          <p class="absolute title_h2">下一任务&nbsp;-&nbsp;<span style="color: #00b678;font-weight: 700;">{{ itemData[1].task_code }}</span></p>
        </div>
        <div class="zd-row content_wraper">
          <div class="zd-col-24">
            <div class="zd-row flexwrap item_wraper">
              <div class="info_item">
                <div class="box zd-row jccenter info_item_i">
                  <div class="zd-col-8 item_label">料箱号</div>
                  <div class="zd-col-16 item_value">{{ itemData[1].vehicle_code }}<span class="item_unit"></span></div>
                </div>
              </div>
              <div class="info_item">
                <div class="box zd-row jccenter info_item_i">
                  <div class="zd-col-8 item_label">物料名称</div>
                  <div class="zd-col-16 item_value">{{ itemData[1].material_name }}<span class="item_unit"></span></div>
                </div>
              </div>
              <div class="info_item">
                <div class="box zd-row jccenter info_item_i">
                  <div class="zd-col-8 item_label">规格</div>
                  <div class="zd-col-16 item_value">{{ itemData[1].material_spec }}<span class="item_unit"></span></div>
                </div>
              </div>
              <div class="info_item">
                <div class="box zd-row jccenter info_item_i">
                  <div class="zd-col-8 item_label">数量</div>
                  <div class="zd-col-16 item_value">{{ itemData[1].qty }}<span class="item_unit">个</span></div>
                </div>
              </div>
              <div class="info_item">
                <div class="box zd-row jccenter info_item_i">
                  <div class="zd-col-8 item_label">需出数量</div>
                  <div class="zd-col-16 item_value">{{ itemData[1].assign_qty }}<span class="item_unit">个</span></div>
                </div>
              </div>
              <div class="info_item">
                <div class="box zd-row jccenter info_item_i">
                  <div class="zd-col-8 item_label">单重</div>
                  <div class="zd-col-16 item_value">{{ itemData[1].single_weight }}<span class="item_unit">g</span></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import THeader from '@components/header.vue'
import { queryPickingPoint, pickingInfo } from '@js/getData2.js'
export default {
  components: {
    THeader
  },
  data () {
    return {
      interTime: this.$store.getters.setTime,
      timer: null,
      options: [],
      value: '',
      itemData: []
    }
  },
  created () {
    this._queryPickingPoint()
  },
  beforeDestroy () {
    if (this.timer !== null) {
      clearInterval(this.timer)
    }
  },
  methods: {
    refresh () {
      this._pickingInfo()
      this.timer = setInterval(() => {
        this._pickingInfo()
      }, this.interTime)
    },
    async _pickingInfo () {
      let res = await pickingInfo(this.value)
      this.itemData = [...res]
    },
    async _queryPickingPoint () {
      let res = await queryPickingPoint()
      this.options = [...res]
      if (res.length > 0) {
        this.value = res[0].code
        this.refresh()
      }
    },
    change (e) {
      if (e) {
        if (this.timer !== null) {
          clearInterval(this.timer)
        }
        this.refresh()
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import './style.stylus'
</style>