From d832cfa05dd362ddef33dbb6b2bff754bde81f92 Mon Sep 17 00:00:00 2001 From: ylj20011123 Date: Thu, 30 Oct 2025 11:38:09 +0800 Subject: [PATCH] update --- .../components/AnalysisOfMember.vue | 16 ++- .../components/BrandConsumptionLevel.vue | 18 ++- .../components/BrandDetail.vue | 19 ++-- .../components/BusinessCase.vue | 23 +++- .../components/BusinessStructure.vue | 16 ++- .../components/ConsumptionConversion.vue | 16 ++- .../components/ConsumptionLevel.vue | 16 ++- .../components/ConsumptionPeriod.vue | 19 +++- .../components/CustomerAgeGroup.vue | 16 ++- .../CustomerConsumptionPreferences.vue | 24 +++- .../components/CustomerGroup.vue | 16 ++- .../components/FestivalRevenueSumInfo.vue | 11 +- .../components/GenderCustomerGroup.vue | 16 ++- .../components/HotProductList.vue | 5 +- .../components/MallOrderStatistics.vue | 25 ++++- .../components/MemberMall.vue | 14 ++- .../components/OverviewOfServiceArea.vue | 17 +-- .../components/PreferenceType.vue | 16 ++- .../components/RegionalRevenue.vue | 16 ++- .../components/SupplierListBox.vue | 14 ++- .../components/ThisMonthBenefits.vue | 18 ++- .../components/TradingAlert.vue | 1 - .../components/TrendOfTrafficFlow.vue | 69 +++++++----- .../components/VehicleModelStay.vue | 16 ++- .../components/VehiclesEntering.vue | 106 ++++++++++++------ pages/DigitalIntelligenceDashboard/index.vue | 32 +++--- 26 files changed, 442 insertions(+), 133 deletions(-) diff --git a/pages/DigitalIntelligenceDashboard/components/AnalysisOfMember.vue b/pages/DigitalIntelligenceDashboard/components/AnalysisOfMember.vue index e5525e9..ad29769 100644 --- a/pages/DigitalIntelligenceDashboard/components/AnalysisOfMember.vue +++ b/pages/DigitalIntelligenceDashboard/components/AnalysisOfMember.vue @@ -4,7 +4,7 @@ - + - + - - + + + {{ item.label }} - + - + - + - + - + - + - + { if (hour % 4 === 0) { + if (hour === 24) { + return + } selectedHours.push(hour) } }) diff --git a/pages/DigitalIntelligenceDashboard/components/CustomerAgeGroup.vue b/pages/DigitalIntelligenceDashboard/components/CustomerAgeGroup.vue index ec466b4..de37b3f 100644 --- a/pages/DigitalIntelligenceDashboard/components/CustomerAgeGroup.vue +++ b/pages/DigitalIntelligenceDashboard/components/CustomerAgeGroup.vue @@ -8,7 +8,7 @@ - + - + 0) { - let list = data.BusinessTradeRank.slice(0, 10) // 只取前10条 + let list = data.BusinessTradeRank.slice(0, 5) // 只取前10条 list.forEach((item) => { category.push(item.name) seriesData.push(Number(item.value)) diff --git a/pages/DigitalIntelligenceDashboard/components/CustomerGroup.vue b/pages/DigitalIntelligenceDashboard/components/CustomerGroup.vue index 656211b..d709405 100644 --- a/pages/DigitalIntelligenceDashboard/components/CustomerGroup.vue +++ b/pages/DigitalIntelligenceDashboard/components/CustomerGroup.vue @@ -8,7 +8,7 @@ - + @@ -30,6 +30,7 @@ export default { data() { return { + isLoading: false, // 图表原始数据 rawData: { seriesData: [], @@ -123,6 +124,17 @@ export default { } }, + watch: { + selectTime: { + handler(newVal, oldVal) { + if (newVal !== oldVal) { + this.handleGetCustomerGroupData() + } + }, + immediate: false + } + }, + onReady() { this.handleGetCustomerGroupData() }, @@ -136,7 +148,9 @@ export default { serverpartId: "", // 暂时为空,如果需要传入服务区ID可以在这里添加 } + this.isLoading = true const data = await this.getCustomerGroupRatio(req); + this.isLoading = false // 处理数据 this.processChartData(data.Result_Data.List) diff --git a/pages/DigitalIntelligenceDashboard/components/FestivalRevenueSumInfo.vue b/pages/DigitalIntelligenceDashboard/components/FestivalRevenueSumInfo.vue index 803eb8f..16f6c14 100644 --- a/pages/DigitalIntelligenceDashboard/components/FestivalRevenueSumInfo.vue +++ b/pages/DigitalIntelligenceDashboard/components/FestivalRevenueSumInfo.vue @@ -6,7 +6,7 @@ - + 0) { @@ -118,7 +123,7 @@ export default { if (item.children && item.children.length > 0) { item.children.forEach((subItem, subIndex) => { seriesData.push({ - name: `${subItem.name} ${subItem.value}%`, + name: `${subItem.name}`, value: Number(subItem.value), }) }) diff --git a/pages/DigitalIntelligenceDashboard/components/GenderCustomerGroup.vue b/pages/DigitalIntelligenceDashboard/components/GenderCustomerGroup.vue index 3361dfa..08c9374 100644 --- a/pages/DigitalIntelligenceDashboard/components/GenderCustomerGroup.vue +++ b/pages/DigitalIntelligenceDashboard/components/GenderCustomerGroup.vue @@ -8,7 +8,7 @@ - + - + - + {{ memberData.newMembersCount ? memberData.newMembersCount.toLocaleString() : 0 - }} + }} 新增会员数 @@ -58,7 +58,7 @@ 会员消费笔数/笔 {{ memberData.consumptionCount ? memberData.consumptionCount : 0 - }} + }} @@ -154,6 +154,16 @@ export default { default: "" }, }, + watch: { + selectTime: { + handler(newVal, oldVal) { + if (newVal !== oldVal) { + this.handleGetMemberMallData() + } + }, + immediate: false + } + }, onReady() { this.handleGetMemberMallData() }, diff --git a/pages/DigitalIntelligenceDashboard/components/OverviewOfServiceArea.vue b/pages/DigitalIntelligenceDashboard/components/OverviewOfServiceArea.vue index 532ec7d..08e85d7 100644 --- a/pages/DigitalIntelligenceDashboard/components/OverviewOfServiceArea.vue +++ b/pages/DigitalIntelligenceDashboard/components/OverviewOfServiceArea.vue @@ -44,8 +44,8 @@ + 设备设施 - 设备设施 @@ -83,11 +83,11 @@ + 服务区类型分布 - 服务区类型分布 - + @@ -109,6 +109,7 @@ export default { data() { return { + isLoading: false, serviceData: { ServerpartTotalCount: 0, // 管理站点 serviceAllTotal: 0, // 服务区 @@ -256,11 +257,13 @@ export default { methods: { // 获取服务区数据 - handleGetData() { + async handleGetData() { + this.isLoading = true // 获取服务区基础设施汇总数据 - this.handleGetServerpartServiceSummary() + await this.handleGetServerpartServiceSummary() // 获取服务区繁忙度数据 - this.handleGetCurBusyRank() + await this.handleGetCurBusyRank() + this.isLoading = false }, // 获取服务区基础设施汇总数据 @@ -365,7 +368,7 @@ export default { } .chart-title { - font-size: 28rpx; + font-size: 30rpx; font-weight: 600; color: #333; margin-bottom: 12rpx; diff --git a/pages/DigitalIntelligenceDashboard/components/PreferenceType.vue b/pages/DigitalIntelligenceDashboard/components/PreferenceType.vue index 898a643..12af70a 100644 --- a/pages/DigitalIntelligenceDashboard/components/PreferenceType.vue +++ b/pages/DigitalIntelligenceDashboard/components/PreferenceType.vue @@ -8,7 +8,7 @@ - + - + 0) { @@ -131,6 +144,7 @@ export default { const data = await this.getRevenueReport(req); + this.isLoading = false // 处理数据 this.processChartData(wrapTreeNode(data.Result_Data.List)) }, diff --git a/pages/DigitalIntelligenceDashboard/components/SupplierListBox.vue b/pages/DigitalIntelligenceDashboard/components/SupplierListBox.vue index 0b95078..8beacc7 100644 --- a/pages/DigitalIntelligenceDashboard/components/SupplierListBox.vue +++ b/pages/DigitalIntelligenceDashboard/components/SupplierListBox.vue @@ -37,11 +37,14 @@ - + - + + + + - + @@ -57,6 +60,8 @@ + + @@ -72,6 +77,7 @@ export default { data() { return { + isLoading: false, // 供应商列表 supplierList: [], @@ -102,11 +108,13 @@ export default { methods: { // 获取供应商数据 async handleGetData() { + this.isLoading = true // 获取供应商列表数据 await this.getSupplierListData() // 获取供应商类型统计数据 await this.getSupplierTypeData() + this.isLoading = false }, // 获取供应商列表数据 diff --git a/pages/DigitalIntelligenceDashboard/components/ThisMonthBenefits.vue b/pages/DigitalIntelligenceDashboard/components/ThisMonthBenefits.vue index 1e2ce84..eeda92b 100644 --- a/pages/DigitalIntelligenceDashboard/components/ThisMonthBenefits.vue +++ b/pages/DigitalIntelligenceDashboard/components/ThisMonthBenefits.vue @@ -18,14 +18,14 @@ {{ allRealData.distributeAmount ? allRealData.distributeAmount.toLocaleString() : '0' - }} + }} - + + + + 断面流量 + - - 断面流量 - - + - + - - - - - + + + + + + + + + 对客营收 - - - - - - - + + + + + + + + + @@ -46,6 +52,7 @@ export default { data() { return { + isLoading: false, // 图表数据 chartData: { category: [], @@ -103,12 +110,13 @@ export default { // 入区车流图表配置 vehicleChartOpts() { return { - padding: [15, 15, 0, 5], + padding: [15, 0, 0, 10], dataLabel: false, - enableScroll: true, // 开启滚动 + // enableScroll: true, // 开启滚动 xAxis: { disableGrid: true, - itemCount: 6, // 默认显示6个月的数据 + itemCount: 12, // 默认显示6个月的数据 + fontSize: 10 }, yAxis: { showTitle: true, @@ -117,15 +125,15 @@ export default { title: '入区车流(万辆)', titleFontSize: 12, titleOffsetY: -5, - titleOffsetX: 0, + titleOffsetX: 10, + splitNumber: 5 }] }, + legend: {}, extra: { column: { type: 'group', - width: 12, // 柱子宽度调小一点 - activeBgColor: '#000000', - activeBgOpacity: 0.08, + width: 6, // 柱子宽度调小一点 seriesGap: 0, // 同一组别的柱子紧贴在一起 barBorderRadius: [3, 3, 0, 0] } @@ -152,14 +160,15 @@ export default { // 对客营收图表配置 revenueChartOpts() { return { - padding: [15, 10, 0, 15], + padding: [15, 10, 0, 10], legend: {}, dataLabel: false, dataPointShape: true, - enableScroll: true, // 开启滚动 + // enableScroll: true, // 开启滚动 xAxis: { disableGrid: true, - itemCount: 6, // 默认显示6个月的数据 + itemCount: 12, // 默认显示6个月的数据 + fontSize: 10 }, yAxis: { gridType: 'dash', @@ -170,7 +179,8 @@ export default { title: '对客营收(万元)', titleFontSize: 12, titleOffsetY: -5, - titleOffsetX: 0 + titleOffsetX: 10, + splitNumber: 5 }], splitNumber: 5 }, @@ -178,20 +188,25 @@ export default { line: { type: 'straight', // 改为直线,不要圆滑曲线 width: 2, + seriesGap: 0, // 同一组别的柱子紧贴在一起 activeType: 'hollow' - }, - tooltip: { - showBox: true, - bgColor: '#000000', - bgOpacity: 0.7, - borderColor: '#333333', - borderWidth: 1 } } } } }, + watch: { + selectTime: { + handler(newVal, oldVal) { + if (newVal !== oldVal) { + this.handleGetSectionFlowCount() + } + }, + immediate: false + } + }, + onReady() { this.handleGetSectionFlowCount() }, @@ -199,10 +214,11 @@ export default { methods: { // 获取入区车辆的趋势数据 async handleGetSectionFlowCount() { + this.isLoading = true // 当前年份数据请求 const currentReq = { StartDate: this.selectTime ? moment(this.selectTime).startOf('y').format('YYYY-MM-DD') : moment().startOf('y').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'), + EndDate: this.selectTime ? moment(this.selectTime).endOf('m').format('YYYY-MM-DD') : moment().endOf('m').format('YYYY-MM-DD'), ProvinceCode: 530000 } @@ -218,6 +234,7 @@ export default { this.getMonthAnalysis(currentReq), this.getMonthAnalysis(lastYearReq) ]); + this.isLoading = false // 处理数据 this.processChartData(currentData.Result_Data.List, lastYearData.Result_Data.List) @@ -243,7 +260,7 @@ export default { // 处理当前年份数据 if (currentData && currentData.length > 0) { currentData.forEach((item) => { - const month = item.Statistics_Month < 10 ? '0' + item.Statistics_Month : item.Statistics_Month + const month = item.Statistics_Month < 10 ? item.Statistics_Month : item.Statistics_Month category.push(`${month}月`) seriesDataCar.push(Number((item.Vehicle_Count / 10000).toFixed(2))) realDataCar.push(item.Vehicle_Count) @@ -351,5 +368,22 @@ export default { box-sizing: border-box; height: 400rpx; } + + .chart-card { + background: @bg-white; + border-radius: @border-radius; + padding: 24rpx; + box-shadow: @shadow; + margin-bottom: 24rpx; + + + + .chart-content { + .bar-chart-container { + width: 100%; + height: 400rpx; + } + } + } } \ No newline at end of file diff --git a/pages/DigitalIntelligenceDashboard/index.vue b/pages/DigitalIntelligenceDashboard/index.vue index f68dc59..1981f00 100644 --- a/pages/DigitalIntelligenceDashboard/index.vue +++ b/pages/DigitalIntelligenceDashboard/index.vue @@ -43,7 +43,7 @@ - 统计时间:{{ selectTime }} ⏷ + 统计时间:{{ selectTime }} ▼ @@ -223,10 +223,10 @@ export default { return { activeTab: 0, tabList: [ - { name: '实时运营监控中心', key: 'business' }, - { name: '客群画像与消费行为分析', key: 'customerProfile' }, - { name: '多维度经营数据分析', key: 'businessRevenue' }, - { name: '商户电商生态全景', key: 'mallOperation' }, + { name: '运营中心', key: 'business' }, + { name: '客群画像', key: 'customerProfile' }, + { name: '经营分析', key: 'businessRevenue' }, + { name: '电商生态', key: 'mallOperation' }, ], // 各个Tab对应的导航栏数据 navData: { @@ -241,33 +241,33 @@ export default { { id: 'customer-age-group', name: '年龄画像' }, { id: 'gender-customer-group', name: '性别画像' }, { id: 'preference-type', name: '偏好类型' }, - { id: 'customer-group', name: '客群特征分析' }, - { id: 'customer-consumption-preferences', name: '客群消费偏好' }, - { id: 'consumption-conversion', name: '消费转化率对比图' }, + { id: 'customer-group', name: '客群特征' }, + { id: 'customer-consumption-preferences', name: '消费偏好' }, + { id: 'consumption-conversion', name: '消费转化率' }, { id: 'consumption-level', name: '消费水平' }, - { id: 'consumption-period', name: '消费时段分析' }, - { id: 'brand-consumption-level', name: '品牌消费水平' }, + { id: 'consumption-period', name: '消费时段' }, + { id: 'brand-consumption-level', name: '品牌消费' }, ], businessRevenue: [ { id: 'business-case', name: '营收特征' }, - { id: 'regional-revenue', name: '区域营收占比' }, - { id: 'business-structure', name: '业态结构占比' }, + { id: 'regional-revenue', name: '区域营收' }, + { id: 'business-structure', name: '业态结构' }, { id: 'festival-revenue-sum-info', name: '节假日营收' }, ], mallOperation: [ { id: 'member-mall', name: '会员商城' }, - { id: 'hot-product-list', name: '热门商品榜单' }, + { id: 'hot-product-list', name: '商品榜单' }, { id: 'brand-detail', name: '商户类别' }, { id: 'supplier-list-box', name: '供应商列表' }, { id: 'mall-order-statistics', name: '商城订单统计' }, - { id: 'this-month-benefits', name: '本月福利金发送额度' }, - { id: 'analysis-of-member', name: '会员消费数据分析' }, + { id: 'this-month-benefits', name: '福利金额度' }, + { id: 'analysis-of-member', name: '会员消费' }, ] }, // 当前活动的导航项 activeNavItem: '', // 导航栏是否收缩 - isNavCollapsed: true, + isNavCollapsed: false, // 暂时将这一次进入 的数据缓存一下 sessionData: {}, pageScrollTop: 0,