fix: 告警中心自测与组件替换
This commit is contained in:
leiqiaochu
parent
977b68473a
commit
34d3ff7419
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<a-modal
|
||||
<j-modal
|
||||
:maskClosable="false"
|
||||
width="45vw"
|
||||
title="编辑"
|
||||
|
|
@ -9,8 +9,8 @@
|
|||
cancelText="取消"
|
||||
okText="确定"
|
||||
>
|
||||
<a-form layout="vertical" :model="inputData">
|
||||
<a-form-item
|
||||
<j-form layout="vertical" :model="inputData" ref="formRef">
|
||||
<j-form-item
|
||||
label="kafka地址"
|
||||
name="address"
|
||||
:rules="[
|
||||
|
|
@ -20,12 +20,12 @@
|
|||
},
|
||||
]"
|
||||
>
|
||||
<a-input
|
||||
<j-input
|
||||
v-model:value="inputData.address"
|
||||
placeholder="请输入kafka地址"
|
||||
></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
></j-input>
|
||||
</j-form-item>
|
||||
<j-form-item
|
||||
label="topic"
|
||||
name="topic"
|
||||
:rules="[
|
||||
|
|
@ -35,17 +35,17 @@
|
|||
},
|
||||
]"
|
||||
>
|
||||
<a-input v-model:value="inputData.topic"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="状态">
|
||||
<a-switch
|
||||
<j-input v-model:value="inputData.topic"></j-input>
|
||||
</j-form-item>
|
||||
<j-form-item label="状态">
|
||||
<j-switch
|
||||
checked-children="启用"
|
||||
un-checked-children="启用"
|
||||
v-model:checked="inputData.status"
|
||||
></a-switch>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
></j-switch>
|
||||
</j-form-item>
|
||||
</j-form>
|
||||
</j-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
@ -53,6 +53,7 @@ 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 formRef = ref();
|
||||
const Myprops = defineProps({
|
||||
data: {
|
||||
default: '',
|
||||
|
|
@ -74,23 +75,25 @@ const close = () => {
|
|||
emit('closeModel');
|
||||
};
|
||||
const save = () => {
|
||||
saveOutputData({
|
||||
config: {
|
||||
sourceType: 'kafka',
|
||||
formRef.value.validateFields().then(() => {
|
||||
saveOutputData({
|
||||
config: {
|
||||
...inputData,
|
||||
state: inputData?.status ? 'enabled' : 'disable',
|
||||
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');
|
||||
}
|
||||
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']);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<a-modal
|
||||
<j-modal
|
||||
:maskClosable="false"
|
||||
width="45vw"
|
||||
title="编辑"
|
||||
|
|
@ -9,15 +9,15 @@
|
|||
cancelText="取消"
|
||||
okText="确定"
|
||||
>
|
||||
<a-form layout="vertical" :model="outputData">
|
||||
<a-form-item label="状态">
|
||||
<a-switch
|
||||
<j-form layout="vertical" :model="outputData" ref="formRef">
|
||||
<j-form-item label="状态">
|
||||
<j-switch
|
||||
checked-children="启用"
|
||||
un-checked-children="启用"
|
||||
v-model:checked="outputData.status"
|
||||
></a-switch>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
></j-switch>
|
||||
</j-form-item>
|
||||
<j-form-item
|
||||
v-if="outputData.status"
|
||||
label="kafka地址"
|
||||
name="address"
|
||||
|
|
@ -32,12 +32,12 @@
|
|||
},
|
||||
]"
|
||||
>
|
||||
<a-input
|
||||
<j-input
|
||||
v-model:value="outputData.address"
|
||||
placeholder="请输入kafka地址"
|
||||
></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
></j-input>
|
||||
</j-form-item>
|
||||
<j-form-item
|
||||
v-if="outputData.status"
|
||||
label="topic"
|
||||
name="topic"
|
||||
|
|
@ -52,16 +52,17 @@
|
|||
},
|
||||
]"
|
||||
>
|
||||
<a-input v-model:value="outputData.topic"></a-input>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
<j-input v-model:value="outputData.topic"></j-input>
|
||||
</j-form-item>
|
||||
</j-form>
|
||||
</j-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 formRef = ref();
|
||||
const useForm = Form.useForm;
|
||||
const Myprops = defineProps({
|
||||
data: {
|
||||
|
|
@ -84,23 +85,25 @@ const close = () => {
|
|||
emit('closeModel');
|
||||
};
|
||||
const save = () => {
|
||||
saveOutputData({
|
||||
config: {
|
||||
sourceType: 'kafka',
|
||||
formRef.value.validateFields().then(() => {
|
||||
saveOutputData({
|
||||
config: {
|
||||
...outputData,
|
||||
state: outputData?.status ? 'enabled' : 'disable',
|
||||
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');
|
||||
}
|
||||
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']);
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
<template>
|
||||
<div>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="14">
|
||||
<j-row :gutter="24">
|
||||
<j-col :span="14">
|
||||
<div class="alarmFlow-left">
|
||||
<a-card
|
||||
<j-card
|
||||
:head-style="{ borderBottom: 'none', height: '30px' }"
|
||||
:bordered="false"
|
||||
>
|
||||
<template #title>
|
||||
<div class="alarmTitle">
|
||||
<span>告警数据输出</span>
|
||||
<a-tooltip
|
||||
<j-tooltip
|
||||
title="将告警数据输出到其他第三方系统"
|
||||
>
|
||||
<AIcon
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
line-height: 35px;
|
||||
"
|
||||
/>
|
||||
</a-tooltip>
|
||||
</j-tooltip>
|
||||
|
||||
<PermissionButton
|
||||
type="link"
|
||||
|
|
@ -33,16 +33,16 @@
|
|||
</PermissionButton>
|
||||
</div>
|
||||
</template>
|
||||
<a-descriptions
|
||||
<j-descriptions
|
||||
bordered
|
||||
:labelStyle="{ width: 112 + 'px' }"
|
||||
:contentStyle="{ minWidth: 100 + 'px' }"
|
||||
:column="2"
|
||||
>
|
||||
<a-descriptions-item
|
||||
<j-descriptions-item
|
||||
label="kafka地址"
|
||||
:content-style="{ minWidth: '200px' }"
|
||||
><a-badge
|
||||
><j-badge
|
||||
:status="
|
||||
output?.running ? 'success' : 'error'
|
||||
"
|
||||
|
|
@ -50,31 +50,31 @@
|
|||
output?.data?.config?.config?.address ||
|
||||
''
|
||||
"
|
||||
></a-badge
|
||||
></a-descriptions-item>
|
||||
<a-descriptions-item label="topic">{{
|
||||
></j-badge
|
||||
></j-descriptions-item>
|
||||
<j-descriptions-item label="topic">{{
|
||||
output?.data?.config?.config?.topic || ''
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="状态" :span="2"
|
||||
><a-badge
|
||||
}}</j-descriptions-item>
|
||||
<j-descriptions-item label="状态" :span="2"
|
||||
><j-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
|
||||
></j-badge
|
||||
></j-descriptions-item>
|
||||
</j-descriptions>
|
||||
</j-card>
|
||||
<j-card
|
||||
:head-style="{ borderBottom: 'none', height: '30px' }"
|
||||
:bordered="false"
|
||||
>
|
||||
<template #title>
|
||||
<div class="alarmTitle">
|
||||
<span>告警处理结果输入</span>
|
||||
<a-tooltip title="接收第三方系统处理的告警结果">
|
||||
<j-tooltip title="接收第三方系统处理的告警结果">
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
style="
|
||||
|
|
@ -82,7 +82,7 @@
|
|||
line-height: 35px;
|
||||
"
|
||||
/>
|
||||
</a-tooltip>
|
||||
</j-tooltip>
|
||||
<PermissionButton
|
||||
type="link"
|
||||
@click="showInput"
|
||||
|
|
@ -93,14 +93,14 @@
|
|||
></PermissionButton>
|
||||
</div>
|
||||
</template>
|
||||
<a-descriptions
|
||||
<j-descriptions
|
||||
bordered
|
||||
:labelStyle="{ width: 112 + 'px' }"
|
||||
:contentStyle="{ minWidth: 150 + 'px' }"
|
||||
:column="2"
|
||||
>
|
||||
<a-descriptions-item label="kafka地址"
|
||||
><a-badge
|
||||
<j-descriptions-item label="kafka地址"
|
||||
><j-badge
|
||||
:status="
|
||||
input?.running ? 'success' : 'error'
|
||||
"
|
||||
|
|
@ -108,34 +108,34 @@
|
|||
input?.data?.config?.config?.address ||
|
||||
''
|
||||
"
|
||||
></a-badge
|
||||
></a-descriptions-item>
|
||||
<a-descriptions-item label="topic">{{
|
||||
></j-badge
|
||||
></j-descriptions-item>
|
||||
<j-descriptions-item label="topic">{{
|
||||
input?.data?.config?.config?.topic || ''
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="状态" :span="2"
|
||||
><a-badge
|
||||
}}</j-descriptions-item>
|
||||
<j-descriptions-item label="状态" :span="2"
|
||||
><j-badge
|
||||
:status="
|
||||
input?.data?.state?.value === 'enabled'
|
||||
? 'success'
|
||||
: 'error'
|
||||
"
|
||||
:text="input?.data?.state?.text || ''"
|
||||
></a-badge
|
||||
></a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-card>
|
||||
></j-badge
|
||||
></j-descriptions-item>
|
||||
</j-descriptions>
|
||||
</j-card>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="10">
|
||||
</j-col>
|
||||
<j-col :span="10">
|
||||
<div class="alarmFlow-right">
|
||||
<div class="doc">
|
||||
<h1>功能图示</h1>
|
||||
<div class="image">
|
||||
<a-image
|
||||
<j-image
|
||||
width="100%"
|
||||
:src="getImage('/alarm/io.png')"
|
||||
></a-image>
|
||||
></j-image>
|
||||
</div>
|
||||
<h1>功能说明</h1>
|
||||
<div>
|
||||
|
|
@ -143,11 +143,11 @@
|
|||
</div>
|
||||
<h2>输出参数</h2>
|
||||
<div>
|
||||
<a-table
|
||||
<j-table
|
||||
:dataSource="outputData"
|
||||
:pagination="false"
|
||||
:columns="outputColumns"
|
||||
></a-table>
|
||||
></j-table>
|
||||
</div>
|
||||
<h2>示例</h2>
|
||||
<div v-html="markdownOutputText" class="code"></div>
|
||||
|
|
@ -156,18 +156,18 @@
|
|||
</div>
|
||||
<h2>订阅参数</h2>
|
||||
<div>
|
||||
<a-table
|
||||
<j-table
|
||||
:dataSource="subData"
|
||||
:pagination="false"
|
||||
:columns="subColumns"
|
||||
></a-table>
|
||||
></j-table>
|
||||
</div>
|
||||
<h2>示例</h2>
|
||||
<div class="code" v-html="markdownSubText"></div>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</j-col>
|
||||
</j-row>
|
||||
<InputSave
|
||||
:data="input"
|
||||
v-if="inputVisible"
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<page-container :tabList="list" @tabChange="onTabChange" :tabActiveKey="tab">
|
||||
<div v-if="tab=='config'">
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="14">
|
||||
<j-row :gutter="24">
|
||||
<j-col :span="14">
|
||||
<div class="alarm-level">
|
||||
<a-card
|
||||
<j-card
|
||||
:headStyle="{ borderBottom: 'none', padding: 0 }"
|
||||
:bodyStyle="{ padding: 0 }"
|
||||
:bordered="false"
|
||||
|
|
@ -27,24 +27,24 @@
|
|||
<span>{{ `级别${i + 1}` }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<a-input
|
||||
<j-input
|
||||
type="text"
|
||||
v-model:value="item.title"
|
||||
:maxlength="64"
|
||||
></a-input>
|
||||
></j-input>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
<!-- <a-button
|
||||
</j-card>
|
||||
<!-- <j-button
|
||||
type="primary"
|
||||
size="middle"
|
||||
@click="handleSaveLevel"
|
||||
>保存</a-button
|
||||
>保存</j-button
|
||||
> -->
|
||||
<PermissionButton type="primary" size="middle" @click="handleSaveLevel" hasPermission="rule-engine/Alarm/Config:update">保存</PermissionButton>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="10">
|
||||
</j-col>
|
||||
<j-col :span="10">
|
||||
<div class="description">
|
||||
<h1>功能说明</h1>
|
||||
<div>
|
||||
|
|
@ -53,8 +53,8 @@
|
|||
<div>2、告警级别将会在告警配置中被引用。</div>
|
||||
<div>3、最多可配置5个级别。</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</div>
|
||||
<Io v-else></Io>
|
||||
</page-container>
|
||||
|
|
|
|||
|
|
@ -1,25 +1,35 @@
|
|||
<template>
|
||||
<page-container>
|
||||
<a-card>
|
||||
<a-tabs v-model:activeKey="activeKey">
|
||||
<a-tab-pane key="1" tab="基础配置">
|
||||
<j-card>
|
||||
<j-tabs :activeKey="activeKey" @change="changeTabs">
|
||||
<j-tab-pane key="1" tab="基础配置">
|
||||
<Base/>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="关联场景联动">
|
||||
</j-tab-pane>
|
||||
<j-tab-pane key="2" tab="关联场景联动">
|
||||
<Scene></Scene>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="3" tab="告警记录">
|
||||
</j-tab-pane>
|
||||
<j-tab-pane key="3" tab="告警记录">
|
||||
<Log/>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-card>
|
||||
</j-tab-pane>
|
||||
</j-tabs>
|
||||
</j-card>
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Base from './Base/index.vue';
|
||||
import Scene from './Scene/index.vue'
|
||||
import Log from './Log/indev.vue'
|
||||
import Scene from './Scene/index.vue';
|
||||
import Log from './Log/indev.vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { message } from 'ant-design-vue';
|
||||
const route = useRoute();
|
||||
const changeTabs = (e:any) =>{
|
||||
if(route.query?.id){
|
||||
activeKey.value = e;
|
||||
}else{
|
||||
message.error('请先保存基础配置');
|
||||
}
|
||||
}
|
||||
const activeKey = ref('1');
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<template>
|
||||
<page-container>
|
||||
<div>
|
||||
<Search
|
||||
<pro-search
|
||||
:columns="columns"
|
||||
target="device-instance"
|
||||
@search="handleSearch"
|
||||
></Search>
|
||||
/>
|
||||
<JProTable
|
||||
:columns="columns"
|
||||
:request="queryList"
|
||||
|
|
@ -160,7 +160,7 @@
|
|||
style="padding: 0px"
|
||||
:hasPermission="
|
||||
'rule-engine/Alarm/Configuration:' +
|
||||
item.key
|
||||
i.key
|
||||
"
|
||||
>
|
||||
<template #icon
|
||||
|
|
|
|||
|
|
@ -181,7 +181,7 @@ const close = () => {
|
|||
|
||||
watchEffect(()=>{
|
||||
current.value = details.value;
|
||||
if(route.query.detail && details.value){
|
||||
if(history.state?.params.detail && details.value){
|
||||
visiable.value = true;
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="new-alarm">
|
||||
<div class="title">最新警告</div>
|
||||
<div class="title">最新告警</div>
|
||||
<div v-if="alarmList.length" class="new-alarm-items">
|
||||
<ul>
|
||||
<li v-for="item in alarmList.slice(0, 3)" :key="item">
|
||||
|
|
|
|||
|
|
@ -1,21 +1,21 @@
|
|||
<template>
|
||||
<div>
|
||||
<a-radio-group
|
||||
<j-radio-group
|
||||
v-if="quickBtn"
|
||||
default-value="today"
|
||||
button-style="solid"
|
||||
v-model:value="radioValue"
|
||||
@change="(e) => handleBtnChange(e.target.value)"
|
||||
>
|
||||
<a-radio-button
|
||||
<j-radio-button
|
||||
v-for="item in quickBtnList"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
>
|
||||
{{ item.label }}
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
<a-range-picker
|
||||
</j-radio-button>
|
||||
</j-radio-group>
|
||||
<j-range-picker
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
valueFormat="YYYY-MM-DD HH:mm:ss"
|
||||
style="margin-left: 12px"
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
v-model:value="rangeVal"
|
||||
:allowClear="false"
|
||||
>
|
||||
</a-range-picker>
|
||||
</j-range-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,12 +4,12 @@
|
|||
<div class="content-left">
|
||||
<div class="content-left-title">
|
||||
<span>{{ title }}</span>
|
||||
<a-tooltip placement="top" v-if="tooltip">
|
||||
<j-tooltip placement="top" v-if="tooltip">
|
||||
<template #title>
|
||||
<span>{{ tooltip }}</span>
|
||||
</template>
|
||||
<AIcon type="QuestionCircleOutlined" />
|
||||
</a-tooltip>
|
||||
</j-tooltip>
|
||||
</div>
|
||||
<div class="content-left-value">{{ value }}</div>
|
||||
</div>
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
<div class="top-card-footer">
|
||||
<template v-for="(item, index) in footer" :key="index">
|
||||
<span v-if="!item.status">{{ item.title }}</span>
|
||||
<a-badge v-else :text="item.title" :status="item.status" />
|
||||
<j-badge v-else :text="item.title" :status="item.status" />
|
||||
<div class="footer-item-value">{{ item.value }}</div>
|
||||
</template>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue