<template>
  <div class="app-container">
    <el-card>
      <el-row>
        <span style="margin-left: 10px">时间：</span>
        <el-date-picker
          v-model="dateTime"
          :clearable="false"
          size="small"
          type="daterange"
          align="center"
          style="width: 250px;"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="searchData();searchChart()"
        />
        <span>工位名称:</span>
        <el-select
          v-model="opName"
          placeholder="工位号"
          size="small"
          style="width: 150px"
          @change="searchData();searchChart()"
          @clear="opNameClear()">
          <el-option
            v-for="item in opNames"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <!--        <span>零件号:</span>-->
        <!--        <el-select v-model="model" placeholder="请选择零件号" filterable clearable size="small" style="width: 150px">-->
        <!--          <el-option-->
        <!--            v-for="item in models"-->
        <!--            :key="item.value"-->
        <!--            :label="item.label"-->
        <!--            :value="item.value"-->
        <!--            size="mini"/>-->
        <!--        </el-select>-->
      </el-row>
      <el-row style="margin-top: 10px">
        <span>测量名称:</span>
        <el-select
          v-model="measureName"
          placeholder="请选择测量位置"
          size="small"
          clearable
          style="width: 150px">
          <el-option
            v-for="item in measureNames"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            size="mini"/>
        </el-select>
        <span>测量内容:</span>
        <el-select v-model="measureContent" placeholder="测量内容" clearable size="small" style="width: 150px;">
          <el-option
            v-for="item in measureContents"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
        <span>样本容量:</span>
        <el-select v-model="sampleSize" placeholder="样本容量" size="small" style="width: 70px;">
          <el-option
            v-for="item in sampleSizes"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
        <span>样本个数:</span>
        <el-select v-model="sampleNumber" placeholder="样本个数" size="small" style="width: 70px;">
          <el-option
            v-for="item in sampleNumbers"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
        <el-button
          type="primary"
          plain
          size="small"
          icon="el-icon-search"
          style="margin-left: 5px"
          @click="pageSize = 20 ;pageCurrent = 1;searchData();searchChart()">搜索
        </el-button>
        <el-button
          type="info"
          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">
        <div style="border: 1px solid #EBEEF5;width: 100%;height: 400px;margin-top: 7px">
          <div id="myChart" style="width: 100%;height: 380px;float: right;"/>
        </div>
        <el-table
          :data="tableData"
          border
          element-loading-text="Loading"
          fit
          class="main"
          height="350px"
          style="width: 100%;"
          size="small">
          <el-table-column label="序号" prop="" width="80" align="center">
            <template slot-scope="scope" align="left">
              <span v-text="getIndex(scope.$index)"/>
            </template>
          </el-table-column>
          <el-table-column label="发动机号" min-width="200px" align="center">
            <template slot-scope="scope">
              {{ scope.row.发动机号 }}
            </template>
          </el-table-column>
          <el-table-column label="工位号" align="center">
            <template slot-scope="scope">
              {{ scope.row.工位号 }}
            </template>
          </el-table-column>
          <el-table-column label="测量位置" align="center">
            <template slot-scope="scope">
              {{ scope.row.测量位置 }}
            </template>
          </el-table-column>
          <el-table-column label="测量项目" align="center">
            <template slot-scope="scope">
              {{ scope.row.测量项目 }}
            </template>
          </el-table-column>
          <el-table-column label="测量值" align="center">
            <template slot-scope="scope">
              {{ scope.row.测量值 }}
            </template>
          </el-table-column>
          <el-table-column label="单位" align="center">
            <template slot-scope="scope">
              {{ scope.row.测量单位 }}
            </template>
          </el-table-column>
          <el-table-column label="理论值" align="center">
            <template slot-scope="scope">
              {{ scope.row.理论值 }}
            </template>
          </el-table-column>
        </el-table>
        <div class="block" style="width: 600px">
          <el-pagination
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="20"
            :total="totalNum"
            style="width: 600px"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"/>
        </div>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { ExecDatabase } from '@/main'
import { getLine, getList } from '@/api/SPCanalysis/arrangeChart'
import { getNowTime, getNowTime2 } from '@/utils/tool'

export default {
  data() {
    return {
      dateTime: '',
      model: '',
      models: [],
      opName: '',
      opNames: [],
      measureName: '',
      measureNames: [],
      measureContent: '',
      measureContents: [],
      sampleSize: '5',
      MachineType: '',
      sampleSizes: [
        {
          value: '2',
          label: '2'
        }, {
          value: '3',
          label: '3'
        }, {
          value: '4',
          label: '4'
        }, {
          value: '5',
          label: '5'
        }, {
          value: '6',
          label: '6'
        }, {
          value: '7',
          label: '7'
        }, {
          value: '8',
          label: '8'
        }, {
          value: '9',
          label: '9'
        }
      ],
      sampleNumber: '20',
      sampleNumbers: [
        {
          value: '15',
          label: '15'
        }, {
          value: '20',
          label: '20'
        }, {
          value: '25',
          label: '25'
        }, {
          value: '30',
          label: '30'
        }
      ],
      tableData: [],
      listLoading: false,
      currentPage: 1,
      pageSize: 20,
      pageCurrent: 1,
      totalNum: null
    }
  },
  watch: {
    opName() {
      // this.opNameSelect()
      this.fetchData()
    }
  },
  created() {
    this.dateTime = [getNowTime2(), getNowTime()]
    this.machineTypeSelect()
  },
  methods: {
    opNameClear() {
      this.measureNames = []
      this.measureName = ''
      this.measureContents = []
      this.measureContent = ''
      this.models = []
      this.model = ''
    },
    // 获取表格序号
    getIndex($index) {
      // 表格序号
      return (this.pageCurrent - 1) * this.pageSize + $index + 1
    },
    // 获取机型
    fetchData() {
      this.models = []
      this.model = ''
      var param = []
      param[0] = ['开始时间', this.dateTime[0]]
      param[1] = ['结束时间', this.dateTime[1]]
      param[2] = ['工位号', this.opName]
      var Data = this.CreateData('11', '质量数据查询_基本机型_查询', param)
      ExecDatabase(Data).then(response => {
        this.models = []
        this.model = ''
        for (let i = 0; i < response.data.length; i++) {
          this.models.push({
            label: response.data[i].发动机型号,
            value: response.data[i].发动机型号
          })
        }
        if (this.models.length === 0) {
          this.$message.error('暂无数据')
          return
        }
        this.model = this.models[0].value
      })
    },
    // 获取工位名称
    machineTypeSelect() {
      this.opNames = []
      this.opName = ''
      var param = []
      var Data = this.CreateData('11', 'MES_计划BOM_工位与名称_查询', param)
      ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.opNames.push({
            label: response.data[i].工位号,
            value: response.data[i].工位号
          })
        }
      })
    },
    // 获取测量位置
    opNameSelect() {
      if (this.opName) {
        this.measureNames = []
        this.measureName = ''
        var param = []
        param[0] = ['工位号', this.opName]
        var Data = this.CreateData('11', '质量数据查询_测量位置', param)
        ExecDatabase(Data).then(response => {
          this.measureNames = []
          this.measureName = ''
          for (let i = 0; i < response.data.length; i++) {
            this.measureNames.push({
              label: response.data[i].测量位置,
              value: response.data[i].测量位置
            })
          }
        }).then(() => {
          this.measureName = this.measureNames[0].value
          this.measureSelect()
        })
      }
    },
    // 获取测量项目
    measureSelect() {
      if (this.opName === '' || this.measureName === '') return
      this.measureContents = []
      this.measureContent = ''
      var param = []
      param[0] = ['工位号', this.opName]
      param[1] = ['测量位置', this.measureName]
      var Data = this.CreateData('11', '质量数据查询_测量项目', param)
      ExecDatabase(Data).then(response => {
        this.measureContents = []
        this.measureContent = ''
        for (let i = 0; i < response.data.length; i++) {
          this.measureContents.push({
            label: response.data[i].测量项目,
            value: response.data[i].测量项目
          })
        }
      }).then(() => {
        this.measureContent = this.measureContents[0].value
      })
    },
    // 获取表格数据
    searchData() {
      let engineTypeValue_check, measuringPositionValue_check, measureContent_check
      if (this.opName !== '') {
        this.opName_check = true
      } else {
        this.opName_check = false
      }
      if (this.model !== '') {
        engineTypeValue_check = true
      } else {
        engineTypeValue_check = false
      }
      if (this.measureName !== '') {
        measuringPositionValue_check = true
      } else {
        measuringPositionValue_check = false
      }
      if (this.measureContent !== '') {
        measureContent_check = true
      } else {
        measureContent_check = false
      }
      getList(this.opName_check, this.opName,
        measuringPositionValue_check, this.measureName,
        engineTypeValue_check, this.model,
        measureContent_check, this.measureContent,
        this.dateTime[0], this.dateTime[1],
        this.sampleSize, this.sampleNumber,
        this.pageSize, this.pageCurrent).then(response => {
        this.listLoading = true
        this.tableData = response.data.rows
        this.totalNum = parseInt(response.data.total)
        this.listLoading = false
      })

      var param = []
      param[0] = ['结束时间', this.dateTime[1]]
      param[1] = ['开始时间', this.dateTime[0]]
      param[2] = ['测量位置_ischeck', measuringPositionValue_check]
      param[3] = ['测量位置', this.measureName]
      param[4] = ['测量项目', this.measureContent]
      param[5] = ['发动机型号代码', this.model]
      param[6] = ['发动机型号代码_ischeck', engineTypeValue_check]
      param[7] = ['工位号', this.opName]
      param[8] = ['工位号_ischeck', this.opName_check]
      param[9] = ['PageCount', 1000, 'int', '1']
      param[10] = ['ItemCount', 1000, 'int', '1']
      param[11] = ['PageCurrent', this.pageCurrent]
      param[12] = ['PageSize', this.pageSize]
      param[13] = ['测量项目_ischeck', measureContent_check]

      // 在去查一遍去重的字段结果
      // opNames 工位号 models 零件号  measureNames 测量名称  measureContents  测量位置
      this.models = [] // 零件号
      this.measureNames = [] // 测量名称
      this.measureContents = [] // 测量内容
      param[14] = ['去重字段', '发动机型号']
      var Data2 = this.CreateData('11', 'SPC分析_去重字段_查询', param)
      ExecDatabase(Data2).then(response => {
        for (let i = 0; i < response.data.result.length; i++) {
          this.models.push({
            label: response.data.result[i].发动机型号,
            value: response.data.result[i].发动机型号
          })
        }
      })

      param[14] = ['去重字段', '测量位置']
      var Data3 = this.CreateData('11', 'SPC分析_去重字段_查询', param)
      ExecDatabase(Data3).then(response => {
        for (let i = 0; i < response.data.result.length; i++) {
          this.measureNames.push({
            label: response.data.result[i].测量位置,
            value: response.data.result[i].测量位置
          })
        }
      })

      param[14] = ['去重字段', '测量项目']
      var Data4 = this.CreateData('11', 'SPC分析_去重字段_查询', param)
      ExecDatabase(Data4).then(response => {
        for (let i = 0; i < response.data.result.length; i++) {
          this.measureContents.push({
            label: response.data.result[i].测量项目,
            value: response.data.result[i].测量项目
          })
        }
      })
    },
    // 获取图形数据
    searchChart() {
      console.log('获取图形数据')
      let engineTypeValue_check, measuringPositionValue_check, measureContent_check
      if (this.opName !== '') {
        this.opName_check = true
      } else {
        this.opName_check = false
      }
      if (this.model !== '') {
        engineTypeValue_check = true
      } else {
        engineTypeValue_check = false
      }
      if (this.measureName !== '') {
        measuringPositionValue_check = true
      } else {
        measuringPositionValue_check = false
      }
      if (this.measureContent !== '') {
        measureContent_check = true
      } else {
        measureContent_check = false
      }
      getLine(this.opName_check, this.opName,
        measuringPositionValue_check, this.measureName,
        engineTypeValue_check, this.model,
        measureContent_check, this.measureContent,
        this.dateTime[0], this.dateTime[1],
        this.sampleSize, this.sampleNumber).then(response => {
        const myChart = this.$echarts.init(document.getElementById('myChart'))
        myChart.clear()
        this.drawLine(response.data)
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.searchData()
    },
    // 分页功能改变当前页
    handleCurrentChange(val) {
      this.pageCurrent = val
      this.searchData()
    },
    // 导出excel
    handleDownload() {
      if (this.tableData.length !== 0) {
        let engineTypeValue_check, measuringPositionValue_check, measureContent_check
        if (this.opName) {
          this.opName_check = true
        } else {
          this.opName_check = false
        }
        if (this.model !== '') {
          engineTypeValue_check = 1
        } else {
          engineTypeValue_check = 0
        }
        if (this.measureName !== '') {
          measuringPositionValue_check = 1
        } else {
          measuringPositionValue_check = 0
        }
        if (this.measureContent !== '') {
          measureContent_check = 1
        } else {
          measureContent_check = 0
        }
        var param = []
        param[0] = ['结束时间', this.dateTime[1]]
        param[1] = ['开始时间', this.dateTime[0]]
        param[2] = ['测量位置_ischeck', measuringPositionValue_check]
        param[3] = ['测量位置', this.measureName]
        param[4] = ['测量项目', this.measureContent]
        param[5] = ['机型代码', this.model]
        param[6] = ['机型代码_ischeck', engineTypeValue_check]
        param[7] = ['工位号', this.opName]
        param[8] = ['工位号_ischeck', this.opName_check]
        param[9] = ['测量项目_ischeck', measureContent_check]
        var Data = this.CreateData('2001', '质量数据查询_综合查询_数据分组报表', param)
        this.exportExcel_NPOI(Data)
      } else {
        this.$message.warning('暂无数据')
      }
    },
    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 = res.split('|')[2].split(',')
      const xData = []
      for (let i = 0; i < xdata.length; i++) {
        xData.push(xdata[i])
      }
      const lineData1 = res.split('|')[0].split(',')
      const lineData2 = res.split('|')[1].split(',')
      myChart.clear()
      myChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          data: ['频数1', '频数2']
        },
        xAxis: [
          {
            type: 'category',
            data: xData,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '频数1'
          },
          {
            type: 'value',
            name: '频数2'
          }
        ],
        series: [
          {
            name: '频数1',
            type: 'bar',
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            },
            data: lineData1
          },
          {
            name: '频数2',
            type: 'line',
            yAxisIndex: 1,
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            },
            data: lineData2
          }
        ]
      })
    }
  }
}
</script>

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