feat: 告警记录

src/api/rule-engine/log.ts

@@ -28,4 +28,9 @@ export const handleLog = (data:any) => server.post('/alarm/record/_handle',data)
 /**
  * 告警记录
  */
-export const detail = (id:string) => server.get(`/alarm/record/${id}`);
+export const detail = (id:string) => server.get(`/alarm/record/${id}`);
+
+/**
+ * 告警历史记录
+ */
+export const queryHistoryList = (data:any) => server.post('/alarm/history/_query',data)

src/views/rule-engine/Alarm/Log/Detail/index.vue

@@ -1,51 +1,182 @@
 <template>
-  <page-container>
+    <page-container>
-    <Search :columns="columns" target="alarm-log-detail"></Search>
+        <Search
-    <JTable :columns="columns" model="TABLE" :request="queryList"></JTable>
+            :columns="columns"
-  </page-container>
+            target="alarm-log-detail"
+            @search="handleSearch"
+        ></Search>
+        <JTable
+            :columns="columns"
+            model="TABLE"
+            :request="queryList"
+            :params="params"
+            :defaultParams="{
+                terms,
+                sorts: [{ name: 'alarmTime', order: 'desc' }],
+            }"
+        >
+            <template #alarmTime="slotProps">{{
+                moment(slotProps.alarmTime).format('YYYY-MM-DD HH:mm:ss')
+            }}</template>
+            <template #action="slotProps">
+                <a-space
+                    ><template
+                        v-for="i in getActions(slotProps, 'table')"
+                        :key="i.key"
+                    >
+                        <PermissionButton
+                            :disabled="i.disabled"
+                            :popConfirm="i.popConfirm"
+                            :tooltip="{
+                                ...i.tooltip,
+                            }"
+                            @click="i.onClick"
+                            type="link"
+                            style="padding: 0px"
+                        >
+                            <template #icon><AIcon :type="i.icon"/></template>
+                        </PermissionButton>
+                    </template>
+                </a-space>
+            </template>
+        </JTable>
+        <Info v-if="visiable"  :data="current" @close="close"/>
+    </page-container>
 </template>
 
 <script lang="ts" setup>
-import { detail } from '@/api/rule-engine/log'
+import { detail, queryHistoryList } from '@/api/rule-engine/log';
 import { useRoute } from 'vue-router';
+import moment from 'moment';
+import type { ActionsType } from '@/components/Table/index.vue';
+import { message } from 'ant-design-vue';
+import { useAlarmStore } from '@/store/alarm';
+import Info from './info.vue';
+import { storeToRefs } from 'pinia';
 const route = useRoute();
-const id = route.params?.id; 
+const id = route.params?.id;
-const columns = [{
+let visiable = ref(false);
-  title:'告警时间',
+const columns = [
-  dataIndex:'alarmTime',
+    {
-  key:'alarmTime',
+        title: '告警时间',
-  search:{
+        dataIndex: 'alarmTime',
-    type:'date'
+        key: 'alarmTime',
-  }
+        scopedSlots: true,
-},{
+        search: {
-  title:'告警名称',
+            type: 'date',
-  dataIndex:'alarmConfigName',
+        },
-  key:'alarmConfigName',
+    },
-},{
+    {
-  title:'说明',
+        title: '告警名称',
-  dataIndex:'description',
+        dataIndex: 'alarmConfigName',
-  key:'description'
+        key: 'alarmConfigName',
-},{
+    },
-  title:'操作',
+    {
-  dataIndex:'action',
+        title: '说明',
-  key:'action'
+        dataIndex: 'description',
-}]
+        key: 'description',
-
+    },
+    {
+        title: '操作',
+        dataIndex: 'action',
+        key: 'action',
+        scopedSlots: true,
+    },
+];
+const getActions = (
+    data: Partial<Record<string, any>>,
+    type?: 'table',
+): ActionsType[] => {
+    if (!data) {
+        return [];
+    }
+    const actions = [
+        {
+            key: 'view',
+            text: '查看',
+            tooltip: {
+                title: '查看',
+            },
+            icon: 'SearchOutlined',
+            onClick: () => {
+                current.value = data;
+                visiable.value = true;
+            },
+        },
+    ];
+    return actions;
+};
+const terms = [
+    {
+        column: 'alarmRecordId',
+        termType: 'eq$not',
+        value: id,
+        type: 'and',
+    },
+];
+let params = ref({});
+const alarmStore = useAlarmStore();
+const { data } = alarmStore;
+let current = ref(); // 当前告警记录信息
+let details = ref(); // 告警记录的详情
 /**
  * 获取详情列表
  */
-const queryList = async () =>{
+const queryList = async (params: any) => {
-    const res = await detail(id);
+    const res = await queryHistoryList({
-    if(res.status === 200){
+        ...params,
-        if(res.result.targetType === 'devoce'){
+        // sorts: [{ name: 'alarmTime', order: 'desc' }],
-            columns.splice(2,0,{
+    });
-                dataIndex:'targetName',
+    if (res.status === 200) {
-                title:'告警设备',
+
-                key:'targetName'
+        return {
-            })
+            code: res.message,
-        }
+            result: {
-        return res
+                data: res.result.data,
+                pageIndex: res.result.pageIndex,
+                pageSize: res.result.pageSize,
+                total: res.result.total,
+            },
+            status: res.status,
+        };
+    } else {
+        return {
+            code: 200,
+            result: {
+                data: [],
+                pageIndex: 0,
+                pageSize: 0,
+                total: 0,
+            },
+            status: 200,
+        };
     }
+};
+/**
+ * 根据id初始化数据
+ */
+watchEffect(async () => {
+    const res = await detail(id);
+    if (res.status === 200) {
+        data.current = res.result;
+        if (res.result.targetType === 'device') {
+            columns.splice(2, 0, {
+                dataIndex: 'targetName',
+                title: '告警设备',
+                key: 'targetName',
+            });
+        }
+    }
+});
+const handleSearch = (_params: any) => {
+    params.value = _params;
+};
+
+/**
+ * 关闭模态弹窗
+ */
+const close = () => {
+  visiable.value = false
 }
 </script>
 <style lang="less" scoped>

src/views/rule-engine/Alarm/Log/Detail/info.vue

@@ -0,0 +1,59 @@
+<template>
+    <a-modal visible title="详情" okText="确定" cancelText="取消" :width="1000" @ok="closeModal" @cancel="closeModal">
+        <a-descriptions bordered :column="2">
+            <a-descriptions-item v-if="props.data.targetType==='device'" label="告警设备" :span="1">{{props.data?.targetName || ''}}</a-descriptions-item>
+            <a-descriptions-item v-if="props.data.targetType==='device'" label="设备ID" :span="1">{{props.data?.targetId || ''}}</a-descriptions-item>
+            <a-descriptions-item label="告警名称" :span="1">{{
+                props.data?.alarmConfigName
+            }}</a-descriptions-item>
+            <a-descriptions-item label="告警时间" :span="1">{{
+                moment(data?.alarmTime).format('YYYY-MM-DD HH:mm:ss')
+            }}</a-descriptions-item>
+            <a-descriptions-item label="告警级别" :span="1">
+                <a-tooltip
+                    placement="topLeft"
+                    :title="(Store.get('default-level') || []).find((item: any) => item?.level === data?.level)
+                ?.title || props.data?.level"
+                >
+                    <Ellipsis>
+                        <span>
+                            {{(Store.get('default-level') || []).find((item: any) => item?.level === data?.level)
+                ?.title || props.data?.level}}
+                        </span>
+                    </Ellipsis>
+                </a-tooltip>
+            </a-descriptions-item>
+            <a-descriptions-item label="告警说明" :span="1"
+                ><a-tooltip
+                    placement="topLeft"
+                    :title="data?.description || ''"
+                >
+                    <Ellipsis>
+                        <span>
+                            {{ data?.description || '' }}
+                        </span> </Ellipsis
+                    >
+                </a-tooltip></a-descriptions-item
+            >
+            <a-descriptions-item
+                label="告警流水"
+                :span="2"
+            ><div style="max-height: 500px; overflow-y: auto;"><JsonViewer :value="JSON.parse(data?.alarmInfo || '{}')" :expand-depth="5"></JsonViewer></div></a-descriptions-item>
+        </a-descriptions>
+    </a-modal>
+</template>
+
+<script lang="ts" setup>
+import moment from 'moment';
+import { Store } from 'jetlinks-store';
+import JsonViewer from 'vue-json-viewer';
+const props = defineProps({
+    data: Object,
+});
+const emit = defineEmits(['close'])
+const closeModal = () => {
+    emit('close');
+}
+</script>
+<style lang="less" scoped>
+</style>

src/views/rule-engine/Instance/index.vue

@@ -105,7 +105,6 @@
                                 @click="i.onClick"
                                 type="link"
                                 style="padding: 0px"
-                                :hasPermission="'device/Instance:' + i.key"
                             >
                                 <template #icon
                                     ><AIcon :type="i.icon"