323 lines
8.9 KiB
Vue
323 lines
8.9 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="left">
|
|
<qiun-data-charts type="arcbar" :opts="arcbarOpts" canvas2d :animation="false" :chartData="arcbarChartData" />
|
|
<image class="icon" src="../../static/img/Frame.png" mode=""></image>
|
|
</view>
|
|
<view class="right">
|
|
<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 statistics-box">
|
|
<view class="title-box">
|
|
<image class="headline" src="../../static/img/sjpsjtj.png" mode=""></image>
|
|
<view class="label">售检票数据统计</view>
|
|
</view>
|
|
<view class="chart1-box">
|
|
<view class="btns">
|
|
<view class="btn btn1" :class="[btnIndex == 1 ? 'activeBtn' : '' ]" @click="changeBtn(1)">近7天</view>
|
|
<view class="btn btn2" :class="[btnIndex == 2 ? 'activeBtn' : (btnIndex == 1 || btnIndex == 2) ? 'bl' : (btnIndex == 2 || btnIndex == 3) ? 'br' : '']" @click="changeBtn(2)">近半年</view>
|
|
<view class="btn btn3" :class="[btnIndex == 3 ? 'activeBtn' : '']" @click="changeBtn(3)">近三年</view>
|
|
</view>
|
|
<view class="column-box">
|
|
<qiun-data-charts type="column" :opts="columnOpts" canvas2d :chartData="columnChartData" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="card ratio-box">
|
|
<view class="title-box">
|
|
<image class="headline" src="../../static/img/ykbl.png" mode=""></image>
|
|
<view class="label">游客比例</view>
|
|
</view>
|
|
<view class="chart2-box">
|
|
<view class="scale">
|
|
<view :class="['label1', index == 0 ? 'label2' : 'label3']" v-for="(item, index) in touristRateVo" :key="index">
|
|
{{(item.value == 0 && sjpsjtjTotal == 0) ? '0%' : (item.value * 100 / sjpsjtjTotal).toFixed(2) + '%'}}
|
|
</view>
|
|
<view class="when when1 polygon" :style="'width: ' + when1Width + 'rpx'"></view>
|
|
</view>
|
|
<view class="labels">
|
|
<view v-for="(item, index) in touristRateVo" :key="index">{{item.name}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
saleDataVo: {},
|
|
saleVerificationDataVoList: [],
|
|
touristRateVo: [],
|
|
sjpsjtjTotal: 0,
|
|
btnIndex: 1,
|
|
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
|
|
}
|
|
}
|
|
},
|
|
columnOpts: {
|
|
color: ["#03AE80"],
|
|
padding: [15,15,5,15],
|
|
enableScroll: false,
|
|
legend: {
|
|
show: false,
|
|
},
|
|
xAxis: {
|
|
disableGrid: true
|
|
},
|
|
yAxis: {
|
|
data: [
|
|
{
|
|
min: 0
|
|
}
|
|
]
|
|
},
|
|
extra: {
|
|
column: {
|
|
type: "group",
|
|
width: 30,
|
|
activeBgColor: "#000000",
|
|
activeBgOpacity: 0.08,
|
|
linearType: "custom",
|
|
seriesGap: 5,
|
|
linearOpacity: 0.5,
|
|
customColor: [
|
|
"#03AE80",
|
|
"#03AE80"
|
|
]
|
|
}
|
|
}
|
|
},
|
|
arcbarChartData: {},
|
|
columnChartData: {},
|
|
when1Width: 0,
|
|
};
|
|
},
|
|
mounted() {
|
|
this.getOperationalAnalysis();
|
|
},
|
|
methods: {
|
|
async getOperationalAnalysis() {
|
|
let info = await this.$http.getOperationalAnalysis();
|
|
this.saleDataVo = info.data.saleDataVo;
|
|
this.saleVerificationDataVoList = info.data.saleVerificationDataVoList;
|
|
this.touristRateVo = info.data.touristRateVo;
|
|
this.changeBtn(1);
|
|
|
|
this.touristRateVo.forEach(m => {
|
|
this.sjpsjtjTotal += m.value;
|
|
})
|
|
if (!this.touristRateVo[0].value) {
|
|
this.when1Width = 0;
|
|
} else {
|
|
let num = this.touristRateVo[0].value / this.sjpsjtjTotal;
|
|
this.when1Width = num * 630 + 35;
|
|
}
|
|
|
|
let res1 = {
|
|
series: [
|
|
{
|
|
name: "今日门票核销数量",
|
|
data: this.saleDataVo.todayVerificationNum
|
|
},
|
|
{
|
|
name: "今日门票销售数量",
|
|
data: this.saleDataVo.todaySaleNum
|
|
}
|
|
]
|
|
};
|
|
this.arcbarChartData = JSON.parse(JSON.stringify(res1));
|
|
|
|
|
|
},
|
|
changeBtn(i) {
|
|
this.btnIndex = i;
|
|
let name = '';
|
|
let categories = [];
|
|
let data = [];
|
|
this.saleVerificationDataVoList.forEach(m => {
|
|
if (m.type == i) {
|
|
name = m.typeName;
|
|
m.data.forEach(e => {
|
|
categories.push(e.name);
|
|
data.push(e.value);
|
|
})
|
|
}
|
|
})
|
|
let res = {
|
|
categories: categories,
|
|
series: [
|
|
{
|
|
name: name,
|
|
data: data
|
|
}
|
|
]
|
|
};
|
|
this.columnChartData = JSON.parse(JSON.stringify(res));
|
|
}
|
|
}
|
|
}
|
|
</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;
|
|
.left {
|
|
width: 320rpx; height: 320rpx; position: relative; margin-right: 48rpx;
|
|
.icon {
|
|
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 52rpx; height: 52rpx;
|
|
}
|
|
}
|
|
.right {
|
|
flex: 1;
|
|
.row {
|
|
margin-top: 74rpx;
|
|
&:nth-child(1) {
|
|
margin-top: 0;
|
|
.dot { background: #03AE80; }
|
|
}
|
|
&:nth-child(2) {
|
|
.dot { background: #347BEA; }
|
|
}
|
|
.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;
|
|
}
|
|
.statistics-box {
|
|
.title-box { background: linear-gradient( 90deg, rgba(3,174,128,0.2) 0%, rgba(255,255,255,0.05) 100%); }
|
|
.chart1-box {
|
|
.btns {
|
|
height: 49rpx; display: flex; align-items: center; justify-content: flex-end; margin: 20rpx 28rpx 20rpx 0;
|
|
.btn { width: 90rpx; height: 47rpx; line-height: 47rpx; text-align: center; font-size: 22rpx; color: #999999; }
|
|
.btn1 { border-radius: 28rpx 0 0 28rpx; border: 1rpx solid #E8E8E8; border-right: none; }
|
|
.btn2 { border: 1rpx solid #E8E8E8; }
|
|
.btn3 { border-radius: 0 28rpx 28rpx 0; border: 1rpx solid #E8E8E8; border-left: none; }
|
|
.activeBtn { border-color: #03AE80; color: #FFFFFF; background-color: #03AE80; }
|
|
.bl { border-left: 1rpx solid #03AE80; }
|
|
.br { border-right: 1rpx solid #03AE80; }
|
|
}
|
|
.column-box { height: 317rpx; }
|
|
}
|
|
}
|
|
.ratio-box {
|
|
.title-box { background: linear-gradient( 90deg, rgba(43,117,233,0.2) 0%, rgba(255,255,255,0.05) 100%); }
|
|
.chart2-box {
|
|
height: 194rpx; padding: 32rpx 28rpx; box-sizing: border-box;
|
|
.scale {
|
|
width: 630rpx;
|
|
height: 70rpx;
|
|
background: #B3E7D9;
|
|
border-radius: 40rpx;
|
|
position: relative;
|
|
overflow: hidden;
|
|
.label1 {
|
|
font-weight: 500; font-size: 28rpx; color: #FFFFFF; line-height: 70rpx; z-index: 2;
|
|
position: absolute; top: 50%; transform: translateY(-50%);
|
|
}
|
|
.label2 { left: 40rpx; }
|
|
.label3 { right: 40rpx; }
|
|
.when { height: 70rpx; position: absolute; top: 0; }
|
|
.when1 { left: 0; background-color: #03AE80; z-index: 1; }
|
|
.polygon { clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%); }
|
|
}
|
|
.labels {
|
|
display: flex; align-items: center; justify-content: space-between; margin-top: 20rpx; font-size: 28rpx; color: #333333;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |