<template>
  <div class="app-container">
    <el-card>
      <div>
        <span style="margin-left: 10px">时间：</span>
        <el-date-picker
          v-model="dateTime"
          size="small"
          type="daterange"
          align="center"
          style="width: 240px;"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          range-separator="～"
          start-placeholder="开始日期"
          end-placeholder="结束日期"/>
        <span>工位名称</span>
        <el-select v-model="opName" clearable placeholder="工位名称" size="small" style="width: 180px" @change="getMeasuringPosition()" @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 style="margin-left: 10px">机型：</span>
        <el-select v-model="engineTypeValue" placeholder="请选择机型" filterable clearable size="small" style="width: 240px">
          <el-option
            v-for="item in engineType"
            :key="item.ID"
            :label="item.label"
            :value="item.value"
            size="mini"/>
        </el-select>
        <span style="margin-left: 10px">测量位置：</span>
        <el-select v-model="measuringPositionValue" placeholder="请选择测量位置" filterable clearable size="small" style="width: 200px">
          <el-option
            v-for="item in measuringPosition"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            size="mini"/>
        </el-select>
        <span style="margin-left: 10px">测量内容：</span>
        <el-select v-model="measureContent" placeholder="测量内容" size="small" clearable style="width: 135px;margin-top: 7px">
          <el-option
            v-for="item in measureContents"
            :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>
      </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="50" 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.发动机号 }}
          </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-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 value-format="yyyy-MM-dd" label="生产日期" align="center">
          <template slot-scope="scope" value-format="yyyy-MM-dd">
            {{ 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"
          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 { getEchart, getLine } from '@/api/SPCanalysis/basicTrendTap'
import request from '@/utils/request'
// import { getNowTime, getNowTime2 } from '@/utils/tool'
export default {
  data() {
    return {
      input_Usl: 0,
      input_Lsl: 0,
      dateTime: '',
      opName: '',
      opNames: [],
      model: '',
      models: [],
      measureName: '',
      measureNames: [],
      measureContent: '',
      measureContents: [],
      tableData: [],
      engineTypeValue: '', // 机型
      engineType: [], // 机型
      measuringPosition: [], // 测量位置
      measuringPositionValue: '', // 测量位置
      listLoading: false,
      cp: '',
      cpk: '',
      usl: '',
      qu: '',
      sl: '',
      lsl: '',
      ql: '',
      currentPage: 1,
      pageSize: 20,
      pageCurrent: 1,
      totalNum: null,
      downloadLoading: '',
      MachineType: ''
    }
  },
  watch: {
    opName(val) {
      this.opNameSelect()
    }
  },
  created() {
    var year, month, day, audiTime
    this.date = new Date() // 修改数据date
    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()
    audiTime = year + '-' + month + '-' + day
    console.log(audiTime, 'audiTime')
    this.dateTime = [audiTime, audiTime]
    // this.fetchData()
    this.machineTypeSelect()
    this.getEngineType()
    // this.measureSelect()
  },
  methods: {
    // 获取表格序号
    getIndex($index) {
      // 表格序号
      return (this.pageCurrent - 1) * this.pageSize + $index + 1
    },
    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 = ''
      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()
      })
    },
    // 机型
    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())
    },
    // 获取测量名称
    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() {
      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
      })
    },
    // 获取表格数据--质量数据_发动机质量数据_各个工位_视图_综合查询_趋势图_LLJ
    searchData() {
      this.tableData = []
      this.listLoading = true
      let engineTypeValue_check, measuringPositionValue_check, measureContent_check
      if (this.opName) { this.opName_check = true } else { this.opName_check = false }
      if (this.engineTypeValue !== '') { engineTypeValue_check = 1 } else { engineTypeValue_check = 0 }
      if (this.measuringPositionValue !== '') { 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.measuringPositionValue]
      param[4] = ['测量项目', this.measureContent]
      param[5] = ['发动机型号代码', this.engineTypeValue]
      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]
      var Data = this.CreateData('11', '质量数据_发动机质量数据_各个工位_视图_综合查询_趋势图', param)
      ExecDatabase(Data).then(response => {
        this.tableData = response.data.result
        console.log('this.tableData', this.tableData)
        this.totalNum = parseInt(response.data.output[0].ItemCount)
        this.listLoading = false
      })
    },
    // 获取图形数据
    searchChart() {
      const myChart = this.$echarts.init(document.getElementById('myChart'))
      myChart.clear()
      let engineTypeValue_check, measuringPositionValue_check, measureContent_check
      if (this.opName) { this.opName_check = true } else { this.opName_check = false }
      if (this.engineTypeValue !== '') { engineTypeValue_check = false } 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, measureContent_check, this.measureContent, engineTypeValue_check, this.engineTypeValue, this.dateTime[0], this.dateTime[1], this.pageSize, this.pageCurrent).then(response => {
        console.log(response.data, 111)
        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)
          let engineTypeValue_check, measuringPositionValue_check, measureContent_check
          if (this.opName) { this.opName_check = true } else { this.opName_check = false }
          this.engineTypeValue ? engineTypeValue_check = false : engineTypeValue_check = false
          this.measuringPositionValue ? measuringPositionValue_check = true : measuringPositionValue_check = false
          this.measureContent ? measureContent_check = true : measureContent_check = false
          console.log(this.opName_check, this.opName, measuringPositionValue_check, this.measuringPositionValue, measureContent_check, this.measureContent, engineTypeValue_check, this.engineTypeValue, this.dateTime[0], this.dateTime[1])
          getEchart(this.opName_check, this.opName, measuringPositionValue_check, this.measuringPositionValue, measureContent_check, this.measureContent, engineTypeValue_check, this.engineTypeValue, this.dateTime[0], this.dateTime[1]).then(response => {
            this.drawLine(response.data)
          })
        } else {
          this.$message.error('数据数量过少,无法统计')
        }
      })
    },
    // 分页功能改变显示数量
    handleSizeChange(val) {
      this.pageSize = val
      this.searchData()
    },
    // 分页功能改变当前页
    handleCurrentChange(val) {
      this.pageCurrent = val
      this.searchData()
    },
    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
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'line' // 默认为直线，可选为：'line' | 'shadow'
          }

        },
        legend: {
          orient: 'horizontal',
          right: '12%',
          data: [{ name: '不合格区域', icon: 'bar' }, { name: '合格区域', icon: 'bar' }, { name: '警告区域', icon: 'bar' }],
          selected: {
            '不合格区域': true,
            '合格区域': true,
            '警告区域': true
            // 不想显示的都设置成false
          }
        },
        color: ['#EE2C2C', '#7FFF00', '#f3d71c'],
        dataZoom: [
          {
            show: true,
            // realtime: false,
            textStyle: false,
            start: 0,
            end: 10
          }
        ],
        toolbox: {
          feature: {
            restore: {},
            saveAsImage: {}
          },
          right: '30'
        },
        xAxis: {
          nameLocation: 'center',
          type: 'category',
          boundaryGap: true,
          data: xData,
          show: true,
          axisTick: {
            show: true
          }

        },
        yAxis: {
          type: 'value',
          min: (parseFloat(_this.lsl) * 0.97).toFixed(0),
          // max: function() {
          //   return parseFloat(_this.usl) + parseFloat(_this.usl) * 0.2
          // }
          max: (parseFloat(_this.usl) * 1.03).toFixed(0)

          // scale: 'true'
        },
        series: [ // 就是从这个地方开始的    主要用的是markArea 和legend
          {
            name: '不合格区域',
            type: 'line',
            animation: false,
            areaStyle: {
              normal: {}
            },
            lineStyle: {
              normal: {
                width: 1
              }
            },
            markArea: {
              data: [[{
                yAxis: '0'
              }, {
                yAxis: this.lsl
              }], [{
                yAxis: this.usl
              }, {
                yAxis: 100000
              }]]
            }

          }, {
            name: '合格区域',
            type: 'line',
            animation: false,
            areaStyle: {
              normal: {}
            },
            lineStyle: {
              normal: {
                width: 1
              }
            },
            markArea: {
              data: [[{
                yAxis: _this.usl + 300 - (parseFloat(_this.usl).toFixed(2) - parseFloat(_this.lsl).toFixed(2)) / 4 * 3
              }, {
                yAxis: parseFloat(_this.usl).toFixed(2) - (parseFloat(_this.usl).toFixed(2) - parseFloat(_this.lsl).toFixed(2)) / 4
              }]]
            }
          }, {
            name: '警告区域',
            type: 'line',
            animation: false,
            areaStyle: {
              normal: {}
            },
            lineStyle: {
              normal: {
                width: 1
              }
            },
            markArea: {
              data: [[{
                yAxis: _this.lsl
              }, {
                yAxis: parseFloat(_this.usl).toFixed(2) - (parseFloat(_this.usl).toFixed(2) - parseFloat(_this.lsl).toFixed(2)) / 4 * 3
              }], [{
                yAxis: parseFloat(_this.usl).toFixed(2) - (parseFloat(_this.usl).toFixed(2) - parseFloat(_this.lsl).toFixed(2)) / 4
              }, {
                yAxis: this.usl
              }]]
            }
          },
          {
            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}'
                }
                // color: function(params) {
                //   var index_color = params.value
                //
                //   if (index_color >= 0) {
                //     return '#fe4365'
                //   } else {
                //     return '#25daba'
                //   }
                // }
              },
              color: ['#81b22f', '#f3d71c', '#f4b9a9'],
              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
                }
              }
            }
          }

        ]
        // visualMap: {
        //   show: false,
        //   type: 'piecewise',
        //   // seriesIndex: 2,
        //   pieces: [{
        //     gt: 10,
        //     background: 'green'
        //   }, {
        //     gt: 0,
        //     lte: 10,
        //     color: 'red'
        //   }]
        // },
        // 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}'
        //         }
        //         // color: function(params) {
        //         //   var index_color = params.value
        //         //
        //         //   if (index_color >= 0) {
        //         //     return '#fe4365'
        //         //   } else {
        //         //     return '#25daba'
        //         //   }
        //         // }
        //       },
        //       color: ['#81b22f', '#f3d71c', '#f4b9a9'],
        //       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 = ''
    }
    // 导出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]
    //   }))
    // },
    // drawLine2(res) {
    //   const myChart = this.$echarts.init(document.getElementById('myChart'))
    //   const lineData = res.split(',')
    //   const xData = []
    //   for (let i = 0; i < lineData.length; i++) {
    //     xData[i] = i
    //   }
    //   myChart.clear()
    //   myChart.setOption({
    //     title: {
    //       text: '线路故障发生概率预测',
    //       left: '50%',
    //       top: '5%'
    //     },
    //     tooltip: {
    //       trigger: 'axis',
    //       axisPointer: { // 坐标轴指示器，坐标轴触发有效
    //         type: 'line' // 默认为直线，可选为：'line' | 'shadow'
    //       }
    //
    //     },
    //     legend: {
    //       orient: 'horizontal',
    //       left: 'left',
    //       data: [{ name: '低故障率', icon: 'bar' }, { name: '中等故障率', icon: 'bar' }, { name: '高故障率', icon: 'bar' }],
    //       selected: {
    //         '低故障率': true,
    //         '蒸发量': true,
    //         '中等故障率': true,
    //         '高故障率': true
    //         // 不想显示的都设置成false
    //       }
    //     },
    //     color: ['#81b22f', '#f3d71c', '#f4b9a9'],
    //     xAxis: {
    //       nameLocation: 'center',
    //       type: 'category',
    //       boundaryGap: true,
    //       data: [],
    //       show: true,
    //       axisTick: {
    //         show: true
    //       }
    //
    //     },
    //     grid: {
    //       top: '15%',
    //       bottom: '5%',
    //       containLabel: true
    //     },
    //     yAxis: {
    //       nameGap: 35,
    //       name: '故障发生概率(%)',
    //       min: 0,
    //       max: 4,
    //       splitNumber: 10,
    //       type: 'value',
    //       axisLabel: {
    //         formatter: '{value}'
    //       }
    //
    //     },
    //
    //     series: [ // 就是从这个地方开始的    主要用的是markArea 和legend
    //       {
    //         name: '低故障率',
    //         type: 'line',
    //         animation: false,
    //         areaStyle: {
    //           normal: {}
    //         },
    //         lineStyle: {
    //           normal: {
    //             width: 1
    //           }
    //         },
    //         markArea: {
    //           data: [[{
    //             yAxis: '0'
    //           }, {
    //             yAxis: '2'
    //           }]]
    //         }
    //
    //       }, {
    //         name: '中等故障率',
    //         type: 'line',
    //         animation: false,
    //         areaStyle: {
    //           normal: {}
    //         },
    //         lineStyle: {
    //           normal: {
    //             width: 1
    //           }
    //         },
    //         markArea: {
    //           data: [[{
    //             yAxis: '2'
    //           }, {
    //             yAxis: '4'
    //           }]]
    //         }
    //       }, {
    //         name: '高故障率',
    //         type: 'line',
    //         animation: false,
    //         areaStyle: {
    //           normal: {}
    //         },
    //         lineStyle: {
    //           normal: {
    //             width: 1
    //           }
    //         },
    //         markArea: {
    //           data: [[{
    //             yAxis: '4'
    //           }, {
    //             yAxis: '6'
    //           }]]
    //         }
    //       },
    //       {
    //         name: '故障发生概率',
    //         type: 'line',
    //         data: [2.3, 0.5, 1.5, 3.44]
    //       }
    //
    //     ]
    //   })
    //   this.cp = ''
    //   this.cpk = ''
    //   this.usl = ''
    //   this.ql = ''
    //   this.qu = ''
    //   this.sl = ''
    //   this.lsl = ''
    // },
  }
}
</script>

<style scoped>
  span{
    margin: 10px 0px 10px 10px;
  }
  .datePicker{
    width:135px;
  }
</style>

