<template>
  <div>
    <el-card>
      <span class="show-text">工位:</span>
      <el-select
        v-model="OpName"
        filterable
        placeholder="请选择工位号"
        size="small"
        style="width: 200px">
        <el-option
          v-for="item in OpNameList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          size="mini"/>
      </el-select>
      <span class="show-text">采集时间:</span>
      <el-date-picker
        v-model="collectionTime"
        :clearable="false"
        :picker-options="pickerOptions"
        end-placeholder="结束时间"
        format="yyyy-MM-dd HH:mm:ss"
        popper-class="virtual-cell-time-picker"
        range-separator="-"
        start-placeholder="开始时间"
        style="width: 380px;margin-right: 16px;vertical-align: top"
        type="datetimerange"
        value-format="yyyy-MM-dd HH:mm:ss"/>
      <el-button :disabled="loading" icon="el-icon-search" type="primary" @click="searchTable()">查询</el-button>
      <div style="margin-top: 26px;display: flex">
        <div>
          <el-table
            v-loading="loading"
            :data="tableData"
            :header-row-style="{fontSize: '18px',fontFamily:'MiSans Demibold',height: '64px',backgroundColor:'#fff'}"
            :row-style="{fontSize: '16px',fontFamily:'MiSans Regular',height: '64px'}"
            border
            element-loading-background="rgba(0, 0, 0, 0.2)"
            element-loading-spinner="el-icon-loading"
            element-loading-text="数据加载中"
            height="707"
            size="mini"
            style="width: 1001px"
            tooltip-effect="dark">
            <el-table-column align="center" label=" " type="index" width="100"/>
            <el-table-column align="center" label="工位号" width="150">
              <template slot-scope="scope">
                {{ scope.row.工位号 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="统计日期">
              <template slot-scope="scope">
                {{ scope.row.操作日期 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="合格数">
              <template slot-scope="scope">
                {{ scope.row.合格 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="不合格数">
              <template slot-scope="scope">
                {{ scope.row.不合格 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="合格率">
              <template slot-scope="scope">
                {{ Number(scope.row.合格率).toFixed(3).replace(/(\.\d*?[1-9])0+$|\.0*$/, '$1') }}
              </template>
            </el-table-column>
          </el-table>
          <div class="block" style="margin-top: 32px;">
            <el-pagination
              v-if="!loading"
              :current-page="pageList"
              :page-size="pageSize"
              :page-sizes="[50, 100, 200, 300]"
              :total="total"
              background
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"/>
          </div>
        </div>
        <div id="Echarts" style="width: 1200px; height: 640px;"/>
      </div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      OpName: '',
      OpNameList: '',
      showEchartsType: '1',
      collectionTime: [],
      tableDataExcel: [],
      loading: false,
      tableData: [],
      total: 0, // 总条数
      pageSize: 50, // 每页显示条数
      pageList: 1 // 后台获取页,
    }
  },
  created() {
    this.getOpName()
    var now = new Date()
    var start = new Date(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate() - 7, 0, 0, 0)).toISOString().replace('T', ' ').replace('.000Z', '')
    var end = new Date(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59)).toISOString().replace('T', ' ').replace('.000Z', '')
    this.collectionTime = [start, end]
  },
  methods: {
    // 查询工位号
    getOpName() {
      var param = []
      var Data = this.CreateData('11', '工位与名称_查询', param)
      this.ExecDatabase(Data).then(response => {
        this.OpNameList = []
        for (const item of response.data) {
          this.OpNameList.push({ label: item.工位号, value: item.工位号 })
        }
        this.OpName = this.OpNameList[0].value
        this.searchTable()
      })
    },
    // 查询
    searchTable() {
      if (this.collectionTime.length === 0) {
        this.$message.error('请选择需要查询的时间段！')
        return
      }
      this.loading = true
      this.tableData = []
      var param = []
      param[0] = ['工位号', this.OpName]
      param[1] = ['开始时间', this.collectionTime[0]]
      param[2] = ['结束时间', this.collectionTime[1]]
      param[3] = ['PageCurrent', this.pageList]
      param[4] = ['PageSize', this.pageSize]
      param[5] = ['PageCount', '1111', 'int', '1']
      param[6] = ['ItemCount', '1111', 'int', '1']
      var Data = this.CreateData('11', '日产量_视图_分页_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length !== 0) {
          this.tableData = response.data.result
        }
        this.total = parseInt(response.data.output[0].ItemCount)
        this.loading = false
        this.initEcharts()
      })
    },
    initEcharts() {
      const data = this.tableData
      const obj = {}
      for (const item of data) {
        if (item.操作日期 in obj) {
          obj[item.操作日期].合格 += item.合格
          obj[item.操作日期].不合格 += item.不合格
        } else {
          obj[item.操作日期] = { 合格: item.合格, 不合格: item.不合格 }
        }
      }
      const xAxis = []
      const y1Axis = []
      const y2Axis = []
      for (const key in obj) {
        xAxis.push(key)
        y1Axis.push(obj[key].合格)
        y2Axis.push(obj[key].不合格)
      }
      console.log(xAxis, y1Axis, y2Axis)
      const doc = echarts.init(document.getElementById('Echarts'))
      doc.clear()
      doc.setOption({
        title: {
          text: '日产量',
          left: 'center',
          textStyle: {
            fontSize: '30'
          }
        },
        legend: {
          top: '5%',
          right: '5%', // 将图例放置在右侧
          icon: 'circle', // 设置图例的标识样式为实心圆点
          itemWidth: 10, // 设置图例标记的宽度
          itemHeight: 10, // 设置图例标记的高度
          textStyle: {
            fontSize: 20,
            color: function(params) {
              // 获取对应的系列项
              var series = option.series[0].data
              for (var i = 0; i < series.length; i++) {
                if (series[i].name === params) {
                  // 返回对应系列项的颜色
                  return series[i].itemStyle.color
                }
              }
              return '#000' // 默认颜色，如果没有匹配到
            }
          }
        },
        grid: {
          top: '15%',
          left: '12%',
          right: '5%',
          bottom: '20%'
        },
        tooltip: {
          trigger: 'item'
        },
        xAxis: {
          type: 'category',
          data: xAxis,
          axisLabel: {
            interval: 0, // 显示所有标签
            fontSize: 15, // 设置x轴文字的大小
            color: '#606270'
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed' // 分隔线类型设置为虚线
            }
          },
          axisLabel: {
            fontSize: 20, // 设置x轴文字的大小
            color: '#606270'
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: true
          }
        },
        series: [
          {
            name: '合格数量',
            data: y1Axis,
            type: 'bar',
            itemStyle: { color: '#4874cb' },
            barWidth: 20
          },
          {
            name: '不合格数量',
            data: y2Axis,
            type: 'bar',
            itemStyle: { color: '#ee822f' },
            barWidth: 20
          }
        ]
      })
    },
    // 导出数据
    searchTableALL() {
      if (this.collectionTime.length === 0) {
        this.$message.error('请选择需要查询的时间段！')
        return
      }
      if (this.tableData.length === 0) {
        this.$message.error('请查询需要导出的数据！')
        return
      }
      var param = []
      if (this.tableData.length === 0) {
        this.$message.warning('请查询要导出的数据')
        return
      }
      param[0] = ['TagName', this.TagName]
      param[1] = ['开始时间', this.collectionTime[0]]
      param[2] = ['结束时间', this.collectionTime[1]]
      var Data = this.CreateData('2003', '故障数据_查询_导出', param)
      const blob = 'data:image/gif;base64,R0lGODlhCQACAIAAAMzMzP///yH5BAEAAAEALAAAAAAJAAIAAAIEjI9pUAA7'
      this.exportExcel_NPOI(Data, blob)
    },
    // 分页
    handleSizeChange(val) {
      this.pageList = 1
      this.pageSize = val
      this.searchTable()
    },
    handleCurrentChange(val) {
      this.pageList = val
      this.searchTable()
    }
  }
}
</script>
