<template>
    <section class="bg">
      <t-header title="宜宾高测原料称重看板">
      </t-header>
      <div class="container">
        <div class="sec sec1">
          <div class="four_wrap">
              <div class="item_tip item_tip_bg_l">
                <div class="item_tip_left">托盘信息</div>
              </div>
              <div class="item_content con01">
                <div class="lbox">
                  <div class="list-con" style="width: 100%; height: 100%;">
                    <div class="li">
                      <p class="li-left">母托盘：<span>{{ resData.mother_tray }}M100001</span></p>
                      <p class="li-right">子托盘：<span>{{ resData.sub_tray }}Z100001</span></p>
                    </div>
                    <div class="li">
                      <p class="li-left">物料编码：<span>{{ resData.material_code }}WL001</span></p>
                    </div>
                    <div class="li">
                      <p class="li-left">物料名称：<span>{{ resData.material_name }}方形晶棒 10*10*190</span></p>
                    </div>
                    <div class="li">
                      <p class="li-left">总数量(条)：<span>{{ resData.number }}60</span></p>
                      <p class="li-right">总重量(kg)：<span>{{ resData.qty }}1250</span></p>
                    </div>
                    <div class="li">
                      <p class="li-left">入库类型：<span>{{ resData.simtType }}采购</span></p>
                      <p class="li-right">场   地：<span>{{ resData.locationCode }}XX仓库</span></p>
                    </div>
                    <div class="li">
                      <p class="li-left">供应商：<span>{{ resData.supplierName }}XX有限责任公司</span></p>
                    </div>
                  </div>
                </div>
              </div>
          </div>
          <div class="four_wrap">
              <div class="item_tip item_tip_bg_l">
                <div class="item_tip_left">检测信息</div>
              </div>
              <div class="item_content con01">
                <div class="lbox">
                  <div class="list-con" style="width: 100%; height: 100%;">
                    <div class="li">
                      <p class="li-left">点位状态:<span>{{ resData.point_qty }}</span></p>
                    </div>
                    <div class="li">
                      <p class="li-left">称重设备:<span :class="{cgreen:resData.device_type ==='正常',cyellow:resData.device_type ==='离线',cred:resData.device_type ==='故障中'}">{{ resData.device_type }}</span></p>
                      <p class="li-right">检测框架:<span :class="{cgreen:resData.frame_type ==='正常',cyellow:resData.frame_type ==='离线',cred:resData.frame_type ==='故障中'}">{{ resData.frame_type }}</span></p>
                    </div>
                    <div class="li">
                      <p class="li-left">母托扫码:<span :class="{cgreen:resData.mother_type ==='正常',cyellow:resData.mother_type ==='离线',cred:resData.mother_type ==='故障中'}">{{ resData.mother_type }}</span></p>
                      <p class="li-right">子托扫码:<span :class="{cgreen:resData.sub_type ==='正常',cyellow:resData.sub_type ==='离线',cred:resData.sub_type ==='故障中'}">{{ resData.sub_type }}</span></p>
                    </div>
                    <div class="bottom-con">
                      <div>
                        <div class="tipImg" :class="{bgred:resData.error !== '正常',bggreen: resData.error === '正常'}"></div>
                      </div>
                      <div v-if="resData.error !== '正常'">
                        <p>外形检测超宽异常！</p>
                        <p>错误码：{{resData.error}}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
          </div>
        </div>
      </div>
      <section class="bottom"></section>
    </section>
</template>

<script>
import THeader from '@components/header3.vue'
// import { cz } from '@js/getData1'
import {cz} from '@js/mork00.js'
export default {
  name: 'ProdCount',
  components: {
    THeader
  },
  data () {
    return {
      timeOut: null,
      interTime: this.$store.getters.setTime,
      timer: null,
      resData: {}
    }
  },
  computed: {
    defaultOption2 () {
      return {
        timer1: null,
        timer2: null,
        step: 0.4, // 数值越大速度滚动越快
        limitMoveNum: 6, // 开始无缝滚动的数据量 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 () {
    this.initData()
    this.refresh()
  },
  beforeDestroy () {
    clearInterval(this.timer)
    clearInterval(this.timeOut)
  },
  methods: {
    refresh () {
      this.timer = setInterval(() => {
        this.initData()
      }, this.interTime)
    },
    async initData () {
      let res = await cz()
      clearInterval(this.timeOut)
      this.resData = res
    }
  }
}
</script>

<style lang="stylus" scoped>
// @import '~@css/mixin'
@import '../../css/mixin'
// @import '~@style/mixin'
.bg
  _wh(100%, 100%)
  overflow hidden
.container
  display flex
  align-items center
  flex-direction column
  _wh(100%, calc(100% - 138px))
  padding 30px 25.09px 0
  overflow hidden
  clear both
.sec
  width 100%
.sec1
  display flex
  justify-content space-between
.sec2
  display flex
.bottom
  _wh(100%, 38px)
  background center bottom / 1906px 100% url(../../images/screen1/bottom.png) no-repeat
.cblue
  color #32C5FF !important
.cgreen
  color #6ce64e !important
.cgray
  color #516282 !important
.cyellow
  color #E2BB0E !important
.corange
  color #F96700 !important
.cred
  color #FF0000 !important
.bgred
  background #FF0000 !important
.bggreen
  background #6CE64E !important

.four_wrap
  // _wh(100%, calc(39% - 20px))
  margin-top 40px
  height 88%
  width 50%
  padding 0 1%
.item_tip
    _wh(100%, 32px)
    line-height 32px
    padding 0 10px
.item_tip_bg_l
    background center center / 100% 100% url(../../images/screen1/bg_title_j.png) no-repeat
.item_tip_left
    _wh(60%, 100%)
    font-family "SourceHanSansCN"
    _font(18px, inherit, #fff, 700, left)
    letter-spacing 2px
    text-shadow 0 0 9px #159AFF
    padding-left 34px
    background center left / 22px 22px url(../../images/screen1/bg_title_tip.png) no-repeat
.item_content
    _wh(100%, calc(100% - 37px))
    margin-top 7px
.lbox
  .list-con
    .li
      display flex
      color  #fff
      font-weight bold
      font-size 36px
      line-height 120px
      justify-content space-between
      padding 0 20px
      span
        color #f7b502
        margin 0 20px
      .li-right
        margin-left 20px
  .bottom-con
    display flex
    justify-content space-around
    margin-top 100px
    .tipImg
      margin-left 30px
      width 120px
      height 120px
      border 1px solid #000
      border-radius 60px
      // background #6CE64E
    p
      font-size 40px
      color #df63fb
      font-weight bold
      text-align center
      line-height 70px
</style>
