<template>
  <section>
    <t-header index='1'></t-header>
    <section class="content">
      <div class="con1">
        <!-- <div class="c-title c-left"> -->
        <div class="cbox">
          <!-- <span class="icon1"></span> -->
          <div>今日压制量：</div>
          <div class="num">
            <div class="bg" v-for="item in showNum1" :key="item" :class="{dot: item === '.'}">{{item}}</div>
          </div>
          <div>吨</div>
        </div>
        <!-- <div class="c-title c-right"> -->
        <div class="cbox">
          <div>今日干燥量：</div>
          <div class="num">
            <div class="bg" v-for="item in showNum2" :key="item" :class="{dot: item === '.'}">{{item}}</div>
          </div>
          <div>吨</div>
        </div>
        <!-- <div class="c-title c-right" style="marginLeft: 1rem;"> -->
        <div class="cbox">
          <div>今日成品量：</div>
          <div class="num">
            <div class="bg" v-for="item in showNum3" :key="item" :class="{dot: item === '.'}">{{item}}</div>
          </div>
          <div>吨</div>
        </div>
      </div>
      <div class="center_wrapper" style="display:flex">
        <div class="con2">
          <div class="title">混碾生产</div>
          <div class="item_content_0">
            <div id="echart_d01" style="width: 100%; height: 100%"></div>
          </div>
        </div>
        <div class="con3" style="position: relative">
          <div class="title">成品计划完成情况</div>
          <div class="item_content_1">
            <div id="echart_d05" style="width: 100%; height: 100%"></div>
          </div>
        </div>
      </div>
      <div class="con4">
        <div class="block_h2">
          <h2>生产任务</h2>
        </div>
        <div class="list_scroll_title">
          <span>设备</span><span>物料编码</span><span>计划数量/重量</span><span>实际数量/重量</span><span>合格数量/重量</span><span>不合格数量/重量</span><span>生产状态</span><span>开始时间</span><span>结束时间</span>
        </div>
        <vue-seamless-scroll :data="taskData" :class-option="classOption" class="content-block-scroll">
          <ul class="content-block-scroll-ul">
            <li v-for="(e, i) in taskData" :key="i">
              <span :class="{blue:e.order_status ==='1',yellow:e.order_status ==='2',green:e.order_status ==='3',red:e.order_status ==='4',orange:e.order_status ==='5'}">{{e.device_name}}</span><span :class="{blue:e.order_status ==='1',yellow:e.order_status ==='2',green:e.order_status ==='3',red:e.order_status ==='4',orange:e.order_status ==='5'}">{{e.material_code}}</span><span :class="{blue:e.order_status ==='1',yellow:e.order_status ==='2',green:e.order_status ==='3',red:e.order_status ==='4',orange:e.order_status ==='5'}">{{e.plan_qty}}</span><span :class="{blue:e.order_status ==='1',yellow:e.order_status ==='2',green:e.order_status ==='3',red:e.order_status ==='4',orange:e.order_status ==='5'}">{{e.real_qty}}</span><span :class="{blue:e.order_status ==='1',yellow:e.order_status ==='2',green:e.order_status ==='3',red:e.order_status ==='4',orange:e.order_status ==='5'}">{{e.qualified_qty}}</span><span :class="{blue:e.order_status ==='1',yellow:e.order_status ==='2',green:e.order_status ==='3',red:e.order_status ==='4',orange:e.order_status ==='5'}">{{e.unqualified_qty}}</span><span :class="{blue:e.order_status ==='1',yellow:e.order_status ==='2',green:e.order_status ==='3',red:e.order_status ==='4',orange:e.order_status ==='5'}">{{e.order_status_name}}</span><span :class="{blue:e.order_status ==='1',yellow:e.order_status ==='2',green:e.order_status ==='3',red:e.order_status ==='4',orange:e.order_status ==='5'}">{{e.realproducestart_date}}</span><span :class="{blue:e.order_status ==='1',yellow:e.order_status ==='2',green:e.order_status ==='3',red:e.order_status ==='4',orange:e.order_status ==='5'}">{{e.realproduceend_date}}</span>
            </li>
          </ul>
        </vue-seamless-scroll>
      </div>
    </section>
  </section>
</template>

<script>
import THeader from '@components/header.vue'
import * as echarts from 'echarts'
import { productionStatistics } from '@js/getData1'
export default {
  name: 'ProdCount',
  components: {
    THeader
  },
  data () {
    return {
      interTime: this.$store.getters.setTime,
      timer: null,
      showNum1: '',
      showNum2: '',
      showNum3: '',
      showNum4: '',
      myCharts05: '',
      materData: [],
      deviceData: [],
      resData: {},
      taskData: [],
      realqty: '',
      planqty: ''
    }
  },
  computed: {
    classOption () {
      // return {
      //   step: 0.4,
      //   limitMoveNum: 6
      // }
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 3, // 开始无缝滚动的数据量 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)
  },
  methods: {
    refresh () {
      this.timer = setInterval(() => {
        this.initData()
      }, this.interTime)
    },
    async initData () {
      let res = await productionStatistics()
      this.resData = res.result
      this.showNum1 = (res.result.finishedRes[0].real_qty + '').split('')
      this.showNum2 = (res.result.finishedRes[1].real_qty + '').split('')
      this.showNum3 = (res.result.finishedRes[2].real_qty + '').split('')
      this.taskData = [...res.result.productionTask]
      this.setEchart05()
      this.realqty = res.result.materialTask[0].real_qty
      this.planqty = res.result.materialTask[0].plan_qty
      this.setEchart01()
      // 五种状态：未成产、已下发、生产中、停止、完成
    },
    setEchart01 () {
      let data = [
        {
          value: 10,
          name: '1号砖'
        },
        {
          value: 20,
          name: '2号砖'
        },
        {
          value: 30,
          name: '3号砖'
        },
        {
          value: 40,
          name: '4号砖'
        },
        {
          value: 50,
          name: '5号砖'
        },
        {
          value: 60,
          name: '6号砖'
        }
      ]
      var option = {
        legend: {
          orient: 'horizontal',
          bottom: '1%',
          textStyle: {
            color: '#fff',
            fontWeight: 'bold',
            fontSize: 14
          },
          itemGap: 30.86,
          itemWidth: 14.16,
          itemHeight: 7.38,
          data: ['1号砖', '2号砖', '3号砖', '4号砖', '5号砖', '6号砖']
        },
        color: ['#0966E8', '#07E083', '#e7E255', '#cda02e', '#01E38a', '#57c01d'],
        series: [
          {
            type: 'pie',
            radius: ['43%', '70%'],
            label: {
              normal: {
                // position: 'inner',
                formatter: '{d}%',
                textStyle: {
                  color: '#fff',
                  fontWeight: 'bold',
                  fontSize: 14
                }
              }
            },
            labelLine: {
              show: true
            },
            data: data
          }
        ]
      }
      let echart = document.getElementById('echart_d01')
      this.myCharts01 = this.$echarts.init(echart)
      this.myCharts01.setOption(option)
      window.addEventListener('resize', () => {
        this.myCharts01.resize()
      })
    },
    setEchart05 () {
      var data05d0 = []
      var data05d1 = []
      var data05d2 = []
      this.resData.planRes.map(el => {
        data05d0.push(el.workorder_procedure)
        data05d1.push(el.plan_qty)
        data05d2.push(el.real_qty)
      })
      let option = {
        grid: {
          top: 50,
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        legend: {
          icon: 'rect',
          textStyle: {
            color: '#fff',
            fontSize: 14,
            lineHeight: 14
          },
          itemGap: 30.86,
          itemWidth: 14.16,
          itemHeight: 7.38,
          data: [{name: '计划生产数量', itemStyle: {color: '#0E90FD'}}, {name: '已完成数量', itemStyle: {color: '#EAAD24'}}]
        },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 2,
              color: '#8FABBF'
            }
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#8FABBF',
              fontSize: 14
            }
          },
          data: data05d0
          // data: ['压制', '干燥', '包装']
        },
        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',
              opacity: 0.2
            }
          }
        },
        series: [
          {
            name: '计划生产数量',
            type: 'bar',
            barWidth: '28',
            barGap: '100%', // 柱图间距
            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: data05d1
            // data: ['390', '390', '390']
          },
          {
            name: '已完成数量',
            type: 'bar',
            barWidth: '28',
            barGap: '100%', // 柱图间距
            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: data05d2
            // data: ['210', '210', '210']
          }
        ]
      }
      let echart = document.getElementById('echart_d05')
      if (this.myCharts05 !== '') {
        this.myCharts05.dispose()
      }
      if (echart !== null) {
        this.myCharts05 = this.$echarts.init(echart)
        this.myCharts05.setOption(option)
        window.addEventListener('resize', () => {
          this.myCharts05.resize()
        })
      }
    },
    getEchart1 () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('echart_d1'))
      var finishArr = []
      var unFinishArr = []
      var materArr = []
      this.materData.map(el => {
        finishArr.push(el.finished_qty)
        unFinishArr.push(el.unfinished_qty)
        materArr.push(el.material_code)
      })
      // 指定图表的配置项和数据
      var option = {
        legend: {
          top: 20,
          right: 10,
          textStyle: {
            color: '#ffffff',
            fontSize: 12,
            lineHeight: 20
          },
          itemGap: 20,
          itemHeight: 8,
          data: ['完成', '未完成']
        },
        title: {
          text: '半成品计划完成率', // 标题
          top: '12px',
          left: '20px',
          textStyle: {
            color: '#fff',
            fontSize: '16'
          }
        },
        // tooltip: {
        //   trigger: 'axis'
        // },
        xAxis: {
          // data: ['1号砖', '2号砖', '3号砖', '4号砖'],
          data: materArr,
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          splitLine: {
            show: false
          }
        },
        // xAxis: {
        //   type: 'category',
        //   axisLine: {
        //     lineStyle: {
        //       color: '#fff'
        //     }
        //   }
        // },
        yAxis: {
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          splitLine: {
            show: false
          }
        },
        series: [{
          name: '未完成',
          type: 'bar',
          barWidth: 14,
          stack: '完成情况',
          // data: [15, 20, 36, 10],
          data: unFinishArr,
          itemStyle: {
            normal: {
              color: '#32C5FF'
              // label: {
              //   show: true,
              //   position: 'inside',
              //   formatter: function (params) {
              //     if (params.value !== 0) {
              //       return params.value
              //     } else {
              //       return ''
              //     }
              //   }
              // }
            }
          }
        }, {
          name: '完成',
          type: 'bar',
          barWidth: 14,
          stack: '完成情况',
          // data: [40, 57, 18, 20],
          data: finishArr,
          itemStyle: {
            normal: {
              color: '#F7B502'
              // label: {
              //   show: true,
              //   position: 'inside',
              //   formatter: function (params) {
              //     if (params.value !== 0) {
              //       return params.value
              //     } else {
              //       return ''
              //     }
              //   }
              // }
            }
          }
        }]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    },
    getEchart2 () {
      // 基于准备好的dom，初始化echarts实例
      // var lineData = [4, 9, 8, 6, 8, 7, 3, 8]
      // var barData = [50002, 34120, 48370, 57370, 67582, 90892, 32321, 57370]
      // var xData = ['1号机', '2号机', '3号机', '4号机', '5号机', '6号机', '7号机', '8号机']
      var lineData = []
      var barData = []
      var xData = []
      this.deviceData.map(el => {
        console.log(el.produce_qty)
        lineData.push(el.produce_qty)
        barData.push(el.produce_num)
        xData.push(el.device_name)
      })
      var myChart = echarts.init(document.getElementById('echarts2'))
      var option = {
        legend: {
          top: 20,
          right: 10,
          textStyle: {
            color: '#ffffff',
            fontSize: 12,
            lineHeight: 20
          },
          itemGap: 20,
          itemHeight: 8,
          data: ['数量', '重量']
        },
        // tooltip: {
        //   trigger: 'axis'
        // },
        xAxis: {
          // name: '设备',
          type: 'category',
          data: xData,
          nameGap: 60, // 坐标轴名称与轴线之间的距离。
          axisLine: {
            show: true,
            lineStyle: {
              color: '#fff'
            }
          },
          axisLabel: {
            color: '#fff'
          }
        },
        yAxis: [
          {
            // name: '交易额（亿元）',
            type: 'value',
            min: 0,
            // max: 100000,
            max: Math.max.apply(null, barData),
            splitNumber: 10,
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#315070'],
                width: 1,
                type: 'dotted'
              }
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#fff'
              }
            }
          },
          {
            // name: '增长率',
            type: 'value',
            min: 0,
            // max: 10,
            max: Math.max.apply(null, lineData),
            splitNumber: 10,
            // position: 'right',
            // formatter: '{value}',
            axisLine: {
              show: false,
              lineStyle: {
                color: '#fff'
              }
            },
            itemStyle: {
              color: '#F7B502'
            }
          }
        ],
        series: [
          {
            name: '数量',
            type: 'bar',
            data: barData,
            barWidth: 10,
            itemStyle: {
              color: '#32C5FF'
            }
          },
          {
            name: '重量',
            type: 'line',
            symbolSize: 12, // 拐点圆的大小
            symbol: 'circle',
            data: lineData,
            lineStyle: {
              color: '#F7B502'
            },
            itemStyle: {
              normal: {
                color: '#F7B502'
              }
            },
            yAxisIndex: 1
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@css/mixin'
.content
  _wh(calc(100% - 108px), calc(100% - 108px))
  margin 12px auto
.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(../assets/images/sctj_top.png) no-repeat
  margin-bottom 15px
  text-align center
  display flex
  justify-content space-between
  align-items center
  // .c-title
  //   float left
  //   // line-height 1.23rem
  //   line-height 123px
  // .c-left
  //   margin 0 1.3rem 0 1.3rem
  //   display flex
  //   align-items center
  // .c-right
  //   // margin 0 2.9rem 0 2.5rem
  //   display flex
  //   align-items center
  .cbox
    width 30%
    display flex
    align-items center
    justify-content center
    div
      font-size .24rem
      color #32C5FF
    .icon1
      display inline-block
      width .19rem
      height .19rem
      overflow hidden
      position relative
      background center center / 100% 100% url(../assets/images/sctj_icon.png) no-repeat
      margin-right .2rem
    .num
      display flex
      align-items center
      .bg
        width .44rem
        height .6rem
        background rgba(50,197,255,0.10)
        display flex
        align-items center
        justify-content center
        margin-right .1rem
        font-size .5rem
        color #F7B502
      .dot
        background none
        width .14rem
.center_wrapper
  _wh(100%, calc(50% - 69px))
  _fj(row)
.con2
  width 40%
  height 100%
  overflow hidden
  position relative
  background center center / 100% 100% url(../assets/images/sctj_bg1.png) no-repeat
  .title
    _wh(calc(100% - 34px), 22px)
    margin 17px
    _font(16px, 22px, #fff,,left)
  .desc
    _wh(100%, 22px)
    _fj(row, center)
    div
      _font(16px, 22px, #fff,,)
      span
        font-size 16px
        color #F7B502
        margin 0 30px
  .item_content_0
    _wh(calc(100% - 44px), calc(100% - 112px))
    margin 17px auto
.con3
  width calc(60% - 15px)
  height 100%
  overflow hidden
  position relative
  background center center / 100% 100% url(../assets/images/sctj_bg2.png) no-repeat
  .title
    _wh(calc(100% - 34px), 22px)
    margin 17px
    _font(16px, 22px, #fff,,left)
  .item_content_1
    _wh(calc(100% - 44px), calc(100% - 90px))
    margin 17px auto
.con4
  _wh(100%, calc(50% - 85px))
  margin-top 16px
  overflow hidden
  position relative
  background center center / 100% 100% url(../assets/images/sctj_bg3.png) no-repeat
  .block_h2
    _wh(calc(100% - 34px), 22px)
    margin 17px auto
    h2
      _font(16px, 22px, #fff,,left)
  .list_scroll_title
    _wh(calc(100% - 50px), 32px)
    margin 0 auto
    background #262F52
    line-height 32px
    span
      display inline-block
      width 11%
      text-align center
      line-height 32px
      // float left
      font-size 14px
      &:nth-child(1)
        width 8%
      &:nth-child(2)
        width 15%
  .content-block-scroll
    _wh(calc(100% - 50px), 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 11%
        font-size 12px
        // padding 0 .1rem
        text-align center
        line-height 38px
        box-sizing border-box
        // float left
        &:nth-child(1)
          width 8%
        &:nth-child(2)
          width 15%
</style>
