update

pages/DigitalIntelligenceDashboard/components/ProductReport.vue

@@ -47,13 +47,6 @@
         <view class="pie-chart-container">
           <QiunDataCharts type="pie" :opts="pieChartOpts" :chartData="pieChartData" :canvas2d="true"
             :inScrollView="true" canvasId="productTypePieChart" />
-          <view class="pie-legend">
-            <view class="legend-item" v-for="(item, index) in productTypeData" :key="index">
-              <view class="legend-color" :style="{ backgroundColor: item.color }"></view>
-              <text class="legend-name">{{ item.name }}</text>
-              <text class="legend-value">{{ item.percentage }}%</text>
-            </view>
-          </view>
         </view>
       </view>
     </view>
@@ -107,27 +100,27 @@
         <view class="product-card" v-for="(item, index) in productList" :key="index">
           <view class="product-header">
             <view class="product-type-tag" :style="{
-              backgroundColor: item.type === '保健品' ? '#576EFF' :
+              backgroundColor: index === 0 ? '#576EFF' :
-                item.type === '茶叶' ? '#52C41A' :
+                index === 1 ? '#52C41A' :
-                  item.type === '食品' ? '#FAAD14' :
+                  index === 2 ? '#FAAD14' :
-                    item.type === '饮品' ? '#FF7875' :
+                    index === 3 ? '#FF7875' :
-                      item.type === '工艺品' ? '#B37FEB' : '#666666'
+                      index === 4 ? '#B37FEB' : '#666666'
             }">
-              {{ item.type }}
+              {{ index + 1 }}
             </view>
-            <text class="product-code">{{ item.code }}</text>
+            <text class="product-code">{{ item.COMMODITY_BARCODE }}</text>
           </view>
           <view class="product-body">
-            <text class="product-name">{{ item.name }}</text>
+            <text class="product-name">{{ item.COMMODITY_NAME }}</text>
             <view class="product-metrics">
               <view class="metric-item">
                 <text class="metric-label">销量</text>
-                <text class="metric-value">{{ formatNumber(item.sales) }}</text>
+                <text class="metric-value">{{ item.SELLCOUNT ? item.SELLCOUNT.toLocaleString() : "" }}</text>
               </view>
               <view class="metric-divider"></view>
               <view class="metric-item">
                 <text class="metric-label">销售额</text>
-                <text class="metric-value">¥{{ formatMoney(item.revenue) }}</text>
+                <text class="metric-value">¥{{ item.FACTAMOUNT ? item.FACTAMOUNT.toLocaleString() : "" }}</text>
               </view>
             </view>
           </view>
@@ -154,17 +147,9 @@ export default {
       productTypes: 12,
 
       // 商品类型分布数据
-      productTypeData: [
+      productTypeData: [],
-        { name: '保健品', value: 35, percentage: 35, color: '#576EFF' },
-        { name: '茶叶', value: 28, percentage: 28, color: '#52C41A' },
-        { name: '食品', value: 20, percentage: 20, color: '#FAAD14' },
-        { name: '饮品', value: 12, percentage: 12, color: '#FF7875' },
-        { name: '其他', value: 5, percentage: 5, color: '#B37FEB' }
-      ],
-
       // 销量排行榜数据
       salesRankingData: [],
-
       // 销售趋势数据
       trendData: {
         categories: ['1日', '5日', '10日', '15日', '20日', '25日', '30日'],
@@ -172,14 +157,7 @@ export default {
         revenueData: [100, 200, 300, 400, 500, 600, 700]
       },
 
-      productList: [
+      productList: []
-        { type: '保健品', code: 'YN001', name: '云南白药牙膏', sales: 3456, revenue: 456789 },
-        { type: '茶叶', code: 'PU002', name: '普洱茶饼', sales: 2890, revenue: 567890 },
-        { type: '食品', code: 'FH003', name: '鲜花饼', sales: 2345, revenue: 345678 },
-        { type: '饮品', code: 'KF004', name: '云南咖啡', sales: 1876, revenue: 234567 },
-        { type: '保健品', code: 'SQ005', name: '三七粉', sales: 1567, revenue: 456789 },
-        { type: '工艺品', code: 'YS006', name: '玉石手镯', sales: 1234, revenue: 345678 }
-      ]
     }
   },
   props: {
@@ -188,7 +166,6 @@ export default {
       default: 0
     }
   },
-
   computed: {
     // 饼图数据
     pieChartData() {
@@ -205,11 +182,10 @@ export default {
     // 饼图配置
     pieChartOpts() {
       return {
-        color: this.productTypeData.map(item => item.color),
         padding: [5, 5, 5, 5],
         dataLabel: true,
         legend: {
-          show: false
+          show: true
         },
         extra: {
           pie: {
@@ -229,7 +205,7 @@ export default {
     barChartData() {
       return {
         categories: this.salesRankingData.map(item =>
-          item.name
+          this.formatXAxisLabel(item.name)
         ),
         series: [{
           name: '销量',
@@ -282,6 +258,9 @@ export default {
             data: yAxisData
           }]
         },
+        categoriesReal: this.salesRankingData.map(item =>
+          item.name
+        ),
         extra: {
           column: {
             type: 'group',
@@ -349,15 +328,40 @@ export default {
     this.handleGetAllData()
   },
   methods: {
-    SalesRankingOfProducts() {
+    // 格式化X轴标签文字
-      console.log('1111');
+    formatXAxisLabel(name) {
-      return item.name + ':' + item.data + '件'
+      if (!name) return '';
+      // 如果名称超过4个字符，截取并添加省略号
+      return name.length > 4 ? name.substring(0, 4) + '...' : name;
     },
     // 获取整个组件的数据
     handleGetAllData() {
+      // 拿到商品类型分布
+      this.handleGetShopTypeDistribution()
       // 拿到商品销售排行榜
       this.handleGetTopSalesRank()
     },
+    // 拿到商品类型分布
+    async handleGetShopTypeDistribution() {
+      const req = {
+        ProvinceCode: '530000',
+        StatisticsMonth: '202509',
+        type: 'encryption'
+      }
+      const data = await request.$webPost(
+        "CommercialApi/SupplyChain/GetWelFareSummary",
+        req
+      );
+      console.log('商品类型分布', data);
+      let list = data.Result_Data.WelFareGoodsTypeList
+      let res = []
+      if (list && list.length > 0) {
+        list.forEach((item) => {
+          res.push({ name: item.GoodsTypeName, value: item.GoodsCount })
+        })
+      }
+      this.productTypeData = res
+    },
     // 拿到商品销售排行榜
     async handleGetTopSalesRank() {
       const req = {
@@ -378,6 +382,7 @@ export default {
         })
       }
       this.salesRankingData = res
+      this.productList = list
     },
 
 

pages/DigitalIntelligenceDashboard/components/TransactionReport.vue

@@ -78,16 +78,6 @@
         <view class="trend-chart-container">
           <QiunDataCharts type="line" :opts="trendChartOpts" :chartData="trendChartData" :canvas2d="true"
             :inScrollView="true" canvasId="trendChart" />
-          <view class="chart-legend">
-            <view class="legend-item">
-              <view class="legend-dot orders"></view>
-              <text class="legend-text">订单量</text>
-            </view>
-            <view class="legend-item">
-              <view class="legend-dot amount"></view>
-              <text class="legend-text">交易额(÷1000)</text>
-            </view>
-          </view>
         </view>
       </view>
     </view>
@@ -175,6 +165,7 @@
 
 <script>
 import QiunDataCharts from './qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
+import request from "@/util/index.js";
 
 export default {
   components: {
@@ -199,9 +190,9 @@ export default {
 
       // 交易趋势数据
       trendData: {
-        categories: ['1日', '5日', '10日', '15日', '20日', '25日', '30日'],
+        categories: [],
-        orderData: [1234, 1567, 1890, 2345, 1789, 2123, 2456],
+        orderData: [],
-        amountData: [234567, 345678, 456789, 567890, 478901, 589012, 678901]
+        amountData: []
       },
       funnelStages: [
         { name: '下单订单', count: 45678, rate: 100, percentage: 100 },
@@ -252,7 +243,7 @@ export default {
             data: this.trendData.orderData
           },
           {
-            name: '交易额(千元)',
+            name: '交易额',
             data: this.trendData.amountData.map(v => v / 1000) // 转换为千元单位
           }
         ]
@@ -262,14 +253,18 @@ export default {
     // 交易趋势图表配置
     trendChartOpts() {
       return {
-        color: ['#576EFF', '#52C41A'],
         padding: [15, 10, 0, 15],
         dataLabel: false,
         legend: {
-          show: false
+          show: true
         },
         xAxis: {
-          disableGrid: true
+          disableGrid: true,
+          type: 'category',
+          data: Array.from({ length: 30 }, (_, index) => index + 1),
+          format: function (val) {
+            return (val % 5 === 0) ? val : '';
+          }
         },
         yAxis: {
           gridType: 'dash',
@@ -288,8 +283,54 @@ export default {
       }
     }
   },
-
+  onReady() {
+    // 获取整个组件的数据
+    this.handleGetAllData()
+  },
   methods: {
+    // 获取整个组件的数据
+    handleGetAllData() {
+      // 拿到交易趋势分析的数据
+      this.handleTradingTrendData()
+    },
+    // 拿到交易趋势分析的数据
+    async handleTradingTrendData() {
+      const req = {
+        DataType: 1,// 1 日度  2 月度
+        ProvinceCode: '530000',
+        StartMonth: '202509',
+        EndMonth: '202509',
+        type: 'encryption'
+      }
+      const data = await request.$webPost(
+        "CommercialApi/SupplyChain/GetMallOrderSummary",
+        req
+      );
+      let list = data.Result_Data.List
+      console.log('交易趋势分析交易趋势分析', list);
+      let categories = [] // x轴
+      let orderData = [] // 销量
+      let amountData = [] // 销售额
+      if (list && list.length > 0) {
+        list.forEach((item) => {
+          categories.push(item.StatisticsDate.split('/')[2])
+          orderData.push(item.TicketCount)
+          amountData.push(item.SellAmount)
+        })
+      }
+      this.trendData = {
+        categories: orderData,
+        orderData: orderData,
+        amountData: amountData
+      }
+      // 要的结构
+      // trendData: {
+      //   categories: ['1日', '5日', '10日', '15日', '20日', '25日', '30日'],
+      //   orderData: [1234, 1567, 1890, 2345, 1789, 2123, 2456],
+      //   amountData: [234567, 345678, 456789, 567890, 478901, 589012, 678901]
+      // }
+
+    },
     formatNumber(num) {
       return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
     },

pages/DigitalIntelligenceDashboard/components/qiun-data-charts/js_sdk/u-charts/config-ucharts.js

@@ -96,11 +96,11 @@ const cfu = {
 	//下面是自定义format配置，因除H5端外的其他端无法通过props传递函数，只能通过此属性对应下标的方式来替换
 	"formatter": {
 		'SalesRankingOfProducts': function (item, category, index, opts) {
-			console.log('', item);
+			// console.log('', item);
-			console.log('', category);
+			// console.log('', category);
-			console.log('', index);
+			// console.log('', index);
-			console.log('', opts);
+			// console.log('', opts);
-			return `${category}：${item.data.toLocaleString()}件`
+			return `${opts.categoriesReal[index]}：${item.data.toLocaleString()}件`
 		},
 		"yAxisDemo1": function (val, index, opts) { return val + '元' },
 		"yAxisDemo2": function (val, index, opts) { return val.toFixed(2) },