|
|
@@ -0,0 +1,280 @@
|
|
|
+<template>
|
|
|
+ <div class="trainModel">
|
|
|
+ <div class="visit-tips" v-show="activeType == 'visited'">
|
|
|
+ <span>学员上周训练时间不足80分钟或训练次数小于4次则需要回访</span>
|
|
|
+ </div>
|
|
|
+ <search @onSearch="search" placeholder="学生姓名或手机号">
|
|
|
+ <template #left>
|
|
|
+ <van-dropdown-menu style="padding-right: .1rem" :close-on-click-outside="false" active-color="#01C1B5">
|
|
|
+ <van-dropdown-item title="筛选" ref="item" class="visitTime">
|
|
|
+ <van-cell title="日期" is-link @click="showCalendar = true" :value="calendarValue" value-class="calendarColor"></van-cell>
|
|
|
+ </van-dropdown-item>
|
|
|
+ </van-dropdown-menu>
|
|
|
+ </template>
|
|
|
+ </search>
|
|
|
+ <van-row class="searchArray">
|
|
|
+ <van-col span="6" class="title-style">
|
|
|
+ 训练时长
|
|
|
+ <div>
|
|
|
+ <i class="box box-up active" style="margin-bottom: .02rem;"></i>
|
|
|
+ <i class="box box-down"></i>
|
|
|
+ </div>
|
|
|
+ </van-col>
|
|
|
+ <van-col span="6" class="title-style">
|
|
|
+ 训练次数
|
|
|
+ <div>
|
|
|
+ <i class="box box-up active" style="margin-bottom: .02rem;"></i>
|
|
|
+ <i class="box box-down"></i>
|
|
|
+ </div>
|
|
|
+ </van-col>
|
|
|
+ <van-col span="6" class="title-style">
|
|
|
+ 训练天数
|
|
|
+ <div>
|
|
|
+ <i class="box box-up active" style="margin-bottom: .02rem;"></i>
|
|
|
+ <i class="box box-down"></i>
|
|
|
+ </div>
|
|
|
+ </van-col>
|
|
|
+ <van-col span="6" class="title-style">
|
|
|
+ 评测次数
|
|
|
+ <div>
|
|
|
+ <i class="box box-up active" style="margin-bottom: .02rem;"></i>
|
|
|
+ <i class="box box-down"></i>
|
|
|
+ </div>
|
|
|
+ </van-col>
|
|
|
+ </van-row>
|
|
|
+ <van-calendar
|
|
|
+ v-model="showCalendar"
|
|
|
+ :minDate="minDate"
|
|
|
+ :default-date="defaultDate"
|
|
|
+ :first-day-of-week="1"
|
|
|
+ :formatter="formatterDay"
|
|
|
+ color="#01C1B5"
|
|
|
+ type="range"
|
|
|
+ get-container="body"
|
|
|
+ @select="selectDate"
|
|
|
+ @confirm="onConfirm"
|
|
|
+ @close="onClose"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import Search from '@/components/Search';
|
|
|
+import dayjs from "dayjs";
|
|
|
+export function getNowDateAndMonday(time) {
|
|
|
+ let timestamp = new Date(time.replace(/-/g, "/")).getTime();
|
|
|
+ let serverDate = new Date(time);
|
|
|
+ if (serverDate.getDay() == 0) {
|
|
|
+ timestamp -= 7 * 24 * 60 * 60 * 1000;
|
|
|
+ }
|
|
|
+ let mondayTime = timestamp - (serverDate.getDay() - 1) * 24 * 60 * 60 * 1000;
|
|
|
+
|
|
|
+ let mondayData = new Date(mondayTime);
|
|
|
+ //年
|
|
|
+ let mondayY = mondayData.getFullYear();
|
|
|
+ //月
|
|
|
+ let mondayM =
|
|
|
+ mondayData.getMonth() + 1 < 10
|
|
|
+ ? "0" + (mondayData.getMonth() + 1)
|
|
|
+ : mondayData.getMonth() + 1;
|
|
|
+ //日
|
|
|
+ let mondayD =
|
|
|
+ mondayData.getDate() < 10
|
|
|
+ ? "0" + mondayData.getDate()
|
|
|
+ : mondayData.getDate();
|
|
|
+
|
|
|
+ let str = mondayY + "-" + mondayM + "-" + mondayD;
|
|
|
+ return str;
|
|
|
+}
|
|
|
+export function getNowDateAndSunday(time) {
|
|
|
+ let timestamp = new Date(time.replace(/-/g, "/")).getTime();
|
|
|
+ let serverDate = new Date(time);
|
|
|
+
|
|
|
+ let num = 7 - serverDate.getDay();
|
|
|
+ if (num == 7) {
|
|
|
+ num = 0;
|
|
|
+ }
|
|
|
+ let sundayTiem = timestamp + num * 24 * 60 * 60 * 1000;
|
|
|
+ let SundayData = new Date(sundayTiem);
|
|
|
+ //年
|
|
|
+ let tomorrowY = SundayData.getFullYear(); //月
|
|
|
+ let tomorrowM =
|
|
|
+ SundayData.getMonth() + 1 < 10
|
|
|
+ ? "0" + (SundayData.getMonth() + 1)
|
|
|
+ : SundayData.getMonth() + 1;
|
|
|
+ //日
|
|
|
+ let tomorrowD =
|
|
|
+ SundayData.getDate() < 10
|
|
|
+ ? "0" + SundayData.getDate()
|
|
|
+ : SundayData.getDate();
|
|
|
+ let str = tomorrowY + "-" + tomorrowM + "-" + tomorrowD;
|
|
|
+ return str;
|
|
|
+}
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ active: {
|
|
|
+ type: String,
|
|
|
+ default: 'all'
|
|
|
+ },
|
|
|
+ defaultTime: {
|
|
|
+ type: Number,
|
|
|
+ default: 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: { Search },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ showCalendar: false,
|
|
|
+ minDate: new Date(2000, 0, 1),
|
|
|
+ defaultDate:[],
|
|
|
+ // 类型为全部时
|
|
|
+ startDay: null,
|
|
|
+ endDay: null,
|
|
|
+ searchType: {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async mounted() {
|
|
|
+ let defaultTime = this.defaultTime
|
|
|
+ let day = defaultTime * 7
|
|
|
+ let startTime = new Date(), endTime = new Date()
|
|
|
+ if(day > 0) {
|
|
|
+ startTime = getNowDateAndMonday(dayjs().add(day, 'day').format("YYYY-MM-DD"))
|
|
|
+ endTime = getNowDateAndSunday(dayjs().add(day, 'day').format("YYYY-MM-DD"))
|
|
|
+ } else {
|
|
|
+ startTime = getNowDateAndMonday(dayjs().subtract(Math.abs(day), 'day').format("YYYY-MM-DD"))
|
|
|
+ endTime = getNowDateAndSunday(dayjs().subtract(Math.abs(day), 'day').format("YYYY-MM-DD"))
|
|
|
+ }
|
|
|
+ this.defaultDate = [new Date(startTime), new Date(endTime)]
|
|
|
+ this.startDay = startTime
|
|
|
+ this.endDay = endTime
|
|
|
+ // let startTime = getNowDateAndMonday(dayjs)
|
|
|
+ // let startTime = getNowDateAndMonday(dayjs().format("YYYY-MM-DD"));
|
|
|
+ // let endTime = getNowDateAndSunday(dayjs().format("YYYY-MM-DD"));
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ calendarValue() {
|
|
|
+ return `${dayjs(this.startDay).format("YYYY/MM/DD")} - ${dayjs(this.endDay).format("YYYY/MM/DD")}`;
|
|
|
+ },
|
|
|
+ activeType() {
|
|
|
+ return this.active
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ search(val) {
|
|
|
+ this.params.search = val
|
|
|
+ // this.onResetList()
|
|
|
+ },
|
|
|
+ changeDropDownItemStatus() {
|
|
|
+ this.$refs.item.toggle(false)
|
|
|
+ },
|
|
|
+ selectDate(date) {
|
|
|
+ let [start, end] = date;
|
|
|
+ if (start) {
|
|
|
+ const num = dayjs(start).get("day");
|
|
|
+ if (num === 0) {
|
|
|
+ start = dayjs(start).subtract(6, "day");
|
|
|
+ } else {
|
|
|
+ start = dayjs(start).subtract(num - 1, "day");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (start) {
|
|
|
+ const num = 7 - dayjs(start).get("day");
|
|
|
+ if (num < 7) {
|
|
|
+ end = dayjs(start).add(num, "day");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.defaultDate = [new Date(start.valueOf()),new Date(end.valueOf())]
|
|
|
+ },
|
|
|
+ onConfirm(date) {
|
|
|
+ let [start, end] = date;
|
|
|
+ this.showCalendar = false;
|
|
|
+ if (start) {
|
|
|
+ const num = dayjs(start).get("day");
|
|
|
+ if (num === 0) {
|
|
|
+ start = dayjs(start).subtract(6, "day");
|
|
|
+ } else {
|
|
|
+ start = dayjs(start).subtract(num - 1, "day");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (end) {
|
|
|
+ const num = 7 - dayjs(end).get("day");
|
|
|
+ if (num < 7) {
|
|
|
+ end = dayjs(end).add(num, "day");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.startDay = dayjs(start).format("YYYY-MM-DD");
|
|
|
+ this.endDay = dayjs(end).format("YYYY-MM-DD");
|
|
|
+ },
|
|
|
+ onClose() {
|
|
|
+ // 关闭弹窗时初始化默认日期
|
|
|
+ this.defaultDate = [new Date(this.startDay), new Date(this.endDay)]
|
|
|
+ },
|
|
|
+ formatterDay(day) {
|
|
|
+ const month = day.date.getMonth() + 1;
|
|
|
+ const date = day.date.getDate();
|
|
|
+ let nowDate = new Date()
|
|
|
+ if(month == nowDate.getMonth() + 1 && date == nowDate.getDate()){
|
|
|
+ day.text = '今天'
|
|
|
+ }
|
|
|
+ return day
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.calendarColor {
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+.visit-tips {
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 10px 10px 0;
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 6px 12px;
|
|
|
+ background-color: #FFF6DE;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #FF802C;
|
|
|
+ }
|
|
|
+}
|
|
|
+.searchArray {
|
|
|
+ font-size: .14rem;
|
|
|
+ padding-top: .15rem;
|
|
|
+ padding-bottom: .12rem;
|
|
|
+ color: #1A1A1A;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+}
|
|
|
+.title-style {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+.box {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: .02rem;
|
|
|
+}
|
|
|
+.box-up {
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border-left: 4px solid transparent;
|
|
|
+ border-right: 4px solid transparent;
|
|
|
+ border-bottom: 5px solid #ccc;
|
|
|
+ &.active {
|
|
|
+ border-bottom-color: #01C1B5;
|
|
|
+ }
|
|
|
+}
|
|
|
+.box-down {
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border-left: 4px solid transparent;
|
|
|
+ border-right: 4px solid transparent;
|
|
|
+ border-top: 5px solid #ccc;
|
|
|
+ &.active {
|
|
|
+ border-top-color: #01C1B5;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
