This commit is contained in:
ylj20011123 2025-10-30 11:38:09 +08:00
parent 6e2bd12f8c
commit d832cfa05d
26 changed files with 442 additions and 133 deletions

View File

@ -4,7 +4,7 @@
<view class="chart-card"> <view class="chart-card">
<view class="chart-container"> <view class="chart-container">
<!-- 图表加载效果 --> <!-- 图表加载效果 -->
<ChartLoading v-if="!hasChartData" text="数据加载中..." /> <ChartLoading v-if="isLoading" text="数据加载中..." />
<!-- 实际图表 --> <!-- 实际图表 -->
<QiunDataCharts v-else type="column" :opts="chartOpts" :chartData="chartData" :canvas2d="true" <QiunDataCharts v-else type="column" :opts="chartOpts" :chartData="chartData" :canvas2d="true"
:inScrollView="true" canvasId="analysisOfMemberChart" :animation="false" :ontap="true" :inScrollView="true" canvasId="analysisOfMemberChart" :animation="false" :ontap="true"
@ -28,6 +28,7 @@ export default {
data() { data() {
return { return {
isLoading: false,
// //
rawData: { rawData: {
category: [], category: [],
@ -106,6 +107,17 @@ export default {
} }
}, },
watch: {
selectTime: {
handler(newVal, oldVal) {
if (newVal !== oldVal) {
this.handleGetData()
}
},
immediate: false
}
},
onReady() { onReady() {
this.handleGetData() this.handleGetData()
}, },
@ -113,7 +125,9 @@ export default {
methods: { methods: {
// //
async handleGetData() { async handleGetData() {
this.isLoading = true
await this.getAnalysisOfMemberData() await this.getAnalysisOfMemberData()
this.isLoading = false
}, },
// //

View File

@ -8,7 +8,7 @@
<!-- 品牌消费水平图表 --> <!-- 品牌消费水平图表 -->
<view class="chart-container"> <view class="chart-container">
<!-- 图表加载效果 --> <!-- 图表加载效果 -->
<ChartLoading v-if="!hasChartData" text="数据加载中..." /> <ChartLoading v-if="isLoading" text="数据加载中..." />
<!-- 实际图表 --> <!-- 实际图表 -->
<QiunDataCharts v-else type="column" :opts="chartOpts" :chartData="chartData" :canvas2d="true" <QiunDataCharts v-else type="column" :opts="chartOpts" :chartData="chartData" :canvas2d="true"
:inScrollView="true" canvasId="brandConsumptionLevelChart" :animation="false" :ontap="true" :inScrollView="true" canvasId="brandConsumptionLevelChart" :animation="false" :ontap="true"
@ -31,6 +31,7 @@ export default {
data() { data() {
return { return {
isLoading: false,
// //
rawData: { rawData: {
category: [], category: [],
@ -106,6 +107,17 @@ export default {
} }
}, },
watch: {
selectTime: {
handler(newVal, oldVal) {
if (newVal !== oldVal) {
this.handleGetBrandConsumptionLevelData()
}
},
immediate: false
}
},
onReady() { onReady() {
this.handleGetBrandConsumptionLevelData() this.handleGetBrandConsumptionLevelData()
}, },
@ -118,9 +130,9 @@ export default {
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'), 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: '' // ServerpartId: ''
} }
this.isLoading = true
const data = await this.getBusinessBrandLevel(req); const data = await this.getBusinessBrandLevel(req);
this.isLoading = false
// //
this.processChartData(data.Result_Data) this.processChartData(data.Result_Data)
}, },

View File

@ -20,21 +20,22 @@
<!-- 品牌列表 --> <!-- 品牌列表 -->
<view class="brand-list"> <view class="brand-list">
<!-- Tab切换 --> <!-- Tab切换 -->
<view class="tab-box"> <view class="tab-box" v-if="tabList && tabList.length > 0">
<scroll-view class="tab-scroll" scroll-x="true" :show-scrollbar="false"> <view class="tab-scroll">
<!-- scroll-x="true" :show-scrollbar="false" -->
<view class="tab-content"> <view class="tab-content">
<view :class="selectTab === index + 1 ? 'tab-item select-tab' : 'tab-item'" <view :class="selectTab === index + 1 ? 'tab-item select-tab' : 'tab-item'"
v-for="(item, index) in tabList" :key="index" @click="handleChangeTab(index + 1)"> v-for="(item, index) in tabList" :key="index" @click="handleChangeTab(index + 1)">
{{ item.label }} {{ item.label }}
</view> </view>
</view> </view>
</scroll-view> </view>
</view> </view>
<!-- 品牌列表容器 --> <!-- 品牌列表容器 -->
<view class="brand-list-box"> <view class="brand-list-box">
<!-- 品牌列表加载效果 --> <!-- 品牌列表加载效果 -->
<ChartLoading v-if="!hasBrandListData" text="数据加载中..." /> <ChartLoading v-if="isLoading" text="数据加载中..." />
<!-- 品牌列表内容 --> <!-- 品牌列表内容 -->
<view v-else> <view v-else>
<view class="brand-item" v-for="(item, index) in brandListData" :key="index" <view class="brand-item" v-for="(item, index) in brandListData" :key="index"
@ -77,6 +78,7 @@ export default {
data() { data() {
return { return {
isLoading: false,
// Tab // Tab
tabList: [], tabList: [],
selectTab: 1, // Tab selectTab: 1, // Tab
@ -150,8 +152,10 @@ export default {
methods: { methods: {
// //
async handleGoMounted() { async handleGoMounted() {
this.isLoading = true
await this.handleGetData() await this.handleGetData()
await this.handleBrandTabList() await this.handleBrandTabList()
this.isLoading = false
}, },
// //
@ -330,13 +334,14 @@ export default {
.tab-scroll { .tab-scroll {
width: 100%; width: 100%;
white-space: nowrap; // white-space: nowrap;
} }
.tab-content { .tab-content {
display: flex; display: flex;
gap: 24rpx; gap: 16rpx;
white-space: nowrap; // white-space: nowrap;
flex-wrap: wrap;
.tab-item { .tab-item {
font-size: 24rpx; font-size: 24rpx;

View File

@ -21,7 +21,7 @@
<view style="width:100%;height: 400rpx;"> <view style="width:100%;height: 400rpx;">
<!-- 图表加载效果 --> <!-- 图表加载效果 -->
<ChartLoading v-if="!hasChartData" text="数据加载中..." /> <ChartLoading v-if="isLoading" text="数据加载中..." />
<!-- 实际图表 --> <!-- 实际图表 -->
<QiunDataCharts v-else type="column" :opts="chartOpts" :chartData="chartData" :canvas2d="true" <QiunDataCharts v-else type="column" :opts="chartOpts" :chartData="chartData" :canvas2d="true"
:inScrollView="true" canvasId="businessCaseChart" :animation="false" :ontap="true" :ontouch="true" :inScrollView="true" canvasId="businessCaseChart" :animation="false" :ontap="true" :ontouch="true"
@ -46,6 +46,7 @@ export default {
data() { data() {
return { return {
isLoading: false,
// Tab // Tab
tabList: [ tabList: [
{ label: "营收金额", value: 1 }, { label: "营收金额", value: 1 },
@ -90,10 +91,11 @@ export default {
return { return {
padding: [15, 15, 0, 15], // paddingpicker padding: [15, 15, 0, 15], // paddingpicker
dataLabel: false, dataLabel: false,
enableScroll: true, // enableScroll: true,
xAxis: { xAxis: {
disableGrid: true, disableGrid: true,
itemCount: 4, itemCount: 12,
fontSize: 10
}, },
yAxis: { yAxis: {
showTitle: true, showTitle: true,
@ -121,7 +123,7 @@ export default {
extra: { extra: {
column: { column: {
type: 'group', type: 'group',
width: 12, width: 4,
activeBgColor: '#000000', activeBgColor: '#000000',
activeBgOpacity: 0.08, activeBgOpacity: 0.08,
seriesGap: 0, seriesGap: 0,
@ -133,6 +135,17 @@ export default {
} }
}, },
watch: {
selectTime: {
handler(newVal, oldVal) {
if (newVal !== oldVal) {
this.handleGetBusinessCaseData()
}
},
immediate: false
}
},
onReady() { onReady() {
this.handleGetBusinessCaseData() this.handleGetBusinessCaseData()
}, },
@ -146,8 +159,10 @@ export default {
ServerpartId: "", // ID ServerpartId: "", // ID
} }
this.isLoading = true
const data = await this.getRevenueCompare(req); const data = await this.getRevenueCompare(req);
this.isLoading = false
// //
this.processChartData(data.Result_Data) this.processChartData(data.Result_Data)
}, },

View File

@ -8,7 +8,7 @@
<!-- 业态结构占比图表 --> <!-- 业态结构占比图表 -->
<view class="chart-container"> <view class="chart-container">
<!-- 图表加载效果 --> <!-- 图表加载效果 -->
<ChartLoading v-if="!hasChartData" text="数据加载中..." /> <ChartLoading v-if="isLoading" text="数据加载中..." />
<!-- 实际图表 --> <!-- 实际图表 -->
<QiunDataCharts v-else type="pie" :opts="chartOpts" :chartData="chartData" :canvas2d="true" <QiunDataCharts v-else type="pie" :opts="chartOpts" :chartData="chartData" :canvas2d="true"
:inScrollView="true" canvasId="businessStructureChart" :animation="false" :ontap="true" :ontouch="true" :inScrollView="true" canvasId="businessStructureChart" :animation="false" :ontap="true" :ontouch="true"
@ -36,6 +36,7 @@ export default {
}, },
data() { data() {
return { return {
isLoading: false,
// //
rawData: { rawData: {
seriesData: [], seriesData: [],
@ -88,6 +89,17 @@ export default {
} }
}, },
watch: {
selectTime: {
handler(newVal, oldVal) {
if (newVal !== oldVal) {
this.handleGetBusinessStructureData()
}
},
immediate: false
}
},
onReady() { onReady() {
this.handleGetBusinessStructureData() this.handleGetBusinessStructureData()
}, },
@ -102,7 +114,9 @@ export default {
ServerpartId: "" // ID ServerpartId: "" // ID
} }
this.isLoading = true
const data = await this.getBusinessTradeRevenue(req); const data = await this.getBusinessTradeRevenue(req);
this.isLoading = false
// //
this.processChartData(data.Result_Data) this.processChartData(data.Result_Data)

View File

@ -8,7 +8,7 @@
<!-- 消费转化对比图图表 --> <!-- 消费转化对比图图表 -->
<view class="chart-container"> <view class="chart-container">
<!-- 图表加载效果 --> <!-- 图表加载效果 -->
<ChartLoading v-if="!hasChartData" text="数据加载中..." /> <ChartLoading v-if="isLoading" text="数据加载中..." />
<!-- 实际图表 --> <!-- 实际图表 -->
<QiunDataCharts v-else type="line" :opts="chartOpts" :chartData="chartData" :canvas2d="true" <QiunDataCharts v-else type="line" :opts="chartOpts" :chartData="chartData" :canvas2d="true"
:inScrollView="true" canvasId="consumptionConversionChart" :animation="false" :ontap="true" :inScrollView="true" canvasId="consumptionConversionChart" :animation="false" :ontap="true"
@ -31,6 +31,7 @@ export default {
data() { data() {
return { return {
isLoading: false,
// //
rawData: { rawData: {
category: [], category: [],
@ -128,6 +129,17 @@ export default {
} }
}, },
watch: {
selectTime: {
handler(newVal, oldVal) {
if (newVal !== oldVal) {
this.handleGetConsumptionConversionData()
}
},
immediate: false
}
},
onReady() { onReady() {
this.handleGetConsumptionConversionData() this.handleGetConsumptionConversionData()
}, },
@ -141,7 +153,9 @@ export default {
Serverpart_ID: "" // ID Serverpart_ID: "" // ID
} }
this.isLoading = true
const data = await this.getTransactionConvert(req); const data = await this.getTransactionConvert(req);
this.isLoading = false
// //
this.processChartData(data.Result_Data) this.processChartData(data.Result_Data)

View File

@ -9,7 +9,7 @@
<!-- 消费水平图表 --> <!-- 消费水平图表 -->
<view class="chart-container"> <view class="chart-container">
<!-- 图表加载效果 --> <!-- 图表加载效果 -->
<ChartLoading v-if="!hasChartData" text="数据加载中..." /> <ChartLoading v-if="isLoading" text="数据加载中..." />
<!-- 实际图表 --> <!-- 实际图表 -->
<QiunDataCharts v-else type="column" :opts="chartOpts" :chartData="chartData" :canvas2d="true" <QiunDataCharts v-else type="column" :opts="chartOpts" :chartData="chartData" :canvas2d="true"
:inScrollView="true" canvasId="consumptionLevelChart" :animation="false" :ontap="true" :ontouch="true" :inScrollView="true" canvasId="consumptionLevelChart" :animation="false" :ontap="true" :ontouch="true"
@ -32,6 +32,7 @@ export default {
data() { data() {
return { return {
isLoading: false,
// //
rawData: { rawData: {
category: [], category: [],
@ -108,6 +109,17 @@ export default {
} }
}, },
watch: {
selectTime: {
handler(newVal, oldVal) {
if (newVal !== oldVal) {
this.handleGetConsumptionLevelData()
}
},
immediate: false
}
},
onReady() { onReady() {
this.handleGetConsumptionLevelData() this.handleGetConsumptionLevelData()
}, },
@ -121,7 +133,9 @@ export default {
// ServerpartId: '' // ServerpartId: ''
} }
this.isLoading = true
const data = await this.getBusinessTradeLevel(req); const data = await this.getBusinessTradeLevel(req);
this.isLoading = false
// //
this.processChartData(data.Result_Data) this.processChartData(data.Result_Data)

View File

@ -8,7 +8,7 @@
<!-- 消费时段分析图表 --> <!-- 消费时段分析图表 -->
<view class="chart-container"> <view class="chart-container">
<!-- 图表加载效果 --> <!-- 图表加载效果 -->
<ChartLoading v-if="!hasChartData" text="数据加载中..." /> <ChartLoading v-if="isLoading" text="数据加载中..." />
<!-- 实际图表 --> <!-- 实际图表 -->
<QiunDataCharts v-else type="line" :opts="chartOpts" :chartData="chartData" :canvas2d="true" <QiunDataCharts v-else type="line" :opts="chartOpts" :chartData="chartData" :canvas2d="true"
:inScrollView="true" canvasId="consumptionPeriodChart" :animation="false" :ontap="true" :ontouch="true" :inScrollView="true" canvasId="consumptionPeriodChart" :animation="false" :ontap="true" :ontouch="true"
@ -31,6 +31,7 @@ export default {
data() { data() {
return { return {
isLoading: false,
// //
rawData: { rawData: {
category: [], category: [],
@ -116,6 +117,17 @@ export default {
} }
}, },
watch: {
selectTime: {
handler(newVal, oldVal) {
if (newVal !== oldVal) {
this.handleGetConsumptionPeriodData()
}
},
immediate: false
}
},
onReady() { onReady() {
this.handleGetConsumptionPeriodData() this.handleGetConsumptionPeriodData()
}, },
@ -130,7 +142,9 @@ export default {
TimeSpan: 1 TimeSpan: 1
} }
this.isLoading = true
const data = await this.getTransactionTimeAnalysis(req); const data = await this.getTransactionTimeAnalysis(req);
this.isLoading = false
// //
this.processChartData(data.Result_Data.CommonScatterList) this.processChartData(data.Result_Data.CommonScatterList)
@ -178,6 +192,9 @@ export default {
// 1. 448121620 // 1. 448121620
sortedHours.forEach(hour => { sortedHours.forEach(hour => {
if (hour % 4 === 0) { if (hour % 4 === 0) {
if (hour === 24) {
return
}
selectedHours.push(hour) selectedHours.push(hour)
} }
}) })

View File

@ -8,7 +8,7 @@
<!-- 年龄图表 --> <!-- 年龄图表 -->
<view class="chart-container"> <view class="chart-container">
<!-- 图表加载效果 --> <!-- 图表加载效果 -->
<ChartLoading v-if="!hasChartData" text="数据加载中..." /> <ChartLoading v-if="isLoading" text="数据加载中..." />
<!-- 实际图表 --> <!-- 实际图表 -->
<QiunDataCharts v-else type="column" :opts="chartOpts" :chartData="chartData" :canvas2d="true" <QiunDataCharts v-else type="column" :opts="chartOpts" :chartData="chartData" :canvas2d="true"
:inScrollView="true" canvasId="customerAgeGroupChart" :animation="false" :ontap="true" :ontouch="true" :inScrollView="true" canvasId="customerAgeGroupChart" :animation="false" :ontap="true" :ontouch="true"
@ -31,6 +31,7 @@ export default {
data() { data() {
return { return {
isLoading: false,
// //
rawData: { rawData: {
category: [], category: [],
@ -104,6 +105,17 @@ export default {
} }
}, },
watch: {
selectTime: {
handler(newVal, oldVal) {
if (newVal !== oldVal) {
this.handleGetCustomerAgeData()
}
},
immediate: false
}
},
onReady() { onReady() {
this.handleGetCustomerAgeData() this.handleGetCustomerAgeData()
}, },
@ -116,7 +128,9 @@ export default {
statisticsMonth: this.selectTime ? moment(moment(this.selectTime).subtract(1, 'M')).format('YYYYMM') : 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'),
} }
this.isLoading = true
const data = await this.getCustomerAgeRatio(req); const data = await this.getCustomerAgeRatio(req);
this.isLoading = false
// //
this.processChartData(data.Result_Data.List) this.processChartData(data.Result_Data.List)

View File

@ -8,7 +8,7 @@
<!-- 客群消费偏好图表 --> <!-- 客群消费偏好图表 -->
<view class="chart-container"> <view class="chart-container">
<!-- 图表加载效果 --> <!-- 图表加载效果 -->
<ChartLoading v-if="!hasChartData" text="数据加载中..." /> <ChartLoading v-if="isLoading" text="数据加载中..." />
<!-- 实际图表 --> <!-- 实际图表 -->
<QiunDataCharts v-else type="column" :opts="chartOpts" :chartData="chartData" :canvas2d="true" <QiunDataCharts v-else type="column" :opts="chartOpts" :chartData="chartData" :canvas2d="true"
:inScrollView="true" canvasId="customerConsumptionPreferencesChart" :animation="false" :ontap="true" :inScrollView="true" canvasId="customerConsumptionPreferencesChart" :animation="false" :ontap="true"
@ -31,6 +31,7 @@ export default {
data() { data() {
return { return {
isLoading: false,
// //
rawData: { rawData: {
category: [], category: [],
@ -70,10 +71,11 @@ export default {
return { return {
padding: [15, 15, 0, 15], // paddingX padding: [15, 15, 0, 15], // paddingX
dataLabel: false, dataLabel: false,
enableScroll: true, // enableScroll: true,
xAxis: { xAxis: {
disableGrid: true, disableGrid: true,
itemCount: 4, // itemCount: 5, //
fontSize: 10
}, },
yAxis: { yAxis: {
showTitle: true, showTitle: true,
@ -102,7 +104,6 @@ export default {
width: 8, // width: 8, //
activeBgColor: '#000000', activeBgColor: '#000000',
activeBgOpacity: 0.08, activeBgOpacity: 0.08,
seriesGap: 20, //
barBorderRadius: [4, 4, 0, 0] barBorderRadius: [4, 4, 0, 0]
} }
} }
@ -110,6 +111,17 @@ export default {
} }
}, },
watch: {
selectTime: {
handler(newVal, oldVal) {
if (newVal !== oldVal) {
this.handleGetCustomerConsumptionPreferencesData()
}
},
immediate: false
}
},
onReady() { onReady() {
this.handleGetCustomerConsumptionPreferencesData() this.handleGetCustomerConsumptionPreferencesData()
}, },
@ -123,7 +135,9 @@ export default {
ServerpartId: "" // ID ServerpartId: "" // ID
} }
this.isLoading = true
const data = await this.getBusinessTradeRevenue(req); const data = await this.getBusinessTradeRevenue(req);
this.isLoading = false
// //
this.processChartData(data.Result_Data) this.processChartData(data.Result_Data)
@ -146,7 +160,7 @@ export default {
// //
if (data.BusinessTradeRank && data.BusinessTradeRank.length > 0) { if (data.BusinessTradeRank && data.BusinessTradeRank.length > 0) {
let list = data.BusinessTradeRank.slice(0, 10) // 10 let list = data.BusinessTradeRank.slice(0, 5) // 10
list.forEach((item) => { list.forEach((item) => {
category.push(item.name) category.push(item.name)
seriesData.push(Number(item.value)) seriesData.push(Number(item.value))

View File

@ -8,7 +8,7 @@
<!-- 客群特征分析图表 --> <!-- 客群特征分析图表 -->
<view class="chart-container"> <view class="chart-container">
<!-- 图表加载效果 --> <!-- 图表加载效果 -->
<ChartLoading v-if="!hasChartData" text="数据加载中..." /> <ChartLoading v-if="isLoading" text="数据加载中..." />
<!-- 实际图表 --> <!-- 实际图表 -->
<QiunDataCharts v-else type="bubble" :opts="chartOpts" :chartData="chartData" :canvas2d="true" <QiunDataCharts v-else type="bubble" :opts="chartOpts" :chartData="chartData" :canvas2d="true"
:inScrollView="true" canvasId="customerGroupChart" :animation="false" :ontap="true" :ontouch="true" /> :inScrollView="true" canvasId="customerGroupChart" :animation="false" :ontap="true" :ontouch="true" />
@ -30,6 +30,7 @@ export default {
data() { data() {
return { return {
isLoading: false,
// //
rawData: { rawData: {
seriesData: [], seriesData: [],
@ -123,6 +124,17 @@ export default {
} }
}, },
watch: {
selectTime: {
handler(newVal, oldVal) {
if (newVal !== oldVal) {
this.handleGetCustomerGroupData()
}
},
immediate: false
}
},
onReady() { onReady() {
this.handleGetCustomerGroupData() this.handleGetCustomerGroupData()
}, },
@ -136,7 +148,9 @@ export default {
serverpartId: "", // ID serverpartId: "", // ID
} }
this.isLoading = true
const data = await this.getCustomerGroupRatio(req); const data = await this.getCustomerGroupRatio(req);
this.isLoading = false
// //
this.processChartData(data.Result_Data.List) this.processChartData(data.Result_Data.List)

View File

@ -6,7 +6,7 @@
<!-- 节假日营收汇总图表 --> <!-- 节假日营收汇总图表 -->
<view class="chart-container"> <view class="chart-container">
<!-- 图表加载效果 --> <!-- 图表加载效果 -->
<ChartLoading v-if="!hasChartData" text="数据加载中..." /> <ChartLoading v-if="isLoading" text="数据加载中..." />
<!-- 实际图表 --> <!-- 实际图表 -->
<QiunDataCharts v-else type="pie" :opts="chartOpts" :chartData="chartData" :canvas2d="true" <QiunDataCharts v-else type="pie" :opts="chartOpts" :chartData="chartData" :canvas2d="true"
:inScrollView="true" canvasId="festivalRevenueSumInfoChart" :animation="false" :ontap="true" :inScrollView="true" canvasId="festivalRevenueSumInfoChart" :animation="false" :ontap="true"
@ -30,6 +30,7 @@ export default {
data() { data() {
return { return {
isLoading: false,
// //
rawData: { rawData: {
seriesData: [] seriesData: []
@ -55,7 +56,7 @@ export default {
// //
chartOpts() { chartOpts() {
return { return {
padding: [15, 48, 15, 15], // padding padding: [15, 90, 15, 15], // padding
dataLabel: false, dataLabel: false,
legend: { legend: {
show: true, show: true,
@ -87,11 +88,13 @@ export default {
const req = { const req = {
ProvinceCode: '530000' ProvinceCode: '530000'
} }
this.isLoading = true
const data = await this.getHolidayRevenueRatio(req); const data = await this.getHolidayRevenueRatio(req);
let res = wrapTreeNode(data.Result_Data.List) let res = wrapTreeNode(data.Result_Data.List)
console.log('resdada', res); console.log('resdada', res);
this.isLoading = false
// let res = wrapTreeNode(data.Result_Data.List[1]) // let res = wrapTreeNode(data.Result_Data.List[1])
// //
this.processChartData([res[1]]) this.processChartData([res[1]])
@ -110,6 +113,8 @@ export default {
processChartData(data) { processChartData(data) {
let seriesData = [] let seriesData = []
console.log('fjsdkfjslkdafjlskd', data);
// 使 // 使
if (data && data.length > 0) { if (data && data.length > 0) {
@ -118,7 +123,7 @@ export default {
if (item.children && item.children.length > 0) { if (item.children && item.children.length > 0) {
item.children.forEach((subItem, subIndex) => { item.children.forEach((subItem, subIndex) => {
seriesData.push({ seriesData.push({
name: `${subItem.name} ${subItem.value}%`, name: `${subItem.name}`,
value: Number(subItem.value), value: Number(subItem.value),
}) })
}) })

View File

@ -8,7 +8,7 @@
<!-- 性别图表 --> <!-- 性别图表 -->
<view class="chart-container"> <view class="chart-container">
<!-- 图表加载效果 --> <!-- 图表加载效果 -->
<ChartLoading v-if="!hasChartData" text="数据加载中..." /> <ChartLoading v-if="isLoading" text="数据加载中..." />
<!-- 实际图表 --> <!-- 实际图表 -->
<QiunDataCharts v-else type="ring" :opts="chartOpts" :chartData="chartData" :canvas2d="true" <QiunDataCharts v-else type="ring" :opts="chartOpts" :chartData="chartData" :canvas2d="true"
:inScrollView="true" canvasId="genderCustomerGroupChart" :animation="false" :ontap="true" :inScrollView="true" canvasId="genderCustomerGroupChart" :animation="false" :ontap="true"
@ -31,6 +31,7 @@ export default {
data() { data() {
return { return {
isLoading: false,
// //
rawData: { rawData: {
seriesData: [], seriesData: [],
@ -102,6 +103,17 @@ export default {
} }
}, },
watch: {
selectTime: {
handler(newVal, oldVal) {
if (newVal !== oldVal) {
this.handleGetGenderData()
}
},
immediate: false
}
},
onReady() { onReady() {
this.handleGetGenderData() this.handleGetGenderData()
}, },
@ -114,8 +126,10 @@ export default {
provinceCode: '530000', provinceCode: '530000',
statisticsMonth: this.selectTime ? moment(moment(this.selectTime).subtract(1, 'M')).format('YYYYMM') : 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'),
} }
this.isLoading = true
const data = await this.getCustomerRatio(req); const data = await this.getCustomerRatio(req);
this.isLoading = false
// //
this.processChartData(data.Result_Data.List) this.processChartData(data.Result_Data.List)

View File

@ -8,7 +8,7 @@
<!-- 图表容器 --> <!-- 图表容器 -->
<view class="chart-container" :style="{ height: chartHeight }"> <view class="chart-container" :style="{ height: chartHeight }">
<!-- 图表加载效果 --> <!-- 图表加载效果 -->
<ChartLoading v-if="!hasChartData" text="数据加载中..." /> <ChartLoading v-if="isLoading" text="数据加载中..." />
<!-- 实际图表 --> <!-- 实际图表 -->
<QiunDataCharts v-else type="column" :opts="chartOpts" :chartData="barChartData" :canvas2d="true" <QiunDataCharts v-else type="column" :opts="chartOpts" :chartData="barChartData" :canvas2d="true"
:inScrollView="true" canvasId="hotProductListChart" :animation="false" :ontap="true" :ontouch="true" :inScrollView="true" canvasId="hotProductListChart" :animation="false" :ontap="true" :ontouch="true"
@ -30,6 +30,7 @@ export default {
}, },
data() { data() {
return { return {
isLoading: false,
// //
salesRankingData: [], salesRankingData: [],
productList: [] productList: []
@ -132,6 +133,7 @@ export default {
province_code: 5564, province_code: 5564,
rowNum: 5 rowNum: 5
} }
this.isLoading = true
const data = await request.$cloudUrlGet(req); const data = await request.$cloudUrlGet(req);
console.log('datadatadatadatadata', data); console.log('datadatadatadatadata', data);
let list = data.COMMODITYSALE_DESC let list = data.COMMODITYSALE_DESC
@ -146,6 +148,7 @@ export default {
} }
this.salesRankingData = res this.salesRankingData = res
this.productList = list this.productList = list
this.isLoading = false
}, },
// API // API

View File

@ -9,7 +9,7 @@
<view class="chart-card"> <view class="chart-card">
<view class="chart-container"> <view class="chart-container">
<!-- 图表加载效果 --> <!-- 图表加载效果 -->
<ChartLoading v-if="!hasChartData" text="数据加载中..." /> <ChartLoading v-if="isLoading" text="数据加载中..." />
<!-- 实际图表 --> <!-- 实际图表 -->
<QiunDataCharts v-else type="mix" :opts="chartOpts" :chartData="chartData" :canvas2d="true" <QiunDataCharts v-else type="mix" :opts="chartOpts" :chartData="chartData" :canvas2d="true"
:inScrollView="true" canvasId="mallOrderStatisticsChart" :animation="false" :ontap="true" :inScrollView="true" canvasId="mallOrderStatisticsChart" :animation="false" :ontap="true"
@ -33,6 +33,7 @@ export default {
data() { data() {
return { return {
isLoading: false,
// //
rawData: { rawData: {
category: [], category: [],
@ -77,13 +78,14 @@ export default {
// //
chartOpts() { chartOpts() {
return { return {
padding: [25, 15, 0, 15], // padding: [25, 5, 0, 5], //
dataLabel: false, dataLabel: false,
enableScroll: true, // enableScroll: true,
dataPointShape: true, dataPointShape: true,
xAxis: { xAxis: {
disableGrid: true, disableGrid: true,
itemCount: 6, // 6 itemCount: 12, // 6
fontSize: 10
}, },
yAxis: { yAxis: {
data: [ data: [
@ -125,6 +127,17 @@ export default {
} }
}, },
watch: {
selectTime: {
handler(newVal, oldVal) {
if (newVal !== oldVal) {
this.handleGetMallOrderData()
}
},
immediate: false
}
},
onReady() { onReady() {
this.handleGetMallOrderData() this.handleGetMallOrderData()
}, },
@ -132,7 +145,9 @@ export default {
methods: { methods: {
// //
async handleGetMallOrderData() { async handleGetMallOrderData() {
this.isLoading = true
await this.getMallOrderSummaryData() await this.getMallOrderSummaryData()
this.isLoading = false
}, },
// //
@ -142,7 +157,7 @@ export default {
ProvinceCode: '530000', ProvinceCode: '530000',
type: 'encryption', type: 'encryption',
StartMonth: this.selectTime ? moment(this.selectTime).startOf('y').format('YYYYMM') : moment().startOf('y').format('YYYYMM'), StartMonth: this.selectTime ? moment(this.selectTime).startOf('y').format('YYYYMM') : moment().startOf('y').format('YYYYMM'),
EndMonth: this.selectTime ? moment(this.selectTime).subtract(1, 'M').format('YYYYMM') : moment().subtract(1, 'M').format('YYYYMM'), EndMonth: this.selectTime ? moment(this.selectTime).format('YYYYMM') : moment().subtract(1, 'M').format('YYYYMM'),
} }

View File

@ -22,7 +22,7 @@
<view class="recent-data-top-item" style="left: 0;top: 0;"> <view class="recent-data-top-item" style="left: 0;top: 0;">
<view class="recent-data-top-value">{{ memberData.newMembersCount ? <view class="recent-data-top-value">{{ memberData.newMembersCount ?
memberData.newMembersCount.toLocaleString() : 0 memberData.newMembersCount.toLocaleString() : 0
}} }}
</view> </view>
<view class="recent-data-top-label">新增会员数</view> <view class="recent-data-top-label">新增会员数</view>
</view> </view>
@ -58,7 +58,7 @@
<view class="member-consumption-label">会员消费笔数/</view> <view class="member-consumption-label">会员消费笔数/</view>
<view class="member-consumption-progress"></view> <view class="member-consumption-progress"></view>
<view class="member-consumption-value">{{ memberData.consumptionCount ? memberData.consumptionCount : 0 <view class="member-consumption-value">{{ memberData.consumptionCount ? memberData.consumptionCount : 0
}}</view> }}</view>
</view> </view>
<view class="member-consumption-item"> <view class="member-consumption-item">
@ -154,6 +154,16 @@ export default {
default: "" default: ""
}, },
}, },
watch: {
selectTime: {
handler(newVal, oldVal) {
if (newVal !== oldVal) {
this.handleGetMemberMallData()
}
},
immediate: false
}
},
onReady() { onReady() {
this.handleGetMemberMallData() this.handleGetMemberMallData()
}, },

View File

@ -44,8 +44,8 @@
</view> </view>
<!-- 设备设施分布图 --> <!-- 设备设施分布图 -->
<view class="chart-title">设备设施</view>
<view class="chart-section"> <view class="chart-section">
<view class="chart-title">设备设施</view>
<view class="chart-container"> <view class="chart-container">
<!-- 图表加载效果 --> <!-- 图表加载效果 -->
<ChartLoading v-if="!hasFacilityData" text="数据加载中..." /> <ChartLoading v-if="!hasFacilityData" text="数据加载中..." />
@ -83,11 +83,11 @@
</view> </view>
<!-- 服务区类型分布饼图 --> <!-- 服务区类型分布饼图 -->
<view class="chart-title">服务区类型分布</view>
<view class="chart-section"> <view class="chart-section">
<view class="chart-title">服务区类型分布</view>
<view class="chart-container"> <view class="chart-container">
<!-- 图表加载效果 --> <!-- 图表加载效果 -->
<ChartLoading v-if="!hasPieData" text="数据加载中..." /> <ChartLoading v-if="isLoading" text="数据加载中..." />
<!-- 实际饼图 --> <!-- 实际饼图 -->
<QiunDataCharts v-else type="pie" :opts="areaTypePieOpts" :chartData="areaTypePieData" :canvas2d="true" <QiunDataCharts v-else type="pie" :opts="areaTypePieOpts" :chartData="areaTypePieData" :canvas2d="true"
:inScrollView="true" canvasId="areaTypePieChart" tooltipFormat="areaTypePieData" /> :inScrollView="true" canvasId="areaTypePieChart" tooltipFormat="areaTypePieData" />
@ -109,6 +109,7 @@ export default {
data() { data() {
return { return {
isLoading: false,
serviceData: { serviceData: {
ServerpartTotalCount: 0, // ServerpartTotalCount: 0, //
serviceAllTotal: 0, // serviceAllTotal: 0, //
@ -256,11 +257,13 @@ export default {
methods: { 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 { .chart-title {
font-size: 28rpx; font-size: 30rpx;
font-weight: 600; font-weight: 600;
color: #333; color: #333;
margin-bottom: 12rpx; margin-bottom: 12rpx;

View File

@ -8,7 +8,7 @@
<!-- 偏好类型图表 --> <!-- 偏好类型图表 -->
<view class="chart-container"> <view class="chart-container">
<!-- 图表加载效果 --> <!-- 图表加载效果 -->
<ChartLoading v-if="!hasChartData" text="数据加载中..." /> <ChartLoading v-if="isLoading" text="数据加载中..." />
<!-- 实际图表 --> <!-- 实际图表 -->
<QiunDataCharts v-else type="radar" :opts="chartOpts" :chartData="chartData" :canvas2d="true" <QiunDataCharts v-else type="radar" :opts="chartOpts" :chartData="chartData" :canvas2d="true"
:inScrollView="true" canvasId="preferenceTypeChart" :animation="false" :ontap="true" :ontouch="true" :inScrollView="true" canvasId="preferenceTypeChart" :animation="false" :ontap="true" :ontouch="true"
@ -31,6 +31,7 @@ export default {
data() { data() {
return { return {
isLoading: false,
// //
rawData: { rawData: {
category: [], category: [],
@ -109,6 +110,17 @@ export default {
} }
}, },
watch: {
selectTime: {
handler(newVal, oldVal) {
if (newVal !== oldVal) {
this.handleGetPreferenceTypeData()
}
},
immediate: false
}
},
onReady() { onReady() {
this.handleGetPreferenceTypeData() this.handleGetPreferenceTypeData()
}, },
@ -125,7 +137,9 @@ export default {
fromRedis: true fromRedis: true
} }
this.isLoading = true
const data = await this.getCustomerSaleRatio(req); const data = await this.getCustomerSaleRatio(req);
this.isLoading = false
// //
this.processChartData(data.Result_Data) this.processChartData(data.Result_Data)

View File

@ -8,7 +8,7 @@
<!-- 区域营收占比图表 --> <!-- 区域营收占比图表 -->
<view class="chart-container"> <view class="chart-container">
<!-- 图表加载效果 --> <!-- 图表加载效果 -->
<ChartLoading v-if="!hasChartData" text="数据加载中..." /> <ChartLoading v-if="isLoading" text="数据加载中..." />
<!-- 实际图表 --> <!-- 实际图表 -->
<QiunDataCharts v-else type="pie" :opts="chartOpts" :chartData="chartData" :canvas2d="true" <QiunDataCharts v-else type="pie" :opts="chartOpts" :chartData="chartData" :canvas2d="true"
:inScrollView="true" canvasId="regionalRevenueChart" :animation="false" :ontap="true" :ontouch="true" :inScrollView="true" canvasId="regionalRevenueChart" :animation="false" :ontap="true" :ontouch="true"
@ -37,6 +37,7 @@ export default {
}, },
data() { data() {
return { return {
isLoading: false,
// ID // ID
allServiceId: '1143,1144,1186,1188,1189,1190,1191,1192,1193,979,999,1023,1029,1030,1031,1033,1037,1041,1078,1087,1095,1137,1141,1147,1157,1159,1164,1165,1170,1174,981,985,987,994,1007,1009,1010,1012,1016,971,996,1002,1017,1018,1022,1027,1032,1073,1076,1099,1118,1122,1140,1142,1150,1171,970,969,978,1001,1005,1015,1050,1051,1052,1053,1064,1066,1096,1097,1101,1103,1104,1105,1106,1109,1112,1114,1115,1116,1117,991,995,1039,1080,1094,1100,1107,1123,1127,1133,1154,1155,1161,1163,1179,1180,1019,1021,1048,1049,1056,1059,1062,1063,1069,1093,1067,1228,1008,1070,1072,1166,1113,1148,1153,986,1086,1075,1182,1068,1226,1218,1088,1090,1058,1044,1084,1077,1089,1081,1091,1083,1162,1036,1092,988,993,1111,1158,1194,1202,1198,1207,1216,1221,1203,1206,1209,1215,1227,1201,1205,1208,1214,1217,1229,1212,1065,1085,1055,1071,982,1168,1185,1110,977,1169,973,974,1011,1151,1121,1046,1045,1172,1146,976,1187,1156,1181,1136,1138,1211,983,1195,1131,1176,1167,1223,997,1252,1225,1043,1129,992,1149,975,1382,989,1047,1197,1025,1199,1183,1222,1178,1003,1013,1224,1139,1125,1173,1135,1038,1177,1060,1175,1184,1035,1026,1028,1079,1119,1120,1489', allServiceId: '1143,1144,1186,1188,1189,1190,1191,1192,1193,979,999,1023,1029,1030,1031,1033,1037,1041,1078,1087,1095,1137,1141,1147,1157,1159,1164,1165,1170,1174,981,985,987,994,1007,1009,1010,1012,1016,971,996,1002,1017,1018,1022,1027,1032,1073,1076,1099,1118,1122,1140,1142,1150,1171,970,969,978,1001,1005,1015,1050,1051,1052,1053,1064,1066,1096,1097,1101,1103,1104,1105,1106,1109,1112,1114,1115,1116,1117,991,995,1039,1080,1094,1100,1107,1123,1127,1133,1154,1155,1161,1163,1179,1180,1019,1021,1048,1049,1056,1059,1062,1063,1069,1093,1067,1228,1008,1070,1072,1166,1113,1148,1153,986,1086,1075,1182,1068,1226,1218,1088,1090,1058,1044,1084,1077,1089,1081,1091,1083,1162,1036,1092,988,993,1111,1158,1194,1202,1198,1207,1216,1221,1203,1206,1209,1215,1227,1201,1205,1208,1214,1217,1229,1212,1065,1085,1055,1071,982,1168,1185,1110,977,1169,973,974,1011,1151,1121,1046,1045,1172,1146,976,1187,1156,1181,1136,1138,1211,983,1195,1131,1176,1167,1223,997,1252,1225,1043,1129,992,1149,975,1382,989,1047,1197,1025,1199,1183,1222,1178,1003,1013,1224,1139,1125,1173,1135,1038,1177,1060,1175,1184,1035,1026,1028,1079,1119,1120,1489',
@ -90,6 +91,17 @@ export default {
} }
}, },
watch: {
selectTime: {
handler(newVal, oldVal) {
if (newVal !== oldVal) {
this.handleGetRegionalRevenueData()
}
},
immediate: false
}
},
onReady() { onReady() {
this.handleGetRegionalRevenueData() this.handleGetRegionalRevenueData()
}, },
@ -97,6 +109,7 @@ export default {
methods: { methods: {
// //
async handleGetRegionalRevenueData() { async handleGetRegionalRevenueData() {
this.isLoading = true
let list = uni.getStorageSync('allServiceList'); let list = uni.getStorageSync('allServiceList');
if (list && list.length > 0) { if (list && list.length > 0) {
@ -131,6 +144,7 @@ export default {
const data = await this.getRevenueReport(req); const data = await this.getRevenueReport(req);
this.isLoading = false
// //
this.processChartData(wrapTreeNode(data.Result_Data.List)) this.processChartData(wrapTreeNode(data.Result_Data.List))
}, },

View File

@ -37,11 +37,14 @@
</view> </view>
<!-- 供应商列表 --> <!-- 供应商列表 -->
<view class="supplier-list-content"> <view class="supplier-list-content" v-if="isLoading">
<!-- 供应商列表加载效果 --> <!-- 供应商列表加载效果 -->
<ChartLoading v-if="!hasSupplierListData" text="数据加载中..." /> <ChartLoading text="数据加载中..." />
</view>
<view class="supplier-list-content" v-if="!isLoading && supplierList && supplierList.length > 0">
<!-- 供应商列表内容 --> <!-- 供应商列表内容 -->
<view v-else> <view>
<view class="supplier-list-item" v-for="(item, index) in supplierList" :key="index"> <view class="supplier-list-item" v-for="(item, index) in supplierList" :key="index">
<view class="supplier-list-right"> <view class="supplier-list-right">
<view class="supplier-list-namebox"> <view class="supplier-list-namebox">
@ -57,6 +60,8 @@
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</template> </template>
@ -72,6 +77,7 @@ export default {
data() { data() {
return { return {
isLoading: false,
// //
supplierList: [], supplierList: [],
@ -102,11 +108,13 @@ export default {
methods: { methods: {
// //
async handleGetData() { async handleGetData() {
this.isLoading = true
// //
await this.getSupplierListData() await this.getSupplierListData()
// //
await this.getSupplierTypeData() await this.getSupplierTypeData()
this.isLoading = false
}, },
// //

View File

@ -18,14 +18,14 @@
<view class="benefits-right"> <view class="benefits-right">
<text class="benefits-value">{{ allRealData.distributeAmount ? <text class="benefits-value">{{ allRealData.distributeAmount ?
allRealData.distributeAmount.toLocaleString() : '0' allRealData.distributeAmount.toLocaleString() : '0'
}}</text> }}</text>
<text class="benefits-unit"></text> <text class="benefits-unit"></text>
</view> </view>
</view> </view>
<view class="chart-container"> <view class="chart-container">
<!-- 图表加载效果 --> <!-- 图表加载效果 -->
<ChartLoading v-if="!hasChartData" text="数据加载中..." /> <ChartLoading v-if="isLoading" text="数据加载中..." />
<!-- 实际图表 --> <!-- 实际图表 -->
<QiunDataCharts v-else type="pie" :opts="chartOpts" :chartData="chartData" :canvas2d="true" <QiunDataCharts v-else type="pie" :opts="chartOpts" :chartData="chartData" :canvas2d="true"
:inScrollView="true" canvasId="coreCategoryChart" :animation="false" :ontap="true" :ontouch="true" :inScrollView="true" canvasId="coreCategoryChart" :animation="false" :ontap="true" :ontouch="true"
@ -49,6 +49,7 @@ export default {
data() { data() {
return { return {
isLoading: false,
// //
allRealData: {}, allRealData: {},
// //
@ -104,6 +105,17 @@ export default {
} }
}, },
watch: {
selectTime: {
handler(newVal, oldVal) {
if (newVal !== oldVal) {
this.handleGetData()
}
},
immediate: false
}
},
onReady() { onReady() {
this.handleGetData() this.handleGetData()
}, },
@ -111,7 +123,9 @@ export default {
methods: { methods: {
// //
async handleGetData() { async handleGetData() {
this.isLoading = true
await this.getWelFareSummaryData() await this.getWelFareSummaryData()
this.isLoading = false
}, },
// //

View File

@ -182,7 +182,6 @@ export default {
font-size: 26rpx; font-size: 26rpx;
font-weight: 600; font-weight: 600;
color: #333; color: #333;
text-align: center;
} }
.header-item.service { .header-item.service {

View File

@ -1,14 +1,15 @@
<template> <template>
<view class="trend-traffic-flow"> <view class="trend-traffic-flow">
<view class="chart-header">
<text class="chart-title">断面流量</text>
</view>
<!-- 断面流量趋势图 --> <!-- 断面流量趋势图 -->
<view class="chart-card"> <view class="chart-card">
<view class="chart-header">
<text class="chart-title">断面流量</text>
</view>
<view class="chart-content"> <view class="chart-content">
<view class="bar-chart-container"> <view class="bar-chart-container">
<!-- 图表加载效果 --> <!-- 图表加载效果 -->
<ChartLoading v-if="!hasChartData" text="数据加载中..." /> <ChartLoading v-if="isLoading" text="数据加载中..." />
<!-- 实际图表 --> <!-- 实际图表 -->
<QiunDataCharts v-else type="column" :opts="chartOpts" :chartData="chartData" :animation="false" <QiunDataCharts v-else type="column" :opts="chartOpts" :chartData="chartData" :animation="false"
:canvas2d="true" :inScrollView="true" :ontap="true" :ontouch="true" canvasId="trendTrafficFlowChart" :canvas2d="true" :inScrollView="true" :ontap="true" :ontouch="true" canvasId="trendTrafficFlowChart"
@ -33,6 +34,7 @@ export default {
data() { data() {
return { return {
isLoading: false,
currentYear: moment().format('YYYY'), currentYear: moment().format('YYYY'),
previousYear: moment().subtract(1, 'y').format('YYYY'), previousYear: moment().subtract(1, 'y').format('YYYY'),
@ -84,12 +86,13 @@ export default {
// //
chartOpts() { chartOpts() {
return { return {
padding: [15, 15, 0, 5], padding: [15, 0, 0, 5],
dataLabel: false, // dataLabel: false, //
enableScroll: true, // // enableScroll: true, //
xAxis: { xAxis: {
disableGrid: true, disableGrid: true,
itemCount: 6, // 6 itemCount: 12, // 6
fontSize: 10
}, },
yAxis: { yAxis: {
showTitle: true, showTitle: true,
@ -105,9 +108,7 @@ export default {
extra: { extra: {
column: { column: {
type: 'group', type: 'group',
width: 12, // width: 6, //
activeBgColor: '#000000',
activeBgOpacity: 0.08,
seriesGap: 0, // seriesGap: 0, //
barBorderRadius: [3, 3, 0, 0] barBorderRadius: [3, 3, 0, 0]
} }
@ -115,7 +116,16 @@ export default {
} }
} }
}, },
watch: {
selectTime: {
handler(newVal, oldVal) {
if (newVal !== oldVal) {
this.handleGetTrafficFlowData()
}
},
immediate: false
}
},
onReady() { onReady() {
// //
this.handleGetTrafficFlowData() this.handleGetTrafficFlowData()
@ -125,16 +135,19 @@ export default {
// //
async handleGetTrafficFlowData() { async handleGetTrafficFlowData() {
try { try {
this.isLoading = true
// API // API
const [currentData, previousData] = await Promise.all([ const [currentData, previousData] = await Promise.all([
this.getCurrentYearData(), this.getCurrentYearData(),
this.getPreviousYearData() this.getPreviousYearData()
]); ]);
this.isLoading = false
// //
this.processTrafficData(currentData.Result_Data.List || [], previousData.Result_Data.List || []); this.processTrafficData(currentData.Result_Data.List || [], previousData.Result_Data.List || []);
} catch (error) { } catch (error) {
console.error('获取断面流量数据失败:', error); console.error('获取断面流量数据失败:', error);
this.isLoading = false
} }
}, },
@ -402,6 +415,24 @@ export default {
} }
} }
.chart-header {
display: flex;
flex-direction: column;
margin-bottom: 20rpx;
.chart-title {
font-size: 30rpx;
font-weight: 600;
color: @text-primary;
}
.chart-subtitle {
font-size: 24rpx;
color: @text-light;
margin-top: 4rpx;
}
}
.chart-card { .chart-card {
background: @bg-white; background: @bg-white;
border-radius: @border-radius; border-radius: @border-radius;
@ -409,23 +440,7 @@ export default {
box-shadow: @shadow; box-shadow: @shadow;
margin-bottom: 24rpx; margin-bottom: 24rpx;
.chart-header {
display: flex;
flex-direction: column;
margin-bottom: 20rpx;
.chart-title {
font-size: 28rpx;
font-weight: 600;
color: @text-primary;
}
.chart-subtitle {
font-size: 24rpx;
color: @text-light;
margin-top: 4rpx;
}
}
.chart-content { .chart-content {
.bar-chart-container { .bar-chart-container {

View File

@ -8,7 +8,7 @@
<!-- 经营效益图表 --> <!-- 经营效益图表 -->
<view class="chart-container"> <view class="chart-container">
<!-- 图表加载效果 --> <!-- 图表加载效果 -->
<ChartLoading v-if="!hasChartData" text="数据加载中..." /> <ChartLoading v-if="isLoading" text="数据加载中..." />
<!-- 实际图表 --> <!-- 实际图表 -->
<QiunDataCharts v-else type="column" :opts="chartOpts" :chartData="chartData" :canvas2d="true" <QiunDataCharts v-else type="column" :opts="chartOpts" :chartData="chartData" :canvas2d="true"
:inScrollView="true" canvasId="vehicleModelStayChart" :animation="false" :ontap="true" :ontouch="true" :inScrollView="true" canvasId="vehicleModelStayChart" :animation="false" :ontap="true" :ontouch="true"
@ -31,6 +31,7 @@ export default {
data() { data() {
return { return {
isLoading: false,
// //
rawData: { rawData: {
category: [], category: [],
@ -107,6 +108,17 @@ export default {
} }
}, },
watch: {
selectTime: {
handler(newVal, oldVal) {
if (newVal !== oldVal) {
this.handleGetVehicleModelStayData()
}
},
immediate: false
}
},
onReady() { onReady() {
this.handleGetVehicleModelStayData() this.handleGetVehicleModelStayData()
}, },
@ -114,6 +126,7 @@ export default {
methods: { methods: {
// //
async handleGetVehicleModelStayData() { async handleGetVehicleModelStayData() {
this.isLoading = true
// //
const currentReq = { const currentReq = {
StatisticsDate: this.selectTime ? moment(this.selectTime).format('YYYY') : moment().format('YYYY'), StatisticsDate: this.selectTime ? moment(this.selectTime).format('YYYY') : moment().format('YYYY'),
@ -134,6 +147,7 @@ export default {
this.getRevenueTrend(lastYearReq) this.getRevenueTrend(lastYearReq)
]); ]);
this.isLoading = false
// //
this.processChartData(currentData.Result_Data.List, lastYearData.Result_Data.List) this.processChartData(currentData.Result_Data.List, lastYearData.Result_Data.List)
}, },

View File

@ -6,28 +6,34 @@
</view> </view>
<!-- 入区车流图表 --> <!-- 入区车流图表 -->
<view class="chart-container"> <view class="chart-card">
<!-- 图表加载效果 --> <view class="chart-content">
<ChartLoading v-if="!hasVehicleChartData" text="数据加载中..." /> <view class="bar-chart-container">
<!-- 实际图表 --> <!-- 图表加载效果 -->
<QiunDataCharts v-else type="column" :opts="vehicleChartOpts" :chartData="vehicleChartData" :canvas2d="true" <ChartLoading v-if="isLoading" text="数据加载中..." />
:inScrollView="true" canvasId="vehicleChart" :animation="false" :ontap="true" :ontouch="true" <!-- 实际图表 -->
tooltipFormat="vehicleChartData" /> <QiunDataCharts v-else type="column" :opts="vehicleChartOpts" :chartData="vehicleChartData"
:canvas2d="true" :inScrollView="true" canvasId="vehicleChart" :animation="false" :ontap="true"
:ontouch="true" tooltipFormat="vehicleChartData" />
</view>
</view>
</view> </view>
<!-- 对客营收标题 --> <!-- 对客营收标题 -->
<view class="section-header"> <view class="section-header">
<text class="section-title">对客营收</text> <text class="section-title">对客营收</text>
</view> </view>
<view class="chart-card">
<!-- 对客营收图表 --> <view class="chart-content">
<view class="chart-container"> <view class="bar-chart-container">
<!-- 图表加载效果 --> <!-- 图表加载效果 -->
<ChartLoading v-if="!hasRevenueChartData" text="数据加载中..." /> <ChartLoading v-if="isLoading" text="数据加载中..." />
<!-- 实际图表 --> <!-- 实际图表 -->
<QiunDataCharts v-else type="line" :opts="revenueChartOpts" :chartData="revenueChartData" :canvas2d="true" <QiunDataCharts v-else type="line" :opts="revenueChartOpts" :chartData="revenueChartData"
:inScrollView="true" canvasId="revenueChart" :animation="false" :ontap="true" :ontouch="true" :canvas2d="true" :inScrollView="true" canvasId="revenueChart" :animation="false" :ontap="true"
tooltipFormat="revenueChartDataVehicles" /> :ontouch="true" tooltipFormat="revenueChartDataVehicles" />
</view>
</view>
</view> </view>
</view> </view>
</template> </template>
@ -46,6 +52,7 @@ export default {
data() { data() {
return { return {
isLoading: false,
// //
chartData: { chartData: {
category: [], category: [],
@ -103,12 +110,13 @@ export default {
// //
vehicleChartOpts() { vehicleChartOpts() {
return { return {
padding: [15, 15, 0, 5], padding: [15, 0, 0, 10],
dataLabel: false, dataLabel: false,
enableScroll: true, // // enableScroll: true, //
xAxis: { xAxis: {
disableGrid: true, disableGrid: true,
itemCount: 6, // 6 itemCount: 12, // 6
fontSize: 10
}, },
yAxis: { yAxis: {
showTitle: true, showTitle: true,
@ -117,15 +125,15 @@ export default {
title: '入区车流(万辆)', title: '入区车流(万辆)',
titleFontSize: 12, titleFontSize: 12,
titleOffsetY: -5, titleOffsetY: -5,
titleOffsetX: 0, titleOffsetX: 10,
splitNumber: 5
}] }]
}, },
legend: {},
extra: { extra: {
column: { column: {
type: 'group', type: 'group',
width: 12, // width: 6, //
activeBgColor: '#000000',
activeBgOpacity: 0.08,
seriesGap: 0, // seriesGap: 0, //
barBorderRadius: [3, 3, 0, 0] barBorderRadius: [3, 3, 0, 0]
} }
@ -152,14 +160,15 @@ export default {
// //
revenueChartOpts() { revenueChartOpts() {
return { return {
padding: [15, 10, 0, 15], padding: [15, 10, 0, 10],
legend: {}, legend: {},
dataLabel: false, dataLabel: false,
dataPointShape: true, dataPointShape: true,
enableScroll: true, // // enableScroll: true, //
xAxis: { xAxis: {
disableGrid: true, disableGrid: true,
itemCount: 6, // 6 itemCount: 12, // 6
fontSize: 10
}, },
yAxis: { yAxis: {
gridType: 'dash', gridType: 'dash',
@ -170,7 +179,8 @@ export default {
title: '对客营收(万元)', title: '对客营收(万元)',
titleFontSize: 12, titleFontSize: 12,
titleOffsetY: -5, titleOffsetY: -5,
titleOffsetX: 0 titleOffsetX: 10,
splitNumber: 5
}], }],
splitNumber: 5 splitNumber: 5
}, },
@ -178,20 +188,25 @@ export default {
line: { line: {
type: 'straight', // 线线 type: 'straight', // 线线
width: 2, width: 2,
seriesGap: 0, //
activeType: 'hollow' 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() { onReady() {
this.handleGetSectionFlowCount() this.handleGetSectionFlowCount()
}, },
@ -199,10 +214,11 @@ export default {
methods: { methods: {
// //
async handleGetSectionFlowCount() { async handleGetSectionFlowCount() {
this.isLoading = true
// //
const currentReq = { const currentReq = {
StartDate: this.selectTime ? moment(this.selectTime).startOf('y').format('YYYY-MM-DD') : 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: 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 ProvinceCode: 530000
} }
@ -218,6 +234,7 @@ export default {
this.getMonthAnalysis(currentReq), this.getMonthAnalysis(currentReq),
this.getMonthAnalysis(lastYearReq) this.getMonthAnalysis(lastYearReq)
]); ]);
this.isLoading = false
// //
this.processChartData(currentData.Result_Data.List, lastYearData.Result_Data.List) this.processChartData(currentData.Result_Data.List, lastYearData.Result_Data.List)
@ -243,7 +260,7 @@ export default {
// //
if (currentData && currentData.length > 0) { if (currentData && currentData.length > 0) {
currentData.forEach((item) => { 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}`) category.push(`${month}`)
seriesDataCar.push(Number((item.Vehicle_Count / 10000).toFixed(2))) seriesDataCar.push(Number((item.Vehicle_Count / 10000).toFixed(2)))
realDataCar.push(item.Vehicle_Count) realDataCar.push(item.Vehicle_Count)
@ -351,5 +368,22 @@ export default {
box-sizing: border-box; box-sizing: border-box;
height: 400rpx; 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;
}
}
}
} }
</style> </style>

View File

@ -43,7 +43,7 @@
<!-- 时间选择 --> <!-- 时间选择 -->
<view class="timeBox"> <view class="timeBox">
<picker mode="date" @change="bindDateChange" :value="selectTime" fields="month"> <picker mode="date" @change="bindDateChange" :value="selectTime" fields="month">
统计时间{{ selectTime }} 统计时间{{ selectTime }}
</picker> </picker>
</view> </view>
<!-- 实时运营监控中心 --> <!-- 实时运营监控中心 -->
@ -223,10 +223,10 @@ export default {
return { return {
activeTab: 0, activeTab: 0,
tabList: [ tabList: [
{ name: '实时运营监控中心', key: 'business' }, { name: '运营中心', key: 'business' },
{ name: '客群画像与消费行为分析', key: 'customerProfile' }, { name: '客群画像', key: 'customerProfile' },
{ name: '多维度经营数据分析', key: 'businessRevenue' }, { name: '经营分析', key: 'businessRevenue' },
{ name: '商户电商生态全景', key: 'mallOperation' }, { name: '电商生态', key: 'mallOperation' },
], ],
// Tab // Tab
navData: { navData: {
@ -241,33 +241,33 @@ export default {
{ id: 'customer-age-group', name: '年龄画像' }, { id: 'customer-age-group', name: '年龄画像' },
{ id: 'gender-customer-group', name: '性别画像' }, { id: 'gender-customer-group', name: '性别画像' },
{ id: 'preference-type', name: '偏好类型' }, { id: 'preference-type', name: '偏好类型' },
{ id: 'customer-group', name: '客群特征分析' }, { id: 'customer-group', name: '客群特征' },
{ id: 'customer-consumption-preferences', name: '客群消费偏好' }, { id: 'customer-consumption-preferences', name: '消费偏好' },
{ id: 'consumption-conversion', name: '消费转化率对比图' }, { id: 'consumption-conversion', name: '消费转化率' },
{ id: 'consumption-level', name: '消费水平' }, { id: 'consumption-level', name: '消费水平' },
{ id: 'consumption-period', name: '消费时段分析' }, { id: 'consumption-period', name: '消费时段' },
{ id: 'brand-consumption-level', name: '品牌消费水平' }, { id: 'brand-consumption-level', name: '品牌消费' },
], ],
businessRevenue: [ businessRevenue: [
{ id: 'business-case', name: '营收特征' }, { id: 'business-case', name: '营收特征' },
{ id: 'regional-revenue', name: '区域营收占比' }, { id: 'regional-revenue', name: '区域营收' },
{ id: 'business-structure', name: '业态结构占比' }, { id: 'business-structure', name: '业态结构' },
{ id: 'festival-revenue-sum-info', name: '节假日营收' }, { id: 'festival-revenue-sum-info', name: '节假日营收' },
], ],
mallOperation: [ mallOperation: [
{ id: 'member-mall', name: '会员商城' }, { id: 'member-mall', name: '会员商城' },
{ id: 'hot-product-list', name: '热门商品榜单' }, { id: 'hot-product-list', name: '商品榜单' },
{ id: 'brand-detail', name: '商户类别' }, { id: 'brand-detail', name: '商户类别' },
{ id: 'supplier-list-box', name: '供应商列表' }, { id: 'supplier-list-box', name: '供应商列表' },
{ id: 'mall-order-statistics', name: '商城订单统计' }, { id: 'mall-order-statistics', name: '商城订单统计' },
{ id: 'this-month-benefits', name: '本月福利金发送额度' }, { id: 'this-month-benefits', name: '福利金额度' },
{ id: 'analysis-of-member', name: '会员消费数据分析' }, { id: 'analysis-of-member', name: '会员消费' },
] ]
}, },
// //
activeNavItem: '', activeNavItem: '',
// //
isNavCollapsed: true, isNavCollapsed: false,
// //
sessionData: {}, sessionData: {},
pageScrollTop: 0, pageScrollTop: 0,