一. init准备
1.时间选择配置项
需要同步的数据包括: 1. 页面显示时间value值startTime、endTime
2. 时间选择器的时间value值
startTime: "", //*gre: 页面时间
endTime: "",
segmentPickerConfig: [
{
is: "cube-date-picker",
title: "开始时间",
format: { year: "YYYY年", month: "MM月", date: "DD日" },
value: new Date(),
min: new Date(1932, 0, 1),
max: new Date(),
},
{
is: "cube-date-picker",
title: "结束时间",
format: { year: "YYYY年", month: "MM月", date: "DD日" },
value: new Date(),
min: new Date(1932, 0, 1),
max: new Date(),
}
], //*gre: 时间选择器option
2.initPage
// todo: initPage
async initPage() {
this.loading = true;
//*gre: 页面显示的时间
var curDate = new Date();
this.startTime = curDate.getTime() - 1000 * 60 * 60 * 24 * 13; //14天之前
this.endTime = curDate.getTime();
// *gre: 时间选择器参数准备
this.segmentPickerConfig[0].value =
new Date(this.startTime) || new Date();
this.segmentPickerConfig[1].value = new Date(this.endTime) || new Date();
// *gre: 初始化时间选择器
this.initTimePickerSelector();
// *gre: 获取传感和控制设备数据,并得到虫情孢子设备状态
const { hasBug, hasSpore } = await this.getMetricThirdListController();
this.hasBug = hasBug;
this.hasSpore = hasSpore;
if (hasBug || hasSpore) {
// *gre: 获取虫情孢子设备数据
await this.getThirdDeviceBugListControlle();
}
this.loading = false;
},
3.action
handleOpenDatePicker() {
if (!this.loading) {
this.segmentPickerConfig[0].value = this.startTime
? new Date(this.startTime)
: new Date();
this.segmentPickerConfig[1].value = this.endTime
? new Date(this.endTime)
: new Date();
if (this.$dateSegmentPicker) {
this.$dateSegmentPicker.$updateProps({
data: this.segmentPickerConfig,
});
this.$dateSegmentPicker.show();
}
}
},
二. 两种时间限制
1.必须先选起始时间
// *gre: 初始化时间选择器
initTimePickerSelector() {
this.$dateSegmentPicker = this.$createSegmentPicker({
data: this.segmentPickerConfig,
onNext: (idx, selectedDate) => {
const { minTime, maxTime } = this.endTimeMinAndMax(selectedDate);
this.segmentPickerConfig[1].min = minTime;
this.segmentPickerConfig[1].max = maxTime;
this.$dateSegmentPicker.$updateProps({
data: this.segmentPickerConfig,
});
},
onSelect: async (selectedDates) => {
this.loading = true;
//*gre: 页面时间
this.startTime = selectedDates[0];
this.endTime = selectedDates[1];
// *gre: 时间选择器时间
this.segmentPickerConfig[0].value = selectedDates[0] || new Date();
this.segmentPickerConfig[1].value = selectedDates[1] || new Date();
this.$dateSegmentPicker.$updateProps({
data: this.segmentPickerConfig,
});
this.thirdBugOrSporeList = [];
await this.getThirdDeviceBugListControlle();
this.loading = false;
},
});
},
起始时间限制如配置项里 min: new Date(1932, 0, 1) 和 max: new Date(),起始随便选,结束时间则如下
//*gre: 结束时间的 min和max, selectedDate是当前选择的起始时间, 时间限制:一个月31天, dateNumber=30
endTimeMinAndMax(selectedDate, dateNumber = 30) {
let minTime, maxTime;
let selected_startTime = selectedDate.getTime();
let todayTime = new Date().getTime();
if (selected_startTime < todayTime) {
let saveEndMaxTime =
selected_startTime + 1000 * 60 * 60 * 24 * dateNumber;
saveEndMaxTime =
saveEndMaxTime > todayTime ? todayTime : saveEndMaxTime;
minTime = selectedDate;
maxTime = new Date(saveEndMaxTime);
} else if (selected_startTime === todayTime) {
minTime = selectedDate;
maxTime = selectedDate;
}
return { minTime, maxTime };
},
2.起始结束时间都可以先选择
startTimeMinAndMax(selectedEndTime, dateNumber = 30) {
let minTime, maxTime;
if (selectedEndTime) {
const saveStartMinTime =
new Date(selectedEndTime).getTime() -
1000 * 60 * 60 * 24 * dateNumber;
minTime = new Date(saveStartMinTime);
maxTime = new Date(selectedEndTime);
} else {
minTime = new Date(1932, 0, 1);
maxTime = new Date();
}
return { minTime, maxTime };
},
endTimeMinAndMax(selectedStartTime, dateNumber = 30){
let minTime, maxTime;
let todayTime = new Date().getTime();
if (selectedStartTime) {
let saveEndMaxTime =
new Date(selectedStartTime).getTime() +
1000 * 60 * 60 * 24 * dateNumber;
saveEndMaxTime =
saveEndMaxTime > todayTime ? todayTime : saveEndMaxTime;
minTime = new Date(selectedStartTime);
maxTime = new Date(saveEndMaxTime);
} else {
minTime = new Date(1932, 0, 1);
maxTime = new Date();
}
return { minTime, maxTime };
},