<template>
<div style="margin:10px;">
<el-card>
<el-date-picker
v-model="boothDate"
type="date"
style="margin-bottom:20px;"
placeholder="选择日期"
value-format="yyyy-MM-dd"
:clearable="false"
:picker-options="pickerOptions"
@change="getConditionList();getExbList()" //根据日期变化同时调用两个函数
> </el-date-picker>
<div class="top-row">
<el-table ref="multipleTable" v-loading="loading" :data="tableData" border style="margin-bottom:50px;">
<el-table-column type="index" label="序号" width="60" align="center"/>
<el-table-column prop="client_type_name" label="客户类型" align="center" />
<el-table-column prop="register_num" label="登记总数" align="center"/>
<el-table-column prop="splus_all" label="入展总数" align="center" />
<el-table-column prop="splus_1_day" :label="firstDay" align="center" />
<el-table-column prop="splus_2_day" :label="twoDay" align="center" />
<el-table-column prop="splus_3_day" :label="threeDay" align="center" />
<el-table-column prop="splus_4_day" :label="fourDay" align="center" />
</el-table>
</div>
<div class="top-row">
<el-table ref="multipleTable" v-loading="loading" :data="tableData1" border>
<el-table-column type="index" label="序号" width="60" align="center"/>
<el-table-column prop="building_name" label="展馆" align="center" />
<el-table-column prop="room_name" label="展位" align="center"/>
<el-table-column prop="tenant_name" label="展商名" align="center" />
<el-table-column prop="splus_all" label="S+数量" align="center" />
<el-table-column prop="splus_1_day" :label="firstDay" align="center" />
<el-table-column prop="splus_2_day" :label="twoDay" align="center" />
<el-table-column prop="splus_3_day" :label="threeDay" align="center" />
<el-table-column prop="splus_4_day" :label="fourDay" align="center" />
</el-table>
</div>
</el-card>
</div>
</template>
<script>
import {queryConditionList,queryExbList} from '@/api/common.js' //传入后台接口方法
export default {
data() {
return {
tableData:[], //表格数据源
tableData1:[],
boothDate:'', //时间框绑定数据
firstDay:'', //前三天
twoDay:'', //前两天
threeDay:'', //前一天
fourDay:'', //当天
loading:true, //加载状态
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now(); //今天之后禁用
}
},
}
},
created() {
//默认获取当天日期
let toDay = new Date()
this.boothDate = this.addDate(toDay,0)
//查询
this.getConditionList()
this.getExbList()
},
methods: {
//查询列表
getConditionList(){
let params = {
time:this.boothDate
}
queryConditionList(params).then(res=>{
this.loading = false
this.tableData = res.data //列表数据赋值
this.firstDay = this.addDate(this.boothDate,-3) //前三天数据
this.twoDay = this.addDate(this.boothDate,-2) //前两天数据
this.threeDay = this.addDate(this.boothDate,-1) //前一天数据
this.fourDay = this.boothDate //当天数据
})
},
getExbList(){
let params = {
time:this.boothDate
}
queryExbList(params).then(res=>{
this.loading = false
this.tableData1 = res.data
this.firstDay = this.addDate(this.boothDate,-3)
this.twoDay = this.addDate(this.boothDate,-2)
this.threeDay = this.addDate(this.boothDate,-1)
this.fourDay = this.boothDate
})
},
//获取日期的
addDate(date,addDays){ //date传入你需要的日期，格式"xxxx-xx-xx"。addDays传要加减的日期数，往前传正数，往后传负数
var Dates = new Date(date);
Dates.setDate(Dates.getDate() + addDays);
var mon = Dates.getMonth() + 1,
day = Dates.getDate();
if(mon < 10){
mon = "0" + mon;//月份小于10，在前面补充0
}
if(day < 10){
day = "0" + day;//日小于10，在前面补充0
}
return Dates.getFullYear() + "-" + mon + "-" +day;
},
},
}
</script>
<style scoped>
</style>