feat: 告警记录
This commit is contained in:
leiqiaochu
parent
5c3e344348
commit
67bb94ed7c
|
|
@ -29,3 +29,8 @@ export const handleLog = (data:any) => server.post('/alarm/record/_handle',data)
|
|||
* 告警记录
|
||||
*/
|
||||
export const detail = (id:string) => server.get(`/alarm/record/${id}`);
|
||||
|
||||
/**
|
||||
* 告警历史记录
|
||||
*/
|
||||
export const queryHistoryList = (data:any) => server.post('/alarm/history/_query',data)
|
||||
|
|
@ -1,51 +1,182 @@
|
|||
<template>
|
||||
<page-container>
|
||||
<Search :columns="columns" target="alarm-log-detail"></Search>
|
||||
<JTable :columns="columns" model="TABLE" :request="queryList"></JTable>
|
||||
<Search
|
||||
:columns="columns"
|
||||
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 columns = [{
|
||||
title:'告警时间',
|
||||
dataIndex:'alarmTime',
|
||||
key:'alarmTime',
|
||||
search:{
|
||||
type:'date'
|
||||
let visiable = ref(false);
|
||||
const columns = [
|
||||
{
|
||||
title: '告警时间',
|
||||
dataIndex: 'alarmTime',
|
||||
key: 'alarmTime',
|
||||
scopedSlots: true,
|
||||
search: {
|
||||
type: 'date',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '告警名称',
|
||||
dataIndex: 'alarmConfigName',
|
||||
key: 'alarmConfigName',
|
||||
},
|
||||
{
|
||||
title: '说明',
|
||||
dataIndex: 'description',
|
||||
key: 'description',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
key: 'action',
|
||||
scopedSlots: true,
|
||||
},
|
||||
];
|
||||
const getActions = (
|
||||
data: Partial<Record<string, any>>,
|
||||
type?: 'table',
|
||||
): ActionsType[] => {
|
||||
if (!data) {
|
||||
return [];
|
||||
}
|
||||
},{
|
||||
title:'告警名称',
|
||||
dataIndex:'alarmConfigName',
|
||||
key:'alarmConfigName',
|
||||
},{
|
||||
title:'说明',
|
||||
dataIndex:'description',
|
||||
key:'description'
|
||||
},{
|
||||
title:'操作',
|
||||
dataIndex:'action',
|
||||
key:'action'
|
||||
}]
|
||||
|
||||
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 queryHistoryList({
|
||||
...params,
|
||||
// sorts: [{ name: 'alarmTime', order: 'desc' }],
|
||||
});
|
||||
if (res.status === 200) {
|
||||
|
||||
return {
|
||||
code: res.message,
|
||||
result: {
|
||||
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){
|
||||
if(res.result.targetType === 'devoce'){
|
||||
columns.splice(2,0,{
|
||||
dataIndex:'targetName',
|
||||
title:'告警设备',
|
||||
key:'targetName'
|
||||
})
|
||||
if (res.status === 200) {
|
||||
data.current = res.result;
|
||||
if (res.result.targetType === 'device') {
|
||||
columns.splice(2, 0, {
|
||||
dataIndex: 'targetName',
|
||||
title: '告警设备',
|
||||
key: 'targetName',
|
||||
});
|
||||
}
|
||||
return res
|
||||
}
|
||||
});
|
||||
const handleSearch = (_params: any) => {
|
||||
params.value = _params;
|
||||
};
|
||||
|
||||
/**
|
||||
* 关闭模态弹窗
|
||||
*/
|
||||
const close = () => {
|
||||
visiable.value = false
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -105,7 +105,6 @@
|
|||
@click="i.onClick"
|
||||
type="link"
|
||||
style="padding: 0px"
|
||||
:hasPermission="'device/Instance:' + i.key"
|
||||
>
|
||||
<template #icon
|
||||
><AIcon :type="i.icon"
|
||||
|
|
|
|||
Loading…
Reference in New Issue