527 lines
13 KiB
Vue
527 lines
13 KiB
Vue
|
<template>
|
|||
|
|
<view class="waper">
|
|||
|
|
<!-- 导航栏 -->
|
|||
|
|
<u-navbar bgColor="transparent" leftIconSize="0" borderBottom="false">
|
|||
|
|
<view slot='center' class="navbar_title">数据统计中心</view>
|
|||
|
|
</u-navbar>
|
|||
|
|
|
|||
|
|
<!-- 顶部横幅 -->
|
|||
|
|
<view class="banner-box">
|
|||
|
|
<image class="banner" src="../../static/img/banner.png" mode="widthFix"></image>
|
|||
|
|
<!-- 统计概览卡片 -->
|
|||
|
|
<view class="stats-overview">
|
|||
|
|
<view class="stat-item">
|
|||
|
|
<view class="stat-label">总销售额</view>
|
|||
|
|
<view class="stat-value">¥68,532</view>
|
|||
|
|
<view class="stat-trend positive">
|
|||
|
|
<uni-icons type="arrowup" size="14"></uni-icons>
|
|||
|
|
<text>12.5%</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="stat-item">
|
|||
|
|
<view class="stat-label">总订单量</view>
|
|||
|
|
<view class="stat-value">8,652</view>
|
|||
|
|
<view class="stat-trend positive">
|
|||
|
|
<uni-icons type="arrowup" size="14"></uni-icons>
|
|||
|
|
<text>8.3%</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="stat-item">
|
|||
|
|
<view class="stat-label">游客总量</view>
|
|||
|
|
<view class="stat-value">35,962</view>
|
|||
|
|
<view class="stat-trend positive">
|
|||
|
|
<uni-icons type="arrowup" size="14"></uni-icons>
|
|||
|
|
<text>5.7%</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 主要内容区 -->
|
|||
|
|
<view class="con-box">
|
|||
|
|
<!-- 图表统计区域 -->
|
|||
|
|
<view class="charts-section">
|
|||
|
|
<!-- 折线图：本月门票销售量和销售额 -->
|
|||
|
|
<view class="chart-card">
|
|||
|
|
<view class="chart-header">
|
|||
|
|
<view class="chart-title">本月销售趋势</view>
|
|||
|
|
<view class="chart-filter">
|
|||
|
|
<text class="filter-item active">日</text>
|
|||
|
|
<text class="filter-item">周</text>
|
|||
|
|
<text class="filter-item">月</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="chart-container">
|
|||
|
|
<qiun-data-charts
|
|||
|
|
type="line"
|
|||
|
|
:chartData="ticketSalesData"
|
|||
|
|
:opts="lineChartOpts"
|
|||
|
|
:canvas2d="true"
|
|||
|
|
@chartClick="onChartClick"
|
|||
|
|
class="chart"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 柱状图：年度用水用电数据 -->
|
|||
|
|
<view class="chart-card">
|
|||
|
|
<view class="chart-header">
|
|||
|
|
<view class="chart-title">年度用水用电统计</view>
|
|||
|
|
<view class="chart-filter">
|
|||
|
|
<text class="filter-item active">年</text>
|
|||
|
|
<text class="filter-item">季</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="chart-container">
|
|||
|
|
<qiun-data-charts
|
|||
|
|
type="column"
|
|||
|
|
:chartData="waterElectricData"
|
|||
|
|
:opts="barChartOpts"
|
|||
|
|
:canvas2d="true"
|
|||
|
|
class="chart"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 饼图：收益占比 -->
|
|||
|
|
<view class="chart-card pie-chart-card">
|
|||
|
|
<view class="chart-header">
|
|||
|
|
<view class="chart-title">收益来源占比</view>
|
|||
|
|
<view class="chart-date">
|
|||
|
|
<text>2023年6月</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="chart-container pie-container">
|
|||
|
|
<qiun-data-charts
|
|||
|
|
type="pie"
|
|||
|
|
:chartData="revenueData"
|
|||
|
|
:opts="pieChartOpts"
|
|||
|
|
:canvas2d="true"
|
|||
|
|
class="chart pie-chart"
|
|||
|
|
@chartInit="onPieInit"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<tabbar name="video"></tabbar>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import tabbar from '@/components/tabbar.vue'
|
|||
|
|
export default {
|
|||
|
|
components: { tabbar },
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
show: false,
|
|||
|
|
pieChart: null, // 饼图实例
|
|||
|
|
|
|||
|
|
// 折线图数据：本月门票销售量和销售额
|
|||
|
|
ticketSalesData: {
|
|||
|
|
categories: ['1日', '5日', '10日', '15日', '20日', '25日', '30日'],
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '销售量',
|
|||
|
|
data: [320, 450, 380, 520, 490, 680, 720],
|
|||
|
|
color: '#42b983'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '销售额(万元)',
|
|||
|
|
data: [9.6, 13.5, 11.4, 15.6, 14.7, 20.4, 21.6],
|
|||
|
|
color: '#3498db'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 柱状图数据：年度用水用电数据
|
|||
|
|
waterElectricData: {
|
|||
|
|
categories: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '用水量(吨)',
|
|||
|
|
data: [3200, 2800, 3100, 3500, 4200, 5800, 6500, 6800, 5200, 4100, 3800, 3500],
|
|||
|
|
color: '#3498db'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '用电量(度)',
|
|||
|
|
data: [5800, 5200, 5500, 6200, 7800, 9200, 10500, 11200, 8500, 6800, 6200, 5900],
|
|||
|
|
color: '#f1c40f'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 饼图数据：收益占比
|
|||
|
|
revenueData: {
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '门票',
|
|||
|
|
data: 45,
|
|||
|
|
color: '#42b983'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '酒店',
|
|||
|
|
data: 30,
|
|||
|
|
color: '#3498db'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '餐饮',
|
|||
|
|
data: 15,
|
|||
|
|
color: '#e67e22'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '商城',
|
|||
|
|
data: 10,
|
|||
|
|
color: '#9b59b6'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 图表配置
|
|||
|
|
lineChartOpts: {
|
|||
|
|
color: ['#42b983', '#3498db'],
|
|||
|
|
padding: [15, 15, 0, 15],
|
|||
|
|
legend: {
|
|||
|
|
position: 'top',
|
|||
|
|
float: 'right',
|
|||
|
|
fontSize: 12
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
gridColor: '#eeeeee',
|
|||
|
|
labelCount: 7
|
|||
|
|
},
|
|||
|
|
yAxis: [
|
|||
|
|
{
|
|||
|
|
name: '销售量',
|
|||
|
|
gridColor: '#eeeeee',
|
|||
|
|
min: 0
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '销售额(万元)',
|
|||
|
|
gridColor: 'transparent',
|
|||
|
|
min: 0,
|
|||
|
|
position: 'right'
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
extra: {
|
|||
|
|
line: {
|
|||
|
|
type: 'curve',
|
|||
|
|
width: 3,
|
|||
|
|
activeType: 'hollow',
|
|||
|
|
hollowRadius: 5,
|
|||
|
|
hollowColor: 'auto'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
animation: true,
|
|||
|
|
animationDuration: 1500
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
barChartOpts: {
|
|||
|
|
color: ['#3498db', '#f1c40f'],
|
|||
|
|
padding: [15, 15, 0, 15],
|
|||
|
|
legend: {
|
|||
|
|
position: 'top',
|
|||
|
|
float: 'right',
|
|||
|
|
fontSize: 12
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
gridColor: '#eeeeee'
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
gridColor: '#eeeeee',
|
|||
|
|
min: 0
|
|||
|
|
},
|
|||
|
|
extra: {
|
|||
|
|
column: {
|
|||
|
|
width: 20,
|
|||
|
|
radius: [6, 6, 0, 0],
|
|||
|
|
// 添加柱子间隔
|
|||
|
|
space: 15
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
animation: true,
|
|||
|
|
animationDuration: 1500,
|
|||
|
|
animationEasing: 'elasticOut'
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
pieChartOpts: {
|
|||
|
|
color: ['#42b983', '#3498db', '#e67e22', '#9b59b6'],
|
|||
|
|
padding: [15, 15, 0, 15],
|
|||
|
|
legend: {
|
|||
|
|
position: 'right',
|
|||
|
|
float: 'right',
|
|||
|
|
itemGap: 20,
|
|||
|
|
fontSize: 14,
|
|||
|
|
itemWidth: 12,
|
|||
|
|
itemHeight: 12
|
|||
|
|
},
|
|||
|
|
extra: {
|
|||
|
|
pie: {
|
|||
|
|
labelWidth: 15,
|
|||
|
|
offsetAngle: 0,
|
|||
|
|
radius: 100,
|
|||
|
|
activeScale: 1.1,
|
|||
|
|
// 饼图动效配置
|
|||
|
|
labelLine: true,
|
|||
|
|
labelLineLength: 20,
|
|||
|
|
labelLineWidth: 1
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
animation: true,
|
|||
|
|
animationDuration: 2000,
|
|||
|
|
animationEasing: 'cubicOut'
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
async scanCode () {
|
|||
|
|
let info = await this.$http.getInfo();
|
|||
|
|
// #ifdef APP-PLUS
|
|||
|
|
uni.navigateTo({ url: '/pages/scan/index' })
|
|||
|
|
// #endif
|
|||
|
|
// #ifdef MP-WEIXIN
|
|||
|
|
uni.scanCode({
|
|||
|
|
onlyFromCamera: true,
|
|||
|
|
success: async (res) => {
|
|||
|
|
uni.navigateTo({ url: `/pages/info/info?code=${res.result}`})
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
// #endif
|
|||
|
|
},
|
|||
|
|
// 图表点击事件
|
|||
|
|
onChartClick(e) {
|
|||
|
|
console.log('图表点击', e);
|
|||
|
|
uni.showToast({
|
|||
|
|
title: `${e.name}: ${e.value}`,
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 2000
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 饼图初始化完成
|
|||
|
|
onPieInit(chart) {
|
|||
|
|
this.pieChart = chart;
|
|||
|
|
|
|||
|
|
// 添加交互效果 - 鼠标悬停/点击时的动画
|
|||
|
|
chart.on('pointClick', (params) => {
|
|||
|
|
this.pieChart.updateOption({
|
|||
|
|
extra: {
|
|||
|
|
pie: {
|
|||
|
|
offsetAngle: params.dataIndex * (360 / this.revenueData.series.length)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 自动旋转效果
|
|||
|
|
let angle = 0;
|
|||
|
|
setInterval(() => {
|
|||
|
|
angle += 1;
|
|||
|
|
if (angle >= 360) angle = 0;
|
|||
|
|
this.pieChart.updateOption({
|
|||
|
|
extra: {
|
|||
|
|
pie: {
|
|||
|
|
offsetAngle: angle
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}, 100);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
page{
|
|||
|
|
height: 100%;
|
|||
|
|
background-color: #f5f7fa;
|
|||
|
|
}
|
|||
|
|
.waper{
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
background: #f5f7fa;
|
|||
|
|
|
|||
|
|
.navbar_title{
|
|||
|
|
font-weight: 600;
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.banner-box {
|
|||
|
|
position: relative;
|
|||
|
|
width: 100%;
|
|||
|
|
|
|||
|
|
.banner {
|
|||
|
|
width: 100%;
|
|||
|
|
height: auto;
|
|||
|
|
min-height: 220rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 统计概览卡片
|
|||
|
|
.stats-overview {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: -60rpx;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
padding: 0 30rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
|
|||
|
|
.stat-item {
|
|||
|
|
width: 220rpx;
|
|||
|
|
height: 120rpx;
|
|||
|
|
background-color: #fff;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
padding: 20rpx;
|
|||
|
|
box-shadow: 0 8rpx 20rpx rgba(0,0,0,0.08);
|
|||
|
|
text-align: center;
|
|||
|
|
|
|||
|
|
.stat-label {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #666;
|
|||
|
|
margin-bottom: 8rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stat-value {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #333;
|
|||
|
|
margin-bottom: 5rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stat-trend {
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
|
|||
|
|
&.positive {
|
|||
|
|
color: #42b983;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.negative {
|
|||
|
|
color: #f56c6c;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
text {
|
|||
|
|
margin-left: 5rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.con-box {
|
|||
|
|
position: relative;
|
|||
|
|
top: 20rpx;
|
|||
|
|
padding: 70rpx 30rpx 20rpx;
|
|||
|
|
background: transparent;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.charts-section {
|
|||
|
|
width: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 图表卡片样式
|
|||
|
|
.chart-card {
|
|||
|
|
width: 100%;
|
|||
|
|
background-color: #fff;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
padding: 30rpx;
|
|||
|
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
|
|||
|
|
&:hover {
|
|||
|
|
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
|
|||
|
|
transform: translateY(-2rpx);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chart-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 25rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chart-title {
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: #333;
|
|||
|
|
font-weight: 600;
|
|||
|
|
position: relative;
|
|||
|
|
padding-left: 15rpx;
|
|||
|
|
|
|||
|
|
&::before {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
left: 0;
|
|||
|
|
top: 50%;
|
|||
|
|
transform: translateY(-50%);
|
|||
|
|
width: 6rpx;
|
|||
|
|
height: 24rpx;
|
|||
|
|
background-color: #3498db;
|
|||
|
|
border-radius: 3rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chart-filter {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 15rpx;
|
|||
|
|
|
|||
|
|
.filter-item {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
padding: 8rpx 18rpx;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
color: #999;
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
transition: all 0.2s ease;
|
|||
|
|
|
|||
|
|
&.active {
|
|||
|
|
color: #fff;
|
|||
|
|
background-color: #3498db;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&:not(.active):hover {
|
|||
|
|
background-color: #eee;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chart-date {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chart-container {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 360rpx;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chart {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 饼图特殊样式
|
|||
|
|
.pie-chart-card {
|
|||
|
|
.pie-container {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
height: 400rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pie-chart {
|
|||
|
|
width: auto;
|
|||
|
|
height: 320rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|