1.新增历史记录查询类型搜索选项

src/components/headerBox/dialog/headerDialog.vue

@@ -10,33 +10,52 @@
 <template>
   <div>
     <el-dialog v-model="is_Show" title="历史报警记录" ref="" destroy-on-close>
-      <div style="margin-bottom: 20px;">
+      <div style="margin-bottom: 20px">
         <el-row :gutter="20">
-        <el-col :span="15">
-          <span style="margin-right: 10px;">日期：</span>
-          <el-date-picker
-            v-model="selectTime"
-            type="datetimerange"
-            :shortcuts="shortcuts"
-            range-separator="至"
-            format="YYYY/MM/DD HH:mm:ss"
-            start-placeholder="开始时间"
-            end-placeholder="结束时间"
-          />
-        </el-col>
-        <el-col :span="6">
-         
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="18">
-        </el-col>
-        <el-col :span="6">
-          <el-button type="primary" plain @click="searchpartData">搜索</el-button>
-        </el-col>
-      </el-row>
+          <el-col :span="13">
+            <span style="margin-right: 10px">日期：</span>
+            <el-date-picker
+              v-model="selectTime"
+              type="datetimerange"
+              :shortcuts="shortcuts"
+              range-separator="至"
+              format="YYYY/MM/DD HH:mm:ss"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+            />
+          </el-col>
+          <el-col :span="7">
+            <span style="margin-right: 10px">类型：</span>
+            <el-select v-model="searchConfig.alarmType" clearable placeholder="请选择报警类型">
+              <el-option
+                v-for="item in alarmTypeOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-col>
+          <el-col :span="2">
+            <el-button type="primary" plain @click="searchpartData"
+              >搜索</el-button
+            >
+          </el-col>
+          <el-col :span="2">
+            <el-button type="primary" plain @click="searchpartReset"
+              >重置</el-button
+            >
+          </el-col>
+        </el-row>
+        <!-- <el-row :gutter="20">
+          <el-col :span="18"> </el-col>
+          <el-col :span="6">
+            <el-button type="primary" plain @click="searchpartData"
+              >搜索</el-button
+            >
+          </el-col>
+        </el-row> -->
       </div>
-      
+
       <el-table
         :data="tableData"
         v-loading="dialogLoading"
@@ -103,6 +122,7 @@ const props = defineProps({
 });
 //总页数、每页数量、当前页
 const searchConfig = reactive({
+  alarmType:'',
   type: props.type,
   startTime: "",
   endTime: "",
@@ -113,6 +133,57 @@ const selectTime = ref("");
 let small = ref(false);
 let disabled = ref(false);
 let background = ref(false);
+//类型选项
+const alarmTypeOptions = [
+  {
+    value: 'pm25',
+    label: '粉尘pm2.5超标报警',
+  },
+  {
+    value: 'pm10',
+    label: '粉尘pm10超标报警',
+  },
+  {
+    value: 'flame',
+    label: '明火报警',
+  },
+  {
+    value: 'TVOC',
+    label: 'tvoc报警',
+  },
+  {
+    value: 'CH2O',
+    label: 'CH2O甲醛报警',
+  },
+  {
+    value: 'smoke',
+    label: '烟雾报警',
+  },
+  {
+    value: 'methane',
+    label: '燃气报警',
+  },
+  {
+    value: 'pressure',
+    label: '管道压力报警',
+  },
+  {
+    value: 'noise',
+    label: '噪音报警',
+  },
+  {
+    value: 'huim',
+    label: '湿度报警',
+  },
+  {
+    value: 'temp',
+    label: '温度报警',
+  },
+  {
+    value: 'offline',
+    label: '离线提醒',
+  },
+]
 const emits = defineEmits(["update:dialogTableVisible", "getDialogdatafun"]);
 const is_Show = computed({
   get: () => props.dialogTableVisible,
@@ -126,12 +197,14 @@ computed({
     searchConfig.type = val;
   },
 });
+watch(()=>props.type,
+(newVal, oldVal)=>{
+  searchConfig.type=newVal
+}, { immediate: true, deep: true })
 watch(
   () => selectTime,
   (newVal, oldVal) => {
-    //监听父组件宽高变化，随时重置本组件尺寸
-    console.log(newVal.value);
-    
+    //监听日期数据
     if (newVal.value) {
       searchConfig.startTime = gettime(newVal.value[0], 2);
       searchConfig.endTime = gettime(newVal.value[1], 2);
@@ -182,7 +255,20 @@ const shortcuts = [
     },
   },
 ];
-function searchpartData(){
+//搜索
+function searchpartData() {
+  console.log(searchConfig,'search');
+  
+  emits("getDialogdatafun", searchConfig);
+}
+//重置
+function searchpartReset(){
+  searchConfig.alarmType=''
+  selectTime.value=''
+  //需要重置startTime、endTime，因监听重置有延迟
+  searchConfig.startTime = null;
+  searchConfig.endTime = null;
+  console.log(searchConfig,'reset');
   emits("getDialogdatafun", searchConfig);
 }
 onMounted(() => {});

src/components/headerBox/header2.vue

@@ -235,7 +235,6 @@ function showDialog() {
   dialogTableVisible.value = true;
 }
 async function getDialogdatafun(config) {
-  // dialogdata.length = 0;
   dialogLoading.value = true;
   let result: any = await getAlarmListHistoryData(config);
 
@@ -250,9 +249,6 @@ async function getDialogdatafun(config) {
     }
   }, 0);
   }
- console.log(dialogdata);
- 
-
 }
 //判断是否显示对应组件后所做操作
 watch(