<style>
@import "../../assets/css/comSummary.css";
.leader .cir {
cursor: auto !important;
}
.leader .AddressIn {
text-align: center;
}
._DepartureCityName {
width: 130px;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cenTD {
text-align: center !important;
}
</style>
<template>
<div class="flexOne comSummary leader">
<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==$t('pub.day')||k.Week==$t('groun.liu'),'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="130">{{$t('system.table_city')}}</th>
<th width="100">{{$t('commonPickUp.Pick_LeaderNum')}}</th>
<th>{{$t('commonPickUp.Pick_TeamInfo')}}</th>
</tr>
<tr v-for="dList in dayList" :key="dList.subCode">
<el-tooltip class="item" effect="dark" :content="dList.DepartureCityName" placement="bottom-start" popper-class="max-w250">
<td>
<div class="_DepartureCityName">
<i class="iconfont icon-img_dizhi_small"></i>
{{dList.DepartureCityName}}
</div>
</td>
</el-tooltip>
<td class="cenTD">
{{dList.LeaderCount}}
</td>
<td class="cenTD">
<i class="iconfont icon-img-ren"></i>
{{dList.FinishedNumber}}{{$t('commonPickUp.Pick_Pnum')}}({{dList.Count}}{{$t('commonPickUp.Pick_Team')}})
</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 v-if="st.LeaderName">{{st.LeaderName}}</span>
<span v-else>{{$t('ground.wuxinxi')}}</span>
</div>
</td>
<td v-for="(k,lineindex) in Calendar" :key="k.subCode" min-height="80px;" @mouseover="columnsMouseOver(lineindex)">
<div v-for="(ss,index) in st.SubList" :key="ss.subCode" v-if="ss.DayStr==k.CurrentDay">
<!-- <div v-if="ss.DayStr==k.CurrentDay"> -->
<div class="cir" slot="reference" :class="{'stateOne':ss.OrderState==0,'stateTwo':ss.OrderState==1,'stateThree':ss.OrderState==-1,'stateFour':ss.OrderState==2,'disNoneCir':ss.OrderState==-100}"></div>
<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" :content="ss.CityName" placement="bottom-start" popper-class="max-w250">
<div class="AddressIn">{{ss.CityName}}</div>
</el-tooltip>
<!-- </div> -->
</div>
<div class="leftLine" v-if="lineindex==columnLine"></div>
<div class="rightLine" v-if="lineindex==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(
"LeaderSchedule_get_GetLeaderSummary",
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();
},
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(
"LeaderSchedule_get_GetLeaderSummaryDay",
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>