fix: 告警中心自测与组件替换

This commit is contained in:
leiqiaochu 2023-03-13 18:13:28 +08:00
parent 977b68473a
commit 34d3ff7419
10 changed files with 158 additions and 142 deletions

View File

@ -1,5 +1,5 @@
<template> <template>
<a-modal <j-modal
:maskClosable="false" :maskClosable="false"
width="45vw" width="45vw"
title="编辑" title="编辑"
@ -9,8 +9,8 @@
cancelText="取消" cancelText="取消"
okText="确定" okText="确定"
> >
<a-form layout="vertical" :model="inputData"> <j-form layout="vertical" :model="inputData" ref="formRef">
<a-form-item <j-form-item
label="kafka地址" label="kafka地址"
name="address" name="address"
:rules="[ :rules="[
@ -20,12 +20,12 @@
}, },
]" ]"
> >
<a-input <j-input
v-model:value="inputData.address" v-model:value="inputData.address"
placeholder="请输入kafka地址" placeholder="请输入kafka地址"
></a-input> ></j-input>
</a-form-item> </j-form-item>
<a-form-item <j-form-item
label="topic" label="topic"
name="topic" name="topic"
:rules="[ :rules="[
@ -35,17 +35,17 @@
}, },
]" ]"
> >
<a-input v-model:value="inputData.topic"></a-input> <j-input v-model:value="inputData.topic"></j-input>
</a-form-item> </j-form-item>
<a-form-item label="状态"> <j-form-item label="状态">
<a-switch <j-switch
checked-children="启用" checked-children="启用"
un-checked-children="启用" un-checked-children="启用"
v-model:checked="inputData.status" v-model:checked="inputData.status"
></a-switch> ></j-switch>
</a-form-item> </j-form-item>
</a-form> </j-form>
</a-modal> </j-modal>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -53,6 +53,7 @@ import { Form } from 'ant-design-vue';
import { saveOutputData } from '@/api/rule-engine/config'; import { saveOutputData } from '@/api/rule-engine/config';
import { message } from 'ant-design-vue/es'; import { message } from 'ant-design-vue/es';
const useForm = Form.useForm; const useForm = Form.useForm;
const formRef = ref();
const Myprops = defineProps({ const Myprops = defineProps({
data: { data: {
default: '', default: '',
@ -74,23 +75,25 @@ const close = () => {
emit('closeModel'); emit('closeModel');
}; };
const save = () => { const save = () => {
saveOutputData({ formRef.value.validateFields().then(() => {
config: { saveOutputData({
sourceType: 'kafka',
config: { config: {
...inputData, sourceType: 'kafka',
state: inputData?.status ? 'enabled' : 'disable', config: {
...inputData,
state: inputData?.status ? 'enabled' : 'disable',
},
}, },
}, state: inputData?.status ? 'enabled' : 'disable',
state: inputData?.status ? 'enabled' : 'disable', id: Myprops?.data?.data?.id,
id: Myprops?.data?.data?.id, sourceType: 'kafka',
sourceType: 'kafka', exchangeType: 'consume',
exchangeType: 'consume', }).then((res) => {
}).then((res) => { if (res.status === 200) {
if (res.status === 200) { message.success('操作成功');
message.success('操作成功'); emit('saveSuc');
emit('saveSuc'); }
} });
}); });
}; };
const emit = defineEmits(['closeModel', 'saveSuc']); const emit = defineEmits(['closeModel', 'saveSuc']);

View File

@ -1,5 +1,5 @@
<template> <template>
<a-modal <j-modal
:maskClosable="false" :maskClosable="false"
width="45vw" width="45vw"
title="编辑" title="编辑"
@ -9,15 +9,15 @@
cancelText="取消" cancelText="取消"
okText="确定" okText="确定"
> >
<a-form layout="vertical" :model="outputData"> <j-form layout="vertical" :model="outputData" ref="formRef">
<a-form-item label="状态"> <j-form-item label="状态">
<a-switch <j-switch
checked-children="启用" checked-children="启用"
un-checked-children="启用" un-checked-children="启用"
v-model:checked="outputData.status" v-model:checked="outputData.status"
></a-switch> ></j-switch>
</a-form-item> </j-form-item>
<a-form-item <j-form-item
v-if="outputData.status" v-if="outputData.status"
label="kafka地址" label="kafka地址"
name="address" name="address"
@ -32,12 +32,12 @@
}, },
]" ]"
> >
<a-input <j-input
v-model:value="outputData.address" v-model:value="outputData.address"
placeholder="请输入kafka地址" placeholder="请输入kafka地址"
></a-input> ></j-input>
</a-form-item> </j-form-item>
<a-form-item <j-form-item
v-if="outputData.status" v-if="outputData.status"
label="topic" label="topic"
name="topic" name="topic"
@ -52,16 +52,17 @@
}, },
]" ]"
> >
<a-input v-model:value="outputData.topic"></a-input> <j-input v-model:value="outputData.topic"></j-input>
</a-form-item> </j-form-item>
</a-form> </j-form>
</a-modal> </j-modal>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { Form } from 'ant-design-vue'; import { Form } from 'ant-design-vue';
import { saveOutputData } from '@/api/rule-engine/config'; import { saveOutputData } from '@/api/rule-engine/config';
import { message } from 'ant-design-vue/es'; import { message } from 'ant-design-vue/es';
const formRef = ref();
const useForm = Form.useForm; const useForm = Form.useForm;
const Myprops = defineProps({ const Myprops = defineProps({
data: { data: {
@ -84,23 +85,25 @@ const close = () => {
emit('closeModel'); emit('closeModel');
}; };
const save = () => { const save = () => {
saveOutputData({ formRef.value.validateFields().then(() => {
config: { saveOutputData({
sourceType: 'kafka',
config: { config: {
...outputData, sourceType: 'kafka',
state: outputData?.status ? 'enabled' : 'disable', config: {
...outputData,
state: outputData?.status ? 'enabled' : 'disable',
},
}, },
}, state: outputData?.status ? 'enabled' : 'disable',
state: outputData?.status ? 'enabled' : 'disable', id: Myprops?.data?.data?.id,
id: Myprops?.data?.data?.id, sourceType: 'kafka',
sourceType: 'kafka', exchangeType: 'producer',
exchangeType: 'producer', }).then((res) => {
}).then((res) => { if (res.status === 200) {
if (res.status === 200) { message.success('操作成功');
message.success('操作成功'); emit('saveSuc');
emit('saveSuc'); }
} });
}); });
}; };
const emit = defineEmits(['closeModel', 'saveSuc']); const emit = defineEmits(['closeModel', 'saveSuc']);

View File

@ -1,16 +1,16 @@
<template> <template>
<div> <div>
<a-row :gutter="24"> <j-row :gutter="24">
<a-col :span="14"> <j-col :span="14">
<div class="alarmFlow-left"> <div class="alarmFlow-left">
<a-card <j-card
:head-style="{ borderBottom: 'none', height: '30px' }" :head-style="{ borderBottom: 'none', height: '30px' }"
:bordered="false" :bordered="false"
> >
<template #title> <template #title>
<div class="alarmTitle"> <div class="alarmTitle">
<span>告警数据输出</span> <span>告警数据输出</span>
<a-tooltip <j-tooltip
title="将告警数据输出到其他第三方系统" title="将告警数据输出到其他第三方系统"
> >
<AIcon <AIcon
@ -20,7 +20,7 @@
line-height: 35px; line-height: 35px;
" "
/> />
</a-tooltip> </j-tooltip>
<PermissionButton <PermissionButton
type="link" type="link"
@ -33,16 +33,16 @@
</PermissionButton> </PermissionButton>
</div> </div>
</template> </template>
<a-descriptions <j-descriptions
bordered bordered
:labelStyle="{ width: 112 + 'px' }" :labelStyle="{ width: 112 + 'px' }"
:contentStyle="{ minWidth: 100 + 'px' }" :contentStyle="{ minWidth: 100 + 'px' }"
:column="2" :column="2"
> >
<a-descriptions-item <j-descriptions-item
label="kafka地址" label="kafka地址"
:content-style="{ minWidth: '200px' }" :content-style="{ minWidth: '200px' }"
><a-badge ><j-badge
:status=" :status="
output?.running ? 'success' : 'error' output?.running ? 'success' : 'error'
" "
@ -50,31 +50,31 @@
output?.data?.config?.config?.address || output?.data?.config?.config?.address ||
'' ''
" "
></a-badge ></j-badge
></a-descriptions-item> ></j-descriptions-item>
<a-descriptions-item label="topic">{{ <j-descriptions-item label="topic">{{
output?.data?.config?.config?.topic || '' output?.data?.config?.config?.topic || ''
}}</a-descriptions-item> }}</j-descriptions-item>
<a-descriptions-item label="状态" :span="2" <j-descriptions-item label="状态" :span="2"
><a-badge ><j-badge
:status=" :status="
output?.data?.state?.value === 'enabled' output?.data?.state?.value === 'enabled'
? 'success' ? 'success'
: 'error' : 'error'
" "
:text="output?.data?.state?.text || ''" :text="output?.data?.state?.text || ''"
></a-badge ></j-badge
></a-descriptions-item> ></j-descriptions-item>
</a-descriptions> </j-descriptions>
</a-card> </j-card>
<a-card <j-card
:head-style="{ borderBottom: 'none', height: '30px' }" :head-style="{ borderBottom: 'none', height: '30px' }"
:bordered="false" :bordered="false"
> >
<template #title> <template #title>
<div class="alarmTitle"> <div class="alarmTitle">
<span>告警处理结果输入</span> <span>告警处理结果输入</span>
<a-tooltip title="接收第三方系统处理的告警结果"> <j-tooltip title="接收第三方系统处理的告警结果">
<AIcon <AIcon
type="QuestionCircleOutlined" type="QuestionCircleOutlined"
style=" style="
@ -82,7 +82,7 @@
line-height: 35px; line-height: 35px;
" "
/> />
</a-tooltip> </j-tooltip>
<PermissionButton <PermissionButton
type="link" type="link"
@click="showInput" @click="showInput"
@ -93,14 +93,14 @@
></PermissionButton> ></PermissionButton>
</div> </div>
</template> </template>
<a-descriptions <j-descriptions
bordered bordered
:labelStyle="{ width: 112 + 'px' }" :labelStyle="{ width: 112 + 'px' }"
:contentStyle="{ minWidth: 150 + 'px' }" :contentStyle="{ minWidth: 150 + 'px' }"
:column="2" :column="2"
> >
<a-descriptions-item label="kafka地址" <j-descriptions-item label="kafka地址"
><a-badge ><j-badge
:status=" :status="
input?.running ? 'success' : 'error' input?.running ? 'success' : 'error'
" "
@ -108,34 +108,34 @@
input?.data?.config?.config?.address || input?.data?.config?.config?.address ||
'' ''
" "
></a-badge ></j-badge
></a-descriptions-item> ></j-descriptions-item>
<a-descriptions-item label="topic">{{ <j-descriptions-item label="topic">{{
input?.data?.config?.config?.topic || '' input?.data?.config?.config?.topic || ''
}}</a-descriptions-item> }}</j-descriptions-item>
<a-descriptions-item label="状态" :span="2" <j-descriptions-item label="状态" :span="2"
><a-badge ><j-badge
:status=" :status="
input?.data?.state?.value === 'enabled' input?.data?.state?.value === 'enabled'
? 'success' ? 'success'
: 'error' : 'error'
" "
:text="input?.data?.state?.text || ''" :text="input?.data?.state?.text || ''"
></a-badge ></j-badge
></a-descriptions-item> ></j-descriptions-item>
</a-descriptions> </j-descriptions>
</a-card> </j-card>
</div> </div>
</a-col> </j-col>
<a-col :span="10"> <j-col :span="10">
<div class="alarmFlow-right"> <div class="alarmFlow-right">
<div class="doc"> <div class="doc">
<h1>功能图示</h1> <h1>功能图示</h1>
<div class="image"> <div class="image">
<a-image <j-image
width="100%" width="100%"
:src="getImage('/alarm/io.png')" :src="getImage('/alarm/io.png')"
></a-image> ></j-image>
</div> </div>
<h1>功能说明</h1> <h1>功能说明</h1>
<div> <div>
@ -143,11 +143,11 @@
</div> </div>
<h2>输出参数</h2> <h2>输出参数</h2>
<div> <div>
<a-table <j-table
:dataSource="outputData" :dataSource="outputData"
:pagination="false" :pagination="false"
:columns="outputColumns" :columns="outputColumns"
></a-table> ></j-table>
</div> </div>
<h2>示例</h2> <h2>示例</h2>
<div v-html="markdownOutputText" class="code"></div> <div v-html="markdownOutputText" class="code"></div>
@ -156,18 +156,18 @@
</div> </div>
<h2>订阅参数</h2> <h2>订阅参数</h2>
<div> <div>
<a-table <j-table
:dataSource="subData" :dataSource="subData"
:pagination="false" :pagination="false"
:columns="subColumns" :columns="subColumns"
></a-table> ></j-table>
</div> </div>
<h2>示例</h2> <h2>示例</h2>
<div class="code" v-html="markdownSubText"></div> <div class="code" v-html="markdownSubText"></div>
</div> </div>
</div> </div>
</a-col> </j-col>
</a-row> </j-row>
<InputSave <InputSave
:data="input" :data="input"
v-if="inputVisible" v-if="inputVisible"

View File

@ -1,10 +1,10 @@
<template> <template>
<page-container :tabList="list" @tabChange="onTabChange" :tabActiveKey="tab"> <page-container :tabList="list" @tabChange="onTabChange" :tabActiveKey="tab">
<div v-if="tab=='config'"> <div v-if="tab=='config'">
<a-row :gutter="24"> <j-row :gutter="24">
<a-col :span="14"> <j-col :span="14">
<div class="alarm-level"> <div class="alarm-level">
<a-card <j-card
:headStyle="{ borderBottom: 'none', padding: 0 }" :headStyle="{ borderBottom: 'none', padding: 0 }"
:bodyStyle="{ padding: 0 }" :bodyStyle="{ padding: 0 }"
:bordered="false" :bordered="false"
@ -27,24 +27,24 @@
<span>{{ `级别${i + 1}` }}</span> <span>{{ `级别${i + 1}` }}</span>
</div> </div>
<div> <div>
<a-input <j-input
type="text" type="text"
v-model:value="item.title" v-model:value="item.title"
:maxlength="64" :maxlength="64"
></a-input> ></j-input>
</div> </div>
</div> </div>
</a-card> </j-card>
<!-- <a-button <!-- <j-button
type="primary" type="primary"
size="middle" size="middle"
@click="handleSaveLevel" @click="handleSaveLevel"
>保存</a-button >保存</j-button
> --> > -->
<PermissionButton type="primary" size="middle" @click="handleSaveLevel" hasPermission="rule-engine/Alarm/Config:update">保存</PermissionButton> <PermissionButton type="primary" size="middle" @click="handleSaveLevel" hasPermission="rule-engine/Alarm/Config:update">保存</PermissionButton>
</div> </div>
</a-col> </j-col>
<a-col :span="10"> <j-col :span="10">
<div class="description"> <div class="description">
<h1>功能说明</h1> <h1>功能说明</h1>
<div> <div>
@ -53,8 +53,8 @@
<div>2告警级别将会在告警配置中被引用</div> <div>2告警级别将会在告警配置中被引用</div>
<div>3最多可配置5个级别</div> <div>3最多可配置5个级别</div>
</div> </div>
</a-col> </j-col>
</a-row> </j-row>
</div> </div>
<Io v-else></Io> <Io v-else></Io>
</page-container> </page-container>

View File

@ -1,25 +1,35 @@
<template> <template>
<page-container> <page-container>
<a-card> <j-card>
<a-tabs v-model:activeKey="activeKey"> <j-tabs :activeKey="activeKey" @change="changeTabs">
<a-tab-pane key="1" tab="基础配置"> <j-tab-pane key="1" tab="基础配置">
<Base/> <Base/>
</a-tab-pane> </j-tab-pane>
<a-tab-pane key="2" tab="关联场景联动"> <j-tab-pane key="2" tab="关联场景联动">
<Scene></Scene> <Scene></Scene>
</a-tab-pane> </j-tab-pane>
<a-tab-pane key="3" tab="告警记录"> <j-tab-pane key="3" tab="告警记录">
<Log/> <Log/>
</a-tab-pane> </j-tab-pane>
</a-tabs> </j-tabs>
</a-card> </j-card>
</page-container> </page-container>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import Base from './Base/index.vue'; import Base from './Base/index.vue';
import Scene from './Scene/index.vue' import Scene from './Scene/index.vue';
import Log from './Log/indev.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'); const activeKey = ref('1');
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>

View File

@ -1,11 +1,11 @@
<template> <template>
<page-container> <page-container>
<div> <div>
<Search <pro-search
:columns="columns" :columns="columns"
target="device-instance" target="device-instance"
@search="handleSearch" @search="handleSearch"
></Search> />
<JProTable <JProTable
:columns="columns" :columns="columns"
:request="queryList" :request="queryList"
@ -160,7 +160,7 @@
style="padding: 0px" style="padding: 0px"
:hasPermission=" :hasPermission="
'rule-engine/Alarm/Configuration:' + 'rule-engine/Alarm/Configuration:' +
item.key i.key
" "
> >
<template #icon <template #icon

View File

@ -181,7 +181,7 @@ const close = () => {
watchEffect(()=>{ watchEffect(()=>{
current.value = details.value; current.value = details.value;
if(route.query.detail && details.value){ if(history.state?.params.detail && details.value){
visiable.value = true; visiable.value = true;
} }
}) })

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="new-alarm"> <div class="new-alarm">
<div class="title">最新</div> <div class="title">最新</div>
<div v-if="alarmList.length" class="new-alarm-items"> <div v-if="alarmList.length" class="new-alarm-items">
<ul> <ul>
<li v-for="item in alarmList.slice(0, 3)" :key="item"> <li v-for="item in alarmList.slice(0, 3)" :key="item">

View File

@ -1,21 +1,21 @@
<template> <template>
<div> <div>
<a-radio-group <j-radio-group
v-if="quickBtn" v-if="quickBtn"
default-value="today" default-value="today"
button-style="solid" button-style="solid"
v-model:value="radioValue" v-model:value="radioValue"
@change="(e) => handleBtnChange(e.target.value)" @change="(e) => handleBtnChange(e.target.value)"
> >
<a-radio-button <j-radio-button
v-for="item in quickBtnList" v-for="item in quickBtnList"
:key="item.value" :key="item.value"
:value="item.value" :value="item.value"
> >
{{ item.label }} {{ item.label }}
</a-radio-button> </j-radio-button>
</a-radio-group> </j-radio-group>
<a-range-picker <j-range-picker
format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss"
valueFormat="YYYY-MM-DD HH:mm:ss" valueFormat="YYYY-MM-DD HH:mm:ss"
style="margin-left: 12px" style="margin-left: 12px"
@ -23,7 +23,7 @@
v-model:value="rangeVal" v-model:value="rangeVal"
:allowClear="false" :allowClear="false"
> >
</a-range-picker> </j-range-picker>
</div> </div>
</template> </template>

View File

@ -4,12 +4,12 @@
<div class="content-left"> <div class="content-left">
<div class="content-left-title"> <div class="content-left-title">
<span>{{ title }}</span> <span>{{ title }}</span>
<a-tooltip placement="top" v-if="tooltip"> <j-tooltip placement="top" v-if="tooltip">
<template #title> <template #title>
<span>{{ tooltip }}</span> <span>{{ tooltip }}</span>
</template> </template>
<AIcon type="QuestionCircleOutlined" /> <AIcon type="QuestionCircleOutlined" />
</a-tooltip> </j-tooltip>
</div> </div>
<div class="content-left-value">{{ value }}</div> <div class="content-left-value">{{ value }}</div>
</div> </div>
@ -23,7 +23,7 @@
<div class="top-card-footer"> <div class="top-card-footer">
<template v-for="(item, index) in footer" :key="index"> <template v-for="(item, index) in footer" :key="index">
<span v-if="!item.status">{{ item.title }}</span> <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> <div class="footer-item-value">{{ item.value }}</div>
</template> </template>
</div> </div>