微调

frontend/src/components/TimeControl/index.vue

@@ -8,10 +8,10 @@
     >
       <!-- 采用 v-for 动态渲染 -->
       <el-option
-        v-for="unit in timeUnits"
+        v-for='unit in timeUnits'
-        :key="unit.value"
+        :key='unit.value'
-        :label="unit.label"
+        :label='unit.label'
-        :value="unit.value"
+        :value='unit.value'
       ></el-option>
     </el-select>
 
@@ -22,8 +22,8 @@
         v-model='startDate'
         type='date'
         placeholder='起始时间'
-        @change="emitDateChange" 
+        @change='emitDateChange'
-        :disabled-date="disableStartDate"
+        :disabled-date='disableStartDate'
         :readonly="timeUnit != '自定义'"
       ></el-date-picker>
       <el-text>~</el-text>
@@ -32,8 +32,8 @@
         v-model='endDate'
         type='date'
         placeholder='结束时间'
-        @change="emitDateChange" 
+        @change='emitDateChange'
-        :disabled-date="disableEndDate"
+        :disabled-date='disableEndDate'
         :readonly="timeUnit !== '自定义'"
       ></el-date-picker>
     </div>
@@ -43,7 +43,7 @@
         class='triangle-button'
         type='primary'
         @click='prevPeriod'
-        @change="emitDateChange" 
+        @change='emitDateChange'
       >
         <div class='left_triangle'></div>
       </el-button>
@@ -64,15 +64,15 @@
 </template>
 
 
-
+<script setup lang='ts'>
-<script setup lang="ts">
+import { ref, onMounted, defineProps, defineEmits } from 'vue'
-import {  ref ,onMounted, defineProps, defineEmits } from 'vue';
 
 // 定义时间单位的类型
 interface TimeUnit {
   label: string;
   value: string;
 }
+
 // 定义组件的props，包含包括和排除的时间单位
 const props = defineProps({
   include: {
@@ -87,35 +87,35 @@ interface TimeUnit {
     type: String,
     default: '日',
   },
-});
+})
 
 // 定义事件
 const emit = defineEmits<{
   (e: 'update-dates', startDate: Date, endDate: Date): void;
-    }>();
+}>()
-    const timeUnit = ref<string>(props.default); // 默认选择
+const timeUnit = ref<string>(props.default) // 默认选择
-    const startDate = ref<Date>(new Date()); // 起始日期
+const startDate = ref<Date>(new Date()) // 起始日期
-    const endDate = ref<Date>(new Date()); // 结束日期
+const endDate = ref<Date>(new Date()) // 结束日期
-    const isNextDisabled = ref<boolean>(false); // 控制下一周期按钮的禁用状态
+const isNextDisabled = ref<boolean>(false) // 控制下一周期按钮的禁用状态
-    const today = ref<Date>(new Date()); // 当前日期
+const today = ref<Date>(new Date()) // 当前日期
 // 过滤出可用的时间单位
 const timeUnits = ref<TimeUnit[]>(
   props.include.filter(unit => !props.exclude.includes(unit)).map(unit => ({
     label: unit,
     value: unit,
-      }))
+  })),
-    );
+)
 
 // 发出日期变化事件
 const emitDateChange = () => {
-      emit('update-dates', startDate.value, endDate.value);
+  emit('update-dates', formatDate(startDate.value), formatDate(endDate.value))
   //console.log('emitDateChange', startDate.value, endDate.value);
-    };
+}
 
 // 在组件挂载时更新日期范围
 onMounted(() => {
-        updateDateRange();
+  updateDateRange()
-    });
+})
 const handleChange = (unit: string) => {
   // 根据选择的时间单位处理日期变化
   if (unit !== '自定义') {
@@ -125,8 +125,8 @@ interface TimeUnit {
     startDate.value = new Date(new Date().setDate(new Date().getDate() - 1))
     endDate.value = new Date()
   }
-      timeUnit.value = unit;
+  timeUnit.value = unit
-      emitDateChange(); // 变化时也发出更新事件
+  emitDateChange() // 变化时也发出更新事件
   updateNextButtonStatus()
 }
 const updateDateRange = () => {
@@ -224,27 +224,34 @@ interface TimeUnit {
   // 更新下一个按钮的禁用状态
   const maxDate = new Date() // 假设最新日期为今天
   // 将 maxDate 设置为当天的开始时间
-      maxDate.setHours(0, 0, 0, 0);
+  maxDate.setHours(0, 0, 0, 0)
   // 将 endDate 设置为当天的开始时间并进行比较
-      const endDateAdjusted = new Date(endDate.value);
+  const endDateAdjusted = new Date(endDate.value)
-      endDateAdjusted.setHours(0, 0, 0, 0);
+  endDateAdjusted.setHours(0, 0, 0, 0)
   // 仅比较日期部分
-      isNextDisabled.value = endDateAdjusted >= maxDate;
+  isNextDisabled.value = endDateAdjusted >= maxDate
-      emitDateChange(); // 变化时也发出更新事件
+  emitDateChange() // 变化时也发出更新事件
 }
 
 // 限制开始日期不能选择超过当前日期
 const disableStartDate = (date: Date) => {
-      return date > today.value;
+  return date > today.value
 }
 // 限制结束日期不能超过当前日期且必须大于开始日期
 const disableEndDate = (date: Date) => {
-      if (timeUnit.value !== '自定义') return false; // 如果不是自定义时间单位，则不限制
+  if (timeUnit.value !== '自定义') return false // 如果不是自定义时间单位，则不限制
-      const start = new Date(startDate.value);
+  const start = new Date(startDate.value)
-      return date > today.value || (start && date <= start);
+  return date > today.value || (start && date <= start)
 }
 
 
+// 格式化日期yyyy-mm-dd
+function formatDate(date:Date) {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+}
 
 </script>
 

frontend/src/views/machine/device/index.vue

@@ -3,8 +3,7 @@
     <ProTable
         ref='proTable'
         :columns='columns'
-        :init-param="initParam"
+        :request-api='getTableList'
-         :request-api='getPqDevList'
     >
       <!-- :requestApi="getRoleList" -->
       <!-- 表格 header 按钮 -->
@@ -12,7 +11,8 @@
         <el-button type='primary' :icon='CirclePlus' @click="openDialog('add')">新增</el-button>
         <el-button type='primary' :icon='Download' plain @click='downloadFile()'>批量导出</el-button>
         <el-button type='primary' :icon='Upload' plain @click='importFile()'>批量导入</el-button>
-          <el-button type='danger' :icon='Delete' plain :disabled='!scope.isSelected'  @click='batchDelete(scope.selectedListIds)'>
+        <el-button type='danger' :icon='Delete' plain :disabled='!scope.isSelected'
+                   @click='batchDelete(scope.selectedListIds)'>
           批量删除
         </el-button>
       </template>
@@ -42,14 +42,19 @@
 import { useDictStore } from '@/stores/modules/dict'
 import { getPqDevList, deletePqDev, exportPqDev, importPqDev } from '@/api/device/device.ts'
 import { reactive, ref } from 'vue'
+
 const dictStore = useDictStore()
 // ProTable 实例
 const proTable = ref<ProTableInstance>()
 const devicePopup = ref()
 // 定义包含和排除的单位
-const includedUnits = ['日', '周', '月', '自定义']; // 可以根据需要包含的单位
+
-const excludedUnits = ['季度','年']; // 要排除的单位
+const getTableList = (params: any) => {
-const defaultUnits = '日'; // 默认的单位
+  let newParams = JSON.parse(JSON.stringify(params))
+  newParams.createTimeEnd = endDate.value
+  newParams.createTimeStart = startDate.value
+  return getPqDevList(newParams)
+}
 
 // 表格配置项
 const columns = reactive<ColumnProps<Device.ResPqDev>[]>([
@@ -99,9 +104,8 @@ const defaultUnits = '日'; // 默认的单位
         return (
             <div class='flx-flex-start'>
               <TimeControl
-            include={includedUnits} 
+                  include={['日', '周', '月', '自定义']}
-            exclude={excludedUnits} 
+                  default={'月'}
-            default={defaultUnits} 
                   onUpdate-dates={handleDateChange}
               />
             </div>
@@ -113,13 +117,14 @@ const defaultUnits = '日'; // 默认的单位
 ])
 
 
-
-
 // 处理日期变化的回调函数
-const handleDateChange = (startDate: Date, endDate: Date) => {
+const startDate = ref('')
-  console.log('Start Date:', startDate)
+const endDate = ref('')
-  console.log('End Date:', endDate)
+const handleDateChange = (startDateTemp: string, endDateTemp: string) => {
-  // 这里可以添加更多的逻辑处理
+  startDate.value = startDateTemp
+  endDate.value = endDateTemp
+  console.log(startDateTemp)
+  console.log(endDateTemp)
 }
 // 打开 drawer(新增、编辑)
 const openDialog = (titleType: string, row: Partial<Device.ResPqDev> = {}) => {