From dc7e9d40e761364db706807d231df74a0e0e455c Mon Sep 17 00:00:00 2001
From: hongawen <83944980@qq.com>
Date: Wed, 6 Nov 2024 21:15:49 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BE=AE=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/TimeControl/index.vue | 363 +++++++++---------
 frontend/src/views/machine/device/index.vue   | 263 ++++++-------
 2 files changed, 319 insertions(+), 307 deletions(-)

diff --git a/frontend/src/components/TimeControl/index.vue b/frontend/src/components/TimeControl/index.vue
index aa5a2b8..174c2e3 100644
--- a/frontend/src/components/TimeControl/index.vue
+++ b/frontend/src/components/TimeControl/index.vue
@@ -8,10 +8,10 @@
     >
       <!-- 采用 v-for 动态渲染 -->
       <el-option
-        v-for="unit in timeUnits"
-        :key="unit.value"
-        :label="unit.label"
-        :value="unit.value"
+        v-for='unit in timeUnits'
+        :key='unit.value'
+        :label='unit.label'
+        :value='unit.value'
       ></el-option>
     </el-select>
 
@@ -22,8 +22,8 @@
         v-model='startDate'
         type='date'
         placeholder='起始时间'
-        @change="emitDateChange" 
-        :disabled-date="disableStartDate"
+        @change='emitDateChange'
+        :disabled-date='disableStartDate'
         :readonly="timeUnit != '自定义'"
       ></el-date-picker>
       <el-text>~</el-text>
@@ -32,8 +32,8 @@
         v-model='endDate'
         type='date'
         placeholder='结束时间'
-        @change="emitDateChange" 
-        :disabled-date="disableEndDate"
+        @change='emitDateChange'
+        :disabled-date='disableEndDate'
         :readonly="timeUnit !== '自定义'"
       ></el-date-picker>
     </div>
@@ -43,12 +43,12 @@
         class='triangle-button'
         type='primary'
         @click='prevPeriod'
-        @change="emitDateChange" 
+        @change='emitDateChange'
       >
         <div class='left_triangle'></div>
       </el-button>
-      <el-button class='triangle-button' type='primary' @click='goToCurrent' >
-       当前
+      <el-button class='triangle-button' type='primary' @click='goToCurrent'>
+        当前
       </el-button>
       <el-button
         style='width: 10px;'
@@ -64,187 +64,194 @@
 </template>
 
 
+<script setup lang='ts'>
+import { ref, onMounted, defineProps, defineEmits } from 'vue'
 
-<script setup lang="ts">
-import {  ref ,onMounted, defineProps, defineEmits } from 'vue';
- 
- // 定义时间单位的类型
+// 定义时间单位的类型
 interface TimeUnit {
   label: string;
   value: string;
 }
+
 // 定义组件的props，包含包括和排除的时间单位
- const props = defineProps({
-                include: {
-                  type: Array as () => string[],
-                  default: () => ['日', '周', '月', '季度', '年', '自定义'],
-                },
-                exclude: {
-                  type: Array as () => string[],
-                  default: () => [],
-                },
-                default: {
-                  type: String,
-                  default: '日',
-                },
-});
+const props = defineProps({
+  include: {
+    type: Array as () => string[],
+    default: () => ['日', '周', '月', '季度', '年', '自定义'],
+  },
+  exclude: {
+    type: Array as () => string[],
+    default: () => [],
+  },
+  default: {
+    type: String,
+    default: '日',
+  },
+})
 
-    // 定义事件
-    const emit = defineEmits<{
-        (e: 'update-dates', startDate: Date, endDate: Date): void;
-    }>();
-    const timeUnit = ref<string>(props.default); // 默认选择
-    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 = ref<TimeUnit[]>(
-      props.include.filter(unit => !props.exclude.includes(unit)).map(unit => ({
-        label: unit,
-        value: unit,
-      }))
-    );
+// 定义事件
+const emit = defineEmits<{
+  (e: 'update-dates', startDate: Date, endDate: Date): void;
+}>()
+const timeUnit = ref<string>(props.default) // 默认选择
+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 = 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);
-      //console.log('emitDateChange', startDate.value, endDate.value);
-    };
+// 发出日期变化事件
+const emitDateChange = () => {
+  emit('update-dates', formatDate(startDate.value), formatDate(endDate.value))
+  //console.log('emitDateChange', startDate.value, endDate.value);
+}
 
-    // 在组件挂载时更新日期范围
-    onMounted(() => {
-        updateDateRange();
-    });
-    const handleChange = (unit: string)=> {
-      // 根据选择的时间单位处理日期变化
-      if (unit !== '自定义') {
-        updateDateRange()
-      } else {
-        // 自定义选项逻辑
-        startDate.value = new Date(new Date().setDate(new Date().getDate() - 1))
-        endDate.value = new Date()
-      }
-      timeUnit.value = unit;
-      emitDateChange(); // 变化时也发出更新事件
-      updateNextButtonStatus()
-    }
-    const updateDateRange = () =>  {
-      
-      // 根据选择的时间单位计算起始和结束日期
-      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)
-      }
-      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
-    }
-    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
-    }
-    const prevPeriod =()=> {
-      const prevStartDate = new Date(startDate.value)
-      const prevEndDate = new Date(endDate.value)
+// 在组件挂载时更新日期范围
+onMounted(() => {
+  updateDateRange()
+})
+const handleChange = (unit: string) => {
+  // 根据选择的时间单位处理日期变化
+  if (unit !== '自定义') {
+    updateDateRange()
+  } else {
+    // 自定义选项逻辑
+    startDate.value = new Date(new Date().setDate(new Date().getDate() - 1))
+    endDate.value = new Date()
+  }
+  timeUnit.value = unit
+  emitDateChange() // 变化时也发出更新事件
+  updateNextButtonStatus()
+}
+const updateDateRange = () => {
 
-      if (timeUnit.value === '日') {
-        prevStartDate.setDate(prevStartDate.getDate() - 1)
-        prevEndDate.setDate(prevEndDate.getDate() - 1)
-      } else if (timeUnit.value === '周') {
-        prevStartDate.setDate(prevStartDate.getDate() - 7)
-        prevEndDate.setDate(prevEndDate.getDate() - 7)
-      } else if (timeUnit.value === '月') {
-        prevStartDate.setMonth(prevStartDate.getMonth() - 1)
-        prevEndDate.setMonth(prevEndDate.getMonth() - 1)
-      } else if (timeUnit.value === '季度') {
-        prevStartDate.setMonth(prevStartDate.getMonth() - 3)
-        prevEndDate.setMonth(prevEndDate.getMonth() - 3)
-      } else if (timeUnit.value === '年') {
-        prevStartDate.setFullYear(prevStartDate.getFullYear() - 1)
-        prevEndDate.setFullYear(prevEndDate.getFullYear() - 1)
-      }
+  // 根据选择的时间单位计算起始和结束日期
+  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)
+  }
+  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
+}
+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
+}
+const prevPeriod = () => {
+  const prevStartDate = new Date(startDate.value)
+  const prevEndDate = new Date(endDate.value)
 
-      startDate.value = prevStartDate
-      endDate.value = prevEndDate
-      updateNextButtonStatus()
-    }
-    const goToCurrent =()=> {
-      if (timeUnit.value !== '自定义') {
-        updateDateRange() // 更新为当前选择时间单位的时间范围
-      }
-    }
-    const nextPeriod = ()=> {
-      const nextStartDate = new Date(startDate.value)
-      const nextEndDate = new Date(endDate.value)
+  if (timeUnit.value === '日') {
+    prevStartDate.setDate(prevStartDate.getDate() - 1)
+    prevEndDate.setDate(prevEndDate.getDate() - 1)
+  } else if (timeUnit.value === '周') {
+    prevStartDate.setDate(prevStartDate.getDate() - 7)
+    prevEndDate.setDate(prevEndDate.getDate() - 7)
+  } else if (timeUnit.value === '月') {
+    prevStartDate.setMonth(prevStartDate.getMonth() - 1)
+    prevEndDate.setMonth(prevEndDate.getMonth() - 1)
+  } else if (timeUnit.value === '季度') {
+    prevStartDate.setMonth(prevStartDate.getMonth() - 3)
+    prevEndDate.setMonth(prevEndDate.getMonth() - 3)
+  } else if (timeUnit.value === '年') {
+    prevStartDate.setFullYear(prevStartDate.getFullYear() - 1)
+    prevEndDate.setFullYear(prevEndDate.getFullYear() - 1)
+  }
 
-      if (timeUnit.value === '日') {
-        nextStartDate.setDate(nextStartDate.getDate() + 1)
-        nextEndDate.setDate(nextEndDate.getDate() + 1)
-      } else if (timeUnit.value === '周') {
-        nextStartDate.setDate(nextStartDate.getDate() + 7)
-        nextEndDate.setDate(nextEndDate.getDate() + 7)
-      } else if (timeUnit.value === '月') {
-        nextStartDate.setMonth(nextStartDate.getMonth() + 1)
-        nextEndDate.setMonth(nextEndDate.getMonth() + 1)
-      } else if (timeUnit.value === '季度') {
-        nextStartDate.setMonth(nextStartDate.getMonth() + 3)
-        nextEndDate.setMonth(nextStartDate.getMonth() + 3)
-      } else if (timeUnit.value === '年') {
-        nextStartDate.setFullYear(nextStartDate.getFullYear() + 1)
-        nextEndDate.setFullYear(nextEndDate.getFullYear() + 1)
-      }
+  startDate.value = prevStartDate
+  endDate.value = prevEndDate
+  updateNextButtonStatus()
+}
+const goToCurrent = () => {
+  if (timeUnit.value !== '自定义') {
+    updateDateRange() // 更新为当前选择时间单位的时间范围
+  }
+}
+const nextPeriod = () => {
+  const nextStartDate = new Date(startDate.value)
+  const nextEndDate = new Date(endDate.value)
 
-      startDate.value = nextStartDate
-      endDate.value = nextEndDate
-      updateNextButtonStatus()
-    }
-    const updateNextButtonStatus =()=> {
-      // 更新下一个按钮的禁用状态
-      const maxDate = new Date() // 假设最新日期为今天
-      // 将 maxDate 设置为当天的开始时间
-      maxDate.setHours(0, 0, 0, 0);
-      // 将 endDate 设置为当天的开始时间并进行比较
-      const endDateAdjusted = new Date(endDate.value);
-      endDateAdjusted.setHours(0, 0, 0, 0);
-      // 仅比较日期部分
-      isNextDisabled.value = endDateAdjusted >= maxDate;
-      emitDateChange(); // 变化时也发出更新事件
-    }
+  if (timeUnit.value === '日') {
+    nextStartDate.setDate(nextStartDate.getDate() + 1)
+    nextEndDate.setDate(nextEndDate.getDate() + 1)
+  } else if (timeUnit.value === '周') {
+    nextStartDate.setDate(nextStartDate.getDate() + 7)
+    nextEndDate.setDate(nextEndDate.getDate() + 7)
+  } else if (timeUnit.value === '月') {
+    nextStartDate.setMonth(nextStartDate.getMonth() + 1)
+    nextEndDate.setMonth(nextEndDate.getMonth() + 1)
+  } else if (timeUnit.value === '季度') {
+    nextStartDate.setMonth(nextStartDate.getMonth() + 3)
+    nextEndDate.setMonth(nextStartDate.getMonth() + 3)
+  } else if (timeUnit.value === '年') {
+    nextStartDate.setFullYear(nextStartDate.getFullYear() + 1)
+    nextEndDate.setFullYear(nextEndDate.getFullYear() + 1)
+  }
 
-    // 限制开始日期不能选择超过当前日期
-    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);
-    }
-    
- 
+  startDate.value = nextStartDate
+  endDate.value = nextEndDate
+  updateNextButtonStatus()
+}
+const updateNextButtonStatus = () => {
+  // 更新下一个按钮的禁用状态
+  const maxDate = new Date() // 假设最新日期为今天
+  // 将 maxDate 设置为当天的开始时间
+  maxDate.setHours(0, 0, 0, 0)
+  // 将 endDate 设置为当天的开始时间并进行比较
+  const endDateAdjusted = new Date(endDate.value)
+  endDateAdjusted.setHours(0, 0, 0, 0)
+  // 仅比较日期部分
+  isNextDisabled.value = endDateAdjusted >= maxDate
+  emitDateChange() // 变化时也发出更新事件
+}
+
+// 限制开始日期不能选择超过当前日期
+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)
+}
+
+
+// 格式化日期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>
 
diff --git a/frontend/src/views/machine/device/index.vue b/frontend/src/views/machine/device/index.vue
index 176466e..99d6a12 100644
--- a/frontend/src/views/machine/device/index.vue
+++ b/frontend/src/views/machine/device/index.vue
@@ -1,144 +1,149 @@
 <template>
-    <div class='table-box' ref='popupBaseView'>
-      <ProTable
+  <div class='table-box' ref='popupBaseView'>
+    <ProTable
         ref='proTable'
         :columns='columns'
-        :init-param="initParam"
-         :request-api='getPqDevList'
-     >
-        <!-- :requestApi="getRoleList" -->
-        <!-- 表格 header 按钮 -->
-        <template #tableHeader='scope'>
-          <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>
-        </template>
-        <!-- 表格操作 -->
-        <template #operation='scope'>
-          <el-button type='primary' link :icon='EditPen' @click="openDialog('edit', scope.row)">编辑</el-button>
-          <el-button type='primary' link :icon='Delete' @click='handleDelete(scope.row)'>删除</el-button>
+        :request-api='getTableList'
+    >
+      <!-- :requestApi="getRoleList" -->
+      <!-- 表格 header 按钮 -->
+      <template #tableHeader='scope'>
+        <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>
+      </template>
+      <!-- 表格操作 -->
+      <template #operation='scope'>
+        <el-button type='primary' link :icon='EditPen' @click="openDialog('edit', scope.row)">编辑</el-button>
+        <el-button type='primary' link :icon='Delete' @click='handleDelete(scope.row)'>删除</el-button>
       </template>
-  
-      </ProTable>
-    </div>
-    <DevicePopup :refresh-table='proTable?.getTableList' ref='devicePopup'/>
-  </template>
-  
-  <script setup lang='tsx' name='useRole'>
-    import TimeControl from '@/components/TimeControl/index.vue'
-  import { type Device } from '@/api/device/interface'
-  import { useHandleData } from '@/hooks/useHandleData'
-  import { useDownload } from '@/hooks/useDownload'
-  import { useAuthButtons } from '@/hooks/useAuthButtons'
-  import ProTable from '@/components/ProTable/index.vue'
-  import ImportExcel from '@/components/ImportExcel/index.vue'
-  import { type ProTableInstance, type ColumnProps } from '@/components/ProTable/interface'
-  import DevicePopup from '@/views/machine/device/components/devicePopup.vue'
-  import { CirclePlus, Delete, EditPen, Share, Download, Upload, View, Refresh } from '@element-plus/icons-vue'
-  import deviceDataList from '@/api/device/deviceData'
-  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 defaultUnits = '日'; // 默认的单位
 
-  // 表格配置项
-  const columns = reactive<ColumnProps<Device.ResPqDev>[]>([
-    { type: 'selection', fixed: 'left', width: 70 },
-    { type: 'index', fixed: 'left', width: 70, label: '序号' },
-    {
-      prop: 'name',
-      label: '名称',
-      search: { el: 'input' },
-      minWidth: 200,
-    },
-    {
-      prop: 'devType',
-      label: '类型',
-      enum: dictStore.getDictData('High_Cate'),
-      search: { el: 'select', props: { filterable: true } },
-      fieldNames: { label: 'name', value: 'code' },
-      minWidth: 200,
-    },
-    {
-      prop: 'devChns',
-      label: '设备通道数',
-      minWidth: 110,
-    },
-    {
-      prop: 'devVolt',
-      label: '额定电压（V）',
-      minWidth: 130,
-    },
-    {
-      prop: 'devCurr',
-      label: '额定电流（A）',
-      minWidth: 130,
-    },
-    {
-      prop: 'manufacturer',
-      label: '制作厂商',
-      minWidth: 200,
-    },
-    {
-      prop: 'createDate',
-      label: '生产日期',
-      minWidth: 200,
-      search: {
+    </ProTable>
+  </div>
+  <DevicePopup :refresh-table='proTable?.getTableList' ref='devicePopup' />
+</template>
+
+<script setup lang='tsx' name='useRole'>
+import TimeControl from '@/components/TimeControl/index.vue'
+import { type Device } from '@/api/device/interface'
+import { useHandleData } from '@/hooks/useHandleData'
+import { useDownload } from '@/hooks/useDownload'
+import { useAuthButtons } from '@/hooks/useAuthButtons'
+import ProTable from '@/components/ProTable/index.vue'
+import ImportExcel from '@/components/ImportExcel/index.vue'
+import { type ProTableInstance, type ColumnProps } from '@/components/ProTable/interface'
+import DevicePopup from '@/views/machine/device/components/devicePopup.vue'
+import { CirclePlus, Delete, EditPen, Share, Download, Upload, View, Refresh } from '@element-plus/icons-vue'
+import deviceDataList from '@/api/device/deviceData'
+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 getTableList = (params: any) => {
+  let newParams = JSON.parse(JSON.stringify(params))
+  newParams.createTimeEnd = endDate.value
+  newParams.createTimeStart = startDate.value
+  return getPqDevList(newParams)
+}
+
+// 表格配置项
+const columns = reactive<ColumnProps<Device.ResPqDev>[]>([
+  { type: 'selection', fixed: 'left', width: 70 },
+  { type: 'index', fixed: 'left', width: 70, label: '序号' },
+  {
+    prop: 'name',
+    label: '名称',
+    search: { el: 'input' },
+    minWidth: 200,
+  },
+  {
+    prop: 'devType',
+    label: '类型',
+    enum: dictStore.getDictData('High_Cate'),
+    search: { el: 'select', props: { filterable: true } },
+    fieldNames: { label: 'name', value: 'code' },
+    minWidth: 200,
+  },
+  {
+    prop: 'devChns',
+    label: '设备通道数',
+    minWidth: 110,
+  },
+  {
+    prop: 'devVolt',
+    label: '额定电压（V）',
+    minWidth: 130,
+  },
+  {
+    prop: 'devCurr',
+    label: '额定电流（A）',
+    minWidth: 130,
+  },
+  {
+    prop: 'manufacturer',
+    label: '制作厂商',
+    minWidth: 200,
+  },
+  {
+    prop: 'createDate',
+    label: '生产日期',
+    minWidth: 200,
+    search: {
       span: 2,
       render: () => {
         return (
-          <div class='flx-flex-start'>
-            <TimeControl 
-            include={includedUnits} 
-            exclude={excludedUnits} 
-            default={defaultUnits} 
-            onUpdate-dates={handleDateChange}
-            />
-          </div>
+            <div class='flx-flex-start'>
+              <TimeControl
+                  include={['日', '周', '月', '自定义']}
+                  default={'月'}
+                  onUpdate-dates={handleDateChange}
+              />
+            </div>
         )
       },
     },
-    },
-    { prop: 'operation', label: '操作', fixed: 'right', width: 200 },
-  ])
-  
+  },
+  { prop: 'operation', label: '操作', fixed: 'right', width: 200 },
+])
 
 
-
-  // 处理日期变化的回调函数
-const handleDateChange = (startDate: Date, endDate: Date) => {
-  console.log('Start Date:', startDate)
-  console.log('End Date:', endDate)
-  // 这里可以添加更多的逻辑处理
+// 处理日期变化的回调函数
+const startDate = ref('')
+const endDate = ref('')
+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> = {}) => {
-    devicePopup.value?.open(titleType, row)
-    
-  }
-  
-  // 批量删除字典类型
-  const batchDelete = async (id: string[]) => {
-    await useHandleData(deletePqDev, id, '删除所选设备')
-    proTable.value?.clearSelection()
-    proTable.value?.getTableList()
-  }
-  
-  // 删除字典类型
-  const handleDelete = async (params: Device.ResPqDev) => {
-    await useHandleData(deletePqDev, [params.id], `删除【${params.name}】设备`)
-    proTable.value?.getTableList()
-  }
-  
-  </script>
+// 打开 drawer(新增、编辑)
+const openDialog = (titleType: string, row: Partial<Device.ResPqDev> = {}) => {
+  devicePopup.value?.open(titleType, row)
+
+}
+
+// 批量删除字典类型
+const batchDelete = async (id: string[]) => {
+  await useHandleData(deletePqDev, id, '删除所选设备')
+  proTable.value?.clearSelection()
+  proTable.value?.getTableList()
+}
+
+// 删除字典类型
+const handleDelete = async (params: Device.ResPqDev) => {
+  await useHandleData(deletePqDev, [params.id], `删除【${params.name}】设备`)
+  proTable.value?.getTableList()
+}
+
+</script>
   
\ No newline at end of file