<template>
|
<div class="finance-del">
|
<v-header
|
title="预约汇总"
|
></v-header>
|
<div class="add">
|
<span class="back-color" @click="back"><i class="el-icon-arrow-left"></i>返回上一级</span>
|
</div>
|
<el-form :inline="true" class="demo-form-inline">
|
<el-form-item>
|
<div class="block">
|
<span class="demonstration">预约日期</span>
|
<el-date-picker
|
v-model="time"
|
@change="changeTime"
|
type="daterange"
|
format="yyyy-MM-dd"
|
value-format="yyyy-MM-dd"
|
range-separator="至"
|
:clearable="false"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期">
|
</el-date-picker>
|
<button class="m_btn bgc_primary min-width" @click="Reset()">重 置</button>
|
<button class="m_btn bgc_primary min-width" @click="exports()">导 出</button>
|
</div>
|
</el-form-item>
|
</el-form>
|
<!-- data -->
|
<div class="dataBox">
|
<el-calendar v-model="calendar">
|
<!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
|
<template
|
slot="dateCell"
|
slot-scope="{date, data}">
|
<p @click="calendarOnClick(data)">
|
<span>
|
{{ data.day.split('-').slice(1).join('-') }}<br />
|
</span>
|
<span class="data-color">
|
{{dealMyDate(data.day)}}
|
</span>
|
</p>
|
</template>
|
</el-calendar>
|
</div>
|
|
<div class="tab">
|
<v-tool-table
|
:trs="trs"
|
:tds="tds"
|
>
|
</v-tool-table>
|
</div>
|
|
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props: [],
|
components: {},
|
data() {
|
return {
|
time:[],
|
calendar:new Date(),
|
os: {},
|
trs: [
|
{ text: "日期", val: "reserveTime" },
|
{ text: "预约主题", val: "title" },
|
{ text: "所占百分比", val: "tag" },
|
{ text: "预约量", val: "count" },
|
{ text: "每日合计", val: "allCount" },
|
],
|
tds: [],
|
startTime:'',
|
endTime:'',
|
resDate: []
|
};
|
},
|
|
|
mounted() {
|
this.init();
|
},
|
|
methods: {
|
dealMyDate(v) {
|
let len = this.resDate.length
|
let res = ""
|
for(let i=0; i<len; i++){
|
if(this.resDate[i].reserveTime == v) {
|
res = this.resDate[i].count +'个已预约'
|
break
|
}
|
}
|
return res
|
},
|
|
Reset() {
|
this.time = '';
|
this.startTime = '';
|
this.endTime = '';
|
this.init();
|
},
|
|
back() {
|
this.$router.back();
|
},
|
|
changeTime() {
|
this.startTime = this.time[0];
|
this.endTime = this.time[1];
|
this.init();
|
},
|
|
//点击日期块
|
calendarOnClick(e) {
|
console.log(e);
|
this.startTime = e.day;
|
this.endTime = '';
|
this.init()
|
},
|
|
init() {
|
let params = {
|
endTime: this.endTime,
|
startTime: this.startTime,
|
};
|
|
this.$api.post("reserve/make/statistics", params, (e) => {
|
this.resDate = e.leftStatisticsList;
|
this.tds = (e.rightStatisticsList || []).map((v) => {
|
this.$set(v, 'che', false)
|
return v;
|
});
|
});
|
|
},
|
|
//导出
|
exports() {
|
let params = {
|
endTime: this.endTime,
|
startTime: this.startTime,
|
}
|
this.$api.post("reserve/make/statistics/export", params, (e) => {
|
window.location.href = e;
|
});
|
},
|
|
|
},
|
};
|
</script>
|
|
<style scoped lang="less">
|
.tab {
|
width: 600px;
|
height: 650px;
|
float: left;
|
overflow-y: auto;
|
outline:1px solid #EBEEF5;
|
}
|
.dataBox {
|
width: 600px;
|
height: 650px;
|
float: left;
|
margin-right: 25px;
|
border:1px solid #EBEEF5;
|
}
|
.finance-del {
|
overflow: scroll;
|
}
|
.demo_hidden::-webkit-scrollbar {
|
display: block !important;
|
}
|
.finance-del{
|
overflow-y: auto;
|
// height: 700px;
|
}
|
.tab::-webkit-scrollbar {
|
/*滚动条整体样式*/
|
width : 3px; /*高宽分别对应横竖滚动条的尺寸*/
|
height: 1px;
|
}
|
.tab::-webkit-scrollbar-thumb {
|
/*滚动条里面小方块*/
|
border-radius: 5px;
|
background : #999;
|
}
|
.tab::-webkit-scrollbar-track {
|
/*滚动条里面轨道*/
|
border-radius: 5px;
|
background : #ededed;
|
}
|
.add {
|
text-align: right;
|
padding-bottom: 20px;
|
.back-color {
|
color: #409EFF;
|
cursor: pointer;
|
}
|
}
|
.bgc_primary {
|
margin-bottom: 15px;
|
}
|
.min-width {
|
width: 70px;
|
}
|
.data-color {
|
color: #F56C6C;
|
}
|
</style>
|
