刘翔宇-旅管家 3 years ago
parent 2c15fb82d4
commit 0057b4ebbd

@ -5,11 +5,12 @@
<div class="boxtitle"> <div class="boxtitle">
预约参观 预约参观
</div> </div>
<div class="boxcontentsubtitle">总预约人数/总入场人数</div> <div class="bline"></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_list.total.appointment.total" :duration="3600" /> <count-to separator="" :start-val="0" :end-val="totaldata.visit_list.total.appointment.total" :duration="3600" />
</div> </div>
<div class="boxcontentitem-small">团队{{totaldata.visit_list.total.appointment.team}}</div> <div class="boxcontentitem-small">团队{{totaldata.visit_list.total.appointment.team}}</div>
<div class="boxcontentitem-small">个人{{totaldata.visit_list.total.appointment.person}}</div> <div class="boxcontentitem-small">个人{{totaldata.visit_list.total.appointment.person}}</div>
@ -17,7 +18,7 @@
<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_list.total.enter.total" :duration="3600" /> <count-to separator="" :start-val="0" :end-val="totaldata.visit_list.total.enter.total" :duration="3600" />
</div> </div>
<div class="boxcontentitem-small">团队{{totaldata.visit_list.total.enter.team}}</div> <div class="boxcontentitem-small">团队{{totaldata.visit_list.total.enter.team}}</div>
<div class="boxcontentitem-small">个人{{totaldata.visit_list.total.enter.person}}</div> <div class="boxcontentitem-small">个人{{totaldata.visit_list.total.enter.person}}</div>
@ -27,11 +28,14 @@
核销比{{toCaculateper(totaldata.visit_list.total.enter.total,totaldata.visit_list.total.appointment.total)}} 核销比{{toCaculateper(totaldata.visit_list.total.enter.total,totaldata.visit_list.total.appointment.total)}}
</div> </div>
<div class="boxcontentsubtitle">今日预约人数/今日入场人数</div>
<div class="boxcline"></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_list.today.appointment.total" :duration="3600" /> <count-to separator="" :start-val="0" :end-val="totaldata.visit_list.today.appointment.total" :duration="3600" />
</div> </div>
<div class="boxcontentitem-small">团队{{totaldata.visit_list.today.appointment.team}}</div> <div class="boxcontentitem-small">团队{{totaldata.visit_list.today.appointment.team}}</div>
<div class="boxcontentitem-small">个人{{totaldata.visit_list.today.appointment.person}}</div> <div class="boxcontentitem-small">个人{{totaldata.visit_list.today.appointment.person}}</div>
@ -39,7 +43,7 @@
<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_list.today.enter.total" :duration="3600" /> <count-to separator="" :start-val="0" :end-val="totaldata.visit_list.today.enter.total" :duration="3600" />
</div> </div>
<div class="boxcontentitem-small">团队{{totaldata.visit_list.today.enter.team}}</div> <div class="boxcontentitem-small">团队{{totaldata.visit_list.today.enter.team}}</div>
<div class="boxcontentitem-small">个人{{totaldata.visit_list.today.enter.person}}</div> <div class="boxcontentitem-small">个人{{totaldata.visit_list.today.enter.person}}</div>
@ -55,12 +59,13 @@
<div class="boxtitle"> <div class="boxtitle">
活动参加 活动参加
</div> </div>
<div class="bline"></div>
<div class="boxcontentsubtitle">总报名人数/总核销人数</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_list.total.appointment.total" :duration="3600" /> <count-to separator="" :start-val="0" :end-val="totaldata.activity_list.total.appointment.total" :duration="3600" />
</div> </div>
<div class="boxcontentitem-small">团队{{totaldata.activity_list.total.appointment.team}}</div> <div class="boxcontentitem-small">团队{{totaldata.activity_list.total.appointment.team}}</div>
<div class="boxcontentitem-small">个人{{totaldata.activity_list.total.appointment.person}}</div> <div class="boxcontentitem-small">个人{{totaldata.activity_list.total.appointment.person}}</div>
@ -68,7 +73,7 @@
<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 separator="" :start-val="0" :end-val="totaldata.activity_list.total.enter.total" :duration="3600" />
</div> </div>
<div class="boxcontentitem-small">团队{{totaldata.activity_list.total.enter.team}}</div> <div class="boxcontentitem-small">团队{{totaldata.activity_list.total.enter.team}}</div>
<div class="boxcontentitem-small">个人{{totaldata.activity_list.total.enter.person}}</div> <div class="boxcontentitem-small">个人{{totaldata.activity_list.total.enter.person}}</div>
@ -78,11 +83,12 @@
核销比{{toCaculateper(totaldata.activity_list.total.enter.total,totaldata.activity_list.total.appointment.total)}} 核销比{{toCaculateper(totaldata.activity_list.total.enter.total,totaldata.activity_list.total.appointment.total)}}
</div> </div>
<div class="boxcontentsubtitle">今日报名人数/今日核销人数</div> <div class="boxcline"></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_list.today.appointment.total" :duration="3600" /> <count-to separator="" :start-val="0" :end-val="totaldata.activity_list.today.appointment.total" :duration="3600" />
</div> </div>
<div class="boxcontentitem-small">团队{{totaldata.activity_list.today.appointment.team}}</div> <div class="boxcontentitem-small">团队{{totaldata.activity_list.today.appointment.team}}</div>
<div class="boxcontentitem-small">个人{{totaldata.activity_list.today.appointment.person}}</div> <div class="boxcontentitem-small">个人{{totaldata.activity_list.today.appointment.person}}</div>
@ -90,7 +96,7 @@
<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.today.enter.total" :duration="3600" /> <count-to separator="" :start-val="0" :end-val="totaldata.activity_list.today.enter.total" :duration="3600" />
</div> </div>
<div class="boxcontentitem-small">团队{{totaldata.activity_list.today.enter.team}}</div> <div class="boxcontentitem-small">团队{{totaldata.activity_list.today.enter.team}}</div>
<div class="boxcontentitem-small">个人{{totaldata.activity_list.today.enter.person}}</div> <div class="boxcontentitem-small">个人{{totaldata.activity_list.today.enter.person}}</div>
@ -104,40 +110,48 @@
<div class="boxtitle"> <div class="boxtitle">
停车预约 停车预约
</div> </div>
<div class="boxcontentsubtitle">总预约数/总核销数</div> <div class="bline"></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.park_list.total.appointment" :duration="3600" /> <count-to separator="" :start-val="0" :end-val="totaldata.park_list.total.appointment" :duration="3600" />
</div> </div>
<div class="boxcontentitem-small"> </div> <div class="boxcontentitem-small"><span style="visibility: hidden;">0</span></div>
<div class="boxcontentitem-small"> </div> <div class="boxcontentitem-small"><span style="visibility: hidden;">0</span></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.park_list.total.enter" :duration="3600" /> <count-to separator="" :start-val="0" :end-val="totaldata.park_list.total.enter" :duration="3600" />
</div> </div>
<div class="boxcontentitem-small"><span style="visibility: hidden;">0</span></div>
<div class="boxcontentitem-small"><span style="visibility: hidden;">0</span></div>
</div> </div>
</div> </div>
<div class="boxfooter">核销比{{toCaculateper(totaldata.park_list.total.enter,totaldata.park_list.total.appointment)}}</div> <div class="boxfooter">
<div class="boxcontentsubtitle">今日预约数/今日核销数</div> 核销比{{toCaculateper(totaldata.park_list.total.enter,totaldata.park_list.total.appointment)}}</div>
<div class="boxcline"></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.park_list.today.appointment" :duration="3600" /> <count-to separator="" :start-val="0" :end-val="totaldata.park_list.today.appointment" :duration="3600" />
</div> </div>
<div class="boxcontentitem-small"> </div> <div class="boxcontentitem-small"><span style="visibility: hidden;">0</span></div>
<div class="boxcontentitem-small"> </div> <div class="boxcontentitem-small"><span style="visibility: hidden;">0</span></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.park_list.today.enter" :duration="3600" /> <count-to separator="" :start-val="0" :end-val="totaldata.park_list.today.enter" :duration="3600" />
</div> </div>
<div class="boxcontentitem-small"><span style="visibility: hidden;">0</span></div>
<div class="boxcontentitem-small"><span style="visibility: hidden;">0</span></div>
</div> </div>
</div> </div>
<div class="boxfooter">核销比{{toCaculateper(totaldata.park_list.today.enter,totaldata.park_list.today.appointment)}}</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>
@ -228,7 +242,7 @@
handleRoute(type) { handleRoute(type) {
this.$emit('handleRoute', type) this.$emit('handleRoute', type)
}, },
toCaculateper(f1,f2){ toCaculateper(f1, f2) {
return ((f1 / (f2 == 0 ? 1 : f2)) * 100).toFixed(2) + "%" return ((f1 / (f2 == 0 ? 1 : f2)) * 100).toFixed(2) + "%"
} }
} }
@ -254,6 +268,8 @@
width: 100%; width: 100%;
} }
.box { .box {
position: relative; position: relative;
width: 33%; width: 33%;
@ -263,8 +279,8 @@
box-shadow: 0px 8px 15px 0px rgba(212, 84, 32, 0.3100); box-shadow: 0px 8px 15px 0px rgba(212, 84, 32, 0.3100);
border-radius: 8px; border-radius: 8px;
box-sizing: border-box; box-sizing: border-box;
padding: 1.25rem;
opacity: 0.8; opacity: 0.8;
padding: 1.25rem 0;
.boxcontentsubtitle { .boxcontentsubtitle {
color: #FFFFFF; color: #FFFFFF;
@ -289,6 +305,7 @@
font-family: Source Han Sans CN; font-family: Source Han Sans CN;
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #FFFFFF;
padding: 0 1.25rem;
} }
.boxcontent { .boxcontent {
@ -299,12 +316,14 @@
.boxline { .boxline {
width: 1px; width: 1px;
height: 4.0625rem; height: 4.0625rem;
background: #FFFFFF; background: #FFFFFF00;
opacity: 0.3; opacity: 0.3;
margin-left: 2.0625rem; margin-left: 2.0625rem;
margin-right: 2.0625rem; margin-right: 2.0625rem;
} }
.boxcontentitem { .boxcontentitem {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -329,20 +348,59 @@
.box1 { .box1 {
background: linear-gradient(134deg, #D1AC7B, #DFC69C); background: linear-gradient(134deg, #D1AC7B, #DFC69C);
.boxcline {
width: 100%;
background: #DFC69C;
height: 0.125rem;
margin-top: 1.25rem;
margin-bottom: 1.25rem;
}
}
.bline {
background: linear-gradient(to right, rgba(255,255,255,0.3), rgba(255,255,255,0) 60%);
height: 0.25rem;
width: 100%;
margin-top: 1.25rem;
} }
.box2 { .box2 {
background: linear-gradient(134deg, #9193BC, #B7B9D4); background: linear-gradient(134deg, #9193BC, #B7B9D4);
.boxcline {
width: 100%;
background: #B7B9D4;
height: 0.125rem;
margin-top: 1.25rem;
margin-bottom: 1.25rem;
}
} }
.box3 { .box3 {
background: linear-gradient(-55deg, #F6A868, #F4C59E); background: linear-gradient(-55deg, #F6A868, #F4C59E);
.boxcline {
width: 100%;
background: #F4C59E;
height: 0.125rem;
margin-top: 1.25rem;
margin-bottom: 1.25rem;
}
} }
.box4 { .box4 {
background: linear-gradient(-55deg, #64A48E, #9ECABB); background: linear-gradient(-55deg, #64A48E, #9ECABB);
.boxcline {
width: 100%;
background: #9ECABB;
height: 0.125rem;
margin-top: 1.25rem;
margin-bottom: 1.25rem;
}
} }
.panel-group { .panel-group {

@ -33,7 +33,7 @@
</el-table-column> </el-table-column>
<el-table-column prop="cancel_total" label="取消人数" sortable> <el-table-column prop="cancel_total" label="取消人数" sortable>
</el-table-column> </el-table-column>
<el-table-column prop="expire_total" label="超时人数" sortable> <el-table-column prop="expire_total" label="过期人数" sortable>
</el-table-column> </el-table-column>
<el-table-column prop="per" label="核销比" sortable> <el-table-column prop="per" label="核销比" sortable>
</el-table-column> </el-table-column>

@ -33,7 +33,7 @@
</el-table-column> </el-table-column>
<el-table-column prop="cancel_total" label="取消车辆数" sortable> <el-table-column prop="cancel_total" label="取消车辆数" sortable>
</el-table-column> </el-table-column>
<el-table-column prop="expire_total" label="超时车辆数" sortable> <el-table-column prop="expire_total" label="过期车辆数" sortable>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>

Loading…
Cancel
Save