<template>
  <div class="app-container">
    <el-card>
      <el-row style="margin-top: 3px">
        <span>开始日期:</span>
        <el-date-picker v-model="startTime" size="small" type="date" value-format="yyyy-MM-dd" style="width:135px" placeholder="开始时间"/>
        <span>结束日期:</span>
        <el-date-picker v-model="endTime" size="small" type="date" value-format="yyyy-MM-dd" style="width:135px" placeholder="结束时间"/>
        <!--<span>生产日期:</span>-->
        <!--<el-date-picker-->
        <!--v-model="timeValue"-->
        <!--size="small"-->
        <!--style="width: 180px"-->
        <!--type="date"-->
        <!--format="yyyy-MM-dd"-->
        <!--value-format="yyyy-MM-dd"-->
        <!--placeholder="选择日期"-->
        <!--align="right"/>-->
        <span>工位名称:</span>
        <el-select v-model="opName" clearable placeholder="工位名称" size="small" style="width: 180px" @change="measureSelect(opName)" @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="model" clearable placeholder="机型" size="small" style="width: 180px">-->
        <!--<el-option-->
        <!--v-for="item in models"-->
        <!--:key="item.value"-->
        <!--:label="item.label"-->
        <!--:value="item.value"/>-->
        <!--</el-select>-->
        <el-input v-model="MachineType" size="small" style="width: 150px" placeholder="机型"/>
        <!--<span>测量名称:</span>-->
        <!--<el-select v-model="measureName" placeholder="测量名称" size="small" style="width: 180px" >-->
        <!--<el-option-->
        <!--v-for="item in measureNames"-->
        <!--:key="item.value"-->
        <!--:label="item.label"-->
        <!--:value="item.value"/>-->
        <!--</el-select>-->
      </el-row>
      <el-row style="margin-bottom: 3px">
        <span>测量内容:</span>
        <el-select v-model="measureContent" placeholder="测量内容" size="small" style="width: 135px;margin-top: 15px" >
          <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;margin-top: 15px">
          <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;margin-top: 15px">
          <el-option
            v-for="item in sampleNumbers"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
        <!--<span>上限值:</span>-->
        <!--<el-input-number v-model="input_Usl" :step="1" :min="0" size="small"/>-->
        <!--<span>下限值:</span>-->
        <!--<el-input-number v-model="input_Lsl" :step="1" :min="0" size="small"/>-->
        <el-button type="success" size="small" icon="el-icon-search" style="margin-left: 20px;margin-top: 15px" @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>-->
      </el-row>
    </el-card>

    <el-card style="margin-top: 3px">
      <el-table
        v-loading.body="listLoading"
        :data="tableData"
        border
        element-loading-text="Loading"
        stripe
        fit
        style="max-height: 440px"
        height="440"
        size="small">
        <el-table-column label="工位号" min-width="120" align="center">
          <template slot-scope="scope">
            {{ scope.row.JSON_工位号 }}
          </template>
        </el-table-column>
        <el-table-column label="测量值" min-width="90" align="center">
          <template slot-scope="scope">
            {{ scope.row.JSON_测量值 }}
          </template>
        </el-table-column>
        <el-table-column label="发动机型号" min-width="90" align="center">
          <template slot-scope="scope">
            {{ scope.row.JSON_发动机型号 }}
          </template>
        </el-table-column>
        <el-table-column label="日期" min-width="150" align="center">
          <template slot-scope="scope">
            {{ scope.row.JSON_日期 }}
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
      <div id="myChart" style="width: 1011px;height: 400px;margin: auto;margin-top: 20px;"/>
    </el-card>
    <!--<el-tabs type="border-card" style="margin-top: 15px">-->
    <!--<el-tab-pane label="趋势图">-->
    <!--</el-tab-pane>-->
    <!--<el-tab-pane label="列表">-->
    <!--</el-tab-pane>-->
    <!--</el-tabs>-->
  </div>
</template>

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

export default {
  data() {
    return {
      // timeValue: getNowTime2(),
      startTime: getNowTime2(),
      endTime: getNowTime(),
      model: '',
      models: [],
      opName: '',
      opNames: [],
      measureName: '',
      measureNames: [],
      measureContent: '',
      measureContents: [],
      sampleSize: '5',
      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: 10,
      pageCurrent: 1,
      total: null,
      lineData: '',
      MachineType: '',
      input_Usl: 0,
      input_Lsl: 0
    }
  },
  watch: {
    opName(val) {
      this.opNameSelect()
    }
  },
  created() {
    // this.fetchData()
    this.machineTypeSelect()
    // this.measureSelect()
  },
  methods: {
    // 获取机型
    fetchData() {
      this.models = []
      var param = []
      param[0] = ['结束时间', this.endTime]
      param[1] = ['开始时间', this.startTime]
      param[2] = ['工位号', this.opName]
      var Data = this.CreateData('11', 'MES_基本变量_基本机型_查询', param)
      ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.models.push({
            label: response.data[i].发动机型号,
            value: response.data[i].发动机型号
          })
        }
      }).then(() => {
        // this.model = this.models[0].value
      })
    },
    // 获取工位名称
    machineTypeSelect() {
      this.opNames = []
      this.opName = ''
      var param = []
      var Data = this.CreateData('11', '质量数据查询_工位号', 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].工位号
          })
        }
      }).then(() => {
        this.opName = this.opNames[0].value
        // this.fetchData()
        this.measureSelect(this.opNames[0].value) // LLJ  新增 20191022
      })
    },
    // 获取测量名称
    opNameSelect() {
      if (this.opName) {
        this.measureNames = []
        this.measureName = ''
        var param = []
        param[0] = ['工位号', this.opName]
        var Data = this.CreateData('11', '质量数据查询_测量位置', param)
        ExecDatabase(Data).then(response => {
          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
        })
      }
    },
    // 获取测量内容
    // LLJ  新增 20191022
    measureSelect(opname) {
      if (!opname) { return }
      console.log(opname)
      this.measureContents = []
      this.measureContent = ''
      var param = []
      param[0] = ['工位号', opname]
      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(() => {
        this.measureContent = this.measureContents[0].value
      })
    },
    // 获取表格数据
    searchData() {
      if (this.opName) { this.opName_check = true } else { this.opName_check = false }
      // if (this.model) { this.model_check = true } else { this.model_check = false }
      if (this.MachineType !== '') { this.model_check = true } else { this.model_check = false }
      if (this.measureName) { this.measureName_check = true } else { this.measureName_check = false }
      if (this.measureContent) { this.measureContent_check = true } else { this.measureContent_check = false }
      getList(this.opName_check, this.opName, this.measureName_check, this.measureName, this.model_check, this.MachineType, this.measureContent_check, this.measureContent, this.startTime, this.endTime, this.sampleSize, this.sampleNumber, this.pageSize, this.pageCurrent).then(response => {
        this.listLoading = true
        this.tableData = response.data.rows
        this.total = parseInt(response.data.total)
        this.listLoading = false
      })
    },
    // 获取图形数据
    searchChart() {
      this.drawLine('', '')
      if (this.opName) { this.opName_check = true } else { this.opName_check = false }
      // if (this.model) { this.model_check = true } else { this.model_check = false }
      if (this.MachineType !== '') { this.model_check = true } else { this.model_check = false }
      if (this.measureName) { this.measureName_check = true } else { this.measureName_check = false }
      if (this.measureContent) { this.measureContent_check = true } else { this.measureContent_check = false }
      getLine(this.opName_check, this.opName, this.measureName_check, this.measureName, this.model_check, this.MachineType, this.measureContent_check, this.measureContent, this.startTime, this.endTime, this.sampleSize, this.sampleNumber).then(response => {
        console.log(response.data, 1)
        getxData(this.opName_check, this.opName, this.measureName_check, this.measureName, this.model_check, this.MachineType, this.measureContent_check, this.measureContent, this.startTime, this.endTime, this.sampleSize, this.sampleNumber).then(response => {
          this.drawLine(response.data, this.lineData)
        })
        this.lineData = response.data.split(',')
      })
    },
    // 分页功能改变显示数量
    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, lineData) {
      const myChart = this.$echarts.init(document.getElementById('myChart'))
      const temp = res.split(',')
      const xdata = []
      for (let i = 0; i < temp.length; i++) {
        xdata.push(temp[i])
      }

      const max = Math.max(...lineData)
      const min = Math.min(...lineData)
      myChart.clear()
      myChart.setOption({
        title: {
          left: 'center',
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: xdata
        },
        //   yAxis: [{
        //     type: 'value',
        //     scale: 'true'
        //   },{
        //   type: 'value',
        //     scale: 'true'
        // }],

        yAxis: [
          {
            type: 'value',
            scale: 'true',
            name: '频数',
            min: min,
            max: max + 10,
            interval: 10,
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            scale: 'true',
            name: '',
            min: min / 100,
            max: (max + 10) / 100,
            interval: 0.1,
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],

        series: [
          {
            type: 'bar',
            data: lineData,
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            }
          },
          {
            name: '测量值',
            type: 'line',
            smooth: true, // 让曲线变平滑的
            data: lineData

            // name: '平均温度',
            // smooth: false, // true 为平滑曲线，false为直线
            // type: 'line',
            // // yAxisIndex: 1,
            // data: lineData
          }
        ]
      })
    }
  }
}
</script>

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

