mt-ck-wms-ui/src/views/EquipmentManager/equipmentUtilizationRate/components/oeeDetail-chart.vue

<!--
 * @Author: DY
 * @Date: 2021-12-13 16:39:34
 * @LastEditors: DY
 * @LastEditTime: 2022-03-03 16:37:49
 * @Description:OEE详情堆积图
-->
<template>
  <div>
    <div>
      <el-button-group>
        <el-button @click="byYear">年</el-button>
        <el-button @click="byQuarterly">季度</el-button>
        <el-button @click="byMonth">月</el-button>
        <el-button @click="byWeek">周</el-button>
        <el-button @click="byDay">天</el-button>
      </el-button-group>
    </div>
    <div id="monitorChart" :style="{width: '700px', height: '550px'}" style="margin-left:10%" />
    <oee-table v-if="tableVisible" ref="tableRef" :table-data="tableData" :equipment-name="name" />
  </div>
</template>

<script>
import echarts from 'echarts'
// import { getOEEDetail } from '@/api/equipment/infoPandect'
import OeeTable from './OeeTable'

export default {
  components: { OeeTable },
  props: {
    time1: {
      type: Date,
      default: () => {
        return ''
      }
    },
    time2: {
      type: Date,
      default: () => {
        return ''
      }
    },
    equipmentName: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  data() {
    return {
      chart: null,
      tableVisible: false,
      equipmentDetail: [],
      tableData: [],
      list: [],
      xDataList: [],
      oeeList: [],
      startTime: '',
      endTime: '',
      name: ''
    }
  },
  mounted() {
    this.startTime = this.time1
    this.endTime = this.time2
    this.name = this.equipmentName
    this.removeData()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    getDataList(params) {
      console.log(params)
    },
    async byYear() {
      this.removeData()
      this.setChart(this.list.年)
      this.tableData = this.list.年
      setTimeout(() => {
        this.$refs.tableRef.init()
      }, 60)
    },
    byQuarterly() {
      this.removeData()
      this.setChart(this.list.季度)
      this.tableData = this.list.季度
      setTimeout(() => {
        this.$refs.tableRef.init()
      }, 60)
    },
    byMonth() {
      this.removeData()
      this.setChart(this.list.月)
      this.tableData = this.list.月
      setTimeout(() => {
        this.$refs.tableRef.init()
      }, 60)
    },
    byWeek() {
      this.removeData()
      this.setChart(this.list.周)
      this.tableData = this.list.周
      setTimeout(() => {
        this.$refs.tableRef.init()
      }, 60)
    },
    byDay() {
      this.removeData()
      this.setChart(this.list.天)
      this.tableData = this.list.天
      setTimeout(() => {
        this.$refs.tableRef.init()
      }, 60)
    },
    setChart(list) {
      this.init()
    },
    removeData() {
      this.xDataList = [this.name]
      this.oeeList = [30, 40, 30, 33, 44]
    },
    getList() {
      this.tableVisible = true
    },
    init() {
      this.chart = echarts.init(document.getElementById('monitorChart'))

      this.chart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          feature: {
            saveAsImage: { show: true }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          max: 10,
          axisLabel: {
            interval: 0,
            rotate: -30
          },
          data: this.xDataList
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: 'oee',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: this.oeeList
          },
          {
            name: 'performanceRate',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: this.performanceRateList
          },
          {
            name: 'productiveCount',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: this.productiveCountList
          },
          {
            name: 'productiveTime',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: this.productiveTimeList
          },
          {
            name: 'runTime',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: this.runTimeList
          },
          {
            name: 'time',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: this.timeList
          },
          {
            name: 'timeRate',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: this.timeRateList
          }
        ]
      })
    }
  }
}
</script>