532 lines
17 KiB
Vue
532 lines
17 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<classe @classelist="classelist" style="width: 500px; display: inline;" ref="classe"></classe>
|
|
<parent @parentlist="parentlist" style="width: 500px; display: inline;" ref="resets"></parent>
|
|
<el-form size="small" :inline="true" v-show="showSearch">
|
|
<el-form-item label="日期" prop="orderStatus" label-width="60px">
|
|
<el-date-picker
|
|
v-model="valuetime"
|
|
type="daterange"
|
|
align="right"
|
|
@change="monthStartEndTimechange"
|
|
unlink-panels
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
:picker-options="pickerOptions"
|
|
></el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="getlist">搜索</el-button>
|
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-table v-loading="loading" :data="list">
|
|
<el-table-column label="家长姓名" align="center" prop="parentName" />
|
|
<el-table-column label="打卡天数" align="center" prop="loginCount" />
|
|
<el-table-column label="查看打卡日历" align="center" prop>
|
|
<template slot-scope="scope">
|
|
<el-button type="text" @click="look(scope.row)">查看</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<pagination
|
|
v-show="total > 0"
|
|
:total="total"
|
|
:page.sync="query.pageNum"
|
|
:limit.sync="query.pageSize"
|
|
@pagination="getlist"
|
|
/>
|
|
<el-dialog width="1600px" title="打卡统计" :visible.sync="loginCountshow" append-to-body>
|
|
<div class="picker">
|
|
年度：
|
|
<el-date-picker
|
|
v-model="year"
|
|
type="year"
|
|
placeholder="选择年"
|
|
format="yyyy"
|
|
value-format="yyyy"
|
|
></el-date-picker>
|
|
</div>
|
|
<div class="dio" @click="false">
|
|
<el-calendar v-model="yearmonths[0]" style="width:380px">
|
|
<template slot="dateCell" slot-scope="{date, data}">
|
|
<div :class="{ selected : isSelected(date, data) }" style="font-size:14px">
|
|
<div class="solar" style="font-size:14px">{{ data.day.split('-')[2] }}</div>
|
|
<div
|
|
class="lunar"
|
|
style="font-size:2px"
|
|
:class="{ festival : isFestival(date, data) }"
|
|
>{{ solarToLunar(date, data) }}</div>
|
|
</div>
|
|
</template>
|
|
</el-calendar>
|
|
<el-calendar v-model="yearmonths[1]" style="width:380px">
|
|
<template slot="dateCell" slot-scope="{date, data}">
|
|
<div :class="{ selected : isSelected(date, data) }" style="font-size:14px">
|
|
<div class="solar" style="font-size:14px">{{ data.day.split('-')[2] }}</div>
|
|
<div
|
|
class="lunar"
|
|
style="font-size:2px"
|
|
:class="{ festival : isFestival(date, data) }"
|
|
>{{ solarToLunar(date, data) }}</div>
|
|
</div>
|
|
</template>
|
|
</el-calendar>
|
|
<el-calendar v-model="yearmonths[2]" style="width:380px">
|
|
<template slot="dateCell" slot-scope="{date, data}">
|
|
<div :class="{ selected : isSelected(date, data) }" style="font-size:14px">
|
|
<div class="solar" style="font-size:14px">{{ data.day.split('-')[2] }}</div>
|
|
<div
|
|
class="lunar"
|
|
style="font-size:2px"
|
|
:class="{ festival : isFestival(date, data) }"
|
|
>{{ solarToLunar(date, data) }}</div>
|
|
</div>
|
|
</template>
|
|
</el-calendar>
|
|
<el-calendar v-model="yearmonths[3]" style="width:380px">
|
|
<template slot="dateCell" slot-scope="{date, data}">
|
|
<div :class="{ selected : isSelected(date, data) }" style="font-size:14px">
|
|
<div class="solar" style="font-size:14px">{{ data.day.split('-')[2] }}</div>
|
|
<div
|
|
class="lunar"
|
|
style="font-size:2px"
|
|
:class="{ festival : isFestival(date, data) }"
|
|
>{{ solarToLunar(date, data) }}</div>
|
|
</div>
|
|
</template>
|
|
</el-calendar>
|
|
<el-calendar v-model="yearmonths[4]" style="width:380px">
|
|
<template slot="dateCell" slot-scope="{date, data}">
|
|
<div :class="{ selected : isSelected(date, data) }" style="font-size:14px">
|
|
<div class="solar" style="font-size:14px">{{ data.day.split('-')[2] }}</div>
|
|
<div
|
|
class="lunar"
|
|
style="font-size:2px"
|
|
:class="{ festival : isFestival(date, data) }"
|
|
>{{ solarToLunar(date, data) }}</div>
|
|
</div>
|
|
</template>
|
|
</el-calendar>
|
|
<el-calendar v-model="yearmonths[5]" style="width:380px">
|
|
<template slot="dateCell" slot-scope="{date, data}">
|
|
<div :class="{ selected : isSelected(date, data) }" style="font-size:14px">
|
|
<div class="solar" style="font-size:14px">{{ data.day.split('-')[2] }}</div>
|
|
<div
|
|
class="lunar"
|
|
style="font-size:2px"
|
|
:class="{ festival : isFestival(date, data) }"
|
|
>{{ solarToLunar(date, data) }}</div>
|
|
</div>
|
|
</template>
|
|
</el-calendar>
|
|
<el-calendar v-model="yearmonths[6]" style="width:380px">
|
|
<template slot="dateCell" slot-scope="{date, data}">
|
|
<div :class="{ selected : isSelected(date, data) }" style="font-size:14px">
|
|
<div class="solar" style="font-size:14px">{{ data.day.split('-')[2] }}</div>
|
|
<div
|
|
class="lunar"
|
|
style="font-size:2px"
|
|
:class="{ festival : isFestival(date, data) }"
|
|
>{{ solarToLunar(date, data) }}</div>
|
|
</div>
|
|
</template>
|
|
</el-calendar>
|
|
<el-calendar v-model="yearmonths[7]" style="width:380px">
|
|
<template slot="dateCell" slot-scope="{date, data}">
|
|
<div :class="{ selected : isSelected(date, data) }" style="font-size:14px">
|
|
<div class="solar" style="font-size:14px">{{ data.day.split('-')[2] }}</div>
|
|
<div
|
|
class="lunar"
|
|
style="font-size:2px"
|
|
:class="{ festival : isFestival(date, data) }"
|
|
>{{ solarToLunar(date, data) }}</div>
|
|
</div>
|
|
</template>
|
|
</el-calendar>
|
|
<el-calendar v-model="yearmonths[8]" style="width:380px">
|
|
<template slot="dateCell" slot-scope="{date, data}">
|
|
<div :class="{ selected : isSelected(date, data) }" style="font-size:14px">
|
|
<div class="solar" style="font-size:14px">{{ data.day.split('-')[2] }}</div>
|
|
<div
|
|
class="lunar"
|
|
style="font-size:2px"
|
|
:class="{ festival : isFestival(date, data) }"
|
|
>{{ solarToLunar(date, data) }}</div>
|
|
</div>
|
|
</template>
|
|
</el-calendar>
|
|
<el-calendar v-model="yearmonths[9]" style="width:380px">
|
|
<template slot="dateCell" slot-scope="{date, data}">
|
|
<div :class="{ selected : isSelected(date, data) }" style="font-size:14px">
|
|
<div class="solar" style="font-size:14px">{{ data.day.split('-')[2] }}</div>
|
|
<div
|
|
class="lunar"
|
|
style="font-size:2px"
|
|
:class="{ festival : isFestival(date, data) }"
|
|
>{{ solarToLunar(date, data) }}</div>
|
|
</div>
|
|
</template>
|
|
</el-calendar>
|
|
<el-calendar v-model="yearmonths[10]" style="width:380px">
|
|
<template slot="dateCell" slot-scope="{date, data}">
|
|
<div :class="{ selected : isSelected(date, data) }" style="font-size:14px">
|
|
<div class="solar" style="font-size:14px">{{ data.day.split('-')[2] }}</div>
|
|
<div
|
|
class="lunar"
|
|
style="font-size:2px"
|
|
:class="{ festival : isFestival(date, data) }"
|
|
>{{ solarToLunar(date, data) }}</div>
|
|
</div>
|
|
</template>
|
|
</el-calendar>
|
|
<el-calendar v-model="yearmonths[11]" style="width:380px">
|
|
<template slot="dateCell" slot-scope="{date, data}">
|
|
<div :class="{ selected : isSelected(date, data) }" style="font-size:14px">
|
|
<div class="solar" style="font-size:14px">{{ data.day.split('-')[2] }}</div>
|
|
<div
|
|
class="lunar"
|
|
style="font-size:2px"
|
|
:class="{ festival : isFestival(date, data) }"
|
|
>{{ solarToLunar(date, data) }}</div>
|
|
</div>
|
|
</template>
|
|
</el-calendar>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { clockStatistics } from "@/api/system/StatisticsParent";
|
|
import classe from "../../assembly/classe.vue";
|
|
import parent from "../../assembly/parent.vue";
|
|
import calendar from "../../calendar.js";
|
|
export default {
|
|
name: "StatisticsParent",
|
|
components: { classe, parent },
|
|
data() {
|
|
return {
|
|
loginCountshow: false,
|
|
pickerOptions: {
|
|
shortcuts: [
|
|
{
|
|
text: "最近一周",
|
|
onClick(picker) {
|
|
const end = new Date();
|
|
const start = new Date();
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
|
picker.$emit("pick", [start, end]);
|
|
}
|
|
},
|
|
{
|
|
text: "最近一个月",
|
|
onClick(picker) {
|
|
const end = new Date();
|
|
const start = new Date();
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
|
picker.$emit("pick", [start, end]);
|
|
}
|
|
},
|
|
{
|
|
text: "最近三个月",
|
|
onClick(picker) {
|
|
const end = new Date();
|
|
const start = new Date();
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
|
picker.$emit("pick", [start, end]);
|
|
}
|
|
}
|
|
]
|
|
},
|
|
valuetime: "",
|
|
loading: false,
|
|
showSearch: true, // 显示搜索条件
|
|
list: [],
|
|
total: 0,
|
|
query: {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
parentInfoId: "",
|
|
classId: "",
|
|
startDate: "",
|
|
endDate: ""
|
|
},
|
|
selectedDates: ["2023-03-12", "2023-04-12", "2023-04-15", "2023-04-24"],
|
|
date: new Date(),
|
|
yearmonths: [],
|
|
year: "2023"
|
|
};
|
|
},
|
|
created() {
|
|
this.newtime();
|
|
this.getlist();
|
|
},
|
|
mounted() {},
|
|
watch: {
|
|
year() {
|
|
this.yearmonths = [
|
|
this.year + "-01",
|
|
this.year + "-02",
|
|
this.year + "-03",
|
|
this.year + "-04",
|
|
this.year + "-05",
|
|
this.year + "-06",
|
|
this.year + "-07",
|
|
this.year + "-08",
|
|
this.year + "-09",
|
|
this.year + "-10",
|
|
this.year + "-11",
|
|
this.year + "-12"
|
|
];
|
|
}
|
|
},
|
|
methods: {
|
|
// 是否选中日期
|
|
isSelected: function(slotDate, slotData) {
|
|
return this.selectedDates.includes(slotData.day);
|
|
},
|
|
// 是否节假日
|
|
isFestival(slotDate, slotData) {
|
|
let solarDayArr = slotData.day.split("-");
|
|
let lunarDay = calendar.solar2lunar(
|
|
solarDayArr[0],
|
|
solarDayArr[1],
|
|
solarDayArr[2]
|
|
);
|
|
// 公历节日\农历节日\农历节气
|
|
let festAndTerm = [];
|
|
festAndTerm.push(
|
|
lunarDay.festival == null ? "" : " " + lunarDay.festival
|
|
);
|
|
festAndTerm.push(
|
|
lunarDay.lunarFestival == null ? "" : "" + lunarDay.lunarFestival
|
|
);
|
|
festAndTerm.push(lunarDay.Term == null ? "" : "" + lunarDay.Term);
|
|
festAndTerm = festAndTerm.join("");
|
|
return festAndTerm != "";
|
|
},
|
|
// 公历转农历
|
|
solarToLunar(slotDate, slotData) {
|
|
let solarDayArr = slotData.day.split("-");
|
|
let lunarDay = calendar.solar2lunar(
|
|
solarDayArr[0],
|
|
solarDayArr[1],
|
|
solarDayArr[2]
|
|
);
|
|
// 农历日期
|
|
let lunarMD = lunarDay.IMonthCn + lunarDay.IDayCn;
|
|
// 公历节日\农历节日\农历节气
|
|
let festAndTerm = [];
|
|
festAndTerm.push(
|
|
lunarDay.festival == null ? "" : " " + lunarDay.festival
|
|
);
|
|
festAndTerm.push(
|
|
lunarDay.lunarFestival == null ? "" : "" + lunarDay.lunarFestival
|
|
);
|
|
festAndTerm.push(lunarDay.Term == null ? "" : "" + lunarDay.Term);
|
|
festAndTerm = festAndTerm.join("");
|
|
|
|
return festAndTerm == "" ? lunarMD : festAndTerm;
|
|
},
|
|
//获取list
|
|
getlist() {
|
|
clockStatistics(
|
|
this.query.pageNum,
|
|
this.query.pageSize,
|
|
this.query.parentInfoId,
|
|
this.query.classId,
|
|
this.query.startDate,
|
|
this.query.endDate
|
|
).then(res => {
|
|
this.list = res.rows;
|
|
this.total = res.total;
|
|
});
|
|
},
|
|
//今天的时间
|
|
newtime() {
|
|
let nowDate = new Date();
|
|
let dates = {
|
|
year: nowDate.getFullYear(), // 获取当前年份
|
|
month: nowDate.getMonth() + 1, //获取当前月份
|
|
date: nowDate.getDate() //获取当前日期
|
|
};
|
|
this.yearmonths = [
|
|
dates.year + "-01",
|
|
dates.year + "-02",
|
|
dates.year + "-03",
|
|
dates.year + "-04",
|
|
dates.year + "-05",
|
|
dates.year + "-06",
|
|
dates.year + "-07",
|
|
dates.year + "-08",
|
|
dates.year + "-09",
|
|
dates.year + "-10",
|
|
dates.year + "-11",
|
|
dates.year + "-12"
|
|
];
|
|
console.log(this.year);
|
|
// //拼接
|
|
// if (dates.month < 10) {
|
|
// this.query.startDate = dates.year + "-0" + dates.month;
|
|
// this.query.endDate = dates.year + "-0" + dates.month;
|
|
// } else {
|
|
// this.query.startDate = dates.year + "." + dates.month;
|
|
// this.query.endDate = dates.year + "-" + dates.month;
|
|
// }
|
|
// if (dates.date < 10) {
|
|
// this.query.startDate = this.startDate + "-0" + dates.date;
|
|
// this.query.endDate = this.endDate + "-0" + dates.date;
|
|
// } else {
|
|
// this.query.startDate = this.startDate + "-" + dates.date;
|
|
// this.query.endDate = this.endDate + "-" + dates.date;
|
|
// }
|
|
},
|
|
look() {
|
|
this.loginCountshow = true;
|
|
},
|
|
//家长
|
|
parentlist(e) {
|
|
this.query.parentInfoId = e;
|
|
},
|
|
//班级
|
|
classelist(e) {
|
|
this.query.classId = e;
|
|
},
|
|
//重置
|
|
resetQuery() {
|
|
this.newtime();
|
|
this.valuetime = "";
|
|
this.getlist();
|
|
},
|
|
//选择时期区间
|
|
monthStartEndTimechange(e) {
|
|
this.query.startDate = this.formatDate(new Date(e[0]).getTime());
|
|
this.query.endDate = this.formatDate(new Date(e[1]).getTime());
|
|
},
|
|
formatDate(time, timetype) {
|
|
let date = new Date(time); //13位时间戳
|
|
//let date = new Date(parseInt(time) * 1000); //10位时间戳
|
|
let y = date.getFullYear();
|
|
let MM = date.getMonth() + 1;
|
|
MM = MM < 10 ? "0" + MM : MM;
|
|
let d = date.getDate();
|
|
d = d < 10 ? "0" + d : d;
|
|
return y + "-" + MM + "-" + d;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style lang='scss' scoped>
|
|
::v-deep .el-calendar__button-group .el-button-group {
|
|
width: 0;
|
|
height: 0;
|
|
overflow: hidden;
|
|
.el-button {
|
|
overflow: hidden;
|
|
width: 0 !important;
|
|
height: 0 !important;
|
|
}
|
|
}
|
|
::v-deep .el-calendar-table .el-calendar-day {
|
|
padding: 0;
|
|
}
|
|
::v-deep .el-calendar-table .el-calendar-day {
|
|
height: 65px;
|
|
}
|
|
.app-container {
|
|
padding: 20px 0 20px 10px;
|
|
}
|
|
::v-deep .el-card__header {
|
|
border: none;
|
|
}
|
|
::v-deep .el-form {
|
|
display: inline;
|
|
}
|
|
|
|
/**隐藏上一月、本月、下一月*/
|
|
.el-calendar__button-group {
|
|
display: none;
|
|
}
|
|
/**月份居中*/
|
|
.el-calendar__title {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
/**日期div的样式*/
|
|
.el-calendar-table tr td:first-child {
|
|
border-left: 0px;
|
|
}
|
|
.el-calendar-table td {
|
|
min-height: 110px;
|
|
min-width: 110px;
|
|
border-right: 0px;
|
|
}
|
|
.el-calendar-table td.is-selected {
|
|
background-color: white;
|
|
}
|
|
.el-calendar-table .el-calendar-day {
|
|
height: 100%;
|
|
padding: 0px;
|
|
text-align: center;
|
|
}
|
|
.el-calendar-table .el-calendar-day > div {
|
|
height: 65px;
|
|
text-align: center;
|
|
}
|
|
/**日期div的样式-公历*/
|
|
.el-calendar-table .el-calendar-day > div .solar {
|
|
text-align: center;
|
|
padding-top: 5px;
|
|
}
|
|
/**日期div的样式-农历*/
|
|
.el-calendar-table .el-calendar-day > div .lunar {
|
|
padding-top: 5px;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
/**日期div的样式-选中*/
|
|
.el-calendar-table .el-calendar-day > div.selected {
|
|
background-color: #fef2f2;
|
|
border: 3px solid #fb0;
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
/**本月周末设置为红色*/
|
|
.el-calendar-table .current:nth-last-child(-n + 2) .solar {
|
|
color: red;
|
|
}
|
|
/**本月农历设置为灰色*/
|
|
.el-calendar-table .current .lunar {
|
|
color: #606266;
|
|
width: 100%;
|
|
}
|
|
/**本月农历节日设置为红色*/
|
|
.el-calendar-table .current .lunar.festival {
|
|
color: red;
|
|
}
|
|
/**禁用点击效果*/
|
|
/*.el-calendar-table td {*/
|
|
/*pointer-events: none;*/
|
|
/*}*/
|
|
.dio {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin: 0 0 0 0;
|
|
}
|
|
.picker {
|
|
display: inline-block;
|
|
position: absolute;
|
|
right: 80px;
|
|
top: 20px;
|
|
padding-right: 80px;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
}
|
|
::v-deep .el-input--medium .el-input__inner {
|
|
font-size: 16px;
|
|
}
|
|
</style>
|
|
|