513 lines
12 KiB
Vue
513 lines
12 KiB
Vue
<template>
|
|
<view class="trend-traffic-flow">
|
|
<!-- 断面流量趋势图 -->
|
|
<view class="chart-card">
|
|
<view class="chart-header">
|
|
<text class="chart-title">断面流量</text>
|
|
</view>
|
|
<view class="chart-content">
|
|
<view class="bar-chart-container">
|
|
<QiunDataCharts 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 request from "@/util/index.js";
|
|
import moment from 'moment'
|
|
|
|
export default {
|
|
components: {
|
|
QiunDataCharts
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
currentYear: moment().format('YYYY'),
|
|
previousYear: moment().subtract(1, 'y').format('YYYY'),
|
|
|
|
// 原始数据
|
|
currentYearData: [],
|
|
previousYearData: [],
|
|
|
|
// 处理后的月度数据
|
|
monthlyData: [],
|
|
|
|
// 统计数据
|
|
currentYearTotal: 0,
|
|
previousYearTotal: 0,
|
|
averageGrowthRate: '0.00'
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
// 图表数据
|
|
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, 15, 0, 5],
|
|
dataLabel: false, // 关闭数据标签显示
|
|
enableScroll: true, // 开启滚动
|
|
xAxis: {
|
|
disableGrid: true,
|
|
scrollShow: true, // 显示滚动条
|
|
scrollAlign: 'left', // 滚动条对齐方式
|
|
itemCount: 6, // 默认显示6个月的数据
|
|
scrollColor: '#46B8F3', // 滚动条颜色
|
|
scrollWidth: 4, // 滚动条宽度
|
|
scrollHeight: 8 // 滚动条高度
|
|
},
|
|
yAxis: {
|
|
data: [{
|
|
min: 0
|
|
}]
|
|
},
|
|
legend: {},
|
|
extra: {
|
|
column: {
|
|
type: 'group',
|
|
width: 12, // 柱子宽度调小一点
|
|
activeBgColor: '#000000',
|
|
activeBgOpacity: 0.08,
|
|
seriesGap: 0, // 同一组别的柱子紧贴在一起
|
|
barBorderRadius: [3, 3, 0, 0]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
onReady() {
|
|
// 获取数据
|
|
this.handleGetTrafficFlowData()
|
|
},
|
|
|
|
methods: {
|
|
// 获取断面流量数据
|
|
async handleGetTrafficFlowData() {
|
|
try {
|
|
// 并行调用两个API
|
|
const [currentData, previousData] = await Promise.all([
|
|
this.getCurrentYearData(),
|
|
this.getPreviousYearData()
|
|
]);
|
|
|
|
// 处理数据
|
|
this.processTrafficData(currentData.Result_Data.List || [], previousData.Result_Data.List || []);
|
|
} catch (error) {
|
|
console.error('获取断面流量数据失败:', error);
|
|
}
|
|
},
|
|
|
|
// 获取当年数据
|
|
async getCurrentYearData() {
|
|
const currentReq = {
|
|
ProvinceCode: '530000',
|
|
StatisticsDate: moment().format('YYYY-MM-DD'),
|
|
StartDate: moment().startOf('y').format('YYYY-MM-DD'),
|
|
EndDate: moment().endOf('M').format('YYYY-MM-DD'),
|
|
}
|
|
|
|
return await request.$webGet(
|
|
"CommercialApi/BigData/GetMonthAnalysis",
|
|
currentReq
|
|
);
|
|
},
|
|
|
|
// 获取去年数据
|
|
async getPreviousYearData() {
|
|
const previousReq = {
|
|
ProvinceCode: '530000',
|
|
StatisticsDate: moment().subtract(1, 'y').endOf('M').format('YYYY-MM-DD'),
|
|
StartDate: moment().subtract(1, 'y').startOf('y').format('YYYY-MM-DD'),
|
|
EndDate: 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-card {
|
|
background: @bg-white;
|
|
border-radius: @border-radius;
|
|
padding: 24rpx;
|
|
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 {
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.monthly-data {
|
|
.data-table {
|
|
.table-header {
|
|
display: flex;
|
|
background: #f5f5f5;
|
|
border-radius: 8rpx;
|
|
padding: 16rpx 0;
|
|
margin-bottom: 16rpx;
|
|
|
|
.header-cell {
|
|
flex: 1;
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
font-weight: 600;
|
|
color: @text-primary;
|
|
|
|
&:first-child {
|
|
flex: 0.8;
|
|
}
|
|
}
|
|
}
|
|
|
|
.table-row {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 12rpx 0;
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.table-cell {
|
|
flex: 1;
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
color: @text-primary;
|
|
|
|
&.month-cell {
|
|
flex: 0.8;
|
|
font-weight: 500;
|
|
}
|
|
|
|
&.growth-positive {
|
|
color: @success-color;
|
|
font-weight: 600;
|
|
}
|
|
|
|
&.growth-negative {
|
|
color: @danger-color;
|
|
font-weight: 600;
|
|
}
|
|
|
|
&.growth-neutral {
|
|
color: @text-secondary;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |