需求--一键误报

src/api/AlertMock.ts

@@ -48,9 +48,11 @@ export interface DeviceConfigItem {
 export class PagingQueryParams extends PageQueryDto {
   alertType?: string;
   lineId?: number;
+  beginDateTime?: string;
+  endDateTime?: string;
 }
 
-interface Item {
+export interface Item {
   id: number;
   alertType: string;
   timeType: string;
@@ -67,7 +69,7 @@ interface Item {
 export async function alarmInfoListQuery(
   params: PagingQueryParams
 ): Promise<PageDto<Item>> {
-  const response = await api.get('/api/alertRecord/page/detail', {
+  const response = await api.post('/api/alertRecord/page/detail', {
     params: params,
   });
   return response.data;
@@ -93,8 +95,8 @@ export function recordConfirmAlarmInfoByTipType(
  * 错误报警处理
  * @param recordId 推送的警告信息的id
  */
-export function recordFailAlarmInfoById(id: number) {
+export function recordFailAlarmInfoById(recordId: number[]) {
-  return api.get(`/api/alertRecord/fail/${id}`);
+  return api.post('/api/alertRecord/fail', recordId);
 }
 
 export interface IReportParams {

src/components/alarm/alarmInfoDialog.vue

@@ -167,7 +167,7 @@ function submitChooseType() {
 
 function falsePositives() {
   showDialog.value = false;
-  recordFailAlarmInfoById(+messageUse.id).then(() => {
+  recordFailAlarmInfoById([+messageUse.id]).then(() => {
     lineNetStore.alarmInfoListTable?.requestServerInteraction();
   });
 }

src/pages/AlarmInfoList.vue

@@ -12,6 +12,8 @@
       :loading="loading"
       binary-state-sort
       @request="onRequest"
+      selection="multiple"
+      v-model:selected="selected"
     >
       <template v-slot:body-cell="props">
         <q-td :props="props" class="custom-column">
@@ -28,11 +30,17 @@
       </template>
       <template v-slot:top-right>
         <div class="q-gutter-sm row justify-center">
+          <q-btn
+            class="q-mr-md"
+            color="red"
+            label="一键误报"
+            @click="batchHandle"
+          />
           <q-btn
             class="q-mr-md"
             color="primary"
             label="查询"
-            @click="searchDialog = true"
+            @click="showSearchDialog"
           />
           <q-btn color="primary" label="报警统计" @click="showStatistics" />
         </div>
@@ -59,7 +67,7 @@
         <q-card-section>
           <div class="text-h6">查询报警信息</div>
         </q-card-section>
-        <q-card-section>
+        <q-card-section class="q-gutter-sm">
           <q-input
             outlined
             v-model.number="filter.lineId"
@@ -74,6 +82,114 @@
             v-model="filter.alertType"
             :options="optionsAlertType"
           />
+          <q-input
+            outlined
+            v-model="filter.beginDateTime"
+            label="开始时间"
+            no-error-icon
+            mask="####-##-## ##:##:##"
+            hint="例如：2023-09-05 16:05:09"
+            lazy-rules
+            :rules="[timeRangeValidation]"
+            :error="errorBeginTime"
+            :error-message="errorMessageBeginTime"
+          >
+            <template v-slot:prepend>
+              <q-icon name="event" class="cursor-pointer">
+                <q-popup-proxy
+                  cover
+                  transition-show="scale"
+                  transition-hide="scale"
+                >
+                  <q-date
+                    v-model="filter.beginDateTime"
+                    mask="YYYY-MM-DD HH:mm:ss"
+                    landscape
+                  >
+                    <div class="row items-center justify-end">
+                      <q-btn v-close-popup label="关闭" color="primary" flat />
+                    </div>
+                  </q-date>
+                </q-popup-proxy>
+              </q-icon>
+            </template>
+
+            <template v-slot:append>
+              <q-icon name="access_time" class="cursor-pointer">
+                <q-popup-proxy
+                  cover
+                  transition-show="scale"
+                  transition-hide="scale"
+                >
+                  <q-time
+                    v-model="filter.beginDateTime"
+                    mask="YYYY-MM-DD HH:mm:ss"
+                    with-seconds
+                    landscape
+                    format24h
+                  >
+                    <div class="row items-center justify-end">
+                      <q-btn v-close-popup label="关闭" color="primary" flat />
+                    </div>
+                  </q-time>
+                </q-popup-proxy>
+              </q-icon>
+            </template>
+          </q-input>
+          <q-input
+            outlined
+            v-model="filter.endDateTime"
+            label="结束时间"
+            no-error-icon
+            mask="####-##-## ##:##:##"
+            hint="例如：2023-09-05 16:05:09"
+            lazy-rules
+            :rules="[timeRangeValidation]"
+            :error="errorEndTime"
+            :error-message="errorMessageEndTime"
+          >
+            <template v-slot:prepend>
+              <q-icon name="event" class="cursor-pointer">
+                <q-popup-proxy
+                  cover
+                  transition-show="scale"
+                  transition-hide="scale"
+                >
+                  <q-date
+                    v-model="filter.endDateTime"
+                    mask="YYYY-MM-DD HH:mm:ss"
+                    landscape
+                  >
+                    <div class="row items-center justify-end">
+                      <q-btn v-close-popup label="关闭" color="primary" flat />
+                    </div>
+                  </q-date>
+                </q-popup-proxy>
+              </q-icon>
+            </template>
+
+            <template v-slot:append>
+              <q-icon name="access_time" class="cursor-pointer">
+                <q-popup-proxy
+                  cover
+                  transition-show="scale"
+                  transition-hide="scale"
+                >
+                  <q-time
+                    v-model="filter.endDateTime"
+                    mask="YYYY-MM-DD HH:mm:ss"
+                    with-seconds
+                    landscape
+                    format24h
+                  >
+                    <div class="row items-center justify-end">
+                      <q-btn v-close-popup label="关闭" color="primary" flat />
+                    </div>
+                  </q-time>
+                </q-popup-proxy>
+              </q-icon>
+            </template>
+          </q-input>
         </q-card-section>
 
         <q-card-actions align="right">
@@ -87,8 +203,12 @@
 
 <script setup lang="ts">
 import { ref, reactive, onMounted, computed, onUnmounted } from 'vue';
-import { useQuasar, type QTableColumn } from 'quasar';
+import { date, useQuasar, type QTableColumn } from 'quasar';
-import { alarmInfoListQuery } from 'src/api/AlertMock';
+import {
+  alarmInfoListQuery,
+  Item,
+  recordFailAlarmInfoById,
+} from 'src/api/AlertMock';
 import alarmInfoDialog from 'src/components/alarm/alarmInfoDialog.vue';
 import {
   showAlertTypeData,
@@ -100,6 +220,7 @@ import { alert } from 'src/protos/alertInfo';
 import { useLineNetStore } from 'src/stores/line-net-store';
 import { StompMessagingClient } from 'src/jl-graphic/message/WsMsgBroker';
 import alarmStatistics from 'src/components/alarm/alarmStatistics.vue';
+import { errorNotify } from 'src/utils/CommonNotify';
 
 const $q = useQuasar();
 const lineNetStore = useLineNetStore();
@@ -199,6 +320,8 @@ async function onRequest(props: any) {
       size: rowsPerPage,
       alertType: (saveAlertTypeData as never)[filter.value.alertType],
       lineId: filter.value.lineId,
+      beginDateTime: filter.value.beginDateTime,
+      endDateTime: filter.value.endDateTime,
     });
     const pageData = response;
     pagination.value.rowsNumber = pageData.total;
@@ -225,10 +348,24 @@ onMounted(() => {
   });
 });
 
+const selected = ref<Item[]>([]);
+function batchHandle() {
+  const params = selected.value.map((item) => item.id);
+  $q.dialog({ message: `已选择${params.length}条数据，确定一键误报吗  吗?`, cancel: true }).onOk(async () => {
+    try {
+      await recordFailAlarmInfoById(params);
+    } catch (err) {
+      errorNotify('一键误报失败:', err);
+    }
+  });
+}
+
 const searchDialog = ref(false);
 const filter = ref({
   alertType: '',
-  lineId: undefined,
+  lineId: 3,
+  beginDateTime: '',
+  endDateTime: '',
 });
 const optionsAlertType = [
   '蓝显',
@@ -250,15 +387,75 @@ const optionsAlertType = [
   '联锁区红光带',
   '联锁区橙光带',
 ];
+
+function showSearchDialog() {
+  searchDialog.value = true;
+  filter.value = {
+    alertType: '',
+    lineId: 3,
+    beginDateTime: '',
+    endDateTime: '',
+  };
+}
+
+const errorBeginTime = ref(false);
+const errorEndTime = ref(false);
+const errorMessageBeginTime = ref('');
+const errorMessageEndTime = ref('');
+function timeRangeValidation() {
+  const Reg = /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/;
+  if (filter.value.beginDateTime) {
+    if (
+      !date.isValid(filter.value.beginDateTime) ||
+      !Reg.test(filter.value.beginDateTime)
+    ) {
+      errorBeginTime.value = true;
+      errorMessageBeginTime.value = '请输入正确的时间！';
+      return false;
+    } else {
+      filter.value.beginDateTime = date.formatDate(
+        filter.value.beginDateTime,
+        'YYYY-MM-DD HH:mm:ss'
+      );
+    }
+  }
+  if (filter.value.endDateTime) {
+    if (
+      !date.isValid(filter.value.endDateTime) ||
+      !Reg.test(filter.value.endDateTime)
+    ) {
+      errorEndTime.value = true;
+      errorMessageEndTime.value = '请输入正确的时间！';
+      return false;
+    } else {
+      filter.value.endDateTime = date.formatDate(
+        filter.value.endDateTime,
+        'YYYY-MM-DD HH:mm:ss'
+      );
+    }
+  }
+  if (
+    filter.value.beginDateTime &&
+    filter.value.endDateTime &&
+    new Date(filter.value.endDateTime).getTime() <
+      new Date(filter.value.beginDateTime).getTime()
+  ) {
+    errorBeginTime.value = true;
+    errorEndTime.value = true;
+    errorMessageBeginTime.value = '开始时间不能大于结束时间！';
+    errorMessageEndTime.value = '结束时间不能小于开始时间！';
+    return false;
+  }
+  errorBeginTime.value = false;
+  errorEndTime.value = false;
+  errorMessageBeginTime.value = '';
+  errorMessageEndTime.value = '';
+  return true;
+}
+
 function searchDecisionInfo() {
   searchDialog.value = false;
-  try {
+  tableRef.value.requestServerInteraction();
-    tableRef.value.requestServerInteraction();
-  } finally {
-    setTimeout(() => {
-      filter.value = { alertType: '', lineId: undefined };
-    });
-  }
 }
 
 const dialogInstance = ref();