日志管理
This commit is contained in:
sjl
36
frontend/src/components/TimeControl/index.scss
Normal file
36
frontend/src/components/TimeControl/index.scss
Normal file
@@ -0,0 +1,36 @@
|
||||
/* 添加样式 */
|
||||
.time-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin:0 0 0 300px ; /* 使整体居中 */
|
||||
}
|
||||
.select {
|
||||
margin-right: 10px; /* 下拉框右侧间距 */
|
||||
width: 90px; /* 下拉框宽度 */
|
||||
}
|
||||
.date-display {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 10px; /* 日期选择器右侧间距 */
|
||||
width: 250px;
|
||||
}
|
||||
.date-picker {
|
||||
margin-right: 10px; /* 日期选择器之间的间距 */
|
||||
}
|
||||
.triangle-button {
|
||||
margin:0 2px; /* 设置左右间距 */
|
||||
}
|
||||
.left_triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 10px solid transparent; /* 上边透明 */
|
||||
border-bottom: 10px solid transparent; /* 下边透明 */
|
||||
border-right: 15px solid white; /* 左边为白色 */
|
||||
}
|
||||
.right_triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 10px solid transparent; /* 上边透明 */
|
||||
border-bottom: 10px solid transparent; /* 下边透明 */
|
||||
border-left: 15px solid white; /* 左边为白色 */
|
||||
}
|
||||
188
frontend/src/components/TimeControl/index.vue
Normal file
188
frontend/src/components/TimeControl/index.vue
Normal file
@@ -0,0 +1,188 @@
|
||||
<template>
|
||||
<div class="time-control" >
|
||||
<el-select
|
||||
class="select"
|
||||
v-model="timeUnit"
|
||||
placeholder="选择时间单位"
|
||||
@change="handleChange"
|
||||
>
|
||||
<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>
|
||||
</el-select>
|
||||
|
||||
<div class="date-display"><!-- 禁用时间选择器 -->
|
||||
<el-date-picker
|
||||
class="date-picker"
|
||||
v-model="startDate"
|
||||
type="date"
|
||||
placeholder="起始时间"
|
||||
:readonly="timeUnit != '自定义'"
|
||||
></el-date-picker>
|
||||
<el-text>~</el-text>
|
||||
<el-date-picker
|
||||
class="date-picker"
|
||||
v-model="endDate"
|
||||
type="date"
|
||||
placeholder="结束时间"
|
||||
:readonly="timeUnit !== '自定义'"
|
||||
></el-date-picker>
|
||||
</div>
|
||||
<div class="date-display" v-if="timeUnit !== '自定义'">
|
||||
<el-button
|
||||
style="width: 10px;"
|
||||
class="triangle-button"
|
||||
type="primary"
|
||||
@click="prevPeriod"
|
||||
>
|
||||
<div class="left_triangle"></div>
|
||||
</el-button>
|
||||
<el-button class="triangle-button" type="primary" @click="goToCurrent">
|
||||
本{{ timeUnit }}
|
||||
</el-button>
|
||||
<el-button
|
||||
style="width: 10px;"
|
||||
class="triangle-button"
|
||||
type="primary"
|
||||
@click="nextPeriod"
|
||||
:disabled="isNextDisabled"
|
||||
>
|
||||
<div class="right_triangle"></div>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
timeUnit: '周', // 默认选择按周
|
||||
startDate: null, // 起始日期
|
||||
endDate: null, // 结束日期
|
||||
isNextDisabled: false, // 控制下一周期按钮的禁用状态
|
||||
today: new Date() // 当前日期
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// 组件创建时更新日期范围
|
||||
this.updateDateRange();
|
||||
},
|
||||
methods: {
|
||||
handleChange(value) {
|
||||
// 根据选择的时间单位处理日期变化
|
||||
if (value !== '自定义') {
|
||||
this.updateDateRange();
|
||||
} else {
|
||||
// 自定义选项逻辑
|
||||
this.startDate = new Date();
|
||||
this.endDate = new Date();
|
||||
}
|
||||
this.updateNextButtonStatus();
|
||||
},
|
||||
updateDateRange() {
|
||||
const today = this.today;
|
||||
// 根据选择的时间单位计算起始和结束日期
|
||||
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);
|
||||
}
|
||||
this.updateNextButtonStatus();
|
||||
},
|
||||
getStartOfWeek(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 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);
|
||||
|
||||
if (this.timeUnit === '日') {
|
||||
prevStartDate.setDate(prevStartDate.getDate() - 1);
|
||||
prevEndDate.setDate(prevEndDate.getDate() - 1);
|
||||
} else if (this.timeUnit === '周') {
|
||||
prevStartDate.setDate(prevStartDate.getDate() - 7);
|
||||
prevEndDate.setDate(prevEndDate.getDate() - 7);
|
||||
} else if (this.timeUnit === '月') {
|
||||
prevStartDate.setMonth(prevStartDate.getMonth() - 1);
|
||||
prevEndDate.setMonth(prevEndDate.getMonth() - 1);
|
||||
} else if (this.timeUnit === '季度') {
|
||||
prevStartDate.setMonth(prevStartDate.getMonth() - 3);
|
||||
prevEndDate.setMonth(prevEndDate.getMonth() - 3);
|
||||
} else if (this.timeUnit === '年') {
|
||||
prevStartDate.setFullYear(prevStartDate.getFullYear() - 1);
|
||||
prevEndDate.setFullYear(prevEndDate.getFullYear() - 1);
|
||||
}
|
||||
|
||||
this.startDate = prevStartDate;
|
||||
this.endDate = prevEndDate;
|
||||
this.updateNextButtonStatus();
|
||||
},
|
||||
goToCurrent() {
|
||||
if (this.timeUnit !== '自定义') {
|
||||
this.updateDateRange(); // 更新为当前选择时间单位的时间范围
|
||||
}
|
||||
},
|
||||
nextPeriod() {
|
||||
const nextStartDate = new Date(this.startDate);
|
||||
const nextEndDate = new Date(this.endDate);
|
||||
|
||||
if (this.timeUnit === '日') {
|
||||
nextStartDate.setDate(nextStartDate.getDate() + 1);
|
||||
nextEndDate.setDate(nextEndDate.getDate() + 1);
|
||||
} else if (this.timeUnit === '周') {
|
||||
nextStartDate.setDate(nextStartDate.getDate() + 7);
|
||||
nextEndDate.setDate(nextEndDate.getDate() + 7);
|
||||
} else if (this.timeUnit === '月') {
|
||||
nextStartDate.setMonth(nextStartDate.getMonth() + 1);
|
||||
nextEndDate.setMonth(nextEndDate.getMonth() + 1);
|
||||
} else if (this.timeUnit === '季度') {
|
||||
nextStartDate.setMonth(nextStartDate.getMonth() + 3);
|
||||
nextEndDate.setMonth(nextStartDate.getMonth() + 3);
|
||||
} else if (this.timeUnit === '年') {
|
||||
nextStartDate.setFullYear(nextStartDate.getFullYear() + 1);
|
||||
nextEndDate.setFullYear(nextEndDate.getFullYear() + 1);
|
||||
}
|
||||
|
||||
this.startDate = nextStartDate;
|
||||
this.endDate = nextEndDate;
|
||||
this.updateNextButtonStatus();
|
||||
},
|
||||
updateNextButtonStatus() {
|
||||
// 更新下一个按钮的禁用状态
|
||||
const maxDate = new Date(); // 假设最新日期为今天
|
||||
this.isNextDisabled = this.endDate > maxDate;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "./index.scss";
|
||||
</style>
|
||||
Reference in New Issue
Block a user