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

up

Browse Source
master
刘翔宇-旅管家 4 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) { export function totalRpt(params) {
return request({ return request({
url: '/api/admin/chart/total', //url: '/api/admin/chart/total',
url: '/api/admin/chart/total-v2',
method: 'get', method: 'get',
params: params 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="boxlist">
<div class="box box1"> <div class="box box1">
<div class="boxtitle"> <div class="boxtitle">
预约参观人数 预约参观
</div> </div>
<div class="boxcontentsubtitle">总预约人数/总入场人数</div>
<div class="boxcontent"> <div class="boxcontent">
<div class="boxcontentitem"> <div class="boxcontentitem">
<div class="boxcontentitem-big"> <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>
<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>
<div class="boxline"></div> <div class="boxline"></div>
<div class="boxcontentitem"> <div class="boxcontentitem">
<div class="boxcontentitem-big"> <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>
<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> </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_1.png" class="index_icon" />
<img src="../../../assets/imgs/index_icon_bg_1.png" class="index_bg" /> <img src="../../../assets/imgs/index_icon_bg_1.png" class="index_bg" />
</div> </div>
<div class="box box2"> <div class="box box2">
<div class="boxtitle"> <div class="boxtitle">
入场参观人次 活动参加
</div> </div>
<div class="boxcontentsubtitle">总报名人数/总核销人数</div>
<div class="boxcontent"> <div class="boxcontent">
<div class="boxcontentitem"> <div class="boxcontentitem">
<div class="boxcontentitem-big"> <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>
<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>
<div class="boxline"></div> <div class="boxline"></div>
<div class="boxcontentitem"> <div class="boxcontentitem">
<div class="boxcontentitem-big"> <div class="boxcontentitem-big">
<count-to :start-val="0" :end-val="totaldata.activity_list.total.enter.total" :duration="3600" />
<count-to :start-val="0" :end-val="totaldata.visit_enter.today" :duration="3600" />
</div> </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> </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_2.png" class="index_icon" />
<img src="../../../assets/imgs/index_icon_bg_1-21.png" class="index_bg" /> <img src="../../../assets/imgs/index_icon_bg_1-21.png" class="index_bg" />
</div> </div>
<div class="box box3"> <div class="box box4">
<div class="boxtitle"> <div class="boxtitle">
预约活动人次 停车预约
</div> </div>
<div class="boxcontentsubtitle">总预约数/总核销数</div>
<div class="boxcontent"> <div class="boxcontent">
<div class="boxcontentitem"> <div class="boxcontentitem">
<div class="boxcontentitem-big"> <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>
<div class="boxcontentitem-small">总人数</div> <div class="boxcontentitem-small"> </div>
<div class="boxcontentitem-small"> </div>
</div> </div>
<div class="boxline"></div> <div class="boxline"></div>
<div class="boxcontentitem"> <div class="boxcontentitem">
<div class="boxcontentitem-big"> <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>
<div class="boxcontentitem-small">今日</div>
</div> </div>
</div> </div>
<div class="boxfooter"></div> <div class="boxfooter">核销比：{{toCaculateper(totaldata.park_list.total.enter,totaldata.park_list.total.appointment)}}</div>
<img src="../../../assets/imgs/index_icon_3.png" class="index_icon" /> <div class="boxcontentsubtitle">今日预约数/今日核销数</div>
<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="boxcontent">
<div class="boxcontentitem"> <div class="boxcontentitem">
<div class="boxcontentitem-big"> <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>
<div class="boxcontentitem-small">总人数</div> <div class="boxcontentitem-small"> </div>
<div class="boxcontentitem-small"> </div>
</div> </div>
<div class="boxline"></div> <div class="boxline"></div>
<div class="boxcontentitem"> <div class="boxcontentitem">
<div class="boxcontentitem-big"> <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>
<div class="boxcontentitem-small">今日</div>
</div> </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_4.png" class="index_icon" />
<img src="../../../assets/imgs/index_icon_bg_4.png" class="index_bg" /> <img src="../../../assets/imgs/index_icon_bg_4.png" class="index_bg" />
</div> </div>
@ -109,23 +156,67 @@
totaldata: { totaldata: {
type: Object, type: Object,
default: { default: {
"visit_total": { "visit_list": {
"total": 0, "total": {
"today": 0 "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": { "activity_list": {
"total": 0, "total": {
"today": 0, "appointment": {
"per": 0 "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": { "park_list": {
"total": 0, "total": {
"today": 0 "appointment": 0,
}, "enter": 0
"activity_enter": { },
"total": 0, "today": {
"today": 0, "appointment": 0,
"per": 0 "enter": 0
}
} }
} }
} }
@ -136,6 +227,9 @@
methods: { methods: {
handleRoute(type) { handleRoute(type) {
this.$emit('handleRoute', type) this.$emit('handleRoute', type)
},
toCaculateper(f1,f2){
return ((f1 / (f2 == 0 ? 1 : f2)) * 100).toFixed(2) + "%"
} }
} }
} }
@ -162,7 +256,7 @@
.box { .box {
position: relative; position: relative;
width: 24%; width: 33%;
margin-left: 0.5%; margin-left: 0.5%;
margin-right: 0.5%; margin-right: 0.5%;
margin-bottom: 2.375rem; margin-bottom: 2.375rem;
@ -172,11 +266,22 @@
padding: 1.25rem; padding: 1.25rem;
opacity: 0.8; opacity: 0.8;
.boxcontentsubtitle {
color: #FFFFFF;
text-align: center;
display: flex;
justify-content: center;
font-size: 1.0625rem;
margin-top: 1.25rem;
}
.boxfooter { .boxfooter {
font-size: 1.0625rem; font-size: 1.0625rem;
font-family: Source Han Sans CN; font-family: Source Han Sans CN;
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #FFFFFF;
display: flex;
justify-content: center;
} }
.boxtitle { .boxtitle {
@ -208,7 +313,7 @@
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #FFFFFF;
text-align: center; text-align: center;
min-width: 30%; min-width: 40%;
.boxcontentitem-big { .boxcontentitem-big {
font-size: 2.625rem; font-size: 2.625rem;

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

@ -168,10 +168,6 @@
load() { load() {
// this.showData = true; // this.showData = true;
totalRpt().then(res => { 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; this.totaldata = res;
}) })

4
vue.config.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save