日志管理，误差体系

frontend/src/components/ResourceDialog/index.vue

@@ -1,82 +0,0 @@
-<template>
-    <el-dialog :title="dialogTitle" :model-value="visible" @close="handleCancel" width="500">
-      <el-form :model="formData" :rules="rules">
-        <el-form-item label="菜单名称" prop="name">
-          <el-input v-model="formData.name" />
-        </el-form-item>
-        <el-form-item label="菜单路径" prop="path">
-          <el-input v-model="formData.path" />
-        </el-form-item>
-        <el-form-item label="菜单排序" prop="sort">
-          <el-input-number v-model="formData.sort" />
-        </el-form-item>
-        <el-form-item label="菜单类型" prop="type">
-          <el-select v-model="formData.type" placeholder="请选择资源类型">
-            <el-option label="菜单" value="菜单" />
-            <el-option label="按钮" value="按钮" />
-            <el-option label="公共资源" value="公共资源" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="菜单描述" prop="remark">
-          <el-input v-model="formData.remark" :rows="2" type="textarea"/>
-        </el-form-item>
-        <el-form-item label="路由名称" prop="route_Name">
-          <el-input v-model="formData.route_Name" />
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button @click="handleCancel">取 消</el-button>
-          <el-button type="primary" @click="handleSubmit">确 定</el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </template>
-  
-  <script lang="ts" setup>
-  import { defineProps, defineEmits, reactive,watch } from 'vue';
-  import { type Resource } from '@/api/resource/interface'
-  const props = defineProps<{
-    visible: boolean;
-    dialogTitle: string;
-    
-    formData: {
-      
-      id:string;
-      name: string;
-      path: string;
-      sort: number;
-      type: string;
-      remark: string;
-      route_Name: string;
-    };
-  }>();
-  
-  const rules = {
-          name :[
-            {require:true,trigger:"blur",message:"请填写菜单名称"}
-          ]
-  }
-  const emit = defineEmits<{
-    (e: 'update:visible', value: boolean): void;
-    (e: 'submit', data: any): void;
-  }>();
-  
-  const handleCancel = () => {
-    emit('update:visible', false); // 关闭对话框
-  };
-  
-  const handleSubmit = () => {
-    emit('submit', props.formData); // 提交表单数据
-    emit('update:visible', false); // 提交后关闭对话框
-  };
-  
-  // 当 props.visible 改变时，更新 formData
-  watch(() => props.visible, (newVal) => {
-    if (!newVal) {
-      // 这里可以重置表单数据，如果需要的话
-     
-    }
-  });
-  </script>
-  

frontend/src/components/TimeControl/index.vue

@@ -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'>