init
This commit is contained in:
323
pages/statistics/analyse.vue
Normal file
323
pages/statistics/analyse.vue
Normal file
@@ -0,0 +1,323 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user