<template>
  <div class="app-container">
    <el-card class="topCard">
      <div class="topDiv">
        <span style="margin-left: 10px">月份：</span>
        <el-date-picker
          v-model="dateTime"
          :clearable="false"
          align="center"
          end-placeholder="结束日期"
          format="yyyy-MM"
          range-separator="～"
          size="small"
          start-placeholder="开始日期"
          style="width: 240px;"
          type="month"
          value-format="yyyy-MM"/>
        <el-button
          icon="el-icon-search"
          plain
          size="small"
          style="margin-left: 5px"
          type="primary"
          @click="pageSize=50;pageCurrent=1;searchTable()">查询
        </el-button>
        <!--        <el-button type="success" plain icon="el-icon-document-copy" size="small" @click="copyData('form4')">复制</el-button>-->
        <span style="margin-left: 20px;font-size: 17px"><i class="el-icon-s-order" style="font-size: 20px"/> 月计划数：<span
          style="font-size: 18px;color:#b94a48">{{ monthPlanCount }}</span></span>
        <span style="margin-left: 20px;font-size: 17px"><i class="el-icon-upload2" style="font-size: 20px"/> 月上线数：<span
          style="font-size: 18px;color:#b94a48">{{ monthUpLineCount }}</span></span>
        <span style="margin-left: 20px;font-size: 17px"><i class="el-icon-download" style="font-size: 20px"/> 月下线数：<span
          style="font-size: 18px;color:#b94a48">{{ monthOutLineCount }}</span></span>
        <span style="margin-left: 20px;font-size: 17px"><i class="el-icon-s-claim" style="font-size: 20px"/> 月合格数：<span
          style="font-size: 18px;color:#b94a48">{{ monthOkCount }}</span></span>
        <span style="margin-left: 20px;font-size: 17px"><i class="el-icon-s-release" style="font-size: 20px"/> 月不合格数：<span
          style="font-size: 18px;color:#b94a48">{{ monthNgCount }}</span></span>
        <span style="margin-left: 20px;font-size: 17px"><i class="el-icon-s-marketing" style="font-size: 20px"/> 月合格率：<span
          style="font-size: 18px;color:#b94a48">{{ monthOkRatio }}%</span></span>

      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        center
        height="740"
        highlight-current-row
        size="mini"
        style="width: 100%">
        <el-table-column align="center" label="序号" type="index" width="60"/>
        <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="上线数">
          <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="合格数">
          <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="合格率">
          <template slot-scope="scope">
            {{ scope.row.每日合格率 }}
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      tableData: [],
      dataType: [], // 日志类型数组
      dataTypeValue: '', // 日志类型
      valueType: [],
      valueTypeValue: '',
      alarmType: [],
      alarmTypeValue: '',
      dateTime: '', // 时间
      dialogFormVisible: false,
      dialogFormVisible4: false,
      form4: {
        engineTypeValue: ''
      },
      rules4: { // 订单下发验证
        engineTypeValue: [{ required: true, message: '请选择', trigger: 'blur' }]
      },
      title: '',
      form: {
        tagID: '',
        stationNo: '',
        measurementItems: '',
        valueName: ''
      },
      rules: { // 表单验证规则
      },
      total: 0, // 总条数
      pageList: 50, // 每页显示条数
      pageSize: 50, // 每页显示条数
      pageCurrent: 1, // 后台获取页
      monthPlanCount: 0, // 月计划数
      monthUpLineCount: 0, // 月上线数
      monthOutLineCount: 0, // 月下线数
      monthOkCount: 0, // 月合格数
      monthNgCount: 0, // 月不合格数
      monthOkRatio: 0 // 月合格率
    }
  },
  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
    console.log(audiTime, 'audiTime')
    this.dateTime = audiTime
    this.getDataType()
    this.searchTable()
  },
  methods: {
    getDataType() {
      this.dataType = []
      var param = []
      var Data = this.CreateData('11', 'MES_计划BOM_工位与名称_查询', param)
      this.ExecDatabase(Data).then(response => {
        for (const item of response.data) {
          console.log(item)
          this.dataType.push({
            lable: item.工位号,
            value: item.工位号
          })
        }
      })
    },
    searchTable() {
      this.loading = true

      this.monthPlanCount = 0
      this.monthUpLineCount = 0
      this.monthOutLineCount = 0
      this.monthOkCount = 0
      this.monthNgCount = 0
      this.monthOkRatio = 0

      this.tableData = []
      var param = []
      param[0] = ['date', this.dateTime]
      var Data = this.CreateData('11', 'MES_看板统计_查询', param)
      this.ExecDatabase(Data).then(response => {
        console.log(response, 66)
        if (response.data.length !== 0) {
          this.tableData = response.data

          this.monthPlanCount = 0
          this.monthUpLineCount = 0
          this.monthOutLineCount = 0
          this.monthOkCount = 0
          this.monthNgCount = 0
          this.monthOkRatio = 0
          for (const item of response.data) {
            this.monthPlanCount += item.每日计划数
            this.monthUpLineCount += item.每日上线数
            this.monthOutLineCount += item.每日下线数
            this.monthOkCount += item.每日合格数
            this.monthNgCount += item.每日不合格数
          }
          this.monthOkRatio = (this.monthOkCount / this.monthOutLineCount * 100).toFixed(3)
        }
        this.loading = false
      })
    },
    callOff() {
      this.dialogFormVisible = false
    },
    // 分页
    handleSizeChange(val) {
      this.pageCurrent = 1
      this.pageSize = val
      this.searchTable()
    },
    handleCurrentChange(val) {
      this.pageCurrent = val
      this.searchTable()
    }
  }
}
</script>

<style scoped>
.topDiv {
  margin-bottom: 10px;
}
</style>
