测试

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

@@ -0,0 +1,161 @@
+<template>
+  <el-card shadow="hover" class="order-material-analysis">
+    <div slot="header" class="card-header">订单物料分析</div>
+    <div ref="chart" class="chart-container"></div>
+  </el-card>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+export default {
+  name: 'OrderMaterialAnalysis',
+  props: {
+    materialInfo: {
+      type: Object,
+      required: true,
+      default: () => ({
+        categories: [],
+        usageFrequency: [],
+        stockQuantity: [],
+        bundleRate: [],
+        purchaseCycle: [],
+        yAxisUsageMax: 0
+      })
+    }
+  },
+  data() {
+    return {
+      chartInstance: null
+    }
+  },
+  watch: {
+    materialInfo: {
+      deep: true,
+      immediate: true,
+      handler() {
+        this.updateChart()
+      }
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.resizeChart)
+    if (this.chartInstance) {
+      this.chartInstance.dispose()
+      this.chartInstance = null
+    }
+  },
+  methods: {
+    initChart() {
+      if (!this.chartInstance) {
+        this.chartInstance = echarts.init(this.$refs.chart)
+      }
+      this.updateChart()
+      window.addEventListener('resize', this.resizeChart)
+    },
+    updateChart() {
+      if (!this.chartInstance) return
+      const info = this.materialInfo
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { type: 'shadow' }
+        },
+        legend: {
+          data: ['使用频次', '库存量', '捆绑率', '采购周期'],
+          bottom: 0
+        },
+        xAxis: {
+          type: 'category',
+          data: info.categories,
+          axisTick: { alignWithLabel: true }
+        },
+        yAxis: [
+          {
+            type: 'value',
+            name: '数量',
+            min: 0,
+            max: info.yAxisUsageMax,
+            interval: Math.ceil((info.yAxisUsageMax || 1) / 4),
+            position: 'left',
+            axisLine: { lineStyle: { color: '#3a85ff' } },
+            axisLabel: { formatter: '{value}' }
+          },
+          {
+            type: 'value',
+            name: '百分比',
+            min: 0,
+            max: 100,
+            interval: 20,
+            position: 'right',
+            axisLine: { lineStyle: { color: '#ffb300' } },
+            axisLabel: { formatter: '{value}%'}
+          }
+        ],
+        series: [
+          {
+            name: '使用频次',
+            type: 'bar',
+            data: info.usageFrequency,
+            itemStyle: { color: '#3a85ff' }
+          },
+          {
+            name: '库存量',
+            type: 'bar',
+            data: info.stockQuantity,
+            itemStyle: { color: '#52c41a' }
+          },
+          {
+            name: '捆绑率',
+            type: 'line',
+            yAxisIndex: 1,
+            data: info.bundleRate,
+            lineStyle: { color: '#ffc107', width: 2 },
+            smooth: true,
+            symbol: 'circle',
+            symbolSize: 8
+          },
+          {
+            name: '采购周期',
+            type: 'line',
+            yAxisIndex: 1,
+            data: info.purchaseCycle,
+            lineStyle: { color: '#ff5722', width: 2 },
+            smooth: true,
+            symbol: 'circle',
+            symbolSize: 8
+          }
+        ]
+      }
+      this.chartInstance.setOption(option, { notMerge: true })
+    },
+    resizeChart() {
+      if (this.chartInstance) {
+        this.chartInstance.resize()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.order-material-analysis {
+  height: 500px;
+  display: flex;
+  flex-direction: column;
+}
+
+.card-header {
+  font-weight: bold;
+  font-size: 16px;
+  padding-bottom: 10px;
+}
+
+.chart-container {
+  flex-grow: 1;
+  min-height: 280px;
+  width: 100%;
+}
+</style>