|
@@ -17,6 +17,21 @@
|
|
<!-- 日期选择 -->
|
|
<!-- 日期选择 -->
|
|
<van-calendar color="#4d6add" v-model:show="calendarShow" type="range" :show-confirm="false"
|
|
<van-calendar color="#4d6add" v-model:show="calendarShow" type="range" :show-confirm="false"
|
|
:allow-same-day="true" :min-date="minDate" @confirm="calendarConfirm" />
|
|
:allow-same-day="true" :min-date="minDate" @confirm="calendarConfirm" />
|
|
|
|
+ <!-- 选择统计类型 -->
|
|
|
|
+ <van-popup v-model:show="timeTypeShow" position="bottom">
|
|
|
|
+ <van-picker :title="$t('dateSelectList.timeType')" :columns="timeTypeList" @confirm="timeTypeConfirm"
|
|
|
|
+ @cancel="timeTypeCancel" />
|
|
|
|
+ </van-popup>
|
|
|
|
+ <!-- 按月统计 -->
|
|
|
|
+ <van-popup v-model:show="monthDateShow" position="bottom">
|
|
|
|
+ <van-picker-group :title="$t('dateSelectList.monthDate')"
|
|
|
|
+ :tabs="[$t('dateSelectList.monthStartDate'), $t('dateSelectList.monthEndDate')]"
|
|
|
|
+ :next-step-text="$t('dateSelectList.nextStep')" @confirm="monthDateConfirm" @cancel="monthDateCancel"
|
|
|
|
+ position="bottom">
|
|
|
|
+ <van-date-picker v-model="monthStartDate" :min-date="minDate" :columns-type="monthDateType" />
|
|
|
|
+ <van-date-picker v-model="monthEndDate" :min-date="minDate" :columns-type="monthDateType" />
|
|
|
|
+ </van-picker-group>
|
|
|
|
+ </van-popup>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -26,26 +41,34 @@
|
|
import { ref } from "vue";
|
|
import { ref } from "vue";
|
|
import dateUtil from "@/utils/dateUtil";
|
|
import dateUtil from "@/utils/dateUtil";
|
|
import { getLoginUser } from "@/common/js/utils";
|
|
import { getLoginUser } from "@/common/js/utils";
|
|
|
|
+import { showToast } from "vant";
|
|
|
|
+import { useI18n } from 'vue-i18n';
|
|
|
|
+
|
|
|
|
|
|
export default {
|
|
export default {
|
|
name: "dateSelectList",
|
|
name: "dateSelectList",
|
|
components: {},
|
|
components: {},
|
|
setup(props, { emit }) {
|
|
setup(props, { emit }) {
|
|
const minDate = new Date(2018, 1, 1);
|
|
const minDate = new Date(2018, 1, 1);
|
|
|
|
+ const { t } = useI18n();
|
|
const user = getLoginUser();
|
|
const user = getLoginUser();
|
|
// 时间类型
|
|
// 时间类型
|
|
const timeType = ref("0");
|
|
const timeType = ref("0");
|
|
|
|
+ // 统计类型
|
|
|
|
+ const chartType = ref("0");
|
|
// 时间类型切换
|
|
// 时间类型切换
|
|
const timeChange = (data) => {
|
|
const timeChange = (data) => {
|
|
timeType.value = data;
|
|
timeType.value = data;
|
|
// 当时时间类型切换为其他时间弹出日期控件
|
|
// 当时时间类型切换为其他时间弹出日期控件
|
|
- (data === "4") ? calendarShow.value = true : outputDate();
|
|
|
|
|
|
+ // (data === "4") ? calendarShow.value = true : outputDate();
|
|
|
|
+ (data === "4") ? timeTypeShow.value = true : outputDate();
|
|
};
|
|
};
|
|
let calendarDate = [];
|
|
let calendarDate = [];
|
|
const calendarShow = ref(false);
|
|
const calendarShow = ref(false);
|
|
// 其他时间日期组件确认返回
|
|
// 其他时间日期组件确认返回
|
|
const calendarConfirm = (data) => {
|
|
const calendarConfirm = (data) => {
|
|
calendarShow.value = false;
|
|
calendarShow.value = false;
|
|
|
|
+ console.log(data);
|
|
calendarDate = data;
|
|
calendarDate = data;
|
|
outputDate();
|
|
outputDate();
|
|
};
|
|
};
|
|
@@ -114,30 +137,123 @@ export default {
|
|
}
|
|
}
|
|
// 其他时间
|
|
// 其他时间
|
|
if (timeType.value === "4") {
|
|
if (timeType.value === "4") {
|
|
- const firstday = Date.parse(calendarDate[0]);
|
|
|
|
- const lastday = Date.parse(calendarDate[1]);
|
|
|
|
- const diffDate = Math.abs(firstday - lastday);
|
|
|
|
- const totalDays = Math.floor(diffDate / (1000 * 3600 * 24));
|
|
|
|
- if (totalDays === 0) {
|
|
|
|
- params.chartType = "day";
|
|
|
|
- } else if (dateUtil.isSameWeek(calendarDate[0], calendarDate[1])) {
|
|
|
|
- params.chartType = "week";
|
|
|
|
|
|
+
|
|
|
|
+ // const diffDate = Math.abs(firstday - lastday);
|
|
|
|
+ // const totalDays = Math.floor(diffDate / (1000 * 3600 * 24));
|
|
|
|
+ // if (totalDays === 0) {
|
|
|
|
+ // params.chartType = "day";
|
|
|
|
+ // } else if (dateUtil.isSameWeek(calendarDate[0], calendarDate[1])) {
|
|
|
|
+ // params.chartType = "week";
|
|
|
|
+ // } else {
|
|
|
|
+ // params.chartType = "month";
|
|
|
|
+ // }
|
|
|
|
+ let startTime = null;
|
|
|
|
+ let endTime = null;
|
|
|
|
+ if (chartType.value == '1') {
|
|
|
|
+ // 按日统计
|
|
|
|
+ const firstday = Date.parse(calendarDate[0]);
|
|
|
|
+ const lastday = Date.parse(calendarDate[1]);
|
|
|
|
+ const diffDate = Math.abs(firstday - lastday);
|
|
|
|
+ const totalDays = Math.floor(diffDate / (1000 * 3600 * 24));
|
|
|
|
+ if (totalDays === 0) {
|
|
|
|
+ params.chartType = "day";
|
|
|
|
+ } else {
|
|
|
|
+ params.chartType = "month";
|
|
|
|
+ }
|
|
|
|
+ timeTypeShow.value = false;
|
|
|
|
+ startTime = calendarDate[0];
|
|
|
|
+ endTime = calendarDate[1];
|
|
|
|
+ params.startDate =
|
|
|
|
+ dateUtil.formateDate(startTime, "yyyy-MM-dd") + " 00:00:00";
|
|
|
|
+ params.endDate =
|
|
|
|
+ dateUtil.formateDate(endTime, "yyyy-MM-dd") + " 23:59:59";
|
|
} else {
|
|
} else {
|
|
- params.chartType = "month";
|
|
|
|
|
|
+ // 按月统计
|
|
|
|
+ params.chartType = "year";
|
|
|
|
+ startTime = new Date(monthStartDate.value[0] + '-' + monthStartDate.value[1] + '-01');
|
|
|
|
+ endTime = new Date(monthEndDate.value[0] + '-' + monthEndDate.value[1] + '-01');
|
|
|
|
+ console.log("startTime", startTime);
|
|
|
|
+ console.log("endTime", endTime);
|
|
|
|
+ endTime.setMonth(endTime.getMonth() + 1);
|
|
|
|
+ params.startDate =
|
|
|
|
+ dateUtil.formateDate(startTime, "yyyy-MM-dd") + " 00:00:00";
|
|
|
|
+ params.endDate =
|
|
|
|
+ dateUtil.formateDate(endTime, "yyyy-MM-dd") + " 00:00:00";
|
|
|
|
+ timeTypeShow.value = false;
|
|
}
|
|
}
|
|
- params.startDate =
|
|
|
|
- dateUtil.formateDate(calendarDate[0], "yyyy-MM-dd") + " 00:00:00";
|
|
|
|
- params.endDate =
|
|
|
|
- dateUtil.formateDate(calendarDate[1], "yyyy-MM-dd") + " 23:59:59";
|
|
|
|
|
|
+
|
|
}
|
|
}
|
|
emit('update', params);
|
|
emit('update', params);
|
|
};
|
|
};
|
|
|
|
+ // 统计类型
|
|
|
|
+ const timeTypeShow = ref(false);
|
|
|
|
+ const timeTypeList = [
|
|
|
|
+ { text: t('dateSelectList.dayType'), value: "1" },
|
|
|
|
+ { text: t('dateSelectList.monthType'), value: "2" },
|
|
|
|
+ ];
|
|
|
|
+ const timeTypeConfirm = ({ selectedOptions }) => {
|
|
|
|
+ console.log('selectedOptions[0].text', selectedOptions[0].value);
|
|
|
|
+ // 按日统计
|
|
|
|
+ chartType.value = selectedOptions[0].value;
|
|
|
|
+ if (selectedOptions[0].value == '1') {
|
|
|
|
+ calendarShow.value = true;
|
|
|
|
+ } else {
|
|
|
|
+ monthDateShow.value = true;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ const timeTypeCancel = () => { timeTypeShow.value = false; }
|
|
|
|
+ // 按月统计
|
|
|
|
+ // 创建一个Date对象,表示当前时间
|
|
|
|
+ const currentDate = new Date();
|
|
|
|
+ // 获取当前时间的年份
|
|
|
|
+ const currentYear = currentDate.getFullYear();
|
|
|
|
+ // 获取当前时间的月份(注意,月份是从0开始的,所以要加1)
|
|
|
|
+ const currentMonth = currentDate.getMonth() + 1;
|
|
|
|
+ const monthDateShow = ref(false);
|
|
|
|
+ const monthStartDate = ref([currentYear, currentMonth]);
|
|
|
|
+ const monthEndDate = ref([currentYear, currentMonth]);
|
|
|
|
+ const monthDateType = ['year', 'month'];
|
|
|
|
+ const monthDateConfirm = () => {
|
|
|
|
+ console.log('monthStartDate', monthStartDate.value);
|
|
|
|
+ console.log('monthEndDate', monthEndDate.value);
|
|
|
|
+ const date1 = new Date(monthStartDate.value[0] + '-' + monthStartDate.value[1] + '-01');
|
|
|
|
+ const date2 = new Date(monthEndDate.value[0] + '-' + monthEndDate.value[1] + '-01');
|
|
|
|
+ // 将日期对象转换为毫秒数
|
|
|
|
+ const time1 = date1.getTime();
|
|
|
|
+ const time2 = date2.getTime();
|
|
|
|
+ // 计算时间跨度的绝对值
|
|
|
|
+ const timeDiff = Math.abs(time1 - time2);
|
|
|
|
+ // 计算半年的毫秒数(假设半年为 365 天的一半)
|
|
|
|
+ const halfYearInMilliseconds = 365 * 24 * 60 * 60 * 1000 / 2;
|
|
|
|
+ if (timeDiff > halfYearInMilliseconds) {
|
|
|
|
+ showToast(t('dateSelectList.monthTip1'));
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ if (date1 > date2) {
|
|
|
|
+ showToast(t('dateSelectList.monthTip2'));
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ monthDateShow.value = false;
|
|
|
|
+ outputDate();
|
|
|
|
+ }
|
|
|
|
+ const monthDateCancel = () => { monthDateShow.value = false; }
|
|
return {
|
|
return {
|
|
minDate,
|
|
minDate,
|
|
timeType,
|
|
timeType,
|
|
timeChange,
|
|
timeChange,
|
|
calendarShow,
|
|
calendarShow,
|
|
- calendarConfirm
|
|
|
|
|
|
+ calendarConfirm,
|
|
|
|
+ timeTypeShow,
|
|
|
|
+ timeTypeList,
|
|
|
|
+ timeTypeConfirm,
|
|
|
|
+ timeTypeCancel,
|
|
|
|
+ monthDateShow,
|
|
|
|
+ monthStartDate,
|
|
|
|
+ monthDateType,
|
|
|
|
+ monthEndDate,
|
|
|
|
+ monthDateConfirm,
|
|
|
|
+ monthDateCancel,
|
|
};
|
|
};
|
|
},
|
|
},
|
|
};
|
|
};
|