<template>
  <section class="bg">
    <t-header title="分拣作业监控">
    </t-header>
    <div class="container">
      <div class="zdy_box">
        <div class="zero-wrap">
          <div class="zero-title">
            <div class="item_tip_left">{{topSec1.pointName}}</div>
          </div>
          <div class="zero-title">
            <div class="item_tip_left">{{topSec2.pointName}}</div>
          </div>
          <div class="zero-title">
            <div class="item_tip_left">{{topSec3.pointName}}</div>
          </div>
        </div>
        <div class="one_wrap">
          <div class="e-box">
            <div class="a-box">
              <!-- <div class="a-title">分拣线1：</div> -->
              <div class="pie_wraper_2">
                <div class="w_wraper">
                  <div id="new_home_echart_01" style="width: 220px; height: 220px;"></div>
                </div>
              </div>
            </div>
            <div class="b-box">
              <div class="b-item"><span>当前工单：</span><span>{{topSec1.workorderCode}}</span></div>
              <div class="b-item"><span>客户：</span><span>{{topSec1.customer}}</span></div>
              <div class="b-item"><span>物料：</span><span>{{topSec1.materialName}}</span></div>
              <div class="b-item"><span>规格：</span><span>{{topSec1.materialSpec}}</span></div>
              <div class="b-item"><span>数量：</span><span>{{topSec1.planQty}}</span></div>
            </div>
          </div>
          <div class="e-box">
            <div class="a-box">
              <!-- <div class="a-title">分拣线2：</div> -->
              <div class="pie_wraper_2">
                <div class="w_wraper">
                  <div id="new_home_echart_02" style="width: 220px; height: 220px;"></div>
                </div>
              </div>
            </div>
            <div class="b-box">
              <div class="b-item"><span>当前工单：</span><span>{{topSec2.workorderCode}}</span></div>
              <div class="b-item"><span>客户：</span><span>{{topSec2.customer}}</span></div>
              <div class="b-item"><span>物料：</span><span>{{topSec2.materialName}}</span></div>
              <div class="b-item"><span>规格：</span><span>{{topSec2.materialSpec}}</span></div>
              <div class="b-item"><span>数量：</span><span>{{topSec2.planQty}}</span></div>
            </div>
          </div>
          <div class="e-box">
            <div class="a-box">
              <!-- <div class="a-title">人工分拣线：</div> -->
              <div class="pie_wraper_2">
                <div class="w_wraper">
                  <div id="new_home_echart_03" style="width: 220px; height: 220px;"></div>
                </div>
              </div>
            </div>
            <div class="b-box">
              <div class="b-item"><span>当前工单：</span><span>{{topSec3.workorderCode}}</span></div>
              <div class="b-item"><span>客户：</span><span>{{topSec3.customer}}</span></div>
              <div class="b-item"><span>物料：</span><span>{{topSec3.materialName}}</span></div>
              <div class="b-item"><span>规格：</span><span>{{topSec3.materialSpec}}</span></div>
              <div class="b-item"><span>数量：</span><span>{{topSec3.planQty}}</span></div>
            </div>
          </div>
        </div>
        <div class="two_wrap">
          <div class="zdy_box">
            <div class="two_wrap_item">
              <div class="two_w_item_label">当日已拆垛：</div>
            </div>
            <div class="two_wrap_item">
              <div class="two_w_item_label">当日已码垛：</div>
            </div>
          </div>
        </div>
        <div class="three_wrap">
          <div class="zdy_box">
            <div class="three_w_item">
              <vue-seamless-scroll :data="chaiduoArr" :class-option="defaultOption1">
                <ul class="scroll-ul_1">
                  <li v-for="(e, i) in chaiduoArr" :key="i">
                    <span>{{e.createTime}}&nbsp;</span>
                    <span class="scroll_th">托盘号:</span>
                    <span>{{ e.vehicleCode }}，</span>
                    <span class="scroll_th">物料:</span>
                    <span>{{ e.materialName }}，</span>
                    <span class="scroll_th">数量:</span>
                    <span>{{ e.materialQty }}，</span>
                    <span class="scroll_th">重量:</span>
                    <span>{{ e.materialWeight }}</span>
                  </li>
                </ul>
              </vue-seamless-scroll>
            </div>
            <div class="three_w_item">
              <vue-seamless-scroll :data="maduoArr" :class-option="defaultOption1">
                <ul class="scroll-ul_1">
                  <li v-for="(e, i) in maduoArr" :key="i">
                    <span>{{e.createTime}}&nbsp;</span>
                    <span class="scroll_th">托盘号:</span>
                    <span>{{ e.vehicleCode }}，</span>
                    <span class="scroll_th">物料:</span>
                    <span>{{ e.materialName }}，</span>
                    <span class="scroll_th">数量:</span>
                    <span>{{ e.materialQty }}，</span>
                    <span class="scroll_th">重量:</span>
                    <span>{{ e.materialWeight }}</span>
                  </li>
                </ul>
              </vue-seamless-scroll>
            </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">
              <div class="scroll_wrap">
                <ul class="scroll_tab_2">
                  <li>工单号</li>
                  <li>物料</li>
                  <li>规格</li>
                  <li>数量（块）</li>
                  <li>重量（吨）</li>
                  <li>订单号</li>
                  <li>客户</li>
                  <li>托盘类型</li>
                  <li>是否留有半托</li>
                  <li>创建时间</li>
                </ul>
                <div class="scroll_container_2">
                  <vue-seamless-scroll :data="lastWorkOrderList" :class-option="defaultOption2">
                    <ul class="scroll-ul_2">
                      <li v-for="(e, i) in lastWorkOrderList" :key="i">
                        <div class="scroll-ul_2_div">{{e.workorderCode}}</div>
                        <div class="scroll-ul_2_div">{{e.materialName}}</div>
                        <div class="scroll-ul_2_div">{{e.materialSpec}}</div>
                        <div class="scroll-ul_2_div">{{e.planQty}}</div>
                        <div class="scroll-ul_2_div">{{e.planWeight}}</div>
                        <div class="scroll-ul_2_div">{{e.produceOrder}}</div>
                        <div class="scroll-ul_2_div">{{e.customer}}</div>
                        <div class="scroll-ul_2_div">{{e.vehicleType}}</div>
                        <div class="scroll-ul_2_div">{{e.hasHalf}}</div>
                        <div class="scroll-ul_2_div">{{e.createTime}}</div>
                      </li>
                    </ul>
                  </vue-seamless-scroll>
                </div>
              </div>
            </div>
        </div>
      </div>
    </div>
    <section class="bottom"></section>
  </section>
</template>

<script>
import THeader from '@components/header3.vue'
// import {cockpitsorting} from '@js/getData1.js'
import {cockpitsorting} from '@js/mork1.js'
export default {
  name: 'SortWorkMonitor',
  components: {
    THeader
  },
  data () {
    return {
      timer: null,
      interTime: this.$store.getters.setTime,
      topSec1: {},
      topSec2: {},
      topSec3: {},
      chaiduoArr: [],
      maduoArr: [],
      lastWorkOrderList: [],
      stateStatistics: {
        count: '20',
        // fourState: [{'status': '5', 'stateName': '正常运行'}, {'status': '5', 'stateName': '暂未生产'}, {'status': '5', 'stateName': '空闲设备'}, {'status': '5', 'stateName': '故障设备'}]
        fourState: [{'status': '80', 'stateName': '实际数量'}, {'status': '20', 'stateName': '计划数量'}]
      }
    }
  },
  computed: {
    defaultOption1 () {
      return {
        timer1: null,
        timer2: null,
        step: 0.4, // 数值越大速度滚动越快
        limitMoveNum: 4, // 开始无缝滚动的数据量 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 {
        timer1: null,
        timer2: null,
        step: 0.4, // 数值越大速度滚动越快
        limitMoveNum: 5, // 开始无缝滚动的数据量 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.refresh()
  },
  beforeDestroy () {
    this.$once('hook:beforeDestroy', () => {
      clearInterval(this.timer)
    })
  },
  methods: {
    refresh () {
      this._cockpitsorting()
      this.timer2 = setInterval(() => {
        this._cockpitsorting()
      }, this.interTime)
    },
    async _cockpitsorting () {
      let res = await cockpitsorting()
      this.topSec1 = res.sortingLine[0]
      this.topSec2 = res.sortingLine[1]
      this.topSec3 = res.sortingLine[2]
      this.setEchart01()
      this.setEchart02()
      this.setEchart03()
      this.lastWorkOrderList = [...res.lastWorkOrderList]
      this.chaiduoArr = [...res.unstackingList]
      this.maduoArr = [...res.unstackingList]
    },
    setEchart01 () {
      let colors = ['#1980EA', '#67D470', '#B4C9EF', '#EF5252', '#BCBF5C', '#6d5edd', '#bf41bb']
      // let seriesData = this.stateStatistics.fourState
      // seriesData.map((el, i) => {
      //   el.value = el.status
      //   el.name = el.stateName
      // })
      let seriesData = []
      seriesData = [{'value': Number(this.topSec1.planQty) - Number(this.topSec1.realQty), 'name': '剩余数量'}, {'value': this.topSec1.realQty, 'name': '实际数量'}]
      // let total = this.stateStatistics.count
      let total = this.topSec1.realQty
      let option = {
        color: colors,
        grid: {
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        title: {
          text: `{a|已完成}\n{b|${total}}`,
          x: 'center',
          y: '39%',
          textStyle: {
            rich: {
              a: {
                fontSize: 16,
                lineHeight: 20,
                color: '#A8C3E6',
                fontFamily: 'SourceHanSansCN-Regular'
              },
              b: {
                fontSize: 30,
                lineHeight: 36,
                color: '#DBE7F6',
                fontFamily: 'YouSheBiaoTiHei'
              }
            }
          }
        },
        series: [{
          name: '设备运行统计',
          type: 'pie',
          radius: ['61%', '69%'],
          center: ['50%', '50%'],
          labelLine: {
            show: false
          },
          tooltip: {
            show: false
          },
          itemStyle: {
            borderColor: 'RGBA(27, 58, 98, .5)',
            borderWidth: 2
          },
          label: {
            show: false
          },
          selectedMode: 'single',
          selectedOffset: 20,
          data: seriesData
        }]
      }
      if (document.getElementById('new_home_echart_01') == null) {
        return
      }
      this.$echarts.dispose(document.getElementById('new_home_echart_01'))
      let echart = this.$echarts.init(document.getElementById('new_home_echart_01'))
      echart.setOption(option)
      window.addEventListener('resize', () => {
        echart.resize()
      })
    },
    setEchart02 () {
      let colors = ['#1980EA', '#67D470', '#B4C9EF', '#EF5252', '#BCBF5C', '#6d5edd', '#bf41bb']
      // let seriesData = this.stateStatistics.fourState
      // seriesData.map((el, i) => {
      //   el.value = el.status
      //   el.name = el.stateName
      // })
      let seriesData = []
      seriesData = [{'value': Number(this.topSec2.planQty) - Number(this.topSec2.realQty), 'name': '剩余数量'}, {'value': this.topSec2.realQty, 'name': '实际数量'}]
      // let total = this.stateStatistics.count
      let total = this.topSec2.realQty
      let option = {
        color: colors,
        grid: {
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        title: {
          text: `{a|已完成}\n{b|${total}}`,
          x: 'center',
          y: '39%',
          textStyle: {
            rich: {
              a: {
                fontSize: 16,
                lineHeight: 20,
                color: '#A8C3E6',
                fontFamily: 'SourceHanSansCN-Regular'
              },
              b: {
                fontSize: 30,
                lineHeight: 36,
                color: '#DBE7F6',
                fontFamily: 'YouSheBiaoTiHei'
              }
            }
          }
        },
        series: [{
          name: '设备运行统计',
          type: 'pie',
          radius: ['61%', '69%'],
          center: ['50%', '50%'],
          labelLine: {
            show: false
          },
          tooltip: {
            show: false
          },
          itemStyle: {
            borderColor: 'RGBA(27, 58, 98, .5)',
            borderWidth: 2
          },
          label: {
            show: false
          },
          selectedMode: 'single',
          selectedOffset: 20,
          data: seriesData
        }]
      }
      if (document.getElementById('new_home_echart_02') == null) {
        return
      }
      this.$echarts.dispose(document.getElementById('new_home_echart_02'))
      let echart = this.$echarts.init(document.getElementById('new_home_echart_02'))
      echart.setOption(option)
      window.addEventListener('resize', () => {
        echart.resize()
      })
    },
    setEchart03 () {
      let colors = ['#1980EA', '#67D470', '#B4C9EF', '#EF5252', '#BCBF5C', '#6d5edd', '#bf41bb']
      // let seriesData = this.stateStatistics.fourState
      // seriesData.map((el, i) => {
      //   el.value = el.status
      //   el.name = el.stateName
      // })
      let seriesData = []
      seriesData = [{'value': Number(this.topSec3.planQty) - Number(this.topSec3.realQty), 'name': '剩余数量'}, {'value': this.topSec3.realQty, 'name': '实际数量'}]
      // let total = this.stateStatistics.count
      let total = this.topSec3.realQty
      let option = {
        color: colors,
        grid: {
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        title: {
          text: `{a|已完成}\n{b|${total}}`,
          x: 'center',
          y: '39%',
          textStyle: {
            rich: {
              a: {
                fontSize: 16,
                lineHeight: 20,
                color: '#A8C3E6',
                fontFamily: 'SourceHanSansCN-Regular'
              },
              b: {
                fontSize: 30,
                lineHeight: 36,
                color: '#DBE7F6',
                fontFamily: 'YouSheBiaoTiHei'
              }
            }
          }
        },
        series: [{
          name: '设备运行统计',
          type: 'pie',
          radius: ['61%', '69%'],
          center: ['50%', '50%'],
          labelLine: {
            show: false
          },
          tooltip: {
            show: false
          },
          itemStyle: {
            borderColor: 'RGBA(27, 58, 98, .5)',
            borderWidth: 2
          },
          label: {
            show: false
          },
          selectedMode: 'single',
          selectedOffset: 20,
          data: seriesData
        }]
      }
      if (document.getElementById('new_home_echart_03') == null) {
        return
      }
      this.$echarts.dispose(document.getElementById('new_home_echart_03'))
      let echart = this.$echarts.init(document.getElementById('new_home_echart_03'))
      echart.setOption(option)
      window.addEventListener('resize', () => {
        echart.resize()
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
// @import '~@css/mixin'
@import '../../css/mixin'
.bg
  _wh(100%, 100%)
  overflow hidden
.container
  _wh(100%, calc(100% - 138px))
  padding 30px 25.09px 0
  clear both
.bottom
  _wh(100%, 38px)
  background center bottom / 1906px 100% url(../../images/screen1/bottom.png) no-repeat
.zero-wrap
  _wh(100%, 12%)
  padding 0 0 15px 0
  display flex
.zero-title
  width 32%
  height 32px
  line-height 32px
  font-family: "SourceHanSansCN";
  font-weight: bold;
  font-size 18px
  color #ffffff
  background center center / 100% 100% url(../../images/screen1/bg_title_s.png) no-repeat
  &:nth-child(2)
    margin-left 2%
    margin-right 2%
.one_wrap
  _wh(100%, 12%)
  padding 0 0 15px 15px
  // background center center / 100% 100% url(../../images/screen1/sctj_top.png) no-repeat
  overflow hidden
  display flex
.e-box
  width 33.3%
  height 240px
  // background #ff0
  display flex
.a-box
  width 40%
  height 260px
  // background #fcc
// .a-title
//   font-family: "SourceHanSansCN";
//   font-weight: bold;
//   line-height 34px
//   font-size 18px
//   color #32c5ff
  // background center center / 100% 100% url(../../images/screen1/bg_title_s.png) no-repeat
.pie_wraper_2
  // position absolute
  // top 17px
  // left 0
  width 222px
  height 222px
  // width 70%
  // height 70%
  background center / 100% auto url('../../images/pie-bg_2.png') no-repeat
  .w_wraper
    width 100%
    height 100%
.b-box
  width 60%
  margin-top 10px
.b-item
  color #ffffff
  line-height 36px
  margin-top 5px
  margin-left 25px
  span
    &:nth-child(1)
      color #2ef6ff
.zdy_box
  _fj(flex-start, flex-start)
  flex-wrap wrap
  align-content flex-start
.one_wrap_item
  height calc(50% - 15px)
  _fj(flex-start)
  margin-top 15px
  margin-right 15px
.one_w_item_label
  min-width 80px
  padding 0 10px 0 0
  _font(18px, 1, #32c5ff,,center)
.one_w_item_label_1
  padding 0 0 0 10px
.one_w_item_text
  min-width 20px
  height 100%
  _font(30px, 1, #f7b502,,center)
  _fj(center)
  background-color rgba(50,197,255,0.1)
  padding 0 10px
.two_wrap
  _wh(100%, 9%)
  padding 20px 0 15px 0
.two_wrap_item
  _wh(50%, 100%)
  padding 0 15px
  _fj()
.two_w_item_label
  width 170px
  _font(18px, 1, #32c5ff,,)
.two_w_item_text
  _wh(calc(100% - 70px), 100%)
.three_wrap
  _wh(100%, 40%)
.three_w_item
  _wh(calc(50% - 15px), 100%)
  height 200px
  padding 15px
  padding-left 65px
  background-image linear-gradient(to bottom, #040b1a, #050919)
  overflow hidden
  &:first-child
    margin-right 30px
.four_wrap
  width 100%
  // _wh(100%, calc(39% - 20px))
  margin-top 40px
  // padding 10px 15px
  // background-image linear-gradient(to bottom, #050c1b, #16243c)
  // border 2px solid #16243c
  // border-top-left-radius 10px
  // border-top-right-radius 10px
.scroll-ul_1
  width 100%
  li
    width 100%
    line-height 40px
    span
     _font(16px, 1, #fff,,)
    .scroll_th
      color #2ef6ff
.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
.scroll_wrap
    _wh(100%, 100%)
    border 1px solid rgba(8,205,248,0.3)
.scroll_tab_2
    _wh(100%, 40px)
    border-bottom 1px solid rgba(8,205,248,0.3)
    li
      float left
      width 10%
      _font(14px,40px,#78B1DE,,center)
      word-wrap break-word
      word-break break-all
      white-space nowrap
      padding 0 2px
      overflow hidden
      box-sizing border-box
.scroll_container_2
    width 100%
    // height calc(100% - 40px)
    height 230px
    overflow hidden
.scroll-ul_2
    li
      _wh(100%, 44px)
      border-bottom 1px solid rgba(8,205,248,0.3)
      &:nth-child(even)
          background rgba(1,24,52,0.60)
          box-shadow inset 0px 1px 0px 0px rgba(13,89,115,0.3)
    .scroll-ul_2_div
        float left
        _wh(10%, 44px)
        _fj(center)
        _font(12px, 44px, #fff,,center)
        word-wrap break-word
        word-break break-all
        white-space nowrap
        padding 0 2px
        overflow hidden
</style>
