测试

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

@@ -0,0 +1,105 @@
+<template>
+  <div class="customer-cluster">
+    <el-card shadow="hover">
+      <div class="chart-title">客户群体聚类分析</div>
+      <div ref="chart" class="chart-container"></div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+export default {
+  name: 'CustomerCluster',
+  props: {
+    customerCluster: {
+      type: Array,
+      required: true,
+      default: () => []
+    }
+  },
+  data () {
+    return {
+      chartInstance: null,
+      chartOptions: {
+        tooltip: {
+          trigger: 'item',
+          formatter: (params) => {
+            return `客户名称: ${params.data[2]}<br />购买频次: ${params.data[0]}<br />客单价: ${params.data[1]}`
+          }
+        },
+        xAxis: { name: '购买频次' },
+        yAxis: { name: '客单价' },
+        series: [
+          {
+            symbolSize: 10,
+            type: 'scatter',
+            data: []
+          }
+        ]
+      }
+    }
+  },
+  watch: {
+    customerCluster: {
+      immediate: true,
+      handler(newVal) {
+        this.updateChart()
+      }
+    }
+  },
+  mounted () {
+    this.initChart()
+  },
+  beforeDestroy () {
+    if (this.chartInstance) {
+      this.chartInstance.dispose()
+    }
+    window.removeEventListener('resize', this.handleResize)
+  },
+  methods: {
+    initChart () {
+      const chartDom = this.$refs.chart
+      if (!chartDom) return
+      this.chartInstance = echarts.init(chartDom)
+      this.updateChart()
+      window.addEventListener('resize', this.handleResize)
+    },
+    updateChart () {
+      if (!this.chartInstance) return
+      // 格式化数据
+      const chartData = this.customerCluster.map(item => [item.purchaseFreq, item.avgOrderAmount, item.customerName])
+      this.chartOptions.series[0].data = chartData
+      this.chartInstance.setOption(this.chartOptions)
+    },
+    handleResize () {
+      if (this.chartInstance) {
+        this.chartInstance.resize()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.customer-cluster {
+  width: 100%;
+  height: 100%;
+}
+.chart-title {
+  font-size: 18px;
+  font-weight: bold;
+  margin-bottom: 8px;
+}
+.chart-container {
+  width: 100%;
+  height: 400px;
+}
+.el-card {
+  border-radius: 16px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+}
+</style>

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

@@ -0,0 +1,121 @@
+<template>
+  <div class="completion-chart">
+    <el-card shadow="hover">
+      <div class="chart-title">订单完成率</div>
+      <div ref="chart" class="chart-container"></div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+export default {
+  name: 'OrderCompletion',
+  props: {
+    completionRate: {
+      type: Number,
+      required: true,
+      default: 0
+    }
+  },
+  data () {
+    return {
+      notRate:0,
+      chartInstance: null
+    }
+  },
+  watch: {
+    completionRate: {
+      immediate: true,
+      handler(newVal) {
+        this.updateChart()
+      }
+    }
+  },
+  mounted () {
+    this.initChart()
+  },
+  beforeDestroy () {
+    if (this.chartInstance) {
+      this.chartInstance.dispose()
+    }
+    window.removeEventListener('resize', this.handleResize)
+  },
+  methods: {
+    initChart () {
+      const chartDom = this.$refs.chart
+      if (!chartDom) return
+      this.chartInstance = echarts.init(chartDom)
+      this.updateChart()
+      window.addEventListener('resize', this.handleResize)
+    },
+    updateChart () {
+      if (!this.chartInstance) return
+      this.notRate = 100 - this.completionRate
+      let option =  {
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b}: {c}%'
+        },
+        legend: {
+          top: '8%',
+          left: 'center',
+          data: ['完成率', '未完成']
+        },
+        series: [
+          {
+            name: '订单完成率',
+            type: 'pie',
+            radius: '60%',
+            center: ['50%', '55%'],
+            data: [
+              {value: this.completionRate, name: '已完成'},
+              {value: this.notRate, name: '未完成'}
+            ],
+            label: {
+              formatter: '{b}: {c}%',
+              fontSize: 14,
+            },
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ]
+      }
+      this.chartInstance.setOption(option)
+    },
+    handleResize () {
+      if (this.chartInstance) {
+        this.chartInstance.resize()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.completion-chart {
+  width: 100%;
+  height: 100%;
+}
+.chart-title {
+  font-size: 18px;
+  font-weight: bold;
+  margin-bottom: 8px;
+}
+.chart-container {
+  width: 100%;
+  height: 400px;
+}
+.el-card {
+  border-radius: 16px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+}
+</style>

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>

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

@@ -0,0 +1,205 @@
+<template>
+  <div class="order-summary">
+    <div class="summary-container">
+      <!-- 总订单数 -->
+      <div class="summary-box total-orders">
+        <div class="content-left">
+          <div class="summary-title">总订单数</div>
+          <div class="summary-value">
+            <strong>{{ dataInfo.totalOrders.toLocaleString() }}</strong>
+            <span class="growth">
+              <svg class="arrow-up" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="#38c172" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+                <polyline points="6 15 12 9 18 15"></polyline>
+              </svg>
+              12.5%
+            </span>
+          </div>
+        </div>
+        <div class="icon-bg blue">
+          <svg viewBox="0 0 24 24" width="28" height="28" fill="#2f86f6">
+            <path d="M7 18c-1.1 0-2-.9-2-2s.9-2 2-2h10v-4H7V7H5v3c0 1.1.9 2 2 2v6z"></path>
+            <circle cx="18" cy="18" r="2"></circle>
+          </svg>
+        </div>
+      </div>
+
+      <!-- 本月完成订单 -->
+      <div class="summary-box completed-orders">
+        <div class="content-left">
+          <div class="summary-title">本月完成订单</div>
+          <div class="summary-value">
+            <strong>{{ dataInfo.completedThisMonth.toLocaleString() }}</strong>
+            <span class="growth">
+              <svg class="arrow-up" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="#38c172" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+                <polyline points="6 15 12 9 18 15"></polyline>
+              </svg>
+              8.3%
+            </span>
+          </div>
+        </div>
+        <div class="icon-bg green">
+          <svg viewBox="0 0 24 24" width="28" height="28" fill="#38c172">
+            <polyline points="20 6 9 17 4 12" stroke="#38c172" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" />
+          </svg>
+        </div>
+      </div>
+
+      <!-- 订单完成度 -->
+      <div class="summary-box completion-rate">
+        <div class="content-left">
+          <div class="summary-title">订单完成度</div>
+          <div class="summary-value">
+            <strong>{{ dataInfo.completionRate.toFixed(1) }}%</strong>
+            <span class="growth">
+              <svg class="arrow-up" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="#38c172" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+                <polyline points="6 15 12 9 18 15"></polyline>
+              </svg>
+              2.1%
+            </span>
+          </div>
+        </div>
+        <div class="icon-bg yellow">
+          <svg viewBox="0 0 24 24" width="28" height="28" fill="#f6bb42">
+            <path d="M4 12h16M4 12a8 8 0 0116 0M12 4v8l4 4" stroke="#f6bb42" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'OrderSummary',
+  props: {
+    dataInfo: {
+      type: Object,
+      required: true,
+      default: () => ({ totalOrders: 0, completedThisMonth: 0, completionRate: 0 })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.order-summary {
+  width: 100%;
+  padding: 10px 0;
+  box-sizing: border-box;
+}
+
+.summary-container {
+  display: flex;
+  justify-content: space-between;
+  gap: 15px; /* 卡片之间间距 */
+  width: 100%;
+}
+
+.summary-box {
+  flex: 1 1 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 24px 30px;
+  border-radius: 16px;
+  box-shadow: 0 6px 20px rgba(31, 47, 70, 0.08);
+  cursor: default;
+  background: #fff;
+  user-select: none;
+  transition: box-shadow 0.3s ease;
+  min-width: 0; /* 防止子元素过大撑破flex */
+}
+
+.summary-box:hover {
+  box-shadow: 0 10px 32px rgba(31, 47, 70, 0.14);
+}
+
+.content-left {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-width: 0;
+}
+
+.summary-title {
+  font-size: 14px;
+  color: #5a5a5a;
+  margin-bottom: 6px;
+  user-select: text;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.summary-value {
+  display: flex;
+  align-items: center;
+  font-weight: 700;
+  font-size: 32px;
+  color: #222;
+  user-select: text;
+  min-width: 0;
+  white-space: nowrap;
+}
+
+.summary-value strong {
+  margin-right: 10px;
+  font-weight: 900;
+}
+
+.growth {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  color: #38c172;
+  white-space: nowrap;
+}
+
+.arrow-up {
+  margin-right: 4px;
+  stroke: #38c172;
+  fill: none;
+}
+
+.icon-bg {
+  flex-shrink: 0;
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background-color: rgba(0, 0, 0, 0.05);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  user-select: none;
+  box-shadow: 0 4px 12px rgba(47, 134, 246, 0.25);
+}
+
+.total-orders {
+  background: linear-gradient(135deg, #d5e7ff 0%, #ffffff 100%);
+  color: #0d3b73;
+}
+
+.total-orders .icon-bg {
+  background-color: rgba(47, 134, 246, 0.15);
+  box-shadow: 0 4px 12px rgba(47, 134, 246, 0.25);
+}
+
+.completed-orders {
+  background: linear-gradient(135deg, #e7f5e8 0%, #ffffff 100%);
+  color: #1f6d28;
+}
+
+.completed-orders .icon-bg {
+  background-color: rgba(56, 193, 114, 0.15);
+  box-shadow: 0 4px 12px rgba(56, 193, 114, 0.25);
+}
+
+.completion-rate {
+  background: linear-gradient(135deg, #fff6e1 0%, #ffffff 100%);
+  color: #7a5a00;
+}
+
+.completion-rate .icon-bg {
+  background-color: rgba(246, 187, 66, 0.15);
+  box-shadow: 0 4px 12px rgba(246, 187, 66, 0.25);
+}
+</style>

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

@@ -0,0 +1,125 @@
+<template>
+  <div class="product-sales-chart">
+    <el-card shadow="hover">
+      <div class="chart-title">产品销量排行</div>
+      <div ref="chart" class="chart-container"></div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+export default {
+  name: 'ProductSales',
+  props: {
+    productSales: {
+      type: Array,
+      required: true,
+      default: () => []
+    }
+  },
+  data () {
+    return {
+      chartInstance: null,
+      chartOptions: {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          left: '10%',
+          right: '10%',
+          bottom: '10%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: []
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            name: '销量',
+            type: 'bar',
+            data: [],
+            barWidth: '40%',
+            label: {
+              show: true,
+              position: 'top'
+            },
+            emphasis: {
+              focus: 'series'
+            }
+          }
+        ]
+      }
+    }
+  },
+  watch: {
+    productSales: {
+      immediate: true,
+      handler(newVal) {
+        this.updateChart()
+      }
+    }
+  },
+  mounted () {
+    this.initChart()
+  },
+  beforeDestroy () {
+    if (this.chartInstance) {
+      this.chartInstance.dispose()
+    }
+    window.removeEventListener('resize', this.handleResize)
+  },
+  methods: {
+    initChart () {
+      const chartDom = this.$refs.chart
+      if (!chartDom) return
+      this.chartInstance = echarts.init(chartDom)
+      this.updateChart()
+      window.addEventListener('resize', this.handleResize)
+    },
+    updateChart () {
+      if (!this.chartInstance) return
+      const dataAxis = this.productSales.map(item => item.productName)
+      const totalData = this.productSales.map(item => item.totalProductCount)
+      this.chartOptions.xAxis.data = dataAxis
+      this.chartOptions.series[0].data = totalData
+      this.chartInstance.setOption(this.chartOptions)
+    },
+    handleResize () {
+      if (this.chartInstance) {
+        this.chartInstance.resize()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.product-sales-chart {
+  width: 100%;
+  height: 100%;
+}
+.chart-title {
+  font-size: 18px;
+  font-weight: bold;
+  margin-bottom: 8px;
+}
+.chart-container {
+  width: 100%;
+  height: 400px;
+}
+.el-card {
+  border-radius: 16px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+}
+</style>