热门产品销售看板

klp-ui/src/api/wms/productSalesScript.js

@@ -42,3 +42,20 @@ export function delProductSalesScript(scriptId) {
     method: 'delete'
   })
 }
+
+// 记录话术访问频率
+export function recordVisit(productId) {
+  return request({
+    url: '/klp/productSalesScript/recordVisit/' + productId,
+    method: 'post'
+  })
+}
+
+// 获取热门产品排行
+export function getHotProducts(limit = 10) {
+  return request({
+    url: '/klp/productSalesScript/hotProducts',
+    method: 'get',
+    params: { limit }
+  })
+}

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

@@ -0,0 +1,165 @@
+<template>
+  <div class="hot-products-chart">
+    <el-card shadow="hover">
+      <div v-if="!hotProducts || hotProducts.length === 0" class="no-data-placeholder">
+        暂无热门产品数据
+      </div>
+      <div v-show="hotProducts && hotProducts.length > 0" ref="chart" class="chart-container"></div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  name: 'HotProducts',
+  props: {
+    hotProducts: {
+      type: Array,
+      required: true,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      chartInstance: null
+    }
+  },
+  watch: {
+    hotProducts: {
+      deep: true,
+      handler(newVal) {
+        if (newVal && newVal.length > 0) {
+          this.$nextTick(() => {
+            this.renderChart(newVal)
+          })
+        }
+      }
+    }
+  },
+  mounted() {
+    window.addEventListener('resize', this.handleResize)
+  },
+  beforeDestroy() {
+    if (this.chartInstance) {
+      this.chartInstance.dispose()
+      this.chartInstance = null
+    }
+    window.removeEventListener('resize', this.handleResize)
+  },
+  methods: {
+    renderChart(data) {
+      const chartDom = this.$refs.chart
+      if (!chartDom) return
+
+      if (!this.chartInstance) {
+        this.chartInstance = echarts.init(chartDom)
+      }
+
+      this.chartInstance.resize()
+
+      const productNames = data.map(item => item.productName)
+      const visitCounts = data.map(item => item.visitCount)
+
+      const option = {
+        title: {
+          text: '热门产品排行（访问频率）',
+          left: 'center',
+          textStyle: {
+            color: '#333',
+            fontWeight: 'bold',
+            fontSize: 18
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          },
+          formatter: function(params) {
+            const data = params[0]
+            const rank = data.dataIndex + 1
+            return `${rank}. ${data.name}<br/>访问次数: ${data.value}次`
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: productNames,
+          axisLabel: {
+            interval: 0,
+            rotate: 30,
+            color: '#666'
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            show: true
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: 'dashed'
+            }
+          }
+        },
+        series: [
+          {
+            name: '访问次数',
+            type: 'bar',
+            data: visitCounts,
+            barWidth: '60%',
+            label: {
+              show: true,
+              position: 'top',
+              color: '#333',
+              formatter: function(params) {
+                return params.value + '次'
+              }
+            },
+            itemStyle: {
+              color: function(params) {
+                const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7', '#DDA0DD', '#98D8C8', '#F7DC6F', '#BB8FCE', '#85C1E9']
+                return colors[params.dataIndex % colors.length]
+              }
+            }
+          }
+        ]
+      }
+
+      this.chartInstance.setOption(option)
+    },
+    handleResize() {
+      if (this.chartInstance) {
+        this.chartInstance.resize()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.hot-products-chart {
+  height: 400px;
+}
+
+.chart-container {
+  height: 350px;
+}
+
+.no-data-placeholder {
+  height: 350px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #999;
+  font-size: 14px;
+}
+</style> 

klp-ui/src/views/wms/order/dashboard.vue

@@ -28,6 +28,12 @@
         <CustomerRegion :customer-data="customerClusterData" />
       </el-col>
     </el-row>
+    <!-- 第二行图表 -->
+    <el-row :gutter="20" class="chart-row">
+      <el-col :span="12">
+        <HotProducts :hot-products="hotProductsData" />
+      </el-col>
+    </el-row>
     <!-- 定时刷新设置抽屉 -->
     <el-drawer
       title="定时刷新设置"
@@ -56,6 +62,7 @@ import OrderSummary from './components/OrderSummary.vue'
 import OrderCompletion from './components/OrderCompletion.vue'
 import ProductSales from './components/ProductSales.vue'
 import CustomerRegion from './components/CustomerRegion.vue'
+import HotProducts from './components/HotProducts.vue'
 import { getDashboardData } from '@/api/wms/order'
 
 export default {
@@ -65,6 +72,7 @@ export default {
     OrderCompletion,
     ProductSales,
     CustomerRegion,
+    HotProducts,
   },
   data() {
     return {
@@ -75,6 +83,7 @@ export default {
       },
       productSalesData: [],
       customerClusterData: [],
+      hotProductsData: [],
       // 新增定时刷新相关数据
       drawerVisible: false,
       autoRefresh: false,
@@ -105,6 +114,7 @@ export default {
         }
         this.productSalesData = data.productRank
         this.customerClusterData = data.customerRegion
+        this.hotProductsData = data.hotProducts || []
         this.materialAnalysisData = {
           categories: data.orderMaterial.map(item => item.materialName),
           usageFrequency: data.orderMaterial.map(item => item.usedCount),

klp-ui/src/views/wms/productSalesScript/index.vue

@@ -119,7 +119,7 @@
 
 
 <script>
-import { listProductSalesScript, getProductSalesScript, delProductSalesScript, addProductSalesScript, updateProductSalesScript } from "@/api/wms/productSalesScript";
+import { listProductSalesScript, getProductSalesScript, delProductSalesScript, addProductSalesScript, updateProductSalesScript, recordVisit } from "@/api/wms/productSalesScript";
 import ProductSelect from '@/components/KLPService/ProductSelect';
 import VditorEditor from '@/components/VditorEditor.vue';
 
@@ -269,6 +269,22 @@ export default {
         this.title = "修改产品销售话术";
       });
     },
+    /** 查看按钮操作 */
+    handleView(row) {
+      this.reset();
+      const scriptId = row.scriptId || this.ids
+      getProductSalesScript(scriptId).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "查看产品销售话术";
+      });
+      // 记录访问频率
+      if (row.productId) {
+        recordVisit(row.productId).catch(err => {
+          console.warn('记录访问频率失败:', err);
+        });
+      }
+    },
     /** 提交按钮 */
     submitForm() {
       this.$refs["form"].validate(valid => {