update
This commit is contained in:
parent
6e2bd12f8c
commit
d832cfa05d
@ -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
|
||||
},
|
||||
|
||||
// 获取会员分析数据
|
||||
|
||||
@ -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)
|
||||
},
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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], // 增加顶部padding为picker留出空间
|
||||
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)
|
||||
},
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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. 优先选择能被4整除的时间点(4时、8时、12时、16时、20时)
|
||||
sortedHours.forEach(hour => {
|
||||
if (hour % 4 === 0) {
|
||||
if (hour === 24) {
|
||||
return
|
||||
}
|
||||
selectedHours.push(hour)
|
||||
}
|
||||
})
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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], // 增加底部padding为X轴文字留空间
|
||||
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))
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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),
|
||||
})
|
||||
})
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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请求获取热门商品榜单数据
|
||||
|
||||
@ -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'),
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -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()
|
||||
},
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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))
|
||||
},
|
||||
|
||||
@ -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
|
||||
},
|
||||
|
||||
// 获取供应商列表数据
|
||||
|
||||
@ -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
|
||||
},
|
||||
|
||||
// 获取福利金汇总数据
|
||||
|
||||
@ -182,7 +182,6 @@ export default {
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header-item.service {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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)
|
||||
},
|
||||
|
||||
@ -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>
|
||||
@ -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,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user