设备稼动率

src/views/EquipmentManager/equipmentUtilizationRate/components/mcbfDetail-chart.vue

@@ -0,0 +1,185 @@
+<!--
+ * @Author: DY
+ * @Date: 2021-12-13 16:39:34
+ * @LastEditors: DY
+ * @LastEditTime: 2022-03-03 16:48:53
+ * @Description: MCBF详情堆积图
+-->
+<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%" />
+    <mcbf-table v-if="tableVisible" ref="tableRef" :table-data="tableData" />
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+// import { getMcbfDetail } from '@/api/equipment/infoPandect'
+import McbfTable from './McbfTable'
+
+export default {
+  components: { McbfTable },
+  props: {
+    time1: {
+      type: Date,
+      default: () => {
+        return ''
+      }
+    },
+    time2: {
+      type: Date,
+      default: () => {
+        return ''
+      }
+    },
+    equipmentName: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      chart: null,
+      tableVisible: false,
+      tableData: [],
+      equipmentDetail: [],
+      list: [],
+      xDataList: [],
+      yDataList: [],
+      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.年)
+      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.yDataList = [11, 33, 20, 53, 24]
+    },
+    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: '稼动率值',
+            type: 'line',
+            stack: 'total',
+            label: {
+              show: true
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: this.yDataList
+          }
+        ]
+      })
+    }
+  }
+}
+</script>