wangyifang
/
dangxingjiaoyujidi-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

up

Browse Source
master
刘翔宇-旅管家 3 years ago
parent 647e636449
commit 2c15fb82d4
5 changed files with 519 additions and 56 deletions
Show Stats Download Patch File Download Diff File

3
src/api/report/total.js
Unescape View File

@ -2,7 +2,8 @@ import request from '@/utils/request'
export function totalRpt(params) {
return request({
url: '/api/admin/chart/total',
//url: '/api/admin/chart/total',
url: '/api/admin/chart/total-v2',
method: 'get',
params: params
})

361
src/views/dashboard/components/PanelGroup copy 1.vue
Unescape View File

@ -0,0 +1,361 @@
<template>
<div>
<div class="boxlist">
<div class="box box1">
<div class="boxtitle">
预约参观人数
</div>
<div class="boxcontent">
<div class="boxcontentitem">
<div class="boxcontentitem-big">
<count-to :start-val="0" :end-val="totaldata.visit_total.total" :duration="3600" />
</div>
<div class="boxcontentitem-small">总人数</div>
</div>
<div class="boxline"></div>
<div class="boxcontentitem">
<div class="boxcontentitem-big">
<count-to :start-val="0" :end-val="totaldata.visit_total.today" :duration="3600" />
</div>
<div class="boxcontentitem-small">今日</div>
</div>
</div>
<div class="boxfooter"></div>
<img src="../../../assets/imgs/index_icon_1.png" class="index_icon" />
<img src="../../../assets/imgs/index_icon_bg_1.png" class="index_bg" />
</div>
<div class="box box2">
<div class="boxtitle">
入场参观人次
</div>
<div class="boxcontent">
<div class="boxcontentitem">
<div class="boxcontentitem-big">
<count-to :start-val="0" :end-val="totaldata.visit_enter.total" :duration="3600" />
</div>
<div class="boxcontentitem-small">总人数</div>
</div>
<div class="boxline"></div>
<div class="boxcontentitem">
<div class="boxcontentitem-big">
<count-to :start-val="0" :end-val="totaldata.visit_enter.today" :duration="3600" />
</div>
<div class="boxcontentitem-small">今日</div>
</div>
</div>
<div class="boxfooter">当日核销比：{{totaldata.visit_enter.per}}</div>
<img src="../../../assets/imgs/index_icon_2.png" class="index_icon" />
<img src="../../../assets/imgs/index_icon_bg_1-21.png" class="index_bg" />
</div>
<div class="box box3">
<div class="boxtitle">
预约活动人次
</div>
<div class="boxcontent">
<div class="boxcontentitem">
<div class="boxcontentitem-big">
<count-to :start-val="0" :end-val="totaldata.activity_total.total" :duration="3600" />
</div>
<div class="boxcontentitem-small">总人数</div>
</div>
<div class="boxline"></div>
<div class="boxcontentitem">
<div class="boxcontentitem-big">
<count-to :start-val="0" :end-val="totaldata.activity_total.today" :duration="3600" />
</div>
<div class="boxcontentitem-small">今日</div>
</div>
</div>
<div class="boxfooter"></div>
<img src="../../../assets/imgs/index_icon_3.png" class="index_icon" />
<img src="../../../assets/imgs/index_icon_bg_3.png" class="index_bg" />
</div>
<div class="box box4">
<div class="boxtitle">
参加活动人次
</div>
<div class="boxcontent">
<div class="boxcontentitem">
<div class="boxcontentitem-big">
<count-to :start-val="0" :end-val="totaldata.activity_enter.total" :duration="3600" />
</div>
<div class="boxcontentitem-small">总人数</div>
</div>
<div class="boxline"></div>
<div class="boxcontentitem">
<div class="boxcontentitem-big">
<count-to :start-val="0" :end-val="totaldata.activity_enter.today" :duration="3600" />
</div>
<div class="boxcontentitem-small">今日</div>
</div>
</div>
<div class="boxfooter">核销比：{{totaldata.activity_enter.per}}</div>
<img src="../../../assets/imgs/index_icon_4.png" class="index_icon" />
<img src="../../../assets/imgs/index_icon_bg_4.png" class="index_bg" />
</div>
</div>
</div>
</template>
<script>
import CountTo from 'vue-count-to'
export default {
props: {
countsData: {
type: Object
},
totaldata: {
type: Object,
default: {
"visit_total": {
"total": 0,
"today": 0
},
"visit_enter": {
"total": 0,
"today": 0,
"per": 0
},
"activity_total": {
"total": 0,
"today": 0
},
"activity_enter": {
"total": 0,
"today": 0,
"per": 0
}
}
}
},
components: {
CountTo
},
methods: {
handleRoute(type) {
this.$emit('handleRoute', type)
}
}
}
</script>
<style lang="scss" scoped>
.boxlist {
display: flex;
}
.index_icon {
position: absolute;
top: 1.25rem;
right: 1.25rem;
width: 3.5625rem;
}
.index_bg {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.box {
position: relative;
width: 24%;
margin-left: 0.5%;
margin-right: 0.5%;
margin-bottom: 2.375rem;
box-shadow: 0px 8px 15px 0px rgba(212, 84, 32, 0.3100);
border-radius: 8px;
box-sizing: border-box;
padding: 1.25rem;
opacity: 0.8;
.boxfooter {
font-size: 1.0625rem;
font-family: Source Han Sans CN;
font-weight: 400;
color: #FFFFFF;
}
.boxtitle {
font-size: 20px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #FFFFFF;
}
.boxcontent {
display: flex;
//justify-content: space-around;
align-items: center;
.boxline {
width: 1px;
height: 4.0625rem;
background: #FFFFFF;
opacity: 0.3;
margin-left: 2.0625rem;
margin-right: 2.0625rem;
}
.boxcontentitem {
display: flex;
flex-direction: column;
font-size: 19px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #FFFFFF;
text-align: center;
min-width: 30%;
.boxcontentitem-big {
font-size: 2.625rem;
font-family: Arial;
font-weight: 400;
color: #FFFFFF;
}
}
}
}
.box1 {
background: linear-gradient(134deg, #D1AC7B, #DFC69C);
}
.box2 {
background: linear-gradient(134deg, #9193BC, #B7B9D4);
}
.box3 {
background: linear-gradient(-55deg, #F6A868, #F4C59E);
}
.box4 {
background: linear-gradient(-55deg, #64A48E, #9ECABB);
}
.panel-group {
// margin-top: 18px;
margin-left: -2% !important;
margin-right: -3% !important;
.card-panel-col {
margin: 0 2%;
margin-bottom: 32px;
}
.card-panel {
height: 130px;
cursor: pointer;
font-size: 12px;
position: relative;
overflow: hidden;
color: #666;
text-align: center;
// background: #fff;
// box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
// border-color: rgba(0, 0, 0, .05);
&:hover {
.card-panel-icon-wrapper {
color: #fff;
}
// .icon-people {
// background: #40c9c6;
// }
// .icon-message {
// background: #36a3f7;
// }
// .icon-money {
// background: #f4516c;
// }
// .icon-shopping {
// background: #34bfa3
// }
}
.icon-people {
color: #fff;
}
.icon-message {
color: #fff;
}
.icon-money {
color: #fff;
}
.icon-shopping {
color: #fff
}
.card-panel-icon-wrapper {
float: right;
margin: 22px 0 0 14px;
padding: 16px;
transition: all 0.38s ease-out;
border-radius: 6px;
}
.card-panel-icon {
float: left;
font-size: 42px;
}
.card-panel-description {
// float: right;
font-weight: bold;
margin: 16px 12px;
.card-panel-text {
line-height: 25px;
color: rgb(255, 255, 255);
font-size: 26px;
margin-bottom: 20px;
width: 70%;
text-align: left;
}
p {
text-align: left;
font-size: 19px;
}
.card-panel-num {
font-size: 20px;
}
}
}
}
@media (max-width:550px) {
.card-panel-description {
display: none;
}
.card-panel-icon-wrapper {
float: none !important;
width: 100%;
height: 100%;
margin: 0 !important;
.svg-icon {
display: block;
margin: 14px auto !important;
float: none !important;
}
}
}
</style>

203
src/views/dashboard/components/PanelGroup.vue
Unescape View File

@ -3,94 +3,141 @@
<div class="boxlist">
<div class="box box1">
<div class="boxtitle">
预约参观人数
预约参观
</div>
<div class="boxcontentsubtitle">总预约人数/总入场人数</div>
<div class="boxcontent">
<div class="boxcontentitem">
<div class="boxcontentitem-big">
<count-to :start-val="0" :end-val="totaldata.visit_total.total" :duration="3600" />
<count-to :start-val="0" :end-val="totaldata.visit_list.total.appointment.total" :duration="3600" />
</div>
<div class="boxcontentitem-small">总人数</div>
<div class="boxcontentitem-small">团队：{{totaldata.visit_list.total.appointment.team}}</div>
<div class="boxcontentitem-small">个人：{{totaldata.visit_list.total.appointment.person}}</div>
</div>
<div class="boxline"></div>
<div class="boxcontentitem">
<div class="boxcontentitem-big">
<count-to :start-val="0" :end-val="totaldata.visit_total.today" :duration="3600" />
<count-to :start-val="0" :end-val="totaldata.visit_list.total.enter.total" :duration="3600" />
</div>
<div class="boxcontentitem-small">今日</div>
<div class="boxcontentitem-small">团队：{{totaldata.visit_list.total.enter.team}}</div>
<div class="boxcontentitem-small">个人：{{totaldata.visit_list.total.enter.person}}</div>
</div>
</div>
<div class="boxfooter"></div>
<div class="boxfooter">
核销比：{{toCaculateper(totaldata.visit_list.total.enter.total,totaldata.visit_list.total.appointment.total)}}
</div>
<div class="boxcontentsubtitle">今日预约人数/今日入场人数</div>
<div class="boxcontent">
<div class="boxcontentitem">
<div class="boxcontentitem-big">
<count-to :start-val="0" :end-val="totaldata.visit_list.today.appointment.total" :duration="3600" />
</div>
<div class="boxcontentitem-small">团队：{{totaldata.visit_list.today.appointment.team}}</div>
<div class="boxcontentitem-small">个人：{{totaldata.visit_list.today.appointment.person}}</div>
</div>
<div class="boxline"></div>
<div class="boxcontentitem">
<div class="boxcontentitem-big">
<count-to :start-val="0" :end-val="totaldata.visit_list.today.enter.total" :duration="3600" />
</div>
<div class="boxcontentitem-small">团队：{{totaldata.visit_list.today.enter.team}}</div>
<div class="boxcontentitem-small">个人：{{totaldata.visit_list.today.enter.person}}</div>
</div>
</div>
<div class="boxfooter">
核销比：{{toCaculateper(totaldata.visit_list.today.enter.total,totaldata.visit_list.today.appointment.total)}}
</div>
<img src="../../../assets/imgs/index_icon_1.png" class="index_icon" />
<img src="../../../assets/imgs/index_icon_bg_1.png" class="index_bg" />
</div>
<div class="box box2">
<div class="boxtitle">
入场参观人次
活动参加
</div>
<div class="boxcontentsubtitle">总报名人数/总核销人数</div>
<div class="boxcontent">
<div class="boxcontentitem">
<div class="boxcontentitem-big">
<count-to :start-val="0" :end-val="totaldata.visit_enter.total" :duration="3600" />
<count-to :start-val="0" :end-val="totaldata.activity_list.total.appointment.total" :duration="3600" />
</div>
<div class="boxcontentitem-small">总人数</div>
<div class="boxcontentitem-small">团队：{{totaldata.activity_list.total.appointment.team}}</div>
<div class="boxcontentitem-small">个人：{{totaldata.activity_list.total.appointment.person}}</div>
</div>
<div class="boxline"></div>
<div class="boxcontentitem">
<div class="boxcontentitem-big">
<count-to :start-val="0" :end-val="totaldata.visit_enter.today" :duration="3600" />
<count-to :start-val="0" :end-val="totaldata.activity_list.total.enter.total" :duration="3600" />
</div>
<div class="boxcontentitem-small">今日</div>
<div class="boxcontentitem-small">团队：{{totaldata.activity_list.total.enter.team}}</div>
<div class="boxcontentitem-small">个人：{{totaldata.activity_list.total.enter.person}}</div>
</div>
</div>
<div class="boxfooter">当日核销比：{{totaldata.visit_enter.per}}</div>
<div class="boxfooter">
核销比：{{toCaculateper(totaldata.activity_list.total.enter.total,totaldata.activity_list.total.appointment.total)}}
</div>
<div class="boxcontentsubtitle">今日报名人数/今日核销人数</div>
<div class="boxcontent">
<div class="boxcontentitem">
<div class="boxcontentitem-big">
<count-to :start-val="0" :end-val="totaldata.activity_list.today.appointment.total" :duration="3600" />
</div>
<div class="boxcontentitem-small">团队：{{totaldata.activity_list.today.appointment.team}}</div>
<div class="boxcontentitem-small">个人：{{totaldata.activity_list.today.appointment.person}}</div>
</div>
<div class="boxline"></div>
<div class="boxcontentitem">
<div class="boxcontentitem-big">
<count-to :start-val="0" :end-val="totaldata.activity_list.today.enter.total" :duration="3600" />
</div>
<div class="boxcontentitem-small">团队：{{totaldata.activity_list.today.enter.team}}</div>
<div class="boxcontentitem-small">个人：{{totaldata.activity_list.today.enter.person}}</div>
</div>
</div>
<div class="boxfooter"></div>
<img src="../../../assets/imgs/index_icon_2.png" class="index_icon" />
<img src="../../../assets/imgs/index_icon_bg_1-21.png" class="index_bg" />
</div>
<div class="box box3">
<div class="box box4">
<div class="boxtitle">
预约活动人次
停车预约
</div>
<div class="boxcontentsubtitle">总预约数/总核销数</div>
<div class="boxcontent">
<div class="boxcontentitem">
<div class="boxcontentitem-big">
<count-to :start-val="0" :end-val="totaldata.activity_total.total" :duration="3600" />
<count-to :start-val="0" :end-val="totaldata.park_list.total.appointment" :duration="3600" />
</div>
<div class="boxcontentitem-small">总人数</div>
<div class="boxcontentitem-small"> </div>
<div class="boxcontentitem-small"> </div>
</div>
<div class="boxline"></div>
<div class="boxcontentitem">
<div class="boxcontentitem-big">
<count-to :start-val="0" :end-val="totaldata.activity_total.today" :duration="3600" />
<count-to :start-val="0" :end-val="totaldata.park_list.total.enter" :duration="3600" />
</div>
<div class="boxcontentitem-small">今日</div>
</div>
</div>
<div class="boxfooter"></div>
<img src="../../../assets/imgs/index_icon_3.png" class="index_icon" />
<img src="../../../assets/imgs/index_icon_bg_3.png" class="index_bg" />
</div>
<div class="box box4">
<div class="boxtitle">
参加活动人次
</div>
<div class="boxfooter">核销比：{{toCaculateper(totaldata.park_list.total.enter,totaldata.park_list.total.appointment)}}</div>
<div class="boxcontentsubtitle">今日预约数/今日核销数</div>
<div class="boxcontent">
<div class="boxcontentitem">
<div class="boxcontentitem-big">
<count-to :start-val="0" :end-val="totaldata.activity_enter.total" :duration="3600" />
<count-to :start-val="0" :end-val="totaldata.park_list.today.appointment" :duration="3600" />
</div>
<div class="boxcontentitem-small">总人数</div>
<div class="boxcontentitem-small"> </div>
<div class="boxcontentitem-small"> </div>
</div>
<div class="boxline"></div>
<div class="boxcontentitem">
<div class="boxcontentitem-big">
<count-to :start-val="0" :end-val="totaldata.activity_enter.today" :duration="3600" />
<count-to :start-val="0" :end-val="totaldata.park_list.today.enter" :duration="3600" />
</div>
<div class="boxcontentitem-small">今日</div>
</div>
</div>
<div class="boxfooter">核销比：{{totaldata.activity_enter.per}}</div>
<div class="boxfooter">核销比：{{toCaculateper(totaldata.park_list.today.enter,totaldata.park_list.today.appointment)}}</div>
<img src="../../../assets/imgs/index_icon_4.png" class="index_icon" />
<img src="../../../assets/imgs/index_icon_bg_4.png" class="index_bg" />
</div>
@ -109,23 +156,67 @@
totaldata: {
type: Object,
default: {
"visit_total": {
"total": 0,
"today": 0
"visit_list": {
"total": {
"appointment": {
"team": 0,
"person": 0,
"total": 0
},
"enter": {
"team": 0,
"person": 0,
"total": 0
}
},
"today": {
"appointment": {
"team": 0,
"person": 0,
"total": 0
},
"enter": {
"team": 0,
"person": 0,
"total": 0
}
}
},
"visit_enter": {
"total": 0,
"today": 0,
"per": 0
"activity_list": {
"total": {
"appointment": {
"team": 0,
"person": 126,
"total": 126
},
"enter": {
"team": 0,
"person": 44,
"total": 44
}
},
"today": {
"appointment": {
"team": 0,
"person": 0,
"total": 0
},
"enter": {
"team": 0,
"person": 0,
"total": 0
}
}
},
"activity_total": {
"total": 0,
"today": 0
},
"activity_enter": {
"total": 0,
"today": 0,
"per": 0
"park_list": {
"total": {
"appointment": 0,
"enter": 0
},
"today": {
"appointment": 0,
"enter": 0
}
}
}
}
@ -136,6 +227,9 @@
methods: {
handleRoute(type) {
this.$emit('handleRoute', type)
},
toCaculateper(f1,f2){
return ((f1 / (f2 == 0 ? 1 : f2)) * 100).toFixed(2) + "%"
}
}
}
@ -162,7 +256,7 @@
.box {
position: relative;
width: 24%;
width: 33%;
margin-left: 0.5%;
margin-right: 0.5%;
margin-bottom: 2.375rem;
@ -172,11 +266,22 @@
padding: 1.25rem;
opacity: 0.8;
.boxcontentsubtitle {
color: #FFFFFF;
text-align: center;
display: flex;
justify-content: center;
font-size: 1.0625rem;
margin-top: 1.25rem;
}
.boxfooter {
font-size: 1.0625rem;
font-family: Source Han Sans CN;
font-weight: 400;
color: #FFFFFF;
display: flex;
justify-content: center;
}
.boxtitle {
@ -208,7 +313,7 @@
font-weight: 400;
color: #FFFFFF;
text-align: center;
min-width: 30%;
min-width: 40%;
.boxcontentitem-big {
font-size: 2.625rem;

4
src/views/dashboard/index.vue
Unescape View File

@ -168,10 +168,6 @@
load() {
// this.showData = true;
totalRpt().then(res => {
res.visit_enter.per = ((res.visit_enter.today / (res.visit_total.today == 0 ? 1 : res.visit_total
.today)) * 100).toFixed(2) + "%"
res.activity_enter.per = ((res.activity_enter.total / (res.activity_total.total == 0 ? 1 : res.activity_total
.total)) * 100).toFixed(2) + "%"
this.totaldata = res;
})

4
vue.config.js
Unescape View File

@ -46,9 +46,9 @@ module.exports = {
//before: require('./mock/mock-server.js'),
proxy: {
[process.env.VUE_APP_BASE_API]: {
//target: 'https://leyiyuyue.szgmbwg.org.cn/',
target: 'https://leyiyuyue.szgmbwg.org.cn/',
// target: 'https://dangxingjiaoyujidi.langye.net/',
target: 'http://leyitest.ali251.langye.net/',
//target: 'http://leyitest.ali251.langye.net/',
changeOrigin: true, //配置跨域
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''

Write Preview
Loading…
Cancel
Save