style：采集设备-设备告警历史数据弹框-添加分页、告警时间筛选框

src/locales/en.ts

@@ -3471,6 +3471,7 @@ export default {
       alarmPointName: 'Point Name',
       alarmPointValue: 'Point Value',
       alarmLevel: 'Alarm Level',
+      alarmTime: 'Alarm Time',
 
       emptyDescription: 'Click "Point" in the device list to view points and rules',
 

src/locales/zh-CN.ts

@@ -3459,6 +3459,7 @@ export default {
       alarmPointName: '点位名称',
       alarmPointValue: '点位值',
       alarmLevel: '告警等级',
+      alarmTime: '告警时间',
 
       emptyDescription: '请点击设备列表的“点位”查看采集点和点位规则',
 

src/views/iot/device/index.vue

@@ -494,13 +494,78 @@
     <el-empty v-else :description="t('DataCollection.Device.emptyDescription')" />
   </ContentWrap>
 
-  <Dialog :title="t('DataCollection.Device.alarmHistoryTitle')" v-model="deviceAlarmDialogVisible" width="800px">
+  <Dialog :title="t('DataCollection.Device.alarmHistoryTitle')" v-model="deviceAlarmDialogVisible" width="1200px">
+    <el-form
+      class="-mb-15px"
+      :model="deviceAlarmQueryParams"
+      ref="deviceAlarmQueryFormRef"
+      :inline="true"
+      label-width="80px"
+    >
+      <el-form-item :label="t('DataCollection.Device.alarmRuleName')" prop="ruleId">
+        <el-select
+          v-model="deviceAlarmQueryParams.ruleId"
+          :loading="deviceAlarmRuleLoading"
+          clearable
+          filterable
+          class="!w-220px"
+          :placeholder="t('DataCollection.DeviceModel.ruleSearchFieldNamePlaceholder')"
+        >
+          <el-option
+            v-for="item in deviceAlarmRuleOptions"
+            :key="item.id"
+            :label="item.fieldName || item.ruleName || item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="t('DataCollection.Device.alarmPointName')" prop="modelId">
+        <el-select
+          v-model="deviceAlarmQueryParams.modelId"
+          :loading="deviceAlarmPointLoading"
+          clearable
+          filterable
+          class="!w-220px"
+          :placeholder="t('DataCollection.Device.placeholderAttributeName')"
+        >
+          <el-option
+            v-for="item in deviceAlarmPointOptions"
+            :key="item.id"
+            :label="item.attributeName || item.attributeCode || item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="t('DataCollection.Device.alarmTime')" prop="createTime">
+        <el-date-picker
+          v-model="deviceAlarmQueryParams.createTime"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          type="daterange"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          :start-placeholder="t('DataCollection.HistoryData.dialogCollectionTimeStartPlaceholder')"
+          :end-placeholder="t('DataCollection.HistoryData.dialogCollectionTimeEndPlaceholder')"
+          class="!w-260px"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleDeviceAlarmQuery">
+          <Icon icon="ep:search" class="mr-5px" />
+          {{ t('DataCollection.Device.search') }}
+        </el-button>
+        <el-button @click="resetDeviceAlarmQuery">
+          <Icon icon="ep:refresh" class="mr-5px" />
+          {{ t('DataCollection.Device.reset') }}
+        </el-button>
+      </el-form-item>
+    </el-form>
+
     <el-table
       :data="deviceAlarmList"
       v-loading="deviceAlarmLoading"
       :stripe="true"
       :show-overflow-tooltip="true"
       :max-height="700"
+      class="mt-10px"
     >
       <el-table-column :label="t('DataCollection.Device.alarmRuleName')" align="center" prop="ruleName" />
       <el-table-column :label="t('DataCollection.Device.alarmPointName')" align="center" prop="modelName" />
@@ -510,7 +575,22 @@
           <dict-tag :type="DICT_TYPE.IOT_ALARM_REGISTRATION" :value="scope.row.alarmLevel" />
         </template>
       </el-table-column>
+      <el-table-column
+        :label="t('DataCollection.Device.alarmTime')"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
     </el-table>
+    <div class="mt-10px pb-10px flex justify-end">
+      <Pagination
+        :total="deviceAlarmTotal"
+        v-model:page="deviceAlarmQueryParams.pageNo"
+        v-model:limit="deviceAlarmQueryParams.pageSize"
+        @pagination="getDeviceAlarmList"
+      />
+    </div>
   </Dialog>
 </template>
 
@@ -1111,24 +1191,126 @@ onBeforeUnmount(() => {
 const deviceAlarmDialogVisible = ref(false)
 const deviceAlarmLoading = ref(false)
 const deviceAlarmList = ref<any[]>([])
+const deviceAlarmTotal = ref(0)
+const deviceAlarmQueryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  deviceId: undefined as number | undefined,
+  modelId: undefined as number | undefined,
+  rule: undefined as string | undefined,
+  alarmLevel: undefined as string | undefined,
+  addressValue: undefined as string | undefined,
+  createTime: [] as string[],
+  ruleId: undefined as number | undefined,
+})
+const deviceAlarmQueryFormRef = ref()
+const deviceAlarmRuleOptions = ref<any[]>([])
+const deviceAlarmPointOptions = ref<any[]>([])
+const deviceAlarmRuleLoading = ref(false)
+const deviceAlarmPointLoading = ref(false)
 
-const handleShowDeviceAlarmHistory = async () => {
-  if (!attributeDeviceId.value) {
-    message.error(t('DataCollection.Device.messageSelectDeviceRequired'))
-    return
+const loadDeviceAlarmRuleOptions = async () => {
+  if (!attributeDeviceId.value) return
+  deviceAlarmRuleLoading.value = true
+  try {
+    const res = await request.get({
+      url: '/iot/device-point-rules/getList',
+      params: { id: attributeDeviceId.value },
+    })
+    const data = (res as any)?.data ?? res
+    const listData = Array.isArray((data as any)?.list)
+      ? (data as any).list
+      : Array.isArray(data)
+      ? data
+      : []
+    deviceAlarmRuleOptions.value = listData as any[]
+  } finally {
+    deviceAlarmRuleLoading.value = false
   }
-  deviceAlarmDialogVisible.value = true
-  deviceAlarmLoading.value = true
+}
+
+const loadDeviceAlarmPointOptions = async () => {
+  if (!attributeDeviceId.value) return
+  deviceAlarmPointLoading.value = true
   try {
     const res = await request.get({
-      url: '/iot/device-warinning-record/getList',
+      url: '/iot/device/device-attribute/list',
       params: { deviceId: attributeDeviceId.value },
     })
     const data = (res as any)?.data ?? res
-    deviceAlarmList.value = Array.isArray(data) ? data : []
+    const listData = Array.isArray((data as any)?.list)
+      ? (data as any).list
+      : Array.isArray(data)
+      ? data
+      : []
+    deviceAlarmPointOptions.value = listData as any[]
+  } finally {
+    deviceAlarmPointLoading.value = false
+  }
+}
+
+const getDeviceAlarmList = async () => {
+  if (!attributeDeviceId.value) return
+  deviceAlarmLoading.value = true
+  try {
+    deviceAlarmQueryParams.deviceId = attributeDeviceId.value
+    const params = {
+      pageNo: deviceAlarmQueryParams.pageNo,
+      pageSize: deviceAlarmQueryParams.pageSize,
+      deviceId: deviceAlarmQueryParams.deviceId,
+      modelId: deviceAlarmQueryParams.modelId,
+      rule: deviceAlarmQueryParams.rule,
+      alarmLevel: deviceAlarmQueryParams.alarmLevel,
+      addressValue: deviceAlarmQueryParams.addressValue,
+      createTime: deviceAlarmQueryParams.createTime,
+      ruleId: deviceAlarmQueryParams.ruleId,
+    }
+    const data = await request.get({
+      url: '/iot/device-warinning-record/page',
+      params,
+    })
+    const listData = Array.isArray((data as any)?.list)
+      ? (data as any).list
+      : Array.isArray(data)
+      ? data
+      : []
+    const totalData = (data as any)?.total ?? listData.length
+    deviceAlarmList.value = listData as any[]
+    deviceAlarmTotal.value = totalData
   } finally {
     deviceAlarmLoading.value = false
   }
 }
 
+const handleDeviceAlarmQuery = () => {
+  if (!attributeDeviceId.value) return
+  deviceAlarmQueryParams.pageNo = 1
+  getDeviceAlarmList()
+}
+
+const resetDeviceAlarmQuery = () => {
+  if (!attributeDeviceId.value) return
+  deviceAlarmQueryFormRef.value?.resetFields?.()
+  deviceAlarmQueryParams.pageNo = 1
+  getDeviceAlarmList()
+}
+
+const handleShowDeviceAlarmHistory = async () => {
+  if (!attributeDeviceId.value) {
+    message.error(t('DataCollection.Device.messageSelectDeviceRequired'))
+    return
+  }
+  deviceAlarmQueryParams.pageNo = 1
+  deviceAlarmQueryParams.pageSize = 10
+  deviceAlarmQueryParams.modelId = undefined
+  deviceAlarmQueryParams.rule = undefined
+  deviceAlarmQueryParams.alarmLevel = undefined
+  deviceAlarmQueryParams.addressValue = undefined
+  deviceAlarmQueryParams.createTime = []
+  deviceAlarmQueryParams.ruleId = undefined
+  deviceAlarmDialogVisible.value = true
+  await Promise.all([loadDeviceAlarmRuleOptions(), loadDeviceAlarmPointOptions()])
+  await getDeviceAlarmList()
+}
+
 </script>