<template>
    <section class="bg">
      <t-header title="压制生产看板">
      </t-header>
      <div class="container">
        <div class="con1">
          <div class="cbox">
            <div>当前班次：</div>
            <div class="num" style="color: #f7b502; font-size: 46px; letter-spacing: 15px;">
              {{showText}}
            </div>
          </div>
          <div class="cbox">
            <div>计划生产：</div>
            <div class="num">
              <div class="bg" v-for="(item, i) in showNum1" :key="i" :class="{dot: item === '.'}">{{item}}</div>
            </div>
            <div>块</div>
          </div>
          <div class="cbox">
            <div>已生产：</div>
            <div class="num">
              <div class="bg" v-for="(item, i) in showNum2" :key="i" :class="{dot: item === '.'}">{{item}}</div>
            </div>
            <div>块</div>
          </div>
          <div class="cbox">
            <div>不合格数：</div>
            <div class="num">
              <div class="bg" v-for="(item, i) in showNum3" :key="i" :class="{dot: item === '.'}">{{item}}</div>
            </div>
            <div>块</div>
          </div>
        </div>
        <div class="center_wrapper" style="display:flex">
          <div class="con2">
            <div class="title"><span class="dotIncon"></span><span class="tltxt">当班生产</span></div>
            <div class="item_content_0">
              <div id="echart_d1" style="width: 100%; height: 100%"></div>
            </div>
          </div>
          <div class="con3">
            <div class="title"><span class="dotIncon"></span><span class="tltxt">当月订单</span></div>
            <div class="item_content_1">
              <div id="echart_d2" style="width: 100%; height: 100%"></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">
              <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>
                  <li>状态</li>
                  <li>开工人</li>
                  <li>开工时间</li>
                  <li>完工时间</li>
                </ul>
                <div class="scroll_container_2">
                  <vue-seamless-scroll :data="ProductionTask" :class-option="defaultOption2">
                    <ul class="scroll-ul_2">
                      <li v-for="(e, i) in ProductionTask" :key="i">
                        <div class="scroll-ul_2_div">{{e.device}}</div>
                        <div class="scroll-ul_2_div">{{e.workorderCode}}</div>
                        <div class="scroll-ul_2_div">{{e.team}}</div>
                        <div class="scroll-ul_2_div">{{e.materialName}}</div>
                        <div class="scroll-ul_2_div">{{e.customer}}</div>
                        <div class="scroll-ul_2_div">{{e.planproducestartDate}}</div>
                        <div class="scroll-ul_2_div">{{e.planQty}}</div>
                        <div class="scroll-ul_2_div">{{e.realQty}}</div>
                        <div class="scroll-ul_2_div">{{e.unqualifiedQty}}</div>
                        <div class="scroll-ul_2_div">{{e.qualifiedRate}}%</div>
                        <div class="scroll-ul_2_div">{{e.workorderStatus}}</div>
                        <div class="scroll-ul_2_div">{{e.operator}}</div>
                        <div class="scroll-ul_2_div">{{e.realproducestartDate}}</div>
                        <div class="scroll-ul_2_div">{{e.realproduceendDate}}</div>
                      </li>
                    </ul>
                  </vue-seamless-scroll>
                </div>
              </div>
            </div>
        </div>
      </div>
      <section class="bottom"></section>
    </section>
</template>

<script>
import THeader from '@components/header3.vue'
// import * as echarts from 'echarts'
// import { cockpitpress } from '@js/getData1'
import {cockpitpress} from '@js/mork1.js'
export default {
  name: 'ProdCount',
  components: {
    THeader
  },
  data () {
    return {
      timeOut: null,
      interTime: this.$store.getters.setTime,
      timer: null,
      showText: '',
      showNum1: '0',
      showNum2: '0',
      showNum3: '0',
      myCharts02: '',
      myCharts01: '',
      materData: [],
      deviceData: [],
      PersonnelMonthlyProduction: [],
      PressOrderList: [],
      // MonthlyWorkOrder: [],
      // MonthlyWorkOrder: [
      //   {guada_num: 1200, name: 'XC-0', order_num: 1655, residue_num: 455},
      //   {guada_num: 1200, name: 'XC-1', order_num: 1655, residue_num: 455},
      //   {guada_num: 1200, name: 'XC-2', order_num: 1655, residue_num: 455},
      //   {guada_num: 1200, name: 'XC-3', order_num: 1655, residue_num: 455},
      //   {guada_num: 1200, name: 'XC-4', order_num: 1655, residue_num: 455},
      //   {guada_num: 1200, name: 'XC-5', order_num: 1655, residue_num: 455},
      //   {guada_num: 1200, name: 'XC-6', order_num: 1655, residue_num: 455}
      // ],
      // MonthlyWorkOrder: [
      //   {
      //     name: 'A1',
      //     order_num: '150',
      //     guada_num: '100',
      //     residue_num: '50'
      //   },
      //   {
      //     name: 'A2',
      //     order_num: '130',
      //     guada_num: '120',
      //     residue_num: '10'
      //   },
      //   {
      //     name: 'A3',
      //     order_num: '300',
      //     guada_num: '30',
      //     residue_num: '270',
      //   },
      //   {
      //     name: 'A4',
      //     order_num: '150',
      //     guada_num: '100',
      //     residue_num: '50'
      //   },
      //   {
      //     name: 'A5',
      //     order_num: '300',
      //     guada_num: '100',
      //     residue_num: '200'
      //   }
      // ],
      ProductionTask: [],
      ShiftProductionList: [],
      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 cockpitpress()
      clearInterval(this.timeOut)
      this.resData = res
      // this.showNum1 = '3020'
      // this.showNum2 = '3000'
      // this.showNum3 = '220'
      this.showText = res.DayShiftInfo[0].team
      this.showNum1 = (res.DayShiftInfo[0].planQty + '').split('')
      this.showNum2 = (res.DayShiftInfo[0].realQty + '').split('')
      this.showNum3 = (res.DayShiftInfo[0].unqualifiedQty + '').split('')
      // this.PersonnelMonthlyProduction = res.PersonnelMonthlyProduction
      // this.MonthlyWorkOrder = res.MonthlyWorkOrder
      this.PressOrderList = res.PressOrderList
      this.ProductionTask = res.ProductionTask
      this.ShiftProductionList = res.ShiftProductionList
      this.setEchart01()
      this.setEchart02()
    },
    setEchart01 () {
      let data1 = []
      let data2 = []
      let data3 = []
      let device = []
      this.ShiftProductionList.map(e => {
        data1.push(e.qualifiedQty)
        data2.push(e.unqualifiedQty)
        data3.push(e.lastQty)
        device.push(e.columnName)
      })
      let option = {
        grid: {
          top: 50,
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        legend: {
          icon: 'rect',
          // right: 0,
          textStyle: {
            color: '#fff',
            fontSize: 14,
            lineHeight: 14
          },
          itemGap: 40.86,
          itemWidth: 20.16,
          itemHeight: 7.38,
          data: [{name: '合格数', itemStyle: {color: '#33CCCC'}}, {name: '不合格数', itemStyle: {color: '#EAAD24'}}, {name: '剩余数', itemStyle: {color: '#0E90FD'}}]
        },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 2,
              color: '#8FABBF'
            }
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#8FABBF',
              fontSize: 16
            }
          },
          data: device
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          splitNumber: 2,
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#8FABBF',
              fontSize: 14
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: [8, 4],
              dashOffset: 4,
              color: '#8FABBF'
            }
          }
        },
        series: [
          {
            name: '合格数',
            type: 'bar',
            barWidth: '12',
            label: {
              show: true,
              position: 'top', // 位置
              color: '#A7D6F4',
              fontSize: 14,
              distance: 15, // 距离
              formatter: '{c}' // 这里是数据展示的时候显示的数据
            },
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#33CCCC',
                    opacity: 1
                  },
                  {
                    offset: 1,
                    color: 'rgba(31,89,89,0.25)',
                    opacity: 0.25
                  }
                ])
              }
            },
            data: data1
          },
          {
            name: '不合格数',
            type: 'bar',
            barWidth: '12',
            label: {
              show: true,
              position: 'top', // 位置
              color: '#A7D6F4',
              fontSize: 14,
              distance: 15, // 距离
              formatter: '{c}' // 这里是数据展示的时候显示的数据
            },
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#B68845',
                    opacity: 1
                  },
                  {
                    offset: 1,
                    color: 'rgba(134,98,45,0.25)',
                    opacity: 0.25
                  }
                ])
              }
            },
            data: data2
          },
          {
            name: '剩余数',
            type: 'bar',
            barWidth: '12',
            label: {
              show: true,
              position: 'top', // 位置
              color: '#A7D6F4',
              fontSize: 14,
              distance: 15, // 距离
              formatter: '{c}' // 这里是数据展示的时候显示的数据
            },
            barGap: '200%',
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 1,
                    color: 'rgba(96,112,128,0.10)',
                    opacity: 1
                  },
                  {
                    offset: 0,
                    color: '#0E90FD',
                    opacity: 0.1
                  }
                ])
              }
            },
            data: data3
          }
        ]
      }
      let echart = document.getElementById('echart_d1')
      // if (this.myCharts01 !== '') {
      //   this.myCharts01.dispose()
      // }
      if (echart !== null) {
        this.myCharts01 = this.$echarts.init(echart)
        this.myCharts01.setOption(option)
        window.addEventListener('resize', () => {
          this.myCharts01.resize()
        })
      }
    },
    setEchart02 () {
      let max = 1
      // this.MonthlyWorkOrder.map(el => {
      //   if (Number(el.order_num) >= Number(max)) {
      //     max = Number(el.order_num)
      //   }
      // })
      this.PressOrderList.map(el => {
        if ((Number(el.planQty) + Number(el.realQty)) >= Number(max)) {
          max = Number(el.planQty) + Number(el.realQty)
        }
      })
      let option = {
        grid: {
          top: 0,
          left: 0,
          right: 58,
          bottom: 0,
          containLabel: true
        },
        dataZoom: [
          {
            show: false, // 为true滚动条出现
            type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动
            orient: 'vertical',
            startValue: 0, // 从头开始。
            endValue: 3 // end百分比显示范围，endValue具体显示几个数值
          }
        ],
        xAxis: {
          type: 'value',
          min: 0,
          max: max,
          boundaryGap: false,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: [8, 4],
              dashOffset: 4,
              color: '#8FABBF'
            }
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#8FABBF',
              fontSize: 16
              // align: 'center'
            }
          },
          formatter: '{value}'
        },
        yAxis: {
          type: 'category',
          inverse: true,
          axisLine: {
            show: true,
            lineStyle: {
              width: 2,
              color: '#8FABBF'
            }
          },
          splitNumber: 2,
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#8FABBF',
              fontSize: 14
            }
          },
          // data: this.MonthlyWorkOrder.map((it) => it.name)
          data: this.PressOrderList.map((it) => it.orderNumber)
        },
        series: [
          {
            name: '订单1',
            type: 'bar',
            stack: '总量',
            barWidth: 30,
            itemStyle: {
              normal: {
                // color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                //   {
                //     offset: 0,
                //     // color: '#f6b643'
                //     color: '#ed7d39'
                //     // color: '#EAAD24'
                //   },
                //   {
                //     offset: 1,
                //     color: '#ed7d39'
                //     // color: '#EAAD24'
                //   }
                // ], false),
                label: {
                  color: '#fff',
                  show: true,
                  position: 'inside'
                }
              }
            },
            // data: [8, 10, 20, 20, 10, 10, 20],
            // data: this.MonthlyWorkOrder.map((it) => it.guada_num)
            data: this.PressOrderList.map((it) => it.planQty)
          },
          {
            name: '订单2',
            type: 'bar',
            stack: '总量',
            itemStyle: {
              normal: {
                // color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                //   {
                //     offset: 0,
                //     color: '#94d153'
                //     // color: '#33CCCC'
                //   },
                //   {
                //     offset: 1,
                //     color: '#94d153'
                //     // color: '#33CCCC'
                //   }
                // ], false),
                label: {
                  color: '#333',
                  show: true,
                  position: 'inside'
                  // position: 'insideRight',
                }
              }
            },
            // data: [10, 20, 10, 10, 20, 20, 20],
            // data: this.MonthlyWorkOrder.map((it) => it.residue_num)
            data: this.PressOrderList.map((it) => it.realQty)
          }
          // {
          //   type: 'bar',
          //   barWidth: '16',
          //   zlevel: 1,
          //   label: {
          //     show: true,
          //     position: 'right', // 位置
          //     color: '#A7D6F4',
          //     fontSize: 14,
          //     distance: 15, // 距离
          //     formatter: '{c}' // 这里是数据展示的时候显示的数据
          //   },
          //   itemStyle: {
          //     normal: {
          //       color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
          //         {
          //           offset: 0,
          //           color: '#2DB796'
          //         },
          //         {
          //           offset: 1,
          //           color: '#6BBBA8'
          //         }
          //       ], false)
          //     }
          //   },
          //   data: this.MonthlyWorkOrder.map((it) => it.order_num)
          // },
          // {
          //   type: 'bar',
          //   barWidth: '16',
          //   zlevel: 1,
          //   label: {
          //     show: true,
          //     position: 'right', // 位置
          //     color: '#A7D6F4',
          //     fontSize: 14,
          //     distance: 15, // 距离
          //     formatter: '{c}' // 这里是数据展示的时候显示的数据
          //   },
          //   itemStyle: {
          //     normal: {
          //       color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
          //         {
          //           offset: 0,
          //           color: '#f6b643'
          //         },
          //         {
          //           offset: 1,
          //           color: '#ed7d39'
          //         }
          //       ], false)
          //     }
          //   },
          //   data: this.MonthlyWorkOrder.map((it) => it.guada_num)
          // }
        ]
      }
      let echart = document.getElementById('echart_d2')
      this.myCharts02 = this.$echarts.init(echart)
      this.myCharts02.setOption(option)
      this.autoMove(option)
      window.addEventListener('resize', () => {
        this.myCharts02.resize()
      })
    },
    autoMove (option) {
      this.timeOut = setInterval(() => {
        if (Number(option.dataZoom[0].endValue) === option.series[0].data.length - 1) {
          option.dataZoom[0].endValue = 3
          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.myCharts02.setOption(option)
      }, 2000)
    }
  }
}
</script>

<style lang="stylus" scoped>
// @import '~@css/mixin'
@import '../../css/mixin'
// @import '~@style/mixin'
.bg
  _wh(100%, 100%)
  overflow hidden
.container
  _wh(100%, calc(100% - 138px))
  padding 30px 25.09px 0
  overflow hidden
  clear both
.bottom
  _wh(100%, 38px)
  background center bottom / 1906px 100% url(../../images/screen1/bottom.png) no-repeat
.blue
  color #32C5FF !important
.green
  color #30EBC9 !important
.gray
  color #516282 !important
.yellow
  color #E2BB0E !important
.orange
  color #F96700 !important
.red
  color #FF0000 !important
.con1
  width 100%
  height 123px
  overflow hidden
  position relative
  background center center / 100% 100% url(../../images/screen1/sctj_top.png) no-repeat
  margin 5px 0
  text-align center
  display flex
  justify-content space-between
  align-items center
  .cbox
    width 30%
    display flex
    align-items center
    justify-content center
    div
      font-size 24px
      color #32C5FF
    .icon1
      display inline-block
      width 19px
      height 19px
      overflow hidden
      position relative
      background center center / 100% 100% url(../../images/screen1/sctj_icon.png) no-repeat
      margin-right 20px
    .num
      display flex
      align-items center
      .bg
        width 44px
        height 60px
        background rgba(50,197,255,0.10)
        display flex
        align-items center
        justify-content center
        margin-right 10px
        font-size 50px
        color #F7B502
      .dot
        background none
        width 14px
.center_wrapper
  _wh(100%, calc(50% - 69px))
  _fj(row)
.con2
  width 70%
  height calc(100% - 34px)
  .title
    // _wh(calc(100% - 34px), 32px)
    _wh(100%, 32px)
    margin 17px 0
    padding-left 18px
    _font(18px, 32px, #fff,,left)
    letter-spacing: 2px;
    text-shadow: 0 0 9px #159aff;
    background center center / 100% 100% url(../../images/screen1/bg_title_l.png) no-repeat
  .item_content_0
    // _wh(calc(100% - 44px), calc(100% - 112px))
    _wh(calc(100% - 44px), 100%)
    height 100%
    // margin 17px auto
    float right
.tltxt
  position relative
  top -3px
.dotIncon
  display inline-block
  width 26px
  height 26px
  position relative
  top 3px
  left -6px
  background center center / 100% 100% url(../../images/screen1/bg_title_tip.png) no-repeat
.con3
  width 30%
  height calc(100% - 34px)
  position relative
  .title
    font-family: "SourceHanSansCN";
    position absolute
    _wh(calc(100% - 34px), 32px)
    margin 17px 0
    right 0
    padding-left 18px
    _font(18px, 32px, #fff,,left)
    letter-spacing: 2px;
    text-shadow: 0 0 9px #159aff;
    background center center / 100% 100% url(../../images/screen1/bg_title_s.png) no-repeat
  .item_content_1
    _wh(calc(100% - 44px), 100%)
    margin 60px auto
    float right
// .con4
//   _wh(100%, calc(50% - 85px))
//   margin-top 66px
//   overflow hidden
//   position relative
//   .block_h2
//     _wh(calc(100% - 0px), 32px)
//     margin 17px 0 10px 0
//     padding-left 18px
//     background center center / 100% 100% url(../../images/screen1/bg_title_j.png) no-repeat
//     color #fff
//     h2
//       _font(16px, 32px, #fff,,left)
//   .list_scroll_title
//     _wh(calc(100% - 0px), 32px)
//     margin 0 auto
//     background #262F52
//     line-height 32px
//     color #fff
//     span
//       display inline-block
//       width 5%
//       text-align center
//       line-height 32px
//       font-size 14px
//       &:nth-child(4)
//         width 16%
//       &:nth-child(5)
//         width 6.5%
//       &:nth-child(6)
//         width 6.5%
//       &:nth-child(7)
//         width 8%
//       &:nth-child(14)
//         width 9%
//       &:nth-child(15)
//         width 9%
//   .content-block-scroll
//     _wh(calc(100% - 0px), calc(100% - 113px))
//     margin 0 auto 25px auto
//     overflow hidden
//   .content-block-scroll-ul
//     width 100%
//     li
//       width 100%
//       height 38px
//       _fj(row, center)
//       &:nth-child(2n)
//         background rgba(38,47,82,0.50)
//       span
//         display inline-block
//         width 5%
//         font-size 12px
//         // padding 0 10px
//         text-align center
//         line-height 38px
//         box-sizing border-box
//         &:nth-child(4)
//           width 16%
//         &:nth-child(5)
//           width 6.5%
//         &:nth-child(6)
//           width 6.5%
//         &:nth-child(7)
//           width 8%
//         &:nth-child(14)
//           width 9%
//         &:nth-child(15)
//           width 9%
.four_wrap
  // _wh(100%, calc(39% - 20px))
  margin-top 70px
  // 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 7%
      _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(7%, 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>
