update

App.vue

@@ -10,21 +10,21 @@ export default {
     ...mapActions(["memberLogin", "getLoginCode"]),
     ...mapMutations(["setVisitChannels"]),
     handleGetUserInfo() {
-      wx.request({
+      // wx.request({
-        url: "https://qifu-api.baidubce.com/ip/local/geo/v1/district",
+      //   url: "https://qifu-api.baidubce.com/ip/local/geo/v1/district",
-        success(response) {
+      //   success(response) {
-          const data = response.data;
+      //     const data = response.data;
-          // 处理数据
+      //     // 处理数据
-          let obj = {
+      //     let obj = {
-            ...data.data,
+      //       ...data.data,
-            ip: data.ip,
+      //       ip: data.ip,
-          };
+      //     };
-          uni.setStorageSync("userInfo", obj);
+      //     uni.setStorageSync("userInfo", obj);
-        },
+      //   },
-        fail(error) {
+      //   fail(error) {
-          // 处理错误
+      //     // 处理错误
-        },
+      //   },
-      });
+      // });
     },
   },
   onLaunch: async function (options) {

pages/DigitalIntelligenceDashboard/components/AnalysisOfMember.vue

@@ -3,7 +3,10 @@
         <!-- 会员分析图表 -->
         <view class="chart-card">
             <view class="chart-container">
-                <QiunDataCharts type="column" :opts="chartOpts" :chartData="chartData" :canvas2d="true"
+                <!-- 图表加载效果 -->
+                <ChartLoading v-if="!hasChartData" text="数据加载中..." />
+                <!-- 实际图表 -->
+                <QiunDataCharts v-else type="column" :opts="chartOpts" :chartData="chartData" :canvas2d="true"
                     :inScrollView="true" canvasId="analysisOfMemberChart" :animation="false" :ontap="true"
                     :ontouch="true" tooltipFormat="AnalysisOfMember" />
             </view>
@@ -13,12 +16,14 @@
 
 <script>
 import QiunDataCharts from './qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
+import ChartLoading from './ChartLoading.vue'
 import request from "@/util/index.js";
 import moment from 'moment'
 
 export default {
     components: {
-        QiunDataCharts
+        QiunDataCharts,
+        ChartLoading
     },
 
     data() {
@@ -34,6 +39,13 @@ export default {
     },
 
     computed: {
+        // 检查是否有图表数据
+        hasChartData() {
+            return this.rawData.category.length > 0 &&
+                this.rawData.weeklyData.length > 0 &&
+                this.rawData.otherData.length > 0
+        },
+
         // 图表数据
         chartData() {
             return {
@@ -56,7 +68,7 @@ export default {
         // 图表配置
         chartOpts() {
             return {
-                padding: [15, 15, 15, 15],
+                padding: [15, 15, 0, 15],
                 dataLabel: false,
                 enableScroll: true,
                 dataPointShape: false,
@@ -65,14 +77,15 @@ export default {
                     itemCount: 4 // 显示4个分类
                 },
                 yAxis: {
+                    showTitle: true,
+                    titleFontSize: 12,
+                    titleOffsetY: 10,
+                    titleOffsetX: 10,
+                    min: 0,
                     data: [{
                         min: 0,
                         max: 100,
                         title: '百分比(%)',
-                        titleFontSize: 12,
-                        titleOffsetY: 0,
-                        unit: '%',
-                        format: 'value' // 显示纯数字值
                     }]
                 },
                 legend: {

pages/DigitalIntelligenceDashboard/components/BrandConsumptionLevel.vue

@@ -7,21 +7,26 @@
 
         <!-- 品牌消费水平图表 -->
         <view class="chart-container">
-            <QiunDataCharts type="column" :opts="chartOpts" :chartData="chartData" :canvas2d="true" :inScrollView="true"
+            <!-- 图表加载效果 -->
-                canvasId="brandConsumptionLevelChart" :animation="false" :ontap="true" :ontouch="true"
+            <ChartLoading v-if="!hasChartData" text="数据加载中..." />
-                tooltipFormat="BrandConsumptionLevel" />
+            <!-- 实际图表 -->
+            <QiunDataCharts v-else type="column" :opts="chartOpts" :chartData="chartData" :canvas2d="true"
+                :inScrollView="true" canvasId="brandConsumptionLevelChart" :animation="false" :ontap="true"
+                :ontouch="true" tooltipFormat="BrandConsumptionLevel" />
         </view>
     </view>
 </template>
 
 <script>
 import QiunDataCharts from './qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
+import ChartLoading from './ChartLoading.vue'
 import request from "@/util/index.js";
 import moment from 'moment'
 
 export default {
     components: {
-        QiunDataCharts
+        QiunDataCharts,
+        ChartLoading
     },
 
     data() {
@@ -33,8 +38,19 @@ export default {
             }
         }
     },
-
+    props: {
+        selectTime: {
+            type: String,
+            default: ""
+        },
+    },
     computed: {
+        // 检查是否有图表数据
+        hasChartData() {
+            return this.rawData.category.length > 0 &&
+                this.rawData.seriesData.length > 0
+        },
+
         // 图表数据
         chartData() {
             return {
@@ -46,7 +62,7 @@ export default {
         // 图表配置
         chartOpts() {
             return {
-                padding: [15, 15, 15, 15],
+                padding: [15, 15, 0, 15],
                 dataLabel: false,
                 enableScroll: true,
                 xAxis: {
@@ -54,9 +70,13 @@ export default {
                     itemCount: 4,
                 },
                 yAxis: {
+                    showTitle: true,
                     data: [{
                         min: 0,
-                        title: '%'
+                        title: '百分比(%)',
+                        titleFontSize: 12,
+                        titleOffsetY: -5,
+                        titleOffsetX: 0,
                     }]
                 },
                 legend: {
@@ -95,7 +115,7 @@ export default {
         async handleGetBrandConsumptionLevelData() {
             const req = {
                 ProvinceCode: '530000',
-                StatisticsDate: moment().subtract(1, 'd').subtract(1, 'M').format('YYYY-MM-DD'),
+                StatisticsDate: this.selectTime ? moment(this.selectTime).subtract(1, 'd').subtract(1, 'M').format('YYYY-MM-DD') : moment().subtract(1, 'd').subtract(1, 'M').format('YYYY-MM-DD'),
                 // ServerpartId: ''
             }
 

pages/DigitalIntelligenceDashboard/components/BrandDetail.vue

@@ -8,7 +8,10 @@
 
             <!-- 图表容器 -->
             <view class="chart-container">
-                <QiunDataCharts type="pie" :opts="chartOpts" :chartData="chartData" :canvas2d="true"
+                <!-- 图表加载效果 -->
+                <ChartLoading v-if="!hasChartData" text="数据加载中..." />
+                <!-- 实际图表 -->
+                <QiunDataCharts v-else type="pie" :opts="chartOpts" :chartData="chartData" :canvas2d="true"
                     :inScrollView="true" canvasId="brandChart" :animation="false" :ontap="true" :ontouch="true"
                     tooltipFormat="BrandDetail" />
             </view>
@@ -30,6 +33,10 @@
 
             <!-- 品牌列表容器 -->
             <view class="brand-list-box">
+                <!-- 品牌列表加载效果 -->
+                <ChartLoading v-if="!hasBrandListData" text="数据加载中..." />
+                <!-- 品牌列表内容 -->
+                <view v-else>
                     <view class="brand-item" v-for="(item, index) in brandListData" :key="index"
                         :style="{ marginBottom: index + 1 === brandListData.length ? '0' : '20rpx' }">
                         <view class=" brand-left">
@@ -52,17 +59,20 @@
                 </view>
             </view>
         </view>
+    </view>
 </template>
 
 <script>
 import QiunDataCharts from './qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
+import ChartLoading from './ChartLoading.vue'
 import request from "@/util/index.js";
 import moment from 'moment'
 import { wrapTreeNode } from "@/util/dateTime";
 
 export default {
     components: {
-        QiunDataCharts
+        QiunDataCharts,
+        ChartLoading
     },
 
     data() {
@@ -88,6 +98,16 @@ export default {
     },
 
     computed: {
+        // 检查是否有图表数据
+        hasChartData() {
+            return this.rawData.pieData.length > 0
+        },
+
+        // 检查是否有品牌列表数据
+        hasBrandListData() {
+            return this.brandListData && this.brandListData.length > 0;
+        },
+
         // 图表数据
         chartData() {
             return {
@@ -100,36 +120,23 @@ export default {
         // 图表配置
         chartOpts() {
             return {
-                padding: [15, 15, 15, 15],
+                padding: [15, 15, 0, 15],
                 dataLabel: false,
                 legend: {
                     show: true,
                     position: 'right',
                     float: 'center',
-                    backgroundColor: 'rgba(0,0,0,0)',
-                    borderColor: 'rgba(0,0,0,0)',
                     fontSize: 12,
                     fontColor: '#333333',
-                    margin: 0,
-                    padding: 0,
-                    itemGap: 10,
-                    textAlign: 'left',
-                    // 自定义图例格式
-                    formatter: function (name) {
-                        // 这里需要返回格式化的文本，但QiunDataCharts的formatter可能不支持
-                        return name
-                    }
                 },
                 extra: {
                     pie: {
-                        activeOpacity: 0.5,
                         activeRadius: 10,
                         offsetAngle: 0,
                         labelWidth: 0,
                         border: false,
                         borderWidth: 2,
                         borderColor: '#FFFFFF',
-                        linearType: 'custom'
                     }
                 }
             }
@@ -358,6 +365,8 @@ export default {
             border-radius: 16rpx;
             padding: 24rpx;
             box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+            min-height: 300rpx;
+            /* 设置最小高度以显示加载效果 */
 
             .brand-item {
                 display: flex;

pages/DigitalIntelligenceDashboard/components/BusinessCase.vue

@@ -20,8 +20,10 @@
 
 
             <view style="width:100%;height: 400rpx;">
-                <!-- 图表 -->
+                <!-- 图表加载效果 -->
-                <QiunDataCharts type="column" :opts="chartOpts" :chartData="chartData" :canvas2d="true"
+                <ChartLoading v-if="!hasChartData" text="数据加载中..." />
+                <!-- 实际图表 -->
+                <QiunDataCharts v-else type="column" :opts="chartOpts" :chartData="chartData" :canvas2d="true"
                     :inScrollView="true" canvasId="businessCaseChart" :animation="false" :ontap="true" :ontouch="true"
                     tooltipFormat="businessCaseChart" />
             </view>
@@ -32,12 +34,14 @@
 
 <script>
 import QiunDataCharts from './qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
+import ChartLoading from './ChartLoading.vue'
 import request from "@/util/index.js";
 import moment from 'moment'
 
 export default {
     components: {
-        QiunDataCharts
+        QiunDataCharts,
+        ChartLoading
     },
 
     data() {
@@ -60,8 +64,19 @@ export default {
             }
         }
     },
-
+    props: {
+        selectTime: {
+            type: String,
+            default: ""
+        },
+    },
     computed: {
+        // 检查是否有图表数据
+        hasChartData() {
+            return this.rawData.category.length > 0 &&
+                this.rawData.seriesData.length > 0
+        },
+
         // 图表数据
         chartData() {
             return {
@@ -73,7 +88,7 @@ export default {
         // 图表配置
         chartOpts() {
             return {
-                padding: [15, 15, 15, 15], // 增加顶部padding为picker留出空间
+                padding: [15, 15, 0, 15], // 增加顶部padding为picker留出空间
                 dataLabel: false,
                 enableScroll: true,
                 xAxis: {
@@ -81,9 +96,13 @@ export default {
                     itemCount: 4,
                 },
                 yAxis: {
+                    showTitle: true,
                     data: [{
                         min: 0,
-                        title: this.getYAxisTitle()
+                        title: this.getYAxisTitle(),
+                        titleFontSize: 12,
+                        titleOffsetY: -5,
+                        titleOffsetX: 10,
                     }]
                 },
                 legend: {
@@ -108,7 +127,8 @@ export default {
                         seriesGap: 0,
                         barBorderRadius: [3, 3, 0, 0]
                     }
-                }
+                },
+                unitType: this.selectTab
             }
         }
     },
@@ -122,7 +142,7 @@ export default {
         async handleGetBusinessCaseData() {
             const req = {
                 ProvinceCode: "530000",
-                StatisticsDate: moment().subtract(1, 'd').format('YYYY-MM-DD'),
+                StatisticsDate: this.selectTime ? moment(this.selectTime).subtract(1, 'd').format('YYYY-MM-DD') : moment().subtract(1, 'd').format('YYYY-MM-DD'),
                 ServerpartId: "", // 暂时为空，如果需要传入服务区ID可以在这里添加
             }
 

pages/DigitalIntelligenceDashboard/components/BusinessStructure.vue

@@ -7,8 +7,11 @@
 
         <!-- 业态结构占比图表 -->
         <view class="chart-container">
-            <QiunDataCharts type="pie" :opts="chartOpts" :chartData="chartData" :canvas2d="true" :inScrollView="true"
+            <!-- 图表加载效果 -->
-                canvasId="businessStructureChart" :animation="false" :ontap="true" :ontouch="true"
+            <ChartLoading v-if="!hasChartData" text="数据加载中..." />
+            <!-- 实际图表 -->
+            <QiunDataCharts v-else type="pie" :opts="chartOpts" :chartData="chartData" :canvas2d="true"
+                :inScrollView="true" canvasId="businessStructureChart" :animation="false" :ontap="true" :ontouch="true"
                 tooltipFormat="businessStructureChart" />
         </view>
     </view>
@@ -16,14 +19,21 @@
 
 <script>
 import QiunDataCharts from './qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
+import ChartLoading from './ChartLoading.vue'
 import request from "@/util/index.js";
 import moment from 'moment'
 
 export default {
     components: {
-        QiunDataCharts
+        QiunDataCharts,
+        ChartLoading
+    },
+    props: {
+        selectTime: {
+            type: String,
+            default: ""
+        },
     },
-
     data() {
         return {
             // 图表原始数据
@@ -35,6 +45,11 @@ export default {
     },
 
     computed: {
+        // 检查是否有图表数据
+        hasChartData() {
+            return this.rawData.seriesData.length > 0
+        },
+
         // 图表数据
         chartData() {
             return {
@@ -47,34 +62,28 @@ export default {
         // 图表配置
         chartOpts() {
             return {
-                padding: [15, 15, 15, 15],
+                padding: [15, 62, 0, 15],
                 dataLabel: false,
                 legend: {
                     show: true,
                     position: 'right',
                     float: 'center',
-                    backgroundColor: 'rgba(0,0,0,0)',
-                    borderColor: 'rgba(0,0,0,0)',
                     fontSize: 12,
                     fontColor: '#333333',
-                    margin: 0,
-                    padding: 0,
-                    itemGap: 10,
                     textAlign: 'left'
                 },
                 extra: {
                     pie: {
-                        activeOpacity: 0.5,
                         activeRadius: 10,
                         offsetAngle: 0,
                         labelWidth: 0,
                         border: false,
                         borderWidth: 2,
                         borderColor: '#FFFFFF',
-                        linearType: 'custom'
                     }
                 },
-                realData: this.rawData.seriesData
+                realData: this.rawData.seriesData,
+                legendData: this.rawData.legendData
             }
         }
     },
@@ -88,7 +97,7 @@ export default {
         async handleGetBusinessStructureData() {
             const req = {
                 ProvinceCode: '530000',
-                StatisticsDate: moment().subtract(1, 'd').format('YYYY-MM-DD'),
+                StatisticsDate: this.selectTime ? moment(this.selectTime).subtract(1, 'd').format('YYYY-MM-DD') : moment().subtract(1, 'd').format('YYYY-MM-DD'),
                 BusinessTradeIds: -1,
                 ServerpartId: "" // 暂时为空，如果需要传入服务区ID可以在这里添加
             }

pages/DigitalIntelligenceDashboard/components/ChartLoading.vue

@@ -0,0 +1,118 @@
+<template>
+    <view class="chart-loading">
+        <view class="loading-container">
+            <!-- 加载动画图标 -->
+            <view class="loading-icon">
+                <view class="loading-dot dot1"></view>
+                <view class="loading-dot dot2"></view>
+                <view class="loading-dot dot3"></view>
+            </view>
+            <!-- 加载文字 -->
+            <view class="loading-text">{{ text }}</view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    name: 'ChartLoading',
+    props: {
+        // 加载文字
+        text: {
+            type: String,
+            default: '数据加载中...'
+        },
+        // 加载图标大小
+        size: {
+            type: String,
+            default: 'medium' // small, medium, large
+        },
+        // 背景是否透明
+        transparent: {
+            type: Boolean,
+            default: false
+        }
+    }
+}
+</script>
+
+<style scoped lang="less">
+.chart-loading {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #fff;
+    border-radius: 8rpx;
+    min-height: 300rpx;
+
+    &.transparent {
+        background: transparent;
+    }
+}
+
+.loading-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 20rpx;
+}
+
+.loading-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8rpx;
+
+    &.small {
+        transform: scale(0.8);
+    }
+
+    &.large {
+        transform: scale(1.2);
+    }
+}
+
+.loading-dot {
+    width: 12rpx;
+    height: 12rpx;
+    border-radius: 50%;
+    background: linear-gradient(45deg, #46B8F3, #1A4AF6);
+    animation: loading-bounce 1.4s ease-in-out infinite both;
+
+    &.dot1 {
+        animation-delay: -0.32s;
+    }
+
+    &.dot2 {
+        animation-delay: -0.16s;
+    }
+
+    &.dot3 {
+        animation-delay: 0;
+    }
+}
+
+.loading-text {
+    font-size: 24rpx;
+    color: #666;
+    opacity: 0.8;
+}
+
+@keyframes loading-bounce {
+
+    0%,
+    80%,
+    100% {
+        transform: scale(0);
+        opacity: 0.5;
+    }
+
+    40% {
+        transform: scale(1);
+        opacity: 1;
+    }
+}
+</style>

pages/DigitalIntelligenceDashboard/components/ConsumptionConversion.vue

@@ -7,21 +7,26 @@
 
         <!-- 消费转化对比图图表 -->
         <view class="chart-container">
-            <QiunDataCharts type="line" :opts="chartOpts" :chartData="chartData" :canvas2d="true" :inScrollView="true"
+            <!-- 图表加载效果 -->
-                canvasId="consumptionConversionChart" :animation="false" :ontap="true" :ontouch="true"
+            <ChartLoading v-if="!hasChartData" text="数据加载中..." />
-                tooltipFormat="ConsumptionConversion" />
+            <!-- 实际图表 -->
+            <QiunDataCharts v-else type="line" :opts="chartOpts" :chartData="chartData" :canvas2d="true"
+                :inScrollView="true" canvasId="consumptionConversionChart" :animation="false" :ontap="true"
+                :ontouch="true" tooltipFormat="ConsumptionConversion" />
         </view>
     </view>
 </template>
 
 <script>
 import QiunDataCharts from './qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
+import ChartLoading from './ChartLoading.vue'
 import request from "@/util/index.js";
 import moment from 'moment'
 
 export default {
     components: {
-        QiunDataCharts
+        QiunDataCharts,
+        ChartLoading
     },
 
     data() {
@@ -38,6 +43,13 @@ export default {
     },
 
     computed: {
+        // 检查是否有图表数据
+        hasChartData() {
+            return this.rawData.category.length > 0 &&
+                this.rawData.carResList.length > 0 &&
+                this.rawData.orderResList.length > 0
+        },
+
         // 图表数据
         chartData() {
             return {
@@ -58,27 +70,28 @@ export default {
         // 图表配置
         chartOpts() {
             return {
-                padding: [15, 15, 15, 15],
+                padding: [15, 15, 0, 15],
                 dataLabel: false,
-                enableScroll: true,
+                enableScroll: false, // 关闭滚动
                 dataPointShape: true,
                 xAxis: {
                     disableGrid: true,
-                    itemCount: 8, // 增加显示数量，让刻度更紧凑
+                    itemCount: this.rawData.category.length || 7, // 动态显示时间点数量
                 },
                 yAxis: {
+                    showTitle: true,
                     data: [
                         {
                             title: '车流量(辆)',
                             titleFontSize: 12,
-                            titleOffsetY: 0,
+                            titleOffsetY: -5,
                             titleOffsetX: 0,
                             position: 'left'
                         },
                         {
                             title: '客单量(笔)',
                             titleFontSize: 12,
-                            titleOffsetY: 0,
+                            titleOffsetY: -5,
                             titleOffsetX: 0,
                             position: 'right'
                         }
@@ -124,7 +137,7 @@ export default {
         async handleGetConsumptionConversionData() {
             const req = {
                 Province_Code: '530000',
-                Statistics_Date: moment().subtract(1, 'd').subtract(1, 'M').format('YYYY-MM-DD'),
+                Statistics_Date: this.selectTime ? moment(this.selectTime).subtract(1, 'd').subtract(1, 'M').format('YYYY-MM-DD') : moment().subtract(1, 'd').subtract(1, 'M').format('YYYY-MM-DD'),
                 Serverpart_ID: "" // 暂时为空，如果需要传入服务区ID可以在这里添加
             }
 
@@ -151,25 +164,66 @@ export default {
             let orderResList = []
             let orderRealResList = []
 
-            // 处理车流数据
+            // 创建时间点映射，用于快速查找
+            let carDataMap = {}
+            let orderDataMap = {}
+            let availableHours = new Set()
+
+            // 处理车流数据，创建映射
             if (data.BayonetList && data.BayonetList.data && data.BayonetList.data.length > 0) {
                 let carList = data.BayonetList.data
                 carList.forEach((item) => {
-                    carResList.push(Number(item[1]))
+                    const hour = parseInt(item[0])
-                    carRealResList.push(item[1])
+                    carDataMap[hour] = Number(item[1])
+                    availableHours.add(hour)
                 })
             }
 
-            // 处理客单量数据
+            // 处理客单量数据，创建映射
             if (data.TransactionList && data.TransactionList.data && data.TransactionList.data.length > 0) {
                 let orderList = data.TransactionList.data
                 orderList.forEach((item) => {
-                    category.push(`${item[0]}时`)
+                    const hour = parseInt(item[0])
-                    orderResList.push(Number(item[1]))
+                    orderDataMap[hour] = Number(item[1])
-                    orderRealResList.push(item[1])
+                    availableHours.add(hour)
                 })
             }
 
+            // 将Set转换为数组并排序
+            let sortedHours = Array.from(availableHours).sort((a, b) => a - b)
+
+            // 选择要显示的时间点
+            let selectedHours = []
+
+            // 1. 优先选择能被4整除的时间点（4时、8时、12时、16时、20时）
+            sortedHours.forEach(hour => {
+                if (hour % 4 === 0) {
+                    selectedHours.push(hour)
+                }
+            })
+
+            // 2. 检查并补充0时和23时（如果存在的话）
+            if (availableHours.has(0) && !selectedHours.includes(0)) {
+                selectedHours.unshift(0) // 0时放在最前面
+            }
+            if (availableHours.has(23) && !selectedHours.includes(23)) {
+                selectedHours.push(23) // 23时放在最后面
+            }
+
+            // 3. 如果没有找到任何时间点，则使用默认的7个关键时间点
+            if (selectedHours.length === 0) {
+                selectedHours = [0, 4, 8, 12, 16, 20, 23]
+            }
+
+            // 按选定的时间点生成数据
+            selectedHours.forEach(hour => {
+                category.push(`${hour}时`)
+                carResList.push(carDataMap[hour] || 0)
+                carRealResList.push(carDataMap[hour] || 0)
+                orderResList.push(orderDataMap[hour] || 0)
+                orderRealResList.push(orderDataMap[hour] || 0)
+            })
+
             // 更新图表数据
             this.rawData = {
                 category: category,

pages/DigitalIntelligenceDashboard/components/ConsumptionLevel.vue

@@ -8,8 +8,11 @@
 
         <!-- 消费水平图表 -->
         <view class="chart-container">
-            <QiunDataCharts type="column" :opts="chartOpts" :chartData="chartData" :canvas2d="true" :inScrollView="true"
+            <!-- 图表加载效果 -->
-                canvasId="consumptionLevelChart" :animation="false" :ontap="true" :ontouch="true"
+            <ChartLoading v-if="!hasChartData" text="数据加载中..." />
+            <!-- 实际图表 -->
+            <QiunDataCharts v-else type="column" :opts="chartOpts" :chartData="chartData" :canvas2d="true"
+                :inScrollView="true" canvasId="consumptionLevelChart" :animation="false" :ontap="true" :ontouch="true"
                 tooltipFormat="ConsumptionLevel" />
         </view>
     </view>
@@ -17,12 +20,14 @@
 
 <script>
 import QiunDataCharts from './qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
+import ChartLoading from './ChartLoading.vue'
 import request from "@/util/index.js";
 import moment from 'moment'
 
 export default {
     components: {
-        QiunDataCharts
+        QiunDataCharts,
+        ChartLoading
     },
 
     data() {
@@ -34,8 +39,19 @@ export default {
             }
         }
     },
-
+    props: {
+        selectTime: {
+            type: String,
+            default: ""
+        },
+    },
     computed: {
+        // 检查是否有图表数据
+        hasChartData() {
+            return this.rawData.category.length > 0 &&
+                this.rawData.seriesData.length > 0
+        },
+
         // 图表数据
         chartData() {
             return {
@@ -47,7 +63,7 @@ export default {
         // 图表配置
         chartOpts() {
             return {
-                padding: [15, 15, 15, 15],
+                padding: [15, 15, 0, 15],
                 dataLabel: false,
                 enableScroll: true,
                 xAxis: {
@@ -56,9 +72,13 @@ export default {
                     margin: 15
                 },
                 yAxis: {
+                    showTitle: true,
                     data: [{
                         min: 0,
-                        title: '%'
+                        title: '百分比(%)',
+                        titleFontSize: 12,
+                        titleOffsetY: -5,
+                        titleOffsetX: 0,
                     }]
                 },
                 legend: {
@@ -97,7 +117,7 @@ export default {
         async handleGetConsumptionLevelData() {
             const req = {
                 ProvinceCode: '530000',
-                StatisticsDate: moment().subtract(1, 'd').subtract(1, 'M').format('YYYY-MM-DD'),
+                StatisticsDate: this.selectTime ? moment(this.selectTime).subtract(1, 'd').subtract(1, 'M').format('YYYY-MM-DD') : moment().subtract(1, 'd').subtract(1, 'M').format('YYYY-MM-DD'),
                 // ServerpartId: ''
             }
 

pages/DigitalIntelligenceDashboard/components/ConsumptionPeriod.vue

@@ -7,8 +7,11 @@
 
         <!-- 消费时段分析图表 -->
         <view class="chart-container">
-            <QiunDataCharts type="line" :opts="chartOpts" :chartData="chartData" :canvas2d="true" :inScrollView="true"
+            <!-- 图表加载效果 -->
-                canvasId="consumptionPeriodChart" :animation="false" :ontap="true" :ontouch="true"
+            <ChartLoading v-if="!hasChartData" text="数据加载中..." />
+            <!-- 实际图表 -->
+            <QiunDataCharts v-else type="line" :opts="chartOpts" :chartData="chartData" :canvas2d="true"
+                :inScrollView="true" canvasId="consumptionPeriodChart" :animation="false" :ontap="true" :ontouch="true"
                 tooltipFormat="ConsumptionPeriod" />
         </view>
     </view>
@@ -16,12 +19,14 @@
 
 <script>
 import QiunDataCharts from './qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
+import ChartLoading from './ChartLoading.vue'
 import request from "@/util/index.js";
 import moment from 'moment'
 
 export default {
     components: {
-        QiunDataCharts
+        QiunDataCharts,
+        ChartLoading
     },
 
     data() {
@@ -33,8 +38,19 @@ export default {
             }
         }
     },
-
+    props: {
+        selectTime: {
+            type: String,
+            default: ""
+        },
+    },
     computed: {
+        // 检查是否有图表数据
+        hasChartData() {
+            return this.rawData.category.length > 0 &&
+                this.rawData.seriesData.length > 0
+        },
+
         // 图表数据
         chartData() {
             return {
@@ -51,20 +67,21 @@ export default {
         // 图表配置
         chartOpts() {
             return {
-                padding: [15, 15, 15, 15],
+                padding: [15, 15, 0, 15],
                 dataLabel: false,
-                enableScroll: true,
+                enableScroll: false, // 关闭滚动
                 dataPointShape: true,
                 xAxis: {
                     disableGrid: true,
-                    itemCount: 6,
+                    itemCount: this.rawData.category.length || 6, // 动态显示时间点数量
                 },
                 yAxis: {
+                    showTitle: true,
                     data: [{
                         min: 0,
                         title: '客单占比(%)',
                         titleFontSize: 12,
-                        titleOffsetY: 0,
+                        titleOffsetY: -5,
                         titleOffsetX: 0
                     }]
                 },
@@ -108,7 +125,7 @@ export default {
         async handleGetConsumptionPeriodData() {
             const req = {
                 Province_Code: '530000',
-                Statistics_Date: moment().subtract(1, 'd').subtract(1, 'M').format('YYYY-MM-DD'),
+                Statistics_Date: this.selectTime ? moment(this.selectTime).subtract(1, 'd').subtract(1, 'M').format('YYYY-MM-DD') : moment().subtract(1, 'd').subtract(1, 'M').format('YYYY-MM-DD'),
                 Serverpart_ID: '',
                 TimeSpan: 1
             }
@@ -132,6 +149,8 @@ export default {
         processChartData(data) {
             let category = []
             let seriesData = []
+            let dataMap = {}
+            let availableHours = new Set()
 
             // 处理数据：获取消费时段分析数据
             if (data && data.length > 0) {
@@ -141,15 +160,45 @@ export default {
                     orderSum += Number(item.data)
                 })
 
-                // data 是笔数  key 是金额
+                // 创建数据映射和记录可用时间点
                 data.forEach((item, index) => {
-                    if (index < 10) {
+                    const hour = index
-                        category.push(`0${index}:00`)
+                    const percentage = Number(((item.data / orderSum) * 100).toFixed(2))
-                    } else {
+
-                        category.push(`${index}:00`)
+                    dataMap[hour] = percentage
+                    availableHours.add(hour)
+                })
+
+                // 将Set转换为数组并排序
+                let sortedHours = Array.from(availableHours).sort((a, b) => a - b)
+
+                // 选择要显示的时间点
+                let selectedHours = []
+
+                // 1. 优先选择能被4整除的时间点（4时、8时、12时、16时、20时）
+                sortedHours.forEach(hour => {
+                    if (hour % 4 === 0) {
+                        selectedHours.push(hour)
+                    }
+                })
+
+                // 2. 检查并补充0时和23时（如果存在的话）
+                if (availableHours.has(0) && !selectedHours.includes(0)) {
+                    selectedHours.unshift(0) // 0时放在最前面
+                }
+                if (availableHours.has(23) && !selectedHours.includes(23)) {
+                    selectedHours.push(23) // 23时放在最后面
                 }
 
-                    seriesData.push(Number(((item.data / orderSum) * 100).toFixed(2)))
+                // 3. 如果没有找到任何时间点，则使用默认的关键时间点
+                if (selectedHours.length === 0) {
+                    selectedHours = [0, 4, 8, 12, 16, 20, 23]
+                }
+
+                // 按选定的时间点生成数据
+                selectedHours.forEach(hour => {
+                    category.push(`${hour}时`)
+                    seriesData.push(dataMap[hour] || 0)
                 })
             }
 

pages/DigitalIntelligenceDashboard/components/CustomerAgeGroup.vue

@@ -7,8 +7,11 @@
 
         <!-- 年龄图表 -->
         <view class="chart-container">
-            <QiunDataCharts type="column" :opts="chartOpts" :chartData="chartData" :canvas2d="true" :inScrollView="true"
+            <!-- 图表加载效果 -->
-                canvasId="customerAgeGroupChart" :animation="false" :ontap="true" :ontouch="true"
+            <ChartLoading v-if="!hasChartData" text="数据加载中..." />
+            <!-- 实际图表 -->
+            <QiunDataCharts v-else type="column" :opts="chartOpts" :chartData="chartData" :canvas2d="true"
+                :inScrollView="true" canvasId="customerAgeGroupChart" :animation="false" :ontap="true" :ontouch="true"
                 tooltipFormat="CustomerAgeGroup" />
         </view>
     </view>
@@ -16,12 +19,14 @@
 
 <script>
 import QiunDataCharts from './qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
+import ChartLoading from './ChartLoading.vue'
 import request from "@/util/index.js";
 import moment from 'moment'
 
 export default {
     components: {
-        QiunDataCharts
+        QiunDataCharts,
+        ChartLoading
     },
 
     data() {
@@ -34,8 +39,20 @@ export default {
             }
         }
     },
-
+    props: {
+        selectTime: {
+            type: String,
+            default: ""
+        },
+    },
     computed: {
+        // 检查是否有图表数据
+        hasChartData() {
+            return this.rawData.category.length > 0 &&
+                this.rawData.seriesDataMan.length > 0 &&
+                this.rawData.seriesDataWoman.length > 0
+        },
+
         // 图表数据
         chartData() {
             return {
@@ -62,16 +79,15 @@ export default {
                 xAxis: {
                     disableGrid: true,
                     itemCount: 6, // 默认显示6个月的数据
-                    scrollShow: true, // 显示滚动条
-                    scrollAlign: 'left', // 滚动条对齐方式
-                    scrollColor: '#46B8F3', // 滚动条颜色
-                    scrollWidth: 4, // 滚动条宽度
-                    scrollHeight: 8 // 滚动条高度
                 },
                 yAxis: {
+                    showTitle: true,
                     data: [{
                         min: 0,
-                        title: '%',
+                        title: '百分比(%)',
+                        titleFontSize: 12,
+                        titleOffsetY: -5,
+                        titleOffsetX: 10,
                     }]
                 },
                 extra: {
@@ -97,7 +113,7 @@ export default {
         async handleGetCustomerAgeData() {
             const req = {
                 provinceCode: '530000',
-                statisticsMonth: moment(moment().subtract(1, 'M')).format('YYYYMM'),
+                statisticsMonth: this.selectTime ? moment(moment(this.selectTime).subtract(1, 'M')).format('YYYYMM') : moment(moment().subtract(1, 'M')).format('YYYYMM'),
             }
 
             const data = await this.getCustomerAgeRatio(req);

pages/DigitalIntelligenceDashboard/components/CustomerConsumptionPreferences.vue

@@ -7,21 +7,26 @@
 
         <!-- 客群消费偏好图表 -->
         <view class="chart-container">
-            <QiunDataCharts type="column" :opts="chartOpts" :chartData="chartData" :canvas2d="true" :inScrollView="true"
+            <!-- 图表加载效果 -->
-                canvasId="customerConsumptionPreferencesChart" :animation="false" :ontap="true" :ontouch="true"
+            <ChartLoading v-if="!hasChartData" text="数据加载中..." />
-                tooltipFormat="customerConsumptionPreferencesChart" />
+            <!-- 实际图表 -->
+            <QiunDataCharts v-else type="column" :opts="chartOpts" :chartData="chartData" :canvas2d="true"
+                :inScrollView="true" canvasId="customerConsumptionPreferencesChart" :animation="false" :ontap="true"
+                :ontouch="true" tooltipFormat="customerConsumptionPreferencesChart" />
         </view>
     </view>
 </template>
 
 <script>
 import QiunDataCharts from './qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
+import ChartLoading from './ChartLoading.vue'
 import request from "@/util/index.js";
 import moment from 'moment'
 
 export default {
     components: {
-        QiunDataCharts
+        QiunDataCharts,
+        ChartLoading
     },
 
     data() {
@@ -34,8 +39,19 @@ export default {
             }
         }
     },
+    props: {
+        selectTime: {
+            type: String,
+            default: ""
+        },
+    },
 
     computed: {
+        // 判断图表数据是否已加载
+        hasChartData() {
+            return this.rawData.category && this.rawData.category.length > 0;
+        },
+
         // 图表数据
         chartData() {
             return {
@@ -52,7 +68,7 @@ export default {
         // 图表配置
         chartOpts() {
             return {
-                padding: [15, 15, 15, 15], // 增加底部padding为X轴文字留空间
+                padding: [15, 15, 0, 15], // 增加底部padding为X轴文字留空间
                 dataLabel: false,
                 enableScroll: true,
                 xAxis: {
@@ -60,9 +76,13 @@ export default {
                     itemCount: 4, // 减少显示数量，避免文字太挤
                 },
                 yAxis: {
+                    showTitle: true,
                     data: [{
                         min: 0,
-                        title: '%'
+                        title: '百分比(%)',
+                        titleFontSize: 12,
+                        titleOffsetY: -5,
+                        titleOffsetX: 10,
                     }]
                 },
                 legend: {
@@ -99,7 +119,7 @@ export default {
         async handleGetCustomerConsumptionPreferencesData() {
             const req = {
                 ProvinceCode: '530000',
-                StatisticsDate: moment().subtract(1, 'd').format('YYYY-MM-DD'),
+                StatisticsDate: this.selectTime ? moment(this.selectTime).subtract(1, 'd').format('YYYY-MM-DD') : moment().subtract(1, 'd').format('YYYY-MM-DD'),
                 ServerpartId: "" // 暂时为空，如果需要传入服务区ID可以在这里添加
             }
 

pages/DigitalIntelligenceDashboard/components/CustomerGroup.vue

@@ -7,20 +7,25 @@
 
         <!-- 客群特征分析图表 -->
         <view class="chart-container">
-            <QiunDataCharts type="bubble" :opts="chartOpts" :chartData="chartData" :canvas2d="true" :inScrollView="true"
+            <!-- 图表加载效果 -->
-                canvasId="customerGroupChart" :animation="false" :ontap="true" :ontouch="true" />
+            <ChartLoading v-if="!hasChartData" text="数据加载中..." />
+            <!-- 实际图表 -->
+            <QiunDataCharts v-else type="bubble" :opts="chartOpts" :chartData="chartData" :canvas2d="true"
+                :inScrollView="true" canvasId="customerGroupChart" :animation="false" :ontap="true" :ontouch="true" />
         </view>
     </view>
 </template>
 
 <script>
 import QiunDataCharts from './qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
+import ChartLoading from './ChartLoading.vue'
 import request from "@/util/index.js";
 import moment from 'moment'
 
 export default {
     components: {
-        QiunDataCharts
+        QiunDataCharts,
+        ChartLoading
     },
 
     data() {
@@ -35,8 +40,18 @@ export default {
             }
         }
     },
-
+    props: {
+        selectTime: {
+            type: String,
+            default: ""
+        },
+    },
     computed: {
+        // 判断图表数据是否已加载
+        hasChartData() {
+            return this.rawData.seriesData && this.rawData.seriesData.length > 0;
+        },
+
         // 图表数据
         chartData() {
             return {
@@ -117,7 +132,7 @@ export default {
         async handleGetCustomerGroupData() {
             const req = {
                 provinceCode: "530000",
-                statisticsMonth: moment().subtract(1, 'M').format('YYYYMM'),
+                statisticsMonth: this.selectTime ? moment(this.selectTime).subtract(1, 'M').format('YYYYMM') : moment().subtract(1, 'M').format('YYYYMM'),
                 serverpartId: "", // 暂时为空，如果需要传入服务区ID可以在这里添加
             }
 

pages/DigitalIntelligenceDashboard/components/FestivalRevenueSumInfo.vue

@@ -5,22 +5,27 @@
         </view>
         <!-- 节假日营收汇总图表 -->
         <view class="chart-container">
-            <QiunDataCharts type="pie" :opts="chartOpts" :chartData="chartData" :canvas2d="true" :inScrollView="true"
+            <!-- 图表加载效果 -->
-                canvasId="festivalRevenueSumInfoChart" :animation="false" :ontap="true" :ontouch="true"
+            <ChartLoading v-if="!hasChartData" text="数据加载中..." />
-                tooltipFormat="festivalRevenueSumInfoChart" />
+            <!-- 实际图表 -->
+            <QiunDataCharts v-else type="pie" :opts="chartOpts" :chartData="chartData" :canvas2d="true"
+                :inScrollView="true" canvasId="festivalRevenueSumInfoChart" :animation="false" :ontap="true"
+                :ontouch="true" tooltipFormat="festivalRevenueSumInfoChart" />
         </view>
     </view>
 </template>
 
 <script>
 import QiunDataCharts from './qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
+import ChartLoading from './ChartLoading.vue'
 import request from "@/util/index.js";
 import moment from 'moment'
 import { wrapTreeNode } from "@/util/dateTime";
 
 export default {
     components: {
-        QiunDataCharts
+        QiunDataCharts,
+        ChartLoading
     },
 
     data() {
@@ -33,6 +38,11 @@ export default {
     },
 
     computed: {
+        // 检查是否有图表数据
+        hasChartData() {
+            return this.rawData.seriesData && this.rawData.seriesData.length > 0
+        },
+
         // 图表数据
         chartData() {
             return {
@@ -45,31 +55,22 @@ export default {
         // 图表配置
         chartOpts() {
             return {
-                padding: [15, 15, 15, 15], // 增加右侧padding为图例留空间
+                padding: [15, 48, 15, 15], // 增加右侧padding为图例留空间
                 dataLabel: false,
                 legend: {
                     show: true,
                     position: 'right',
                     float: 'center',
-                    backgroundColor: 'rgba(0,0,0,0)',
-                    borderColor: 'rgba(0,0,0,0)',
                     fontSize: 11,
                     fontColor: '#333333',
-                    margin: 0,
-                    padding: 0,
-                    itemGap: 6,
-                    textAlign: 'left'
                 },
                 extra: {
                     pie: {
-                        activeOpacity: 0.5,
                         activeRadius: 10,
                         offsetAngle: 0,
                         labelWidth: 0,
                         border: false,
                         borderWidth: 2,
-                        borderColor: '#FFFFFF',
-                        linearType: 'custom'
                     }
                 },
             }
@@ -102,13 +103,11 @@ export default {
                 "CommercialApi/Revenue/GetHolidayRevenueRatio",
                 params
             );
-            console.log('节假日营收汇总数据', data);
             return data || []
         },
 
         // 处理图表数据
         processChartData(data) {
-            console.log('dasdjask;d', data);
 
             let seriesData = []
 
@@ -132,7 +131,6 @@ export default {
                 seriesData: seriesData
             }
 
-            console.log('处理后的图表数据（仅节假日细分）', this.rawData)
         },
 
     }

pages/DigitalIntelligenceDashboard/components/GenderCustomerGroup.vue

@@ -7,21 +7,26 @@
 
         <!-- 性别图表 -->
         <view class="chart-container">
-            <QiunDataCharts type="ring" :opts="chartOpts" :chartData="chartData" :canvas2d="true" :inScrollView="true"
+            <!-- 图表加载效果 -->
-                canvasId="genderCustomerGroupChart" :animation="false" :ontap="true" :ontouch="true"
+            <ChartLoading v-if="!hasChartData" text="数据加载中..." />
-                tooltipFormat="GenderCustomerGroup" />
+            <!-- 实际图表 -->
+            <QiunDataCharts v-else type="ring" :opts="chartOpts" :chartData="chartData" :canvas2d="true"
+                :inScrollView="true" canvasId="genderCustomerGroupChart" :animation="false" :ontap="true"
+                :ontouch="true" tooltipFormat="GenderCustomerGroup" />
         </view>
     </view>
 </template>
 
 <script>
 import QiunDataCharts from './qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
+import ChartLoading from './ChartLoading.vue'
 import request from "@/util/index.js";
 import moment from 'moment'
 
 export default {
     components: {
-        QiunDataCharts
+        QiunDataCharts,
+        ChartLoading
     },
 
     data() {
@@ -33,8 +38,18 @@ export default {
             }
         }
     },
-
+    props: {
+        selectTime: {
+            type: String,
+            default: ""
+        },
+    },
     computed: {
+        // 检查是否有图表数据
+        hasChartData() {
+            return this.rawData.seriesData && this.rawData.seriesData.length > 0
+        },
+
         // 图表数据
         chartData() {
             return {
@@ -97,7 +112,7 @@ export default {
             const req = {
                 statisticsType: 1,
                 provinceCode: '530000',
-                statisticsMonth: moment(moment().subtract(1, 'M')).format('YYYYMM'),
+                statisticsMonth: this.selectTime ? moment(moment(this.selectTime).subtract(1, 'M')).format('YYYYMM') : moment(moment().subtract(1, 'M')).format('YYYYMM'),
             }
 
             const data = await this.getCustomerRatio(req);
@@ -112,7 +127,6 @@ export default {
                 "CommercialApi/Customer/GetCustomerRatio",
                 params
             );
-            console.log('性别数据', data);
             return data || []
         },
 
@@ -142,7 +156,6 @@ export default {
                 legendData: legendData
             }
 
-            console.log('处理后的图表数据', this.rawData)
         },
 
     }

pages/DigitalIntelligenceDashboard/components/HotProductList.vue

@@ -7,7 +7,10 @@
 
         <!-- 图表容器 -->
         <view class="chart-container" :style="{ height: chartHeight }">
-            <QiunDataCharts type="column" :opts="chartOpts" :chartData="barChartData" :canvas2d="true"
+            <!-- 图表加载效果 -->
+            <ChartLoading v-if="!hasChartData" text="数据加载中..." />
+            <!-- 实际图表 -->
+            <QiunDataCharts v-else type="column" :opts="chartOpts" :chartData="barChartData" :canvas2d="true"
                 :inScrollView="true" canvasId="hotProductListChart" :animation="false" :ontap="true" :ontouch="true"
                 tooltipFormat="SalesRankingOfProducts" />
         </view>
@@ -16,12 +19,14 @@
 
 <script>
 import QiunDataCharts from './qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
+import ChartLoading from './ChartLoading.vue'
 import request from "@/util/index.js";
 import moment from 'moment'
 
 export default {
     components: {
-        QiunDataCharts
+        QiunDataCharts,
+        ChartLoading
     },
     data() {
         return {
@@ -32,6 +37,11 @@ export default {
     },
 
     computed: {
+        // 检查是否有图表数据
+        hasChartData() {
+            return this.salesRankingData && this.salesRankingData.length > 0
+        },
+
         // 图表数据
         barChartData() {
             return {
@@ -61,32 +71,29 @@ export default {
             }
 
             return {
-                color: ['#576EFF'],
                 legend: {
                     show: true,
-                    color: ['#576EFF']
                 },
-                padding: [15, 15, 15, 15], // 增加底部padding给X轴标签留空间
+                padding: [15, 15, 0, 15], // 增加底部padding给X轴标签留空间
                 dataLabel: false,
                 enableScroll: false,
                 xAxis: {
                     itemCount: 5, // 减少显示的标签数量
-                    scrollAlign: 'right',
+                    fontSize: 10, // 适当减小字体
-                    scrollColor: '#576EFF',
-                    scrollBackgroundColor: 'rgba(87, 110, 255, 0.1)',
-                    scrollWidth: 4,
-                    scrollHeight: 8,
-                    rotate: 30, // 旋转30度避免重叠
-                    fontSize: 12, // 适当减小字体
-                    margin: 15, // 增加标签与轴线的距离
                 },
                 yAxis: {
+                    showTitle: true,
+                    titleFontSize: 12,
+
                     gridType: 'dash',
                     dashLength: 2,
                     data: [{
+                        title: '商品件数(件)',
                         min: 0,
                         max: finalMax,
-                        data: yAxisData
+                        data: yAxisData,
+                        titleOffsetY: -5,
+                        titleOffsetX: -10,
                     }]
                 },
                 categoriesReal: this.salesRankingData.map(item =>

pages/DigitalIntelligenceDashboard/components/MallOrderStatistics.vue

@@ -8,7 +8,10 @@
         <!-- 订单统计图表 -->
         <view class="chart-card">
             <view class="chart-container">
-                <QiunDataCharts type="mix" :opts="chartOpts" :chartData="chartData" :canvas2d="true"
+                <!-- 图表加载效果 -->
+                <ChartLoading v-if="!hasChartData" text="数据加载中..." />
+                <!-- 实际图表 -->
+                <QiunDataCharts v-else type="mix" :opts="chartOpts" :chartData="chartData" :canvas2d="true"
                     :inScrollView="true" canvasId="mallOrderStatisticsChart" :animation="false" :ontap="true"
                     :ontouch="true" tooltipFormat="MallOrderStatistics" />
             </view>
@@ -18,12 +21,14 @@
 
 <script>
 import QiunDataCharts from './qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
+import ChartLoading from './ChartLoading.vue'
 import request from "@/util/index.js";
 import moment from 'moment'
 
 export default {
     components: {
-        QiunDataCharts
+        QiunDataCharts,
+        ChartLoading
     },
 
     data() {
@@ -36,8 +41,18 @@ export default {
             }
         }
     },
-
+    props: {
+        selectTime: {
+            type: String,
+            default: ""
+        },
+    },
     computed: {
+        // 检查是否有图表数据
+        hasChartData() {
+            return this.rawData.category && this.rawData.category.length > 0
+        },
+
         // 图表数据
         chartData() {
             return {
@@ -62,7 +77,7 @@ export default {
         // 图表配置
         chartOpts() {
             return {
-                padding: [15, 15, 15, 15], // 上方留出空间给图例
+                padding: [25, 15, 0, 15], // 上方留出空间给图例
                 dataLabel: false,
                 enableScroll: true,
                 dataPointShape: true,
@@ -76,11 +91,15 @@ export default {
                             min: 0,
                             title: '交易金额(元)',
                             titleFontSize: 12,
+                            titleOffsetY: -10,
+                            titleOffsetX: -30,
                             position: 'left',
                         },
                         {
                             min: 0,
                             title: '交易笔数(笔)',
+                            titleOffsetY: -10,
+                            titleOffsetX: 0,
                             titleFontSize: 12,
                             position: 'right',
                         }
@@ -122,8 +141,8 @@ export default {
                 DataType: 2, // 1 日度  2 月度
                 ProvinceCode: '530000',
                 type: 'encryption',
-                StartMonth: moment().startOf('y').format('YYYYMM'),
+                StartMonth: this.selectTime ? moment(this.selectTime).startOf('y').format('YYYYMM') : moment().startOf('y').format('YYYYMM'),
-                EndMonth: moment().subtract(1, 'M').format('YYYYMM'),
+                EndMonth: this.selectTime ? moment(this.selectTime).subtract(1, 'M').format('YYYYMM') : moment().subtract(1, 'M').format('YYYYMM'),
             }
 
 

pages/DigitalIntelligenceDashboard/components/MemberMall.vue

@@ -6,8 +6,10 @@
         <!-- 会员总数 -->
         <view class="member-sum-box">
             <view class="member-sum-box-left">会员总数</view>
-            <view class="member-sum-total">{{ memberData.totalMembers || 0 }}</view>
+            <view class="member-sum-total">{{ memberData.totalMembers ? memberData.totalMembers.toLocaleString() : 0 }}
-            <view class="member-sum-box-right">本月新增 {{ memberData.monthNewMembers || 0 }} 个</view>
+            </view>
+            <view class="member-sum-box-right">本月新增 {{ memberData.monthNewMembers ?
+                memberData.monthNewMembers.toLocaleString() : 0 }} 个</view>
         </view>
 
         <!-- 近30天数据 -->
@@ -18,22 +20,29 @@
         <view class="recent-data">
             <view class="recent-data-top">
                 <view class="recent-data-top-item" style="left: 0;top: 0;">
-                    <view class="recent-data-top-value">{{ memberData.newMembersCount || 0 }}</view>
+                    <view class="recent-data-top-value">{{ memberData.newMembersCount ?
+                        memberData.newMembersCount.toLocaleString() : 0
+                        }}
+                    </view>
                     <view class="recent-data-top-label">新增会员数</view>
                 </view>
 
                 <view class="recent-data-top-item" style="left: 30%;top: 0;">
-                    <view class="recent-data-top-value">{{ memberData.openCount || 0 }}</view>
+                    <view class="recent-data-top-value">{{ memberData.openCount ? memberData.openCount.toLocaleString()
+                        : 0 }}</view>
                     <view class="recent-data-top-label">打开次数</view>
                 </view>
 
                 <view class="recent-data-top-item" style="right: 30%;top: 0;">
-                    <view class="recent-data-top-value">{{ memberData.newPeopleCount || 0 }}</view>
+                    <view class="recent-data-top-value">{{ memberData.newPeopleCount ?
+                        memberData.newPeopleCount.toLocaleString() : 0 }}
+                    </view>
                     <view class="recent-data-top-label">新增人数</view>
                 </view>
 
                 <view class="recent-data-top-item" style="right: 0;top: 0;">
-                    <view class="recent-data-top-value">{{ memberData.visitCount || 0 }}</view>
+                    <view class="recent-data-top-value">{{ memberData.visitCount ?
+                        memberData.visitCount.toLocaleString() : 0 }}</view>
                     <view class="recent-data-top-label">访问人数</view>
                 </view>
             </view>
@@ -46,13 +55,14 @@
 
         <view class="member-consumption">
             <view class="member-consumption-item">
-                <view class="member-consumption-label">会员消费笔数</view>
+                <view class="member-consumption-label">会员消费笔数/笔</view>
                 <view class="member-consumption-progress"></view>
-                <view class="member-consumption-value">{{ memberData.consumptionCount || 0 }}</view>
+                <view class="member-consumption-value">{{ memberData.consumptionCount ? memberData.consumptionCount : 0
+                    }}</view>
             </view>
 
             <view class="member-consumption-item">
-                <view class="member-consumption-label">会员总销售额</view>
+                <view class="member-consumption-label">会员总销售额/元</view>
                 <view class="member-consumption-progress2"></view>
                 <view class="member-consumption-value">{{ formatMoney(memberData.totalSalesAmount || 0) }}</view>
             </view>
@@ -138,7 +148,12 @@ export default {
             }
         }
     },
-
+    props: {
+        selectTime: {
+            type: String,
+            default: ""
+        },
+    },
     onReady() {
         this.handleGetMemberMallData()
     },
@@ -148,7 +163,7 @@ export default {
         async handleGetMemberMallData() {
             const req = {
                 ProvinceCode: '530000',
-                StatisticsDate: moment().subtract(1, 'd').format('YYYY-MM-DD')
+                StatisticsDate: this.selectTime ? moment(this.selectTime).subtract(1, 'd').format('YYYY-MM-DD') : moment().subtract(1, 'd').format('YYYY-MM-DD')
             }
 
             const data = await this.getMemberMallData(req);
@@ -246,7 +261,6 @@ export default {
             font-size: 28rpx;
             font-weight: 600;
             color: #1890FF;
-            letter-spacing: 4rpx;
         }
 
         .member-sum-box-right {

pages/DigitalIntelligenceDashboard/components/OverviewOfServiceArea.vue

@@ -47,7 +47,10 @@
     <view class="chart-section">
       <view class="chart-title">设备设施</view>
       <view class="chart-container">
-        <QiunDataCharts type="column" :opts="facilityChartOpts" :chartData="facilityChartData" :canvas2d="true"
+        <!-- 图表加载效果 -->
+        <ChartLoading v-if="!hasFacilityData" text="数据加载中..." />
+        <!-- 实际图表 -->
+        <QiunDataCharts v-else type="column" :opts="facilityChartOpts" :chartData="facilityChartData" :canvas2d="true"
           :inScrollView="true" canvasId="facilityChart" tooltipFormat="facilityChartData" />
       </view>
     </view>
@@ -83,7 +86,10 @@
     <view class="chart-section">
       <view class="chart-title">服务区类型分布</view>
       <view class="chart-container">
-        <QiunDataCharts type="pie" :opts="areaTypePieOpts" :chartData="areaTypePieData" :canvas2d="true"
+        <!-- 图表加载效果 -->
+        <ChartLoading v-if="!hasPieData" text="数据加载中..." />
+        <!-- 实际饼图 -->
+        <QiunDataCharts v-else type="pie" :opts="areaTypePieOpts" :chartData="areaTypePieData" :canvas2d="true"
           :inScrollView="true" canvasId="areaTypePieChart" tooltipFormat="areaTypePieData" />
       </view>
     </view>
@@ -92,11 +98,13 @@
 
 <script>
 import QiunDataCharts from './qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
+import ChartLoading from './ChartLoading.vue'
 import request from "@/util/index.js";
 
 export default {
   components: {
-    QiunDataCharts
+    QiunDataCharts,
+    ChartLoading
   },
 
   data() {
@@ -124,6 +132,26 @@ export default {
   },
 
   computed: {
+    // 判断设施数据是否已加载
+    hasFacilityData() {
+      return this.serviceData.REFUELINGGUNTotal > 0 ||
+        this.serviceData.ChargingStationTotal > 0 ||
+        this.serviceData.HASPILOTLOUNGETotal > 0 ||
+        this.serviceData.NursingRoomTotal > 0 ||
+        this.serviceData.URECOUNTTotal > 0 ||
+        this.serviceData.WaterCount > 0;
+    },
+
+    // 判断饼图数据是否已加载
+    hasPieData() {
+      return this.serviceData.serviceAllTotal > 0 ||
+        this.serviceData.ParkingServiceCount > 0 ||
+        this.serviceData.WaterStationCount > 0 ||
+        this.serviceData.ViewingDeckCount > 0 ||
+        this.serviceData.RestAreaCount > 0 ||
+        this.serviceData.ClosedCount > 0;
+    },
+
     // 设备设施数据
     facilityChartData() {
       return {
@@ -146,19 +174,29 @@ export default {
     facilityChartOpts() {
       return {
         color: ['#1890FF', '#52C41A', '#FAAD14', '#F5222D', '#722ED1', '#13C2C2'],
-        padding: [15, 15, 15, 15],
+        padding: [15, 15, 0, 15],
         dataLabel: true,
         legend: {
-          show: false
+          show: true
         },
         xAxis: {
           itemCount: 6,
-          scrollShow: false
+          scrollShow: false,
+          fontSize: 12
         },
         yAxis: {
           gridType: 'dash',
           dashLength: 2,
-          data: [{ min: 0 }]
+          showTitle: true,
+          data: [
+            {
+              min: 0,
+              title: '设施数量(个)',
+              titleFontSize: 12,
+              titleOffsetY: -5,
+              titleOffsetX: 0,
+            }
+          ]
         },
         extra: {
           column: {

pages/DigitalIntelligenceDashboard/components/PreferenceType.vue

@@ -7,8 +7,11 @@
 
         <!-- 偏好类型图表 -->
         <view class="chart-container">
-            <QiunDataCharts type="radar" :opts="chartOpts" :chartData="chartData" :canvas2d="true" :inScrollView="true"
+            <!-- 图表加载效果 -->
-                canvasId="preferenceTypeChart" :animation="false" :ontap="true" :ontouch="true"
+            <ChartLoading v-if="!hasChartData" text="数据加载中..." />
+            <!-- 实际图表 -->
+            <QiunDataCharts v-else type="radar" :opts="chartOpts" :chartData="chartData" :canvas2d="true"
+                :inScrollView="true" canvasId="preferenceTypeChart" :animation="false" :ontap="true" :ontouch="true"
                 tooltipFormat="PreferenceType" />
         </view>
     </view>
@@ -16,12 +19,14 @@
 
 <script>
 import QiunDataCharts from './qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
+import ChartLoading from './ChartLoading.vue'
 import request from "@/util/index.js";
 import moment from 'moment'
 
 export default {
     components: {
-        QiunDataCharts
+        QiunDataCharts,
+        ChartLoading
     },
 
     data() {
@@ -35,8 +40,18 @@ export default {
             }
         }
     },
-
+    props: {
+        selectTime: {
+            type: String,
+            default: ""
+        },
+    },
     computed: {
+        // 检查是否有图表数据
+        hasChartData() {
+            return this.rawData.category && this.rawData.category.length > 0
+        },
+
         // 图表数据
         chartData() {
             return {
@@ -103,8 +118,8 @@ export default {
         async handleGetPreferenceTypeData() {
             const req = {
                 statisticsType: 1,
-                startMonth: moment().startOf('y').format('YYYYMM'),
+                startMonth: this.selectTime ? moment(this.selectTime).startOf('y').format('YYYYMM') : moment().startOf('y').format('YYYYMM'),
-                endMonth: moment().format('YYYYMM'),
+                endMonth: this.selectTime ? moment(this.selectTime).format('YYYYMM') : moment().format('YYYYMM'),
                 provinceCode: '530000',
                 showTradeLevel: 1,
                 fromRedis: true

pages/DigitalIntelligenceDashboard/components/RegionalRevenue.vue

@@ -7,8 +7,11 @@
 
         <!-- 区域营收占比图表 -->
         <view class="chart-container">
-            <QiunDataCharts type="pie" :opts="chartOpts" :chartData="chartData" :canvas2d="true" :inScrollView="true"
+            <!-- 图表加载效果 -->
-                canvasId="regionalRevenueChart" :animation="false" :ontap="true" :ontouch="true"
+            <ChartLoading v-if="!hasChartData" text="数据加载中..." />
+            <!-- 实际图表 -->
+            <QiunDataCharts v-else type="pie" :opts="chartOpts" :chartData="chartData" :canvas2d="true"
+                :inScrollView="true" canvasId="regionalRevenueChart" :animation="false" :ontap="true" :ontouch="true"
                 tooltipFormat="regionalRevenueChart" />
         </view>
     </view>
@@ -16,15 +19,22 @@
 
 <script>
 import QiunDataCharts from './qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
+import ChartLoading from './ChartLoading.vue'
 import request from "@/util/index.js";
 import moment from 'moment'
 import { wrapTreeNode } from "@/util/dateTime";
 
 export default {
     components: {
-        QiunDataCharts
+        QiunDataCharts,
+        ChartLoading
+    },
+    props: {
+        selectTime: {
+            type: String,
+            default: ""
+        },
     },
-
     data() {
         return {
             // 所有服务区ID
@@ -39,6 +49,11 @@ export default {
     },
 
     computed: {
+        // 检查是否有图表数据
+        hasChartData() {
+            return this.rawData.seriesData && this.rawData.seriesData.length > 0
+        },
+
         // 图表数据
         chartData() {
             return {
@@ -57,27 +72,20 @@ export default {
                     show: true,
                     position: 'right',
                     float: 'center',
-                    backgroundColor: 'rgba(0,0,0,0)',
-                    borderColor: 'rgba(0,0,0,0)',
                     fontSize: 12,
                     fontColor: '#333333',
-                    margin: 0,
-                    padding: 0,
-                    itemGap: 10,
-                    textAlign: 'left'
                 },
                 extra: {
                     pie: {
-                        activeOpacity: 0.5,
                         activeRadius: 10,
                         offsetAngle: 0,
                         labelWidth: 0,
                         border: false,
                         borderWidth: 2,
-                        borderColor: '#FFFFFF',
+                        borderColor: '#FFFFFF'
-                        linearType: 'custom'
                     }
                 },
+                percentageList: this.rawData.legendData
             }
         }
     },
@@ -113,8 +121,8 @@ export default {
             })
 
             const req = {
-                StartDate: moment().startOf('M').format('YYYY-MM-DD'),
+                StartDate: this.selectTime ? moment(this.selectTime).startOf('M').format('YYYY-MM-DD') : moment().startOf('M').format('YYYY-MM-DD'),
-                EndDate: moment().endOf('M').format('YYYY-MM-DD'),
+                EndDate: this.selectTime ? moment(this.selectTime).endOf('M').format('YYYY-MM-DD') : moment().endOf('M').format('YYYY-MM-DD'),
                 DataType: 1, // 默认按日统计
                 ServerpartIds: allId, // 使用所有服务区ID
                 DataSourceType: 1,

pages/DigitalIntelligenceDashboard/components/SupplierListBox.vue

@@ -38,6 +38,10 @@
 
         <!-- 供应商列表 -->
         <view class="supplier-list-content">
+            <!-- 供应商列表加载效果 -->
+            <ChartLoading v-if="!hasSupplierListData" text="数据加载中..." />
+            <!-- 供应商列表内容 -->
+            <view v-else>
                 <view class="supplier-list-item" v-for="(item, index) in supplierList" :key="index">
                     <view class="supplier-list-right">
                         <view class="supplier-list-namebox">
@@ -53,13 +57,19 @@
                 </view>
             </view>
         </view>
+    </view>
 </template>
 
 <script>
+import ChartLoading from './ChartLoading.vue'
 import request from "@/util/index.js";
 import moment from 'moment'
 
 export default {
+    components: {
+        ChartLoading
+    },
+
     data() {
         return {
             // 供应商列表
@@ -72,6 +82,18 @@ export default {
             supplierIcon: 'https://eshangtech.com/cyy_DIB/supplierIcon.png'
         }
     },
+    props: {
+        selectTime: {
+            type: String,
+            default: ""
+        },
+    },
+    computed: {
+        // 检查是否有供应商列表数据
+        hasSupplierListData() {
+            return this.supplierList && this.supplierList.length > 0;
+        }
+    },
 
     onReady() {
         this.handleGetData()
@@ -92,7 +114,7 @@ export default {
             const req = {
                 ProvinceCode: "530000",
                 type: 'encryption',
-                StatisticsMonth: "202505",
+                StatisticsMonth: this.selectTime ? moment(this.selectTime).format('YYYYMM') : "202505",
             }
 
             // 这里使用模拟数据，实际应该调用真实的API
@@ -211,6 +233,8 @@ export default {
         border-radius: 16rpx;
         padding: 24rpx;
         box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+        min-height: 300rpx;
+        /* 设置最小高度以显示加载效果 */
 
         .supplier-list-item {
             width: 100%;

pages/DigitalIntelligenceDashboard/components/ThisMonthBenefits.vue

@@ -16,13 +16,18 @@
                     <text class="benefits-title">本月福利金发放额度</text>
                 </view>
                 <view class="benefits-right">
-                    <text class="benefits-value">{{ allRealData.distributeAmount || '0' }}</text>
+                    <text class="benefits-value">{{ allRealData.distributeAmount ?
+                        allRealData.distributeAmount.toLocaleString() : '0'
+                        }}</text>
                     <text class="benefits-unit">元</text>
                 </view>
             </view>
 
             <view class="chart-container">
-                <QiunDataCharts type="pie" :opts="chartOpts" :chartData="chartData" :canvas2d="true"
+                <!-- 图表加载效果 -->
+                <ChartLoading v-if="!hasChartData" text="数据加载中..." />
+                <!-- 实际图表 -->
+                <QiunDataCharts v-else type="pie" :opts="chartOpts" :chartData="chartData" :canvas2d="true"
                     :inScrollView="true" canvasId="coreCategoryChart" :animation="false" :ontap="true" :ontouch="true"
                     tooltipFormat="ThisMonthBenefits" />
             </view>
@@ -32,12 +37,14 @@
 
 <script>
 import QiunDataCharts from './qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
+import ChartLoading from './ChartLoading.vue'
 import request from "@/util/index.js";
 import moment from 'moment'
 
 export default {
     components: {
-        QiunDataCharts
+        QiunDataCharts,
+        ChartLoading
     },
 
     data() {
@@ -50,8 +57,18 @@ export default {
             },
         }
     },
-
+    props: {
+        selectTime: {
+            type: String,
+            default: ""
+        },
+    },
     computed: {
+        // 检查是否有图表数据
+        hasChartData() {
+            return this.rawData.pieData && this.rawData.pieData.length > 0
+        },
+
         // 图表数据
         chartData() {
             return {
@@ -70,24 +87,17 @@ export default {
                     show: true,
                     position: 'right',
                     float: 'center',
-                    backgroundColor: 'rgba(0,0,0,0)',
-                    borderColor: 'rgba(0,0,0,0)',
                     fontSize: 12,
-                    margin: 0,
-                    padding: 0,
-                    itemGap: 10,
                     textAlign: 'left'
                 },
                 extra: {
                     pie: {
-                        activeOpacity: 0.5,
                         activeRadius: 10,
                         offsetAngle: 0,
                         labelWidth: 0,
                         border: false,
                         borderWidth: 2,
                         borderColor: '#FFFFFF',
-                        linearType: 'custom'
                     }
                 },
             }
@@ -108,7 +118,7 @@ export default {
         async getWelFareSummaryData() {
             const req = {
                 ProvinceCode: '530000',
-                StatisticsMonth: moment().subtract(1, 'M').format('YYYYMM'),
+                StatisticsMonth: this.selectTime ? moment(this.selectTime).subtract(1, 'M').format('YYYYMM') : moment().subtract(1, 'M').format('YYYYMM'),
                 type: 'encryption'
             }
 

pages/DigitalIntelligenceDashboard/components/TrendOfTrafficFlow.vue

@@ -7,8 +7,11 @@
       </view>
       <view class="chart-content">
         <view class="bar-chart-container">
-          <QiunDataCharts type="column" :opts="chartOpts" :chartData="chartData" :animation="false" :canvas2d="true"
+          <!-- 图表加载效果 -->
-            :inScrollView="true" :ontap="true" :ontouch="true" canvasId="trendTrafficFlowChart"
+          <ChartLoading v-if="!hasChartData" text="数据加载中..." />
+          <!-- 实际图表 -->
+          <QiunDataCharts v-else type="column" :opts="chartOpts" :chartData="chartData" :animation="false"
+            :canvas2d="true" :inScrollView="true" :ontap="true" :ontouch="true" canvasId="trendTrafficFlowChart"
             tooltipFormat="TrendTrafficFlow" />
         </view>
       </view>
@@ -18,12 +21,14 @@
 
 <script>
 import QiunDataCharts from './qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
+import ChartLoading from './ChartLoading.vue'
 import request from "@/util/index.js";
 import moment from 'moment'
 
 export default {
   components: {
-    QiunDataCharts
+    QiunDataCharts,
+    ChartLoading
   },
 
   data() {
@@ -45,7 +50,20 @@ export default {
     }
   },
 
+  props: {
+    selectTime: {
+      type: String,
+      default: ""
+    },
+  },
   computed: {
+    // 判断图表数据是否已加载
+    hasChartData() {
+      // 检查是否有真实的流量数据（至少有一个月的数据大于0）
+      return this.monthlyData && this.monthlyData.length > 0 &&
+        this.monthlyData.some(item => item.currentYearValue > 0 || item.previousYearValue > 0);
+    },
+
     // 图表数据
     chartData() {
       return {
@@ -71,16 +89,16 @@ export default {
         enableScroll: true, // 开启滚动
         xAxis: {
           disableGrid: true,
-          scrollShow: true, // 显示滚动条
-          scrollAlign: 'left', // 滚动条对齐方式
           itemCount: 6, // 默认显示6个月的数据
-          scrollColor: '#46B8F3', // 滚动条颜色
-          scrollWidth: 4, // 滚动条宽度
-          scrollHeight: 8 // 滚动条高度
         },
         yAxis: {
+          showTitle: true,
           data: [{
-            min: 0
+            min: 0,
+            title: '断面流量(万辆)',
+            titleFontSize: 12,
+            titleOffsetY: -5,
+            titleOffsetX: -5,
           }]
         },
         legend: {},
@@ -124,9 +142,9 @@ export default {
     async getCurrentYearData() {
       const currentReq = {
         ProvinceCode: '530000',
-        StatisticsDate: moment().format('YYYY-MM-DD'),
+        StatisticsDate: this.selectTime ? moment(this.selectTime).endOf('M').format('YYYY-MM-DD') : moment().format('YYYY-MM-DD'),
-        StartDate: moment().startOf('y').format('YYYY-MM-DD'),
+        StartDate: this.selectTime ? moment(this.selectTime).startOf('y').format('YYYY-MM-DD') : moment().startOf('y').format('YYYY-MM-DD'),
-        EndDate: moment().endOf('M').format('YYYY-MM-DD'),
+        EndDate: this.selectTime ? moment(this.selectTime).endOf('M').format('YYYY-MM-DD') : moment().endOf('M').format('YYYY-MM-DD'),
       }
 
       return await request.$webGet(
@@ -139,9 +157,9 @@ export default {
     async getPreviousYearData() {
       const previousReq = {
         ProvinceCode: '530000',
-        StatisticsDate: moment().subtract(1, 'y').endOf('M').format('YYYY-MM-DD'),
+        StatisticsDate: this.selectTime ? moment(this.selectTime).subtract(1, 'y').endOf('M').format('YYYY-MM-DD') : moment().subtract(1, 'y').endOf('M').format('YYYY-MM-DD'),
-        StartDate: moment().subtract(1, 'y').startOf('y').format('YYYY-MM-DD'),
+        StartDate: this.selectTime ? moment(this.selectTime).subtract(1, 'y').startOf('y').format('YYYY-MM-DD') : moment().subtract(1, 'y').startOf('y').format('YYYY-MM-DD'),
-        EndDate: moment().subtract(1, 'y').endOf('M').format('YYYY-MM-DD'),
+        EndDate: this.selectTime ? moment(this.selectTime).subtract(1, 'y').endOf('M').format('YYYY-MM-DD') : moment().subtract(1, 'y').endOf('M').format('YYYY-MM-DD'),
       }
 
       return await request.$webGet(
@@ -414,6 +432,8 @@ export default {
         width: 100%;
         height: 400rpx;
       }
+    }
+  }
 
   .chart-legend {
     display: flex;
@@ -447,67 +467,4 @@ export default {
     }
   }
 }
-
-    .monthly-data {
-      .data-table {
-        .table-header {
-          display: flex;
-          background: #f5f5f5;
-          border-radius: 8rpx;
-          padding: 16rpx 0;
-          margin-bottom: 16rpx;
-
-          .header-cell {
-            flex: 1;
-            text-align: center;
-            font-size: 24rpx;
-            font-weight: 600;
-            color: @text-primary;
-
-            &:first-child {
-              flex: 0.8;
-            }
-          }
-        }
-
-        .table-row {
-          display: flex;
-          align-items: center;
-          padding: 12rpx 0;
-          border-bottom: 1rpx solid #f0f0f0;
-
-          &:last-child {
-            border-bottom: none;
-          }
-
-          .table-cell {
-            flex: 1;
-            text-align: center;
-            font-size: 24rpx;
-            color: @text-primary;
-
-            &.month-cell {
-              flex: 0.8;
-              font-weight: 500;
-            }
-
-            &.growth-positive {
-              color: @success-color;
-              font-weight: 600;
-            }
-
-            &.growth-negative {
-              color: @danger-color;
-              font-weight: 600;
-            }
-
-            &.growth-neutral {
-              color: @text-secondary;
-            }
-          }
-        }
-      }
-    }
-  }
-}
 </style>

pages/DigitalIntelligenceDashboard/components/VehicleModelStay.vue

@@ -7,8 +7,11 @@
 
         <!-- 经营效益图表 -->
         <view class="chart-container">
-            <QiunDataCharts type="column" :opts="chartOpts" :chartData="chartData" :canvas2d="true" :inScrollView="true"
+            <!-- 图表加载效果 -->
-                canvasId="vehicleModelStayChart" :animation="false" :ontap="true" :ontouch="true"
+            <ChartLoading v-if="!hasChartData" text="数据加载中..." />
+            <!-- 实际图表 -->
+            <QiunDataCharts v-else type="column" :opts="chartOpts" :chartData="chartData" :canvas2d="true"
+                :inScrollView="true" canvasId="vehicleModelStayChart" :animation="false" :ontap="true" :ontouch="true"
                 tooltipFormat="vehicleModelStayChart" />
         </view>
     </view>
@@ -16,12 +19,14 @@
 
 <script>
 import QiunDataCharts from './qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
+import ChartLoading from './ChartLoading.vue'
 import request from "@/util/index.js";
 import moment from 'moment'
 
 export default {
     components: {
-        QiunDataCharts
+        QiunDataCharts,
+        ChartLoading
     },
 
     data() {
@@ -39,8 +44,18 @@ export default {
             }
         }
     },
-
+    props: {
+        selectTime: {
+            type: String,
+            default: ""
+        },
+    },
     computed: {
+        // 检查是否有图表数据
+        hasChartData() {
+            return this.rawData.category && this.rawData.category.length > 0
+        },
+
         // 图表数据
         chartData() {
             return {
@@ -67,16 +82,15 @@ export default {
                 xAxis: {
                     disableGrid: true,
                     itemCount: 6, // 默认显示6个月的数据
-                    scrollShow: true, // 显示滚动条
-                    scrollAlign: 'left', // 滚动条对齐方式
-                    scrollColor: '#46B8F3', // 滚动条颜色
-                    scrollWidth: 4, // 滚动条宽度
-                    scrollHeight: 8 // 滚动条高度
                 },
                 yAxis: {
+                    showTitle: true,
                     data: [{
                         min: 0,
-                        title: '万元',
+                        title: '经济效益(万元)',
+                        titleFontSize: 12,
+                        titleOffsetY: -5,
+                        titleOffsetX: 0,
                     }]
                 },
                 extra: {
@@ -102,14 +116,14 @@ export default {
         async handleGetVehicleModelStayData() {
             // 当前年份数据请求
             const currentReq = {
-                StatisticsDate: moment().format('YYYY'),
+                StatisticsDate: this.selectTime ? moment(this.selectTime).format('YYYY') : moment().format('YYYY'),
                 ProvinceCode: '530000',
                 StatisticsType: 4,
             }
 
             // 去年数据请求
             const lastYearReq = {
-                StatisticsDate: moment().subtract(1, 'y').format('YYYY'),
+                StatisticsDate: this.selectTime ? moment(this.selectTime).subtract(1, 'y').format('YYYY') : moment().subtract(1, 'y').format('YYYY'),
                 ProvinceCode: '530000',
                 StatisticsType: 4,
             }

pages/DigitalIntelligenceDashboard/components/VehiclesEntering.vue

@@ -7,7 +7,10 @@
 
         <!-- 入区车流图表 -->
         <view class="chart-container">
-            <QiunDataCharts type="column" :opts="vehicleChartOpts" :chartData="vehicleChartData" :canvas2d="true"
+            <!-- 图表加载效果 -->
+            <ChartLoading v-if="!hasVehicleChartData" text="数据加载中..." />
+            <!-- 实际图表 -->
+            <QiunDataCharts v-else type="column" :opts="vehicleChartOpts" :chartData="vehicleChartData" :canvas2d="true"
                 :inScrollView="true" canvasId="vehicleChart" :animation="false" :ontap="true" :ontouch="true"
                 tooltipFormat="vehicleChartData" />
         </view>
@@ -19,7 +22,10 @@
 
         <!-- 对客营收图表 -->
         <view class="chart-container">
-            <QiunDataCharts type="line" :opts="revenueChartOpts" :chartData="revenueChartData" :canvas2d="true"
+            <!-- 图表加载效果 -->
+            <ChartLoading v-if="!hasRevenueChartData" text="数据加载中..." />
+            <!-- 实际图表 -->
+            <QiunDataCharts v-else type="line" :opts="revenueChartOpts" :chartData="revenueChartData" :canvas2d="true"
                 :inScrollView="true" canvasId="revenueChart" :animation="false" :ontap="true" :ontouch="true"
                 tooltipFormat="revenueChartDataVehicles" />
         </view>
@@ -28,12 +34,14 @@
 
 <script>
 import QiunDataCharts from './qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
+import ChartLoading from './ChartLoading.vue'
 import request from "@/util/index.js";
 import moment from 'moment'
 
 export default {
     components: {
-        QiunDataCharts
+        QiunDataCharts,
+        ChartLoading
     },
 
     data() {
@@ -57,7 +65,24 @@ export default {
         }
     },
 
+    props: {
+        selectTime: {
+            type: String,
+            default: ""
+        },
+    },
+
     computed: {
+        // 检查是否有入区车流图表数据
+        hasVehicleChartData() {
+            return this.chartData.category && this.chartData.category.length > 0
+        },
+
+        // 检查是否有对客营收图表数据
+        hasRevenueChartData() {
+            return this.chartData.category && this.chartData.category.length > 0
+        },
+
         // 入区车流图表数据
         vehicleChartData() {
             return {
@@ -84,16 +109,15 @@ export default {
                 xAxis: {
                     disableGrid: true,
                     itemCount: 6, // 默认显示6个月的数据
-                    scrollShow: true, // 显示滚动条
-                    scrollAlign: 'left', // 滚动条对齐方式
-                    scrollColor: '#46B8F3', // 滚动条颜色
-                    scrollWidth: 4, // 滚动条宽度
-                    scrollHeight: 8 // 滚动条高度
                 },
                 yAxis: {
+                    showTitle: true,
                     data: [{
                         min: 0,
-                        title: '万辆',
+                        title: '入区车流(万辆)',
+                        titleFontSize: 12,
+                        titleOffsetY: -5,
+                        titleOffsetX: 0,
                     }]
                 },
                 extra: {
@@ -135,20 +159,17 @@ export default {
                 enableScroll: true, // 开启滚动
                 xAxis: {
                     disableGrid: true,
-                    scrollShow: true, // 显示滚动条
-                    scrollAlign: 'left', // 滚动条对齐方式
                     itemCount: 6, // 默认显示6个月的数据
-                    scrollWidth: 4, // 滚动条宽度
-                    scrollHeight: 8 // 滚动条高度
                 },
                 yAxis: {
                     gridType: 'dash',
                     dashLength: 2,
+                    showTitle: true,
                     data: [{
                         min: 0,
-                        title: '万元',
+                        title: '对客营收(万元)',
                         titleFontSize: 12,
-                        titleOffsetY: -4,
+                        titleOffsetY: -5,
                         titleOffsetX: 0
                     }],
                     splitNumber: 5
@@ -180,15 +201,15 @@ export default {
         async handleGetSectionFlowCount() {
             // 当前年份数据请求
             const currentReq = {
-                StartDate: moment().startOf('y').format('YYYY-MM-DD'),
+                StartDate: this.selectTime ? moment(this.selectTime).startOf('y').format('YYYY-MM-DD') : moment().startOf('y').format('YYYY-MM-DD'),
-                EndDate: moment().subtract(1, 'd').format('YYYY-MM-DD'),
+                EndDate: this.selectTime ? moment(this.selectTime).subtract(1, 'd').format('YYYY-MM-DD') : moment().subtract(1, 'd').format('YYYY-MM-DD'),
                 ProvinceCode: 530000
             }
 
             // 去年数据请求
             const lastYearReq = {
-                StartDate: moment().subtract(1, 'y').startOf('y').format('YYYY-MM-DD'),
+                StartDate: this.selectTime ? moment(this.selectTime).subtract(1, 'y').startOf('y').format('YYYY-MM-DD') : moment().subtract(1, 'y').startOf('y').format('YYYY-MM-DD'),
-                EndDate: moment().subtract(1, 'y').endOf('y').format('YYYY-MM-DD'),
+                EndDate: this.selectTime ? moment(this.selectTime).subtract(1, 'y').endOf('y').format('YYYY-MM-DD') : moment().subtract(1, 'y').endOf('y').format('YYYY-MM-DD'),
                 ProvinceCode: 530000
             }
 
@@ -208,7 +229,6 @@ export default {
                 "CommercialApi/BigData/GetMonthAnalysis",
                 params
             );
-            console.log('入区车流数据', data);
             return data || []
         },
 
@@ -287,7 +307,6 @@ export default {
                 revenueAdd: revenueAdd
             }
 
-            console.log('处理后的图表数据', this.chartData)
         },
 
     }

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

@@ -108,16 +108,22 @@ const cfu = {
 			return `${item.name}：${item.data}种`
 		},
 		"festivalRevenueSumInfoChart": function (item, category, index, opts) {
+			// console.log('', item);
+			// console.log('', category);
+			// console.log('', index);
+			// console.log('', opts);
 			return `${item.name}`
 		},
 		"businessStructureChart": function (item, category, index, opts) {
-			return `${opts.realData[index].data}`
+
+			return `${opts.legendData[index].name}占比：${opts.legendData[index].value}，${opts.realData[index].data}`
 		},
 		"regionalRevenueChart": function (item, category, index, opts) {
-			return `${item.name}：${item.data}万元`
+			return `${item.name}占比：${opts.percentageList[index].value}，${item.data}万元`
 		},
 		"businessCaseChart": function (item, category, index, opts) {
-			return `${category}${item.name}：${item.data}万元`
+
+			return `${category}${item.name}：${item.data}${opts.unitType === 1 ? '万元' : opts.unitType === 2 ? '万笔' : opts.unitType === 3 ? '元' : ''}`
 		},
 		"BrandConsumptionLevel": function (item, category, index, opts) {
 			return `${item.name}占比：${item.data}%`
@@ -159,7 +165,7 @@ const cfu = {
 			return `${item.name}：${item.data}个`
 		},
 		"facilityChartData": function (item, category, index, opts) {
-			return `${category}${item.name}：${item.data}座`
+			return `${category}${item.name}：${item.data}个`
 		},
 		"distributionChartData": function (item, category, index, opts) {
 			return `${item.name}：${item.data}对`

pages/DigitalIntelligenceDashboard/index.vue

@@ -3,7 +3,8 @@
     <scroll-view scroll-y @scroll="handleScroll" class="digital-dashboard" :scroll-into-view="scrollIntoView"
         :scroll-with-animation="true">
         <!-- Tab切换区域 -->
-        <scroll-view scroll-x class="tab-container" :scroll-into-view="scrollIntoTabItem" :scroll-with-animation="true">
+        <scroll-view scroll-x class="tab-container" :scroll-with-animation="true" :scroll-left="tabScrollPosition"
+            show-scrollbar="false">
             <view class="tab-list">
                 <view v-for="(tab, index) in tabList" :key="index" :id="`tab-${index}`" class="tab-item"
                     :class="{ active: activeTab === index }" @click="switchTab(index)">
@@ -24,7 +25,7 @@
                     </view>
                 </view>
                 <view class="nav-list" v-show="!isNavCollapsed">
-                    <view v-for="(item, index) in currentNavItems" :key="item.id" class="nav-item"
+                    <view v-for="item in currentNavItems" :key="item.id" class="nav-item"
                         :class="{ active: activeNavItem === item.id }" @click="scrollToComponent(item.id)">
                         <text class="nav-text">{{ item.name }}</text>
                         <view class="nav-dot" v-if="activeNavItem === item.id"></view>
@@ -32,9 +33,19 @@
                 </view>
             </view>
         </view>
+
+
+
+
         <view id="top"> </view>
         <!-- 内容展示区域 -->
         <view class="content-container">
+            <!-- 时间选择 -->
+            <view class="timeBox">
+                <picker mode="date" @change="bindDateChange" :value="selectTime" fields="month">
+                    统计时间：{{ selectTime }} ⏷
+                </picker>
+            </view>
             <!-- 实时运营监控中心 -->
             <view v-if="activeTab === 0" class="tab-content">
                 <!-- 服务区概况 -->
@@ -47,69 +58,69 @@
 
                 <!-- 断面流量 -->
                 <view id="trend-of-trafficFlow"></view>
-                <TrendOfTrafficFlow />
+                <TrendOfTrafficFlow :selectTime="selectTime" />
 
                 <!-- 入区车流 -->
                 <view id="vehicles-entering"></view>
-                <VehiclesEntering />
+                <VehiclesEntering :selectTime="selectTime" />
 
                 <!-- 经营效益 -->
                 <view id="vehicle-model-stay"></view>
-                <VehicleModelStay />
+                <VehicleModelStay :selectTime="selectTime" />
             </view>
 
             <!-- 客群画像与消费行为分析 -->
             <view v-if="activeTab === 1" class="tab-content">
                 <!-- 年龄画像 -->
                 <view id="customer-age-group"></view>
-                <CustomerAgeGroup />
+                <CustomerAgeGroup :selectTime="selectTime" />
 
                 <!-- 性别画像 -->
                 <view id="gender-customer-group"></view>
-                <GenderCustomerGroup />
+                <GenderCustomerGroup :selectTime="selectTime" />
 
                 <!-- 偏好类型 -->
                 <view id="preference-type"></view>
-                <PreferenceType />
+                <PreferenceType :selectTime="selectTime" />
 
                 <!-- 客群特征分析 -->
                 <view id="customer-group"></view>
-                <CustomerGroup />
+                <CustomerGroup :selectTime="selectTime" />
 
                 <!-- 客群消费偏好 -->
                 <view id="customer-consumption-preferences"></view>
-                <CustomerConsumptionPreferences />
+                <CustomerConsumptionPreferences :selectTime="selectTime" />
 
                 <!-- 消费转化率对比图 -->
                 <view id="consumption-conversion"></view>
-                <ConsumptionConversion />
+                <ConsumptionConversion :selectTime="selectTime" />
 
                 <!-- 消费水平 -->
                 <view id="consumption-level"></view>
-                <ConsumptionLevel />
+                <ConsumptionLevel :selectTime="selectTime" />
 
                 <!-- 消费时段分析 -->
                 <view id="consumption-period"></view>
-                <ConsumptionPeriod />
+                <ConsumptionPeriod :selectTime="selectTime" />
 
                 <!-- 品牌消费水平 -->
                 <view id="brand-consumption-level"></view>
-                <BrandConsumptionLevel />
+                <BrandConsumptionLevel :selectTime="selectTime" />
             </view>
 
             <!-- 多维度经营数据分析 -->
             <view v-if="activeTab === 2" class="tab-content">
                 <!-- 营收特征 -->
                 <view id="business-case"></view>
-                <BusinessCase />
+                <BusinessCase :selectTime="selectTime" />
 
                 <!-- 区域营收占比 -->
                 <view id="regional-revenue"></view>
-                <RegionalRevenue />
+                <RegionalRevenue :selectTime="selectTime" />
 
                 <!-- 业态结构占比 -->
                 <view id="business-structure"></view>
-                <BusinessStructure />
+                <BusinessStructure :selectTime="selectTime" />
 
                 <!-- 节假日营收 -->
                 <view id="festival-revenue-sum-info"></view>
@@ -121,7 +132,7 @@
             <view v-if="activeTab === 3" class="tab-content">
                 <!-- 会员商城 -->
                 <view id="member-mall"></view>
-                <MemberMall />
+                <MemberMall :selectTime="selectTime" />
 
                 <!-- 热门商品榜单 -->
                 <view id="hot-product-list"></view>
@@ -133,15 +144,15 @@
 
                 <!-- 供应商列表 -->
                 <view id="supplier-list-box"></view>
-                <SupplierListBox />
+                <SupplierListBox :selectTime="selectTime" />
 
                 <!-- 商城订单统计 -->
                 <view id="mall-order-statistics"></view>
-                <MallOrderStatistics />
+                <MallOrderStatistics :selectTime="selectTime" />
 
                 <!-- 本月福利金发送额度 -->
                 <view id="this-month-benefits"></view>
-                <ThisMonthBenefits />
+                <ThisMonthBenefits :selectTime="selectTime" />
 
                 <!-- 会员消费数据分析 -->
                 <view id="analysis-of-member"></view>
@@ -177,6 +188,7 @@ import SupplierListBox from './components/SupplierListBox.vue'
 import MallOrderStatistics from './components/MallOrderStatistics.vue'
 import ThisMonthBenefits from './components/ThisMonthBenefits.vue'
 import AnalysisOfMember from './components/AnalysisOfMember.vue'
+import moment from 'moment'
 
 
 export default {
@@ -260,7 +272,8 @@ export default {
             sessionData: {},
             pageScrollTop: 0,
             scrollIntoView: "",
-            scrollIntoTabItem: ""
+            tabScrollPosition: 0,
+            selectTime: moment().subtract(1, 'M').format('YYYY-MM')
         }
     },
     computed: {
@@ -289,14 +302,25 @@ export default {
         }
     },
     methods: {
+        bindDateChange(e) {
+            console.log('eeeee', e);
+            this.selectTime = e.detail.value
+        },
         switchTab(index) {
             this.scrollIntoView = 'top'
             this.activeTab = index;
-            this.scrollIntoTabItem = `tab-${index}`
             // 模拟数据加载
             this.fetchTabData(index);
 
-            console.log('this.scrollIntoTabItemthis.scrollIntoTabItem', this.scrollIntoTabItem);
+            // 使用固定步长来计算滚动位置
+            // 假设每个Tab的平均宽度为 200rpx (100px)
+            const avgTabWidth = 100;
+            const targetPosition = index * avgTabWidth;
+
+            console.log('Switching to tab:', index, 'scrolling to:', targetPosition);
+
+            // 设置滚动位置
+            this.tabScrollPosition = targetPosition;
         },
 
         // 滚动到指定组件
@@ -315,6 +339,9 @@ export default {
             this.pageScrollTop = e.detail.scrollTop
         },
 
+
+
+
         // 获取各个tab的数据
         async fetchTabData(tabIndex) {
             // 切换Tab时重置活动导航项
@@ -350,10 +377,10 @@ export default {
     .tab-container {
         background: @bg-white;
         box-shadow: @shadow-light;
-        // position: sticky;
         position: fixed;
         top: 0;
         z-index: 100;
+        width: 100%;
 
         .tab-list {
             height: 80rpx;
@@ -361,16 +388,16 @@ export default {
             padding: 0 32rpx;
             box-sizing: border-box;
             position: relative;
-            width: 100%;
+            width: max-content;
-            overflow-x: auto;
+            white-space: nowrap;
-            scrollbar-width: none;
+        }
-            /* 隐藏滚动条 Firefox */
-            -ms-overflow-style: none;
-            /* 隐藏滚动条 IE/Edge */
 
-            &::-webkit-scrollbar {
+        /* 隐藏滚动条 */
+        ::-webkit-scrollbar {
             display: none;
-                /* 隐藏滚动条 Chrome/Safari */
+            width: 0;
+            height: 0;
+            color: transparent;
         }
 
         .tab-item {
@@ -381,10 +408,7 @@ export default {
             transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
             cursor: pointer;
             min-width: fit-content;
-
+            display: inline-block;
-                &:last-child {
-                    margin-right: 0;
-                }
 
             &.active {
                 .tab-text {
@@ -543,6 +567,12 @@ export default {
     }
 }
 
+.timeBox {
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+}
+
 .side-navigation {
     position: fixed;
     right: 24rpx;
@@ -665,7 +695,6 @@ export default {
         }
     }
 }
-}
 
 @keyframes pulse {
     0% {

store/store.js

@@ -118,7 +118,6 @@ const actions = {
 		let res = await request.$get('WeChat_GetBusinessMemberInfo', { Membership_Id: _id })
 		if (res.Result_Code == 100) {
 			let data = res.Result_Data
-			console.log('WeChat_GetBusinessMemberInfoWeChat_GetBusinessMemberInfo', data);
 			commit('setUser', data)
 
 			data.WeChat_MiniProToken = _user.WeChat_MiniProToken