From 7cef68f828b5eaa1fce761d001956f1eba89d1f4 Mon Sep 17 00:00:00 2001
From: leiqiaochu <leiqiaochu@aossci.com>
Date: Wed, 22 Feb 2023 20:41:54 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=91=8A=E8=AD=A6=E4=B8=AD=E5=BF=83?=
 =?UTF-8?q?=E5=91=8A=E8=AD=A6=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/rule-engine/config.ts                 |  15 +-
 src/views/init-home/index.vue                 |   4 +-
 .../Alarm/Config/Io/Save/input.vue            |  99 ++++
 .../Alarm/Config/Io/Save/output.vue           | 109 ++++
 .../rule-engine/Alarm/Config/Io/index.vue     | 532 ++++++++++++++++++
 src/views/rule-engine/Alarm/Config/index.vue  |  73 ++-
 vite.config.ts                                |   4 +-
 7 files changed, 819 insertions(+), 17 deletions(-)
 create mode 100644 src/views/rule-engine/Alarm/Config/Io/Save/input.vue
 create mode 100644 src/views/rule-engine/Alarm/Config/Io/Save/output.vue
 create mode 100644 src/views/rule-engine/Alarm/Config/Io/index.vue

diff --git a/src/api/rule-engine/config.ts b/src/api/rule-engine/config.ts
index 51a9495e..f088f631 100644
--- a/src/api/rule-engine/config.ts
+++ b/src/api/rule-engine/config.ts
@@ -1,5 +1,18 @@
 import server from '@/utils/request';
+import { LevelItem } from '@/views/rule-engine/Alarm/Config/typing';
 /**
  * 查询等级
  */
-export const queryLevel = () => server.get('/alarm/config/default/level');
\ No newline at end of file
+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);
\ No newline at end of file
diff --git a/src/views/init-home/index.vue b/src/views/init-home/index.vue
index 86253051..ca82e116 100644
--- a/src/views/init-home/index.vue
+++ b/src/views/init-home/index.vue
@@ -18,7 +18,7 @@
                                 </template>
                                 <Basic ref="basicRef" />
                             </a-collapse-panel>
-                            <a-collapse-panel key="2" forceRender>
+                            <a-collapse-panel key="2" >
                                 <template #header>
                                     <span class="title">菜单初始化</span>
                                     <span class="sub-title"
@@ -36,7 +36,7 @@
                                 </template>
                                 <Role ref="roleRef"></Role>
                             </a-collapse-panel>
-                            <a-collapse-panel key="4">
+                            <a-collapse-panel key="4" forceRender>
                                 <template #header>
                                     <span class="title">初始化数据</span>
                                     <span class="sub-title"
diff --git a/src/views/rule-engine/Alarm/Config/Io/Save/input.vue b/src/views/rule-engine/Alarm/Config/Io/Save/input.vue
new file mode 100644
index 00000000..491904ae
--- /dev/null
+++ b/src/views/rule-engine/Alarm/Config/Io/Save/input.vue
@@ -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>
\ No newline at end of file
diff --git a/src/views/rule-engine/Alarm/Config/Io/Save/output.vue b/src/views/rule-engine/Alarm/Config/Io/Save/output.vue
new file mode 100644
index 00000000..a9eff425
--- /dev/null
+++ b/src/views/rule-engine/Alarm/Config/Io/Save/output.vue
@@ -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>
\ No newline at end of file
diff --git a/src/views/rule-engine/Alarm/Config/Io/index.vue b/src/views/rule-engine/Alarm/Config/Io/index.vue
new file mode 100644
index 00000000..d1799f52
--- /dev/null
+++ b/src/views/rule-engine/Alarm/Config/Io/index.vue
@@ -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>
\ No newline at end of file
diff --git a/src/views/rule-engine/Alarm/Config/index.vue b/src/views/rule-engine/Alarm/Config/index.vue
index 6f89fc35..699e13ed 100644
--- a/src/views/rule-engine/Alarm/Config/index.vue
+++ b/src/views/rule-engine/Alarm/Config/index.vue
@@ -1,10 +1,14 @@
 <template>
-    <page-container :tabList="list" @tabChange="onTabChange">
-        <div v-if="true">
+    <page-container :tabList="list" @tabChange="onTabChange" :tabActiveKey="tab">
+        <div v-if="tab=='config'">
             <a-row :gutter="24">
                 <a-col :span="14">
                     <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>
                                 <div class="alarmLevelTitle">告警级别配置</div>
                             </template>
@@ -23,21 +27,44 @@
                                     <span>{{ `级别${i + 1}` }}</span>
                                 </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>
                         </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>
                 </a-col>
-                <a-col :span="10">123</a-col>
             </a-row>
         </div>
+        <Io v-else></Io>
     </page-container>
 </template>
 
 <script lang="ts" setup>
 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([
     {
         key: 'config',
@@ -48,11 +75,8 @@ const list = ref([
         tab: '数据流转',
     },
 ]);
-interface levelsObj {
-    level: number;
-    title?: string;
-}
-let levels = ref<levelsObj[]>([]);
+let levels = ref<LevelItem[]>([]);
+let tab = ref<'io'|'config'|string>('io');
 const getAlarmLevel = () => {
     queryLevel().then((res: any) => {
         if (res.status == 200) {
@@ -61,11 +85,22 @@ const 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>
 <style lang="less" scoped>
 .alarm-level {
     padding: 24px;
+    background-color: white;
+    height: 700px;
 }
 .alarmLevelTitle {
     position: relative;
@@ -88,4 +123,18 @@ const onTabChange = (e: string) => {};
 .alarmInputItem {
     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>
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index 17c5e7fd..101b490d 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -83,8 +83,8 @@ export default defineConfig(({ mode}) => {
                   // target: 'http://192.168.32.244:8881',
                 //   target: 'http://47.112.135.104:5096', // opcua
                 //   target: 'http://120.77.179.54:8844', // 120测试
-                //   target: 'http://47.108.63.174:8845', // 测试
-                  target: 'http://120.77.179.54:8844',
+                  target: 'http://47.108.63.174:8845', // 测试
+                //   target: 'http://120.77.179.54:8844',
                   ws: 'ws://120.77.179.54:8844',
                   changeOrigin: true,
                   rewrite: (path) => path.replace(/^\/api/, '')