<template>
  <div>
    <el-card>
      <el-date-picker
        v-model="selectionTimeValue"
        :picker-options="pickerOptions"
        value-format="yyyy-MM"
        type="monthrange"
        align="right"
        size="small"
        style="width: 260px"
        unlink-panels
        range-separator="~"
        start-placeholder="开始月份"
        end-placeholder="结束月份"
        @change="getProductItemValue1"/>
      <span style="margin-left: 340px;font-size: 20px;font-weight: bold">{{ TitlesDrawings }}</span>
      <div id="myChart7" style="width: 1500px; height: 800px; margin-bottom: 20px; margin-top: 20px"/>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '本月',
          onClick(picker) {
            picker.$emit('pick', [new Date(), new Date()])
          }
        }, {
          text: '今年至今',
          onClick(picker) {
            const end = new Date()
            const start = new Date(new Date().getFullYear(), 0)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近六个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setMonth(start.getMonth() - 6)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一年',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setMonth(start.getMonth() - 12)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近两年',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setMonth(start.getMonth() - 24)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三年',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setMonth(start.getMonth() - 36)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      TitlesDrawings: '精工车间月度工时统计趋势图',
      selectionTimeValue: ''
    }
  },
  methods: {
    getProductItemValue1() {
      if (this.selectionTimeValue) {
        var param = []
        param[0] = ['开始时间', this.selectionTimeValue[0]]
        param[1] = ['结束时间', this.selectionTimeValue[1]]
        var Data = this.CreateData('11', 'jy_车间月度工时统计_查询', param)
        this.ExecDatabase(Data).then(response => {
          this.xdata = []
          this.y1data = []
          this.y2data = []
          this.y3data = []
          if (response.data.length > 0) {
            for (let i = 0; i < response.data.length; i++) {
              this.xdata.push(response.data[i].日期)
              this.y1data.push(response.data[i].精工车间)
              this.y2data.push(response.data[i].通用装配)
              this.y3data.push(response.data[i].专机装配)
              if (!this.downdate) { this.downdate = 0 }
            }
          }
        }).then(() => {
          this.drawLine()
        })
      } else {
        this.$message.warning('请先选择时间')
      }
    },
    drawLine() {
      var chartDom = document.getElementById('myChart7')
      var myChart7 = echarts.init(chartDom)
      var option

      option = {
        color: ['rgb(169, 202, 232)', '#f40', 'rgb(100, 20, 232)'],
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: this.xdata
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          symbol: 'none',
          name: '精工车间',
          type: 'line',
          itemStyle: {
            normal: {
              label: {
                show: true
              },
              lineStyle: {
                width: 2,
                color: 'rgb(169,202,232)'
              }
            }
          },
          data: this.y1data
        }
        ],
        legend: {
          symbol: 'none',
          data: ['精工车间'],
          x: 'center',
          y: 'bottom'
        }
      }
      option && myChart7.setOption(option)
    }
  }
}
</script>

<style scoped>

</style>
