热门产品销售看板

2025-07-26 10:18:16 +08:00
parent a78bf64529
commit bb42f9c5b7
11 changed files with 363 additions and 4 deletions
--- a/klp-ui/src/api/wms/productSalesScript.js
+++ b/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 }
+  })
+}
--- a/klp-ui/src/views/wms/order/components/HotProducts.vue
+++ b/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> 
--- a/klp-ui/src/views/wms/order/dashboard.vue
+++ b/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),
--- a/klp-ui/src/views/wms/productSalesScript/index.vue
+++ b/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 => {
--- a/klp-wms/src/main/java/com/klp/controller/WmsProductSalesScriptController.java
+++ b/klp-wms/src/main/java/com/klp/controller/WmsProductSalesScriptController.java
@@ -22,6 +22,9 @@ import com.klp.domain.vo.WmsProductSalesScriptVo;
 import com.klp.domain.bo.WmsProductSalesScriptBo;
 import com.klp.service.IWmsProductSalesScriptService;
 import com.klp.common.core.page.TableDataInfo;
+import com.klp.common.utils.redis.RedisUtils;
+import java.time.Duration;
+import com.klp.domain.vo.HotProductVO;

 /**
 * 产品销售话术
@@ -97,4 +100,29 @@ public class WmsProductSalesScriptController extends BaseController {
                          @PathVariable Long[] scriptIds) {
        return toAjax(iWmsProductSalesScriptService.deleteWithValidByIds(Arrays.asList(scriptIds), true));
    }
+
+    /**
+     * 记录话术访问频率
+     *
+     * @param productId 产品ID
+     */
+    @PostMapping("/recordVisit/{productId}")
+    public R<Void> recordVisit(@NotNull(message = "产品ID不能为空") @PathVariable Long productId) {
+        String key = "product:visit:frequency:" + productId;
+        // 原子递增访问次数，设置7天过期时间
+        long count = RedisUtils.incrAtomicValue(key);
+        if (count == 1) {
+            // 第一次访问时设置过期时间
+            RedisUtils.expire(key, Duration.ofDays(7));
+        }
+        return R.ok();
+    }
+
+    /**
+     * 获取热门产品排行（基于访问频率）
+     */
+    @GetMapping("/hotProducts")
+    public R<List<HotProductVO>> getHotProducts(@RequestParam(defaultValue = "10") Integer limit) {
+        return R.ok(iWmsProductSalesScriptService.getHotProducts(limit));
+    }
 }
--- a/klp-wms/src/main/java/com/klp/controller/WmsStockIoController.java
+++ b/klp-wms/src/main/java/com/klp/controller/WmsStockIoController.java
@@ -155,9 +155,6 @@ public class WmsStockIoController extends BaseController {
     * 扫码枪专用：根据明细ID直接入库，无需审核整单
     */
    @PostMapping("/scanInStock")
-    /**
-     * 扫码枪专用：根据传入明细参数直接入库，无需审核整单
-     */
    public R<Void> scanInStock(@RequestBody WmsStockIoDetailBo bo) {
        try {
            boolean result = iWmsStockIoService.scanInStockByBo(bo);
--- a/klp-wms/src/main/java/com/klp/domain/vo/DashboardOverviewVO.java
+++ b/klp-wms/src/main/java/com/klp/domain/vo/DashboardOverviewVO.java
@@ -3,11 +3,42 @@ package com.klp.domain.vo;
 import lombok.Data;
 import java.util.List;

+/**
+ * 数据看板概览视图对象
+ *
+ * @author klp
+ * @date 2025-01-27
+ */
@Data
 public class DashboardOverviewVO {
+    
+    /**
+     * 订单汇总
+     */
    private OrderSummaryVO orderSummary;
+    
+    /**
+     * 销售经理饼图
+     */
    private List<SalesManagerPieVO> salesManagerPie;
+    
+    /**
+     * 产品销量排行
+     */
    private List<ProductRankVO> productRank;
+    
+    /**
+     * 订单物料分析
+     */
    private List<OrderMaterialVO> orderMaterial;
+    
+    /**
+     * 客户分布
+     */
    private List<CustomerRegionVO> customerRegion;
+    
+    /**
+     * 热门产品排行（基于访问频率）
+     */
+    private List<HotProductVO> hotProducts;
 }
--- a/klp-wms/src/main/java/com/klp/domain/vo/HotProductVO.java
+++ b/klp-wms/src/main/java/com/klp/domain/vo/HotProductVO.java
@@ -0,0 +1,38 @@
+package com.klp.domain.vo;
+
+import lombok.Data;
+
+/**
+ * 热门产品视图对象
+ *
+ * @author klp
+ * @date 2025-01-27
+ */
+@Data
+public class HotProductVO {
+    
+    /**
+     * 产品ID
+     */
+    private Long productId;
+    
+    /**
+     * 产品名称
+     */
+    private String productName;
+    
+    /**
+     * 产品编号
+     */
+    private String productCode;
+    
+    /**
+     * 访问次数
+     */
+    private Long visitCount;
+    
+    /**
+     * 排名
+     */
+    private Integer rank;
+} 
--- a/klp-wms/src/main/java/com/klp/service/IWmsProductSalesScriptService.java
+++ b/klp-wms/src/main/java/com/klp/service/IWmsProductSalesScriptService.java
@@ -5,6 +5,7 @@ import com.klp.domain.vo.WmsProductSalesScriptVo;
 import com.klp.domain.bo.WmsProductSalesScriptBo;
 import com.klp.common.core.page.TableDataInfo;
 import com.klp.common.core.domain.PageQuery;
+import com.klp.domain.vo.HotProductVO;

 import java.util.Collection;
 import java.util.List;
@@ -47,4 +48,8 @@ public interface IWmsProductSalesScriptService {
     */
    Boolean deleteWithValidByIds(Collection<Long> ids, Boolean isValid);

+    /**
+     * 获取热门产品排行（基于访问频率）
+     */
+    List<HotProductVO> getHotProducts(Integer limit);
 }
--- a/klp-wms/src/main/java/com/klp/service/impl/WmsProductSalesScriptServiceImpl.java
+++ b/klp-wms/src/main/java/com/klp/service/impl/WmsProductSalesScriptServiceImpl.java
@@ -14,6 +14,12 @@ import com.klp.domain.vo.WmsProductSalesScriptVo;
 import com.klp.domain.WmsProductSalesScript;
 import com.klp.mapper.WmsProductSalesScriptMapper;
 import com.klp.service.IWmsProductSalesScriptService;
+import com.klp.domain.vo.HotProductVO;
+import com.klp.common.utils.redis.RedisUtils;
+import java.util.stream.Collectors;
+import java.util.Comparator;
+import com.klp.domain.WmsProduct;
+import com.klp.mapper.WmsProductMapper;

 import java.util.List;
 import java.util.Map;
@@ -30,6 +36,7 @@ import java.util.Collection;
 public class WmsProductSalesScriptServiceImpl implements IWmsProductSalesScriptService {

    private final WmsProductSalesScriptMapper baseMapper;
+    private final WmsProductMapper wmsProductMapper;

    /**
     * 查询产品销售话术
@@ -117,4 +124,44 @@ public class WmsProductSalesScriptServiceImpl implements IWmsProductSalesScriptS
        }
        return baseMapper.deleteBatchIds(ids) > 0;
    }
+
+    /**
+     * 获取热门产品排行（基于访问频率）
+     */
+    @Override
+    public List<HotProductVO> getHotProducts(Integer limit) {
+        // 获取所有产品访问频率的key
+        Collection<String> keys = RedisUtils.keys("product:visit:frequency:*");
+        
+        List<HotProductVO> hotProducts = keys.stream()
+            .map(key -> {
+                String productIdStr = key.replace("product:visit:frequency:", "");
+                Long productId = Long.valueOf(productIdStr);
+                Long visitCount = RedisUtils.getAtomicValue(key);
+                
+                // 查询产品信息
+                WmsProduct product = wmsProductMapper.selectById(productId);
+                if (product == null) {
+                    return null;
+                }
+                
+                HotProductVO vo = new HotProductVO();
+                vo.setProductId(productId);
+                vo.setProductName(product.getProductName());
+                vo.setProductCode(product.getProductCode());
+                vo.setVisitCount(visitCount);
+                return vo;
+            })
+            .filter(vo -> vo != null)
+            .sorted(Comparator.comparing(HotProductVO::getVisitCount).reversed())
+            .limit(limit)
+            .collect(Collectors.toList());
+        
+        // 设置排名
+        for (int i = 0; i < hotProducts.size(); i++) {
+            hotProducts.get(i).setRank(i + 1);
+        }
+        
+        return hotProducts;
+    }
 }
--- a/klp-wms/src/main/java/com/klp/service/impl/WmsProductServiceImpl.java
+++ b/klp-wms/src/main/java/com/klp/service/impl/WmsProductServiceImpl.java
@@ -16,6 +16,8 @@ import com.klp.domain.WmsProduct;
 import com.klp.mapper.WmsProductMapper;
 import com.klp.service.IWmsProductService;
 import com.klp.domain.vo.OrderSummaryVO;
+import com.klp.domain.vo.HotProductVO;
+import com.klp.service.IWmsProductSalesScriptService;

 import java.util.List;
 import java.util.Map;
@@ -32,6 +34,7 @@ import java.util.Collection;
 public class WmsProductServiceImpl implements IWmsProductService {

    private final WmsProductMapper baseMapper;
+    private final IWmsProductSalesScriptService iWmsProductSalesScriptService;

    /**
     * 查询产品
@@ -149,6 +152,8 @@ public class WmsProductServiceImpl implements IWmsProductService {
        vo.setProductRank(baseMapper.selectProductRank());
        vo.setOrderMaterial(baseMapper.selectOrderMaterial());
        vo.setCustomerRegion(baseMapper.selectCustomerRegion());
+        // 添加热门产品数据
+        vo.setHotProducts(iWmsProductSalesScriptService.getHotProducts(10));
        return vo;
    }
 }