refactor(bi/sale): 重构商品明细每日

src/utils/math.js

@@ -27,11 +27,11 @@ export function divSafe(arg1, arg2) {
     * @param {number} fixed - 保留几位小数
     * @param {bool}   round - 是否取整（四舍五入）
     * @param {bool}   pos   - 是否统一正数
-    * @param {bool}   comma - 是否使用千分位逗号
+    * @param {bool}   comma - 是否使用千分位逗号（从这里开始往下就是字符串了）
     * @param {string} des - 尾部额外添加描述字符（例如：人 / 元 / %等）
  * @returns {string} 格式化后的字符串
  */
-export function formatNumberWithUnit({ value, carry = true, fixed = 2, round = true, pos = true, comma = true, des }) {
+export function formatNumberWithUnit({ value, carry = true, fixed = 2, round = true, pos = true, comma = true, des = '' }) {
   // console.log('传入', value, carry, fixed, round, pos, comma, des)
   let resultNum = 0 // 保存计算后的结果
   let unit = ''; // 保存转换后的单位（例如：万 / 亿）
@@ -77,7 +77,7 @@ export function formatNumberWithUnit({ value, carry = true, fixed = 2, round = t
     resultNum = Math.abs(resultNum);
   }
   if (comma) {
-    // 是否添加千分位符号（从这里开始就是字符串了）
+    // 是否添加千分位符号
     resultNum = resultNum.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
   }
   return `${resultNum} ${unit}${des}`;

src/views/bi/sale/LineChart.vue

@@ -7,6 +7,7 @@
 <script setup>
 import * as echarts from 'echarts'
 import { useWindowResize } from '@/hooks'
+import { formatNumberWithUnit } from '@/utils'
 
 const props = defineProps({
   className: {
@@ -53,7 +54,21 @@ const setOptions = () => {
       text: props.chartData.title,
     },
     tooltip: {
-      trigger: 'axis'
+      trigger: 'axis',
+      formatter: function (params) {
+        let tooltip = '';
+        params.forEach((item) => {
+          // 获取系列颜色
+          var color = item.color;
+          // 拼接提示内容
+          tooltip += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + color + ';"></span>' + item.seriesName + ': ' + formatNumberWithUnit({
+            value: item.value,
+            des: props.chartData.yName,
+            carry: myThousand.value
+          }) + '<br>';
+        });
+        return tooltip;
+      }
     },
     legend: {
       data: props.chartData.data?.map(o => o.name)
@@ -77,7 +92,6 @@ const setOptions = () => {
           icon: 'path://M50,50 L100,50 L100,100 L150,100 L150,150 L100,150 L100,200 L50,200 L50,150 L0,150 L0,100 L50,100 Z',
           onclick: () => {
             myThousand.value = !myThousand.value
-            lockThousand.value = !lockThousand.value
             setOptions()
           }
         }
@@ -85,33 +99,43 @@ const setOptions = () => {
     },
     xAxis: {
       type: 'category',
-      boundaryGap: false,
+      // boundaryGap: false,
       data: props.chartData.xData
     },
     yAxis: {
       type: 'value',
-      name: (myThousand.value ? '（万）' : '') + props.chartData.yName
+      name: props.chartData.yName,
+      axisLabel: {
+        formatter(value) {
+          return formatNumberWithUnit({
+            value,
+            des: props.chartData.yName,
+            carry: myThousand.value
+          })
+        }
+      },
     },
     series: props.chartData.data?.map(o => {
       return {
         name: o.name,
         type: 'line',
-        data: o.data.map(num => {
-          return parseFloat((myThousand.value ? num / 10000 : num).toFixed(2))
-        })
+        data: o.data
       }
     })
-  })
+  }, true)
 }
 
 watch(() => props.chartData, () => {
+  console.log(props.chartData)
   // 自动计算是否需要过万单位
   // if (!this.lockThousand) {
-  //   this.myThousand = this.chartData.data?.some(o => {
-  //     return o.data.some(num => num >= 10000)
-  //   })
+  myThousand.value = props.chartData.data?.some(o => {
+    return o.data.some(num => num >= 10000)
+  })
   // }
   chart && setOptions()
+}, {
+  deep: true
 })
 
 watch(() => props.showTool, () => {
@@ -125,7 +149,7 @@ const initChart = () => {
 
 
 const resize = () => {
-  chart.value.resize()
+  chart.resize()
 }
 useWindowResize(resize)
 

src/views/bi/sale/index.vue

@@ -112,13 +112,19 @@
             align="center"
             min-width="100px"
             sortable
-            :formatter="(row, cell, cellValue) => formatNumberWithUnit(cellValue, '', false, true)"></el-table-column>
+            :formatter="(row, cell, cellValue) => formatNumberWithUnit({
+              value: cellValue,
+              round: false
+            })"></el-table-column>
           <el-table-column label="销售额"
             prop="YTD.salePrice"
             align="center"
             min-width="100px"
             sortable
-            :formatter="(row, cell, cellValue) => formatNumberWithUnit(cellValue, '', true, false)">
+            :formatter="(row, cell, cellValue) => formatNumberWithUnit({
+              value: cellValue,
+              round: false
+            })">
           </el-table-column>
           <!-- <el-table-column label="达成率"
             prop="YTD.needNumPercentage"
@@ -143,11 +149,17 @@
             align="center"
             min-width="100px"
             sortable
-            :formatter="(row, cell, cellValue) => formatNumberWithUnit(cellValue, '', true, false)"></el-table-column>
+            :formatter="(row, cell, cellValue) => formatNumberWithUnit({
+              value: cellValue,
+              round: false
+            })"></el-table-column>
           <el-table-column label="销售额"
             prop="MTD.salePrice"
             align="center"
-            :formatter="(row, cell, cellValue) => formatNumberWithUnit(cellValue, '', true, false)"
+            :formatter="(row, cell, cellValue) => formatNumberWithUnit({
+              value: cellValue,
+              round: false
+            })"
             min-width="100px"
             sortable></el-table-column>
           <!-- <el-table-column label="达成率"
@@ -167,11 +179,17 @@
             align="center"
             min-width="100px"
             sortable
-            :formatter="(row, cell, cellValue) => formatNumberWithUnit(cellValue, '', true, false)"></el-table-column>
+            :formatter="(row, cell, cellValue) => formatNumberWithUnit({
+              value: cellValue,
+              round: false
+            })"></el-table-column>
           <el-table-column label="销售额"
             prop="week.salePrice"
             align="center"
-            :formatter="(row, cell, cellValue) => formatNumberWithUnit(cellValue, '', true, false)"
+            :formatter="(row, cell, cellValue) => formatNumberWithUnit({
+              value: cellValue,
+              round: false
+            })"
             min-width="100px"
             sortable></el-table-column>
         </el-table-column>
@@ -184,11 +202,17 @@
             align="center"
             min-width="120px"
             sortable
-            :formatter="(row, cell, cellValue) => formatNumberWithUnit(cellValue, '', true, false)"></el-table-column>
+            :formatter="(row, cell, cellValue) => formatNumberWithUnit({
+              value: cellValue,
+              round: false
+            })"></el-table-column>
           <el-table-column label="日总额"
             prop="last.salePrice"
             align="center"
-            :formatter="(row, cell, cellValue) => formatNumberWithUnit(cellValue, '', true, false)"
+            :formatter="(row, cell, cellValue) => formatNumberWithUnit({
+              value: cellValue,
+              round: false
+            })"
             min-width="100px"
             sortable></el-table-column>
         </el-table-column>
@@ -287,7 +311,7 @@ const dict = proxy.useDict("sale_platform");
 const allSeriesList = ref([]) // 总系列列表
 const prdTagList = ref([]) // 总商品标签列表
 const platformSalesList = ref([]) // 平台销售数据列表
-const platformSalesObj = { // 平台销售数据对象（一套表图数据对应一个对象）
+const platformSalesObj = reactive({ // 平台销售数据对象（一套表图数据对应一个对象）
   queryParams: { // 查询参数
     prdTagId: undefined,
     seriesId: undefined,
@@ -326,7 +350,7 @@ const platformSalesObj = { // 平台销售数据对象（一套表图数据对
     data: [], // 图表现在展示用数据
     xData: [], // 日期（用于 x 轴）
   }
-}
+})
 const { pickerOptions } = useDatePickerOptions()
 const uploadDemandImportVisible = ref(false)
 const uploadDemand = ref({ // 上传货需数据对象
@@ -353,7 +377,7 @@ const getSaleList = async (item) => {
       platformId: o.platformId,
       targetSaleSum: o.targetSaleSum,
       YTD: {
-        saleNum: 1398213.123,
+        saleNum: o.saleCountY,
         salePrice: o.saleSumY,
         goodsSupplyDemandCount: o.goodsSupplyDemandCountY,
         // needNumPercentage: (formatNumberWithUnit(o.saleCountY, o.goodsSupplyDemandCountY) * 100).toFixed(2)
@@ -400,7 +424,9 @@ const getSaleList = async (item) => {
     }
   })
   // 默认先显示销售量数据
+  
   item.chartData.data = item.chartData.saleCount
+  console.log('item.chartData.data', item.chartData.data)
 
   item.loading = false
 }
@@ -453,16 +479,28 @@ const getSummaries = (param) => {
       }, 0);
       if (column.property.includes('saleNum')) {
         // 带 Num 是量（后台字段在上面被我处理成其他字段名字了）
-        return sums[index] = formatNumberWithUnit(sums[index])
+        return sums[index] = formatNumberWithUnit({
+          value: sums[index],
+          round: false
+        })
       } else if (column.property.includes('salePrice')) {
         // 带 Price 是价
-        return sums[index] = formatNumberWithUnit(sums[index])
+        return sums[index] = formatNumberWithUnit({
+          value: sums[index],
+          round: false
+        })
       } else if (column.property.includes('targetSaleSum')) {
         // 合计销售目标
-        return sums[index] = formatNumberWithUnit(sums[index])
+        return sums[index] = formatNumberWithUnit({
+          value: sums[index],
+          round: false
+        })
       } else if (column.property.includes('goodsSupplyDemandCount')) {
         // 货需量
-        return sums[index] = formatNumberWithUnit(sums[index])
+        return sums[index] = formatNumberWithUnit({
+          value: sums[index],
+          round: false
+        })
       } else if (column.property.includes('needNumPercentage')) {
         // 达成率
         return sums[index] = (sums[index] / data.length).toFixed(2) + '%'
@@ -507,7 +545,7 @@ const prdChange = async (item) => {
 }
 // 创建查询某个系列/商品的套表
 const createTableAndECharts = () => {
-  let item = reactive(deepClone(platformSalesObj))
+  let item = reactive(deepClone(toRaw(platformSalesObj)))
   // 如果是第一套套表，默认填写日期
   if (platformSalesList.value.length === 0) {
     item.queryParams.date = [new Date().setDate(1), new Date().setDate((new Date().getDate() - 1))] // 默认查询和显示的是当月 1 号到 T-1 日期