修改新增用户界面ui,历史记录查询

src/views/history/index.vue

@@ -59,34 +59,15 @@
           <el-date-picker
             placeholder="请选择开始时间"
             value-format="yyyy-MM-dd"
-            v-model="queryParams.monitoringStarttime"
-            type="date"
+            type="daterange"
+            v-model="queryParams.daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            @change="handleDateChange">
           >
           </el-date-picker>
-          <!--        <el-date-picker clearable-->
-          <!--                        v-model="queryParams.monitorTime"-->
-          <!--                        type="date"-->
-          <!--                        value-format="yyyy-MM-dd"-->
-          <!--                        placeholder="请选择监控时间">-->
-          <!--        </el-date-picker>-->
         </el-form-item>
-        <el-form-item>
-          <el-date-picker
-            placeholder="请选择结束时间"
-            value-format="yyyy-MM-dd"
-            v-model="queryParams.monitoringFinallytime"
-            type="date"
-          >
-          </el-date-picker>
-        </el-form-item>
-        <!--      <el-form-item label="监控状态" prop="monitorState">-->
-        <!--        <el-input-->
-        <!--          v-model="queryParams.monitorState"-->
-        <!--          placeholder="请输入监控状态"-->
-        <!--          clearable-->
-        <!--          @keyup.enter.native="handleQuery"-->
-        <!--        />-->
-        <!--      </el-form-item>-->
         <div style="margin-left: 90%">
           <el-form-item>
             <el-button
@@ -262,6 +243,7 @@ export default {
         monitoringFinallytime: "",
         monitorState: "",
         monitorTime: "",
+        daterange: [],
       },
       // 遮罩层
       loading: true,
@@ -387,6 +369,19 @@ export default {
     /** 搜索按钮操作 */
     handleQuery() {
       this.queryParams.pageNum = 1;
+
+      // 解构 daterange 为开始和结束日期
+      const [startDate, endDate] = this.queryParams.daterange || [];
+
+      // 如果有选择日期范围，则设置到查询参数中
+      if (startDate && endDate) {
+        this.queryParams.monitoringStarttime = `${startDate} 00:00`;
+        this.queryParams.monitoringFinallytime = `${endDate} 23:59`;
+      } else {
+        // 清除时间范围参数
+        this.queryParams.monitoringStarttime = '';
+        this.queryParams.monitoringFinallytime = '';
+      }
       this.getList();
     },
     /** 重置按钮操作 */