screen-hl-one/src/pages/TaskScreen.vue

<template>
  <section>
    <t-header title="混合料厂配粉任务看板"></t-header>
    <div class="goods_shelves">
      <div class="yard-wrap">
        <div class="content_left">
          <div class="content_l_item_1">
            <div class="item_1">
              <div class="item_inner_l">
                <div class="item_txt">
                  <p class="item_txt_1">工令号</p>
                  <p class="item_txt_2">{{obj1.workorder_code}}</p>
                </div>
                <div class="item_txt">
                  <p class="item_txt_1">批次</p>
                  <p class="item_txt_2">{{obj1.pcsn}}</p>
                </div>
                <div class="item_txt">
                  <p class="item_txt_1">重量</p>
                  <p class="item_txt_2">{{obj1.masterbucket_qty}}&nbsp;&nbsp;&nbsp;&nbsp;KG</p>
                </div>
              </div>
              <div class="item_inner_l">
                <div class="item_txt">
                  <p class="item_txt_1">产品</p>
                  <p class="item_txt_2">{{obj1.material_code}}</p>
                </div>
                <div class="item_txt">
                  <p class="item_txt_1">配粉槽</p>
                  <p class="item_txt_2">{{obj1.storagevehicle_code}}</p>
                </div>
                <div class="item_txt">
                  <p class="item_txt_1">已配粉</p>
                  <p class="item_txt_2">{{obj1.put_qty}}&nbsp;&nbsp;&nbsp;&nbsp;KG</p>
                </div>
              </div>
            </div>
            <div class="item_2">
              <div id="echart_d1" style="width: 100%; height: 100%"></div>
            </div>
          </div>
          <div class="content_l_item_2">
            <div class="tip_item">
              <p>任务列表</p>
              <div class="tip_item_bg1"></div>
              <div class="tip_item_bg2"></div>
            </div>
            <div class="item_3">
              <ul class="scroll_tab_1">
                <li>序号</li>
                <li>产品</li>
                <li>批次</li>
                <li>重量</li>
                <li>已配粉</li>
                <li>单位</li>
                <li>开始时间</li>
                <li>结束时间</li>
              </ul>
              <div class="scroll_container_1">
                <vue-seamless-scroll :data="array2" :class-option="defaultOption1">
                  <ul class="content-block-scroll-ul_1">
                    <li v-for="(e, i) in array2" :key="i" :class="['fcgreen', 'fcred', 'fcwhite'][Number(e.color_flag) - 1]">
                      <div>{{i + 1}}</div>
                      <div>{{e.material_code}}</div>
                      <div>{{e.pcsn}}</div>
                      <div>{{e.workorder_qty}}</div>
                      <div>{{e.product_qty}}</div>
                      <div>{{e.unit_name}}</div>
                      <div>{{e.start_time}}</div>
                      <div>{{e.end_time}}</div>
                    </li>
                  </ul>
              </vue-seamless-scroll>
              </div>
            </div>
          </div>
        </div>
        <div class="content_right">
          <div class="content_r_item_1" :class="{'content_r_item_1_a': obj2.flag === '1'}">
            <div class="item_4">
              <span class="span1">当前物料</span>
              <span>{{obj2.seq_no}}</span>
              <span>{{obj2.material_code}}</span>
              <span>{{obj2.material_name}}</span>
              <span>{{obj2.total_qty}}KG</span>
            </div>
            <div class="item_4 item_5">
              <span class="span1">已配/剩余</span>
              <span class="span2">
                <div class="progress-bar">
                  <div class="progress-bar__outer">
                    <div class="progress-bar__inner progress-bar__inner_l" :style="'width: ' + Number(obj2.put_qty) * 100 /(Number(obj2.put_qty) + Number(obj2.need_qty)) + '%'">
                      <div class="progress-bar__innerText">{{obj2.put_qty}}</div>
                    </div>
                    <div class="progress-bar__inner progress-bar__inner_r" :style="'width: ' + Number(obj2.need_qty) * 100 /(Number(obj2.put_qty) + Number(obj2.need_qty)) + '%'">
                      <div class="progress-bar__innerText">{{obj2.need_qty}}</div>
                    </div>
                  </div>
                </div>
              </span>
            </div>
            <div class="item_4">
              <span class="span1">当前桶</span>
              <span>{{obj2.bucketunique}}</span>
              <span>{{obj2.bucket_material_code}}</span>
              <span>{{obj2.pcsn}}</span>
              <span>{{obj2.storage_qty}}KG</span>
            </div>
            <div class="item_4 item_7">
              <span class="span1">需出重量</span>
              <span>{{obj2.needout_qty}}KG</span>
              <span class="span1">称重重量</span>
              <span>{{obj2.putfit_qty}}KG</span>
              <span>
                <div v-if="obj2.flag === '0'" class="circle">
                  <div class="small-circle bggreen"></div>
                  <div class="big-circle bggreen"></div>
                </div>
                <div v-if="obj2.flag === '1'" class="circle">
                  <div class="small-circle bgred"></div>
                  <div class="big-circle bgred"></div>
                </div>
              </span>
            </div>
            <div v-if="obj2.flag === '1'" class="item_4 item_8">
              <span>{{obj2.msg}}</span>
            </div>
          </div>
          <div class="content_r_item_2" :class="{'content_r_item_2_a': obj2.flag === '1'}">
            <div class="item_6">
              <ul class="scroll_tab_2">
                <li>序号</li>
                <li>货位</li>
                <li>托盘号</li>
                <li>桶号</li>
                <li>重量</li>
                <li>单位</li>
                <li>批次</li>
              </ul>
              <div class="scroll_container_2">
                <vue-seamless-scroll :data="array3" :class-option="defaultOption2">
                  <ul class="content-block-scroll-ul_2">
                    <li v-for="(e, i) in array3" :key="i">
                      <div>{{i + 1}}</div>
                      <div>{{e.struct_code}}</div>
                      <div>{{e.storagevehicle_code}}</div>
                      <div>{{e.bucketunique}}</div>
                      <div>{{e.storage_qty}}</div>
                      <div>{{e.qty_unit_name}}</div>
                      <div>{{e.pcsn}}</div>
                    </li>
                  </ul>
              </vue-seamless-scroll>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import THeader from '@components/header.vue'
import {queryInfo1, queryInfo2, queryInfo3, queryInfo4} from '@js/getData2.js'
export default {
  name: 'TaskScreen',
  components: {
    THeader
  },
  data () {
    return {
      interTime: this.$store.getters.setTime,
      timer: null,
      obj1: {},
      array1: [],
      array2: [],
      obj2: {},
      array3: [],
      timeOut: null,
      myCharts: ''
    }
  },
  computed: {
    defaultOption1 () {
      return {
        step: 0.4, // 数值越大速度滚动越快
        limitMoveNum: 8, // 开始无缝滚动的数据量 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)
      }
    },
    defaultOption2 () {
      return {
        step: 0.4, // 数值越大速度滚动越快
        limitMoveNum: 11, // 开始无缝滚动的数据量 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._queryInfo1()
    this._queryInfo2()
    this._queryInfo3()
    this._queryInfo4()
    this.refresh()
  },
  beforeDestroy () {
    window.clearInterval(this.timer)
  },
  methods: {
    refresh () {
      this.timer = setInterval(() => {
        this._queryInfo1()
        this._queryInfo2()
        this._queryInfo3()
        this._queryInfo4()
      }, this.interTime)
    },
    async _queryInfo1 () {
      let id = ''
      if (this.$store.getters.equipId) {
        id = this.$store.getters.equipId
      }
      let res = await queryInfo1(id)
      if (res.code === '1') {
        this.obj1 = res.content
        this.array1 = [...res.rows]
        window.clearInterval(this.timeOut)
        this.setEchart1()
      } else {
        this.Dialog(res.desc)
      }
    },
    async _queryInfo2 () {
      let id = ''
      if (this.$store.getters.equipId) {
        id = this.$store.getters.equipId
      }
      let res = await queryInfo2(id)
      if (res.code === '1') {
        this.array2 = [...res.rows]
      } else {
        this.Dialog(res.desc)
      }
    },
    async _queryInfo3 () {
      let id = ''
      if (this.$store.getters.equipId) {
        id = this.$store.getters.equipId
      }
      let res = await queryInfo3(id)
      if (res.code === '1') {
        this.obj2 = res.content
      } else {
        this.Dialog(res.desc)
      }
    },
    async _queryInfo4 () {
      let id = ''
      if (this.$store.getters.equipId) {
        id = this.$store.getters.equipId
      }
      let res = await queryInfo4(id)
      if (res.code === '1') {
        this.array3 = [...res.rows]
      } else {
        this.Dialog(res.desc)
      }
    },
    setEchart1 () {
      let rate = []
      this.array1.map(el => {
        rate.push(el.rate)
      })
      let option = {
        grid: {
          top: 60,
          left: 0,
          right: 0,
          bottom: 0,
          borderColor: '#ffffff',
          containLabel: true
        },
        legend: {
          top: 0,
          right: 0,
          textStyle: {
            color: '#ffffff',
            fontSize: 16,
            lineHeight: 20
          },
          itemGap: 20,
          itemHeight: 8,
          data: ['已出重量', '总重量']
        },
        dataZoom: [
          {
            show: false, // 为true滚动条出现
            type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动
            startValue: 0, // 从头开始。
            endValue: 5 // end百分比显示范围，endValue具体显示几个数值
          }
        ],
        xAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: '#586473'
            }
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#fff',
              fontSize: 16
            }
          },
          data: this.array1.map((it) => it.material_name)
        },
        yAxis: {
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: 16
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: '#586473'
            }
          }
        },
        series: [
          {
            name: '已出重量',
            type: 'bar',
            // stack: '数量',
            barWidth: '30',
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#09bcb7'
                  },
                  {
                    offset: 1,
                    color: '#8bd46e'
                  }
                ])
              }
            },
            data: this.array1.map((it) => Number(it.put_qty)),
            label: {
              show: false,
              // formatter: (params) => {
              //   if (Number(rate[params.dataIndex]) !== 0) {
              //     return rate[params.dataIndex] + '%'
              //   } else {
              //     return ''
              //   }
              // },
              position: 'top',
              distance: 0,
              fontSize: 16,
              color: '#fff'
            }
          },
          {
            name: '总重量',
            type: 'bar',
            // stack: '数量',
            barWidth: '30',
            barGap: '-100%',
            zlevel: -1,
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 1,
                    color: '#fccb05'
                  },
                  {
                    offset: 0,
                    color: '#f5804d'
                  }
                ])
              }
            },
            data: this.array1.map((it) => Number(it.total_qty).toFixed(4)),
            label: {
              show: true,
              formatter: (params) => {
                var index = params.dataIndex
                var str = '' + params.value + '\n\n' + '占比: ' + rate[index] + '%'
                return str
              },
              position: 'top',
              offset: 0,
              fontSize: 16,
              color: '#fff'
            }
          }
        ]
      }
      let echart = document.getElementById('echart_d1')
      this.myCharts = this.$echarts.init(echart)
      this.myCharts.setOption(option)
      this.autoMove(option)
      window.addEventListener('resize', () => {
        this.myCharts.resize()
      })
    },
    autoMove (option) {
      this.timeOut = setInterval(() => {
        if (Number(option.dataZoom[0].endValue) === option.series[0].data.length - 1) {
          option.dataZoom[0].endValue = 5
          option.dataZoom[0].startValue = 0
        } else {
          option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
          option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
        }
        this.myCharts.setOption(option)
      }, 2000)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@css/mixin'
.goods_shelves
  _wh(100%, calc(100% - .75rem))
  padding .1rem
.yard-wrap
  _wh(100%, 100%)
  clear both
.content_left
  float left
  _wh(51%, 100%)
  overflow hidden
.content_right
  float right
  _wh(48%, 100%)
  border .03rem solid #68efef
  padding 0 .2rem
  overflow hidden
.content_l_item_1
  _wh(100%, 47%)
  padding .2rem
  _bis('../assets/images/bg1.png', 100%, 100%)
.content_l_item_2
  _wh(100%, 50%)
  margin-top 3%
  padding .2rem
  _bis('../assets/images/bg1.png', 100%, 100%)
.content_r_item_1
  _wh(100%, 2.15rem)
  padding .2rem
  margin-top .2rem
  _bis('../assets/images/bg2.png', 100%, 100%)
.content_r_item_1_a
  height 2.75rem
.item_1
  _wh(100%, 1.2rem)
  clear both
  overflow hidden
.item_inner_l
  float left
  width 50%
.item_txt
  width 100%
  _fj(flex-start)
.item_txt_1
  width 1rem
  _font(.2rem, .40rem, #fff)
.item_txt_2
  _font(.28rem, .40rem, $yellow)
  padding-left .1rem
.item_2
  _wh(100%, calc(100% - 1.2rem))
.tip_item
  position relative
  height .4rem
  // _bis('../assets/images/tip.png', 1.5rem, .08rem, left, bottom)
  p
    _font(.2rem, .4rem, #fff)
.tip_item_bg1
  position absolute
  bottom -.04rem
  left 0
  _wh(.08rem, .08rem)
  background-color #53cdf9
  transform rotate(45deg)
.tip_item_bg2
  position absolute
  bottom -.015rem
  left .03rem
  _wh(.78rem, .03rem)
  background-color #53cdf9
.item_3
  _wh(100%, calc(100% - .4rem))
  padding-top .2rem
.scroll_tab_1
  li
    float left
    width 10%
    _font(.18rem,.4rem,#3da1ff,,center)
    word-wrap break-word
    word-break break-all
    white-space nowrap
    padding 0 .02rem
    overflow hidden
    background-color #041e43
    box-sizing border-box
    &:nth-child(1)
      width 5%
    &:nth-child(2)
      width 17%
    &:nth-child(3)
      width 10%
    &:nth-child(7), &:nth-child(8)
      width 19%
.content-block-scroll-ul_1
  li
    _wh(100%, .4rem)
    &:nth-child(even)
      background-color #041e43
    // &:nth-child(1) div, &:nth-child(2) div
    //   color $green
    // &:nth-child(3) div
    //   color $red
.content-block-scroll-ul_1
  li
    div
      float left
      _wh(10%, inherit)
      _fj(center)
      font-size .17rem
      line-height .2rem
      text-align center
      word-wrap break-word
      word-break break-all
      white-space nowrap
      padding 0 .02rem
      overflow hidden
      &:nth-child(1)
        width 5%
      &:nth-child(2)
        width 17%
      &:nth-child(3)
        width 10%
      &:nth-child(7)
        width 19%
      &:nth-child(8)
        width 19%
.content-block-scroll-ul_1 .fcgreen div
  color $green
.content-block-scroll-ul_1 .fcred div
  color $red
.content-block-scroll-ul_1 .fcwhite div
  color #fff
.scroll_tab_2
  _wh(100%, .4rem)
  background-color #0e3758
  li
    float left
    width 10%
    _font(.18rem,.4rem,#76c0ff,,center)
    word-wrap break-word
    word-break break-all
    white-space nowrap
    padding 0 .02rem
    overflow hidden
    box-sizing border-box
    &:nth-child(1)
      width 6%
    &:nth-child(3)
      width 10%
    &:nth-child(4)
      width 25%
    &:nth-child(5)
      width 17%
    &:nth-child(6)
      width 12%
    &:nth-child(7)
      width 20%
.scroll_container_1
  width 100%
  height calc(100% - .3rem)
  overflow hidden
.scroll_container_2
  width 100%
  height calc(100% - .4rem)
  overflow hidden
.content-block-scroll-ul_2
  li
    div
      float left
      width 10%
      _font(.18rem,.5rem,#76c0ff,,center)
      word-wrap break-word
      word-break break-all
      white-space nowrap
      padding 0 .02rem
      overflow hidden
      border-right .01rem solid #0e3758
      border-bottom .01rem solid #0e3758
      &:last-child
        border-right none
      &:nth-child(1)
        width 6%
      &:nth-child(3)
        width 10%
      &:nth-child(4)
        width 25%
      &:nth-child(5)
        width 17%
      &:nth-child(6)
        width 12%
      &:nth-child(7)
        width 20%
.item_4
  _wh(100%, .4rem)
  _fj()
  span
    display block
    _wh(20%, .4rem)
    padding 0 .05rem
    _font(.22rem, .4rem, $orange,,right)
    overflow hidden
    &:nth-child(1)
      width 10%
    &:nth-child(3)
      width 30%
      text-align left
    &:nth-child(5)
      width 19%
    &:nth-child(2)
      width 28%
      text-align left
    &:nth-child(4)
      width 13%
  .span1
    _font(.16rem, .4rem, #fff,,)
.item_5
  margin .05rem 0
  span
    &:nth-child(2)
      width 90%
  .span2
    _wh(79%, .4rem)
    vertical-align top
.progress-bar
  _wh(100%, 100%)
.progress-bar__outer
  height 100%
  border-radius 100px
  background-color #ebeef5
  overflow hidden
  position relative
  vertical-align middle
.progress-bar__inner
  position absolute
  top 0
  width 0
  height 100%
  text-align center
  line-height 1
  white-space nowrap
  transition width .6s ease
.progress-bar__inner_l
  left 0
  background-color $green
  border-top-left-radius 100px
  border-bottom-left-radius 100px
  transition all .3s linear
.progress-bar__inner_r
  right 0
  background-color $yellow
  border-top-right-radius 100px
  border-bottom-right-radius 100px
.progress-bar__innerText
    display inline-block
    vertical-align middle
    _font(.24rem, .4rem, #000)
    margin 0 .05rem
.content_r_item_2
  _wh(100%, calc(100% - 2.75rem))
  margin .2rem 0
.content_r_item_2_a
  height calc(100% - 2.15rem)
.item_6
  _wh(100%, 100%)
  padding .1rem
  border .01rem solid #114880
.item_7
  margin-top .05rem
  span
    &:nth-child(2), &:nth-child(4)
      width 30%
      color $green
      text-align left
    &:nth-child(3)
      width 10%
    &:last-child
      width 15%
      overflow visible
.item_8
  margin-top .2rem
  span
    &:nth-child(1)
      color $red
      width 100%
      text-align center
.circle
  position relative
  float right
  _wh(.4rem, .4rem)
.small-circle
  border-radius 50%
  _wh(.2rem, .2rem)
  position absolute
  left 50%
  top 50%
  transform translate3d(-50%, -50%, 0)
  z-index 100
.big-circle
  position absolute
  _wh(100%, 100%)
  border-radius 50%
  animation twinkling 1s infinite ease-in-out
  animation-fill-mode both
  z-index 99
@keyframes twinkling {
  0% {
    opacity 0.2
    transform scale(1)
  }
  50% {
    opacity 0.5
    transform scale(1.12)
  }
  100% {
    opacity 0.2
    transform scale(1)
  }
}
.bggreen
  background-color $green
.bgred
  background-color $red
</style>