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

View File

@ -8,7 +8,7 @@
<!-- 品牌消费水平图表 -->
<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"
:inScrollView="true" canvasId="brandConsumptionLevelChart" :animation="false" :ontap="true"
@ -31,6 +31,7 @@ export default {
data() {
return {
isLoading: false,
//
rawData: {
category: [],
@ -106,6 +107,17 @@ export default {
}
},
watch: {
selectTime: {
handler(newVal, oldVal) {
if (newVal !== oldVal) {
this.handleGetBrandConsumptionLevelData()
}
},
immediate: false
}
},
onReady() {
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'),
// ServerpartId: ''
}
this.isLoading = true
const data = await this.getBusinessBrandLevel(req);
this.isLoading = false
//
this.processChartData(data.Result_Data)
},

View File

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

View File

@ -21,7 +21,7 @@
<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"
:inScrollView="true" canvasId="businessCaseChart" :animation="false" :ontap="true" :ontouch="true"
@ -46,6 +46,7 @@ export default {
data() {
return {
isLoading: false,
// Tab
tabList: [
{ label: "营收金额", value: 1 },
@ -90,10 +91,11 @@ export default {
return {
padding: [15, 15, 0, 15], // paddingpicker
dataLabel: false,
enableScroll: true,
// enableScroll: true,
xAxis: {
disableGrid: true,
itemCount: 4,
itemCount: 12,
fontSize: 10
},
yAxis: {
showTitle: true,
@ -121,7 +123,7 @@ export default {
extra: {
column: {
type: 'group',
width: 12,
width: 4,
activeBgColor: '#000000',
activeBgOpacity: 0.08,
seriesGap: 0,
@ -133,6 +135,17 @@ export default {
}
},
watch: {
selectTime: {
handler(newVal, oldVal) {
if (newVal !== oldVal) {
this.handleGetBusinessCaseData()
}
},
immediate: false
}
},
onReady() {
this.handleGetBusinessCaseData()
},
@ -146,8 +159,10 @@ export default {
ServerpartId: "", // ID
}
this.isLoading = true
const data = await this.getRevenueCompare(req);
this.isLoading = false
//
this.processChartData(data.Result_Data)
},

View File

@ -8,7 +8,7 @@
<!-- 业态结构占比图表 -->
<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"
:inScrollView="true" canvasId="businessStructureChart" :animation="false" :ontap="true" :ontouch="true"
@ -36,6 +36,7 @@ export default {
},
data() {
return {
isLoading: false,
//
rawData: {
seriesData: [],
@ -88,6 +89,17 @@ export default {
}
},
watch: {
selectTime: {
handler(newVal, oldVal) {
if (newVal !== oldVal) {
this.handleGetBusinessStructureData()
}
},
immediate: false
}
},
onReady() {
this.handleGetBusinessStructureData()
},
@ -102,7 +114,9 @@ export default {
ServerpartId: "" // ID
}
this.isLoading = true
const data = await this.getBusinessTradeRevenue(req);
this.isLoading = false
//
this.processChartData(data.Result_Data)

View File

@ -8,7 +8,7 @@
<!-- 消费转化对比图图表 -->
<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"
:inScrollView="true" canvasId="consumptionConversionChart" :animation="false" :ontap="true"
@ -31,6 +31,7 @@ export default {
data() {
return {
isLoading: false,
//
rawData: {
category: [],
@ -128,6 +129,17 @@ export default {
}
},
watch: {
selectTime: {
handler(newVal, oldVal) {
if (newVal !== oldVal) {
this.handleGetConsumptionConversionData()
}
},
immediate: false
}
},
onReady() {
this.handleGetConsumptionConversionData()
},
@ -141,7 +153,9 @@ export default {
Serverpart_ID: "" // ID
}
this.isLoading = true
const data = await this.getTransactionConvert(req);
this.isLoading = false
//
this.processChartData(data.Result_Data)

View File

@ -9,7 +9,7 @@
<!-- 消费水平图表 -->
<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"
:inScrollView="true" canvasId="consumptionLevelChart" :animation="false" :ontap="true" :ontouch="true"
@ -32,6 +32,7 @@ export default {
data() {
return {
isLoading: false,
//
rawData: {
category: [],
@ -108,6 +109,17 @@ export default {
}
},
watch: {
selectTime: {
handler(newVal, oldVal) {
if (newVal !== oldVal) {
this.handleGetConsumptionLevelData()
}
},
immediate: false
}
},
onReady() {
this.handleGetConsumptionLevelData()
},
@ -121,7 +133,9 @@ export default {
// ServerpartId: ''
}
this.isLoading = true
const data = await this.getBusinessTradeLevel(req);
this.isLoading = false
//
this.processChartData(data.Result_Data)

View File

@ -8,7 +8,7 @@
<!-- 消费时段分析图表 -->
<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"
:inScrollView="true" canvasId="consumptionPeriodChart" :animation="false" :ontap="true" :ontouch="true"
@ -31,6 +31,7 @@ export default {
data() {
return {
isLoading: false,
//
rawData: {
category: [],
@ -116,6 +117,17 @@ export default {
}
},
watch: {
selectTime: {
handler(newVal, oldVal) {
if (newVal !== oldVal) {
this.handleGetConsumptionPeriodData()
}
},
immediate: false
}
},
onReady() {
this.handleGetConsumptionPeriodData()
},
@ -130,7 +142,9 @@ export default {
TimeSpan: 1
}
this.isLoading = true
const data = await this.getTransactionTimeAnalysis(req);
this.isLoading = false
//
this.processChartData(data.Result_Data.CommonScatterList)
@ -178,6 +192,9 @@ export default {
// 1. 448121620
sortedHours.forEach(hour => {
if (hour % 4 === 0) {
if (hour === 24) {
return
}
selectedHours.push(hour)
}
})

View File

@ -8,7 +8,7 @@
<!-- 年龄图表 -->
<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"
:inScrollView="true" canvasId="customerAgeGroupChart" :animation="false" :ontap="true" :ontouch="true"
@ -31,6 +31,7 @@ export default {
data() {
return {
isLoading: false,
//
rawData: {
category: [],
@ -104,6 +105,17 @@ export default {
}
},
watch: {
selectTime: {
handler(newVal, oldVal) {
if (newVal !== oldVal) {
this.handleGetCustomerAgeData()
}
},
immediate: false
}
},
onReady() {
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'),
}
this.isLoading = true
const data = await this.getCustomerAgeRatio(req);
this.isLoading = false
//
this.processChartData(data.Result_Data.List)

View File

@ -8,7 +8,7 @@
<!-- 客群消费偏好图表 -->
<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"
:inScrollView="true" canvasId="customerConsumptionPreferencesChart" :animation="false" :ontap="true"
@ -31,6 +31,7 @@ export default {
data() {
return {
isLoading: false,
//
rawData: {
category: [],
@ -70,10 +71,11 @@ export default {
return {
padding: [15, 15, 0, 15], // paddingX
dataLabel: false,
enableScroll: true,
// enableScroll: true,
xAxis: {
disableGrid: true,
itemCount: 4, //
itemCount: 5, //
fontSize: 10
},
yAxis: {
showTitle: true,
@ -102,7 +104,6 @@ export default {
width: 8, //
activeBgColor: '#000000',
activeBgOpacity: 0.08,
seriesGap: 20, //
barBorderRadius: [4, 4, 0, 0]
}
}
@ -110,6 +111,17 @@ export default {
}
},
watch: {
selectTime: {
handler(newVal, oldVal) {
if (newVal !== oldVal) {
this.handleGetCustomerConsumptionPreferencesData()
}
},
immediate: false
}
},
onReady() {
this.handleGetCustomerConsumptionPreferencesData()
},
@ -123,7 +135,9 @@ export default {
ServerpartId: "" // ID
}
this.isLoading = true
const data = await this.getBusinessTradeRevenue(req);
this.isLoading = false
//
this.processChartData(data.Result_Data)
@ -146,7 +160,7 @@ export default {
//
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) => {
category.push(item.name)
seriesData.push(Number(item.value))

View File

@ -8,7 +8,7 @@
<!-- 客群特征分析图表 -->
<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"
:inScrollView="true" canvasId="customerGroupChart" :animation="false" :ontap="true" :ontouch="true" />
@ -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)

View File

@ -6,7 +6,7 @@
<!-- 节假日营收汇总图表 -->
<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"
:inScrollView="true" canvasId="festivalRevenueSumInfoChart" :animation="false" :ontap="true"
@ -30,6 +30,7 @@ export default {
data() {
return {
isLoading: false,
//
rawData: {
seriesData: []
@ -55,7 +56,7 @@ export default {
//
chartOpts() {
return {
padding: [15, 48, 15, 15], // padding
padding: [15, 90, 15, 15], // padding
dataLabel: false,
legend: {
show: true,
@ -87,11 +88,13 @@ export default {
const req = {
ProvinceCode: '530000'
}
this.isLoading = true
const data = await this.getHolidayRevenueRatio(req);
let res = wrapTreeNode(data.Result_Data.List)
console.log('resdada', res);
this.isLoading = false
// let res = wrapTreeNode(data.Result_Data.List[1])
//
this.processChartData([res[1]])
@ -110,6 +113,8 @@ export default {
processChartData(data) {
let seriesData = []
console.log('fjsdkfjslkdafjlskd', data);
// 使
if (data && data.length > 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),
})
})

View File

@ -8,7 +8,7 @@
<!-- 性别图表 -->
<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"
:inScrollView="true" canvasId="genderCustomerGroupChart" :animation="false" :ontap="true"
@ -31,6 +31,7 @@ export default {
data() {
return {
isLoading: false,
//
rawData: {
seriesData: [],
@ -102,6 +103,17 @@ export default {
}
},
watch: {
selectTime: {
handler(newVal, oldVal) {
if (newVal !== oldVal) {
this.handleGetGenderData()
}
},
immediate: false
}
},
onReady() {
this.handleGetGenderData()
},
@ -114,8 +126,10 @@ export default {
provinceCode: '530000',
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);
this.isLoading = false
//
this.processChartData(data.Result_Data.List)

View File

@ -8,7 +8,7 @@
<!-- 图表容器 -->
<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"
:inScrollView="true" canvasId="hotProductListChart" :animation="false" :ontap="true" :ontouch="true"
@ -30,6 +30,7 @@ export default {
},
data() {
return {
isLoading: false,
//
salesRankingData: [],
productList: []
@ -132,6 +133,7 @@ export default {
province_code: 5564,
rowNum: 5
}
this.isLoading = true
const data = await request.$cloudUrlGet(req);
console.log('datadatadatadatadata', data);
let list = data.COMMODITYSALE_DESC
@ -146,6 +148,7 @@ export default {
}
this.salesRankingData = res
this.productList = list
this.isLoading = false
},
// API

View File

@ -9,7 +9,7 @@
<view class="chart-card">
<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"
:inScrollView="true" canvasId="mallOrderStatisticsChart" :animation="false" :ontap="true"
@ -33,6 +33,7 @@ export default {
data() {
return {
isLoading: false,
//
rawData: {
category: [],
@ -77,13 +78,14 @@ export default {
//
chartOpts() {
return {
padding: [25, 15, 0, 15], //
padding: [25, 5, 0, 5], //
dataLabel: false,
enableScroll: true,
// enableScroll: true,
dataPointShape: true,
xAxis: {
disableGrid: true,
itemCount: 6, // 6
itemCount: 12, // 6
fontSize: 10
},
yAxis: {
data: [
@ -125,6 +127,17 @@ export default {
}
},
watch: {
selectTime: {
handler(newVal, oldVal) {
if (newVal !== oldVal) {
this.handleGetMallOrderData()
}
},
immediate: false
}
},
onReady() {
this.handleGetMallOrderData()
},
@ -132,7 +145,9 @@ export default {
methods: {
//
async handleGetMallOrderData() {
this.isLoading = true
await this.getMallOrderSummaryData()
this.isLoading = false
},
//
@ -142,7 +157,7 @@ export default {
ProvinceCode: '530000',
type: 'encryption',
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-value">{{ memberData.newMembersCount ?
memberData.newMembersCount.toLocaleString() : 0
}}
}}
</view>
<view class="recent-data-top-label">新增会员数</view>
</view>
@ -58,7 +58,7 @@
<view class="member-consumption-label">会员消费笔数/</view>
<view class="member-consumption-progress"></view>
<view class="member-consumption-value">{{ memberData.consumptionCount ? memberData.consumptionCount : 0
}}</view>
}}</view>
</view>
<view class="member-consumption-item">
@ -154,6 +154,16 @@ export default {
default: ""
},
},
watch: {
selectTime: {
handler(newVal, oldVal) {
if (newVal !== oldVal) {
this.handleGetMemberMallData()
}
},
immediate: false
}
},
onReady() {
this.handleGetMemberMallData()
},

View File

@ -44,8 +44,8 @@
</view>
<!-- 设备设施分布图 -->
<view class="chart-title">设备设施</view>
<view class="chart-section">
<view class="chart-title">设备设施</view>
<view class="chart-container">
<!-- 图表加载效果 -->
<ChartLoading v-if="!hasFacilityData" text="数据加载中..." />
@ -83,11 +83,11 @@
</view>
<!-- 服务区类型分布饼图 -->
<view class="chart-title">服务区类型分布</view>
<view class="chart-section">
<view class="chart-title">服务区类型分布</view>
<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"
:inScrollView="true" canvasId="areaTypePieChart" tooltipFormat="areaTypePieData" />
@ -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;

View File

@ -8,7 +8,7 @@
<!-- 偏好类型图表 -->
<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"
:inScrollView="true" canvasId="preferenceTypeChart" :animation="false" :ontap="true" :ontouch="true"
@ -31,6 +31,7 @@ export default {
data() {
return {
isLoading: false,
//
rawData: {
category: [],
@ -109,6 +110,17 @@ export default {
}
},
watch: {
selectTime: {
handler(newVal, oldVal) {
if (newVal !== oldVal) {
this.handleGetPreferenceTypeData()
}
},
immediate: false
}
},
onReady() {
this.handleGetPreferenceTypeData()
},
@ -125,7 +137,9 @@ export default {
fromRedis: true
}
this.isLoading = true
const data = await this.getCustomerSaleRatio(req);
this.isLoading = false
//
this.processChartData(data.Result_Data)

View File

@ -8,7 +8,7 @@
<!-- 区域营收占比图表 -->
<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"
:inScrollView="true" canvasId="regionalRevenueChart" :animation="false" :ontap="true" :ontouch="true"
@ -37,6 +37,7 @@ export default {
},
data() {
return {
isLoading: false,
// 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',
@ -90,6 +91,17 @@ export default {
}
},
watch: {
selectTime: {
handler(newVal, oldVal) {
if (newVal !== oldVal) {
this.handleGetRegionalRevenueData()
}
},
immediate: false
}
},
onReady() {
this.handleGetRegionalRevenueData()
},
@ -97,6 +109,7 @@ export default {
methods: {
//
async handleGetRegionalRevenueData() {
this.isLoading = true
let list = uni.getStorageSync('allServiceList');
if (list && list.length > 0) {
@ -131,6 +144,7 @@ export default {
const data = await this.getRevenueReport(req);
this.isLoading = false
//
this.processChartData(wrapTreeNode(data.Result_Data.List))
},

View File

@ -37,11 +37,14 @@
</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-right">
<view class="supplier-list-namebox">
@ -57,6 +60,8 @@
</view>
</view>
</view>
</view>
</template>
@ -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
},
//

View File

@ -18,14 +18,14 @@
<view class="benefits-right">
<text class="benefits-value">{{ allRealData.distributeAmount ?
allRealData.distributeAmount.toLocaleString() : '0'
}}</text>
}}</text>
<text class="benefits-unit"></text>
</view>
</view>
<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"
:inScrollView="true" canvasId="coreCategoryChart" :animation="false" :ontap="true" :ontouch="true"
@ -49,6 +49,7 @@ export default {
data() {
return {
isLoading: false,
//
allRealData: {},
//
@ -104,6 +105,17 @@ export default {
}
},
watch: {
selectTime: {
handler(newVal, oldVal) {
if (newVal !== oldVal) {
this.handleGetData()
}
},
immediate: false
}
},
onReady() {
this.handleGetData()
},
@ -111,7 +123,9 @@ export default {
methods: {
//
async handleGetData() {
this.isLoading = true
await this.getWelFareSummaryData()
this.isLoading = false
},
//

View File

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

View File

@ -1,14 +1,15 @@
<template>
<view class="trend-traffic-flow">
<view class="chart-header">
<text class="chart-title">断面流量</text>
</view>
<!-- 断面流量趋势图 -->
<view class="chart-card">
<view class="chart-header">
<text class="chart-title">断面流量</text>
</view>
<view class="chart-content">
<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"
:canvas2d="true" :inScrollView="true" :ontap="true" :ontouch="true" canvasId="trendTrafficFlowChart"
@ -33,6 +34,7 @@ export default {
data() {
return {
isLoading: false,
currentYear: moment().format('YYYY'),
previousYear: moment().subtract(1, 'y').format('YYYY'),
@ -84,12 +86,13 @@ export default {
//
chartOpts() {
return {
padding: [15, 15, 0, 5],
padding: [15, 0, 0, 5],
dataLabel: false, //
enableScroll: true, //
// enableScroll: true, //
xAxis: {
disableGrid: true,
itemCount: 6, // 6
itemCount: 12, // 6
fontSize: 10
},
yAxis: {
showTitle: true,
@ -105,9 +108,7 @@ export default {
extra: {
column: {
type: 'group',
width: 12, //
activeBgColor: '#000000',
activeBgOpacity: 0.08,
width: 6, //
seriesGap: 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() {
//
this.handleGetTrafficFlowData()
@ -125,16 +135,19 @@ export default {
//
async handleGetTrafficFlowData() {
try {
this.isLoading = true
// API
const [currentData, previousData] = await Promise.all([
this.getCurrentYearData(),
this.getPreviousYearData()
]);
this.isLoading = false
//
this.processTrafficData(currentData.Result_Data.List || [], previousData.Result_Data.List || []);
} catch (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 {
background: @bg-white;
border-radius: @border-radius;
@ -409,23 +440,7 @@ export default {
box-shadow: @shadow;
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 {
.bar-chart-container {

View File

@ -8,7 +8,7 @@
<!-- 经营效益图表 -->
<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"
:inScrollView="true" canvasId="vehicleModelStayChart" :animation="false" :ontap="true" :ontouch="true"
@ -31,6 +31,7 @@ export default {
data() {
return {
isLoading: false,
//
rawData: {
category: [],
@ -107,6 +108,17 @@ export default {
}
},
watch: {
selectTime: {
handler(newVal, oldVal) {
if (newVal !== oldVal) {
this.handleGetVehicleModelStayData()
}
},
immediate: false
}
},
onReady() {
this.handleGetVehicleModelStayData()
},
@ -114,6 +126,7 @@ export default {
methods: {
//
async handleGetVehicleModelStayData() {
this.isLoading = true
//
const currentReq = {
StatisticsDate: this.selectTime ? moment(this.selectTime).format('YYYY') : moment().format('YYYY'),
@ -134,6 +147,7 @@ export default {
this.getRevenueTrend(lastYearReq)
]);
this.isLoading = false
//
this.processChartData(currentData.Result_Data.List, lastYearData.Result_Data.List)
},

View File

@ -6,28 +6,34 @@
</view>
<!-- 入区车流图表 -->
<view class="chart-container">
<!-- 图表加载效果 -->
<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 class="chart-card">
<view class="chart-content">
<view class="bar-chart-container">
<!-- 图表加载效果 -->
<ChartLoading v-if="isLoading" 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>
</view>
</view>
<!-- 对客营收标题 -->
<view class="section-header">
<text class="section-title">对客营收</text>
</view>
<!-- 对客营收图表 -->
<view class="chart-container">
<!-- 图表加载效果 -->
<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 class="chart-card">
<view class="chart-content">
<view class="bar-chart-container">
<!-- 图表加载效果 -->
<ChartLoading v-if="isLoading" 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>
</view>
</view>
</view>
</template>
@ -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;
}
}
}
}
</style>

View File

@ -43,7 +43,7 @@
<!-- 时间选择 -->
<view class="timeBox">
<picker mode="date" @change="bindDateChange" :value="selectTime" fields="month">
统计时间{{ selectTime }}
统计时间{{ selectTime }}
</picker>
</view>
<!-- 实时运营监控中心 -->
@ -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,