485 lines
12 KiB
Vue
485 lines
12 KiB
Vue
<template>
|
||
<view class="trend-traffic-flow">
|
||
|
||
<view class="chart-header">
|
||
<text class="chart-title">断面流量</text>
|
||
</view>
|
||
<!-- 断面流量趋势图 -->
|
||
<view class="chart-card">
|
||
<view class="chart-content">
|
||
<view class="bar-chart-container">
|
||
<!-- 图表加载效果 -->
|
||
<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"
|
||
tooltipFormat="TrendTrafficFlow" />
|
||
</view>
|
||
</view>
|
||
</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,
|
||
currentYear: moment().format('YYYY'),
|
||
previousYear: moment().subtract(1, 'y').format('YYYY'),
|
||
|
||
// 原始数据
|
||
currentYearData: [],
|
||
previousYearData: [],
|
||
|
||
// 处理后的月度数据
|
||
monthlyData: [],
|
||
|
||
// 统计数据
|
||
currentYearTotal: 0,
|
||
previousYearTotal: 0,
|
||
averageGrowthRate: '0.00'
|
||
}
|
||
},
|
||
|
||
props: {
|
||
selectTime: {
|
||
type: String,
|
||
default: ""
|
||
},
|
||
},
|
||
computed: {
|
||
// 判断图表数据是否已加载
|
||
hasChartData() {
|
||
// 检查是否有真实的流量数据（至少有一个月的数据大于0）
|
||
return this.monthlyData && this.monthlyData.length > 0 &&
|
||
this.monthlyData.some(item => item.currentYearValue > 0 || item.previousYearValue > 0);
|
||
},
|
||
|
||
// 图表数据
|
||
chartData() {
|
||
return {
|
||
categories: this.monthlyData.map(item => item.month),
|
||
series: [
|
||
{
|
||
name: `${this.currentYear}年断面流量`,
|
||
data: this.monthlyData.map(item => item.currentYearValue)
|
||
},
|
||
{
|
||
name: `${this.previousYear}年断面流量`,
|
||
data: this.monthlyData.map(item => item.previousYearValue)
|
||
}
|
||
]
|
||
}
|
||
},
|
||
|
||
// 图表配置
|
||
chartOpts() {
|
||
return {
|
||
padding: [15, 0, 0, 5],
|
||
dataLabel: false, // 关闭数据标签显示
|
||
// enableScroll: true, // 开启滚动
|
||
xAxis: {
|
||
disableGrid: true,
|
||
itemCount: 12, // 默认显示6个月的数据
|
||
fontSize: 10
|
||
},
|
||
yAxis: {
|
||
showTitle: true,
|
||
data: [{
|
||
min: 0,
|
||
title: '断面流量(万辆)',
|
||
titleFontSize: 12,
|
||
titleOffsetY: -5,
|
||
titleOffsetX: -5,
|
||
}]
|
||
},
|
||
legend: {},
|
||
extra: {
|
||
column: {
|
||
type: 'group',
|
||
width: 6, // 柱子宽度调小一点
|
||
seriesGap: 0, // 同一组别的柱子紧贴在一起
|
||
barBorderRadius: [3, 3, 0, 0]
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
watch: {
|
||
selectTime: {
|
||
handler(newVal, oldVal) {
|
||
if (newVal !== oldVal) {
|
||
this.handleGetTrafficFlowData()
|
||
}
|
||
},
|
||
immediate: false
|
||
}
|
||
},
|
||
onReady() {
|
||
// 获取数据
|
||
this.handleGetTrafficFlowData()
|
||
},
|
||
|
||
methods: {
|
||
// 获取断面流量数据
|
||
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
|
||
}
|
||
},
|
||
|
||
// 获取当年数据
|
||
async getCurrentYearData() {
|
||
const currentReq = {
|
||
ProvinceCode: '530000',
|
||
StatisticsDate: this.selectTime ? moment(this.selectTime).endOf('M').format('YYYY-MM-DD') : moment().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).endOf('M').format('YYYY-MM-DD') : moment().endOf('M').format('YYYY-MM-DD'),
|
||
}
|
||
|
||
return await request.$webGet(
|
||
"CommercialApi/BigData/GetMonthAnalysis",
|
||
currentReq
|
||
);
|
||
},
|
||
|
||
// 获取去年数据
|
||
async getPreviousYearData() {
|
||
const previousReq = {
|
||
ProvinceCode: '530000',
|
||
StatisticsDate: this.selectTime ? moment(this.selectTime).subtract(1, 'y').endOf('M').format('YYYY-MM-DD') : moment().subtract(1, 'y').endOf('M').format('YYYY-MM-DD'),
|
||
StartDate: this.selectTime ? moment(this.selectTime).subtract(1, 'y').startOf('y').format('YYYY-MM-DD') : moment().subtract(1, 'y').startOf('y').format('YYYY-MM-DD'),
|
||
EndDate: this.selectTime ? moment(this.selectTime).subtract(1, 'y').endOf('M').format('YYYY-MM-DD') : moment().subtract(1, 'y').endOf('M').format('YYYY-MM-DD'),
|
||
}
|
||
|
||
return await request.$webGet(
|
||
"CommercialApi/BigData/GetMonthAnalysis",
|
||
previousReq
|
||
);
|
||
},
|
||
|
||
// 处理流量数据
|
||
processTrafficData(currentData, previousData) {
|
||
const monthlyData = [];
|
||
let currentYearTotal = 0;
|
||
let previousYearTotal = 0;
|
||
let totalGrowthRate = 0;
|
||
let validMonthCount = 0;
|
||
|
||
// 处理当年数据
|
||
const currentDataMap = {};
|
||
if (currentData && currentData.length > 0) {
|
||
currentData.forEach(item => {
|
||
const month = `${item.Statistics_Month}月`;
|
||
const valueInWan = Number((item.SectionFlow_Count / 10000).toFixed(2));
|
||
currentDataMap[month] = {
|
||
value: valueInWan,
|
||
realValue: item.SectionFlow_Count
|
||
};
|
||
currentYearTotal += item.SectionFlow_Count;
|
||
});
|
||
}
|
||
|
||
// 处理去年数据并生成月度对比
|
||
const previousDataMap = {};
|
||
if (previousData && previousData.length > 0) {
|
||
previousData.forEach(item => {
|
||
const month = `${item.Statistics_Month}月`;
|
||
const valueInWan = Number((item.SectionFlow_Count / 10000).toFixed(2));
|
||
previousDataMap[month] = {
|
||
value: valueInWan,
|
||
realValue: item.SectionFlow_Count
|
||
};
|
||
previousYearTotal += item.SectionFlow_Count;
|
||
});
|
||
}
|
||
|
||
// 生成12个月的对比数据
|
||
for (let i = 1; i <= 12; i++) {
|
||
const month = `${i}月`;
|
||
const currentMonthData = currentDataMap[month] || { value: 0, realValue: 0 };
|
||
const previousMonthData = previousDataMap[month] || { value: 0, realValue: 0 };
|
||
|
||
let growthRate = '0.00';
|
||
if (previousMonthData.realValue > 0 && currentMonthData.realValue > 0) {
|
||
growthRate = (((currentMonthData.realValue - previousMonthData.realValue) / previousMonthData.realValue) * 100).toFixed(2);
|
||
totalGrowthRate += parseFloat(growthRate);
|
||
validMonthCount++;
|
||
}
|
||
|
||
monthlyData.push({
|
||
month: month,
|
||
currentYearValue: currentMonthData.value,
|
||
previousYearValue: previousMonthData.value,
|
||
growthRate: growthRate
|
||
});
|
||
}
|
||
|
||
// 计算平均增长率
|
||
const averageGrowth = validMonthCount > 0 ? (totalGrowthRate / validMonthCount).toFixed(2) : '0.00';
|
||
|
||
// 更新数据
|
||
this.monthlyData = monthlyData;
|
||
this.currentYearTotal = currentYearTotal;
|
||
this.previousYearTotal = previousYearTotal;
|
||
this.averageGrowthRate = averageGrowth;
|
||
},
|
||
|
||
// 获取增长率样式类
|
||
getGrowthClass(growthRate) {
|
||
const rate = parseFloat(growthRate);
|
||
if (rate > 0) {
|
||
return 'growth-positive';
|
||
} else if (rate < 0) {
|
||
return 'growth-negative';
|
||
} else {
|
||
return 'growth-neutral';
|
||
}
|
||
},
|
||
|
||
// 格式化数字
|
||
formatNumber(num) {
|
||
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
||
}
|
||
}
|
||
}
|
||
</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);
|
||
|
||
.trend-traffic-flow {
|
||
margin-top: 24rpx;
|
||
|
||
.report-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 32rpx;
|
||
padding: 0 8rpx;
|
||
|
||
.report-title {
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
color: @text-primary;
|
||
}
|
||
|
||
.report-period {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.period-label {
|
||
font-size: 24rpx;
|
||
color: @text-secondary;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.period-value {
|
||
font-size: 24rpx;
|
||
color: @primary-color;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
|
||
.metrics-row {
|
||
display: flex;
|
||
gap: 24rpx;
|
||
margin-bottom: 32rpx;
|
||
|
||
.metric-card {
|
||
flex: 1;
|
||
background: @bg-white;
|
||
border-radius: @border-radius;
|
||
padding: 32rpx 24rpx;
|
||
box-shadow: @shadow;
|
||
text-align: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 4rpx;
|
||
background: linear-gradient(90deg, @primary-color, @secondary-color);
|
||
}
|
||
|
||
.metric-icon {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
margin: 0 auto 16rpx;
|
||
border-radius: 50%;
|
||
position: relative;
|
||
|
||
&.current {
|
||
background: linear-gradient(135deg, #46B8F3, #1A4AF6);
|
||
|
||
&::after {
|
||
content: '📊';
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
&.previous {
|
||
background: linear-gradient(135deg, #3CD495, #2BAE66);
|
||
|
||
&::after {
|
||
content: '📈';
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
&.growth {
|
||
background: linear-gradient(135deg, #52C41A, #73D13D);
|
||
|
||
&::after {
|
||
content: '📊';
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.metric-title {
|
||
font-size: 24rpx;
|
||
color: @text-secondary;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.metric-value-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 4rpx;
|
||
}
|
||
|
||
.metric-value {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: @text-primary;
|
||
font-family: 'DINAlternate-Bold', sans-serif;
|
||
line-height: 1;
|
||
}
|
||
|
||
.metric-unit {
|
||
font-size: 24rpx;
|
||
color: @text-light;
|
||
line-height: 1;
|
||
}
|
||
}
|
||
}
|
||
|
||
.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;
|
||
padding: 24rpx;
|
||
box-shadow: @shadow;
|
||
margin-bottom: 24rpx;
|
||
|
||
|
||
|
||
.chart-content {
|
||
.bar-chart-container {
|
||
width: 100%;
|
||
height: 400rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.chart-legend {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 32rpx;
|
||
margin-top: 16rpx;
|
||
|
||
.legend-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
|
||
.legend-dot {
|
||
width: 12rpx;
|
||
height: 12rpx;
|
||
border-radius: 2rpx;
|
||
|
||
&.current-year {
|
||
background: linear-gradient(135deg, #46B8F3, #1A4AF6);
|
||
}
|
||
|
||
&.previous-year {
|
||
background: #3CD495;
|
||
}
|
||
}
|
||
|
||
.legend-text {
|
||
font-size: 22rpx;
|
||
color: @text-secondary;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |