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

<!--
 * @Author: DY
 * @Date: 2021-12-13 16:39:34
 * @LastEditors: DY
 * @LastEditTime: 2022-03-03 16:26:34
 * @Description: E10详情堆积图
-->
<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%" />
    <e10-table v-if="tableVisible" :time1="startTime" :time2="endTime" :equipment-name="name" />
  </div>
</template>

<script>
import echarts from 'echarts'
// import { getE10StackDetail } from '@/api/equipment/infoPandect'
import E10Table from './E10Table'

export default {
  components: { E10Table },
  props: {
    time1: {
      type: Date,
      default: () => {
        return ''
      }
    },
    time2: {
      type: Date,
      default: () => {
        return ''
      }
    },
    equipmentName: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  data() {
    return {
      chart: null,
      tableVisible: false,
      equipmentDetail: [],
      list: [],
      xDataList: [],
      engineeringList: [],
      nonscheduledDownList: [],
      productiveList: [],
      rampUpDownList: [],
      scheduledDownList: [],
      standByList: [],
      unscheduledDownList: [],
      startTime: '',
      endTime: '',
      name: ''
    }
  },
  mounted() {
    this.startTime = this.time1
    this.endTime = this.time2
    this.name = this.equipmentName
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    getDataList(params) {
      console.log(params)
    },
    byYear() {
      this.removeData()
      this.setChart(this.list.年)
    },
    byQuarterly() {
      this.removeData()
      this.setChart(this.list.季度)
    },
    byMonth() {
      this.removeData()
      this.setChart(this.list.月)
    },
    byWeek() {
      this.removeData()
      this.setChart(this.list.周)
    },
    byDay() {
      this.removeData()
      this.setChart(this.list.天)
    },
    setChart(list) {
      this.init()
    },
    removeData() {
      // this.xDataList = [this.name]
      this.engineeringList = [20]
      this.nonscheduledDownList = [20]
      this.productiveList = [10]
      this.rampUpDownList = [30]
      this.scheduledDownList = [8]
      this.standByList = [2]
      this.unscheduledDownList = [10]
    },
    getList() {
      this.xDataList = [this.name]
      this.tableVisible = true
    },
    init() {
      this.chart = echarts.init(document.getElementById('monitorChart'))

      this.chart.on('click', function(params) {
        console.log('113d', params.name)
      })

      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: 'engineering',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: this.engineeringList
          },
          {
            name: 'nonscheduledDown',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: this.nonscheduledDownList
          },
          {
            name: 'productive',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: this.productiveList
          },
          {
            name: 'rampUpDown',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: this.rampUpDownList
          },
          {
            name: 'scheduledDown',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: this.scheduledDownList
          },
          {
            name: 'standBy',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: this.standByList
          },
          {
            name: 'unscheduledDown',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: this.unscheduledDownList
          }
        ]
      })
    }
  }
}
</script>