screen-huahong/src/pages/modules/home/devicepop.vue

<template>
  <div ref="pop" class="popup_wraper">
    <div class="popup_bg">
      <div class="popup_block">
        <div class="pop_header">
          <div v-show="type === 'yaossx' || type === 'yao' || type === 'hljdjw' || type === 'rgfjc' || type === 'hchj' || type === 'klhw'" class="pop_name">{{data.pointName}}</div>
          <div v-show="type === 'yj' || type === 'jxs' || type === 'yjmdw' || type === 'fjmdw' || type === 'yjxlw' || type === 'yjslw' || type === 'hlj'" class="pop_name">{{data.device_code}}</div>
          <div v-show="type === 'yaossx'" class="pop_status">
            <div class="pop_status_dot" :class="['gray', 'yellow', 'green', 'red'][Number(data.stat)]"></div>
            <div class="pop_status_text fgray">{{ ['停机', '暂停', '运行', '故障'][Number(data.stat)] }}</div>
          </div>
          <div v-show="type === 'yj' || type === 'jxs' || type === 'hlj' || type === 'yjmdw' || type === 'fjmdw' || type === 'yjxlw' || type === 'yjslw'" class="pop_status">
            <div class="pop_status_dot" :class="['gray', 'yellow', 'green', 'red'][Number(data.device_status)]"></div>
            <div class="pop_status_text fgray">{{ ['停机', '暂停', '运行', '故障'][Number(data.device_status)] }}</div>
          </div>
          <div v-show="type === 'rgfjc'" class="pop_status">
            <div class="pop_status_text fgray">{{ ['无货', '有货'][Number(data.pointStatus) - 1] }}</div>
          </div>
          <div v-show="type === 'hchj'" class="pop_status">
            <div class="pop_status_text fgray">{{ ['空位', '空盘', '有料'][Number(data.pointStatus) - 1] }}</div>
          </div>
          <div v-show="type === 'klhw'" class="pop_status">
            <div class="pop_status_text fgray">{{ ['空位', '空盅', '满盅'][Number(data.pointStatus) - 1] }}</div>
          </div>
          <div v-show="type === 'hljdjw'" class="pop_status">
            <div class="pop_status_dot" :class="['gray', 'yellow', 'green', 'red'][Number(data.pointStatus)]"></div>
            <div class="pop_status_text fgray">{{ ['停机', '暂停', '运行', '故障'][Number(data.pointStatus)] }}</div>
          </div>
        </div>
        <div v-show="type === 'yaossx'" class="pop_content">
          <div class="popup_item">
            <div class="popup_label">当日已输送托盘数</div>
            <div class="popup_val">{{ data.deliveredPalletNum }}</div>
          </div>
          <div class="popup_item">
            <div class="popup_label">当日已输送数量</div>
            <div class="popup_val">{{ data.deliveredMaterialNum }}</div>
          </div>
          <div class="popup_item">
            <div class="popup_label">已工作时间</div>
            <div class="popup_val">{{ data.workTime }}</div>
          </div>
          <div class="popup_item">
            <div class="popup_label">当前托盘数</div>
            <div class="popup_val">{{ data.palletNum }}</div>
          </div>
          <div class="popup_item">
            <div class="popup_label">当前物料数量</div>
            <div class="popup_val">{{ data.materialNum }}</div>
          </div>
        </div>
        <div v-show="type === 'yao'" class="pop_content">
          <div class="popup_item">
            <div class="popup_label">工作时间</div>
            <div class="popup_val">{{ data.workTime }}</div>
          </div>
          <div class="popup_item">
            <div class="popup_label">窑内托盘数</div>
            <div class="popup_val">{{ data.palletNum }}</div>
          </div>
          <div class="popup_item">
            <div class="popup_label">窑内物料数量</div>
            <div class="popup_val">{{ data.materialNum }}</div>
          </div>
          <div class="popup_item">
            <div class="popup_label">当日已生产</div>
            <div class="popup_val">{{ data.produceNum }}</div>
          </div>
          <div class="popup_item">
            <div class="popup_label">物料说明</div>
            <div class="popup_val">{{ data.materialInfos }}</div>
          </div>
        </div>
        <div v-show="type === 'yj' || type === 'hlj'" class="pop_content">
          <div class="popup_item">
            <div class="popup_label">故障时间</div>
            <div class="popup_val">{{ data.error_time }}</div>
          </div>
          <div class="popup_item">
            <div class="popup_label">待机时间</div>
            <div class="popup_val">{{ data.stand_time }}</div>
          </div>
          <div class="popup_item">
            <div class="popup_label">开机时间</div>
            <div class="popup_val">{{ data.open_time }}</div>
          </div>
          <div class="popup_item">
            <div class="popup_label">生产时间</div>
            <div class="popup_val">{{ data.work_time }}</div>
          </div>
          <div class="popup_item">
            <div class="popup_label">当前已生产数量</div>
            <div class="popup_val">{{ data.real_qty }}</div>
          </div>
          <div v-show="type === 'yj'" class="popup_item">
            <div class="popup_label">当前已生产重量</div>
            <div class="popup_val">{{ data.current_weight }}</div>
          </div>
          <div class="popup_item">
            <div class="popup_label">故障</div>
            <div class="popup_val">{{ data.error }}</div>
          </div>
        </div>
        <div v-show="type === 'jxs'" class="pop_content">
          <div class="popup_item">
            <div class="popup_label">故障时间</div>
            <div class="popup_val">{{ data.error_time }}</div>
          </div>
          <div class="popup_item">
            <div class="popup_label">待机时间</div>
            <div class="popup_val">{{ data.stand_time }}</div>
          </div>
          <div class="popup_item">
            <div class="popup_label">开机时间</div>
            <div class="popup_val">{{ data.open_time }}</div>
          </div>
          <div class="popup_item">
            <div class="popup_label">生产时间</div>
            <div class="popup_val">{{ data.work_time }}</div>
          </div>
          <div class="popup_item">
            <div class="popup_label">拆/码垛数量</div>
            <div class="popup_val">{{ data.real_qty }}</div>
          </div>
          <div class="popup_item">
            <div class="popup_label">故障</div>
            <div class="popup_val">{{ data.error }}</div>
          </div>
        </div>
        <div v-show="type === 'yjmdw' || type === 'fjmdw' || type === 'yjxlw' || type === 'yjslw'" class="pop_content">
          <div class="popup_item">
            <div class="popup_label">工作模式</div>
            <div class="popup_val">{{ data.mode }}</div>
          </div>
          <div class="popup_item">
            <div class="popup_label">光电开关信号</div>
            <div class="popup_val">{{ data.move }}</div>
          </div>
          <div class="popup_item">
            <div class="popup_label">报警信号</div>
            <div class="popup_val">{{ data.error }}</div>
          </div>
          <div class="popup_item">
            <div class="popup_label">码盘位当前码盘数量</div>
            <div class="popup_val">{{ data.encoder_qty }}</div>
          </div>
          <div class="popup_item">
            <div class="popup_label">条码</div>
            <div class="popup_val">{{ data.barcode }}</div>
          </div>
        </div>
        <div v-show="type === 'hljdjw' || type === 'rgfjc' || type === 'hchj' || type === 'klhw'" class="pop_content">
          <div class="popup_item">
            <div class="popup_label">点位编码</div>
            <div class="popup_val">{{ data.pointCode }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'devicepop',
  props: {
    type: String,
    data: Object
  },
  methods: {
  }
}
</script>

<style lang="stylus" scoped>
@import '~@style/mixin'
.popup_wraper
  display none
  position fixed
  z-index 100
  _wh(530px, auto)
  padding 20px 0 30px 0
  background top center / 100% 100% url(../../../images/popup_bg.png) no-repeat
.popup_bg
  _wh(100%, auto)
  background none
  overflow hidden
.popup_block
  _wh(100%,100%)
  padding 0
.pop_header
    _wh(calc(100% - 28px), 43px)
    padding 15px 5px 0 5px
    margin 0 14px
    _fj(flex-end)
    background top center / 100% 18px url(../../../images/popup_line.png) no-repeat
.pop_name
  width 50%
  _font(14px,28px,#32C5FF,,left)
  text-shadow 2px 2px 4px #A6E6FF
  margin-bottom 8px
.pop_status
  _wh(50%, 28px)
  _fj(row,flex-end)
.pop_status_dot
    _wh(15px, 15px)
    border-radius 50%
    margin-right 10px
.pop_status_text
    _font(16px, 28px, #fff,,)
.pop_content
  _wh(calc(100% - 14px), auto)
  padding 0 5px
  margin 0 7px
  overflow-y auto
  _fj(flex-start)
  align-content flex-start
  flex-wrap wrap
.popup_item
    _wh(calc(50% - 14px), 36px)
    _fj(row,flex-start)
    background-color rgba(50,197,255,50%)
    border-left 3px solid #fdfd0f
    margin 0 7px 5px 7px
    padding 0 5px 0 5px
.popup_label
    width 120px
    _font(12px, 36px, #fff,,left)
.popup_val
    _wh(calc(100% - 120px), 100%)
    _font(12px, 15px, #0ff,,left)
    word-break break-all
    _fj(center)
    span
      font-size 13px
      color #fff
</style>