变更首页

klp-ui/src/views/wms/order/components/MaterialAnalysis.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="chart-container">
+    <div ref="chart" style="width: 100%; height: 400px;"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  name: 'MaterialAnalysis',
+  props: {
+    materialData: {
+      type: Object,
+      default: () => ({
+        categories: [],
+        usageFrequency: [],
+        stockQuantity: [],
+        purchaseCycle: []
+      })
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    materialData: {
+      deep: true,
+      handler(val) {
+        if (val) {
+          this.initChart()
+        }
+      }
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      if (!this.$refs.chart) return
+      this.chart = echarts.init(this.$refs.chart)
+      const option = {
+        title: {
+          text: '物料使用分析',
+          left: 'center'
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross'
+          }
+        },
+        legend: {
+          data: ['使用频率', '库存量', '采购周期'],
+          top: 30
+        },
+        xAxis: {
+          type: 'category',
+          data: this.materialData.categories
+        },
+        yAxis: [
+          {
+            type: 'value',
+            name: '数量/频率',
+            position: 'left'
+          },
+          {
+            type: 'value',
+            name: '采购周期(天)',
+            position: 'right'
+          }
+        ],
+        series: [
+          {
+            name: '使用频率',
+            type: 'bar',
+            data: this.materialData.usageFrequency
+          },
+          {
+            name: '库存量',
+            type: 'bar',
+            data: this.materialData.stockQuantity
+          },
+          {
+            name: '采购周期',
+            type: 'line',
+            yAxisIndex: 1,
+            data: this.materialData.purchaseCycle
+          }
+        ]
+      }
+      this.chart.setOption(option)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container {
+  background-color: #ffffff;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
+  height: 100%;
+  box-sizing: border-box;
+}
+</style>