<template>
  <div class="app-container">
    <el-card>
      <el-row>
        <!--<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-date-picker v-model="startTime" size="small" type="date" value-format="yyyy-MM-dd" style="width:180px" placeholder="开始时间"/>
        <span>结束日期:</span>
        <el-date-picker v-model="endTime" size="small" type="date" value-format="yyyy-MM-dd" style="width:180px" placeholder="结束时间"/>
        <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: 200px" 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>
        <span>测量内容:</span>
        <el-select v-model="measureContent" placeholder="测量内容" size="small" style="width: 180px;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" :disabled="checkList[0] === '1'" placeholder="样本容量" size="small" style="width: 180px;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" :disabled="checkList[0] === '1'" placeholder="样本个数" size="small" style="width: 180px;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" :disabled="checkList[0] !== '1' && checkList[0] !== '2'" :step="1" :min="0"/>
        <span>下限值:</span>
        <el-input-number v-model="input_Lsl" :step="1" :min="0"/>
        <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>

      <!--<QualityDatasearch title = "你好 "/>   //1.指定值-->
      <!--<span>子组件传过来的值是 {{ childValue }}</span>-->
      <!--<QualityDatasearch @func="getValue">2222222222222</QualityDatasearch>-->
      <!--<el-row>-->
      <!--<el-checkbox-group v-model="checkList" style="margin: 20px 20px;" @change="bindCheckBox">-->
      <!--<el-checkbox label="1">基本趋势图</el-checkbox>-->
      <!--<el-checkbox label="2">工序能力分析</el-checkbox>-->
      <!--<el-checkbox label="3">样本趋势图</el-checkbox>-->
      <!--<el-checkbox label="4">直方图</el-checkbox>-->
      <!--<el-checkbox label="5">排列图</el-checkbox>-->
      <!--<el-checkbox label="6">均值极差图</el-checkbox>-->
      <!--<el-checkbox label="7">均值方差图</el-checkbox>-->
      <!--<el-checkbox label="8">工序能力分析</el-checkbox>-->
      <!--</el-checkbox-group>-->
      <!--</el-row>-->
      <el-row>
        <el-card style="height: 643px;overflow-y: auto;padding: 5px 0 0 0">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="基本趋势图" name="1"><QualityDatasearch ref="fresh0" :ss="startTime" @func="getValue"/></el-tab-pane>
          </el-tabs>
        </el-card>
      </el-row>

      <!--<el-card style="margin-top: 10px">-->
      <!--<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>-->
  </el-card></div>
</template>

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

import QualityDatasearch from '@/views/SearchData/SPC_Analysis/QualityDatasearch.vue'
// import EquipmentWeekMaintenance from '@/components/EquipmentMaintenance/EquipmentWeekMaintenance.vue'
// import EquipmentMonthMaintenance from '@/components/EquipmentMaintenance/EquipmentMonthMaintenance.vue'
// import EquipmentQuarterMaintenance from '@/components/EquipmentMaintenance/EquipmentQuarterMaintenance.vue'
// import EquipmentYearMaintenance from '@/components/EquipmentMaintenance/EquipmentYearMaintenance.vue'
export default {
  name: '',
  components: {
    'QualityDatasearch': QualityDatasearch
    // 'EquipmentWeekMaintenance': EquipmentWeekMaintenance,
    // 'EquipmentMonthMaintenance': EquipmentMonthMaintenance,
    // 'EquipmentQuarterMaintenance': EquipmentQuarterMaintenance,
    // 'EquipmentYearMaintenance': EquipmentYearMaintenance
  },
  data() {
    return {
      input_Usl: 0,
      input_Lsl: 0,
      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: '',
      usl: '',
      qu: '',
      sl: '',
      ql: '',
      lsl: '',
      MachineType: '',
      checkList: ['1'],
      activeName: '1',
      msg: [1, 2, 3], // 给子
      childValue: '' // 接收子
    }
  },
  watch: {
    opName(val) {
      this.opNameSelect()
    }
  },
  created() {
    // this.fetchData()
    this.machineTypeSelect()
    // this.measureSelect()
  },
  methods: {
    getValue(val) {
      alert(val)
      this.childValue = val
    },

    handleClick(tab, event) {
      console.log(tab, event)
      console.log(this.activeName)
      if (this.activeName === '1') {
        this.$refs.fresh0.send(3333)
      }
    },
    bindCheckBox(value) {
      this.checkList = []
      if (value.length === 1) {
        this.checkList.push(value[0])
      } else {
        this.checkList.push(value[1])
      }
    },
    searchData() {
      switch (this.checkList[0]) {
        case '1':
          break
        case 2:
          console.log(this.checkList[0])
          this.searchData_1()
          this.searchChart_1()
          break
        default:
          this.$message.error('请选择查询SPC')
          break
      }
    },
    // 获取表格数据
    searchData_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 }
      console.log(this.pageCurrent, 232323232323232)
      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_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 }
      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, this.input_Usl, this.input_Lsl).then(response => {
        if (response.data.length !== 0) {
          this.drawLine(response.data)
        } else {
          this.$message.error('数据数量过少,无法统计')
        }
      })
    },
    // 获取机型
    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.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', '质量数据查询_测量项目', 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
      })
    },

    // 分页功能改变显示数量
    handleSizeChange(val) {
      this.pageSize = val
      this.searchData()
    },
    // 分页功能改变当前页
    handleCurrentChange(val) {
      this.pageCurrent = val
      this.searchData()
    },
    // 导出excel
    handleDownload() {
      this.downloadLoading = true
        import('@/vendor/Export2Excel').then(excel => {
          // console.log(this.tableData)
          const tHeader = ['工位号', '测量单位', '日期']
          const filterVal = ['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 usl = parseFloat(res.split('|')[4].split(',')[0]).toFixed(4)
      const qu = parseFloat(res.split('|')[4].split(',')[1]).toFixed(4)
      const sl = parseFloat(res.split('|')[4].split(',')[2]).toFixed(4)
      const ql = parseFloat(res.split('|')[4].split(',')[3]).toFixed(4)
      const lsl = parseFloat(res.split('|')[4].split(',')[4]).toFixed(4)
      const cpk = parseFloat(res.split('|')[1].split(',')[5]).toFixed(2)
      const cp = parseFloat(res.split('|')[1].split(',')[6]).toFixed(2)
      const USL = parseInt(res.split('|')[4].split(',')[0])
      const QU = parseInt(res.split('|')[4].split(',')[1])
      const SL = parseInt(res.split('|')[4].split(',')[2])
      const QL = parseInt(res.split('|')[4].split(',')[3])
      const LSL = parseInt(res.split('|')[4].split(',')[4])
      const xData = res.split('|')[3].split(',')
      const xdata = []
      for (let i = 0; i < xData.length; i++) {
        xdata.push(xData[i])
      }
      const yData = res.split('|')[2].split(',')
      const ydata = []
      for (let i = 0; i < yData.length; i++) {
        ydata.push(yData[i])
      }
      const lineData = res.split('|')[0].split(',')
      const linedata = []
      for (let i = 0; i < lineData.length; i++) {
        linedata.push(lineData[i])
      }
      const myChart = this.$echarts.init(document.getElementById('myChart'))
      myChart.clear()
      myChart.setOption({
        title: {
          left: 'center',
          text: '正态分布图',
          subtext: 'Cp=' + cp + ' Cpk=' + cpk
        },
        dataZoom: [
          {
            show: true,
            // realtime: false,
            textStyle: false,
            start: 1,
            end: 99
          }
          // {
          //   type: 'inside',
          //   realtime: true,
          //   start: 65,
          //   end: 85
          // }
        ],
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: xdata,
          show: false
        },
        yAxis: {
          type: 'value',
          scale: 'true'
        },
        series: [
          {
            smooth: true,
            showSymbol: false,
            name: '测量值',
            type: 'line',
            data: linedata,
            markLine: {
              data: [
                { xAxis: USL, name: 'USL', value: usl },
                { xAxis: LSL, name: 'LSL', value: lsl },
                { xAxis: QU, name: 'QU', value: qu },
                { xAxis: QL, name: 'QL', value: ql },
                { xAxis: SL, name: 'SL', value: sl }
              ],
              label: {
                normal: {
                  position: 'middle',
                  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
                }
              }
            }
          }
        ]
      })
    }
  }
}
</script>

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