<template>
  <div class="app-container">
    <el-card style="">
      <el-row>
        <p style="margin: 20px 0;text-align: center;">我是子组件，父组件穿传过来的值是{{ ss }}</p>
        <p style="margin: 20px 0;text-align: center;">
          <button @click="send">点击向父组件传值</button>
        </p>
        <span>开始日期:</span>
        <el-date-picker v-model="startTime" size="small" type="date" value-format="yyyy-MM-dd" style="width:200px" placeholder="开始时间"/>
        <span>结束日期:</span>
        <el-date-picker v-model="endTime" size="small" type="date" value-format="yyyy-MM-dd" style="width:200px" placeholder="结束时间"/>
        <span>工位名称</span>
        <el-select v-model="opName" clearable placeholder="工位名称" size="small" style="width: 200px" @change="measureSelect(opName)" @clear="measureContents = [];measureContent = ''">
          <!--;measureSelect(opName)" @clear="measureContents = [];measureContent = ''-->
          <el-option
            v-for="item in opNames"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
        <span v-show="true">机型:</span>
        <!--<el-select v-show="true" v-model="model" clearable placeholder="机型" size="small" style="width: 200px">-->
        <!--<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: 200px" placeholder="机型"/>
      </el-row>
      <el-row>
        <!--<span>测量名称:</span>-->
        <!--<el-select v-model="measureName" placeholder="测量名称" size="small" style="width: 200px;margin-top: 15px" @change="measureSelect">-->
        <!--<el-option-->
        <!--v-for="item in measureNames"-->
        <!--:key="item.value"-->
        <!--:label="item.label"-->
        <!--:value="item.value"/>-->
        <!--</el-select>-->
        <span>测量内容:</span>
        <el-select v-model="measureContent" placeholder="测量内容" size="small" style="width: 200px;margin-top: 15px">
          <el-option
            v-for="item in measureContents"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
        <span>上限值:</span>
        <el-input-number v-model="input_Usl" :step="1" :min="0"/>
        <span>下限值:</span>
        <el-input-number v-model="input_Lsl" :step="1" :min="0"/>
        <el-button type="success" icon="el-icon-search" size="small" 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: 10px">
      <el-table
        :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.工位号 }}
          </template>
        </el-table-column>
        <el-table-column label="测量值" min-width="90" align="center">
          <template slot-scope="scope">
            {{ scope.row.测量值 }}
          </template>
        </el-table-column>
        <el-table-column label="发动机型号" min-width="90" align="center">
          <template slot-scope="scope">
            {{ scope.row.发动机型号 }}
          </template>
        </el-table-column>
        <el-table-column label="日期" min-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="[10, 20, 30, 40]"
          :page-size="10"
          :total="totalNum"
          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>
  </div>
</template>

<script>
/* eslint-disable vue/require-prop-types */

import { ExecDatabase } from '@/main'
import { getEchart, getLine } from '@/api/SPCanalysis/basicTrendTap'
import { getNowTime, getNowTime2 } from '@/utils/tool'

export default {
  props: {
  },
  data() {
    return {
      input_Usl: 0,
      input_Lsl: 0,
      startTime: getNowTime2(),
      endTime: getNowTime(),
      opName: '',
      opNames: [],
      model: '',
      models: [],
      measureName: '',
      measureNames: [],
      measureContent: '',
      measureContents: [],
      tableData: [],
      listLoading: false,
      cp: '',
      cpk: '',
      usl: '',
      qu: '',
      sl: '',
      lsl: '',
      ql: '',
      currentPage: 1,
      pageSize: 10,
      pageCurrent: 1,
      totalNum: null,
      downloadLoading: '',
      MachineType: ''
    }
  },
  watch: {
    opName(val) {
      this.opNameSelect()
    }
  },
  created() {
    console.log(this.title)
    // this.fetchData()
    this.machineTypeSelect()
    // this.measureSelect()
  },
  methods: {
    // send{
    //   alert(111)
    //   this.$emit('getValue', '你好父组件！')
    // },
    send(val) {
      alert(this.ss)
      this.$emit('func', '你好父组件！')
    },
    fetchData() {
      this.models = []
      var param = []
      param[0] = ['结束时间', this.endTime]
      param[1] = ['开始时间', this.startTime]
      param[2] = ['工位号', this.opName]
      var Data = this.CreateData('11', 'MES_基本变量_基本机型_查询_zdy', param)
      ExecDatabase(Data).then(response => {
        // console.log(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', '质量数据查询_工位号_zdy', 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.measureSelect(this.opNames[0].value) // LLJ  新增 20191022
        // this.fetchData()
      })
    },
    // 获取测量名称
    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', '质量数据查询_测量项目_LLJ', 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
      })
    },
    // 获取表格数据--质量数据_发动机质量数据_各个工位_视图_综合查询_趋势图_LLJ
    searchData() {
      this.listLoading = true
      if (this.opName) { this.opName_check = true } else { this.opName_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 }
      var param = []
      param[0] = ['结束时间', this.endTime]
      param[1] = ['开始时间', this.startTime]
      param[2] = ['PageCurrent', this.pageCurrent]
      param[3] = ['PageSize', this.pageSize]
      param[4] = ['测量项目', this.measureContent]
      param[5] = ['发动机型号代码', this.MachineType]
      param[6] = ['发动机型号代码_ischeck', this.model_check]
      param[7] = ['工位号', this.opName]
      param[8] = ['工位号_ischeck', this.opName_check]
      param[9] = ['PageCount', 1000, 'int', '1']
      param[10] = ['ItemCount', 1000, 'int', '1']
      var Data = this.CreateData('11', '质量数据_发动机质量数据_各个工位_视图_综合查询_趋势图_LLJ', param)
      ExecDatabase(Data).then(response => {
        this.tableData = response.data.result
        this.totalNum = parseInt(response.data.output[0].ItemCount)
        this.listLoading = false
      })
    },
    // 获取图形数据
    searchChart() {
      const myChart = this.$echarts.init(document.getElementById('myChart'))
      myChart.clear()
      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.measureContent_check, this.measureContent, this.model_check, this.MachineType, this.startTime, this.endTime, this.pageSize, this.pageCurrent, this.input_Usl, this.input_Lsl).then(response => {
        if (response.data) {
          console.log(response.data, 111)
          const markData = response.data.split(',')
          console.log(markData, 222)
          this.cp = markData[6].slice(0, 4)
          this.cpk = markData[5].slice(0, 4)
          this.usl = parseFloat(markData[0]).toFixed(2)
          this.ql = parseFloat(markData[3]).toFixed(2)
          this.qu = parseFloat(markData[1]).toFixed(2)
          this.sl = parseFloat(markData[2]).toFixed(2)
          this.lsl = parseFloat(markData[4]).toFixed(2)
          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 }
          getEchart(this.opName_check, this.opName, this.measureName_check, this.measureName, this.measureContent_check, this.measureContent, this.model_check, this.MachineType, this.startTime, this.endTime).then(response => {
            this.drawLine(response.data)
          })
        } else {
          this.$message.error('数据数量过少,无法统计')
        }
      })
    },
    // 分页功能改变显示数量
    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 lineData = res.split(',')
      const xData = []
      const _this = this
      console.log(this.lsl - this.lsl * 0.2, this.lsl, 'lsl')
      console.log(parseFloat(_this.usl) + parseFloat(_this.usl) * 0.2, this.usl, 'max')
      for (let i = 0; i < lineData.length; i++) {
        xData[i] = i
      }
      myChart.clear()
      myChart.setOption({
        title: {
          left: 'center',
          text: '基本趋势图',
          subtext: 'Cp=' + this.cp + ' Cpk=' + this.cpk
        },
        dataZoom: [
          {
            show: true,
            // realtime: false,
            textStyle: false,
            start: 1,
            end: 99
          }
        ],
        tooltip: {
          trigger: 'axis'
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          data: xData
        },
        yAxis: {
          type: 'value',
          min: parseFloat(_this.lsl).toFixed(2) - 200,
          // max: function() {
          //   return parseFloat(_this.usl) + parseFloat(_this.usl) * 0.2
          // }
          max: parseFloat(_this.usl).toFixed(2) + 200

          // scale: 'true'
        },
        series: [
          {
            name: '测量值',
            type: 'line',
            data: lineData,
            markLine: {
              data: [
                { yAxis: this.usl, name: 'USL' },
                { yAxis: this.lsl, name: 'LSL' },
                { yAxis: this.qu, name: 'QU' },
                { yAxis: this.ql, name: 'QL' },
                { yAxis: this.sl, name: 'SL' }
              ],
              label: {
                normal: {
                  formatter: '{b} : {c}'
                }
              },
              lineStyle: {
                color: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [{
                    offset: 0, color: 'red' // 0% 处的颜色
                  }, {
                    offset: 1, color: 'blue' // 100% 处的颜色
                  }],
                  globalCoord: false // 缺省为 false
                }
              }
            }
          }
        ]
      })
      this.cp = ''
      this.cpk = ''
      this.usl = ''
      this.ql = ''
      this.qu = ''
      this.sl = ''
      this.lsl = ''
    }
  }
}
</script>

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

