设备稼动率

2022-03-03 16:51:09 +08:00
parent 68193ecfb3
commit d9559db959
21 changed files with 2717 additions and 5 deletions
--- a/src/views/EquipmentManager/equipmentUtilizationRate/components/oee-chart.vue
+++ b/src/views/EquipmentManager/equipmentUtilizationRate/components/oee-chart.vue
@@ -0,0 +1,137 @@
+<!--
+ * @Author: DY
+ * @Date: 2021-12-13 16:39:34
+ * @LastEditors: DY
+ * @LastEditTime: 2022-03-03 16:34:30
+ * @Description: OEE折线柱状图
+-->
+<template>
+  <div>
+    <div id="monitorChart" :style="{width: '1000px', height: '800px'}" style="margin-left:10%" />
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+// import { getOEE } from '@/api/equipment/infoPandect'
+
+export default {
+  props: {
+    time1: {
+      type: Date,
+      default: () => {
+        return ''
+      }
+    },
+    time2: {
+      type: Date,
+      default: () => {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      chart: null,
+      list: [],
+      xDataList: [],
+      oeeList: []
+    }
+  },
+  mounted() {},
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    removeData() {
+      this.xDataList = ['ACOT1', 'ACOT2', 'ACOT-a', 'ACOT-b']
+      this.oeeList = [20, 30, 80, 44]
+    },
+    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}%'
+          }
+        },
+        {
+          type: 'value',
+          min: 0,
+          max: 100,
+          axisLabel: {
+            formatter: '{value}%'
+          }
+        }
+        ],
+        series: [
+          {
+            name: 'oee',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            barWidth: 40,
+            data: this.oeeList
+          },
+          {
+            name: 'oee',
+            type: 'line',
+            yAxisIndex: 1,
+            data: this.oeeList
+          }
+        ]
+      })
+    }
+  }
+}
+</script>