296 lines
9.3 KiB
Vue
296 lines
9.3 KiB
Vue
<template>
|
||
<view class="consumption-conversion">
|
||
<!-- 消费转化对比图标题 -->
|
||
<view class="section-header">
|
||
<text class="section-title">消费转化对比图</text>
|
||
</view>
|
||
|
||
<!-- 消费转化对比图图表 -->
|
||
<view class="chart-container">
|
||
<!-- 图表加载效果 -->
|
||
<ChartLoading v-if="isLoading" text="数据加载中..." />
|
||
<!-- 实际图表 -->
|
||
<QiunDataCharts v-else type="line" :opts="chartOpts" :chartData="chartData" :canvas2d="true"
|
||
:inScrollView="true" canvasId="consumptionConversionChart" :animation="false" :ontap="true"
|
||
:ontouch="true" tooltipFormat="ConsumptionConversion" />
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import QiunDataCharts from './qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
|
||
import ChartLoading from './ChartLoading.vue'
|
||
import request from "@/util/index.js";
|
||
import moment from 'moment'
|
||
|
||
export default {
|
||
components: {
|
||
QiunDataCharts,
|
||
ChartLoading
|
||
},
|
||
|
||
data() {
|
||
return {
|
||
isLoading: false,
|
||
// 图表原始数据
|
||
rawData: {
|
||
category: [],
|
||
carResList: [],
|
||
carRealResList: [],
|
||
orderResList: [],
|
||
orderRealResList: []
|
||
}
|
||
}
|
||
},
|
||
|
||
computed: {
|
||
// 检查是否有图表数据
|
||
hasChartData() {
|
||
return this.rawData.category.length > 0 &&
|
||
this.rawData.carResList.length > 0 &&
|
||
this.rawData.orderResList.length > 0
|
||
},
|
||
|
||
// 图表数据
|
||
chartData() {
|
||
return {
|
||
categories: this.rawData.category,
|
||
series: [
|
||
{
|
||
name: '车流量',
|
||
data: this.rawData.carResList
|
||
},
|
||
{
|
||
name: '客单量',
|
||
data: this.rawData.orderResList
|
||
}
|
||
]
|
||
}
|
||
},
|
||
|
||
// 图表配置
|
||
chartOpts() {
|
||
return {
|
||
padding: [15, 15, 0, 15],
|
||
dataLabel: false,
|
||
enableScroll: false, // 关闭滚动
|
||
dataPointShape: true,
|
||
xAxis: {
|
||
disableGrid: true,
|
||
itemCount: this.rawData.category.length || 7, // 动态显示时间点数量
|
||
},
|
||
yAxis: {
|
||
showTitle: true,
|
||
data: [
|
||
{
|
||
title: '车流量(辆)',
|
||
titleFontSize: 12,
|
||
titleOffsetY: -5,
|
||
titleOffsetX: 0,
|
||
position: 'left'
|
||
},
|
||
{
|
||
title: '客单量(笔)',
|
||
titleFontSize: 12,
|
||
titleOffsetY: -5,
|
||
titleOffsetX: 0,
|
||
position: 'right'
|
||
}
|
||
]
|
||
},
|
||
legend: {
|
||
show: true,
|
||
position: 'bottom',
|
||
float: 'center',
|
||
backgroundColor: 'rgba(0,0,0,0)',
|
||
borderColor: 'rgba(0,0,0,0)',
|
||
fontSize: 12,
|
||
fontColor: '#333333',
|
||
margin: 0,
|
||
padding: 0,
|
||
itemGap: 10,
|
||
textAlign: 'left'
|
||
},
|
||
extra: {
|
||
line: {
|
||
type: 'curve', // 使用平滑曲线
|
||
width: 2,
|
||
activeType: 'hollow'
|
||
},
|
||
tooltip: {
|
||
showBox: true,
|
||
bgColor: '#000000',
|
||
bgOpacity: 0.7,
|
||
borderColor: '#333333',
|
||
borderWidth: 1
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
|
||
watch: {
|
||
selectTime: {
|
||
handler(newVal, oldVal) {
|
||
if (newVal !== oldVal) {
|
||
this.handleGetConsumptionConversionData()
|
||
}
|
||
},
|
||
immediate: false
|
||
}
|
||
},
|
||
|
||
onReady() {
|
||
this.handleGetConsumptionConversionData()
|
||
},
|
||
|
||
methods: {
|
||
// 获取消费转化对比数据
|
||
async handleGetConsumptionConversionData() {
|
||
const req = {
|
||
Province_Code: '530000',
|
||
Statistics_Date: this.selectTime ? moment(this.selectTime).subtract(1, 'd').subtract(1, 'M').format('YYYY-MM-DD') : moment().subtract(1, 'd').subtract(1, 'M').format('YYYY-MM-DD'),
|
||
Serverpart_ID: "" // 暂时为空，如果需要传入服务区ID可以在这里添加
|
||
}
|
||
|
||
this.isLoading = true
|
||
const data = await this.getTransactionConvert(req);
|
||
this.isLoading = false
|
||
|
||
// 处理数据
|
||
this.processChartData(data.Result_Data)
|
||
},
|
||
|
||
// 发起API请求获取消费转化对比分析数据
|
||
async getTransactionConvert(params) {
|
||
const data = await request.$webGet(
|
||
"CommercialApi/Revenue/GetTransactionConvert",
|
||
params
|
||
);
|
||
return data || {}
|
||
},
|
||
|
||
// 处理图表数据
|
||
processChartData(data) {
|
||
let category = []
|
||
let carResList = []
|
||
let carRealResList = []
|
||
let orderResList = []
|
||
let orderRealResList = []
|
||
|
||
// 创建时间点映射，用于快速查找
|
||
let carDataMap = {}
|
||
let orderDataMap = {}
|
||
let availableHours = new Set()
|
||
|
||
// 处理车流数据，创建映射
|
||
if (data.BayonetList && data.BayonetList.data && data.BayonetList.data.length > 0) {
|
||
let carList = data.BayonetList.data
|
||
carList.forEach((item) => {
|
||
const hour = parseInt(item[0])
|
||
carDataMap[hour] = Number(item[1])
|
||
availableHours.add(hour)
|
||
})
|
||
}
|
||
|
||
// 处理客单量数据，创建映射
|
||
if (data.TransactionList && data.TransactionList.data && data.TransactionList.data.length > 0) {
|
||
let orderList = data.TransactionList.data
|
||
orderList.forEach((item) => {
|
||
const hour = parseInt(item[0])
|
||
orderDataMap[hour] = Number(item[1])
|
||
availableHours.add(hour)
|
||
})
|
||
}
|
||
|
||
// 将Set转换为数组并排序
|
||
let sortedHours = Array.from(availableHours).sort((a, b) => a - b)
|
||
|
||
// 选择要显示的时间点
|
||
let selectedHours = []
|
||
|
||
// 1. 优先选择能被4整除的时间点（4时、8时、12时、16时、20时）
|
||
sortedHours.forEach(hour => {
|
||
if (hour % 4 === 0) {
|
||
selectedHours.push(hour)
|
||
}
|
||
})
|
||
|
||
// 2. 检查并补充0时和23时（如果存在的话）
|
||
if (availableHours.has(0) && !selectedHours.includes(0)) {
|
||
selectedHours.unshift(0) // 0时放在最前面
|
||
}
|
||
if (availableHours.has(23) && !selectedHours.includes(23)) {
|
||
selectedHours.push(23) // 23时放在最后面
|
||
}
|
||
|
||
// 3. 如果没有找到任何时间点，则使用默认的7个关键时间点
|
||
if (selectedHours.length === 0) {
|
||
selectedHours = [0, 4, 8, 12, 16, 20, 23]
|
||
}
|
||
|
||
// 按选定的时间点生成数据
|
||
selectedHours.forEach(hour => {
|
||
category.push(`${hour}时`)
|
||
carResList.push(carDataMap[hour] || 0)
|
||
carRealResList.push(carDataMap[hour] || 0)
|
||
orderResList.push(orderDataMap[hour] || 0)
|
||
orderRealResList.push(orderDataMap[hour] || 0)
|
||
})
|
||
|
||
// 更新图表数据
|
||
this.rawData = {
|
||
category: category,
|
||
carResList: carResList,
|
||
carRealResList: carRealResList,
|
||
orderResList: orderResList,
|
||
orderRealResList: orderRealResList
|
||
}
|
||
|
||
},
|
||
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
@primary-color: #46B8F3;
|
||
@secondary-color: #3CD495;
|
||
@danger-color: #FF5E5E;
|
||
@success-color: #52C41A;
|
||
@text-primary: #333;
|
||
@text-secondary: #666;
|
||
@text-light: #999;
|
||
@bg-white: #ffffff;
|
||
@border-radius: 16rpx;
|
||
@shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||
|
||
.consumption-conversion {
|
||
margin-top: 24rpx;
|
||
|
||
.section-header {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
padding: 0 8rpx;
|
||
|
||
.section-title {
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
color: @text-primary;
|
||
}
|
||
}
|
||
|
||
.chart-container {
|
||
background: @bg-white;
|
||
border-radius: @border-radius;
|
||
padding: 24rpx;
|
||
box-shadow: @shadow;
|
||
margin-bottom: 24rpx;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
height: 400rpx;
|
||
}
|
||
}
|
||
</style> |