feat: 告警中心告警配置
This commit is contained in:
parent
ee89ea27b0
commit
7cef68f828
|
@ -1,5 +1,18 @@
|
||||||
import server from '@/utils/request';
|
import server from '@/utils/request';
|
||||||
|
import { LevelItem } from '@/views/rule-engine/Alarm/Config/typing';
|
||||||
/**
|
/**
|
||||||
* 查询等级
|
* 查询等级
|
||||||
*/
|
*/
|
||||||
export const queryLevel = () => server.get('/alarm/config/default/level');
|
export const queryLevel = () => server.get('/alarm/config/default/level');
|
||||||
|
/**
|
||||||
|
* 保存告警等级
|
||||||
|
*/
|
||||||
|
export const saveLevel = (data:LevelItem[]) => server.patch('/alarm/config/default/level',data);
|
||||||
|
/**
|
||||||
|
* 获取数据流转数据
|
||||||
|
*/
|
||||||
|
export const getDataExchange = (type:'consume' | 'producer') => server.get(`/alarm/config/${type}/data-exchange`);
|
||||||
|
/**
|
||||||
|
* 保存告警数据输出
|
||||||
|
*/
|
||||||
|
export const saveOutputData = (data:any) => server.patch('/alarm/config/data-exchange',data);
|
|
@ -18,7 +18,7 @@
|
||||||
</template>
|
</template>
|
||||||
<Basic ref="basicRef" />
|
<Basic ref="basicRef" />
|
||||||
</a-collapse-panel>
|
</a-collapse-panel>
|
||||||
<a-collapse-panel key="2" forceRender>
|
<a-collapse-panel key="2" >
|
||||||
<template #header>
|
<template #header>
|
||||||
<span class="title">菜单初始化</span>
|
<span class="title">菜单初始化</span>
|
||||||
<span class="sub-title"
|
<span class="sub-title"
|
||||||
|
@ -36,7 +36,7 @@
|
||||||
</template>
|
</template>
|
||||||
<Role ref="roleRef"></Role>
|
<Role ref="roleRef"></Role>
|
||||||
</a-collapse-panel>
|
</a-collapse-panel>
|
||||||
<a-collapse-panel key="4">
|
<a-collapse-panel key="4" forceRender>
|
||||||
<template #header>
|
<template #header>
|
||||||
<span class="title">初始化数据</span>
|
<span class="title">初始化数据</span>
|
||||||
<span class="sub-title"
|
<span class="sub-title"
|
||||||
|
|
|
@ -0,0 +1,99 @@
|
||||||
|
<template>
|
||||||
|
<a-modal
|
||||||
|
:maskClosable="false"
|
||||||
|
width="45vw"
|
||||||
|
title="编辑"
|
||||||
|
@cancel="close"
|
||||||
|
@ok="save"
|
||||||
|
visible
|
||||||
|
cancelText="取消"
|
||||||
|
okText="确定"
|
||||||
|
>
|
||||||
|
<a-form layout="vertical" :model="inputData">
|
||||||
|
<a-form-item
|
||||||
|
label="kafka地址"
|
||||||
|
name="address"
|
||||||
|
:rules="[
|
||||||
|
{
|
||||||
|
max: 64,
|
||||||
|
message: '最多输入64个字符',
|
||||||
|
},
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<a-input
|
||||||
|
v-model:value="inputData.address"
|
||||||
|
placeholder="请输入kafka地址"
|
||||||
|
></a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item
|
||||||
|
label="topic"
|
||||||
|
name="topic"
|
||||||
|
:rules="[
|
||||||
|
{
|
||||||
|
max: 64,
|
||||||
|
message: '最多输入64个字符',
|
||||||
|
},
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<a-input v-model:value="inputData.topic"></a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="状态">
|
||||||
|
<a-switch
|
||||||
|
checked-children="启用"
|
||||||
|
un-checked-children="启用"
|
||||||
|
v-model:checked="inputData.status"
|
||||||
|
></a-switch>
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
</a-modal>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { Form } from 'ant-design-vue';
|
||||||
|
import { saveOutputData } from '@/api/rule-engine/config';
|
||||||
|
import { message } from 'ant-design-vue/es';
|
||||||
|
const useForm = Form.useForm;
|
||||||
|
const Myprops = defineProps({
|
||||||
|
data: {
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
let inputData = reactive({
|
||||||
|
status: false,
|
||||||
|
address: '',
|
||||||
|
topic: '',
|
||||||
|
});
|
||||||
|
watchEffect(() => {
|
||||||
|
inputData.status =
|
||||||
|
Myprops.data?.data?.state?.value === 'enabled' ? true : false;
|
||||||
|
inputData.address = Myprops.data?.data?.config?.config?.address;
|
||||||
|
inputData.topic = Myprops.data?.data?.config?.config?.topic;
|
||||||
|
});
|
||||||
|
|
||||||
|
const close = () => {
|
||||||
|
emit('closeModel');
|
||||||
|
};
|
||||||
|
const save = () => {
|
||||||
|
saveOutputData({
|
||||||
|
config: {
|
||||||
|
sourceType: 'kafka',
|
||||||
|
config: {
|
||||||
|
...inputData,
|
||||||
|
state: inputData?.status ? 'enabled' : 'disable',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
state: inputData?.status ? 'enabled' : 'disable',
|
||||||
|
id: Myprops?.data?.data?.id,
|
||||||
|
sourceType: 'kafka',
|
||||||
|
exchangeType: 'consume',
|
||||||
|
}).then((res) => {
|
||||||
|
if (res.status === 200) {
|
||||||
|
message.success('操作成功');
|
||||||
|
emit('saveSuc');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const emit = defineEmits(['closeModel', 'saveSuc']);
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
</style>
|
|
@ -0,0 +1,109 @@
|
||||||
|
<template>
|
||||||
|
<a-modal
|
||||||
|
:maskClosable="false"
|
||||||
|
width="45vw"
|
||||||
|
title="编辑"
|
||||||
|
@cancel="close"
|
||||||
|
@ok="save"
|
||||||
|
visible
|
||||||
|
cancelText="取消"
|
||||||
|
okText="确定"
|
||||||
|
>
|
||||||
|
<a-form layout="vertical" :model="outputData">
|
||||||
|
<a-form-item label="状态">
|
||||||
|
<a-switch
|
||||||
|
checked-children="启用"
|
||||||
|
un-checked-children="启用"
|
||||||
|
v-model:checked="outputData.status"
|
||||||
|
></a-switch>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item
|
||||||
|
v-if="outputData.status"
|
||||||
|
label="kafka地址"
|
||||||
|
name="address"
|
||||||
|
:rules="[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入kafka地址',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
max: 64,
|
||||||
|
message: '最多输入64个字符',
|
||||||
|
},
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<a-input
|
||||||
|
v-model:value="outputData.address"
|
||||||
|
placeholder="请输入kafka地址"
|
||||||
|
></a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item
|
||||||
|
v-if="outputData.status"
|
||||||
|
label="topic"
|
||||||
|
name="topic"
|
||||||
|
:rules="[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入topic',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
max: 64,
|
||||||
|
message: '最多输入64个字符',
|
||||||
|
},
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<a-input v-model:value="outputData.topic"></a-input>
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
</a-modal>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { Form } from 'ant-design-vue';
|
||||||
|
import { saveOutputData } from '@/api/rule-engine/config';
|
||||||
|
import { message } from 'ant-design-vue/es';
|
||||||
|
const useForm = Form.useForm;
|
||||||
|
const Myprops = defineProps({
|
||||||
|
data: {
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
let outputData = reactive({
|
||||||
|
status: false,
|
||||||
|
address: '',
|
||||||
|
topic: '',
|
||||||
|
});
|
||||||
|
watchEffect(() => {
|
||||||
|
outputData.status =
|
||||||
|
Myprops.data?.data?.state?.value === 'enabled' ? true : false;
|
||||||
|
outputData.address = Myprops.data?.data?.config?.config?.address;
|
||||||
|
outputData.topic = Myprops.data?.data?.config?.config?.topic;
|
||||||
|
});
|
||||||
|
|
||||||
|
const close = () => {
|
||||||
|
emit('closeModel');
|
||||||
|
};
|
||||||
|
const save = () => {
|
||||||
|
saveOutputData({
|
||||||
|
config: {
|
||||||
|
sourceType: 'kafka',
|
||||||
|
config: {
|
||||||
|
...outputData,
|
||||||
|
state: outputData?.status ? 'enabled' : 'disable',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
state: outputData?.status ? 'enabled' : 'disable',
|
||||||
|
id: Myprops?.data?.data?.id,
|
||||||
|
sourceType: 'kafka',
|
||||||
|
exchangeType: 'producer',
|
||||||
|
}).then((res) => {
|
||||||
|
if (res.status === 200) {
|
||||||
|
message.success('操作成功');
|
||||||
|
emit('saveSuc');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const emit = defineEmits(['closeModel', 'saveSuc']);
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
</style>
|
|
@ -0,0 +1,532 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<a-row :gutter="24">
|
||||||
|
<a-col :span="14">
|
||||||
|
<div class="alarmFlow-left">
|
||||||
|
<a-card
|
||||||
|
:head-style="{ borderBottom: 'none', height: '30px' }"
|
||||||
|
:bordered="false"
|
||||||
|
>
|
||||||
|
<template #title>
|
||||||
|
<div class="alarmTitle">
|
||||||
|
<span>告警数据输出</span>
|
||||||
|
<a-tooltip
|
||||||
|
title="将告警数据输出到其他第三方系统"
|
||||||
|
>
|
||||||
|
<AIcon
|
||||||
|
type="QuestionCircleOutlined"
|
||||||
|
style="
|
||||||
|
margin-left: 6px;
|
||||||
|
line-height: 35px;
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</a-tooltip>
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
margin: 0 0px 0 4px;
|
||||||
|
color: #1d39c4;
|
||||||
|
cursor: pointer;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<edit-outlined @click="showOutput"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<a-descriptions
|
||||||
|
bordered
|
||||||
|
:labelStyle="{ width: 112 + 'px' }"
|
||||||
|
:contentStyle="{ minWidth: 100 + 'px' }"
|
||||||
|
:column="2"
|
||||||
|
>
|
||||||
|
<a-descriptions-item
|
||||||
|
label="kafka地址"
|
||||||
|
:content-style="{ minWidth: '200px' }"
|
||||||
|
><a-badge
|
||||||
|
:status="
|
||||||
|
output?.running ? 'success' : 'error'
|
||||||
|
"
|
||||||
|
:text="
|
||||||
|
output?.data?.config?.config?.address ||
|
||||||
|
''
|
||||||
|
"
|
||||||
|
></a-badge
|
||||||
|
></a-descriptions-item>
|
||||||
|
<a-descriptions-item label="topic">{{
|
||||||
|
output?.data?.config?.config?.topic || ''
|
||||||
|
}}</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="状态" :span="2"
|
||||||
|
><a-badge
|
||||||
|
:status="
|
||||||
|
output?.data?.state?.value === 'enabled'
|
||||||
|
? 'success'
|
||||||
|
: 'error'
|
||||||
|
"
|
||||||
|
:text="output?.data?.state?.text || ''"
|
||||||
|
></a-badge
|
||||||
|
></a-descriptions-item>
|
||||||
|
</a-descriptions>
|
||||||
|
</a-card>
|
||||||
|
<a-card
|
||||||
|
:head-style="{ borderBottom: 'none', height: '30px' }"
|
||||||
|
:bordered="false"
|
||||||
|
>
|
||||||
|
<template #title>
|
||||||
|
<div class="alarmTitle">
|
||||||
|
<span>告警处理结果输入</span>
|
||||||
|
<a-tooltip title="接收第三方系统处理的告警结果">
|
||||||
|
<AIcon
|
||||||
|
type="QuestionCircleOutlined"
|
||||||
|
style="
|
||||||
|
margin-left: 6px;
|
||||||
|
line-height: 35px;
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</a-tooltip>
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
margin: 0 0px 0 4px;
|
||||||
|
color: #1d39c4;
|
||||||
|
cursor: pointer;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<edit-outlined @click="showInput"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<a-descriptions
|
||||||
|
bordered
|
||||||
|
:labelStyle="{ width: 112 + 'px' }"
|
||||||
|
:contentStyle="{ minWidth: 150 + 'px' }"
|
||||||
|
:column="2"
|
||||||
|
>
|
||||||
|
<a-descriptions-item label="kafka地址"
|
||||||
|
><a-badge
|
||||||
|
:status="
|
||||||
|
input?.running ? 'success' : 'error'
|
||||||
|
"
|
||||||
|
:text="
|
||||||
|
input?.data?.config?.config?.address ||
|
||||||
|
''
|
||||||
|
"
|
||||||
|
></a-badge
|
||||||
|
></a-descriptions-item>
|
||||||
|
<a-descriptions-item label="topic">{{
|
||||||
|
input?.data?.config?.config?.topic || ''
|
||||||
|
}}</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="状态" :span="2"
|
||||||
|
><a-badge
|
||||||
|
:status="
|
||||||
|
input?.data?.state?.value === 'enabled'
|
||||||
|
? 'success'
|
||||||
|
: 'error'
|
||||||
|
"
|
||||||
|
:text="input?.data?.state?.text || ''"
|
||||||
|
></a-badge
|
||||||
|
></a-descriptions-item>
|
||||||
|
</a-descriptions>
|
||||||
|
</a-card>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="10">
|
||||||
|
<div class="alarmFlow-right">
|
||||||
|
<div class="doc">
|
||||||
|
<h1>功能图示</h1>
|
||||||
|
<div class="image">
|
||||||
|
<a-image
|
||||||
|
width="100%"
|
||||||
|
:src="getImage('/alarm/io.png')"
|
||||||
|
></a-image>
|
||||||
|
</div>
|
||||||
|
<h1>功能说明</h1>
|
||||||
|
<div>
|
||||||
|
1、平台支持将告警数据输出到kafka,第三方系统可订阅kafka中的告警数据,进行业务处理。
|
||||||
|
</div>
|
||||||
|
<h2>输出参数</h2>
|
||||||
|
<div>
|
||||||
|
<a-table
|
||||||
|
:dataSource="outputData"
|
||||||
|
:pagination="false"
|
||||||
|
:columns="outputColumns"
|
||||||
|
></a-table>
|
||||||
|
</div>
|
||||||
|
<h2>示例</h2>
|
||||||
|
<div v-html="markdownOutputText" class="code"></div>
|
||||||
|
<div>
|
||||||
|
2、平台支持订阅kafka中告警处理数据,并更新告警记录状态。
|
||||||
|
</div>
|
||||||
|
<h2>订阅参数</h2>
|
||||||
|
<div>
|
||||||
|
<a-table
|
||||||
|
:dataSource="subData"
|
||||||
|
:pagination="false"
|
||||||
|
:columns="subColumns"
|
||||||
|
></a-table>
|
||||||
|
</div>
|
||||||
|
<h2>示例</h2>
|
||||||
|
<div class="code" v-html="markdownSubText"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<InputSave :data="input" v-if="inputVisible" @closeModel="closeInput" @saveSuc="saveInput"/>
|
||||||
|
<OutputSave :data="output" v-if="outputVisible" @closeModel="closeOutput" @saveSuc="saveOutput"/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import InputSave from './Save/input.vue'
|
||||||
|
import OutputSave from './save/output.vue'
|
||||||
|
import {
|
||||||
|
EditOutlined,
|
||||||
|
DeleteOutlined,
|
||||||
|
PlusOutlined,
|
||||||
|
} from '@ant-design/icons-vue';
|
||||||
|
import { getDataExchange } from '@/api/rule-engine/config';
|
||||||
|
import { getImage } from '@/utils/comm';
|
||||||
|
import { marked } from 'marked';
|
||||||
|
let input = ref<any>();
|
||||||
|
let output = ref<any>();
|
||||||
|
const outputData = [
|
||||||
|
{
|
||||||
|
key: 'alarmConfigName',
|
||||||
|
name: '告警配置名称',
|
||||||
|
type: 'string',
|
||||||
|
desc: '推送的告警配置名称',
|
||||||
|
example: '烟感告警',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'alarmConfigId',
|
||||||
|
name: '告警配置ID',
|
||||||
|
type: 'string',
|
||||||
|
desc: '推送的告警配置ID',
|
||||||
|
example: '1605111722418597888',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'Id',
|
||||||
|
name: '告警数据ID',
|
||||||
|
type: 'string',
|
||||||
|
desc: '告警唯一性标识',
|
||||||
|
example: '1515992841393119232',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'alarmRecordId',
|
||||||
|
name: '告警记录ID',
|
||||||
|
type: 'string',
|
||||||
|
desc: '告警记录的唯一标识,可根据此ID处理告警',
|
||||||
|
example: 'ba33a59ca5ebe3dccfcd75fd0575be4e',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'targetType',
|
||||||
|
name: '告警目标类型',
|
||||||
|
type: 'string',
|
||||||
|
desc: '告警所属的业务类型,具体有产品、设备、部门、其他',
|
||||||
|
example: '产品',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'targetId',
|
||||||
|
name: '告警目标ID',
|
||||||
|
type: 'string',
|
||||||
|
desc: '告警目标唯一性标识',
|
||||||
|
example: '1583300346713661440',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'targetName',
|
||||||
|
name: '告警目标名称',
|
||||||
|
type: 'string',
|
||||||
|
desc: '告警目标实例名称',
|
||||||
|
example: '海康烟感',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'alarmTime',
|
||||||
|
name: '告警时间',
|
||||||
|
type: 'long',
|
||||||
|
desc: '告警触发时间',
|
||||||
|
example: '1651233650840',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'sourceType',
|
||||||
|
name: '告警源类型',
|
||||||
|
type: 'string',
|
||||||
|
desc: '触发告警的源类型。当前只有device',
|
||||||
|
example: 'device',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'sourceId',
|
||||||
|
name: '告警源ID',
|
||||||
|
type: 'string',
|
||||||
|
desc: '触发告警的源Id。如设备Id',
|
||||||
|
example: '1605138218826821632',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'sourceName',
|
||||||
|
name: '告警源名称',
|
||||||
|
type: 'string',
|
||||||
|
desc: '触发告警的源名称。如设备名称',
|
||||||
|
example: '1楼烟感S01',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'level',
|
||||||
|
name: '告警级别',
|
||||||
|
type: 'int',
|
||||||
|
desc: '告警严重程度指标',
|
||||||
|
example: 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'description',
|
||||||
|
name: '告警说明',
|
||||||
|
type: 'string',
|
||||||
|
desc: '告警规则说明',
|
||||||
|
example: '1楼烟感统一告警规则设置',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const subData = [
|
||||||
|
{
|
||||||
|
key: 'alarmRecordId',
|
||||||
|
name: '告警记录ID',
|
||||||
|
type: 'string',
|
||||||
|
require: '是',
|
||||||
|
desc: '告警记录的唯一标识,可根据此ID处理告警',
|
||||||
|
example: 'ba33a59ca5ebe3dccfcd75fd0575be4e',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'alarmConfigId',
|
||||||
|
name: '告警配置ID',
|
||||||
|
type: 'string',
|
||||||
|
require: '是',
|
||||||
|
desc: '推送的告警配置ID',
|
||||||
|
example: '1605111722418597888',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'alarmTime',
|
||||||
|
name: '告警时间',
|
||||||
|
type: 'long',
|
||||||
|
require: '是',
|
||||||
|
desc: '告警触发时间',
|
||||||
|
example: '1651233650840',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'handleTime',
|
||||||
|
name: '处理时间',
|
||||||
|
type: 'long',
|
||||||
|
require: '是',
|
||||||
|
desc: '告警处理时间,不填是默认为消息处理时间',
|
||||||
|
example: '1651233650840',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'describe',
|
||||||
|
name: '处理说明',
|
||||||
|
type: 'string',
|
||||||
|
require: '是',
|
||||||
|
desc: '告警处理内容详细描述说明',
|
||||||
|
example: '已联系第三方人员进行告警处理,现告警已恢复',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'type',
|
||||||
|
name: '处理类型',
|
||||||
|
type: 'enum',
|
||||||
|
require: '是',
|
||||||
|
desc: '支持system、user',
|
||||||
|
example: 'user',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'state',
|
||||||
|
name: '处理后的状态',
|
||||||
|
type: 'enum',
|
||||||
|
require: '是',
|
||||||
|
desc: 'warning、normal',
|
||||||
|
example: 'normal',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const outputColumns = [
|
||||||
|
{
|
||||||
|
title: '名称',
|
||||||
|
dataIndex: 'name',
|
||||||
|
key: 'name',
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '标识',
|
||||||
|
dataIndex: 'key',
|
||||||
|
key: 'key',
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '类型',
|
||||||
|
dataIndex: 'type',
|
||||||
|
key: 'type',
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '说明',
|
||||||
|
dataIndex: 'desc',
|
||||||
|
key: 'desc',
|
||||||
|
width: 100,
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '示例值',
|
||||||
|
dataIndex: 'example',
|
||||||
|
key: 'example',
|
||||||
|
width: 100,
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const subColumns = [...outputColumns];
|
||||||
|
subColumns.splice(3, 0, {
|
||||||
|
title: '必填',
|
||||||
|
dataIndex: 'require',
|
||||||
|
key: 'require',
|
||||||
|
ellipsis: true,
|
||||||
|
});
|
||||||
|
const subText = `
|
||||||
|
~~~json
|
||||||
|
{
|
||||||
|
"alarmRecordId": "ba33a59ca5ebe3dccfcd75fd0575be4e",
|
||||||
|
"alarmConfigId": "1605111722418597888",
|
||||||
|
"alarmTime": "1651233650840",
|
||||||
|
"handleTime": "1651233650841",
|
||||||
|
"describe": "已联系第三方人员进行告警处理,现告警已恢复",
|
||||||
|
"type": "user",
|
||||||
|
"state": "normal"
|
||||||
|
}
|
||||||
|
~~~
|
||||||
|
`;
|
||||||
|
const outputText = `
|
||||||
|
~~~json
|
||||||
|
{
|
||||||
|
"alarmConfigId": "1605111722418597888",
|
||||||
|
"id": "1515992841393119232",
|
||||||
|
"alarmConfigId": "1586989804257853441",
|
||||||
|
"alarmConfigName": "烟感告警",
|
||||||
|
"alarmRecordId": "ba33a59ca5ebe3dccfcd75fd0575be4e",
|
||||||
|
"level": "3",
|
||||||
|
"description": "设备温度过高",
|
||||||
|
"alarmTime": "1667202964007",
|
||||||
|
"sourceType": "device",
|
||||||
|
"sourceId": "1605138218826821632",
|
||||||
|
"sourceName": "1楼烟感S01",
|
||||||
|
"targetType": "device",
|
||||||
|
"targetName": "温度探测设备",
|
||||||
|
"targetId": "1583300346713661440"
|
||||||
|
}
|
||||||
|
~~~
|
||||||
|
`;
|
||||||
|
const render = new marked.Renderer();
|
||||||
|
const markdownSubText = shallowRef(marked(subText));
|
||||||
|
const markdownOutputText = shallowRef(marked(outputText));
|
||||||
|
let inputVisible = ref(false);
|
||||||
|
let outputVisible = ref(false);
|
||||||
|
marked.setOptions({
|
||||||
|
renderer: render,
|
||||||
|
gfm: true,
|
||||||
|
pedantic: false,
|
||||||
|
});
|
||||||
|
const handleOutputSearch = () => {
|
||||||
|
getDataExchange('producer').then((res) => {
|
||||||
|
if (res.status === 200) {
|
||||||
|
output.value = res.result;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const handleInputSearch = () => {
|
||||||
|
getDataExchange('consume').then((res) => {
|
||||||
|
if (res.status === 200) {
|
||||||
|
input.value = res.result;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
handleInputSearch();
|
||||||
|
handleOutputSearch();
|
||||||
|
const showInput = () => {
|
||||||
|
inputVisible.value = true;
|
||||||
|
}
|
||||||
|
const closeInput = () =>{
|
||||||
|
inputVisible.value = false;
|
||||||
|
}
|
||||||
|
const saveInput = () =>{
|
||||||
|
inputVisible.value = false;
|
||||||
|
handleInputSearch();
|
||||||
|
}
|
||||||
|
const showOutput = () =>{
|
||||||
|
outputVisible.value = true;
|
||||||
|
}
|
||||||
|
const closeOutput = () =>{
|
||||||
|
outputVisible.value = false;
|
||||||
|
}
|
||||||
|
const saveOutput = () =>{
|
||||||
|
outputVisible.value = false;
|
||||||
|
handleOutputSearch();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.alarmTitle {
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
padding-left: 10px;
|
||||||
|
color: rgba(0, 0, 0, 0.8);
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 1;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
line-height: 30px;
|
||||||
|
}
|
||||||
|
.alarmTitle::before {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 4px;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #1d39c4;
|
||||||
|
border-radius: 0 3px 3px 0;
|
||||||
|
content: ' ';
|
||||||
|
}
|
||||||
|
.alarmFlow-left,
|
||||||
|
.alarmFlow-right {
|
||||||
|
height: 780px;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
.alarmFlow-right {
|
||||||
|
margin-left: 20px;
|
||||||
|
padding-bottom: 24px;
|
||||||
|
}
|
||||||
|
.doc {
|
||||||
|
height: 100%;
|
||||||
|
padding: 24px;
|
||||||
|
overflow-y: auto;
|
||||||
|
color: rgba(#000, 0.8);
|
||||||
|
font-size: 14px;
|
||||||
|
background-color: #fff;
|
||||||
|
|
||||||
|
.url {
|
||||||
|
padding: 8px 16px;
|
||||||
|
color: #2f54eb;
|
||||||
|
background-color: rgba(#a7bdf7, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin: 16px 0;
|
||||||
|
color: rgba(#000, 0.85);
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin: 6px 10px;
|
||||||
|
color: rgba(0, 0, 0, 0.8);
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image {
|
||||||
|
margin: 16px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code {
|
||||||
|
padding: 16px;
|
||||||
|
background-color: #fafafa;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -1,10 +1,14 @@
|
||||||
<template>
|
<template>
|
||||||
<page-container :tabList="list" @tabChange="onTabChange">
|
<page-container :tabList="list" @tabChange="onTabChange" :tabActiveKey="tab">
|
||||||
<div v-if="true">
|
<div v-if="tab=='config'">
|
||||||
<a-row :gutter="24">
|
<a-row :gutter="24">
|
||||||
<a-col :span="14">
|
<a-col :span="14">
|
||||||
<div class="alarm-level">
|
<div class="alarm-level">
|
||||||
<a-card :headStyle="{ borderBottom: 'none' }" :bodyStyle="{paddingTop:0}">
|
<a-card
|
||||||
|
:headStyle="{ borderBottom: 'none', padding: 0 }"
|
||||||
|
:bodyStyle="{ padding: 0 }"
|
||||||
|
:bordered="false"
|
||||||
|
>
|
||||||
<template #title>
|
<template #title>
|
||||||
<div class="alarmLevelTitle">告警级别配置</div>
|
<div class="alarmLevelTitle">告警级别配置</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -23,21 +27,44 @@
|
||||||
<span>{{ `级别${i + 1}` }}</span>
|
<span>{{ `级别${i + 1}` }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<a-input type="text" v-model:value="item.title" :maxlength=64></a-input>
|
<a-input
|
||||||
|
type="text"
|
||||||
|
v-model:value="item.title"
|
||||||
|
:maxlength="64"
|
||||||
|
></a-input>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a-card>
|
</a-card>
|
||||||
|
<a-button
|
||||||
|
type="primary"
|
||||||
|
size="middle"
|
||||||
|
@click="handleSaveLevel"
|
||||||
|
>保存</a-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="10">
|
||||||
|
<div class="description">
|
||||||
|
<h1>功能说明</h1>
|
||||||
|
<div>
|
||||||
|
1、告警级别用于描述告警的严重程度,请根据业务管理方式进行自定义。
|
||||||
|
</div>
|
||||||
|
<div>2、告警级别将会在告警配置中被引用。</div>
|
||||||
|
<div>3、最多可配置5个级别。</div>
|
||||||
</div>
|
</div>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :span="10">123</a-col>
|
|
||||||
</a-row>
|
</a-row>
|
||||||
</div>
|
</div>
|
||||||
|
<Io v-else></Io>
|
||||||
</page-container>
|
</page-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { getImage } from '@/utils/comm';
|
import { getImage } from '@/utils/comm';
|
||||||
import { queryLevel } from '@/api/rule-engine/config';
|
import { queryLevel, saveLevel } from '@/api/rule-engine/config';
|
||||||
|
import { LevelItem } from './typing';
|
||||||
|
import { message } from 'ant-design-vue/es';
|
||||||
|
import Io from './Io/index.vue'
|
||||||
const list = ref([
|
const list = ref([
|
||||||
{
|
{
|
||||||
key: 'config',
|
key: 'config',
|
||||||
|
@ -48,11 +75,8 @@ const list = ref([
|
||||||
tab: '数据流转',
|
tab: '数据流转',
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
interface levelsObj {
|
let levels = ref<LevelItem[]>([]);
|
||||||
level: number;
|
let tab = ref<'io'|'config'|string>('io');
|
||||||
title?: string;
|
|
||||||
}
|
|
||||||
let levels = ref<levelsObj[]>([]);
|
|
||||||
const getAlarmLevel = () => {
|
const getAlarmLevel = () => {
|
||||||
queryLevel().then((res: any) => {
|
queryLevel().then((res: any) => {
|
||||||
if (res.status == 200) {
|
if (res.status == 200) {
|
||||||
|
@ -61,11 +85,22 @@ const getAlarmLevel = () => {
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
getAlarmLevel();
|
getAlarmLevel();
|
||||||
const onTabChange = (e: string) => {};
|
const handleSaveLevel = async () => {
|
||||||
|
saveLevel(levels.value).then((res) => {
|
||||||
|
if (res.status === 200) {
|
||||||
|
message.success('操作成功');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const onTabChange = (e: string) => {
|
||||||
|
tab.value = e;
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.alarm-level {
|
.alarm-level {
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
|
background-color: white;
|
||||||
|
height: 700px;
|
||||||
}
|
}
|
||||||
.alarmLevelTitle {
|
.alarmLevelTitle {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -88,4 +123,18 @@ const onTabChange = (e: string) => {};
|
||||||
.alarmInputItem {
|
.alarmInputItem {
|
||||||
margin-bottom: 22px;
|
margin-bottom: 22px;
|
||||||
}
|
}
|
||||||
|
.description {
|
||||||
|
height: 700px;
|
||||||
|
height: 100%;
|
||||||
|
padding: 24px;
|
||||||
|
overflow-y: auto;
|
||||||
|
color: rgba(#000, 0.8);
|
||||||
|
font-size: 14px;
|
||||||
|
background-color: #fff;
|
||||||
|
h1 {
|
||||||
|
margin: 16px 0;
|
||||||
|
color: rgba(#000, 0.85);
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 14px;}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
|
@ -83,8 +83,8 @@ export default defineConfig(({ mode}) => {
|
||||||
// target: 'http://192.168.32.244:8881',
|
// target: 'http://192.168.32.244:8881',
|
||||||
// target: 'http://47.112.135.104:5096', // opcua
|
// target: 'http://47.112.135.104:5096', // opcua
|
||||||
// target: 'http://120.77.179.54:8844', // 120测试
|
// target: 'http://120.77.179.54:8844', // 120测试
|
||||||
// target: 'http://47.108.63.174:8845', // 测试
|
target: 'http://47.108.63.174:8845', // 测试
|
||||||
target: 'http://120.77.179.54:8844',
|
// target: 'http://120.77.179.54:8844',
|
||||||
ws: 'ws://120.77.179.54:8844',
|
ws: 'ws://120.77.179.54:8844',
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
rewrite: (path) => path.replace(/^\/api/, '')
|
rewrite: (path) => path.replace(/^\/api/, '')
|
||||||
|
|
Loading…
Reference in New Issue