mt-ck-wms-ui/src/views/EquipmentManager/equipmentUtilizationRate/MCBF.vue

<!--
 * @Author: DY
 * @Date: 2021-12-16 15:41:11
 * @LastEditors: DY
 * @LastEditTime: 2022-03-03 15:26:28
 * @Description: MCBF
-->
<template>
  <div class="app-container">
    <el-form
      :model="formData"
      :inline="true"
      size="medium"
      label-width="80px"
    >
      <el-form-item>
        <el-button @click="toE10()">E10</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="toOEE()">OEE</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="toMTTR()">MTTR</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="toMCBF()">MCBF</el-button>
      </el-form-item>
      <!-- <el-form-item :label="$t('module.equipmentManager.recipe.equipmentId')" prop="equipmentName">
        <el-select v-model="formData.equipmentName" :placeholder="$t('module.equipmentManager.recipe.EQselect')" filterable clearable>
          <el-option
            v-for="(item, index) in eqList"
            :key="index"
            :label="item.name"
            :value="item.name"
          />
        </el-select>
      </el-form-item> -->
      <el-form-item :label="$t('module.equipmentManager.equipmentVisualization.timeSlot')" label-width="100px" prop="time">
        <el-date-picker
          v-model="formData.timeSlot"
          type="datetimerange"
          :start-placeholder="$t('module.orderManage.order.StartTime')"
          :end-placeholder="$t('module.orderManage.order.StartTime')"
          :range-separator="$t('module.orderManage.order.To')"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getList()"> {{ 'btn.search' | i18nFilter }} </el-button>
      </el-form-item>
      <!-- <el-form-item>
        <el-button type="primary" @click="getList()"> {{ 'btn.exportBtn' | i18nFilter }} </el-button>
      </el-form-item> -->
    </el-form>
    <mcbfChart v-if="mcbfVisible" ref="mcbfChart" :time1="startTime" :time2="endTime" @equipmentName="seeDetail" />
    <mcbf-detail-chart v-if="mcbfDetail" ref="mcbfDetailChart" :time1="startTime" :time2="endTime" :equipment-name="equipmentName" />
  </div>
</template>

<script>
import mcbfChart from './components/mcbf-chart'
import mcbfDetailChart from './components/mcbfDetail-chart'
// import { equipmentList } from '@/api/basicData/Equipment/equipmentInfo'

export default {
  name: 'MCBF',
  components: { mcbfChart, mcbfDetailChart },
  data() {
    return {
      list: [],
      startTime: '',
      endTime: '',
      formData: {
        timeSlot: [],
        current: 1,
        size: 10
      },
      mcbfVisible: false,
      mcbfDetail: false,
      equipmentName: '',
      eqList: []
    }
  },
  created() {
    // this.getEqList()
    this.getList()
  },
  methods: {
    async getEqList() {
      const res = await equipmentList({
        current: 1,
        size: 999
      })
      if (res.code === 0) {
        this.eqList = res.data
      }
    },
    toE10() {
      this.$router.push({
        name: 'E10'
      })
    },
    toOEE() {
      this.$router.push({
        name: 'OEE'
      })
    },
    toMTTR() {
      this.$router.push({
        name: 'MTTR'
      })
    },
    toMCBF() {
      this.$router.push({
        name: 'MCBF'
      })
    },
    seeDetail(name) {
      this.equipmentName = name
      this.mcbfVisible = false
      this.mcbfDetail = true
      setTimeout(() => {
        this.$refs.mcbfDetailChart.getList()
      }, 60)
    },
    getList() {
      if (this.formData.timeSlot.length !== 0) {
        this.startTime = this.formData.timeSlot[0]
        this.endTime = this.formData.timeSlot[1]
        this.$nextTick(() => {
          this.mcbfVisible = true
          setTimeout(() => {
            this.$refs.mcbfChart.getList()
          }, 60)
        })
      }
    }
  }
}
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>