426 lines
12 KiB
Vue
426 lines
12 KiB
Vue
<template>
|
||
<view class="container">
|
||
<scroll-view scroll-y="true" class="scroll">
|
||
<view class="market-box">
|
||
<view class="title">
|
||
<view class="label">今日门票销售额</view>
|
||
<view class="num">{{saleDataVo.todaySaleAmount}}</view>
|
||
</view>
|
||
<view class="chart6-box">
|
||
<view class="left6">
|
||
<qiun-data-charts type="arcbar" canvas2d :opts="arcbarOpts" :animation="false" :chartData="arcbarChartData" />
|
||
<image class="icon" src="../../static/img/Frame.png" mode=""></image>
|
||
</view>
|
||
<view class="right6">
|
||
<view class="row">
|
||
<view class="col1">
|
||
<view class="dot"></view>
|
||
<view class="label">今日门票核销数量</view>
|
||
</view>
|
||
<view class="col2">{{saleDataVo.todayVerificationNum}}</view>
|
||
</view>
|
||
<view class="row">
|
||
<view class="col1">
|
||
<view class="dot"></view>
|
||
<view class="label">今日门票销售数量</view>
|
||
</view>
|
||
<view class="col2">{{saleDataVo.todaySaleNum}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="card analyse-box">
|
||
<view class="title-box">
|
||
<image class="headline" src="../../static/img/sjpsjtj.png" mode=""></image>
|
||
<view class="label">今日票类售/验数据分析</view>
|
||
</view>
|
||
<view class="chart1-box">
|
||
<uni-table ref="table" stripe emptyText="暂无更多数据">
|
||
<uni-tr>
|
||
<uni-th align="center" width="320rpx">门票名称</uni-th>
|
||
<uni-th align="center" width="155rpx">销售数量</uni-th>
|
||
<uni-th align="center" width="155rpx">核验数量</uni-th>
|
||
</uni-tr>
|
||
<uni-tr v-for="(item, index) in saleVerficationVo" :key="index">
|
||
<uni-td align="center" width="320rpx">{{item.ticketName}}</uni-td>
|
||
<uni-td align="center" width="155rpx">{{item.buyQuantity}}</uni-td>
|
||
<uni-td align="center" width="155rpx">{{item.verificationNum}}</uni-td>
|
||
</uni-tr>
|
||
</uni-table>
|
||
</view>
|
||
</view>
|
||
<view class="card statistics-box">
|
||
<view class="title-box">
|
||
<image class="headline" src="../../static/img/ykbl.png" mode=""></image>
|
||
<view class="label">今日各景点验票人数统计</view>
|
||
</view>
|
||
<view class="chart2-box">
|
||
<uni-table ref="table" stripe emptyText="暂无更多数据">
|
||
<uni-tr>
|
||
<uni-th align="center" width="430rpx">门票名称</uni-th>
|
||
<uni-th align="center" width="200rpx">验票人数</uni-th>
|
||
</uni-tr>
|
||
<uni-tr v-for="(item, index) in checkPointTicketVo" :key="index">
|
||
<uni-td align="center" width="430rpx">{{item.name}}</uni-td>
|
||
<uni-td align="center" width="200rpx">{{item.value}}</uni-td>
|
||
</uni-tr>
|
||
</uni-table>
|
||
</view>
|
||
</view>
|
||
<view class="card proportion-box">
|
||
<view class="title-box">
|
||
<image class="headline" src="../../static/img/xszb.png" mode=""></image>
|
||
<view class="label">今日票类销售占比</view>
|
||
</view>
|
||
<view class="chart3-box">
|
||
<view class="left3">
|
||
<qiun-data-charts type="ring" canvas2d :opts="ringOpts" :chartData="ringChartData" />
|
||
</view>
|
||
<view class="right3">
|
||
<view class="row" v-for="(item, index) in saleTicketVo">
|
||
<view class="col3">
|
||
<view class="dot"></view>
|
||
<view class="label">{{item.name}}</view>
|
||
</view>
|
||
<view class="col4">{{item.value}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="card rank-box">
|
||
<view class="title-box">
|
||
<image class="headline" src="../../static/img/xsph.png" mode=""></image>
|
||
<view class="label">今日OTA销售排行</view>
|
||
</view>
|
||
<view class="chart4-box">
|
||
<view class="unit">单位：张</view>
|
||
<view class="plan-list">
|
||
<view class="plan-item" v-for="(item, index) in saleOtaTicketVo" :key="index">
|
||
<view class="icon1">
|
||
<image v-if="item.name == '美团'" class="ranking" src="../../static/img/mt.png" mode=""></image>
|
||
<image v-if="item.name == '携程'" class="ranking" src="../../static/img/xc.png" mode=""></image>
|
||
</view>
|
||
<view class="row">
|
||
<view class="label">
|
||
<view class="text">{{item.name}}</view>
|
||
<view class="num">{{item.value}}</view>
|
||
</view>
|
||
<u-line-progress :percentage="(item.value / xsphTotal) * 100" activeColor="#03AE80" :showText="false" height="15rpx"></u-line-progress>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="card info-box">
|
||
<view class="title-box">
|
||
<image class="headline" src="../../static/img/ryrstj.png" mode=""></image>
|
||
<view class="label">今日各时段入园人数统计</view>
|
||
</view>
|
||
<view class="chart5-box">
|
||
<uni-table ref="table" stripe emptyText="暂无更多数据">
|
||
<uni-tr>
|
||
<uni-th align="center" width="330rpx">时间段</uni-th>
|
||
<uni-th align="center" width="300rpx">入园人数</uni-th>
|
||
</uni-tr>
|
||
<uni-tr v-for="(item, index) in timeEnterScenicVo" :key="index">
|
||
<uni-td align="center" width="330rpx">{{item.name}}</uni-td>
|
||
<uni-td align="center" width="300rpx">{{item.value}}</uni-td>
|
||
</uni-tr>
|
||
</uni-table>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
saleDataVo: {},
|
||
saleVerficationVo: [],
|
||
checkPointTicketVo: [],
|
||
saleTicketVo: [],
|
||
plxszbTotal: 0,
|
||
saleOtaTicketVo: [],
|
||
xsphTotal: 0,
|
||
timeEnterScenicVo: [],
|
||
arcbarOpts: {
|
||
color: ["#03AE80","#347BEA"],
|
||
padding: undefined,
|
||
title: {
|
||
name: "",
|
||
fontSize: 0,
|
||
color: "#1890ff"
|
||
},
|
||
subtitle: {
|
||
name: "",
|
||
fontSize: 0,
|
||
color: "#666666"
|
||
},
|
||
extra: {
|
||
arcbar: {
|
||
type: "circle",
|
||
width: 12,
|
||
backgroundColor: "#E9E9E9",
|
||
startAngle: 1.5,
|
||
endAngle: 0.25,
|
||
gap: 12
|
||
}
|
||
}
|
||
},
|
||
ringOpts: {
|
||
rotate: false,
|
||
rotateLock: false,
|
||
color: ["#03AE80","#347BEA","#FE7D51","#6E34EA"],
|
||
padding: [0,0,0,0],
|
||
dataLabel: true,
|
||
enableScroll: false,
|
||
legend: {
|
||
show: false,
|
||
position: "right",
|
||
lineHeight: 30
|
||
},
|
||
title: {
|
||
name: "",
|
||
fontSize: 20,
|
||
color: "#333"
|
||
},
|
||
subtitle: {
|
||
name: "总票数",
|
||
fontSize: 12,
|
||
color: "#666"
|
||
},
|
||
extra: {
|
||
ring: {
|
||
ringWidth: 20,
|
||
activeOpacity: 0.5,
|
||
activeRadius: 10,
|
||
offsetAngle: -90,
|
||
labelWidth: 15,
|
||
border: true,
|
||
borderWidth: 3,
|
||
borderColor: "#FFFFFF",
|
||
customRadius: 70
|
||
}
|
||
}
|
||
},
|
||
arcbarChartData: {},
|
||
ringChartData: {},
|
||
};
|
||
},
|
||
mounted() {
|
||
this.getRealTimeMonitoring();
|
||
},
|
||
methods: {
|
||
async getRealTimeMonitoring() {
|
||
let info = await this.$http.getRealTimeMonitoring();
|
||
this.saleDataVo = info.data.saleDataVo;
|
||
this.saleVerficationVo = info.data.saleVerficationVo;
|
||
this.checkPointTicketVo = info.data.checkPointTicketVo;
|
||
this.saleTicketVo = info.data.saleTicketVo;
|
||
this.saleOtaTicketVo = info.data.saleOtaTicketVo;
|
||
this.timeEnterScenicVo = info.data.timeEnterScenicVo;
|
||
|
||
this.saleTicketVo.forEach(m => {
|
||
this.plxszbTotal += m.value;
|
||
})
|
||
this.ringOpts.title.name = this.plxszbTotal;
|
||
|
||
this.saleOtaTicketVo.forEach(m => {
|
||
this.xsphTotal += m.value;
|
||
})
|
||
|
||
let res1 = {
|
||
series: [
|
||
{
|
||
name: "今日门票核销数量",
|
||
data: this.saleDataVo.todayVerificationNum
|
||
},
|
||
{
|
||
name: "今日门票销售数量",
|
||
data: this.saleDataVo.todaySaleNum
|
||
}
|
||
]
|
||
};
|
||
this.arcbarChartData = JSON.parse(JSON.stringify(res1));
|
||
|
||
this.saleTicketVo.forEach(m => {
|
||
m.labelShow = false;
|
||
})
|
||
let res2 = {
|
||
series: [
|
||
{
|
||
data: this.saleTicketVo
|
||
}
|
||
]
|
||
};
|
||
this.ringChartData = JSON.parse(JSON.stringify(res2));
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.container {
|
||
height: 100%;
|
||
.scroll {
|
||
height: 100%;
|
||
}
|
||
.market-box {
|
||
width: 686rpx;
|
||
height: 428rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 10rpx;
|
||
padding: 32rpx;
|
||
box-sizing: border-box;
|
||
.title {
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
.label { font-weight: 500; font-size: 32rpx; color: #333333; }
|
||
.num { font-weight: bold; font-size: 40rpx; color: #333333; }
|
||
}
|
||
.chart6-box {
|
||
display: flex; align-items: center;
|
||
.left6 {
|
||
width: 320rpx; height: 320rpx; position: relative; margin-right: 48rpx;
|
||
.icon {
|
||
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 52rpx; height: 52rpx;
|
||
}
|
||
}
|
||
.right6 {
|
||
flex: 1;
|
||
.row {
|
||
margin-top: 74rpx;
|
||
&:nth-child(1) {
|
||
margin-top: 0;
|
||
.dot { background: #347BEA; }
|
||
}
|
||
&:nth-child(2) {
|
||
.dot { background: #03AE80; }
|
||
}
|
||
.col1 {
|
||
display: flex; align-items: center;
|
||
.dot {
|
||
width: 14rpx; height: 14rpx; border-radius: 50%; margin-right: 10rpx;
|
||
}
|
||
.label { font-size: 28rpx; color: #333333; line-height: 33rpx; }
|
||
}
|
||
.col2 { margin: 12rpx 0 0 24rpx; font-weight: bold; font-size: 32rpx; color: #333333; line-height: 38rpx; }
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.title-box {
|
||
width: 686rpx;
|
||
height: 90rpx;
|
||
box-sizing: border-box;
|
||
border-radius: 10rpx 10rpx 0 0;
|
||
padding: 23rpx 28rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
.headline {
|
||
width: 44rpx;
|
||
height: 44rpx;
|
||
margin-right: 16rpx;
|
||
}
|
||
.label {
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
.card {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
background: #FFFFFF;
|
||
border-radius: 10rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
.analyse-box {
|
||
.title-box { background: linear-gradient( 90deg, rgba(3,174,128,0.2) 0%, rgba(255,255,255,0.05) 100%); }
|
||
.chart1-box { padding: 20rpx 28rpx; }
|
||
}
|
||
.statistics-box {
|
||
.title-box { background: linear-gradient( 90deg, rgba(43,117,233,0.2) 0%, rgba(255,255,255,0.05) 100%); }
|
||
.chart2-box { padding: 20rpx 28rpx; }
|
||
}
|
||
.proportion-box {
|
||
.title-box { background: linear-gradient( 90deg, rgba(254,125,81,0.2) 0%, rgba(255,255,255,0.05) 100%); }
|
||
.chart3-box {
|
||
display: flex; align-items: center; padding: 0 32rpx;
|
||
.left3 {
|
||
width: 358rpx; height: 358rpx; position: relative;
|
||
}
|
||
.right3 {
|
||
flex: 1;
|
||
.row {
|
||
margin-top: 37rpx; display: flex; align-items: center; justify-content: space-between;
|
||
&:nth-child(1) {
|
||
margin-top: 0;
|
||
.dot { background: #03AE80; }
|
||
}
|
||
&:nth-child(2) {
|
||
.dot { background: #347BEA; }
|
||
}
|
||
&:nth-child(3) {
|
||
.dot { background: #FE7D51; }
|
||
}
|
||
&:nth-child(4) {
|
||
.dot { background: #6E34EA; }
|
||
}
|
||
.col3 {
|
||
display: flex; align-items: center;
|
||
.dot {
|
||
width: 14rpx; height: 14rpx; border-radius: 50%; margin-right: 12rpx;
|
||
}
|
||
.label { font-size: 28rpx; color: #666666; }
|
||
}
|
||
.col4 { font-weight: 500; font-size: 28rpx; color: #333333; }
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.rank-box {
|
||
.title-box { background: linear-gradient( 90deg, rgba(3,174,128,0.2) 0%, rgba(255,255,255,0.05) 100%); }
|
||
.chart4-box {
|
||
padding: 20rpx 28rpx 40rpx;
|
||
.unit {
|
||
font-weight: 500;
|
||
font-size: 22rpx;
|
||
color: #999999;
|
||
text-align: right;
|
||
}
|
||
.plan-list {
|
||
margin-top: 21rpx;
|
||
.plan-item {
|
||
margin-top: 36rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
&:first-child {
|
||
margin-top: 0;
|
||
}
|
||
.icon1 {
|
||
width: 48rpx; margin-right: 20rpx;
|
||
.ranking { width: 48rpx; height: 48rpx; }
|
||
.sort {
|
||
width: 36rpx; height: 36rpx; line-height: 36rpx; text-align: center; background: #F6F6F6; border-radius: 4rpx; font-weight: 500; font-size: 20rpx; color: #333333; margin-left: 12rpx;
|
||
}
|
||
}
|
||
.row {
|
||
flex: 1;
|
||
.label {
|
||
display: flex; align-items: center; justify-content: space-between; font-weight: 500; font-size: 28rpx; color: #333333; line-height: 33rpx; margin-bottom: 4rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.info-box {
|
||
.title-box { background: linear-gradient( 90deg, rgba(43,117,233,0.2) 0%, rgba(255,255,255,0.05) 100%); }
|
||
.chart5-box { padding: 20rpx 28rpx; }
|
||
}
|
||
}
|
||
/deep/.uni-table {
|
||
min-width: 100% !important;
|
||
}
|
||
</style> |