ClientApps/pqs-9100_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

日志管理，误差体系

Browse Source
This commit is contained in:
sjl
2024-10-23 19:30:11 +08:00
parent 0d25e477d7
commit 7c5103ebb4
11 changed files with 791 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

205
frontend/src/components/TimeControl/index.vue
View File

@@ -6,14 +6,13 @@
placeholder='选择时间单位'
@change='handleChange'
>
<!--采用 v-for 去动态渲染-->
<el-option label='按日' value='日'></el-option>
<el-option label='按周' value='周'></el-option>
<el-option label='按月' value='月'></el-option>
<el-option label='按季度' value='季度'></el-option>
<el-option label='按年' value='年'></el-option>
<el-option label='自定义' value='自定义'></el-option>
<!-- 采用 v-for 动态渲染 -->
<el-option
v-for="unit in timeUnits"
:key="unit.value"
:label="unit.label"
:value="unit.value"
></el-option>
</el-select>
<!-- 禁用时间选择器 -->
@@ -23,6 +22,7 @@
v-model='startDate'
type='date'
placeholder='起始时间'
:disabled-date="disableStartDate"
:readonly="timeUnit != '自定义'"
></el-date-picker>
<el-text>~</el-text>
@@ -31,6 +31,7 @@
v-model='endDate'
type='date'
placeholder='结束时间'
:disabled-date="disableEndDate"
:readonly="timeUnit !== '自定义'"
></el-date-picker>
</div>
@@ -59,133 +60,159 @@
</div>
</template>
<script>
export default {
data() {
return {
timeUnit: '周', // 默认选择按周
startDate: null, // 起始日期
endDate: null, // 结束日期
isNextDisabled: false, // 控制下一周期按钮的禁用状态
today: new Date(), // 当前日期
}
},
created() {
// 组件创建时更新日期范围
this.updateDateRange()
},
methods: {
handleChange(value) {
<script setup lang="ts">
import { watch,computed, ref,reactive ,onMounted, defineProps, defineEmits } from 'vue';
const timeUnit = ref<string>('日'); // 默认选择按周
const startDate = ref<Date>(new Date()); // 起始日期
const endDate = ref<Date>(new Date()); // 结束日期
const isNextDisabled = ref<boolean>(false); // 控制下一周期按钮的禁用状态
const today = ref<Date>(new Date()); // 当前日期
const timeUnits = [
{ label: '日', value: '日' },
{ label: '周', value: '周' },
{ label: '月', value: '月' },
{ label: '季度', value: '季度' },
{ label: '年', value: '年' },
{ label: '自定义', value: '自定义' },
];
// 在组件挂载时更新日期范围
onMounted(() => {
updateDateRange();
});
const handleChange = (unit: string)=> {
// 根据选择的时间单位处理日期变化
if (value !== '自定义') {
this.updateDateRange()
if (unit !== '自定义') {
updateDateRange()
} else {
// 自定义选项逻辑
this.startDate = new Date()
this.endDate = new Date()
startDate.value = new Date(new Date().setDate(new Date().getDate() - 1))
endDate.value = new Date()
}
this.updateNextButtonStatus()
},
updateDateRange() {
const today = this.today
updateNextButtonStatus()
}
const updateDateRange = () => {
// 根据选择的时间单位计算起始和结束日期
if (this.timeUnit === '日') {
this.startDate = today
this.endDate = today
} else if (this.timeUnit === '周') {
this.startDate = this.getStartOfWeek(today)
this.endDate = this.getEndOfWeek(today)
} else if (this.timeUnit === '月') {
this.startDate = new Date(today.getFullYear(), today.getMonth(), 1)
this.endDate = new Date(today.getFullYear(), today.getMonth() + 1, 0)
} else if (this.timeUnit === '季度') {
const quarter = Math.floor(today.getMonth() / 3)
this.startDate = new Date(today.getFullYear(), quarter * 3, 1)
this.endDate = new Date(today.getFullYear(), quarter * 3 + 3, 0)
} else if (this.timeUnit === '年') {
this.startDate = new Date(today.getFullYear(), 0, 1)
this.endDate = new Date(today.getFullYear(), 11, 31)
if (timeUnit.value === '日') {
startDate.value = today.value
endDate.value = today.value
} else if (timeUnit.value === '周') {
startDate.value = getStartOfWeek(today.value)
endDate.value = getEndOfWeek(today.value)
} else if (timeUnit.value === '月') {
startDate.value = new Date(today.value.getFullYear(), today.value.getMonth(), 1)
endDate.value = new Date(today.value.getFullYear(), today.value.getMonth() + 1, 0)
} else if (timeUnit.value === '季度') {
const quarter = Math.floor(today.value.getMonth() / 3)
startDate.value = new Date(today.value.getFullYear(), quarter * 3, 1)
endDate.value = new Date(today.value.getFullYear(), quarter * 3 + 3, 0)
} else if (timeUnit.value === '年') {
startDate.value = new Date(today.value.getFullYear(), 0, 1)
endDate.value = new Date(today.value.getFullYear(), 11, 31)
}
this.updateNextButtonStatus()
},
getStartOfWeek(date) {
updateNextButtonStatus()
}
const getStartOfWeek =(date:Date)=> {
const startOfWeek = new Date(date)
const day = startOfWeek.getDay()
const diff = day === 0 ? -6 : 1 - day // 星期天的情况
startOfWeek.setDate(startOfWeek.getDate() + diff)
return startOfWeek
},
getEndOfWeek(date) {
}
const getEndOfWeek =(date:Date) =>{
const endOfWeek = new Date(date)
const day = endOfWeek.getDay()
const diff = day === 0 ? 0 : 7 - day // 星期天的情况
endOfWeek.setDate(endOfWeek.getDate() + diff)
return endOfWeek
},
prevPeriod() {
const prevStartDate = new Date(this.startDate)
const prevEndDate = new Date(this.endDate)
}
const prevPeriod =()=> {
const prevStartDate = new Date(startDate.value)
const prevEndDate = new Date(endDate.value)
if (this.timeUnit === '日') {
if (timeUnit.value === '日') {
prevStartDate.setDate(prevStartDate.getDate() - 1)
prevEndDate.setDate(prevEndDate.getDate() - 1)
} else if (this.timeUnit === '周') {
} else if (timeUnit.value === '周') {
prevStartDate.setDate(prevStartDate.getDate() - 7)
prevEndDate.setDate(prevEndDate.getDate() - 7)
} else if (this.timeUnit === '月') {
} else if (timeUnit.value === '月') {
prevStartDate.setMonth(prevStartDate.getMonth() - 1)
prevEndDate.setMonth(prevEndDate.getMonth() - 1)
} else if (this.timeUnit === '季度') {
} else if (timeUnit.value === '季度') {
prevStartDate.setMonth(prevStartDate.getMonth() - 3)
prevEndDate.setMonth(prevEndDate.getMonth() - 3)
} else if (this.timeUnit === '年') {
} else if (timeUnit.value === '年') {
prevStartDate.setFullYear(prevStartDate.getFullYear() - 1)
prevEndDate.setFullYear(prevEndDate.getFullYear() - 1)
}
this.startDate = prevStartDate
this.endDate = prevEndDate
this.updateNextButtonStatus()
},
goToCurrent() {
if (this.timeUnit !== '自定义') {
this.updateDateRange() // 更新为当前选择时间单位的时间范围
startDate.value = prevStartDate
endDate.value = prevEndDate
updateNextButtonStatus()
}
const goToCurrent =()=> {
if (timeUnit.value !== '自定义') {
updateDateRange() // 更新为当前选择时间单位的时间范围
}
},
nextPeriod() {
const nextStartDate = new Date(this.startDate)
const nextEndDate = new Date(this.endDate)
}
const nextPeriod = ()=> {
const nextStartDate = new Date(startDate.value)
const nextEndDate = new Date(endDate.value)
if (this.timeUnit === '日') {
if (timeUnit.value === '日') {
nextStartDate.setDate(nextStartDate.getDate() + 1)
nextEndDate.setDate(nextEndDate.getDate() + 1)
} else if (this.timeUnit === '周') {
} else if (timeUnit.value === '周') {
nextStartDate.setDate(nextStartDate.getDate() + 7)
nextEndDate.setDate(nextEndDate.getDate() + 7)
} else if (this.timeUnit === '月') {
} else if (timeUnit.value === '月') {
nextStartDate.setMonth(nextStartDate.getMonth() + 1)
nextEndDate.setMonth(nextEndDate.getMonth() + 1)
} else if (this.timeUnit === '季度') {
} else if (timeUnit.value === '季度') {
nextStartDate.setMonth(nextStartDate.getMonth() + 3)
nextEndDate.setMonth(nextStartDate.getMonth() + 3)
} else if (this.timeUnit === '年') {
} else if (timeUnit.value === '年') {
nextStartDate.setFullYear(nextStartDate.getFullYear() + 1)
nextEndDate.setFullYear(nextEndDate.getFullYear() + 1)
}
this.startDate = nextStartDate
this.endDate = nextEndDate
this.updateNextButtonStatus()
},
updateNextButtonStatus() {
startDate.value = nextStartDate
endDate.value = nextEndDate
updateNextButtonStatus()
}
const updateNextButtonStatus =()=> {
// 更新下一个按钮的禁用状态
const maxDate = new Date() // 假设最新日期为今天
this.isNextDisabled = this.endDate > maxDate
},
},
}
// 将 maxDate 设置为当天的开始时间
maxDate.setHours(0, 0, 0, 0);
// 将 endDate 设置为当天的开始时间并进行比较
const endDateAdjusted = new Date(endDate.value);
endDateAdjusted.setHours(0, 0, 0, 0);
// 仅比较日期部分
isNextDisabled.value = endDateAdjusted >= maxDate;
}
// 限制开始日期不能选择超过当前日期
const disableStartDate = (date:Date)=> {
return date > today.value;
}
// 限制结束日期不能超过当前日期且必须大于开始日期
const disableEndDate = (date:Date)=> {
if (timeUnit.value !== '自定义') return false; // 如果不是自定义时间单位，则不限制
const start = new Date(startDate.value);
return date > today.value || (start && date <= start);
}
defineExpose({
startDate,
endDate,
})
// defineProps('include','exclude','default')
</script>
<style scoped lang='scss'>