<style>
@import "../../assets/css/comSummary.css";
</style>
<template>
<div class="flexOne comSummary">
<div class="mainSummary">
<table class="summaryTable" cellspacing="0">
<thead>
<th>
<div class="leftDay">
<div class="leftDayTop">
<span class="yearCircle"></span>{{nowYear}}<span class="yearCircle"></span>
<div class="rili LI1"></div>
<div class="rili LI2"></div>
</div>
<span class="monthNum">{{nowMonth}}</span>
<span class="monthLis">{{$t('pub.month')}}</span>
</div>
</th>
<th>
<div class="Arrow" @click="leftClick()">
<i class="iconfont icon-previewleft"></i>
</div>
</th>
<th v-for="(k,index) in Calendar" :key="k.subCode" :class="{'redType':k.Week=='日'||k.Week=='六','ckedTd':index==columnLine&&dataList!=''}" @click="getDayInfo(k.CurrentYear,k.CurrentMonth,k.CurrentDay)" @mouseover="columnsMouseOver(index)">
<el-popover
placement="bottom"
width="360"
trigger="click">
<div class="_topInfo"><span class="_leftTy"></span>{{k.CurrentYear+"-"+k.CurrentMonth+"-"+k.CurrentDay}}<span class="TJtitle">{{$t('commonPickUp.Pick_Data')}}</span></div>
<div class="comdayListDiv">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="dayListTable">
<tr>
<th width="120">{{$t('system.table_city')}}</th>
<th width="130">{{$t('commonPickUp.Pick_attractions')}}</th>
<th>{{$t('commonPickUp.Pick_UsedNum')}}</th>
</tr>
<tr v-for="dList in dayList" :key="dList.subCode">
<td>
<div class="_cityName">
<i class="iconfont icon-img_dizhi_small"></i>
{{dList.CityName}}
</div>
</td>
<td>
<div v-for="dl in dList.SubList" class="htName" :key="dl.subCode">
<i class="iconfont icon-jiudian"></i>
{{dl.CouponsName}}
</div>
</td>
<td>
<div v-for="dl in dList.SubList" :key="dl.subCode">
<i class="iconfont icon-img-ren"></i>{{dl.FinishedNumber}}{{$t('commonPickUp.Pick_Pnum')}}({{dl.Count}}{{$t('commonPickUp.Pick_Team')}})
</div>
</td>
</tr>
</table>
</div>
<div slot="reference">
<div class="_week">{{k.Week}}</div>
<div class="_monthDay" v-if="k.CurrentDay==1">
<span>{{k.CurrentMonthCn}}<br/>{{$t('pub.month')}}</span>
</div>
<div class="_day" v-else>{{k.CurrentDay}}</div>
<div class="_longli">{{k.LunarDayCn}}</div>
</div>
</el-popover>
<div class="_lineSummary" v-if="index==columnLine&&dataList!=''"></div>
</th>
<th>
<div class="Arrow" @click="rightClick()">
<i class="iconfont icon-arrow-right"></i>
</div>
</th>
</thead>
<tbody>
<tr v-for="st in dataList" :key="st.subCode">
<td colspan="2">
<div>
<span class="tType">{{$t('commonPickUp.Pick_Team')}}</span>
<span class="TeamNum">{{st.TCNUM}}</span>
</div>
<div class="teamChild">
<i class="iconfont icon-img-ren"></i><span>{{st.FinishedNumber}}<span v-if="st.LeaderNumber>0">+{{st.LeaderNumber}}</span></span>
</div>
</td>
<td v-for="(k,index) in Calendar" :key="k.subCode" height="80px;" @mouseover="columnsMouseOver(index)">
<div v-for="(ss,index) in st.SubList" :key="ss.subCode">
<div v-if="ss.DayStr==k.CurrentDay">
<el-popover
placement="bottom"
width="300"
trigger="click">
<div v-for="info in infoList" :key="info.subCode">
<div class="clearfix">
<div class="_leTitle">{{$t('commonPickUp.Pick_OrderInfo')}}</div>
<div class="_orderId">{{info.ID}}</div>
</div>
<div class="_hotelName">
<i class="iconfont icon-jiudian"></i>
<span>{{info.CouponsName}}</span>
</div>
<div class="clearfix _hotelName">
<div class="_biao">
<i class="iconfont icon-chuang"></i>
{{info.TicketName}}
</div>
<div class="_biaoRight">
<i class="iconfont icon-img-ren"></i>
{{info.UseAccount}}{{$t('commonPickUp.Pick_Pnum')}}
</div>
</div>
<div class="clearfix _hotelName">
<div class="_biao">
<i class="iconfont icon-img_rili"></i>
{{info.UseTime}}
</div>
<div class="_biaoRight" v-if="info.State==0">
<i class="iconfont icon-yiqueren toQueren"></i>
{{info.StateStr}}
</div>
<div class="_biaoRight" v-if="info.State==1">
<i class="iconfont icon-yiqueren"></i>
{{info.StateStr}}
</div>
<div class="_biaoRight" v-if="info.State==2">
<i class="iconfont icon-quxiao"></i>
{{info.StateStr}}
</div>
</div>
</div>
<div class="cir" slot="reference" @click="getOrder(st.TCID,ss.JourneyDateStr)" :class="{'stateOne':ss.OrderState==0,'stateTwo':ss.OrderState==1,'stateThree':ss.OrderState==-1,'stateFour':ss.OrderState==2,'disNoneCir':ss.OrderState==-100}"></div>
</el-popover>
<div class="circleDiv" v-if="ss.OrderState==-100">
<div class="lineLeftList"></div>
<div class="lineRightList"></div>
</div>
<div class="circleDiv" v-else>
<div class="lineleft" :class="{'disNone':index==0}"></div>
<div class="lineright" :class="{'disNone':index==st.SubList.length-1}"></div>
</div>
<el-tooltip class="item" effect="dark" v-if="ss.CouponsName" :content="ss.CouponsName" placement="bottom-start" popper-class="max-w250">
<div class="listName">{{ss.CouponsName}}</div>
</el-tooltip>
<el-tooltip class="item" effect="dark" v-if="ss.CityName" :content="ss.CityName" placement="bottom-start" popper-class="max-w250">
<div class="AddressIn">{{ss.CityName}}</div>
</el-tooltip>
</div>
<div v-else>
</div>
</div>
<div class="leftLine" v-if="index==columnLine"></div>
<div class="rightLine" v-if="index==columnLine"></div>
</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script>
export default {
data() {
return {
msg: {
StartDate: new Date().Format("yyyy-MM-dd"),
EndDate: ""
},
loading: true,
dataList: "",
tempDataList: [],
Calendar: "", //绑定数据的日历
CalendarDataArray: [], //存放数据的日历
infoList: "",
dayList: "",
nowYear: "",
nowMonth: "",
QStartDate: "",
QEndDate: "",
dayNum: 25, //默认加载天数
columnLine: -1
};
},
methods: {
//初始化日历数据
initData() {
let startYear = this.msg.StartDate.split("-")[0];
let startMonth = this.msg.StartDate.split("-")[1];
var data = this.$lunarCalendar.initLunar(
startYear,
startMonth,
this.dayNum
);
this.CalendarDataArray = data;
this.QStartDate = data[0].CurrentDate;
this.QEndDate = data[data.length - 1].CurrentDate;
this.Calendar = this.CalendarDataArray;
},
getList() {
this.apipost(
"ticketcoupons_get_GetTicketCouponsSummary",
this.msg,
res => {
if (res.data.resultCode == 1) {
this.dataList = res.data.data;
this.tempDataList = res.data.data;
}
},
null
);
},
//左侧点击
leftClick() {
var tempStartDate = this.$lunarCalendar.changeLunar(this.QStartDate, -1);
this.CalendarDataArray.unshift(tempStartDate);
this.nowYear = tempStartDate.CurrentYear;
this.nowMonth = tempStartDate.CurrentMonth;
this.CalendarDataArray.pop(); //删除最后一个元素
this.Calendar = this.CalendarDataArray;
this.QStartDate = tempStartDate.CurrentDate;
this.QEndDate = this.CalendarDataArray[
this.CalendarDataArray.length - 1
].CurrentDate;
this.msg.StartDate = tempStartDate.CurrentDate;
this.msg.EndDate = this.CalendarDataArray[
this.CalendarDataArray.length - 1
].CurrentDate;
this.getList();
},
//右侧点击事件
rightClick() {
var tempEndDate = this.$lunarCalendar.changeLunar(this.QEndDate, 1);
this.CalendarDataArray.push(tempEndDate);
this.nowYear = tempEndDate.CurrentYear;
this.nowMonth = tempEndDate.CurrentMonth;
this.CalendarDataArray.shift(); //删除第一个元素
this.Calendar = this.CalendarDataArray;
this.QStartDate = this.CalendarDataArray[0].CurrentDate;
this.QEndDate = tempEndDate.CurrentDate;
this.msg.StartDate = this.CalendarDataArray[0].CurrentDate;
this.msg.EndDate = tempEndDate.CurrentDate;
this.getList();
},
getOrder(TCID, StartDate) {
let msg = {
TCID: TCID.toString(),
StartDate: StartDate
};
this.apipost(
"ticketcoupons_get_GetTicketCouponsSummaryOrder",
msg,
res => {
if (res.data.resultCode == 1) {
this.infoList = res.data.data;
}
},
null
);
},
columnsMouseOver(obj) {
this.columnLine = obj;
},
getEndDay() {
var date1 = this.msg.StartDate;
var date2 = new Date(date1);
var c = date2.getDate();
var d = new Date(date2.setDate(c + 24));
this.msg.EndDate = d.Format("yyyy-MM-dd");
},
getDayInfo(Y, M, D) {
let StartDate = Y + "-" + M + "-" + D;
let msg = {
StartDate: StartDate
};
this.apipost(
"ticketcoupons_get_GetTicketCouponsSummaryDay",
msg,
res => {
if (res.data.resultCode == 1) {
this.dayList = res.data.data;
}
},
null
);
}
},
mounted() {
this.initData();
this.getEndDay();
this.getList();
let nowDate = new Date().Format("yyyy-MM-dd");
this.nowYear = nowDate.split("-")[0];
this.nowMonth = parseInt(nowDate.split("-")[1]);
}
};
</script>