<template>
  <div class="app-container">
    <el-card class="topCard">
      <div class="topDiv">
        <!--        <span style="margin-left: 10px">班次类型：</span>-->
        <!--        <el-select v-model="dataTypeValue" placeholder="班次类型" size="small" style="width:150px">-->
        <!--          <el-option-->
        <!--            label="白班"-->
        <!--            value="1"/>-->
        <!--          <el-option-->
        <!--            label="夜班"-->
        <!--            value="2"/>-->
        <!--        </el-select>-->
        <!--        <span style="margin-left: 10px">日志描述：</span>-->
        <span style="margin-left: 10px">时间：</span>
        <el-date-picker
          v-model="dateTime"
          :clearable="false"
          align="center"
          format="yyyy-MM-dd"
          size="small"
          style="width: 240px;"
          type="date"
          value-format="yyyy-MM-dd"
        />
        <el-button
          icon="el-icon-search"
          plain
          size="small"
          style="margin-left: 5px"
          type="primary"
          @click="searchTable()">查询
        </el-button>
        <el-button type="info" plain size="small" icon="el-icon-download" @click="exportExcel()">导出</el-button>

        <el-button icon="el-icon-circle-plus-outline" size="small" type="distribution" @click="addTo">计划停机修改
        </el-button>
        <!--        <el-button icon="el-icon-circle-plus-outline" size="small" type="distribution" @click="addErrorStopWork">-->
        <!--          故障停机记录-->
        <!--        </el-button>-->
        <!--        <el-button icon="el-icon-time" size="small" type="primary" @click="showErrorStopWork">-->
        <!--          故障停机记录查询-->
        <!--        </el-button>-->
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        :expand-row-keys="expandsDetail"
        :row-key="getRowKeys"
        border
        center
        height="740"
        highlight-current-row
        size="mini"
        style="width: 100%"
        @expand-change="selectPlan">
        <!--<el-table-column width="40" label="序号" type="index" align="center"/>-->
        <el-table-column align="center" fixed label="" type="expand" width="35">
          <template slot-scope="scope">
            <div style="display: flex">
              <div style="margin: 5px 10px;width: 1600px;z-index: 99;">
                <el-table
                  :data="passTableData"
                  :header-cell-style="{ background: '#e5e7f8', color: '#606266' }"
                  border
                  class="main"
                  element-loading-background="rgba(0, 0, 0, 0.2)"
                  element-loading-spinner="el-icon-loading"
                  element-loading-text="数据加载中"
                  max-height="400px"
                  size="mini"
                  style="width: 100%"
                  tooltip-effect="dark">
                  <el-table-column align="center" label="序号" type="index" width="40"/>
                  <el-table-column align="center" label="订单号" width="130">
                    <template slot-scope="scope">
                      {{ scope.row.订单号 }}
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="总成条码" width="400">
                    <template slot-scope="scope">
                      {{ scope.row.发动机号 }}
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="机型" width="100">
                    <template slot-scope="scope">
                      {{ scope.row.发动机型号 }}
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="操作者工号" width="100">
                    <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">-->
                  <!--    <el-button size="mini" type="text" icon="el-icon-success" @click="printMqttShow(scope.row)">打印条码</el-button>-->
                  <!--  </template>-->
                  <!--</el-table-column>-->
                </el-table>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="工位号" width="120">
          <template slot-scope="scope">
            {{ scope.row.工位号 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="日期" width="90">
          <template slot-scope="scope">
            {{ scope.row.日期 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="总时间" width="70">
          <template slot-scope="scope">
            {{ scope.row.总时间 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="早会" width="70">
          <template slot-scope="scope">
            {{ scope.row.早会 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="间休" width="70">
          <template slot-scope="scope">
            {{ scope.row.间休 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="午餐" width="70">
          <template slot-scope="scope">
            {{ scope.row.午餐 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="晚休" width="70">
          <template slot-scope="scope">
            {{ scope.row.晚休 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="晚餐" width="70">
          <template slot-scope="scope">
            {{ scope.row.晚餐 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="负荷时间" width="90">
          <template slot-scope="scope">
            {{ scope.row.负荷时间 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="生产" width="70">
          <template slot-scope="scope">
            {{ scope.row.生产 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="质量" width="70">
          <template slot-scope="scope">
            {{ scope.row.质量 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="设备" width="70">
          <template slot-scope="scope">
            {{ scope.row.设备 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="物流" width="70">
          <template slot-scope="scope">
            {{ scope.row.物流 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="开动时间" width="90">
          <template slot-scope="scope">
            {{ scope.row.开动时间 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="时间利用率" width="100">
          <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="性能利用率" width="100">
          <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="OEE">
          <template slot-scope="scope">
            {{ scope.row.OEE }}
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog
      :visible.sync="dialogFormVisible"
      center
      style="min-height: 200px;"
      title="计划停机时间修改"
      width="400px">
      <el-form ref="form1" :model="planStopTimeFrom" label-position="right" label-width="110px">
        <el-form-item label="总时间:" prop="number" style="display: inline-block">
          <el-input-number v-model="planStopTimeFrom.总时间" :min="0" label="总时间"/>
        </el-form-item>
        <el-form-item label="早会:" prop="number" style="display: inline-block">
          <el-input-number v-model="planStopTimeFrom.早会" :min="0" label="早会"/>
        </el-form-item>
        <el-form-item label="间休:" prop="number" style="display: inline-block">
          <el-input-number v-model="planStopTimeFrom.间休" :min="0" label="间休"/>
        </el-form-item>
        <el-form-item label="午餐:" prop="number" style="display: inline-block">
          <el-input-number v-model="planStopTimeFrom.午餐" :min="0" label="午餐"/>
        </el-form-item>
        <el-form-item label="晚休:" prop="number" style="display: inline-block">
          <el-input-number v-model="planStopTimeFrom.晚休" :min="0" label="晚休"/>
        </el-form-item>
        <el-form-item label="晚餐:" prop="number" style="display: inline-block">
          <el-input-number v-model="planStopTimeFrom.晚餐" :min="0" label="晚餐"/>
        </el-form-item>
        <el-form-item label="桥壳节拍:" prop="number" style="display: inline-block">
          <el-input-number v-model="planStopTimeFrom.节拍桥壳" :min="0" label="5S节拍"/>
        </el-form-item>
        <el-form-item label="轮毂节拍:" prop="number" style="display: inline-block">
          <el-input-number v-model="planStopTimeFrom.节拍轮毂" :min="0" label="6S节拍"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible = false">取消</el-button>
        <el-button size="small" type="primary" @click="submitUpdate()">确定</el-button>
      </div>
    </el-dialog>
    <!--// 停机结束弹出框-->
    <el-dialog
      :append-to-body="true"
      :visible.sync="isShowFaultEnd"
      center
      style="text-align: center"
      title="停机结束"
      width="500px">
      <div style="text-align: center">
        <el-form
          ref="faultStartFormRef"
          label-position="left"
          label-width="130px"
          style="width: 100%;margin: auto"
        >
          <el-form-item label="工位号" prop="engineTypeValue" style="display: inline-block;width: 60%">
            <el-select
              v-model="faultEndForm.opName"
              placeholder="请选择工位号"
              size="small">
              <el-option
                v-for="item in stationNumber"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                size="mini"/>
            </el-select>
          </el-form-item>
          <el-form-item label="故障开始时间" prop="engineTypeValue" style="display: inline-block;width: 60%">
            <el-date-picker
              v-model="faultEndForm.startTime"
              placeholder="请选择故障开始时间"
              size="small"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              @change="faultStartEndTimeChange()"/>
          </el-form-item>
          <el-form-item label="故障结束时间" prop="engineTypeValue" style="display: inline-block;width: 60%">
            <el-date-picker
              v-model="faultEndForm.endTime"
              placeholder="请选择故障结束时间"
              size="small"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              @change="faultStartEndTimeChange()"/>
          </el-form-item>
          <el-form-item label="停机时长(秒)" prop="engineTypeValue" style="display: inline-block;width: 60%">
            <el-input-number
              v-model="faultEndForm.stopTIme"
              :max="9999999999999999999999"
              :precision="0"
              :step="1"
              size="small"
              style="width:200px;"/>
          </el-form-item>
          <el-form-item label="停机时长" prop="engineTypeValue" style="display: inline-block;width: 60%">
            <el-input v-model="faultEndForm.stopTimeStr" placeholder="停机时长" size="small" style="width:200px;"/>
          </el-form-item>
          <el-form-item label="故障处理人工号" prop="engineTypeValue" style="display: inline-block;width: 60%">
            <el-input
              v-model="faultEndForm.handlinger"
              placeholder="请输入故障处理人"
              size="small"
              style="width:200px;"/>
          </el-form-item>
          <el-form-item label="停机原因" prop="engineTypeValue" style="display: inline-block;width: 60%">
            <el-input
              v-model="faultEndForm.stopCause"
              :rows="2"
              placeholder="请输入停机原因"
              style="height: 42px;width: 200px"
              type="textarea"/>
          </el-form-item>
          <el-form-item label="故障停机类型" prop="engineTypeValue" style="display: inline-block;width: 60%">
            <el-select
              v-model="faultEndForm.faultType"
              placeholder="请选择故障类型"
              size="small">
              <el-option
                v-for="item in faultTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                size="mini"/>
            </el-select>
          </el-form-item>
          <!--底部按钮-->
          <div style="text-align: center; margin-top: 20px">
            <el-button class="el-icon-check" type="primary" @click="faultEndSubmit()">确定</el-button>
            <el-button class="el-icon-close" style="margin-left: 50px" @click="isShowFaultEnd = false">关闭</el-button>
          </div>
        </el-form>
      </div>
    </el-dialog>
    <!--// 停机结束记录查询-->
    <el-dialog
      :append-to-body="true"
      :visible.sync="isShowFaultEndTable"
      center
      style="text-align: center"
      title="停机记录查询"
      width="900px">
      <div style="text-align: center">
        <el-table
          :data="faultEndTable"
          border
          center
          height="540"
          size="mini"
          style="width: 100%">
          <el-table-column width="40" label="序号" type="index" align="center"/>
          <el-table-column align="center" label="停机类型" width="120">
            <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="90">
            <template slot-scope="scope">
              {{ scope.row.停机时长 }}秒
            </template>
          </el-table-column>
          <el-table-column align="center" label="停机时长统计" width="130">
            <template slot-scope="scope">
              {{ scope.row.停机时长统计 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="故障处理人" width="110">
            <template slot-scope="scope">
              {{ scope.row.故障处理人 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="开始时间" width="140">
            <template slot-scope="scope">
              {{ scope.row.开始时间 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="结束时间" width="140">
            <template slot-scope="scope">
              {{ scope.row.结束时间 }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      tableData: [],
      expands: [],
      expandsDetail: [],
      dataType: [], // 日志类型数组
      dataTypeValue: '1', // 班次类型
      valueType: [],
      valueTypeValue: '',
      alarmType: [],
      alarmTypeValue: '',
      dateTime: '', // 时间
      passTableData: [],
      faultEndTable: [],
      dialogFormVisible: false,
      planStopTimeFrom: {},
      faultEndForm: {
        opName: '',
        startTime: '', // 开始时间
        endTime: '', // 结束时间
        handlinger: '', // 故障处理人
        stopTIme: '', // 停机时间
        stopCause: '', // 停机原因
        stopTimeStr: '', // 停机时间中文
        faultType: '',
        stationName: ''
      },
      stationNumber: [], // 工位号
      faultTypeList: [
        {
          value: '1',
          label: '生产停机'
        },
        {
          value: '2',
          label: '质量停机'
        },
        {
          value: '3',
          label: '设备停机'
        },
        {
          value: '4',
          label: '物流停机'
        }
      ], // 故障类型列表
      isShowFaultEnd: false,
      // 显示故障结束表格
      isShowFaultEndTable: false
    }
  },
  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
    this.searchTable()
    this.getStationNumber()
  },
  methods: {// 工位号
    getStationNumber() {
      this.stationNumber = []
      var param = []
      var Data = this.CreateData('11', 'MES_计划BOM_工位与名称_查询', param)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.stationNumber.push({
            label: response.data[i].工位号,
            value: response.data[i].工位号
          })
        }
      })
    },
    // 控制展开列
    selectPlan(row, expandedRows) {
      if (expandedRows.length) {
        this.expandsDetail = []
        if (row) {
          this.passTableData = []
          var param = []
          param[0] = ['工位号', row.工位号]
          param[1] = ['日期', row.日期]
          var Data = this.CreateData('11', '测量数据发动机在线状态_工位数据_日期_查询', param)
          this.ExecDatabase(Data).then(response => {
            console.log(response.data)
            if (response.data.length !== 0) {
              this.passTableData = response.data
            }
            this.expandsDetail.push(row.工位号)
          })
        }
      } else {
        this.expandsDetail = []
      }
    },
    // 停机开始结束时间发生改变
    faultStartEndTimeChange() {
      if (this.faultEndForm.startTime && this.faultEndForm.endTime) {
        this.faultEndForm.stopTIme = (new Date(this.faultEndForm.endTime) - new Date(this.faultEndForm.startTime)) / 1000
        this.faultEndForm.stopTimeStr = this.getSecondTurnDate(this.faultEndForm.stopTIme)
      }
    },
    // 将秒转为日 时 分 秒
    getSecondTurnDate(seconds) {
      let d = Math.floor(seconds / (3600 * 24))
      let h = Math.floor(seconds % (3600 * 24) / 3600)
      let m = Math.floor(seconds % 3600 / 60)
      let s = Math.floor(seconds % 60)

      d = d > 10 ? d : '0' + d
      h = h > 10 ? h : '0' + h
      m = m > 10 ? m : '0' + m
      s = s > 10 ? s : '0' + s

      d = parseInt(seconds / 60 / 60 / 24) // 计算天数
      h = parseInt(seconds / 60 / 60 % 24) // 计算小时
      m = parseInt(seconds / 60 % 60) // 计算分数
      s = parseInt(seconds % 60) // 计算当前秒数

      let timeStr = s + '秒'
      if (m !== 0) {
        timeStr = m + '分 ' + timeStr
      }
      if (h !== 0) {
        timeStr = h + '小时 ' + timeStr
      }
      if (d !== 0) {
        timeStr = d + '天 ' + timeStr
      }
      return timeStr
    },
    // 获取展开列的工单号
    getRowKeys(row) {
      return row.工位号
    },
    searchTable() {
      this.loading = true
      this.tableData = []
      var param = []
      param[0] = ['date', this.dateTime]
      // param[1] = ['班次代码', this.dataTypeValue]
      var Data = this.CreateData('11', 'MES_OEE计算_查询', param)
      this.ExecDatabase(Data).then(response => {
        this.loading = false
        if (response.data.length !== 0) {
          this.tableData = response.data
        }
      })
    },
    exportExcel() {
      if (this.tableData.length !== 0) {
        var param = []
        param[0] = ['date', this.dateTime]
        var Data = this.CreateData('2001', 'MES_OEE计算_查询', param)
        this.exportExcel_NPOI(Data)
      } else {
        this.$message.warning('暂无数据')
      }
    },
    // 故障结束提交
    faultEndSubmit() {
      var param = []
      param[0] = ['工位号', this.faultEndForm.opName]
      param[1] = ['故障处理人', this.faultEndForm.handlinger]
      param[2] = ['结束时间', this.faultEndForm.endTime]
      param[3] = ['开始时间', this.faultEndForm.startTime]
      param[4] = ['停机时长', this.faultEndForm.stopTIme]
      param[5] = ['停机时长统计', this.faultEndForm.stopTimeStr]
      param[6] = ['停机原因', this.faultEndForm.stopCause]
      param[7] = ['停机类型', this.faultEndForm.faultType]
      var Data = this.CreateData('12', '合力_停机记录_结束', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data[0].result === '1') {
          this.$message({
            message: '停机结束提交成功',
            type: 'success'
          })
          // 查询更新后的功能按钮列表
          this.searchTable()
          this.isShowFaultEnd = false
        } else {
          this.$message({
            message: '停机结束提交失败',
            type: 'error'
          })
        }
      })
    },
    // 异常停机记录
    addErrorStopWork() {
      this.isShowFaultEnd = true
    },
    showErrorStopWork() {
      var param = []
      var Data = this.CreateData('11', '合力_停机记录_查询', param)
      this.ExecDatabase(Data).then(response => {
        this.faultEndTable = response.data
      })
      this.isShowFaultEndTable = true
    },
    addTo() {
      this.dialogFormVisible = true
      // 将当前数据查询到表单中
      this.planStopTimeFrom = { ...this.tableData[1] }
    },
    // 提交修改计划停机时间
    submitUpdate() {
      var param = []
      param[0] = ['日期', this.dateTime]
      param[1] = ['总时间', this.planStopTimeFrom.总时间]
      param[2] = ['早会 ', this.planStopTimeFrom.早会]
      param[3] = ['间休 ', this.planStopTimeFrom.间休]
      param[4] = ['午餐 ', this.planStopTimeFrom.午餐]
      param[5] = ['晚休 ', this.planStopTimeFrom.晚休]
      param[6] = ['晚餐 ', this.planStopTimeFrom.晚餐]
      param[7] = ['节拍桥壳', this.planStopTimeFrom.节拍桥壳]
      param[8] = ['节拍轮毂', this.planStopTimeFrom.节拍轮毂]
      var Data = this.CreateData('12', '合力_计划停机时间表_修改', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data[0].result == 1) {
          this.$message.success('修改成功！')
          this.searchTable()
          this.dialogFormVisible = false
        } else {
          this.$message.error('修改失败！')
        }
      })
    }
  }
}
</script>

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