<template>
  <div class="app-container">
    <el-card>
      <el-row>
        <span style="margin-left: 10px">工位号：</span>
        <el-select v-model="stationNumberValue" placeholder="请选择工位号" size="small" style="width: 240px">
          <el-option
            v-for="item in stationNumber"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            size="mini"/>
        </el-select>
        <span>呼叫日期:</span>
        <el-date-picker v-model="startTime" size="small" type="daterange" value-format="yyyy-MM-dd" style="width:250px"/>
        <el-button type="success" icon="el-icon-search" size="small" style="margin-left: 20px;margin-top: 15px" @click="pageSize=15;fetchData();searchChart();searchChart2()">查询</el-button>
        <el-button :loading="exportLoading" :disabled="exportLoading" type="info" icon="el-icon-download" size="small" style="margin-left: 10px;margin-top: 15px" @click="exportExcel">Excel</el-button>
        <!--        <el-button type="primary" size="small" icon="el-icon-download" style="margin-left: 10px;margin-top: 15px" @click="handleDownload">导出EXCEL</el-button>-->
      </el-row>
      <el-row style="margin-top: 10px">
        <el-table
          :data="tableData"
          :header-cell-style="{background:'#eef1f6',color:'#606266'}"
          border
          element-loading-text="数据加载中"
          highlight-current-row
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.2)"
          stripe
          fit
          style="max-height: 540px;max-width: 1280px"
          height= "440px"
          size="small"
        >
          <el-table-column label="工位号" width="150" align="center">
            <template slot-scope="scope">
              {{ scope.row.工位号 }}
            </template>
          </el-table-column>
          <el-table-column label="呼叫类型" width="150" align="center">
            <template slot-scope="scope">
              {{ scope.row.呼叫类型 }}
            </template>
          </el-table-column>
          <el-table-column label="呼叫时间" width="150" align="center">
            <template slot-scope="scope">
              {{ scope.row.呼叫时间 }}
            </template>
          </el-table-column>

          <el-table-column label="呼叫人" width="150" align="center">
            <template slot-scope="scope">
              {{ scope.row.员工姓名 }}
            </template>
          </el-table-column>
          <el-table-column label="问题描述" min-width="80" align="center">
            <template slot-scope="scope">
              {{ scope.row.编号描述 }}
            </template>
          </el-table-column>
          <el-table-column label="解除时间" width="150" align="center">
            <template slot-scope="scope">
              {{ scope.row.复位时间 }}
            </template>
          </el-table-column>
          <el-table-column label="解除人员" width="150" align="center">
            <template slot-scope="scope">
              {{ scope.row.复位人员 }}
            </template>
          </el-table-column>
          <el-table-column label="持续时间(s)" width="150" align="center">
            <template slot-scope="scope">
              {{ scope.row.持续时间 }}
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            :current-page="currentPage"
            :page-sizes="[15, 30, 40, 50]"
            :total="totalNum"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"/>
        </div>
      </el-row>
      <el-row style="margin-top: 10px;width: 1280px;display: flex;">
        <div id="myChart" style="width: 880px;height: 400px;margin-top: 20px;"/>
        <div id="myChart2" style="width: 400px;height: 400px;margin-top: 20px;"/>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { getNowTime2 } from '@/utils/tool'
import request from '@/utils/request'
export default {
  data() {
    return {
      startTime: [getNowTime2(), getNowTime2()],
      tableData: [],
      listLoading: false,
      currentPage: 1,
      pageSize: 15,
      pageCurrent: 1,
      totalNum: 0,
      downloadLoading: '',
      exportLoading: false,
      tableData_excel: [],
      stationNumberValue: '',
      stationNumber: [],
      colorchart: []
    }
  },
  watch: {
  },
  created() {
    this.getStationNumber()
    // this.measureSelect()
  },
  methods: {
    getStationNumber() {
      this.stationNumber = []
      var param = []
      var Data = this.CreateData('11', 'MES_计划BOM_工位与名称_查询', param)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.stationNumber.push({
            label: `【${response.data[i].工位号}】${response.data[i].工位名称}`,
            value: response.data[i].工位号
          })
        }
        if (response.data.length > 0) this.stationNumberValue = response.data[0].工位号
      })
    },
    getParam(pageCurrent, pageSize) {
      var param = []
      param[0] = ['开始时间', this.startTime[0] + ' 00:00:00']
      param[1] = ['结束时间', this.startTime[1] + ' 23:59:59']
      param[2] = ['工位号', this.stationNumberValue]
      param[3] = ['PageCurrent', pageCurrent]
      param[4] = ['PageSize', pageSize]
      param[5] = ['PageCount', 1000, 'int', '1']
      param[6] = ['ItemCount', 1000, 'int', '1']
      return param
    },
    fetchData() {
      this.listLoading = true
      var param = this.getParam(this.pageCurrent, this.pageSize)
      var Data = this.CreateData('11', 'ANDON_工位呼叫_综合查询', param)
      this.ExecDatabase(Data).then(response => {
        this.tableData = response.data.result
        this.totalNum = parseInt(response.data.output[0].ItemCount)
        this.listLoading = false
      })
    },
    // 分页功能改变显示数量
    handleSizeChange(val) {
      this.pageSize = val
      this.fetchData()
    },
    // 分页功能改变当前页
    handleCurrentChange(val) {
      this.pageCurrent = val
      this.fetchData()
    },
    exportExcel() {
      if (this.tableData.length === 0) {
        this.$message.warning('暂无数据')
        return
      }
      var exportData = JSON.parse(this.CreateData('2005', 'ANDON_工位呼叫_综合查询', this.getParam(1, 99999999)))
      exportData.exportFileName = '工位呼叫统计'
      exportData.exportColumns = '工位号,呼叫类型,呼叫时间,员工姓名=呼叫人,编号描述=问题描述,复位时间=解除时间,复位人员=解除人员,持续时间=持续时间(s)'
      this.runExcelExport(JSON.stringify(exportData), 'exportLoading')
    },
    // 导出excel
    handleDownload() {
      this.downloadLoading = true
      // const tHeader = ['呼叫类型名称', '呼叫原因名称', '呼叫原因名称_二级', '工位名称', '处理状态代码', '发动机流水号', '呼叫备注', '呼叫人员呼叫时间']
      // const filterVal = ['呼叫类型名称', '呼叫原因名称', '呼叫原因名称_二级', '工位名称', '处理状态代码', '发动机流水号', '呼叫备注', '呼叫人员呼叫时间']
      // const list = this.tableData_excel
      request({
        url: '',
        method: 'post',
        data: {
          type: '3',
          name: `  select * from [安东_安东呼叫详情_主记录_视图]
           where 三级人员呼叫时间>='${this.startTime}'  and 三级人员呼叫时间<= '${this.endTime}' `
        }
      }).then(response => {
        this.tableData_excel = []
        if (response.data.length !== 0) {
          this.tableData_excel = response.data
          console.log(response, 222)
          this.downloadLoading = true
          import('@/vendor/Export2Excel').then(excel => {
            const tHeader = ['呼叫类型名称', '呼叫原因名称', '呼叫原因名称_二级', '工位名称', '处理状态', '发动机流水号', '呼叫备注', '呼叫人员呼叫时间']
            const filterVal = ['呼叫类型名称', '呼叫原因名称', '呼叫原因名称_二级', '工位名称', '处理状态名称', '发动机流水号', '呼叫备注', '呼叫人员呼叫时间']
            const list = this.tableData_excel
            const data = this.formatJson(filterVal, list)
            excel.export_json_to_excel({
              header: tHeader,
              data,
              filename: 'andon统计表',
              autoWidth: this.autoWidth,
              bookType: this.bookType
            })
            this.downloadLoading = false
          })
        } else {
          this.$message.error('无数据无法导出')
        }
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        return v[j]
      }))
    },
    // 获取图形数据
    drawLine(res) {
      const myChart = this.$echarts.init(document.getElementById('myChart'))
      const xData = []
      const yData = []
      const series = []
      for (let i = 0; i < res.length; i++) {
        xData.push(res[i].编号描述)
      }
      for (let i = 0; i < res.length; i++) {
        yData.push(res[i].数量)
      }
      for (let i = 0; i < res.length; i++) {
        series.push({
          value: res[i].数量,
          name: res[i].编号描述
        })
      }
      var colorList = []
      const ss = {
        物料ANDON: '#EEAD0E',
        质量ANDON: '#6959CD',
        设备ANDON: '#DC143C',
        技术ANDON: '#436EEE'
      }
      for (let i = 0; i < res.length; i++) {
        colorList.push(ss[res[i].呼叫类型名称])
      }
      this.colorchart = colorList
      // colorList = ['#C33531','#EFE42A','#64BD3D','#EE9201','#29AAE3', '#B74AE5','#0AAF9F','#E89589','#16A085','#4A235A','#C39BD3 ','#F9E79F','#BA4A00','#ECF0F1','#616A6B','#EAF2F8','#4A235A','#3498DB' ];
      myChart.clear()
      myChart.setOption({
        title: {
          left: 'center',
          text: '呼叫次数统计'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '12%',
          bottom: '3%',
          containLabel: true,
          show: true
        },
        xAxis: [
          {
            name: '呼叫类型',
            type: 'category',
            data: xData,
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              interval: 0,
              rotate: 45 // 旋转角度
            }
          }
        ],
        yAxis: [
          {
            name: '呼叫次数(次)',
            type: 'value'
          }
        ],
        series: [
          {
            name: '呼叫次数',
            type: 'bar',
            barWidth: '60%',
            data: yData,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'top'
                },
                labelLine: { show: true },
                color: '#3398db'
              }
            }
          }
        ]
      })
    },
    searchChart() {
      var param = []
      param[0] = ['开始时间', this.startTime[0] + ' 00:00:00']
      param[1] = ['结束时间', this.startTime[1] + ' 23:59:59']
      param[2] = ['工位号', this.stationNumberValue]
      var Data = this.CreateData('11', 'ANDON_工位呼叫_综合查询_统计次数', param)
      this.ExecDatabase(Data).then(response => {
        this.drawLine(response.data)
      })
    },
    searchChart2() {
      var param = []
      param[0] = ['开始时间', this.startTime[0] + ' 00:00:00']
      param[1] = ['结束时间', this.startTime[1] + ' 23:59:59']
      param[2] = ['工位号', this.stationNumberValue]
      var Data = this.CreateData('11', 'ANDON_工位呼叫_综合查询_统计次数_按ANDON类型', param)
      this.ExecDatabase(Data).then(response => {
        this.drawLine2(response.data)
      })
    },
    drawLine2(res) {
      const myChart2 = this.$echarts.init(document.getElementById('myChart2'))
      const xData = []
      const yData = []
      const series = []
      for (let i = 0; i < res.length; i++) {
        xData.push(res[i].呼叫类型)
      }
      for (let i = 0; i < res.length; i++) {
        yData.push(res[i].数量)
      }
      for (let i = 0; i < res.length; i++) {
        series.push({
          value: res[i].数量,
          name: res[i].呼叫类型
        })
      }
      // 随机颜色方式
      var colorList = []
      const ss = {
        物料ANDON: '#EEAD0E',
        质量ANDON: '#6959CD',
        设备ANDON: '#DC143C',
        技术ANDON: '#436EEE'
      }
      for (let i = 0; i < res.length; i++) {
        colorList.push(ss[res[i].呼叫类型])
      }
      this.colorchart = colorList
      myChart2.clear()
      myChart2.setOption({
        title: {
          text: '呼叫类型分析',
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: xData
        },
        series: [
          {
            name: '呼叫类型',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: series,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
              normal: {
                label: {
                  show: true,
                  formatter: '{c}次'
                },
                labelLine: { show: true },
                color: function(params) {
                  return colorList[params.dataIndex]
                }
              }
            }
          }
        ]
      })
    }
  }
}
</script>

<style scoped>
span{
  /*margin: 10px 0px 10px 10px;*/
}
</style>
