1.4

2024-01-04 16:37:14 +08:00
parent da2999e67c
commit 6ea650e7eb
33 changed files with 1236 additions and 142 deletions
--- a/src/views/databoard/components/NumRateChart.vue
+++ b/src/views/databoard/components/NumRateChart.vue
@@ -0,0 +1,204 @@
+<template>
+  <div class="num-rate-chart"></div>
+</template>
+<script>
+import * as echarts from 'echarts';
+import resize from './../mixins/resize'
+export default {
+  name: 'NumRateChart',
+  mixins: [resize],
+  data() {
+    return {
+      chart: null
+    }
+  },
+  computed: {
+    productline() {
+      return this.$store.state.websocket.productline
+    }
+  },
+  watch:{
+    productline: {
+			handler(newVal, oldVal) {
+        if (newVal === oldVal) {
+          return false
+        }
+        this.updateChart()
+			}
+		}
+  },
+  mounted() {
+		this.$el.addEventListener('resize', () => {
+			console.log('resziing.....');
+		});
+		this.updateChart()
+	},
+  methods: {
+    updateChart() {
+      if (
+        this.chart !== null &&
+        this.chart !== '' &&
+        this.chart !== undefined
+      ) {
+        this.chart.dispose()
+      }
+      this.chart = echarts.init(this.$el);
+      let xData = []
+      let outputNum = []
+      let passRate = []
+      this.productline && this.productline.length > 0 && this.productline.map(item => {
+        xData.push(itme.productionLineId)
+        outputNum.push(itme.outputNum)
+        passRate.push(item.passRate)
+      })
+      var option = {
+        grid: { top: 32, right: 60, bottom: 20, left: 60 },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          className: "num-rate-chart-tooltip"
+        },
+        legend: {
+          data: ['产线产量', '合格率'],
+          textStyle: {
+            color: "#DFF1FE",
+            fontSize: 12,
+          }
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: ['Y61', 'Y62', 'Y63', 'Y64', 'Y65', 'Y66', 'Y67'],
+            axisLabel: {
+              color: "#fff",
+              fontSize: 12,
+            },
+            axisPointer: {
+              type: 'shadow'
+            },
+            axisTick: { show: false },
+            axisLine: {
+              lineStyle: {
+                width: 1,
+                color: "#213259",
+              },
+            },
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            name: '产量/片',
+            // min: 0,
+            // max: 250,
+            // interval: 50,
+            axisLabel: {
+              color: "#fff",
+              fontSize: 12,
+              formatter: '{value}'
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#213259",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "#213259a0",
+              },
+            }
+          },
+          {
+            type: 'value',
+            name: '良品率',
+            min: 0,
+            max: 25,
+            interval: 5,
+            axisLabel: {
+              color: "#fff",
+              fontSize: 12,
+              formatter: '{value} %'
+            },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#213259",
+            },
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#213259a0",
+            },
+          }
+          }
+        ],
+        series: [
+          {
+            name: '产线产量',
+            type: 'bar',
+            tooltip: {
+              valueFormatter: function (value) {
+                return value;
+              }
+            },
+            barWidth: 12,
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: '#5CB7FF' },
+                { offset: 1, color: '#364BFE' }
+              ])
+            },
+            data: [
+              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
+            ]
+          },
+          {
+            name: '合格率',
+            type: 'line',
+            yAxisIndex: 1,
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + '%';
+              }
+            },
+            itemStyle: {
+              color: '#FFD160'
+            },
+            areaStyle: {
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: '#FFCB59' + "40" },
+                { offset: 0.5, color: '#FFCB59' + "20" },
+                { offset: 1, color: '#FFCB59' + "00" },
+                ]),
+            },
+            lineStyle: {
+                width: 1
+            },
+            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
+          }
+        ]
+      };
+      option && this.chart.setOption(option)
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.num-rate-chart {
+	width: 100%;
+	height: 100%;
+}
+</style>
+<style>
+  .num-rate-chart-tooltip {
+    background: #0a2b4f77 !important;
+    border: none !important;
+    backdrop-filter: blur(12px);
+  }
+  .num-rate-chart-tooltip * {
+    color: #fff !important;
+  }
+</style>