<template>
  <div class="app-container">
    <el-card>
      <div style="margin: 7px 0">
        <span style="margin-left: 10px">时间：</span>
        <el-date-picker
          v-model="dateTime"
          type="datetime"
          align="center"
          placeholder="开始时间"
          size="small"
          style="width: 200px;"
          value-format="yyyy-MM-dd HH:mm:ss"/>
        <span>工位名称:</span>
        <el-select v-model="opName" placeholder="工位名称" size="small" style="width: 150px" @change="getMeasuringPosition()" @clear="measureContents = [];measureContent = ''">
          <el-option
            v-for="item in opNames"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <span>机型:</span>
        <el-select v-model="engineTypeValue" placeholder="请选择机型" filterable clearable size="small" style="width: 150px">
          <el-option
            v-for="item in engineType"
            :key="item.ID"
            :label="item.label"
            :value="item.value"
            size="mini"/>
        </el-select>
        <span>测量名称:</span>
        <el-select v-model="measuringPositionValue" placeholder="请选择测量位置" filterable clearable size="small" style="width: 150px">
          <el-option
            v-for="item in measuringPosition"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            size="mini"/>
        </el-select>
        <span>测量内容:</span>
        <el-select v-model="measureContent" placeholder="测量内容" 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="searchData();searchChart()">搜索</el-button>
        <!--<el-button type="primary" size="small" icon="el-icon-download" style="margin-left: 10px;margin-top: 15px" @click="handleDownload">导出EXCEL</el-button>-->
      </div>
      <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 align="left" v-text="getIndex(scope.$index)"/>
          </template>
        </el-table-column>
        <el-table-column label="工件号" align="center">
          <template slot-scope="scope">
            {{ scope.row.JSON_发动机号 }}
          </template>
        </el-table-column>
        <el-table-column label="工位号" align="center">
          <template slot-scope="scope">
            {{ scope.row.JSON_工位号 }}
          </template>
        </el-table-column>
        <el-table-column label="测量位置" align="center">
          <template slot-scope="scope">
            {{ scope.row.JSON_测量位置 }}
          </template>
        </el-table-column>
        <el-table-column label="测量项目" align="center">
          <template slot-scope="scope">
            {{ scope.row.JSON_测量项目 }}
          </template>
        </el-table-column>
        <el-table-column label="测量值" align="center">
          <template slot-scope="scope">
            {{ scope.row.JSON_测量值 }}
          </template>
        </el-table-column>
        <el-table-column label="单位" align="center">
          <template slot-scope="scope">
            {{ scope.row.JSON_测量单位 }}
          </template>
        </el-table-column>
        <el-table-column label="理论值" align="center">
          <template slot-scope="scope">
            {{ scope.row.JSON_理论值 }}
          </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"
          small
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </el-card>
  </div>
</template>

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

export default {
  data() {
    return {
      dateTime: '',
      endTime: '',
      model: '',
      models: [],
      opName: '',
      opNames: [],
      measureName: '',
      measureNames: [],
      measureContent: '',
      measureContents: [],
      engineTypeValue: '', // 机型
      engineType: [], // 机型
      measuringPosition: [], // 测量位置
      measuringPositionValue: '', // 测量位置
      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
    }
  },
  created() {
    var year, month, day, hour, minute, second
    year = new Date().getFullYear()
    month = new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1
    day = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()
    hour = new Date().getHours()
    hour = hour < 10 ? ('0' + hour) : hour
    minute = new Date().getMinutes()
    minute = minute < 10 ? ('0' + minute) : minute
    second = new Date().getSeconds()
    second = second < 10 ? ('0' + second) : second
    this.dateTime = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
    this.endTime = '2092-08-03'
    // this.fetchData()
    this.machineTypeSelect()
    this.measureSelect()
    this.getEngineType()
  },
  methods: {
    // 获取表格序号
    getIndex($index) {
      // 表格序号
      return (this.pageCurrent - 1) * this.pageSize + $index + 1
    },
    // 机型
    getEngineType() {
      this.engineType = []
      var param = []
      var Data = this.CreateData('11', 'MES_基本变量_机型代码_查询 ', param)
      this.ExecDatabase(Data).then(response => {
        // if (response.data.length) { this.engineTypeValue = response.data[0].发动机型标志 }
        for (let i = 0; i < response.data.length; i++) {
          this.engineType.push({
            label: response.data[i].发动机型号,
            value: response.data[i].发动机机型标志,
            ID: response.data[i].序号
          })
        }
      })
    },
    getMeasuringPosition() {
      this.measuringPosition = []
      var param = []
      param[0] = ['工位号', this.opName]
      var Data = this.CreateData('11', '质量数据查询_测量位置 ', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length) { this.measuringPositionValue = response.data[0].测量位置 }
        for (let i = 0; i < response.data.length; i++) {
          this.measuringPosition.push({
            label: response.data[i].测量位置,
            value: response.data[i].测量位置
          })
        }
      }).then(() => this.measureSelect())
    },
    // 获取工位名称
    machineTypeSelect() {
      this.opNames = []
      this.opName = ''
      request({
        url: '',
        method: 'post',
        data: {
          type: '3',
          name: `select distinct  工位号 from dbo.MES_基本变量_原始数据
            where 变量类型代码 = 101 or 变量类型代码 = 105 or 变量类型代码 = 104
            order by 工位号`
        }
      }).then(response => {
        if (response.data.length) {
          for (let i = 0; i < response.data.length; i++) {
            this.opNames.push({
              label: response.data[i].工位号,
              value: response.data[i].工位号
            })
          }
        }
      }).then(() => {
        this.measureSelect() // LLJ  新增 20191022
        this.getMeasuringPosition()
      })
    },
    // 获取测量内容
    // LLJ  新增 20191022
    measureSelect() {
      this.measureContents = []
      this.measureContent = ''
      var param = []
      param[0] = ['工位号', this.opName]
      param[1] = ['测量位置', this.measuringPositionValue]
      var Data = this.CreateData('11', '质量数据查询_测量项目', param)
      ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.measureContents.push({
            label: response.data[i].测量项目,
            value: response.data[i].测量项目
          })
        }
      }).then(() => {
        if (this.measureContents.length) 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.engineTypeValue !== '') { engineTypeValue_check = true } else { engineTypeValue_check = false }
      if (this.measuringPositionValue !== '') { 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.measuringPositionValue,
        engineTypeValue_check, this.engineTypeValue,
        measureContent_check, this.measureContent,
        this.dateTime, this.endTime,
        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
      })
    },
    // 获取图形数据
    searchChart() {
      console.log('获取图形数据')
      let engineTypeValue_check, measuringPositionValue_check, measureContent_check
      if (this.opName) { this.opName_check = true } else { this.opName_check = false }
      if (this.engineTypeValue !== '') { engineTypeValue_check = true } else { engineTypeValue_check = false }
      if (this.measuringPositionValue !== '') { 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.measuringPositionValue,
        engineTypeValue_check, this.engineTypeValue,
        measureContent_check, this.measureContent,
        this.dateTime, this.endTime,
        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() {
      this.downloadLoading = true
        import('@/vendor/Export2Excel').then(excel => {
          const tHeader = ['工件号', '工位号', '测量位置', '测量项目', '测量值', '测量单位', '理论值', '上限值', '下限值', '生产日期']
          const filterVal = ['JSON_发动机号', 'JSON_工位号', 'JSON_测量位置', 'JSON_测量项目', 'JSON_测量单位', 'JSON_测量值', 'JSON_理论值', 'JSON_上限值', 'JSON_下限值', 'JSON_生产日期']
          const list = this.tableData
          const data = this.formatJson(filterVal, list)
          excel.export_json_to_excel({
            header: tHeader,
            data,
            filename: '质量数据查询表',
            autoWidth: this.autoWidth,
            bookType: this.bookType
          })
          this.downloadLoading = false
        })
    },
    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>
