设备稼动率

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

@@ -0,0 +1,212 @@
+<!--
+ * @Author: DY
+ * @Date: 2021-12-13 16:39:34
+ * @LastEditors: DY
+ * @LastEditTime: 2022-03-03 15:43:32
+ * @Description: E10折线柱状图
+-->
+<template>
+  <div>
+    <div id="monitorChart" :style="{width: '1000px', height: '800px'}" style="margin-left:10%" />
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+// import { getE10Stack } from '@/api/equipment/infoPandect'
+
+export default {
+  props: {
+    time1: {
+      type: Date,
+      default: () => {
+        return ''
+      }
+    },
+    time2: {
+      type: Date,
+      default: () => {
+        return ''
+      }
+    },
+    name: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      chart: null,
+      list: [],
+      xDataList: [],
+      engineeringList: [],
+      nonscheduledDownList: [],
+      productiveList: [],
+      rampUpDownList: [],
+      scheduledDownList: [],
+      standByList: [],
+      unscheduledDownList: []
+    }
+  },
+  mounted() {},
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    removeData() {
+      this.xDataList = ['ACOT1', 'ACOT2']
+      this.engineeringList = [20, 30]
+      this.nonscheduledDownList = [20, 20]
+      this.productiveList = [10, 2]
+      this.rampUpDownList = [30, 3]
+      this.scheduledDownList = [8, 15]
+      this.standByList = [2, 12]
+      this.unscheduledDownList = [10, 18]
+    },
+    getList() {
+      this.removeData()
+      this.init()
+    },
+    init() {
+      this.chart = echarts.init(document.getElementById('monitorChart'))
+      const that = this
+      that.chart.on('click', function(params) {
+        that.$emit('equipmentName', 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',
+          axisLabel: {
+            interval: 0,
+            rotate: -30
+          },
+          max: 10,
+          data: this.xDataList
+        },
+        yAxis: {
+          type: 'value',
+          min: 0,
+          max: 100,
+          axisLabel: {
+            formatter: '{value}%'
+          }
+        },
+        series: [
+          {
+            name: 'engineering',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            barWidth: 40,
+            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>