<template>
  <div style="width: 99.3%; height: 99.5%; background-color: white;position: relative;border: 2px solid #9e9b9b; margin-left: 2px">
    <el-row style=" width: 100%;height: 100%; background-color: #d7dee6">
      <el-row style="margin: 5px;text-align: end;">
        <el-button type="primary" icon="el-icon-s-data" style="width: 200px;font-size: 20px;padding: 5px 10px;" @click="chooseLineData">产看曲线</el-button>
        <el-button type="warning" icon="el-icon-picture-outline" style="width: 200px;font-size: 20px;padding: 5px 10px;" @click="choosePicData">产看照片</el-button>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-table
              :data="orderCompletion_table1"
              :header-cell-style="{ background: '#F5F5F5', fontSize: '18px' }"
              border
              height="810px"
              stripe
              style="width: 100%; border: 1px solid #9e9b9b"
              tooltip-effect="dark"
          >
            <el-table-column align="center" label="序号" width="70px">
              <template slot-scope="scope">
                {{ scope.row.RowNum }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="测量位置">
              <template slot-scope="scope">
                {{ scope.row.测量位置 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="测量项目">
              <template slot-scope="scope">
                {{ scope.row.测量项目 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="测量值" width="100px">
              <template slot-scope="scope">
                {{ scope.row.测量值 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="单位" width="80px">
              <template slot-scope="scope">
                {{ scope.row.单位 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="是否合格" width="100px">
              <template slot-scope="scope">
                <i v-if="scope.row.合格标志 === 'OK'"><span style="font-size: x-large;font-weight: 700;color: #67c23a">OK</span></i>
                <i v-else><span style="font-size: x-large;font-weight: 700;color: #ff0000">NG</span></i>
              </template>
            </el-table-column>
            <!--            <el-table-column align="center" label="测量时间" min-width="120px">-->
            <!--              <template slot-scope="scope">-->
            <!--                {{ scope.row.离开时间 }}-->
            <!--              </template>-->
            <!--            </el-table-column>-->
          </el-table>
        </el-col>
        <el-col :span="12">
          <el-table
              :data="orderCompletion_table2"
              :header-cell-style="{ background: '#F5F5F5', fontSize: '18px' }"
              border
              height="810px"
              stripe
              style="width: 100%; border: 1px solid #9e9b9b"
              tooltip-effect="dark"
          >
            <el-table-column align="center" label="序号" width="70px">
              <template slot-scope="scope">
                {{ scope.row.RowNum }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="测量位置">
              <template slot-scope="scope">
                {{ scope.row.测量位置 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="测量项目">
              <template slot-scope="scope">
                {{ scope.row.测量项目 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="测量值" width="100px">
              <template slot-scope="scope">
                {{ scope.row.测量值 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="单位" width="80px">
              <template slot-scope="scope">
                {{ scope.row.单位 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="是否合格" width="100px">
              <template slot-scope="scope">
                <i v-if="scope.row.合格标志 === 'OK'"><span style="font-size: x-large;font-weight: 700;color: #67c23a">OK</span></i>
                <i v-else><span style="font-size: x-large;font-weight: 700;color: #ff0000">NG</span></i>
              </template>
            </el-table-column>
            <!--            <el-table-column align="center" label="测量时间" min-width="120px">-->
            <!--              <template slot-scope="scope">-->
            <!--                {{ scope.row.离开时间 }}-->
            <!--              </template>-->
            <!--            </el-table-column>-->
          </el-table>
        </el-col>
      </el-row>
    </el-row>
    <el-dialog
        :append-to-body="true"
        title="质量数据曲线"
        :visible.sync="dialogFormVisible1"
        top="25vh"
        center
        class="qualityDataDialog"
        style="text-align: center"
        width="800px"
        @opened="drawLineData"
    >
      <div style="text-align: center">
        <div>
          <div id="qualityDataDom" style="height: 400px"></div>
        </div>
        <div style="margin-top: 10px">
          <el-button class="el-icon-close" style="width: 100px;height: 40px;" type="success" @click="cancel()">关闭</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog
        :append-to-body="true"
        title="检测照片"
        :visible.sync="dialogFormVisible2"
        center
        top="25vh"
        class="qualityDataDialog"
        style="text-align: center"
        width="800px"
    >
      <div style="text-align: center">
        <div style="height: 400px">
          <el-col :span="4">
            <div v-for="(item, index) in picList" :key="index">
              <el-link type="primary" @click="showPic(item)">{{index + 1}}.{{item.图片名称}}</el-link>
            </div>
          </el-col>
          <el-col :span="20">
            <div style="border: 1px solid #00893d;overflow: auto">
              <el-image
                  style="width: 100%;"
                  :src="picUrl"
                  fit="fill"
                  :preview-src-list="srcList">
              </el-image>

            </div>
          </el-col>
        </div>
        <div style="margin-top: 10px">
          <el-button class="el-icon-close" style="width: 100px;height: 40px;" type="success" @click="cancel()">关闭</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import axios from 'axios'
// import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      checked: false,
      Type: [{ label: '', value: '' }],
      count: true,
      text1: '正常生产订单',
      text2: '无订单生产',
      intdex: true,
      xianshou: '',
      orderCompletion_table1: [],
      orderCompletion_table2: [],
      PersonaSex: [],
      jixingName: [],
      Sex: [],
      title: '',
      publication: {
        topic: '',
        qos: 0,
        payload: ''
      },
      // 质量数据列表
      qualityData: [],
      picUrl: '',
      srcList: [],
      picList: [{ 图片名称: '测试图片1.png', url: '../testPic/1.png' }, { 图片名称: '测试图片2.png', url: '../leftPic.jpg' }, { 图片名称: '测试图片3.png', url: '../leftPic.jpg' }],
      dialogFormVisible1: false,
      dialogFormVisible2: false,
      form1: {
        订单号: '',
        产品型号: '',
        零件号: '',
        计划数量: '',
        完成数量: '',
        计划时间: '',
        状态: ''
      },
      rules: {
        排序: [{ required: true, message: '序号为空', trigger: 'change' }],
        订单号: [{ required: true, message: '订单号为空', trigger: 'change' }],
        产品机型: [{ required: true, message: '产品机型为空', trigger: 'change' }],
        零件号: [{ required: true, message: '机型代码为空', trigger: 'change' }],
        计划数量: [{ required: true, message: '计划数量为空', trigger: 'change' }],
        完成数量: [{ required: true, message: '完成数量为空', trigger: 'change' }],
        计划时间: [{ required: true, message: '计划时间为空', trigger: 'change' }],
        状态: [{ required: true, message: '状态为空', trigger: 'change' }]
      }
    }
  },
  created() {
    this.getQualityData()
  },
  // watch: {
  //   orderCompletion_table: {
  //     handler(newValue, oldName) {
  //       this.orderCompletion_table1 = newValue
  //     },
  //     immediate: true,
  //     deep: true
  //   }

  // },
  // computed: {
  //   ...mapGetters([
  //     'orderCompletion_table'
  //   ])
  // },
  methods: {
    tableRowClassName({ row }) {
      if (row.合格标志 === '1') {
        return 'green'
      } else {
        return 'red'
      }
    },
    getQualityData() {
      const param = []
      this.orderCompletion_table1 = []
      this.orderCompletion_table2 = []
      param[0] = ['工位号', this.$store.state.station.stationNumber]
      param[1] = ['查询工位号', this.$store.state.station.stationNumber]
      const Data = this.CreateData('11', '显示测量数据_工位数据_查询', param)
      this.ExecDatabase(Data).then(response => {
        this.splitDataToTables(response.data)
      })
    },
    splitDataToTables(data) {
      const len = data.length
      if (len > 30) {
        // 平分数据，奇数时table1多1个
        const splitIndex = Math.ceil(len / 2)
        this.orderCompletion_table1 = data.slice(0, splitIndex)
        this.orderCompletion_table2 = data.slice(splitIndex)
      } else if (len > 15) { // 15 < len ≤ 30
        this.orderCompletion_table1 = data.slice(0, 15)
        this.orderCompletion_table2 = data.slice(15)
      } else { // len ≤ 15
        this.orderCompletion_table1 = [...data]
      }
    },

    changeRadio() {
      if (this.checked) {
        this.intdex = false
        if (this.xianshou === 1) {
          this.count = true
        }
      } else if (!this.checked) {
        this.intdex = true
        if (this.xianshou === 1) {
          this.count = false
        }
      }
    },
    cancel() {
      this.dialogFormVisible1 = false
      this.dialogFormVisible2 = false
    },
    confirm11(form) {
      const param = []
      param[0] = ['工位号', this.$store.state.station.stationNumber]
      param[1] = ['订单号', this.form1.订单号]
      const Data2 = this.CreateData('12', '测量数据工位_监控系统_订单号_增加', param)
      this.ExecDatabase(Data2).then(response => {
        if (response.data[0].result === '1') {
          this.$notify.success({
            title: '提示',
            message: '订单选择成功！',
            position: 'bottom-right',
            offset: 170
          })
        } else {
          this.$message.error('订单选择失败')
        }
        this.getTable()
      })
      // this.publication.topic = window.g.mqttPublishTopic
      // this.publication.payload  = 'WEB|SetMoby|' + this.$store.state.station.stationNumber + '|' + '1'
      // const result = window.g.mqttClient.doPublish(this.publication)
      // if (result === true) {
      //   this.$notify.success({
      //     title: '提示',
      //     message: '订单增加传递成功！',
      //     position: 'bottom-right',
      //     offset: 170
      //   })
      // } else {
      //   this.$notify.error({
      //     title: '提示',
      //     message: '订单增加传递失败！',
      //     position: 'bottom-right',
      //     offset: 170
      //   })
      // }
      this.dialogFormVisible1 = false
    },
    getTable() {
      const param = []
      param[0] = ['工位号', this.$store.state.station.stationNumber]
      const Data = this.CreateData('11', '测量数据发动机在线状态_工位数据_查询', param)
      this.ExecDatabase(Data).then(response => {
        this.orderCompletion_table1 = response.data
      })
    },
    chooseLineData() {
      this.dialogFormVisible1 = true
    },
    choosePicData() {
      this.dialogFormVisible2 = true
    },
    drawLineData() {
      const myChart = echarts.init(document.getElementById('qualityDataDom'))
      myChart.clear()
      const option = {
        xAxis: {
          type: 'category',
          data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
            11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
            21, 22, 23, 24, 25, 26, 27, 28, 29, 30,
            31, 32, 33, 34, 35, 36, 37, 38, 39, 40,
            41, 42, 43, 44, 45, 46, 47, 48, 49, 50,
            51, 52, 53, 54, 55, 56, 57, 58, 59, 60,
            61, 62, 63, 64, 65, 66, 67, 68, 69, 70,
            71, 72, 73, 74, 75, 76, 77, 78, 79, 80,
            81, 82, 83, 84, 85, 86, 87, 88, 89, 90,
            91, 92, 93, 94, 95, 96, 97, 98, 99, 100]
        },
        yAxis: {
          type: 'value',
          min: 8,
          max: 11,
          axisLine: {
            show: true
          }
        },
        series: [
          {
            data: [9.12, 9.45, 9.67, 9.23, 9.88, 9.34, 9.56, 9.78, 9.11, 9.99,
              9.22, 9.33, 9.44, 9.55, 9.66, 9.77, 9.89, 9.01, 9.14, 9.25,
              9.36, 9.47, 9.58, 9.69, 9.80, 9.91, 9.02, 9.13, 9.24, 9.35,
              9.46, 9.57, 9.68, 9.79, 9.90, 9.03, 9.15, 9.26, 9.37, 9.48,
              9.59, 9.70, 9.81, 9.92, 9.04, 9.16, 9.27, 9.38, 9.49, 9.60,
              9.71, 9.82, 9.93, 9.05, 9.17, 9.28, 9.39, 9.50, 9.61, 9.72,
              9.83, 9.94, 9.06, 9.18, 9.29, 9.40, 9.51, 9.62, 9.73, 9.84,
              9.95, 9.07, 9.19, 9.30, 9.41, 9.52, 9.63, 9.74, 9.85, 9.96,
              9.08, 9.20, 9.31, 9.42, 9.53, 9.64, 9.75, 9.86, 9.97, 9.09,
              9.21, 9.32, 9.43, 9.54, 9.65, 9.76, 9.87, 9.98, 9.10, 9.00],
            type: 'line',
            smooth: true,
            markLine: {
              data: [
                {
                  type: 'average',
                  name: 'Avg'
                },
                {
                  // 起点和终点的项会共用一个 name
                  name: '最小值到最大值',
                  type: 'min'
                },
                {
                  type: 'max'
                }
              ]
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    showPic(item) {
      axios.get(item.url, {
        responseType: 'arraybuffer'
      }).then(res => {
        this.picUrl = 'data:image/jpeg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data +
            String.fromCharCode(byte), ''))
        this.srcList = [this.picUrl]
      })
    }
  }
}
</script>

<style scoped>
::v-deep .el-dialog__header {
  background-color: #d7dee6;
}

::v-deep .el-dialog__body {
  background-color: #d7dee6;
}

::v-deep .el-dialog__title {
  font-size: x-large;
}

::v-deep .cell {
  font-size: large;
  color: black;
}

::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
  background-color: #cedcf3;
}

::v-deep.el-table th.el-table__cell > .cell {
  font-size: 18px;
  color: #2f2f2f;
}

::v-deep.qualityDataDialog .el-table th.el-table__cell > .cell {
  font-size: 18px;
  color: #2f2f2f;
}

::v-deep.el-table .green {
  background: rgba(0, 128, 0, 0.7) !important;
}

::v-deep.el-table .red {
  background: rgba(255, 0, 0, 0.7) !important;
}
</style>
