From fd0c3f2eb838507755d17e151d07a7510f2ec23f Mon Sep 17 00:00:00 2001
From: jackhoo_98 <jackhoo_98@foxmail.com>
Date: Mon, 27 Feb 2023 11:45:41 +0800
Subject: [PATCH 1/4] =?UTF-8?q?fix:=20=E8=BF=9C=E7=A8=8B=E5=8D=87=E7=BA=A7?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=20=E4=BF=AE=E5=A4=8D=E7=89=88=E6=9C=AC?=
 =?UTF-8?q?=E5=8F=B7=E9=87=8D=E5=A4=8D=E6=A0=A1=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/device/firmware.ts               |  6 +++--
 src/views/device/Firmware/Save/index.vue | 34 ++++++++++++++++++++----
 2 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/src/api/device/firmware.ts b/src/api/device/firmware.ts
index a21e948a..19e3c7b0 100644
--- a/src/api/device/firmware.ts
+++ b/src/api/device/firmware.ts
@@ -49,8 +49,10 @@ export const queryProduct = (data?: any) =>
 export const queryDevice = () =>
     server.get(`/device/instance/_query/no-paging?paging=false`);
 
-export const validateVersion = (productId: string, versionOrder: number) =>
-    server.get(`/firmware/${productId}/${versionOrder}/exists`);
+export const validateVersion = (
+    productId: string,
+    versionOrder: number | string,
+) => server.get(`/firmware/${productId}/${versionOrder}/exists`);
 
 export const queryDetailList = (data: Record<string, unknown>) =>
     server.post(`/device-instance/detail/_query`, data);
diff --git a/src/views/device/Firmware/Save/index.vue b/src/views/device/Firmware/Save/index.vue
index ab01402a..7b8d5e71 100644
--- a/src/views/device/Firmware/Save/index.vue
+++ b/src/views/device/Firmware/Save/index.vue
@@ -184,7 +184,12 @@
 import { message, Form } from 'ant-design-vue';
 import { getImage } from '@/utils/comm';
 import FileUpload from './FileUpload.vue';
-import { save, update, queryProduct } from '@/api/device/firmware';
+import {
+    save,
+    update,
+    queryProduct,
+    validateVersion,
+} from '@/api/device/firmware';
 import type { FormInstance } from 'ant-design-vue';
 import type { Properties } from '../type';
 
@@ -246,6 +251,21 @@ const validatorSign = async (_: Record<string, any>, value: string) => {
         return Promise.resolve();
     }
 };
+const validatorVersionOrder = async (_: Record<string, any>, value: string) => {
+    const { signMethod, productId } = formData.value;
+    if (value && !!signMethod && productId) {
+        const res = await validateVersion(productId, value);
+        if (res.status === 200) {
+            if (id && props.data.versionOrder === value) {
+                formData.value.versionOrder = '';
+            } else {
+                Promise.reject(res.result ? ['版本序号已存在'] : '');
+            }
+        }
+    } else {
+        return Promise.resolve();
+    }
+};
 
 const { resetFields, validate, validateInfos } = useForm(
     formData,
@@ -258,8 +278,12 @@ const { resetFields, validate, validateInfos } = useForm(
         version: [
             { required: true, message: '请输入版本号' },
             { max: 64, message: '最多可输入64个字符', trigger: 'change' },
+            { validator: validatorVersionOrder, trigger: 'blur' },
+        ],
+        versionOrder: [
+            { required: true, message: '请输入版本序号' },
+            { validator: validatorVersionOrder, trigger: 'blur' },
         ],
-        versionOrder: [{ required: true, message: '请输入版本序号' }],
         signMethod: [{ required: true, message: '请选择签名方式' }],
         sign: [
             { required: true, message: '请输入签名' },
@@ -280,10 +304,10 @@ const onSubmit = async () => {
     validate()
         .then(async (res) => {
             const product = productOptions.value.find(
-                (item) => item.value === res.productId,
+                (item) => item?.value === res.productId,
             );
-            const productName = product.label || props.data?.url;
-            const size = extraValue.value.length || props.data?.size;
+            const productName = product?.label || props.data?.url;
+            const size = extraValue.value?.length || props.data?.size;
 
             const params = {
                 ...toRaw(formData.value),

From 401634be3e547d76feaa5de847898f8e153d9686 Mon Sep 17 00:00:00 2001
From: jackhoo_98 <jackhoo_98@foxmail.com>
Date: Mon, 27 Feb 2023 18:10:06 +0800
Subject: [PATCH 2/4] =?UTF-8?q?feat:=20=E8=BF=90=E7=BB=B4=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=20=E4=BB=AA=E8=A1=A8=E7=9B=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/link/dashboard.ts                     |  12 +
 src/views/link/DashBoard/components/Cpu.vue   | 189 ++++++++++++
 src/views/link/DashBoard/components/Jvm.vue   | 196 ++++++++++++
 .../link/DashBoard/components/Network.vue     | 222 ++++++++++++++
 .../link/DashBoard/components/TopCard.vue     | 155 ++++++++++
 .../components/TopEchartsItemNode.vue         | 282 ++++++++++++++++++
 src/views/link/DashBoard/components/tool.ts   | 125 ++++++++
 src/views/link/DashBoard/index.vue            |  25 ++
 8 files changed, 1206 insertions(+)
 create mode 100644 src/api/link/dashboard.ts
 create mode 100644 src/views/link/DashBoard/components/Cpu.vue
 create mode 100644 src/views/link/DashBoard/components/Jvm.vue
 create mode 100644 src/views/link/DashBoard/components/Network.vue
 create mode 100644 src/views/link/DashBoard/components/TopCard.vue
 create mode 100644 src/views/link/DashBoard/components/TopEchartsItemNode.vue
 create mode 100644 src/views/link/DashBoard/components/tool.ts
 create mode 100644 src/views/link/DashBoard/index.vue

diff --git a/src/api/link/dashboard.ts b/src/api/link/dashboard.ts
new file mode 100644
index 00000000..5b39594f
--- /dev/null
+++ b/src/api/link/dashboard.ts
@@ -0,0 +1,12 @@
+import server from '@/utils/request';
+
+export const dashboard = (data: object) =>
+    server.post(`/dashboard/_multi`, data);
+export const productCount = (data: object) =>
+    server.post(`/device-product/_count`, data);
+export const getGeo = (data: object) =>
+    server.post(`/geo/object/device/_search/geo.json`, data);
+export const deviceCount = (data: object) =>
+    server.get(`/device/instance/_count`, data);
+export const serverNode = (data: object) =>
+    server.get(`/dashboard/cluster/nodes`, data);
diff --git a/src/views/link/DashBoard/components/Cpu.vue b/src/views/link/DashBoard/components/Cpu.vue
new file mode 100644
index 00000000..0dd9da8f
--- /dev/null
+++ b/src/views/link/DashBoard/components/Cpu.vue
@@ -0,0 +1,189 @@
+<template>
+    <a-spin :spinning="loading">
+        <div class="dash-board">
+            <div class="header">
+                <h3>CPU使用率趋势</h3>
+                <a-range-picker
+                    @change="pickerTimeChange"
+                    :allowClear="false"
+                    :show-time="{ format: 'HH:mm:ss' }"
+                    format="YYYY-MM-DD HH:mm:ss"
+                    v-model="data.time"
+                >
+                    <template #suffixIcon><a-icon type="calendar" /></template>
+                    <template #renderExtraFooter>
+                        <a-radio-group
+                            default-value="a"
+                            button-style="solid"
+                            style="margin-right: 10px"
+                            v-model:value="data.type"
+                        >
+                            <a-radio-button value="hour">
+                                最近1小时
+                            </a-radio-button>
+                            <a-radio-button value="today">
+                                今日
+                            </a-radio-button>
+                            <a-radio-button value="week">
+                                近一周
+                            </a-radio-button>
+                        </a-radio-group></template
+                    >
+                </a-range-picker>
+            </div>
+            <div ref="chartRef" style="width: 100%; height: 300px"></div>
+        </div>
+    </a-spin>
+</template>
+m
+<script lang="ts" setup name="Cpu">
+import * as echarts from 'echarts';
+import { dashboard } from '@/api/link/dashboard';
+import moment from 'moment';
+import {
+    getTimeFormat,
+    getTimeByType,
+    arrayReverse,
+    defulteParamsData,
+    areaStyleCpu,
+    typeDataLine,
+} from './tool.ts';
+
+const chartRef = ref<Record<string, any>>({});
+
+const loading = ref(false);
+const data = ref({
+    type: 'hour',
+    time: [null, null],
+});
+
+const pickerTimeChange = () => {
+    data.value.type = undefined;
+};
+
+const getCPUEcharts = async (val) => {
+    loading.value = true;
+    const res = await dashboard(defulteParamsData('cpu', val));
+    if (res.success) {
+        const _cpuOptions = {};
+        const _cpuXAxis = new Set();
+        if (res.result?.length) {
+            res.result.forEach((item) => {
+                const value = item.data.value;
+                const nodeID = item.data.clusterNodeId;
+                _cpuXAxis.add(
+                    moment(value.timestamp).format(
+                        getTimeFormat(data.value.type),
+                    ),
+                );
+                if (!_cpuOptions[nodeID]) {
+                    _cpuOptions[nodeID] = [];
+                }
+                _cpuOptions[nodeID].push(
+                    Number(value.cpuSystemUsage).toFixed(2),
+                );
+            });
+        }
+        handleCpuOptions(_cpuOptions, [..._cpuXAxis.keys()]);
+    }
+    setTimeout(() => {
+        loading.value = false;
+    }, 300);
+};
+
+const setOptions = (optionsData, key) => ({
+    data: arrayReverse(optionsData[key]),
+    name: key,
+    type: 'line',
+    smooth: true,
+    symbol: 'none',
+    areaStyle: areaStyleCpu,
+});
+
+const handleCpuOptions = (optionsData, xAxis) => {
+    const chart = chartRef.value;
+    if (chart) {
+        const myChart = echarts.init(chart);
+        const dataKeys = Object.keys(optionsData);
+
+        const options = {
+            xAxis: {
+                type: 'category',
+                boundaryGap: false,
+                data: arrayReverse(xAxis),
+            },
+            tooltip: {
+                trigger: 'axis',
+                valueFormatter: (value) => `${value}%`,
+            },
+            yAxis: {
+                type: 'value',
+            },
+            grid: {
+                left: '50px',
+                right: '50px',
+            },
+            dataZoom: [
+                {
+                    type: 'inside',
+                    start: 0,
+                    end: 100,
+                },
+                {
+                    start: 0,
+                    end: 100,
+                },
+            ],
+            color: ['#2CB6E0'],
+            series: dataKeys.length
+                ? dataKeys.map((key) => setOptions(optionsData, key))
+                : typeDataLine,
+        };
+        myChart.setOption(options);
+        window.addEventListener('resize', function () {
+            myChart.resize();
+        });
+    }
+};
+
+watch(
+    () => data.value.type,
+    (val) => {
+        const endTime = moment(new Date());
+        const startTime = getTimeByType(val);
+        data.value.time = [startTime, endTime];
+    },
+    { immediate: true, deep: true },
+);
+watch(
+    () => data.value,
+    (val) => {
+        const { time } = val;
+        if (time && Array.isArray(time) && time.length === 2 && time[0]) {
+            getCPUEcharts(val);
+        }
+    },
+    { immediate: true, deep: true },
+);
+</script>
+
+<style lang="less" scoped>
+.dash-board {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: 24px;
+    background-color: #fff;
+    box-shadow: 0px 2.73036px 5.46071px rgba(31, 89, 245, 0.2);
+    border-radius: 2px;
+}
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    h3 {
+        width: 200px;
+        margin-top: 8px;
+    }
+}
+</style>
diff --git a/src/views/link/DashBoard/components/Jvm.vue b/src/views/link/DashBoard/components/Jvm.vue
new file mode 100644
index 00000000..c2425cf9
--- /dev/null
+++ b/src/views/link/DashBoard/components/Jvm.vue
@@ -0,0 +1,196 @@
+<template>
+    <a-spin :spinning="loading">
+        <div class="dash-board">
+            <div class="header">
+                <h3>JVM内存使用率趋势</h3>
+                <a-range-picker
+                    @change="pickerTimeChange"
+                    :allowClear="false"
+                    :show-time="{ format: 'HH:mm:ss' }"
+                    format="YYYY-MM-DD HH:mm:ss"
+                    v-model="data.time"
+                >
+                    <template #suffixIcon><a-icon type="calendar" /></template>
+                    <template #renderExtraFooter>
+                        <a-radio-group
+                            default-value="a"
+                            button-style="solid"
+                            style="margin-right: 10px"
+                            v-model:value="data.type"
+                        >
+                            <a-radio-button value="hour">
+                                最近1小时
+                            </a-radio-button>
+                            <a-radio-button value="today">
+                                今日
+                            </a-radio-button>
+                            <a-radio-button value="week">
+                                近一周
+                            </a-radio-button>
+                        </a-radio-group></template
+                    >
+                </a-range-picker>
+            </div>
+            <div ref="chartRef" style="width: 100%; height: 300px"></div>
+        </div>
+    </a-spin>
+</template>
+
+<script lang="ts" setup name="Jvm">
+import * as echarts from 'echarts';
+import { dashboard } from '@/api/link/dashboard';
+import moment from 'moment';
+import {
+    getTimeFormat,
+    getTimeByType,
+    arrayReverse,
+    typeDataLine,
+    areaStyleJvm,
+    defulteParamsData,
+} from './tool.ts';
+
+const chartRef = ref<Record<string, any>>({});
+
+const loading = ref(false);
+const data = ref({
+    type: 'hour',
+    time: [null, null],
+});
+
+const pickerTimeChange = () => {
+    data.value.type = undefined;
+};
+
+const getJVMEcharts = async (val) => {
+    loading.value = true;
+    const res = await dashboard(defulteParamsData('jvm', val));
+    if (res.success) {
+        const _jvmOptions = {};
+        const _jvmXAxis = new Set();
+        if (res.result?.length) {
+            res.result.forEach((item) => {
+                const value = item.data.value;
+                const memoryJvmHeapFree = value.memoryJvmHeapFree;
+                const memoryJvmHeapTotal = value.memoryJvmHeapTotal;
+                const nodeID = item.data.clusterNodeId;
+
+                const _value = (
+                    ((memoryJvmHeapTotal - memoryJvmHeapFree) /
+                        memoryJvmHeapTotal) *
+                    100
+                ).toFixed(2);
+                if (!_jvmOptions[nodeID]) {
+                    _jvmOptions[nodeID] = [];
+                }
+                _jvmXAxis.add(
+                    moment(value.timestamp).format(
+                        getTimeFormat(data.value.type),
+                    ),
+                );
+                _jvmOptions[nodeID].push(_value);
+            });
+        }
+        handleJVMOptions(_jvmOptions, [..._jvmXAxis.keys()]);
+    }
+    setTimeout(() => {
+        loading.value = false;
+    }, 300);
+};
+
+const setOptions = (optionsData, key) => ({
+    data: arrayReverse(optionsData[key]),
+    name: key,
+    type: 'line',
+    smooth: true,
+    symbol: 'none',
+    areaStyle: areaStyleJvm,
+});
+const handleJVMOptions = (optionsData, xAxis) => {
+    const chart = chartRef.value;
+    if (chart) {
+        const myChart = echarts.init(chart);
+        const dataKeys = Object.keys(optionsData);
+
+        console.log(21, arrayReverse(xAxis), xAxis);
+
+        const options = {
+            xAxis: {
+                type: 'category',
+                boundaryGap: false,
+                data: arrayReverse(xAxis),
+            },
+            tooltip: {
+                trigger: 'axis',
+                valueFormatter: (value: any) => `${value}%`,
+            },
+            yAxis: {
+                type: 'value',
+            },
+            grid: {
+                left: '50px',
+                right: '50px',
+            },
+            dataZoom: [
+                {
+                    type: 'inside',
+                    start: 0,
+                    end: 100,
+                },
+                {
+                    start: 0,
+                    end: 100,
+                },
+            ],
+            color: ['#60DFC7'],
+            series: dataKeys.length
+                ? dataKeys.map((key) => setOptions(optionsData, key))
+                : typeDataLine,
+        };
+        myChart.setOption(options);
+        window.addEventListener('resize', function () {
+            myChart.resize();
+        });
+    }
+};
+
+watch(
+    () => data.value.type,
+    (val) => {
+        const endTime = moment(new Date());
+        const startTime = getTimeByType(val);
+        data.value.time = [startTime, endTime];
+    },
+    { immediate: true, deep: true },
+);
+watch(
+    () => data.value,
+    (val) => {
+        const { time } = val;
+        if (time && Array.isArray(time) && time.length === 2 && time[0]) {
+            getJVMEcharts(val);
+        }
+    },
+    { immediate: true, deep: true },
+);
+</script>
+
+<style lang="less" scoped>
+.dash-board {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: 24px;
+    background-color: #fff;
+    box-shadow: 0px 2.73036px 5.46071px rgba(31, 89, 245, 0.2);
+    border-radius: 2px;
+}
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    h3 {
+        width: 200px;
+        margin-top: 8px;
+    }
+}
+</style>
diff --git a/src/views/link/DashBoard/components/Network.vue b/src/views/link/DashBoard/components/Network.vue
new file mode 100644
index 00000000..22639768
--- /dev/null
+++ b/src/views/link/DashBoard/components/Network.vue
@@ -0,0 +1,222 @@
+<template>
+    <a-spin :spinning="loading">
+        <div class="dash-board">
+            <div class="header">
+                <div class="left">
+                    <h3 style="width: 80px">网络流量</h3>
+                    <a-radio-group
+                        button-style="solid"
+                        v-model:value="data.type"
+                    >
+                        <a-radio-button value="bytesRead">
+                            上行
+                        </a-radio-button>
+                        <a-radio-button value="bytesSent">
+                            下行
+                        </a-radio-button>
+                    </a-radio-group>
+                </div>
+                <div class="right">
+                    <a-radio-group
+                        default-value="a"
+                        button-style="solid"
+                        style="margin-right: 10px"
+                        v-model:value="data.time.type"
+                    >
+                        <a-radio-button value="hour">
+                            最近1小时
+                        </a-radio-button>
+                        <a-radio-button value="today"> 今日 </a-radio-button>
+                        <a-radio-button value="week"> 近一周 </a-radio-button>
+                    </a-radio-group>
+                    <a-range-picker
+                        :allowClear="false"
+                        :show-time="{ format: 'HH:mm:ss' }"
+                        format="YYYY-MM-DD HH:mm:ss"
+                        v-model="data.time.time"
+                        @change="pickerTimeChange"
+                    >
+                        <template #suffixIcon
+                            ><a-icon type="calendar"
+                        /></template>
+                    </a-range-picker>
+                </div>
+            </div>
+            <div>
+                <div
+                    ref="chartRef"
+                    v-if="flag"
+                    style="width: 100%; height: 350px"
+                ></div>
+                <a-empty v-else style="height: 300px; margin-top: 120px" />
+            </div>
+        </div>
+    </a-spin>
+</template>
+
+<script lang="ts" setup name="Network">
+import { dashboard } from '@/api/link/dashboard';
+import {
+    getTimeByType,
+    typeDataLine,
+    areaStyle,
+    networkParams,
+    arrayReverse,
+} from './tool.ts';
+import moment from 'moment';
+import * as echarts from 'echarts';
+
+const chartRef = ref<Record<string, any>>({});
+
+const flag = ref(true);
+const loading = ref(false);
+const myChart = ref(null);
+const data = ref({
+    type: 'bytesRead',
+    time: {
+        type: 'today',
+        time: [null, null],
+    },
+});
+
+const pickerTimeChange = () => {
+    data.value.time.type = undefined;
+};
+
+const getNetworkEcharts = async (val) => {
+    loading.value = true;
+    const resp = await dashboard(networkParams(val));
+    if (resp.success) {
+        const _networkOptions = {};
+        const _networkXAxis = new Set();
+        if (resp.result.length) {
+            resp.result.forEach((item) => {
+                const value = item.data.value;
+                const _data = [];
+                const nodeID = item.data.clusterNodeId;
+                value.forEach((item) => {
+                    _data.push(item.value);
+                    _networkXAxis.add(item.timeString);
+                });
+                _networkOptions[nodeID] = {
+                    _data: _networkOptions[nodeID]
+                        ? _networkOptions[nodeID]._data.concat(_data)
+                        : _data,
+                };
+            });
+            handleNetworkOptions(_networkOptions, [..._networkXAxis.keys()]);
+        } else {
+            handleNetworkOptions([], []);
+        }
+    }
+    setTimeout(() => {
+        loading.value = false;
+    }, 300);
+};
+const networkValueRender = (obj) => {
+    const { value } = obj;
+    let _data = '';
+    if (value >= 1024 && value < 1024 * 1024) {
+        _data = `${Number((value / 1024).toFixed(2))}KB`;
+    } else if (value >= 1024 * 1024) {
+        _data = `${Number((value / 1024 / 1024).toFixed(2))}M`;
+    } else {
+        _data = `${value}B`;
+    }
+    return `${obj?.axisValueLabel}<br />${obj?.marker}${obj?.seriesName}:     ${_data}`;
+};
+
+const setOptions = (data, key) => ({
+    data: data[key]._data, // .map((item) => Number((item / 1024 / 1024).toFixed(2))),
+    name: key,
+    type: 'line',
+    smooth: true,
+    areaStyle,
+});
+
+const handleNetworkOptions = (optionsData, xAxis) => {
+    const chart = chartRef.value;
+
+    if (chart) {
+        const myChart = echarts.init(chart);
+        const dataKeys = Object.keys(optionsData);
+        const options = {
+            xAxis: {
+                type: 'category',
+                boundaryGap: false,
+                data: xAxis,
+            },
+            yAxis: {
+                type: 'value',
+            },
+            grid: {
+                left: '80px',
+                right: '50px',
+            },
+            tooltip: {
+                trigger: 'axis',
+                formatter: (_value) => networkValueRender(_value[0]),
+            },
+            color: ['#979AFF'],
+            series: dataKeys.length
+                ? dataKeys.map((key) => setOptions(optionsData, key))
+                : typeDataLine,
+        };
+        myChart.setOption(options);
+        window.addEventListener('resize', function () {
+            myChart.resize();
+        });
+    }
+};
+
+watch(
+    () => data.value.time.type,
+    (value) => {
+        const endTime = moment(new Date());
+        const startTime = getTimeByType(value);
+        data.value.time.time = [startTime, endTime];
+    },
+    { immediate: true, deep: true },
+);
+watch(
+    () => data.value,
+    (value) => {
+        const {
+            time: { time },
+        } = value;
+        if (time && Array.isArray(time) && time.length === 2 && time[0]) {
+            getNetworkEcharts(value);
+        }
+    },
+    { immediate: true, deep: true },
+);
+// onMounted(() => {
+//     createEcharts();
+// });
+</script>
+
+<style lang="less" scoped>
+.dash-board {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: 24px;
+    background-color: #fff;
+    box-shadow: 0px 2.73036px 5.46071px rgba(31, 89, 245, 0.2);
+    border-radius: 2px;
+}
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .left h3 {
+        width: 200px;
+        margin-top: 8px;
+    }
+}
+.left,
+.right {
+    display: flex;
+    align-items: center;
+}
+</style>
diff --git a/src/views/link/DashBoard/components/TopCard.vue b/src/views/link/DashBoard/components/TopCard.vue
new file mode 100644
index 00000000..27ecab3e
--- /dev/null
+++ b/src/views/link/DashBoard/components/TopCard.vue
@@ -0,0 +1,155 @@
+<template>
+    <div>
+        <a-select
+            style="width: 300px; margin-bottom: 20px"
+            @change="serverIdChange"
+            :value="serverId"
+            :options="serverNode"
+            v-if="serverNode.length > 1"
+        ></a-select>
+        <div class="dash-board">
+            <div class="dash-board-item">
+                <TopEchartsItemNode title="CPU使用率" :value="topValues.cpu" />
+            </div>
+            <div class="dash-board-item">
+                <TopEchartsItemNode
+                    title="JVM内存"
+                    :max="topValues.jvmTotal"
+                    :bottom="`总JVM内存 ${topValues.jvmTotal}G`"
+                    formatter="G"
+                    :value="topValues.jvm"
+                />
+            </div>
+            <div class="dash-board-item">
+                <TopEchartsItemNode
+                    title="磁盘占用"
+                    :max="topValues.usageTotal"
+                    :bottom="`总磁盘大小 ${topValues.usageTotal}G`"
+                    formatter="G"
+                    :value="topValues.usage"
+                />
+            </div>
+            <div class="dash-board-item">
+                <TopEchartsItemNode
+                    title="系统内存"
+                    :max="topValues.systemUsageTotal"
+                    :bottom="`系统内存 ${topValues.systemUsageTotal}G`"
+                    formatter="G"
+                    :value="topValues.systemUsage"
+                />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { serverNode } from '@/api/link/dashboard';
+import TopEchartsItemNode from './TopEchartsItemNode.vue';
+import { getWebSocket } from '@/utils/websocket';
+import { map } from 'rxjs/operators';
+
+export default {
+    name: 'TopCard',
+    components: { TopEchartsItemNode },
+    data() {
+        return {
+            serverId: '',
+            serverNode: [],
+            topValues: {
+                cpu: 0,
+                jvm: 0,
+                jvmTotal: 0,
+                usage: 0,
+                usageTotal: 0,
+                systemUsage: 0,
+                systemUsageTotal: 0,
+            },
+        };
+    },
+    created() {
+        serverNode().then((resp) => {
+            if (resp.success) {
+                this.serverNode = resp.result.map((item) => ({
+                    label: item.name,
+                    value: item.id,
+                }));
+                if (this.serverNode && this.serverNode.length) {
+                    this.serverId = this.serverNode[0].value;
+                }
+            }
+        });
+    },
+    watch: {
+        serverId: {
+            handler(val) {
+                if (val) {
+                    this.getData(val);
+                }
+            },
+            immediate: true,
+        },
+    },
+    methods: {
+        serverIdChange(val) {
+            this.serverId = val;
+        },
+        getData() {
+            const id = 'operations-statistics-system-info-realTime';
+            const topic = '/dashboard/systemMonitor/stats/info/realTime';
+            getWebSocket(id, topic, {
+                type: 'all',
+                serverNodeId: this.serverId,
+                interval: '1s',
+                agg: 'avg',
+            })
+                .pipe(map((res) => res.payload))
+                .subscribe((payload) => {
+                    const value = payload.value;
+                    const cpu = value.cpu;
+                    const memory = value.memory;
+                    const disk = value.disk;
+                    this.topValues = {
+                        cpu: cpu.systemUsage,
+                        jvm: Number(
+                            (
+                                (memory.jvmHeapUsage / 100) *
+                                (memory.jvmHeapTotal / 1024)
+                            ).toFixed(1),
+                        ),
+                        jvmTotal: Math.ceil(memory.jvmHeapTotal / 1024),
+                        usage: Number(
+                            ((disk.total / 1024) * (disk.usage / 100)).toFixed(
+                                1,
+                            ),
+                        ),
+                        usageTotal: Math.ceil(disk.total / 1024),
+                        systemUsage: Number(
+                            (
+                                (memory.systemTotal / 1024) *
+                                (memory.systemUsage / 100)
+                            ).toFixed(1),
+                        ),
+                        systemUsageTotal: Math.ceil(memory.systemTotal / 1024),
+                    };
+                });
+        },
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.dash-board {
+    display: flex;
+    flex-wrap: wrap;
+    height: 100%;
+    background-color: #fff;
+    box-shadow: 0px 2.73036px 5.46071px rgba(31, 89, 245, 0.2);
+    border-radius: 2px;
+    justify-content: space-between;
+    .dash-board-item {
+        flex: 1;
+        margin: 24px 12px;
+        min-width: 250px;
+    }
+}
+</style>
diff --git a/src/views/link/DashBoard/components/TopEchartsItemNode.vue b/src/views/link/DashBoard/components/TopEchartsItemNode.vue
new file mode 100644
index 00000000..0a7af873
--- /dev/null
+++ b/src/views/link/DashBoard/components/TopEchartsItemNode.vue
@@ -0,0 +1,282 @@
+<template>
+    <div class="echarts-item">
+        <div class="echarts-item-left">
+            <div class="echarts-item-title">{{ title }}</div>
+            <div class="echarts-item-value">
+                {{ value || 0 }} {{ formatter || '%' }}
+            </div>
+            <div v-if="!!bottom" class="echarts-item-bottom">{{ bottom }}</div>
+        </div>
+        <div class="echarts-item-right">
+            <div ref="chartRef" style="width: 100%; height: 100px"></div>
+        </div>
+    </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+export default {
+    name: 'TopEchartsItemNode',
+    props: {
+        title: {
+            type: String,
+            default: '',
+        },
+        value: {
+            type: Number,
+            default: 0,
+        },
+        max: {
+            type: Number,
+            default: 0,
+        },
+        bottom: {
+            type: String,
+            default: '',
+        },
+        formatter: {
+            type: String,
+            default: '%',
+        },
+    },
+    data() {
+        return {
+            options: {},
+        };
+    },
+    methods: {
+        createChart(val) {
+            const chart = this.$refs.chartRef;
+            if (chart && Object.keys(val).length > 0) {
+                const myChart = echarts.init(chart);
+                myChart.setOption(val);
+                window.addEventListener('resize', function () {
+                    myChart.resize();
+                });
+            }
+        },
+        getOptions(max, formatter, val) {
+            let formatterCount = 0;
+            this.options = {
+                series: [
+                    {
+                        type: 'gauge',
+                        min: 0,
+                        max: max || 100,
+                        startAngle: 200,
+                        endAngle: -20,
+                        center: ['50%', '67%'],
+                        title: {
+                            show: false,
+                        },
+                        axisTick: {
+                            distance: -20,
+                            lineStyle: {
+                                width: 1,
+                                color: 'rgba(0,0,0,0.15)',
+                            },
+                        },
+                        splitLine: {
+                            distance: -22,
+                            length: 9,
+                            lineStyle: {
+                                width: 1,
+                                color: '#000',
+                            },
+                        },
+                        axisLabel: {
+                            distance: -22,
+                            color: 'auto',
+                            fontSize: 12,
+                            width: 30,
+                            padding: [6, 10, 0, 10],
+                            formatter: (value) => {
+                                formatterCount += 1;
+                                if ([1, 3, 6, 9, 11].includes(formatterCount)) {
+                                    return value + (formatter || '%');
+                                }
+                                return '';
+                            },
+                        },
+                        pointer: {
+                            length: '80%',
+                            width: 4,
+                            itemStyle: {
+                                color: 'auto',
+                            },
+                        },
+                        anchor: {
+                            show: true,
+                            showAbove: true,
+                            size: 20,
+                            itemStyle: {
+                                borderWidth: 3,
+                                borderColor: '#fff',
+                                shadowBlur: 20,
+                                shadowColor: 'rgba(0, 0, 0, .25)',
+                                color: 'auto',
+                            },
+                        },
+                        axisLine: {
+                            lineStyle: {
+                                width: 10,
+                                color: [
+                                    [0.25, 'rgba(36, 178, 118, 1)'],
+                                    [
+                                        0.4,
+                                        new echarts.graphic.LinearGradient(
+                                            0,
+                                            0,
+                                            0,
+                                            1,
+                                            [
+                                                {
+                                                    offset: 0,
+                                                    color: 'rgba(66, 147, 255, 1)',
+                                                },
+                                                {
+                                                    offset: 1,
+                                                    color: 'rgba(36, 178, 118, 1)',
+                                                },
+                                            ],
+                                        ),
+                                    ],
+                                    [
+                                        0.5,
+                                        new echarts.graphic.LinearGradient(
+                                            0,
+                                            0,
+                                            0,
+                                            1,
+                                            [
+                                                {
+                                                    offset: 0,
+                                                    color: 'rgba(250, 178, 71, 1)',
+                                                },
+                                                {
+                                                    offset: 1,
+                                                    color: 'rgba(66, 147, 255, 1)',
+                                                },
+                                            ],
+                                        ),
+                                    ],
+                                    [
+                                        1,
+                                        new echarts.graphic.LinearGradient(
+                                            0,
+                                            0,
+                                            0,
+                                            1,
+                                            [
+                                                {
+                                                    offset: 0,
+                                                    color: 'rgba(250, 178, 71, 1)',
+                                                },
+                                                {
+                                                    offset: 1,
+                                                    color: 'rgba(247, 111, 93, 1)',
+                                                },
+                                            ],
+                                        ),
+                                    ],
+                                ],
+                            },
+                        },
+                        detail: {
+                            show: false,
+                        },
+                        data: [{ value: val || 0 }],
+                    },
+                ],
+            };
+        },
+    },
+    watch: {
+        options: {
+            handler(val) {
+                this.createChart(val);
+            },
+            immediate: true,
+            deep: true,
+        },
+        max: {
+            handler(val) {
+                this.getOptions(val, this.formatter, this.value);
+            },
+            immediate: true,
+            deep: true,
+        },
+        value: {
+            handler(val) {
+                this.getOptions(this.max, this.formatter, val);
+            },
+            immediate: true,
+            deep: true,
+        },
+        formatter: {
+            handler(val) {
+                this.getOptions(this.max, val, this.value);
+            },
+            immediate: true,
+            deep: true,
+        },
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.echarts-item {
+    display: flex;
+    height: 150px;
+    padding: 16px;
+    background-color: #fff;
+    box-shadow: 0px 2.73036px 5.46071px rgba(31, 89, 245, 0.2);
+
+    .echarts-item-left {
+        display: flex;
+        flex-direction: column;
+        width: 45%;
+    }
+
+    .echarts-item-right {
+        width: 55%;
+    }
+
+    .echarts-item-title {
+        margin-bottom: 8px;
+        color: rgba(#000, 0.6);
+        font-size: 16px;
+    }
+
+    .echarts-item-value {
+        font-weight: bold;
+        font-size: 36px;
+        width: 100%;
+        overflow: hidden;
+        white-space: nowrap;
+        text-align: left;
+        text-overflow: ellipsis;
+    }
+
+    .echarts-item-bottom {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        justify-content: center;
+        height: 0;
+        padding-left: 12px;
+
+        &::before {
+            position: absolute;
+            top: 50%;
+            left: 0;
+            width: 4px;
+            height: 12px;
+            background-color: #ff595e;
+            transform: translateY(-50%);
+            content: ' ';
+        }
+    }
+}
+</style>
diff --git a/src/views/link/DashBoard/components/tool.ts b/src/views/link/DashBoard/components/tool.ts
new file mode 100644
index 00000000..0a0d77fb
--- /dev/null
+++ b/src/views/link/DashBoard/components/tool.ts
@@ -0,0 +1,125 @@
+import moment from 'moment';
+import * as echarts from 'echarts';
+
+export const getInterval = (type) => {
+    switch (type) {
+        case 'year':
+            return '30d';
+        case 'month':
+        case 'week':
+            return '1d';
+        case 'hour':
+            return '1m';
+        default:
+            return '1h';
+    }
+};
+export const getTimeFormat = (type) => {
+    switch (type) {
+        case 'year':
+            return 'YYYY-MM-DD';
+        case 'month':
+        case 'week':
+            return 'MM-DD';
+        case 'hour':
+            return 'HH:mm';
+        default:
+            return 'HH';
+    }
+};
+
+export const getTimeByType = (type) => {
+    switch (type) {
+        case 'hour':
+            return moment().subtract(1, 'hours');
+        case 'week':
+            return moment().subtract(6, 'days');
+        case 'month':
+            return moment().subtract(29, 'days');
+        case 'year':
+            return moment().subtract(365, 'days');
+        default:
+            return moment().startOf('day');
+    }
+};
+
+export const arrayReverse = (data) => {
+    const newArray = [];
+    for (let i = data.length - 1; i >= 0; i--) {
+        newArray.push(data[i]);
+    }
+    return newArray;
+};
+
+export const networkParams = (val) => [
+    {
+        dashboard: 'systemMonitor',
+        object: 'network',
+        measurement: 'traffic',
+        dimension: 'agg',
+        group: 'network',
+        params: {
+            type: val.type,
+            interval: getInterval(val.time.type),
+            from: moment(val.time.time[0]).valueOf(),
+            to: moment(val.time.time[1]).valueOf(),
+        },
+    },
+];
+export const defulteParamsData = (group, val) => [
+    {
+        dashboard: 'systemMonitor',
+        object: 'stats',
+        measurement: 'info',
+        dimension: 'history',
+        group,
+        params: {
+            from: moment(val.time[0]).valueOf(),
+            to: moment(val.time[1]).valueOf(),
+        },
+    },
+];
+
+export const areaStyle = {
+    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        {
+            offset: 1,
+            color: 'rgba(151, 154, 255, 0)',
+        },
+        {
+            offset: 0,
+            color: 'rgba(151, 154, 255, .24)',
+        },
+    ]),
+};
+export const areaStyleCpu = {
+    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        {
+            offset: 1,
+            color: 'rgba(44, 182, 224, 0)',
+        },
+        {
+            offset: 0,
+            color: 'rgba(44, 182, 224, .24)',
+        },
+    ]),
+};
+export const areaStyleJvm = {
+    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        {
+            offset: 1,
+            color: 'rgba(96, 223, 199, 0)',
+        },
+        {
+            offset: 0,
+            color: 'rgba(96, 223, 199, .24)',
+        },
+    ]),
+};
+
+export const typeDataLine = [
+    {
+        data: [],
+        type: 'line',
+    },
+];
diff --git a/src/views/link/DashBoard/index.vue b/src/views/link/DashBoard/index.vue
new file mode 100644
index 00000000..2b432a56
--- /dev/null
+++ b/src/views/link/DashBoard/index.vue
@@ -0,0 +1,25 @@
+<template>
+    <page-container>
+        <div>
+            <a-row :gutter="[24, 24]">
+                <a-col :span="24"><TopCard /> </a-col>
+                <a-col :span="24"><Network /></a-col>
+                <a-col :span="12"><Cpu /></a-col>
+                <a-col :span="12"><Jvm /></a-col>
+            </a-row>
+        </div>
+    </page-container>
+</template>
+
+<script>
+import TopCard from './components/TopCard.vue';
+import Network from './components/Network.vue';
+import Cpu from './components/Cpu.vue';
+import Jvm from './components/Jvm.vue';
+export default {
+    name: 'LinkDashboard',
+    components: { Cpu, Jvm, Network, TopCard },
+};
+</script>
+
+<style lang="less" scoped></style>

From 568afdb69ec65dae1167fb7ba4e2a7744bc52224 Mon Sep 17 00:00:00 2001
From: jackhoo_98 <jackhoo_98@foxmail.com>
Date: Mon, 27 Feb 2023 19:59:30 +0800
Subject: [PATCH 3/4] =?UTF-8?q?fix:=20=E8=BF=90=E7=BB=B4=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=20=E4=BB=AA=E8=A1=A8=E7=9B=98=E4=BB=A3=E7=A0=81=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/link/dashboard.ts                     |   3 +-
 src/views/link/DashBoard/components/Jvm.vue   |   3 -
 .../link/DashBoard/components/Network.vue     |   3 -
 .../link/DashBoard/components/TopCard.vue     | 164 ++++++++----------
 .../components/TopEchartsItemNode.vue         | 112 +-----------
 src/views/link/DashBoard/components/tool.ts   |  95 ++++++++++
 src/views/link/DashBoard/index.vue            |   6 +-
 7 files changed, 174 insertions(+), 212 deletions(-)

diff --git a/src/api/link/dashboard.ts b/src/api/link/dashboard.ts
index 5b39594f..0d1920cc 100644
--- a/src/api/link/dashboard.ts
+++ b/src/api/link/dashboard.ts
@@ -8,5 +8,4 @@ export const getGeo = (data: object) =>
     server.post(`/geo/object/device/_search/geo.json`, data);
 export const deviceCount = (data: object) =>
     server.get(`/device/instance/_count`, data);
-export const serverNode = (data: object) =>
-    server.get(`/dashboard/cluster/nodes`, data);
+export const serverNode = () => server.get(`/dashboard/cluster/nodes`);
diff --git a/src/views/link/DashBoard/components/Jvm.vue b/src/views/link/DashBoard/components/Jvm.vue
index c2425cf9..f876e0ae 100644
--- a/src/views/link/DashBoard/components/Jvm.vue
+++ b/src/views/link/DashBoard/components/Jvm.vue
@@ -110,9 +110,6 @@ const handleJVMOptions = (optionsData, xAxis) => {
     if (chart) {
         const myChart = echarts.init(chart);
         const dataKeys = Object.keys(optionsData);
-
-        console.log(21, arrayReverse(xAxis), xAxis);
-
         const options = {
             xAxis: {
                 type: 'category',
diff --git a/src/views/link/DashBoard/components/Network.vue b/src/views/link/DashBoard/components/Network.vue
index 22639768..2db01cc6 100644
--- a/src/views/link/DashBoard/components/Network.vue
+++ b/src/views/link/DashBoard/components/Network.vue
@@ -190,9 +190,6 @@ watch(
     },
     { immediate: true, deep: true },
 );
-// onMounted(() => {
-//     createEcharts();
-// });
 </script>
 
 <style lang="less" scoped>
diff --git a/src/views/link/DashBoard/components/TopCard.vue b/src/views/link/DashBoard/components/TopCard.vue
index 27ecab3e..9ff956cd 100644
--- a/src/views/link/DashBoard/components/TopCard.vue
+++ b/src/views/link/DashBoard/components/TopCard.vue
@@ -4,8 +4,8 @@
             style="width: 300px; margin-bottom: 20px"
             @change="serverIdChange"
             :value="serverId"
-            :options="serverNode"
-            v-if="serverNode.length > 1"
+            :options="serverNodeOptions"
+            v-if="serverNodeOptions.length > 1"
         ></a-select>
         <div class="dash-board">
             <div class="dash-board-item">
@@ -42,99 +42,85 @@
     </div>
 </template>
 
-<script>
+<script lang="ts" setup name="TopCard">
 import { serverNode } from '@/api/link/dashboard';
 import TopEchartsItemNode from './TopEchartsItemNode.vue';
 import { getWebSocket } from '@/utils/websocket';
 import { map } from 'rxjs/operators';
 
-export default {
-    name: 'TopCard',
-    components: { TopEchartsItemNode },
-    data() {
-        return {
-            serverId: '',
-            serverNode: [],
-            topValues: {
-                cpu: 0,
-                jvm: 0,
-                jvmTotal: 0,
-                usage: 0,
-                usageTotal: 0,
-                systemUsage: 0,
-                systemUsageTotal: 0,
-            },
-        };
-    },
-    created() {
-        serverNode().then((resp) => {
-            if (resp.success) {
-                this.serverNode = resp.result.map((item) => ({
-                    label: item.name,
-                    value: item.id,
-                }));
-                if (this.serverNode && this.serverNode.length) {
-                    this.serverId = this.serverNode[0].value;
-                }
-            }
-        });
-    },
-    watch: {
-        serverId: {
-            handler(val) {
-                if (val) {
-                    this.getData(val);
-                }
-            },
-            immediate: true,
-        },
-    },
-    methods: {
-        serverIdChange(val) {
-            this.serverId = val;
-        },
-        getData() {
-            const id = 'operations-statistics-system-info-realTime';
-            const topic = '/dashboard/systemMonitor/stats/info/realTime';
-            getWebSocket(id, topic, {
-                type: 'all',
-                serverNodeId: this.serverId,
-                interval: '1s',
-                agg: 'avg',
-            })
-                .pipe(map((res) => res.payload))
-                .subscribe((payload) => {
-                    const value = payload.value;
-                    const cpu = value.cpu;
-                    const memory = value.memory;
-                    const disk = value.disk;
-                    this.topValues = {
-                        cpu: cpu.systemUsage,
-                        jvm: Number(
-                            (
-                                (memory.jvmHeapUsage / 100) *
-                                (memory.jvmHeapTotal / 1024)
-                            ).toFixed(1),
-                        ),
-                        jvmTotal: Math.ceil(memory.jvmHeapTotal / 1024),
-                        usage: Number(
-                            ((disk.total / 1024) * (disk.usage / 100)).toFixed(
-                                1,
-                            ),
-                        ),
-                        usageTotal: Math.ceil(disk.total / 1024),
-                        systemUsage: Number(
-                            (
-                                (memory.systemTotal / 1024) *
-                                (memory.systemUsage / 100)
-                            ).toFixed(1),
-                        ),
-                        systemUsageTotal: Math.ceil(memory.systemTotal / 1024),
-                    };
-                });
-        },
-    },
+const serverId = ref();
+const serverNodeOptions = ref([]);
+const topValues = ref({
+    cpu: 0,
+    jvm: 0,
+    jvmTotal: 0,
+    usage: 0,
+    usageTotal: 0,
+    systemUsage: 0,
+    systemUsageTotal: 0,
+});
+
+const serverIdChange = (val: string) => {
+    serverId.value = val;
 };
+
+const getData = () => {
+    const id = 'operations-statistics-system-info-realTime';
+    const topic = '/dashboard/systemMonitor/stats/info/realTime';
+    getWebSocket(id, topic, {
+        type: 'all',
+        serverNodeId: serverId.value,
+        interval: '1s',
+        agg: 'avg',
+    })
+        .pipe(map((res) => res.payload))
+        .subscribe((payload) => {
+            const {
+                value: { cpu, memory, disk },
+            } = payload;
+            topValues.value = {
+                cpu: cpu.systemUsage,
+                jvm: Number(
+                    (
+                        (memory.jvmHeapUsage / 100) *
+                        (memory.jvmHeapTotal / 1024)
+                    ).toFixed(1),
+                ),
+                jvmTotal: Math.ceil(memory.jvmHeapTotal / 1024),
+                usage: Number(
+                    ((disk.total / 1024) * (disk.usage / 100)).toFixed(1),
+                ),
+                usageTotal: Math.ceil(disk.total / 1024),
+                systemUsage: Number(
+                    (
+                        (memory.systemTotal / 1024) *
+                        (memory.systemUsage / 100)
+                    ).toFixed(1),
+                ),
+                systemUsageTotal: Math.ceil(memory.systemTotal / 1024),
+            };
+        });
+};
+
+onMounted(() => {
+    serverNode().then((resp) => {
+        if (resp.success) {
+            serverNodeOptions.value = resp.result.map((item) => ({
+                label: item.name,
+                value: item.id,
+            }));
+            if (serverNodeOptions.value.length) {
+                serverId.value = serverNodeOptions.value[0]?.value;
+            }
+        }
+    });
+});
+watch(
+    () => serverId.value,
+    (val) => {
+        val && getData();
+    },
+);
 </script>
 
 <style lang="less" scoped>
diff --git a/src/views/link/DashBoard/components/TopEchartsItemNode.vue b/src/views/link/DashBoard/components/TopEchartsItemNode.vue
index 0a7af873..dafbad67 100644
--- a/src/views/link/DashBoard/components/TopEchartsItemNode.vue
+++ b/src/views/link/DashBoard/components/TopEchartsItemNode.vue
@@ -15,6 +15,7 @@
 
 <script>
 import * as echarts from 'echarts';
+import { topOptionsSeries } from './tool';
 export default {
     name: 'TopEchartsItemNode',
     props: {
@@ -60,30 +61,8 @@ export default {
             this.options = {
                 series: [
                     {
-                        type: 'gauge',
-                        min: 0,
+                        ...topOptionsSeries,
                         max: max || 100,
-                        startAngle: 200,
-                        endAngle: -20,
-                        center: ['50%', '67%'],
-                        title: {
-                            show: false,
-                        },
-                        axisTick: {
-                            distance: -20,
-                            lineStyle: {
-                                width: 1,
-                                color: 'rgba(0,0,0,0.15)',
-                            },
-                        },
-                        splitLine: {
-                            distance: -22,
-                            length: 9,
-                            lineStyle: {
-                                width: 1,
-                                color: '#000',
-                            },
-                        },
                         axisLabel: {
                             distance: -22,
                             color: 'auto',
@@ -98,93 +77,6 @@ export default {
                                 return '';
                             },
                         },
-                        pointer: {
-                            length: '80%',
-                            width: 4,
-                            itemStyle: {
-                                color: 'auto',
-                            },
-                        },
-                        anchor: {
-                            show: true,
-                            showAbove: true,
-                            size: 20,
-                            itemStyle: {
-                                borderWidth: 3,
-                                borderColor: '#fff',
-                                shadowBlur: 20,
-                                shadowColor: 'rgba(0, 0, 0, .25)',
-                                color: 'auto',
-                            },
-                        },
-                        axisLine: {
-                            lineStyle: {
-                                width: 10,
-                                color: [
-                                    [0.25, 'rgba(36, 178, 118, 1)'],
-                                    [
-                                        0.4,
-                                        new echarts.graphic.LinearGradient(
-                                            0,
-                                            0,
-                                            0,
-                                            1,
-                                            [
-                                                {
-                                                    offset: 0,
-                                                    color: 'rgba(66, 147, 255, 1)',
-                                                },
-                                                {
-                                                    offset: 1,
-                                                    color: 'rgba(36, 178, 118, 1)',
-                                                },
-                                            ],
-                                        ),
-                                    ],
-                                    [
-                                        0.5,
-                                        new echarts.graphic.LinearGradient(
-                                            0,
-                                            0,
-                                            0,
-                                            1,
-                                            [
-                                                {
-                                                    offset: 0,
-                                                    color: 'rgba(250, 178, 71, 1)',
-                                                },
-                                                {
-                                                    offset: 1,
-                                                    color: 'rgba(66, 147, 255, 1)',
-                                                },
-                                            ],
-                                        ),
-                                    ],
-                                    [
-                                        1,
-                                        new echarts.graphic.LinearGradient(
-                                            0,
-                                            0,
-                                            0,
-                                            1,
-                                            [
-                                                {
-                                                    offset: 0,
-                                                    color: 'rgba(250, 178, 71, 1)',
-                                                },
-                                                {
-                                                    offset: 1,
-                                                    color: 'rgba(247, 111, 93, 1)',
-                                                },
-                                            ],
-                                        ),
-                                    ],
-                                ],
-                            },
-                        },
-                        detail: {
-                            show: false,
-                        },
                         data: [{ value: val || 0 }],
                     },
                 ],
diff --git a/src/views/link/DashBoard/components/tool.ts b/src/views/link/DashBoard/components/tool.ts
index 0a0d77fb..cb337a31 100644
--- a/src/views/link/DashBoard/components/tool.ts
+++ b/src/views/link/DashBoard/components/tool.ts
@@ -123,3 +123,98 @@ export const typeDataLine = [
         type: 'line',
     },
 ];
+
+export const topOptionsSeries = {
+    type: 'gauge',
+    min: 0,
+    startAngle: 200,
+    endAngle: -20,
+    center: ['50%', '67%'],
+    title: {
+        show: false,
+    },
+    axisTick: {
+        distance: -20,
+        lineStyle: {
+            width: 1,
+            color: 'rgba(0,0,0,0.15)',
+        },
+    },
+    splitLine: {
+        distance: -22,
+        length: 9,
+        lineStyle: {
+            width: 1,
+            color: '#000',
+        },
+    },
+    pointer: {
+        length: '80%',
+        width: 4,
+        itemStyle: {
+            color: 'auto',
+        },
+    },
+    anchor: {
+        show: true,
+        showAbove: true,
+        size: 20,
+        itemStyle: {
+            borderWidth: 3,
+            borderColor: '#fff',
+            shadowBlur: 20,
+            shadowColor: 'rgba(0, 0, 0, .25)',
+            color: 'auto',
+        },
+    },
+    axisLine: {
+        lineStyle: {
+            width: 10,
+            color: [
+                [0.25, 'rgba(36, 178, 118, 1)'],
+                [
+                    0.4,
+                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                            offset: 0,
+                            color: 'rgba(66, 147, 255, 1)',
+                        },
+                        {
+                            offset: 1,
+                            color: 'rgba(36, 178, 118, 1)',
+                        },
+                    ]),
+                ],
+                [
+                    0.5,
+                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                            offset: 0,
+                            color: 'rgba(250, 178, 71, 1)',
+                        },
+                        {
+                            offset: 1,
+                            color: 'rgba(66, 147, 255, 1)',
+                        },
+                    ]),
+                ],
+                [
+                    1,
+                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                            offset: 0,
+                            color: 'rgba(250, 178, 71, 1)',
+                        },
+                        {
+                            offset: 1,
+                            color: 'rgba(247, 111, 93, 1)',
+                        },
+                    ]),
+                ],
+            ],
+        },
+    },
+    detail: {
+        show: false,
+    },
+};
diff --git a/src/views/link/DashBoard/index.vue b/src/views/link/DashBoard/index.vue
index 2b432a56..010bafd0 100644
--- a/src/views/link/DashBoard/index.vue
+++ b/src/views/link/DashBoard/index.vue
@@ -11,15 +11,11 @@
     </page-container>
 </template>
 
-<script>
+<script lang="ts" setup name="DashBoardPage">
 import TopCard from './components/TopCard.vue';
 import Network from './components/Network.vue';
 import Cpu from './components/Cpu.vue';
 import Jvm from './components/Jvm.vue';
-export default {
-    name: 'LinkDashboard',
-    components: { Cpu, Jvm, Network, TopCard },
-};
 </script>
 
 <style lang="less" scoped></style>

From 7143af3ff1edcf68d48eeb535f03f66ee74b3ede Mon Sep 17 00:00:00 2001
From: jackhoo_98 <jackhoo_98@foxmail.com>
Date: Tue, 28 Feb 2023 21:15:54 +0800
Subject: [PATCH 4/4] =?UTF-8?q?feat:=20=E8=AE=BE=E5=A4=87=E6=8E=A5?=
 =?UTF-8?q?=E5=85=A5=E7=BD=91=E5=85=B3=20=E6=8E=A5=E5=8F=A3=E8=B0=83?=
 =?UTF-8?q?=E8=AF=95=20=E5=8A=A0=E5=85=A5=E6=9D=83=E9=99=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/link/AccessConfig/Detail/index.vue  |   88 +-
 .../AccessConfig/components/Channel/index.vue |   24 +-
 .../AccessConfig/components/Cloud/Ctwing.vue  |  132 +-
 .../AccessConfig/components/Cloud/OneNet.vue  |  148 +-
 .../AccessConfig/components/Edge/index.vue    |  273 ++--
 .../AccessConfig/components/Media/GB28181.vue |   31 +-
 .../AccessConfig/components/Media/index.vue   |   17 +-
 .../link/AccessConfig/components/Network.vue  | 1196 -----------------
 .../AccessConfig/components/Network/index.vue |  701 ++++++++++
 .../components/Provider/index.vue             |   36 +-
 .../link/AccessConfig/{Detail => }/data.ts    |  107 +-
 src/views/link/AccessConfig/index.vue         |  163 +--
 src/views/link/Protocol/index.vue             |   10 +-
 src/views/link/Type/Detail/index.vue          |   18 +-
 14 files changed, 1077 insertions(+), 1867 deletions(-)
 delete mode 100644 src/views/link/AccessConfig/components/Network.vue
 create mode 100644 src/views/link/AccessConfig/components/Network/index.vue
 rename src/views/link/AccessConfig/{Detail => }/data.ts (63%)

diff --git a/src/views/link/AccessConfig/Detail/index.vue b/src/views/link/AccessConfig/Detail/index.vue
index f15fcdf3..1c8ee150 100644
--- a/src/views/link/AccessConfig/Detail/index.vue
+++ b/src/views/link/AccessConfig/Detail/index.vue
@@ -9,8 +9,10 @@
                     ></Provider>
                 </div>
                 <div v-else>
-                    <div v-if="!id"><a @click="goBack">返回</a></div>
-                    <AccessNetwork
+                    <div class="go-back" v-if="id === ':id'">
+                        <a @click="goBack">返回</a>
+                    </div>
+                    <Network
                         v-if="showType === 'network'"
                         :provider="provider"
                         :data="data"
@@ -42,18 +44,15 @@
 </template>
 
 <script lang="ts" setup name="AccessConfigDetail">
-import { getImage } from '@/utils/comm';
-import AccessNetwork from '../components/Network.vue';
+import Network from '../components/Network/index.vue';
 import Provider from '../components/Provider/index.vue';
-import { getProviders, detail } from '@/api/link/accessConfig';
 import Media from '../components/Media/index.vue';
 import Channel from '../components/Channel/index.vue';
 import Edge from '../components/Edge/index.vue';
 import Cloud from '../components/Cloud/index.vue';
+import { getProviders, detail } from '@/api/link/accessConfig';
 
 const route = useRoute();
-
-const view = route.query.view as string;
 const id = route.params.id as string;
 
 const dataSource = ref([]);
@@ -74,7 +73,7 @@ const goBack = () => {
     type.value = true;
 };
 
-const getTypeList = (result: any[]) => {
+const getTypeList = (result: Record<string, any>) => {
     const list = [];
     const media: any[] = [];
     const network: any[] = [];
@@ -184,76 +183,7 @@ onMounted(() => {
 </script>
 
 <style lang="less" scoped>
-.provider {
-    position: relative;
-    width: 100%;
-    padding: 20px;
-    background: url('/public/images/access/background.png') no-repeat;
-    background-size: 100% 100%;
-    border: 1px solid #e6e6e6;
-
-    &::before {
-        position: absolute;
-        top: 0;
-        left: 40px;
-        display: block;
-        width: 15%;
-        min-width: 64px;
-        height: 2px;
-        background-image: url('/public/images/access/rectangle.png');
-        background-repeat: no-repeat;
-        background-size: 100% 100%;
-        // border: 1px #8da1f4 solid;
-        // border-bottom-left-radius: 10%;
-        // border-bottom-right-radius: 10%;
-        content: ' ';
-    }
-
-    &:hover {
-        box-shadow: 0 0 24px rgba(#000, 0.1);
-    }
-}
-
-.box {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-
-    .left {
-        display: flex;
-        width: calc(100% - 70px);
-        .images {
-            width: 64px;
-            height: 64px;
-
-            img {
-                width: 100%;
-            }
-        }
-
-        .context {
-            width: calc(100% - 84px);
-            margin: 10px;
-
-            .title {
-                font-weight: 600;
-            }
-
-            .desc {
-                width: 100%;
-                margin-top: 10px;
-                overflow: hidden;
-                color: rgba(0, 0, 0, 0.55);
-                font-weight: 400;
-                font-size: 13px;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-            }
-        }
-    }
-    .right {
-        width: 70px;
-    }
+.go-back {
+    margin: 0 0 20px 0;
 }
 </style>
diff --git a/src/views/link/AccessConfig/components/Channel/index.vue b/src/views/link/AccessConfig/components/Channel/index.vue
index 08340b9b..f4e5d0d9 100644
--- a/src/views/link/AccessConfig/components/Channel/index.vue
+++ b/src/views/link/AccessConfig/components/Channel/index.vue
@@ -39,12 +39,16 @@
                                 />
                             </a-form-item>
                             <a-form-item>
-                                <a-button
+                                <PermissionButton
                                     v-if="view === 'false'"
                                     type="primary"
                                     html-type="submit"
-                                    >保存</a-button
+                                    :hasPermission="`link/AccessConfig:${
+                                        id === ':id' ? 'add' : 'update'
+                                    }`"
                                 >
+                                    保存
+                                </PermissionButton>
                             </a-form-item>
                         </a-form>
                     </div>
@@ -86,10 +90,9 @@
 </template>
 
 <script lang="ts" setup name="AccessChannel">
-import { message, Form } from 'ant-design-vue';
-import type { FormInstance } from 'ant-design-vue';
+import { message } from 'ant-design-vue';
 import { update, save } from '@/api/link/accessConfig';
-import { ProtocolMapping } from '../../Detail/data';
+import { ProtocolMapping } from '../../data';
 
 interface FormState {
     name: string;
@@ -129,16 +132,7 @@ const onFinish = async (values: any) => {
         id === ':id' ? await save(params) : await update({ ...params, id });
     if (resp.status === 200) {
         message.success('操作成功！');
-        // if (params.get('save')) {
-        // if ((window as any).onTabSaveSuccess) {
-        //   if (resp.result) {
-        //     (window as any).onTabSaveSuccess(resp.result);
-        //     setTimeout(() => window.close(), 300);
-        //   }
-        // }
-        //   } else {
         history.back();
-        //   }
     }
 };
 
@@ -164,8 +158,6 @@ onMounted(() => {
 }
 .config-right {
     padding: 20px;
-    // color: rgba(0, 0, 0, 0.8);
-    // background: rgba(0, 0, 0, 0.04);
 
     .config-right-item {
         margin-bottom: 10px;
diff --git a/src/views/link/AccessConfig/components/Cloud/Ctwing.vue b/src/views/link/AccessConfig/components/Cloud/Ctwing.vue
index 4e77e9ef..83c00608 100644
--- a/src/views/link/AccessConfig/components/Cloud/Ctwing.vue
+++ b/src/views/link/AccessConfig/components/Cloud/Ctwing.vue
@@ -6,7 +6,7 @@
         <div class="steps-content">
             <div class="steps-box" v-if="current === 0">
                 <div class="alert">
-                    <info-circle-outlined />
+                    <AIcon type="InfoCircleOutlined" />
                     通过CTWing平台的HTTP推送服务进行数据接入
                 </div>
                 <div style="margin-top: 15px">
@@ -160,7 +160,7 @@
         <div class="steps-content">
             <div class="steps-box" v-if="current === 1">
                 <div class="alert">
-                    <info-circle-outlined />
+                    <AIcon type="InfoCircleOutlined" />
                     只能选择HTTP通信方式的协议
                 </div>
                 <div class="search">
@@ -170,9 +170,14 @@
                         style="width: 300px"
                         @search="procotolSearch"
                     />
-                    <a-button type="primary" @click="addProcotol"
-                        >新增</a-button
+                    <PermissionButton
+                        type="primary"
+                        @click="addProcotol"
+                        hasPermission="link/Protocol:add"
                     >
+                        <template #icon><AIcon type="PlusOutlined" /></template>
+                        新增
+                    </PermissionButton>
                 </div>
                 <div class="card-item">
                     <a-row :gutter="[24, 24]" v-if="procotolList.length > 0">
@@ -282,96 +287,39 @@
             >
                 下一步
             </a-button>
-            <a-button
+            <PermissionButton
                 v-if="current === 2 && view === 'false'"
                 type="primary"
                 style="margin-right: 8px"
                 @click="saveData"
+                :hasPermission="`link/AccessConfig:${
+                    id === ':id' ? 'add' : 'update'
+                }`"
             >
                 保存
-            </a-button>
+            </PermissionButton>
             <a-button v-if="current > 0" @click="prev"> 上一步 </a-button>
         </div>
     </div>
 </template>
 
 <script lang="ts" setup name="AccessCloudCtwing">
-import { message, Form } from 'ant-design-vue';
+import { message } from 'ant-design-vue';
 import type { FormInstance } from 'ant-design-vue';
-import { update, save, getNetworkList } from '@/api/link/accessConfig';
-import { ProtocolMapping, NetworkTypeMapping } from '../../Detail/data';
-import { InfoCircleOutlined } from '@ant-design/icons-vue';
+import { update, save, getProtocolList } from '@/api/link/accessConfig';
+import { ProtocolMapping } from '../../data';
 import AccessCard from '../AccessCard/index.vue';
 import { randomString } from '@/utils/utils';
 import { getImage } from '@/utils/comm';
+import { useMenuStore } from 'store/menu';
 
+const menuStory = useMenuStore();
 const origin = window.location.origin;
 const img1 = getImage('/network/01.png');
 const img2 = getImage('/network/02.jpg');
 const img3 = getImage('/network/03.png');
 const img4 = getImage('/network/04.jpg');
 
-//测试数据1{
-const resultList1 = [
-    {
-        id: '1612354213444087808',
-        name: '大华烟感协议',
-    },
-    {
-        id: '1610475299002855424',
-        name: '宇视摄像头协议',
-    },
-    {
-        id: '1610466717670780928',
-        name: '官方协议',
-    },
-    {
-        id: '1610205217785524224',
-        name: 'demo协议',
-    },
-    {
-        id: '1610204985806958592',
-        name: '水压协议',
-    },
-    {
-        id: '1605459961693745152',
-        name: '测试设备诊断日志显示',
-    },
-    {
-        id: '1582302200020783104',
-        name: 'demo',
-    },
-    {
-        id: '1581839391887794176',
-        name: '海康闸机协议',
-    },
-    {
-        id: '1567062365030637568',
-        name: '协议20220906160914',
-    },
-    {
-        id: '1561650927208628224',
-        name: 'local',
-    },
-    {
-        id: '1552881998413754368',
-        name: '官方协议V3-支持固件升级3',
-    },
-    {
-        id: '2b283b28a16d61e5fc2bdf39ceff34f8',
-        name: 'JetLinks官方协议',
-        description: 'JetLinks官方协议包',
-    },
-    {
-        id: '1551510679466844160',
-        name: '官方协议3.1',
-    },
-    {
-        id: '1551509716811161600',
-        name: '官方协议3.0',
-    },
-];
-
 interface FormState {
     apiAddress: string;
     appKey: string;
@@ -397,7 +345,6 @@ const props = defineProps({
     },
 });
 
-const channel = ref(props.provider.channel);
 const formRef1 = ref<FormInstance>();
 const formRef2 = ref<FormInstance>();
 
@@ -459,37 +406,24 @@ const saveData = async () => {
               });
     if (resp.status === 200) {
         message.success('操作成功！');
-        // 回到列表页面
-        // if (window.onTabSaveSuccess) {
-        //     window.onTabSaveSuccess(resp);
-        //     setTimeout(() => window.close(), 300);
-        // } else {
-        //     // this.$store.dispatch('jumpPathByKey', { key: MenuKeys['Link/AccessConfig'] })
-        // }
         history.back();
     }
-    // onFinish(data);
 };
 
 const queryProcotolList = async (id: string, params = {}) => {
-    // const resp = await getProtocolList(ProtocolMapping.get(id), {
-    //     ...params,
-    //     'sorts[0].name': 'createTime',
-    //     'sorts[0].order': 'desc',
-    // });
-    // if (resp.status === 200) {
-    //     procotolList.value = resp.result;
-    //     allProcotolList.value = resp.result;
-    // }
-
-    //使用测试数据1
-    procotolList.value = resultList1;
-    allProcotolList.value = resultList1;
+    const resp = await getProtocolList(ProtocolMapping.get(id), {
+        ...params,
+        'sorts[0].name': 'createTime',
+        'sorts[0].order': 'desc',
+    });
+    if (resp.status === 200) {
+        procotolList.value = resp.result;
+        allProcotolList.value = resp.result;
+    }
 };
 
 const addProcotol = () => {
-    // const url = this.$store.state.permission.routes['Link/Protocol']
-    const url = '/iot/link/protocol';
+    const url = menuStory.menus['link/Protocol']?.path;
     const tab = window.open(
         `${window.location.origin + window.location.pathname}#${url}?save=true`,
     );
@@ -503,7 +437,7 @@ const addProcotol = () => {
 
 const next = async () => {
     if (current.value === 0) {
-        let data1: any = await formRef1.value?.validate();
+        await formRef1.value?.validate();
         queryProcotolList(props.provider.id);
         current.value = current.value + 1;
     } else if (current.value === 1) {
@@ -514,9 +448,11 @@ const next = async () => {
         }
     }
 };
+
 const prev = () => {
     current.value = current.value - 1;
 };
+
 onMounted(() => {
     if (id !== ':id') {
         formState.value = props.data.configuration;
@@ -527,6 +463,7 @@ onMounted(() => {
         };
     }
 });
+
 watch(
     current,
     (v) => {
@@ -590,9 +527,6 @@ watch(
 }
 .config-right {
     padding: 20px;
-    // color: rgba(0, 0, 0, 0.8);
-    // background: rgba(0, 0, 0, 0.04);
-
     .config-right-item {
         margin-bottom: 10px;
 
diff --git a/src/views/link/AccessConfig/components/Cloud/OneNet.vue b/src/views/link/AccessConfig/components/Cloud/OneNet.vue
index 3e91d432..f519144d 100644
--- a/src/views/link/AccessConfig/components/Cloud/OneNet.vue
+++ b/src/views/link/AccessConfig/components/Cloud/OneNet.vue
@@ -6,7 +6,7 @@
         <div class="steps-content">
             <div class="steps-box" v-if="current === 0">
                 <div class="alert">
-                    <info-circle-outlined />
+                    <AIcon type="InfoCircleOutlined" />
                     通过OneNet平台的HTTP推送服务进行数据接入
                 </div>
                 <div style="margin-top: 15px">
@@ -41,7 +41,9 @@
                                                             同步物联网平台设备数据到OneNet
                                                         </p>
                                                     </template>
-                                                    <question-circle-outlined />
+                                                    <AIcon
+                                                        type="QuestionCircleOutlined"
+                                                    />
                                                 </a-tooltip>
                                             </div>
                                             <a-input
@@ -105,7 +107,9 @@
                                                             接收OneNet推送的Token地址
                                                         </p>
                                                     </template>
-                                                    <question-circle-outlined />
+                                                    <AIcon
+                                                        type="QuestionCircleOutlined"
+                                                    />
                                                 </a-tooltip>
                                             </div>
                                             <a-input
@@ -136,7 +140,9 @@
                                                             端生成的消息加密key
                                                         </p>
                                                     </template>
-                                                    <question-circle-outlined />
+                                                    <AIcon
+                                                        type="QuestionCircleOutlined"
+                                                    />
                                                 </a-tooltip>
                                             </div>
                                             <a-input
@@ -253,7 +259,7 @@
         <div class="steps-content">
             <div class="steps-box" v-if="current === 1">
                 <div class="alert">
-                    <info-circle-outlined />
+                    <AIcon type="InfoCircleOutlined" />
                     只能选择HTTP通信方式的协议
                 </div>
                 <div class="search">
@@ -263,9 +269,14 @@
                         style="width: 300px"
                         @search="procotolSearch"
                     />
-                    <a-button type="primary" @click="addProcotol"
-                        >新增</a-button
+                    <PermissionButton
+                        type="primary"
+                        @click="addProcotol"
+                        hasPermission="link/Protocol:add"
                     >
+                        <template #icon><AIcon type="PlusOutlined" /></template>
+                        新增
+                    </PermissionButton>
                 </div>
                 <div class="card-item">
                     <a-row :gutter="[24, 24]" v-if="procotolList.length > 0">
@@ -375,98 +386,38 @@
             >
                 下一步
             </a-button>
-            <a-button
+            <PermissionButton
                 style="margin-right: 8px"
                 v-if="current === 2 && view === 'false'"
                 type="primary"
                 @click="saveData"
+                :hasPermission="`link/AccessConfig:${
+                    id === ':id' ? 'add' : 'update'
+                }`"
             >
                 保存
-            </a-button>
+            </PermissionButton>
             <a-button v-if="current > 0" @click="prev"> 上一步 </a-button>
         </div>
     </div>
 </template>
 
 <script lang="ts" setup name="AccessCloudOneNet">
-import { message, Form } from 'ant-design-vue';
+import { message } from 'ant-design-vue';
 import type { FormInstance } from 'ant-design-vue';
-import { update, save, getNetworkList } from '@/api/link/accessConfig';
-import { ProtocolMapping, NetworkTypeMapping } from '../../Detail/data';
-import {
-    InfoCircleOutlined,
-    QuestionCircleOutlined,
-} from '@ant-design/icons-vue';
+import { update, save, getProtocolList } from '@/api/link/accessConfig';
 import AccessCard from '../AccessCard/index.vue';
 import { randomString } from '@/utils/utils';
 import { getImage } from '@/utils/comm';
+import { ProtocolMapping } from '../../data';
+import { useMenuStore } from 'store/menu';
 
+const menuStory = useMenuStore();
 const origin = window.location.origin;
 const img5 = getImage('/network/05.jpg');
 const img6 = getImage('/network/06.jpg');
 const img = getImage('/network/OneNet.jpg');
 
-//测试数据1{
-const resultList1 = [
-    {
-        id: '1612354213444087808',
-        name: '大华烟感协议',
-    },
-    {
-        id: '1610475299002855424',
-        name: '宇视摄像头协议',
-    },
-    {
-        id: '1610466717670780928',
-        name: '官方协议',
-    },
-    {
-        id: '1610205217785524224',
-        name: 'demo协议',
-    },
-    {
-        id: '1610204985806958592',
-        name: '水压协议',
-    },
-    {
-        id: '1605459961693745152',
-        name: '测试设备诊断日志显示',
-    },
-    {
-        id: '1582302200020783104',
-        name: 'demo',
-    },
-    {
-        id: '1581839391887794176',
-        name: '海康闸机协议',
-    },
-    {
-        id: '1567062365030637568',
-        name: '协议20220906160914',
-    },
-    {
-        id: '1561650927208628224',
-        name: 'local',
-    },
-    {
-        id: '1552881998413754368',
-        name: '官方协议V3-支持固件升级3',
-    },
-    {
-        id: '2b283b28a16d61e5fc2bdf39ceff34f8',
-        name: 'JetLinks官方协议',
-        description: 'JetLinks官方协议包',
-    },
-    {
-        id: '1551510679466844160',
-        name: '官方协议3.1',
-    },
-    {
-        id: '1551509716811161600',
-        name: '官方协议3.0',
-    },
-];
-
 interface FormState {
     apiAddress: string;
     apiKey: string;
@@ -478,9 +429,6 @@ interface Form {
     name: string;
     description: string;
 }
-const route = useRoute();
-const view = route.query.view as string;
-const id = route.params.id as string;
 
 const props = defineProps({
     provider: {
@@ -493,7 +441,10 @@ const props = defineProps({
     },
 });
 
-const channel = ref(props.provider.channel);
+const route = useRoute();
+const view = route.query.view as string;
+const id = route.params.id as string;
+
 const formRef1 = ref<FormInstance>();
 const formRef2 = ref<FormInstance>();
 
@@ -557,36 +508,24 @@ const saveData = async () => {
 
     if (resp.status === 200) {
         message.success('操作成功！');
-        // 回到列表页面
-        // if (window.onTabSaveSuccess) {
-        //     window.onTabSaveSuccess(resp);
-        //     setTimeout(() => window.close(), 300);
-        // } else {
-        //     // this.$store.dispatch('jumpPathByKey', { key: MenuKeys['Link/AccessConfig'] })
-        // }
         history.back();
     }
 };
 
 const queryProcotolList = async (id: string, params = {}) => {
-    // const resp = await getProtocolList(ProtocolMapping.get(id), {
-    //     ...params,
-    //     'sorts[0].name': 'createTime',
-    //     'sorts[0].order': 'desc',
-    // });
-    // if (resp.status === 200) {
-    //     procotolList.value = resp.result;
-    //     allProcotolList.value = resp.result;
-    // }
-
-    //使用测试数据1
-    procotolList.value = resultList1;
-    allProcotolList.value = resultList1;
+    const resp = await getProtocolList(ProtocolMapping.get(id), {
+        ...params,
+        'sorts[0].name': 'createTime',
+        'sorts[0].order': 'desc',
+    });
+    if (resp.status === 200) {
+        procotolList.value = resp.result;
+        allProcotolList.value = resp.result;
+    }
 };
 
 const addProcotol = () => {
-    // const url = this.$store.state.permission.routes['Link/Protocol']
-    const url = '/iot/link/protocol';
+    const url = menuStory.menus['link/Protocol']?.path;
     const tab = window.open(
         `${window.location.origin + window.location.pathname}#${url}?save=true`,
     );
@@ -689,9 +628,6 @@ watch(
 }
 .config-right {
     padding: 20px;
-    // color: rgba(0, 0, 0, 0.8);
-    // background: rgba(0, 0, 0, 0.04);
-
     .config-right-item {
         margin-bottom: 10px;
 
diff --git a/src/views/link/AccessConfig/components/Edge/index.vue b/src/views/link/AccessConfig/components/Edge/index.vue
index 0a21a879..b5b8ea3c 100644
--- a/src/views/link/AccessConfig/components/Edge/index.vue
+++ b/src/views/link/AccessConfig/components/Edge/index.vue
@@ -10,7 +10,7 @@
         <div v-if="channel !== 'edge-child-device'" class="steps-content">
             <div class="steps-box" v-if="current === 0">
                 <div class="alert">
-                    <question-circle-outlined />
+                    <AIcon type="InfoCircleOutlined" />
                     选择与设备通信的网络组件
                 </div>
                 <div class="search">
@@ -20,7 +20,14 @@
                         style="width: 300px"
                         @search="networkSearch"
                     />
-                    <a-button type="primary" @click="addNetwork">新增</a-button>
+                    <PermissionButton
+                        type="primary"
+                        @click="addNetwork"
+                        hasPermission="link/Type:add"
+                    >
+                        <template #icon><AIcon type="PlusOutlined" /></template>
+                        新增
+                    </PermissionButton>
                 </div>
                 <div class="card-item">
                     <a-row :gutter="[24, 24]" v-if="networkList.length > 0">
@@ -103,51 +110,53 @@
             <a-row :gutter="[24, 24]">
                 <a-col :span="12">
                     <title-component data="基本信息" />
-                    <div>
-                        <a-form
-                            :model="formState"
-                            name="basic"
-                            autocomplete="off"
-                            layout="vertical"
-                            @finish="onFinish"
-                            ref="formRef"
+                    <a-form
+                        :model="formState"
+                        name="basic"
+                        autocomplete="off"
+                        layout="vertical"
+                        @finish="onFinish"
+                        ref="formRef"
+                    >
+                        <a-form-item
+                            label="名称"
+                            name="name"
+                            :rules="[
+                                {
+                                    required: true,
+                                    message: '请输入名称',
+                                    trigger: 'blur',
+                                },
+                                { max: 64, message: '最多可输入64个字符' },
+                            ]"
                         >
-                            <a-form-item
-                                label="名称"
-                                name="name"
-                                :rules="[
-                                    {
-                                        required: true,
-                                        message: '请输入名称',
-                                        trigger: 'blur',
-                                    },
-                                    { max: 64, message: '最多可输入64个字符' },
-                                ]"
+                            <a-input
+                                placeholder="请输入名称"
+                                v-model:value="formState.name"
+                            />
+                        </a-form-item>
+                        <a-form-item label="说明" name="description">
+                            <a-textarea
+                                placeholder="请输入说明"
+                                :rows="4"
+                                v-model:value="formState.description"
+                                show-count
+                                :maxlength="200"
+                            />
+                        </a-form-item>
+                        <a-form-item>
+                            <PermissionButton
+                                v-if="current !== 1 && view === 'false'"
+                                type="primary"
+                                html-type="submit"
+                                :hasPermission="`link/AccessConfig:${
+                                    id === ':id' ? 'add' : 'update'
+                                }`"
                             >
-                                <a-input
-                                    placeholder="请输入名称"
-                                    v-model:value="formState.name"
-                                />
-                            </a-form-item>
-                            <a-form-item label="说明" name="description">
-                                <a-textarea
-                                    placeholder="请输入说明"
-                                    :rows="4"
-                                    v-model:value="formState.description"
-                                    show-count
-                                    :maxlength="200"
-                                />
-                            </a-form-item>
-                            <a-form-item>
-                                <a-button
-                                    v-if="current !== 1 && view === 'false'"
-                                    type="primary"
-                                    html-type="submit"
-                                    >保存</a-button
-                                >
-                            </a-form-item>
-                        </a-form>
-                    </div>
+                                保存
+                            </PermissionButton>
+                        </a-form-item>
+                    </a-form>
                 </a-col>
                 <a-col :span="12">
                     <div class="config-right">
@@ -178,119 +187,35 @@
             >
                 下一步
             </a-button>
-            <a-button
+            <PermissionButton
                 v-if="current === 1 && view === 'false'"
                 type="primary"
                 style="margin-right: 8px"
                 @click="saveData"
+                :hasPermission="`link/AccessConfig:${
+                    id === ':id' ? 'add' : 'update'
+                }`"
             >
                 保存
-            </a-button>
+            </PermissionButton>
             <a-button v-if="current > 0" @click="prev"> 上一步 </a-button>
         </div>
     </div>
 </template>
 
 <script lang="ts" setup name="AccessEdge">
-import { message, Form } from 'ant-design-vue';
+import { message } from 'ant-design-vue';
 import type { FormInstance } from 'ant-design-vue';
 import { update, save, getNetworkList } from '@/api/link/accessConfig';
 import {
     descriptionList,
     ProtocolMapping,
     NetworkTypeMapping,
-} from '../../Detail/data';
-import { QuestionCircleOutlined } from '@ant-design/icons-vue';
+} from '../../data';
 import AccessCard from '../AccessCard/index.vue';
+import { useMenuStore } from 'store/menu';
 
-//测试数据1
-const networkListTest = {
-    message: 'success',
-    result: [
-        {
-            id: '1585192878304051200',
-            name: 'MQTT网络组件',
-            addresses: [
-                {
-                    address: 'mqtt://120.77.179.54:8101',
-                    health: 1,
-                    ok: true,
-                    bad: false,
-                    disabled: false,
-                },
-            ],
-        },
-        {
-            id: '1583268266806009856',
-            name: '我的第一个MQTT服务组件',
-            description: '',
-            addresses: [
-                {
-                    address: 'mqtt://120.77.179.54:8100',
-                    health: 1,
-                    ok: true,
-                    bad: false,
-                    disabled: false,
-                },
-            ],
-        },
-        {
-            id: '1570335308902912000',
-            name: '0915MQTT网络组件_勿动',
-            description: '测试，勿动！',
-            addresses: [
-                {
-                    address: 'mqtt://120.77.179.54:8083',
-                    health: 1,
-                    ok: true,
-                    bad: false,
-                    disabled: false,
-                },
-            ],
-        },
-        {
-            id: '1567062350140858368',
-            name: '网络组件20220906160907',
-            addresses: [
-                {
-                    address: 'mqtt://120.77.179.54:8083',
-                    health: 1,
-                    ok: true,
-                    bad: false,
-                    disabled: false,
-                },
-            ],
-        },
-        {
-            id: '1556563257890742272',
-            name: 'MQTT网络组件',
-            addresses: [
-                {
-                    address: 'mqtt://0.0.0.0:8104',
-                    health: 1,
-                    ok: true,
-                    bad: false,
-                    disabled: false,
-                },
-            ],
-        },
-        {
-            id: '1534774770408108032',
-            name: 'MQTT',
-            addresses: [
-                {
-                    address: 'mqtt://120.77.179.54:8088',
-                    health: 1,
-                    ok: true,
-                    bad: false,
-                    disabled: false,
-                },
-            ],
-        },
-    ],
-    status: 200,
-    timestamp: 1674960624150,
-};
+const menuStory = useMenuStore();
 
 interface FormState {
     name: string;
@@ -327,6 +252,7 @@ const stepCurrent = ref(0);
 const steps = ref(['网络组件', '完成']);
 const networkCurrent = ref('');
 const networkList = ref([]);
+const allNetworkList = ref([]);
 
 const onFinish = async (values: any) => {
     const providerId = props.provider.id;
@@ -341,16 +267,7 @@ const onFinish = async (values: any) => {
         id === ':id' ? await save(params) : await update({ ...params, id });
     if (resp.status === 200) {
         message.success('操作成功！');
-        // if (params.get('save')) {
-        // if ((window as any).onTabSaveSuccess) {
-        //   if (resp.result) {
-        //     (window as any).onTabSaveSuccess(resp.result);
-        //     setTimeout(() => window.close(), 300);
-        //   }
-        // }
-        //   } else {
         history.back();
-        //   }
     }
 };
 
@@ -359,28 +276,27 @@ const checkedChange = (id: string) => {
 };
 
 const queryNetworkList = async (id: string, include: string, data = {}) => {
-    // const resp = await getNetworkList(
-    //     NetworkTypeMapping.get(id),
-    //     include,
-    //     data,
-    // );
-    // if (resp.status === 200) {
-    //     networkList.value = resp.result;
-    // }
-
-    //使用测试数据1
-    networkList.value = networkListTest.result;
+    const resp = await getNetworkList(
+        NetworkTypeMapping.get(id),
+        include,
+        data,
+    );
+    if (resp.status === 200) {
+        networkList.value = resp.result;
+        allNetworkList.value = resp.result;
+    }
 };
 
 const networkSearch = (value: string) => {
-    queryNetworkList(props.provider.id, networkCurrent.value || '', {
-        terms: [
-            {
-                column: 'name$LIKE',
-                value: `%${value}%`,
-            },
-        ],
-    });
+    if (value) {
+        networkList.value = allNetworkList.value.filter(
+            (i: any) =>
+                i.name &&
+                i.name.toLocaleLowerCase().includes(value.toLocaleLowerCase()),
+        );
+    } else {
+        networkList.value = allNetworkList.value;
+    }
 };
 
 const saveData = async () => {
@@ -389,8 +305,7 @@ const saveData = async () => {
 };
 
 const addNetwork = () => {
-    // const url = this.$store.state.permission.routes['Link/Type/Detail']
-    const url = '/iot/link/type/detail/:id';
+    const url = menuStory.menus['link/Type/Detail']?.path;
     const tab = window.open(
         `${window.location.origin + window.location.pathname}#${url}?type=${
             NetworkTypeMapping.get(props.provider?.id) || ''
@@ -426,17 +341,17 @@ onMounted(() => {
         };
         networkCurrent.value = props.data.channelId;
     }
-}),
-    watch(
-        current,
-        (v) => {
-            stepCurrent.value = v;
-        },
-        {
-            deep: true,
-            immediate: true,
-        },
-    );
+});
+watch(
+    current,
+    (v) => {
+        stepCurrent.value = v;
+    },
+    {
+        deep: true,
+        immediate: true,
+    },
+);
 </script>
 
 <style lang="less" scoped>
diff --git a/src/views/link/AccessConfig/components/Media/GB28181.vue b/src/views/link/AccessConfig/components/Media/GB28181.vue
index a3c04aad..250babe5 100644
--- a/src/views/link/AccessConfig/components/Media/GB28181.vue
+++ b/src/views/link/AccessConfig/components/Media/GB28181.vue
@@ -6,7 +6,7 @@
         <div class="steps-content">
             <div class="steps-box" v-if="current === 0">
                 <div class="alert">
-                    <info-circle-outlined />
+                    <AIcon type="InfoCircleOutlined" />
                     配置设备信令参数
                 </div>
                 <div>
@@ -85,7 +85,7 @@
                                             独立配置:集群下不同节点使用不同配置
                                         </p>
                                     </template>
-                                    <question-circle-outlined />
+                                    <AIcon type="QuestionCircleOutlined" />
                                 </a-tooltip>
                             </div>
 
@@ -218,9 +218,7 @@
                                         :header="`#${index + 1}.节点`"
                                     >
                                         <template #extra>
-                                            <delete-outlined
-                                                @click="removeCluster(cluster)"
-                                            />
+                                            <AIcon type="DeleteOutlined" />
                                         </template>
                                         <a-row :gutter="[24, 24]">
                                             <a-col :span="8">
@@ -274,7 +272,9 @@
                                                                     绑定到服务器上的网卡地址,绑定到所有网卡:0.0.0.0
                                                                 </p>
                                                             </template>
-                                                            <question-circle-outlined />
+                                                            <AIcon
+                                                                type="QuestionCircleOutlined"
+                                                            />
                                                         </a-tooltip>
                                                     </div>
 
@@ -363,7 +363,9 @@
                                                                     监听指定端口的请求
                                                                 </p>
                                                             </template>
-                                                            <question-circle-outlined />
+                                                            <AIcon
+                                                                type="QuestionCircleOutlined"
+                                                            />
                                                         </a-tooltip>
                                                     </div>
                                                     <a-input
@@ -417,7 +419,7 @@
                                     block
                                     @click="addCluster"
                                 >
-                                    <PlusOutlined />
+                                    <AIcon type="PlusOutlined" />
                                     新增
                                 </a-button>
                             </a-form-item>
@@ -502,14 +504,17 @@
             >
                 下一步
             </a-button>
-            <a-button
+            <PermissionButton
                 v-if="current === 1 && view === 'false'"
                 type="primary"
                 style="margin-right: 8px"
                 @click="saveData"
+                :hasPermission="`link/AccessConfig:${
+                    id === ':id' ? 'add' : 'update'
+                }`"
             >
                 保存
-            </a-button>
+            </PermissionButton>
             <a-button v-if="current > 0" @click="prev"> 上一步 </a-button>
         </div>
     </div>
@@ -519,12 +524,6 @@
 import { message, Form } from 'ant-design-vue';
 import type { FormInstance } from 'ant-design-vue';
 import { getResourcesCurrent, getClusters } from '@/api/link/accessConfig';
-import {
-    DeleteOutlined,
-    PlusOutlined,
-    QuestionCircleOutlined,
-    InfoCircleOutlined,
-} from '@ant-design/icons-vue';
 import { update, save } from '@/api/link/accessConfig';
 
 interface Form2 {
diff --git a/src/views/link/AccessConfig/components/Media/index.vue b/src/views/link/AccessConfig/components/Media/index.vue
index 189d47ad..68544226 100644
--- a/src/views/link/AccessConfig/components/Media/index.vue
+++ b/src/views/link/AccessConfig/components/Media/index.vue
@@ -39,12 +39,16 @@
                                 />
                             </a-form-item>
                             <a-form-item>
-                                <a-button
+                                <PermissionButton
                                     v-if="view === 'false'"
                                     type="primary"
                                     html-type="submit"
-                                    >保存</a-button
+                                    :hasPermission="`link/AccessConfig:${
+                                        id === ':id' ? 'add' : 'update'
+                                    }`"
                                 >
+                                    保存
+                                </PermissionButton>
                             </a-form-item>
                         </a-form>
                     </div>
@@ -122,16 +126,7 @@ const onFinish = async (values: any) => {
         id === ':id' ? await save(params) : await update({ ...params, id });
     if (resp.status === 200) {
         message.success('操作成功！');
-        // if (params.get('save')) {
-        // if ((window as any).onTabSaveSuccess) {
-        //   if (resp.result) {
-        //     (window as any).onTabSaveSuccess(resp.result);
-        //     setTimeout(() => window.close(), 300);
-        //   }
-        // }
-        //   } else {
         history.back();
-        //   }
     }
 };
 
diff --git a/src/views/link/AccessConfig/components/Network.vue b/src/views/link/AccessConfig/components/Network.vue
deleted file mode 100644
index 2d871076..00000000
--- a/src/views/link/AccessConfig/components/Network.vue
+++ /dev/null
@@ -1,1196 +0,0 @@
-<template>
-    <div>
-        <a-steps :current="stepCurrent">
-            <a-step v-for="item in steps" :key="item" :title="item" />
-        </a-steps>
-        <div class="steps-content">
-            <div class="steps-box" v-if="current === 0">
-                <div class="alert">
-                    <info-circle-outlined />
-                    选择与设备通信的网络组件
-                </div>
-                <div class="search">
-                    <a-input-search
-                        allowClear
-                        placeholder="请输入"
-                        style="width: 300px"
-                        @search="networkSearch"
-                    />
-                    <a-button type="primary" @click="addNetwork">新增</a-button>
-                </div>
-                <div class="card-item">
-                    <a-row :gutter="[24, 24]" v-if="networkList.length > 0">
-                        <a-col
-                            :span="8"
-                            v-for="item in networkList"
-                            :key="item.id"
-                        >
-                            <access-card
-                                @checkedChange="checkedChange"
-                                :checked="networkCurrent"
-                                :data="{
-                                    ...item,
-                                    description: item.description
-                                        ? item.description
-                                        : descriptionList[provider.id],
-                                }"
-                            >
-                                <template #other>
-                                    <div class="other">
-                                        <a-tooltip placement="topLeft">
-                                            <div
-                                                v-if="
-                                                    (item.addresses || [])
-                                                        .length > 1
-                                                "
-                                            >
-                                                <div
-                                                    v-for="i in item.addresses ||
-                                                    []"
-                                                    :key="i.address"
-                                                    class="item"
-                                                >
-                                                    <a-badge
-                                                        :color="
-                                                            i.health === -1
-                                                                ? 'red'
-                                                                : 'green'
-                                                        "
-                                                    />{{ i.address }}
-                                                </div>
-                                            </div>
-                                            <div
-                                                v-for="i in (
-                                                    item.addresses || []
-                                                ).slice(0, 1)"
-                                                :key="i.address"
-                                                class="item"
-                                            >
-                                                <a-badge
-                                                    :color="
-                                                        i.health === -1
-                                                            ? 'red'
-                                                            : 'green'
-                                                    "
-                                                    :text="i.address"
-                                                />
-                                                <span
-                                                    v-if="
-                                                        (item.addresses || [])
-                                                            .length > 1
-                                                    "
-                                                    >...</span
-                                                >
-                                            </div>
-                                        </a-tooltip>
-                                    </div>
-                                </template>
-                            </access-card>
-                        </a-col>
-                    </a-row>
-                    <a-empty v-else description="暂无数据" />
-                </div>
-            </div>
-            <div class="steps-box" v-else-if="current === 1">
-                <div class="alert">
-                    <info-circle-outlined />
-                    使用选择的消息协议，对网络组件通信数据进行编解码、认证等操作
-                </div>
-                <div class="search">
-                    <a-input-search
-                        allowClear
-                        placeholder="请输入"
-                        style="width: 300px"
-                        @search="procotolSearch"
-                    />
-                    <a-button type="primary" @click="addProcotol"
-                        >新增</a-button
-                    >
-                </div>
-                <div class="card-item">
-                    <a-row :gutter="[24, 24]" v-if="procotolList.length > 0">
-                        <a-col
-                            :span="8"
-                            v-for="item in procotolList"
-                            :key="item.id"
-                        >
-                            <access-card
-                                @checkedChange="procotolChange"
-                                :checked="procotolCurrent"
-                                :data="item"
-                            >
-                            </access-card>
-                        </a-col>
-                    </a-row>
-                    <a-empty v-else description="暂无数据" />
-                </div>
-            </div>
-            <div class="steps-box" v-else>
-                <div
-                    class="card-last"
-                    :style="`max-height:${
-                        clientHeight > 900 ? 750 : clientHeight * 0.7
-                    }px`"
-                >
-                    <a-row :gutter="[24, 24]">
-                        <a-col :span="12">
-                            <title-component data="基本信息" />
-                            <div>
-                                <a-form
-                                    ref="formRef"
-                                    :model="formData"
-                                    layout="vertical"
-                                >
-                                    <a-form-item
-                                        label="名称"
-                                        v-bind="validateInfos.name"
-                                    >
-                                        <a-input
-                                            v-model:value="formData.name"
-                                            allowClear
-                                            placeholder="请输入名称"
-                                        />
-                                    </a-form-item>
-                                    <a-form-item
-                                        label="说明"
-                                        v-bind="validateInfos.description"
-                                    >
-                                        <a-textarea
-                                            placeholder="请输入说明"
-                                            :rows="4"
-                                            v-model:value="formData.description"
-                                            show-count
-                                            :maxlength="200"
-                                        />
-                                    </a-form-item>
-                                </a-form>
-                            </div>
-                        </a-col>
-                        <a-col :span="12">
-                            <div class="config-right">
-                                <div class="config-right-item">
-                                    <div class="config-right-item-title">
-                                        接入方式
-                                    </div>
-                                    <div class="config-right-item-context">
-                                        {{ provider.name }}
-                                    </div>
-                                    <div class="config-right-item-context">
-                                        {{ provider.description }}
-                                    </div>
-                                </div>
-                                <div class="config-right-item">
-                                    <div class="config-right-item-title">
-                                        消息协议
-                                    </div>
-                                    <div class="config-right-item-context">
-                                        {{
-                                            procotolList.find(
-                                                (i) => i.id === procotolCurrent,
-                                            ).name
-                                        }}
-                                    </div>
-                                    <div
-                                        class="config-right-item-context"
-                                        v-if="config.document"
-                                    >
-                                        <Markdown :source="config.document" />
-                                    </div>
-                                </div>
-                                <div
-                                    class="config-right-item"
-                                    v-if="
-                                        networkList.find(
-                                            (i) => i.id === networkCurrent,
-                                        ) &&
-                                        (
-                                            networkList.find(
-                                                (i) => i.id === networkCurrent,
-                                            ).addresses || []
-                                        ).length > 0
-                                    "
-                                >
-                                    <div class="config-right-item-title">
-                                        网络组件
-                                    </div>
-                                    <div
-                                        v-for="i in (networkList.find(
-                                            (i) => i.id === networkCurrent,
-                                        ) &&
-                                            networkList.find(
-                                                (i) => i.id === networkCurrent,
-                                            ).addresses) ||
-                                        []"
-                                        :key="i.address"
-                                    >
-                                        <a-badge
-                                            :color="
-                                                i.health === -1
-                                                    ? 'red'
-                                                    : 'green'
-                                            "
-                                            :text="i.address"
-                                        />
-                                    </div>
-                                </div>
-                                <div
-                                    class="config-right-item"
-                                    v-if="
-                                        config.routes &&
-                                        config.routes.length > 0
-                                    "
-                                >
-                                    <div class="config-right-item-title">
-                                        {{
-                                            data.provider ===
-                                                'mqtt-server-gateway' ||
-                                            data.provider ===
-                                                'mqtt-client-gateway'
-                                                ? 'topic'
-                                                : 'URL信息'
-                                        }}
-                                    </div>
-                                    <a-table
-                                        :pagination="false"
-                                        :rowKey="generateUUID()"
-                                        :data-source="config.routes || []"
-                                        bordered
-                                        :columns="columnsMQTT"
-                                        :scroll="{ y: 300 }"
-                                    >
-                                        <template
-                                            #bodyCell="{ column, text, record }"
-                                        >
-                                            <template
-                                                v-if="
-                                                    column.dataIndex ===
-                                                    'stream'
-                                                "
-                                            >
-                                                <span
-                                                    v-if="
-                                                        record.upstream &&
-                                                        record.downstream
-                                                    "
-                                                    >上行、下行</span
-                                                >
-                                                <span
-                                                    v-else-if="record.upstream"
-                                                    >上行</span
-                                                >
-                                                <span
-                                                    v-else-if="
-                                                        record.downstream
-                                                    "
-                                                    >下行</span
-                                                >
-                                            </template>
-                                        </template>
-                                    </a-table>
-                                </div>
-                            </div>
-                        </a-col>
-                    </a-row>
-                </div>
-            </div>
-        </div>
-        <div class="steps-action">
-            <a-button
-                v-if="[0, 1].includes(current)"
-                type="primary"
-                style="margin-right: 8px"
-                @click="next"
-            >
-                下一步
-            </a-button>
-            <a-button
-                v-if="current === 2 && view === 'false'"
-                type="primary"
-                style="margin-right: 8px"
-                @click="saveData"
-            >
-                保存
-            </a-button>
-            <a-button
-                v-if="type === 'child-device' ? current > 1 : current > 0"
-                @click="prev"
-            >
-                上一步
-            </a-button>
-        </div>
-    </div>
-</template>
-
-<script lang="ts" setup name="AccessNetwork">
-import {
-    getNetworkList,
-    getProtocolList,
-    getConfigView,
-    save,
-    update,
-    getChildConfigView,
-} from '@/api/link/accessConfig';
-import {
-    descriptionList,
-    NetworkTypeMapping,
-    ProtocolMapping,
-} from '../Detail/data';
-import AccessCard from './AccessCard/index.vue';
-import { message, Form } from 'ant-design-vue';
-import type { FormInstance, TableColumnType } from 'ant-design-vue';
-import Markdown from 'vue3-markdown-it';
-import { InfoCircleOutlined } from '@ant-design/icons-vue';
-//测试数据1
-const resultList1 = [
-    {
-        id: '1610466717670780928',
-        name: '官方协议',
-    },
-    {
-        id: '1610205217785524224',
-        name: 'demo协议',
-    },
-    {
-        id: '1610204985806958592',
-        name: '水压协议',
-    },
-    {
-        id: '1605459961693745152',
-        name: '测试设备诊断日志显示',
-    },
-    {
-        id: '1582302200020783104',
-        name: 'demo',
-    },
-    {
-        id: '1581839391887794176',
-        name: '海康闸机协议',
-    },
-    {
-        id: '1567062365030637568',
-        name: '协议20220906160914',
-    },
-    {
-        id: '1561650927208628224',
-        name: 'local',
-    },
-];
-
-//测试数据2
-// const result2 = {
-//     id: 'UDP',
-//     name: 'UDP',
-//     features: [],
-//     routes: [],
-//     metadata: '',
-// };
-const result2 = {
-    id: 'MQTT',
-    name: 'MQTT',
-    features: [
-        {
-            id: 'supportFirmware',
-            name: '支持固件升级',
-        },
-    ],
-    routes: [
-        {
-            topic: '/{productId:产品ID}/{deviceId:设备ID}/properties/report',
-            upstream: true,
-            downstream: false,
-            qos: 0,
-            group: '属性上报',
-            description: '上报物模型属性数据',
-            example: '{"properties":{"属性ID":"属性值"}}',
-            address: '/{productId:产品ID}/{deviceId:设备ID}/properties/report',
-        },
-        {
-            topic: '/{productId:产品ID}/{deviceId:设备ID}/properties/read',
-            upstream: false,
-            downstream: true,
-            qos: 0,
-            group: '读取属性',
-            description: '平台下发读取物模型属性数据指令',
-            example:
-                '{"messageId":"消息ID,回复时需要一致.","properties":["属性ID"]}',
-            address: '/{productId:产品ID}/{deviceId:设备ID}/properties/read',
-        },
-        {
-            topic: '/{productId:产品ID}/{deviceId:设备ID}/properties/read/reply',
-            upstream: true,
-            downstream: false,
-            qos: 0,
-            group: '读取属性',
-            description: '对平台下发的读取属性指令进行响应',
-            example:
-                '{"messageId":"消息ID,与读取指令中的ID一致.","properties":{"属性ID":"属性值"}}',
-            address:
-                '/{productId:产品ID}/{deviceId:设备ID}/properties/read/reply',
-        },
-        {
-            topic: '/{productId:产品ID}/{deviceId:设备ID}/properties/write',
-            upstream: false,
-            downstream: true,
-            qos: 0,
-            group: '修改属性',
-            description: '平台下发修改物模型属性数据指令',
-            example:
-                '{"messageId":"消息ID,回复时需要一致.","properties":{"属性ID":"属性值"}}',
-            address: '/{productId:产品ID}/{deviceId:设备ID}/properties/write',
-        },
-        {
-            topic: '/{productId:产品ID}/{deviceId:设备ID}/properties/write/reply',
-            upstream: true,
-            downstream: false,
-            qos: 0,
-            group: '修改属性',
-            description: '对平台下发的修改属性指令进行响应',
-            example:
-                '{"messageId":"消息ID,与修改指令中的ID一致.","properties":{"属性ID":"属性值"}}',
-            address:
-                '/{productId:产品ID}/{deviceId:设备ID}/properties/write/reply',
-        },
-        {
-            topic: '/{productId:产品ID}/{deviceId:设备ID}/event/{eventId:事件ID}',
-            upstream: true,
-            downstream: false,
-            qos: 0,
-            group: '事件上报',
-            description: '上报物模型事件数据',
-            example: '{"data":{"key":"value"}}',
-            address:
-                '/{productId:产品ID}/{deviceId:设备ID}/event/{eventId:事件ID}',
-        },
-        {
-            topic: '/{productId:产品ID}/{deviceId:设备ID}/function/invoke',
-            upstream: false,
-            downstream: true,
-            qos: 0,
-            group: '调用功能',
-            description: '平台下发功能调用指令',
-            example:
-                '{"messageId":"消息ID,回复时需要一致.","functionId":"功能标识","inputs":[{"name":"参数名","value":"参数值"}]}',
-            address: '/{productId:产品ID}/{deviceId:设备ID}/function/invoke',
-        },
-        {
-            topic: '/{productId:产品ID}/{deviceId:设备ID}/function/invoke/reply',
-            upstream: true,
-            downstream: false,
-            qos: 0,
-            group: '调用功能',
-            description: '设备响应平台下发的功能调用指令',
-            example:
-                '{"messageId":"消息ID,与下发指令中的messageId一致.","output":"输出结果,格式与物模型中定义的类型一致"',
-            address:
-                '/{productId:产品ID}/{deviceId:设备ID}/function/invoke/reply',
-        },
-        {
-            topic: '/{productId:产品ID}/{deviceId:设备ID}/child/{childDeviceId:子设备ID}/{#:子设备相应操作的topic}',
-            upstream: true,
-            downstream: true,
-            qos: 0,
-            group: '子设备消息',
-            description: '网关上报或者平台下发子设备消息',
-            address:
-                '/{productId:产品ID}/{deviceId:设备ID}/child/{childDeviceId:子设备ID}/{#:子设备相应操作的topic}',
-        },
-        {
-            topic: '/{productId:产品ID}/{deviceId:设备ID}/child-reply/{childDeviceId:子设备ID}/{#:子设备相应操作的topic}',
-            upstream: true,
-            downstream: true,
-            qos: 0,
-            group: '子设备消息',
-            description: '网关回复平台下发给子设备的指令结果',
-            address:
-                '/{productId:产品ID}/{deviceId:设备ID}/child-reply/{childDeviceId:子设备ID}/{#:子设备相应操作的topic}',
-        },
-        {
-            topic: '/{productId:产品ID}/{deviceId:设备ID}/tags',
-            upstream: true,
-            downstream: false,
-            qos: 0,
-            group: '更新标签',
-            description: '更新标签数据',
-            example: '{"tags":{"key","value"}}',
-            address: '/{productId:产品ID}/{deviceId:设备ID}/tags',
-        },
-        {
-            topic: '/{productId:产品ID}/{deviceId:设备ID}/online',
-            upstream: true,
-            downstream: false,
-            qos: 0,
-            group: '状态管理',
-            description: '设备上线',
-            address: '/{productId:产品ID}/{deviceId:设备ID}/online',
-        },
-        {
-            topic: '/{productId:产品ID}/{deviceId:设备ID}/offline',
-            upstream: true,
-            downstream: false,
-            qos: 0,
-            group: '状态管理',
-            description: '设备离线',
-            address: '/{productId:产品ID}/{deviceId:设备ID}/offline',
-        },
-    ],
-    document:
-        '### 认证说明\r\n\r\nCONNECT报文:\r\n```text\r\nclientId: 设备ID\r\nusername: secureId+"|"+timestamp\r\npassword: md5(secureId+"|"+timestamp+"|"+secureKey)\r\n ```\r\n\r\n说明: secureId以及secureKey在创建设备产品或设备实例时进行配置. \r\ntimestamp为当前时间戳(毫秒),与服务器时间不能相差5分钟.\r\nmd5为32位,不区分大小写.',
-    metadata: '',
-};
-//测试数据
-const networkData = {
-    COAP_SERVER: [
-        {
-            id: '1620352949679960064',
-            name: '前端测试1',
-            description: '前端测试1',
-            addresses: [
-                {
-                    address: 'coap://111.0.0:88',
-                    health: 1,
-                    ok: true,
-                    bad: false,
-                    disabled: false,
-                },
-            ],
-        },
-        {
-            id: '1613071630619607040',
-            name: '1',
-            addresses: [
-                {
-                    address: 'coap://120.77.179.54:9000',
-                    health: 1,
-                    ok: true,
-                    bad: false,
-                    disabled: false,
-                },
-            ],
-        },
-    ],
-    UDP: [
-        {
-            id: '1590553821093437440',
-            name: '194',
-            addresses: [
-                {
-                    address: 'udp://139.217.130.194:1883',
-                    health: 1,
-                    ok: true,
-                    bad: false,
-                    disabled: false,
-                },
-            ],
-        },
-        {
-            id: '1585831257204301824',
-            name: '测试隐藏集群',
-            description: '111',
-            addresses: [
-                {
-                    address: 'udp://127.0.0.1:8080',
-                    health: 1,
-                    ok: true,
-                    bad: false,
-                    disabled: false,
-                },
-            ],
-        },
-        {
-            id: '1584825665263149056',
-            name: '1',
-            addresses: [
-                {
-                    address: 'udp://120.77.179.54:9000',
-                    health: 1,
-                    ok: true,
-                    bad: false,
-                    disabled: false,
-                },
-            ],
-        },
-        {
-            id: '1551761481741672448',
-            name: '0726UDP',
-            description: '测试',
-            addresses: [
-                {
-                    address: 'udp://120.77.179.54:8088',
-                    health: 1,
-                    ok: true,
-                    bad: false,
-                    disabled: false,
-                },
-            ],
-        },
-    ],
-    TCP_SERVER: [
-        {
-            id: '1603206069979918336',
-            name: '测试A',
-            addresses: [
-                {
-                    address: 'tcp://120.77.179.54:8106',
-                    health: -1,
-                    ok: false,
-                    bad: false,
-                    disabled: true,
-                },
-            ],
-        },
-        {
-            id: '1603206069979918330',
-            name: '测试AA',
-            addresses: [
-                {
-                    address: 'tcp://120.77.179.54:8106',
-                    health: -1,
-                    ok: false,
-                    bad: false,
-                    disabled: true,
-                },
-            ],
-        },
-    ],
-    MQTT_SERVER: [
-        {
-            id: '1585192878304051200',
-            name: 'MQTT网络组件',
-            addresses: [
-                {
-                    address: 'mqtt://120.77.179.54:8101',
-                    health: 1,
-                    ok: true,
-                    bad: false,
-                    disabled: false,
-                },
-            ],
-        },
-        {
-            id: '1583268266806009856',
-            name: '我的第一个MQTT服务组件',
-            description: '',
-            addresses: [
-                {
-                    address: 'mqtt://120.77.179.54:8100',
-                    health: 1,
-                    ok: true,
-                    bad: false,
-                    disabled: false,
-                },
-            ],
-        },
-        {
-            id: '1570335308902912000',
-            name: '0915MQTT网络组件_勿动',
-            description: '测试，勿动！',
-            addresses: [
-                {
-                    address: 'mqtt://120.77.179.54:8083',
-                    health: 1,
-                    ok: true,
-                    bad: false,
-                    disabled: false,
-                },
-            ],
-        },
-        {
-            id: '1567062350140858368',
-            name: '网络组件20220906160907',
-            addresses: [
-                {
-                    address: 'mqtt://120.77.179.54:8083',
-                    health: 1,
-                    ok: true,
-                    bad: false,
-                    disabled: false,
-                },
-            ],
-        },
-        {
-            id: '1556563257890742272',
-            name: 'MQTT网络组件',
-            addresses: [
-                {
-                    address: 'mqtt://0.0.0.0:8104',
-                    health: 1,
-                    ok: true,
-                    bad: false,
-                    disabled: false,
-                },
-            ],
-        },
-        {
-            id: '1534774770408108032',
-            name: 'MQTT',
-            addresses: [
-                {
-                    address: 'mqtt://120.77.179.54:8088',
-                    health: 1,
-                    ok: true,
-                    bad: false,
-                    disabled: false,
-                },
-            ],
-        },
-    ],
-};
-function generateUUID() {
-    var d = new Date().getTime();
-    if (
-        typeof performance !== 'undefined' &&
-        typeof performance.now === 'function'
-    ) {
-        d += performance.now(); //use high-precision timer if available
-    }
-    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(
-        /[xy]/g,
-        function (c) {
-            var r = (d + Math.random() * 16) % 16 | 0;
-            d = Math.floor(d / 16);
-            return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);
-        },
-    );
-}
-
-const props = defineProps({
-    provider: {
-        type: Object,
-        default: () => {},
-    },
-    data: {
-        type: Object,
-        default: () => {},
-    },
-});
-
-const clientHeight = document.body.clientHeight;
-const type = props.provider.channel;
-const route = useRoute();
-const view = route.query.view as string;
-const id = route.params.id as string;
-
-const formRef = ref<FormInstance>();
-const useForm = Form.useForm;
-
-const current = ref(0);
-const stepCurrent = ref(0);
-const steps = ref(['网络组件', '消息协议', '完成']);
-const networkList = ref([]);
-const procotolList = ref([]);
-const allProcotolList = ref([]);
-const networkCurrent = ref('');
-const procotolCurrent = ref('');
-let config = ref({});
-let columnsMQTT = ref(<TableColumnType>[]);
-const formData = ref({
-    name: '',
-    description: '',
-});
-
-const { resetFields, validate, validateInfos } = useForm(
-    formData,
-    reactive({
-        name: [
-            { required: true, message: '请输入名称', trigger: 'blur' },
-            { max: 64, message: '最多可输入64个字符' },
-        ],
-        description: [{ max: 200, message: '最多可输入200个字符' }],
-    }),
-);
-
-const queryNetworkList = async (id: string, include: string, data = {}) => {
-    if (NetworkTypeMapping.get(id) === 'MQTT_SERVER') {
-        //使用测试数据
-        networkList.value = networkData[NetworkTypeMapping.get(id)];
-        // return;
-    }
-    const resp = await getNetworkList(
-        NetworkTypeMapping.get(id),
-        include,
-        data,
-    );
-    if (resp.status === 200) {
-        //使用测试数据
-        // networkList.value = resp.result;
-        networkList.value =
-            resp.result.length === 0
-                ? networkData[NetworkTypeMapping.get(id)]
-                : resp.result;
-    }
-};
-
-// const  queryProcotolList=async(id:string, params:object) =>{
-const queryProcotolList = async (id: string, params = {}) => {
-    // const resp = await getProtocolList(ProtocolMapping.get(id), {
-    //     ...params,
-    //     'sorts[0].name': 'createTime',
-    //     'sorts[0].order': 'desc',
-    // });
-    // if (resp.status === 200) {
-    //     procotolList.value = resp.result;
-    //     allProcotolList.value = resp.result;
-    // }
-
-    //使用测试数据1
-    procotolList.value = resultList1;
-    allProcotolList.value = resultList1;
-};
-
-const addNetwork = () => {
-    // const url = this.$store.state.permission.routes['Link/Type/Detail']
-    const url = '/iot/link/type/detail/:id';
-    const tab = window.open(
-        `${window.location.origin + window.location.pathname}#${url}?type=${
-            NetworkTypeMapping.get(props.provider?.id) || ''
-        }`,
-    );
-    tab.onTabSaveSuccess = (value) => {
-        if (value.success) {
-            networkCurrent.value = value.result.id;
-            queryNetworkList(props.provider?.id, networkCurrent.value || '');
-        }
-    };
-};
-const addProcotol = () => {
-    // const url = this.$store.state.permission.routes['Link/Protocol']
-    const url = '/iot/link/protocol';
-    const tab = window.open(
-        `${window.location.origin + window.location.pathname}#${url}?save=true`,
-    );
-    tab.onTabSaveSuccess = (value) => {
-        if (value.success) {
-            procotolCurrent.value = value.result?.id;
-            queryProcotolList(props.provider?.id);
-        }
-    };
-};
-
-const checkedChange = (id: string) => {
-    networkCurrent.value = id;
-};
-
-const networkSearch = (value: string) => {
-    queryNetworkList(props.provider.id, networkCurrent.value || '', {
-        terms: [
-            {
-                column: 'name$LIKE',
-                value: `%${value}%`,
-            },
-        ],
-    });
-};
-const procotolChange = (id: string) => {
-    if (!props.data.id) {
-        procotolCurrent.value = id;
-    }
-};
-
-const procotolSearch = (value: string) => {
-    if (value) {
-        const list = allProcotolList.value.filter((i) => {
-            return (
-                i.name &&
-                i.name.toLocaleLowerCase().includes(value.toLocaleLowerCase())
-            );
-        });
-        procotolList.value = list;
-    } else {
-        procotolList.value = allProcotolList.value;
-    }
-};
-
-const saveData = () => {
-    validate()
-        .then(async (values) => {
-            const params = {
-                ...props.data,
-                ...values,
-                protocol: procotolCurrent.value,
-                channel: 'network', // 网络组件
-                channelId: networkCurrent.value,
-            };
-            const resp =
-                id === ':id'
-                    ? await save(params)
-                    : await update({
-                          ...params,
-                          id,
-                          provider: props.provider.id,
-                          transport:
-                              props.provider?.id === 'child-device'
-                                  ? 'Gateway'
-                                  : ProtocolMapping.get(props.provider.id),
-                      });
-            if (resp.status === 200) {
-                message.success('操作成功！');
-                // 回到列表页面
-                // if (window.onTabSaveSuccess) {
-                //     window.onTabSaveSuccess(resp);
-                //     setTimeout(() => window.close(), 300);
-                // } else {
-                //     // this.$store.dispatch('jumpPathByKey', { key: MenuKeys['Link/AccessConfig'] })
-                // }
-                history.back();
-            }
-        })
-        .catch((err) => {});
-};
-
-const next = async () => {
-    if (current.value === 0) {
-        if (!networkCurrent.value) {
-            message.error('请选择网络组件！');
-        } else {
-            queryProcotolList(props.provider.id);
-            current.value = current.value + 1;
-        }
-    } else if (current.value === 1) {
-        if (!procotolCurrent.value) {
-            message.error('请选择消息协议！');
-        } else {
-            //使用测试数据2
-            config.value = result2;
-            current.value = current.value + 1;
-            columnsMQTT.value = [
-                {
-                    title: '分组',
-                    dataIndex: 'group',
-                    key: 'group',
-                    ellipsis: true,
-                    align: 'center',
-                    width: 100,
-                    customCell: (record: object, rowIndex: number) => {
-                        const obj = {
-                            children: record,
-                            rowSpan: 0,
-                        };
-                        const list =
-                            (config.value && config.value.routes) || [];
-
-                        const arr = list.filter(
-                            (res: object) => res.group == record.group,
-                        );
-
-                        if (
-                            rowIndex == 0 ||
-                            list[rowIndex - 1].group !== record.group
-                        )
-                            obj.rowSpan = arr.length;
-
-                        return obj;
-                    },
-                },
-                {
-                    title: 'topic',
-                    dataIndex: 'topic',
-                    key: 'topic',
-                    align: 'center',
-                    ellipsis: true,
-                },
-                {
-                    title: '上下行',
-                    dataIndex: 'stream',
-                    key: 'stream',
-                    ellipsis: true,
-                    align: 'center',
-                    width: 100,
-                },
-                {
-                    title: '说明',
-                    dataIndex: 'description',
-                    key: 'description',
-                    ellipsis: true,
-                },
-            ];
-
-            // const resp =
-            //     type !== 'child-device'
-            //         ? await getConfigView(
-            //               procotolCurrent.value,
-            //               ProtocolMapping.get(props.provider.id),
-            //           )
-            //         : await getChildConfigView(procotolCurrent.value);
-            // if (resp.status === 200) {
-            //     config.value = resp.result;
-            //     current.value = current.value + 1;
-            //     columnsMQTT = [
-            //         {
-            //             title: '分组',
-            //             dataIndex: 'group',
-            //             key: 'group',
-            //             ellipsis: true,
-            //             align: 'center',
-            //             width: 100,
-            //             customRender: (value, row, index) => {
-            //                 const obj = {
-            //                     children: value,
-            //                     attrs: {},
-            //                 };
-            //                 const list = (config && config.routes) || [];
-            //                 const arr = list.filter((res) => {
-            //                     return res.group == row.group;
-            //                 });
-            //                 if (
-            //                     index == 0 ||
-            //                     list[index - 1].group !== row.group
-            //                 ) {
-            //                     obj.attrs.rowSpan = arr.length;
-            //                 } else {
-            //                     obj.attrs.rowSpan = 0;
-            //                 }
-            //                 return obj;
-            //             },
-            //         },
-            //         {
-            //             title: 'topic',
-            //             dataIndex: 'topic',
-            //             key: 'topic',
-            //             ellipsis: true,
-            //         },
-            //         {
-            //             title: '上下行',
-            //             dataIndex: 'stream',
-            //             key: 'stream',
-            //             ellipsis: true,
-            //             align: 'center',
-            //             width: 100,
-            //             scopedSlots: { customRender: 'stream' },
-            //         },
-            //         {
-            //             title: '说明',
-            //             dataIndex: 'description',
-            //             key: 'description',
-            //             ellipsis: true,
-            //         },
-            //     ];
-            // }
-        }
-    }
-};
-const prev = () => {
-    current.value = current.value - 1;
-};
-
-onMounted(() => {
-    if (props.data && props.data.id) {
-        if (props.data.provider !== 'child-device') {
-            procotolCurrent.value = props.data.protocol;
-            current.value = 0;
-            networkCurrent.value = props.data.channelId;
-            queryNetworkList(props.provider.id, networkCurrent.value);
-            procotolCurrent.value = props.data.protocol;
-            steps.value = ['网络组件', '消息协议', '完成'];
-        } else {
-            steps.value = ['消息协议', '完成'];
-            current.value = 1;
-            queryProcotolList(props.provider.id);
-        }
-    } else {
-        if (props.provider?.id) {
-            if (type !== 'child-device') {
-                queryNetworkList(props.provider.id, '');
-                steps.value = ['网络组件', '消息协议', '完成'];
-                current.value = 0;
-            } else {
-                steps.value = ['消息协议', '完成'];
-                current.value = 1;
-                queryProcotolList(props.provider.id);
-            }
-        }
-    }
-});
-
-onMounted(() => {
-    if (id !== ':id') {
-        procotolCurrent.value = props.data.protocol;
-        formData.value = {
-            name: props.data.name,
-            description: props.data.description,
-        };
-    }
-});
-
-watch(
-    current,
-    (v) => {
-        stepCurrent.value = type === 'child-device' ? v - 1 : v;
-    },
-    {
-        deep: true,
-        immediate: true,
-    },
-);
-</script>
-
-<style lang="less" scoped>
-.steps-content {
-    margin: 20px;
-}
-.steps-box {
-    min-height: 400px;
-    .card-item {
-        padding-right: 5px;
-        max-height: 480px;
-        overflow-y: auto;
-        overflow-x: hidden;
-    }
-    .card-last {
-        padding-right: 5px;
-        overflow-y: auto;
-        overflow-x: hidden;
-    }
-}
-.steps-action {
-    width: 100%;
-    margin-top: 24px;
-    margin-left: 20px;
-}
-.alert {
-    height: 40px;
-    padding-left: 10px;
-    color: rgba(0, 0, 0, 0.55);
-    line-height: 40px;
-    background-color: #f6f6f6;
-}
-.search {
-    display: flex;
-    margin: 15px 0;
-    justify-content: space-between;
-}
-
-.other {
-    width: 100%;
-    height: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    .item {
-        width: 100%;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-    }
-}
-
-.config-right {
-    padding: 20px;
-    color: rgba(0, 0, 0, 0.8);
-    background: rgba(0, 0, 0, 0.04);
-
-    .config-right-item {
-        margin-bottom: 10px;
-
-        .config-right-item-title {
-            width: 100%;
-            margin-bottom: 10px;
-            font-weight: 600;
-        }
-
-        .config-right-item-context {
-            margin: 5px 0;
-            color: rgba(0, 0, 0, 0.8);
-        }
-    }
-}
-</style>
diff --git a/src/views/link/AccessConfig/components/Network/index.vue b/src/views/link/AccessConfig/components/Network/index.vue
new file mode 100644
index 00000000..6d72b9e7
--- /dev/null
+++ b/src/views/link/AccessConfig/components/Network/index.vue
@@ -0,0 +1,701 @@
+<template>
+    <div>
+        <a-steps :current="stepCurrent">
+            <a-step v-for="item in steps" :key="item" :title="item" />
+        </a-steps>
+        <div class="steps-content">
+            <div class="steps-box" v-if="current === 0">
+                <div class="alert">
+                    <AIcon type="InfoCircleOutlined" />
+                    选择与设备通信的网络组件
+                </div>
+                <div class="search">
+                    <a-input-search
+                        allowClear
+                        placeholder="请输入"
+                        style="width: 300px"
+                        @search="networkSearch"
+                    />
+                    <PermissionButton
+                        type="primary"
+                        @click="addNetwork"
+                        hasPermission="link/Type:add"
+                    >
+                        <template #icon><AIcon type="PlusOutlined" /></template>
+                        新增
+                    </PermissionButton>
+                </div>
+                <div class="card-item">
+                    <a-row :gutter="[24, 24]" v-if="networkList.length > 0">
+                        <a-col
+                            :span="8"
+                            v-for="item in networkList"
+                            :key="item.id"
+                        >
+                            <access-card
+                                @checkedChange="checkedChange"
+                                :checked="networkCurrent"
+                                :data="{
+                                    ...item,
+                                    description: item.description
+                                        ? item.description
+                                        : descriptionList[provider.id],
+                                }"
+                            >
+                                <template #other>
+                                    <div class="other">
+                                        <a-tooltip placement="topLeft">
+                                            <div
+                                                v-if="
+                                                    (item.addresses || [])
+                                                        .length > 1
+                                                "
+                                            >
+                                                <div
+                                                    v-for="i in item.addresses ||
+                                                    []"
+                                                    :key="i.address"
+                                                    class="item"
+                                                >
+                                                    <a-badge
+                                                        :color="getColor(i)"
+                                                    />{{ i.address }}
+                                                </div>
+                                            </div>
+                                            <div
+                                                v-for="i in (
+                                                    item.addresses || []
+                                                ).slice(0, 1)"
+                                                :key="i.address"
+                                                class="item"
+                                            >
+                                                <a-badge
+                                                    :color="getColor(i)"
+                                                    :text="i.address"
+                                                />
+                                                <span
+                                                    v-if="
+                                                        (item.addresses || [])
+                                                            .length > 1
+                                                    "
+                                                    >...</span
+                                                >
+                                            </div>
+                                        </a-tooltip>
+                                    </div>
+                                </template>
+                            </access-card>
+                        </a-col>
+                    </a-row>
+                    <a-empty v-else description="暂无数据" />
+                </div>
+            </div>
+            <div class="steps-box" v-else-if="current === 1">
+                <div class="alert">
+                    <AIcon type="InfoCircleOutlined" />
+                    使用选择的消息协议，对网络组件通信数据进行编解码、认证等操作
+                </div>
+                <div class="search">
+                    <a-input-search
+                        allowClear
+                        placeholder="请输入"
+                        style="width: 300px"
+                        @search="procotolSearch"
+                    />
+                    <PermissionButton
+                        type="primary"
+                        @click="addProcotol"
+                        hasPermission="link/Protocol:add"
+                    >
+                        <template #icon><AIcon type="PlusOutlined" /></template>
+                        新增
+                    </PermissionButton>
+                </div>
+                <div class="card-item">
+                    <a-row :gutter="[24, 24]" v-if="procotolList.length > 0">
+                        <a-col
+                            :span="8"
+                            v-for="item in procotolList"
+                            :key="item?.id"
+                        >
+                            <access-card
+                                @checkedChange="procotolChange"
+                                :checked="procotolCurrent"
+                                :data="item"
+                            >
+                            </access-card>
+                        </a-col>
+                    </a-row>
+                    <a-empty v-else description="暂无数据" />
+                </div>
+            </div>
+            <div class="steps-box" v-else>
+                <div
+                    class="card-last"
+                    :style="`max-height:${
+                        clientHeight > 900 ? 750 : clientHeight * 0.7
+                    }px`"
+                >
+                    <a-row :gutter="[24, 24]">
+                        <a-col :span="12">
+                            <title-component data="基本信息" />
+                            <div>
+                                <a-form
+                                    ref="formRef"
+                                    :model="formData"
+                                    layout="vertical"
+                                >
+                                    <a-form-item
+                                        label="名称"
+                                        v-bind="validateInfos.name"
+                                    >
+                                        <a-input
+                                            v-model:value="formData.name"
+                                            allowClear
+                                            placeholder="请输入名称"
+                                        />
+                                    </a-form-item>
+                                    <a-form-item
+                                        label="说明"
+                                        v-bind="validateInfos.description"
+                                    >
+                                        <a-textarea
+                                            placeholder="请输入说明"
+                                            :rows="4"
+                                            v-model:value="formData.description"
+                                            show-count
+                                            :maxlength="200"
+                                        />
+                                    </a-form-item>
+                                </a-form>
+                            </div>
+                        </a-col>
+                        <a-col :span="12">
+                            <div class="config-right">
+                                <div class="config-right-item">
+                                    <div class="config-right-item-title">
+                                        接入方式
+                                    </div>
+                                    <div class="config-right-item-context">
+                                        {{ provider.name }}
+                                    </div>
+                                    <div class="config-right-item-context">
+                                        {{ provider.description }}
+                                    </div>
+                                </div>
+                                <div class="config-right-item">
+                                    <div class="config-right-item-title">
+                                        消息协议
+                                    </div>
+                                    <div class="config-right-item-context">
+                                        {{
+                                            procotolList.find(
+                                                (i) => i.id === procotolCurrent,
+                                            ).name
+                                        }}
+                                    </div>
+                                    <div
+                                        class="config-right-item-context"
+                                        v-if="config.document"
+                                    >
+                                        <Markdown :source="config.document" />
+                                    </div>
+                                </div>
+                                <div
+                                    class="config-right-item"
+                                    v-if="getNetworkCurrent()"
+                                >
+                                    <div class="config-right-item-title">
+                                        网络组件
+                                    </div>
+                                    <div
+                                        v-for="i in getNetworkCurrentData()"
+                                        :key="i.address"
+                                    >
+                                        <a-badge
+                                            :color="getColor(i)"
+                                            :text="i.address"
+                                        />
+                                    </div>
+                                </div>
+                                <div
+                                    class="config-right-item"
+                                    v-if="
+                                        config.routes &&
+                                        config.routes.length > 0
+                                    "
+                                >
+                                    <div class="config-right-item-title">
+                                        {{
+                                            data.provider ===
+                                                'mqtt-server-gateway' ||
+                                            data.provider ===
+                                                'mqtt-client-gateway'
+                                                ? 'topic'
+                                                : 'URL信息'
+                                        }}
+                                    </div>
+                                    <a-table
+                                        :pagination="false"
+                                        :rowKey="generateUUID()"
+                                        :data-source="config.routes || []"
+                                        bordered
+                                        :columns="
+                                            config.id === 'MQTT'
+                                                ? columnsMQTT
+                                                : columnsHTTP
+                                        "
+                                        :scroll="{ y: 300 }"
+                                    >
+                                        <template
+                                            #bodyCell="{ column, text, record }"
+                                        >
+                                            <template
+                                                v-if="
+                                                    column.dataIndex ===
+                                                    'stream'
+                                                "
+                                            >
+                                                <span>{{
+                                                    getStream(record)
+                                                }}</span>
+                                            </template>
+                                        </template>
+                                    </a-table>
+                                </div>
+                            </div>
+                        </a-col>
+                    </a-row>
+                </div>
+            </div>
+        </div>
+        <div class="steps-action">
+            <a-button
+                v-if="[0, 1].includes(current)"
+                type="primary"
+                style="margin-right: 8px"
+                @click="next"
+            >
+                下一步
+            </a-button>
+            <PermissionButton
+                v-if="current === 2 && view === 'false'"
+                type="primary"
+                style="margin-right: 8px"
+                @click="saveData"
+                :hasPermission="`link/AccessConfig:${
+                    id === ':id' ? 'add' : 'update'
+                }`"
+            >
+                保存
+            </PermissionButton>
+            <a-button
+                v-if="type === 'child-device' ? current > 1 : current > 0"
+                @click="prev"
+            >
+                上一步
+            </a-button>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup name="AccessNetwork">
+import {
+    getNetworkList,
+    getProtocolList,
+    getConfigView,
+    save,
+    update,
+    getChildConfigView,
+} from '@/api/link/accessConfig';
+import {
+    descriptionList,
+    NetworkTypeMapping,
+    ProtocolMapping,
+    ColumnsMQTT,
+    ColumnsHTTP,
+} from '../../data';
+import AccessCard from '../AccessCard/index.vue';
+import { message, Form } from 'ant-design-vue';
+import type { FormInstance, TableColumnType } from 'ant-design-vue';
+import Markdown from 'vue3-markdown-it';
+import { useMenuStore } from 'store/menu';
+
+const menuStory = useMenuStore();
+function generateUUID() {
+    var d = new Date().getTime();
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(
+        /[xy]/g,
+        function (c) {
+            var r = (d + Math.random() * 16) % 16 | 0;
+            d = Math.floor(d / 16);
+            return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);
+        },
+    );
+}
+
+const props = defineProps({
+    provider: {
+        type: Object,
+        default: () => {},
+    },
+    data: {
+        type: Object,
+        default: () => {},
+    },
+});
+
+const clientHeight = document.body.clientHeight;
+const type = props.provider.channel;
+const route = useRoute();
+const view = route.query.view as string;
+const id = route.params.id as string;
+
+const formRef = ref<FormInstance>();
+const useForm = Form.useForm;
+
+const current = ref(0);
+const stepCurrent = ref(0);
+const steps = ref(['网络组件', '消息协议', '完成']);
+const networkList: any = ref([]);
+const allNetworkList: any = ref([]);
+const procotolList = ref([]);
+const allProcotolList = ref([]);
+const networkCurrent: any = ref('');
+const procotolCurrent: any = ref('');
+const config: any = ref({});
+const columnsMQTT = ref(<TableColumnType>[]);
+const columnsHTTP = ref(<TableColumnType>[]);
+const formData = ref({
+    name: '',
+    description: '',
+});
+
+const { resetFields, validate, validateInfos } = useForm(
+    formData,
+    reactive({
+        name: [
+            { required: true, message: '请输入名称', trigger: 'blur' },
+            { max: 64, message: '最多可输入64个字符' },
+        ],
+        description: [{ max: 200, message: '最多可输入200个字符' }],
+    }),
+);
+
+const queryNetworkList = async (id: string, include: string, data = {}) => {
+    const resp = await getNetworkList(
+        NetworkTypeMapping.get(id),
+        include,
+        data,
+    );
+    if (resp.status === 200) {
+        networkList.value = resp.result;
+    }
+};
+
+const queryProcotolList = async (id: string, params = {}) => {
+    const resp = await getProtocolList(ProtocolMapping.get(id), {
+        ...params,
+        'sorts[0].name': 'createTime',
+        'sorts[0].order': 'desc',
+    });
+    if (resp.status === 200) {
+        procotolList.value = resp.result;
+        allProcotolList.value = resp.result;
+    }
+};
+
+const addNetwork = () => {
+    const url = menuStory.menus['link/Type/Detail']?.path;
+    const tab = window.open(
+        `${window.location.origin + window.location.pathname}#${url}?type=${
+            NetworkTypeMapping.get(props.provider?.id) || ''
+        }`,
+    );
+    tab.onTabSaveSuccess = (value) => {
+        if (value.success) {
+            networkCurrent.value = value.result.id;
+            queryNetworkList(props.provider?.id, networkCurrent.value || '');
+        }
+    };
+};
+
+const addProcotol = () => {
+    const url = menuStory.menus['link/Protocol']?.path;
+    const tab = window.open(
+        `${window.location.origin + window.location.pathname}#${url}?save=true`,
+    );
+    tab.onTabSaveSuccess = (value) => {
+        if (value.success) {
+            procotolCurrent.value = value.result?.id;
+            queryProcotolList(props.provider?.id);
+        }
+    };
+};
+
+const getNetworkCurrent = () =>
+    networkList.value.find((i) => i.id === networkCurrent) &&
+    (networkList.value.find((i) => i.id === networkCurrent).addresses || [])
+        .length > 0;
+const getNetworkCurrentData = () =>
+    getNetworkCurrent()
+        ? networkList.value.find((i) => i.id === networkCurrent).addresses
+        : [];
+
+const getColor = (i) => (i.health === -1 ? 'red' : 'green');
+
+const getStream = (record: any) => {
+    let stream = '';
+    if (record.upstream && record.downstream) stream = '上行、下行';
+    else if (record.upstream) stream = '上行';
+    else if (record.downstream) stream = '下行';
+    return stream;
+};
+
+const checkedChange = (id: string) => {
+    networkCurrent.value = id;
+};
+
+const networkSearch = (value: string) => {
+    if (value) {
+        networkList.value = allNetworkList.value.filter(
+            (i: any) =>
+                i.name &&
+                i.name.toLocaleLowerCase().includes(value.toLocaleLowerCase()),
+        );
+    } else {
+        networkList.value = allNetworkList.value;
+    }
+};
+const procotolChange = (id: string) => {
+    if (!props.data.id) {
+        procotolCurrent.value = id;
+    }
+};
+
+const procotolSearch = (value: string) => {
+    if (value) {
+        const list = allProcotolList.value.filter((i: any) => {
+            return (
+                i.name &&
+                i.name.toLocaleLowerCase().includes(value.toLocaleLowerCase())
+            );
+        });
+        procotolList.value = list;
+    } else {
+        procotolList.value = allProcotolList.value;
+    }
+};
+
+const saveData = () => {
+    validate()
+        .then(async (values) => {
+            const params = {
+                ...props.data,
+                ...values,
+                protocol: procotolCurrent.value,
+                channel: 'network', // 网络组件
+                channelId: networkCurrent.value,
+            };
+            const resp =
+                id === ':id'
+                    ? await save(params)
+                    : await update({
+                          ...params,
+                          id,
+                          provider: props.provider.id,
+                          transport:
+                              props.provider?.id === 'child-device'
+                                  ? 'Gateway'
+                                  : ProtocolMapping.get(props.provider.id),
+                      });
+            if (resp.status === 200) {
+                message.success('操作成功！');
+                history.back();
+            }
+        })
+        .catch((err) => {});
+};
+
+const next = async () => {
+    if (current.value === 0) {
+        if (!networkCurrent.value) {
+            message.error('请选择网络组件！');
+        } else {
+            queryProcotolList(props.provider.id);
+            current.value = current.value + 1;
+        }
+    } else if (current.value === 1) {
+        if (!procotolCurrent.value) {
+            message.error('请选择消息协议！');
+        } else {
+            const resp =
+                type !== 'child-device'
+                    ? await getConfigView(
+                          procotolCurrent.value,
+                          ProtocolMapping.get(props.provider.id),
+                      )
+                    : await getChildConfigView(procotolCurrent.value);
+            if (resp.status === 200) {
+                config.value = resp.result;
+                console.log(222, config.value);
+
+                current.value = current.value + 1;
+                const Group = {
+                    title: '分组',
+                    dataIndex: 'group',
+                    key: 'group',
+                    ellipsis: true,
+                    align: 'center',
+                    width: 100,
+                    customCell: (record: any, rowIndex: number) => {
+                        const obj = {
+                            children: record,
+                            rowSpan: 0,
+                        };
+                        const list = config.value?.routes || [];
+
+                        const arr = list.filter(
+                            (res: any) => res.group === record.group,
+                        );
+
+                        const isRowIndex =
+                            rowIndex === 0 ||
+                            list[rowIndex - 1].group !== record.group;
+                        isRowIndex && (obj.rowSpan = arr.length);
+
+                        return obj;
+                    },
+                };
+                columnsMQTT.value = [Group, ...ColumnsMQTT];
+                columnsHTTP.value = [Group, ...ColumnsHTTP];
+            }
+        }
+    }
+};
+const prev = () => {
+    current.value = current.value - 1;
+};
+
+onMounted(() => {
+    if (props.data && props.data.id) {
+        if (props.data.provider !== 'child-device') {
+            procotolCurrent.value = props.data.protocol;
+            current.value = 0;
+            networkCurrent.value = props.data.channelId;
+            queryNetworkList(props.provider.id, networkCurrent.value);
+            procotolCurrent.value = props.data.protocol;
+            steps.value = ['网络组件', '消息协议', '完成'];
+        } else {
+            steps.value = ['消息协议', '完成'];
+            current.value = 1;
+            queryProcotolList(props.provider.id);
+        }
+    } else {
+        if (props.provider?.id) {
+            if (type !== 'child-device') {
+                queryNetworkList(props.provider.id, '');
+                steps.value = ['网络组件', '消息协议', '完成'];
+                current.value = 0;
+            } else {
+                steps.value = ['消息协议', '完成'];
+                current.value = 1;
+                queryProcotolList(props.provider.id);
+            }
+        }
+    }
+});
+
+onMounted(() => {
+    if (id !== ':id') {
+        procotolCurrent.value = props.data.protocol;
+        formData.value = {
+            name: props.data.name,
+            description: props.data.description,
+        };
+    }
+});
+
+watch(
+    current,
+    (v) => {
+        stepCurrent.value = type === 'child-device' ? v - 1 : v;
+    },
+    {
+        deep: true,
+        immediate: true,
+    },
+);
+</script>
+
+<style lang="less" scoped>
+.steps-content {
+    margin: 20px;
+}
+.steps-box {
+    min-height: 400px;
+    .card-item {
+        padding-right: 5px;
+        max-height: 480px;
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
+    .card-last {
+        padding-right: 5px;
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
+}
+.steps-action {
+    width: 100%;
+    margin-top: 24px;
+    margin-left: 20px;
+}
+.alert {
+    height: 40px;
+    padding-left: 10px;
+    color: rgba(0, 0, 0, 0.55);
+    line-height: 40px;
+    background-color: #f6f6f6;
+}
+.search {
+    display: flex;
+    margin: 15px 0;
+    justify-content: space-between;
+}
+
+.other {
+    width: 100%;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .item {
+        width: 100%;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+}
+
+.config-right {
+    padding: 20px;
+    color: rgba(0, 0, 0, 0.8);
+    background: rgba(0, 0, 0, 0.04);
+
+    .config-right-item {
+        margin-bottom: 10px;
+
+        .config-right-item-title {
+            width: 100%;
+            margin-bottom: 10px;
+            font-weight: 600;
+        }
+
+        .config-right-item-context {
+            margin: 5px 0;
+            color: rgba(0, 0, 0, 0.8);
+        }
+    }
+}
+</style>
diff --git a/src/views/link/AccessConfig/components/Provider/index.vue b/src/views/link/AccessConfig/components/Provider/index.vue
index 3412f3f2..04390ba4 100644
--- a/src/views/link/AccessConfig/components/Provider/index.vue
+++ b/src/views/link/AccessConfig/components/Provider/index.vue
@@ -1,6 +1,6 @@
 <template>
-    <div v-for="items in dataSource" :key="items.type">
-        <a-card  class="card-items">
+    <div v-for="items in dataSource" :key="items.type" class="card-items">
+        <div class="card-items-container">
             <TitleComponent :data="items.title"></TitleComponent>
             <a-row :gutter="[24, 24]">
                 <a-col :span="12" v-for="item in items.list" :key="item.id">
@@ -8,7 +8,7 @@
                         <div class="box">
                             <div class="left">
                                 <div class="images">
-                                    <img :src="backMap.get(item.id)" />
+                                    <img :src="BackMap.get(item.id)" />
                                 </div>
                                 <div class="context">
                                     <div class="title">
@@ -30,13 +30,13 @@
                     </div>
                 </a-col>
             </a-row>
-        </a-card>
+        </div>
     </div>
 </template>
 
 <script lang="ts" setup name="AccessConfigProvider">
 import TitleComponent from '@/components/TitleComponent/index.vue';
-import { getImage } from '@/utils/comm';
+import { BackMap } from '../../data';
 
 const props = defineProps({
     dataSource: {
@@ -47,32 +47,16 @@ const props = defineProps({
 
 const emit = defineEmits(['onClick']);
 
-const backMap = new Map();
-backMap.set('mqtt-server-gateway', getImage('/access/mqtt.png'));
-backMap.set('websocket-server', getImage('/access/websocket.png'));
-backMap.set('modbus-tcp', getImage('/access/modbus.png'));
-backMap.set('coap-server-gateway', getImage('/access/coap.png'));
-backMap.set('tcp-server-gateway', getImage('/access/tcp.png'));
-backMap.set('Ctwing', getImage('/access/ctwing.png'));
-backMap.set('child-device', getImage('/access/child-device.png'));
-backMap.set('opc-ua', getImage('/access/opc-ua.png'));
-backMap.set('http-server-gateway', getImage('/access/http.png'));
-backMap.set('fixed-media', getImage('/access/video-device.png'));
-backMap.set('udp-device-gateway', getImage('/access/udp.png'));
-backMap.set('OneNet', getImage('/access/onenet.png'));
-backMap.set('gb28181-2016', getImage('/access/gb28181.png'));
-backMap.set('mqtt-client-gateway', getImage('/access/mqtt-broke.png'));
-backMap.set('edge-child-device', getImage('/access/child-device.png'));
-backMap.set('official-edge-gateway', getImage('/access/edge.png'));
-
 const click = (value: object) => {
     emit('onClick', value);
 };
 </script>
 
 <style lang="less" scoped>
-.card-items{
+.card-items {
     margin-bottom: 24px;
+    .card-items-container {
+    }
 }
 .provider {
     position: relative;
@@ -93,9 +77,6 @@ const click = (value: object) => {
         background-image: url('/public/images/access/rectangle.png');
         background-repeat: no-repeat;
         background-size: 100% 100%;
-        // border: 1px #8da1f4 solid;
-        // border-bottom-left-radius: 10%;
-        // border-bottom-right-radius: 10%;
         content: ' ';
     }
 
@@ -109,7 +90,6 @@ const click = (value: object) => {
     align-items: center;
     justify-content: space-between;
     width: 100%;
-
     .left {
         display: flex;
         width: calc(100% - 70px);
diff --git a/src/views/link/AccessConfig/Detail/data.ts b/src/views/link/AccessConfig/data.ts
similarity index 63%
rename from src/views/link/AccessConfig/Detail/data.ts
rename to src/views/link/AccessConfig/data.ts
index 6a29f551..a584099e 100644
--- a/src/views/link/AccessConfig/Detail/data.ts
+++ b/src/views/link/AccessConfig/data.ts
@@ -1,3 +1,4 @@
+import { getImage } from '@/utils/comm';
 
 const ProtocolMapping = new Map();
 ProtocolMapping.set('websocket-server', 'WebSocket');
@@ -25,6 +26,23 @@ NetworkTypeMapping.set('mqtt-server-gateway', 'MQTT_SERVER');
 NetworkTypeMapping.set('tcp-server-gateway', 'TCP_SERVER');
 NetworkTypeMapping.set('official-edge-gateway', 'MQTT_SERVER');
 
+const BackMap = new Map();
+BackMap.set('mqtt-server-gateway', getImage('/access/mqtt.png'));
+BackMap.set('websocket-server', getImage('/access/websocket.png'));
+BackMap.set('modbus-tcp', getImage('/access/modbus.png'));
+BackMap.set('coap-server-gateway', getImage('/access/coap.png'));
+BackMap.set('tcp-server-gateway', getImage('/access/tcp.png'));
+BackMap.set('Ctwing', getImage('/access/ctwing.png'));
+BackMap.set('child-device', getImage('/access/child-device.png'));
+BackMap.set('opc-ua', getImage('/access/opc-ua.png'));
+BackMap.set('http-server-gateway', getImage('/access/http.png'));
+BackMap.set('fixed-media', getImage('/access/video-device.png'));
+BackMap.set('udp-device-gateway', getImage('/access/udp.png'));
+BackMap.set('OneNet', getImage('/access/onenet.png'));
+BackMap.set('gb28181-2016', getImage('/access/gb28181.png'));
+BackMap.set('mqtt-client-gateway', getImage('/access/mqtt-broke.png'));
+BackMap.set('edge-child-device', getImage('/access/child-device.png'));
+BackMap.set('official-edge-gateway', getImage('/access/edge.png'));
 
 const descriptionList = {
     'udp-device-gateway':
@@ -43,21 +61,21 @@ const descriptionList = {
         'CoAP是针对只有少量的内存空间和有限的计算能力提供的一种基于UDP的协议。便于低功耗或网络受限的设备与平台通信，仅支持设备和平台之间单对单的请求-响应模式。',
 };
 
-const columnsMQTT = [
-    {
-        title: '分组',
-        dataIndex: 'group',
-        key: 'group',
-        ellipsis: true,
-        align: 'center',
-        width: 100,
-        scopedSlots: { customRender: 'group' },
-    },
+const ColumnsMQTT = [
+    // {
+    //     title: '分组',
+    //     dataIndex: 'group',
+    //     key: 'group',
+    //     ellipsis: true,
+    //     align: 'center',
+    //     width: 100,
+    //     scopedSlots: { customRender: 'group' },
+    // },
     {
         title: 'topic',
         dataIndex: 'topic',
         key: 'topic',
-        scopedSlots: { customRender: 'topic' },
+        ellipsis: true,
     },
     {
         title: '上下行',
@@ -72,37 +90,58 @@ const columnsMQTT = [
         title: '说明',
         dataIndex: 'description',
         key: 'description',
-        scopedSlots: { customRender: 'description' },
-    },
-]
-
-const columnsHTTP = [
-    {
-        title: '分组',
-        dataIndex: 'group',
-        key: 'group',
         ellipsis: true,
-        width: 100,
-        scopedSlots: { customRender: 'group' },
-      },
-      {
+    },
+];
+
+const ColumnsHTTP = [
+    // {
+    //     title: '分组',
+    //     dataIndex: 'group',
+    //     key: 'group',
+    //     ellipsis: true,
+    //     width: 100,
+    //     scopedSlots: { customRender: 'group' },
+    // },
+    {
         title: '地址',
         dataIndex: 'address',
         key: 'address',
-        scopedSlots: { customRender: 'address' },
-      },
-      {
+        ellipsis: true,
+        // scopedSlots: { customRender: 'address' },
+    },
+    {
         title: '示例',
         dataIndex: 'example',
         key: 'example',
-        scopedSlots: { customRender: 'example' },
-      },
-      {
+        ellipsis: true,
+        // scopedSlots: { customRender: 'example' },
+    },
+    {
         title: '说明',
         dataIndex: 'description',
         key: 'description',
-        scopedSlots: { customRender: 'description' }
-      },
-]
+        ellipsis: true,
+        // scopedSlots: { customRender: 'description' },
+    },
+];
 
-export { NetworkTypeMapping, ProtocolMapping, descriptionList, columnsMQTT, columnsHTTP };
+const TiTlePermissionButtonStyle = {
+    padding: 0,
+    color: ' #1890ff !important',
+    'font-weight': 700,
+    'font-size': '16px',
+    overflow: 'hidden',
+    'text-overflow': 'ellipsis',
+    'white-space': 'nowrap',
+};
+
+export {
+    NetworkTypeMapping,
+    ProtocolMapping,
+    BackMap,
+    descriptionList,
+    ColumnsMQTT,
+    ColumnsHTTP,
+    TiTlePermissionButtonStyle,
+};
diff --git a/src/views/link/AccessConfig/index.vue b/src/views/link/AccessConfig/index.vue
index 851b6a78..b6c35571 100644
--- a/src/views/link/AccessConfig/index.vue
+++ b/src/views/link/AccessConfig/index.vue
@@ -11,12 +11,23 @@
                 :defaultParams="{
                     sorts: [{ name: 'createTime', order: 'desc' }],
                 }"
+                gridColumn="2"
+                gridColumns="[2]"
                 :params="params"
             >
                 <template #headerTitle>
-                    <a-button type="primary" @click="handlAdd"
-                        ><AIcon type="PlusOutlined" />新增</a-button
-                    >
+                    <a-space>
+                        <PermissionButton
+                            type="primary"
+                            @click="handlAdd"
+                            hasPermission="link/AccessConfig:add"
+                        >
+                            <template #icon
+                                ><AIcon type="PlusOutlined"
+                            /></template>
+                            新增
+                        </PermissionButton>
+                    </a-space>
                 </template>
                 <template #card="slotProps">
                     <CardBox
@@ -43,12 +54,15 @@
                         </template>
                         <template #content>
                             <div class="card-item-content">
-                                <h3
+                                <PermissionButton
+                                    type="link"
                                     @click="handlEye(slotProps.id)"
-                                    class="card-item-content-title card-item-content-title-a"
+                                    hasPermission="link/AccessConfig:view"
+                                    :style="TiTlePermissionButtonStyle"
                                 >
                                     {{ slotProps.name }}
-                                </h3>
+                                </PermissionButton>
+
                                 <a-row class="card-item-content-box">
                                     <a-col
                                         :span="12"
@@ -65,13 +79,7 @@
                                             "
                                         >
                                             <a-badge
-                                                :status="
-                                                    slotProps.channelInfo
-                                                        .addresses[0].health ===
-                                                    -1
-                                                        ? 'error'
-                                                        : 'success'
-                                                "
+                                                :status="getStatus(slotProps)"
                                             />
                                             <a-tooltip>
                                                 <template #title>{{
@@ -112,24 +120,12 @@
                                             <a-tooltip>
                                                 <template #title>
                                                     {{
-                                                        slotProps.description
-                                                            ? slotProps.description
-                                                            : providersList.find(
-                                                                  (item) =>
-                                                                      item.id ===
-                                                                      slotProps.provider,
-                                                              )?.description
+                                                        getDescription(
+                                                            slotProps,
+                                                        )
                                                     }}
                                                 </template>
-                                                {{
-                                                    slotProps.description
-                                                        ? slotProps.description
-                                                        : providersList.find(
-                                                              (item) =>
-                                                                  item.id ===
-                                                                  slotProps.provider,
-                                                          )?.description
-                                                }}
+                                                {{ getDescription(slotProps) }}
                                             </a-tooltip>
                                         </div>
                                     </a-col>
@@ -138,42 +134,24 @@
                         </template>
 
                         <template #actions="item">
-                            <a-tooltip
-                                v-bind="item.tooltip"
-                                :title="item.disabled && item.tooltip.title"
+                            <PermissionButton
+                                :disabled="item.disabled"
+                                :popConfirm="item.popConfirm"
+                                :tooltip="{
+                                    ...item.tooltip,
+                                }"
+                                @click="item.onClick"
+                                :hasPermission="'link/AccessConfig:' + item.key"
                             >
-                                <a-popconfirm
-                                    v-if="item.popConfirm"
-                                    v-bind="item.popConfirm"
-                                    :disabled="item.disabled"
-                                >
-                                    <a-button :disabled="item.disabled">
-                                        <AIcon
-                                            type="DeleteOutlined"
-                                            v-if="item.key === 'delete'"
-                                        />
-                                        <template v-else>
-                                            <AIcon :type="item.icon" />
-                                            <span>{{ item.text }}</span>
-                                        </template>
-                                    </a-button>
-                                </a-popconfirm>
+                                <AIcon
+                                    type="DeleteOutlined"
+                                    v-if="item.key === 'delete'"
+                                />
                                 <template v-else>
-                                    <a-button
-                                        :disabled="item.disabled"
-                                        @click="item.onClick"
-                                    >
-                                        <AIcon
-                                            type="DeleteOutlined"
-                                            v-if="item.key === 'delete'"
-                                        />
-                                        <template v-else>
-                                            <AIcon :type="item.icon" />
-                                            <span>{{ item.text }}</span>
-                                        </template>
-                                    </a-button>
+                                    <AIcon :type="item.icon" />
+                                    <span>{{ item?.text }}</span>
                                 </template>
-                            </a-tooltip>
+                            </PermissionButton>
                         </template>
                     </CardBox>
                 </template>
@@ -198,12 +176,14 @@ import {
     deploy,
 } from '@/api/link/accessConfig';
 import { message } from 'ant-design-vue';
+import { useMenuStore } from 'store/menu';
+import { TiTlePermissionButtonStyle } from './data';
 
+const menuStory = useMenuStore();
 const tableRef = ref<Record<string, any>>({});
-const router = useRouter();
 const params = ref<Record<string, any>>({});
 
-let providersList = ref([]);
+let providersList = ref<Record<string, any>>([]);
 
 const statusMap = new Map();
 statusMap.set('enabled', 'success');
@@ -225,8 +205,6 @@ const columns = [
         key: 'provider',
         search: {
             type: 'select',
-            // options: providersList,
-            // options: getProvidersList
             options: async () => {
                 const res = await getProviders();
                 return (res?.result || []).map((item) => ({
@@ -275,9 +253,10 @@ const columns = [
 const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
     if (!data) return [];
     const state = data.state.value;
+    const stateText = state === 'enabled' ? '禁用' : '启用';
     return [
         {
-            key: 'edit',
+            key: 'update',
             text: '编辑',
             tooltip: {
                 title: '编辑',
@@ -289,13 +268,13 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
         },
         {
             key: 'action',
-            text: state === 'enabled' ? '禁用' : '启用',
+            text: stateText,
             tooltip: {
-                title: state === 'enabled' ? '禁用' : '启用',
+                title: stateText,
             },
             icon: state === 'enabled' ? 'StopOutlined' : 'CheckCircleOutlined',
             popConfirm: {
-                title: `确认${state === 'enabled' ? '禁用' : '启用'}?`,
+                title: `确认${stateText}?`,
                 onConfirm: async () => {
                     let res =
                         state === 'enabled'
@@ -342,27 +321,29 @@ const getProvidersList = async () => {
 getProvidersList();
 
 const handlAdd = () => {
-    // router.push('/link/accessConfig/detail/add/new');
-    router.push({
-        path: `/iot/link/accessConfig/detail/:id`,
-        query: { view: false },
-    });
+    menuStory.jumpPage(
+        `link/AccessConfig/Detail`,
+        { id: ':id' },
+        { view: false },
+    );
 };
 const handlEdit = (id: string) => {
-    // router.push(`/link/accessConfig/detail/edit/${id}`);
-    router.push({
-        path: `/iot/link/accessConfig/detail/${id}`,
-        query: { view: false },
-    });
+    menuStory.jumpPage(`link/AccessConfig/Detail`, { id }, { view: false });
 };
 const handlEye = (id: string) => {
-    // router.push(`/link/accessConfig/detail/view/${id}`);
-    router.push({
-        path: `/iot/link/accessConfig/detail/${id}`,
-        query: { view: true },
-    });
+    menuStory.jumpPage(`link/AccessConfig/Detail`, { id }, { view: true });
 };
 
+const getDescription = (slotProps: Record<string, any>) =>
+    slotProps.description
+        ? slotProps.description
+        : providersList?.find(
+              (item: Record<string, any>) => item.id === slotProps.provider,
+          )?.description;
+
+const getStatus = (slotProps: Record<string, any>) =>
+    slotProps.channelInfo.addresses[0].health === -1 ? 'error' : 'success';
+
 /**
  * 搜索
  * @param params
@@ -370,18 +351,6 @@ const handlEye = (id: string) => {
 const handleSearch = (e: any) => {
     params.value = e;
 };
-
-// const handlAdd = () => {
-//     router.push({
-//         path: '/link/accessConfig/detail/add',
-//         query: {
-//             id: '1610475400026861568',
-//         },
-//     });
-// };
-// const handlAdd = () => {
-//   router.push('/link/accessConfig/detail/add');
-// }
 </script>
 <style lang="less" scoped>
 .tableCardDisabled {
diff --git a/src/views/link/Protocol/index.vue b/src/views/link/Protocol/index.vue
index 03e34035..6a772dcb 100644
--- a/src/views/link/Protocol/index.vue
+++ b/src/views/link/Protocol/index.vue
@@ -159,7 +159,7 @@ import _ from 'lodash';
 
 const tableRef = ref<Record<string, any>>({});
 const params = ref<Record<string, any>>({});
-
+const route = useRoute();
 const visible = ref(false);
 const current = ref({});
 
@@ -276,6 +276,14 @@ const saveChange = (value: object) => {
     }
 };
 
+watch(
+    () => route.query?.save,
+    (value) => {
+        value === 'true' && handlAdd();
+    },
+    { deep: true, immediate: true },
+);
+
 /**
  * 搜索
  * @param params
diff --git a/src/views/link/Type/Detail/index.vue b/src/views/link/Type/Detail/index.vue
index 6150e5ae..c56ded01 100644
--- a/src/views/link/Type/Detail/index.vue
+++ b/src/views/link/Type/Detail/index.vue
@@ -1032,11 +1032,10 @@ import { Store } from 'jetlinks-store';
 import MonacoEditor from '@/components/MonacoEditor/index.vue';
 
 const route = useRoute();
-const view = route.query.view as string;
+const NetworkType = route.query.type as string;
+const view = NetworkType ? 'false' : (route.query.view as string);
 const id = route.params.id as string;
-
 const activeKey = ref(['1']);
-
 const loading = ref(false);
 const formRef1 = ref<FormInstance>();
 const formRef2 = ref<FormInstance>();
@@ -1250,7 +1249,6 @@ watch(
         }
     },
     { deep: true },
-    // { deep: true, immediate: true },
 );
 
 watch(
@@ -1263,7 +1261,6 @@ watch(
         updateClustersListIndex();
     },
     { deep: true },
-    // { deep: true, immediate: true },
 );
 watch(
     () => dynamicValidateForm.cluster?.length,
@@ -1272,6 +1269,17 @@ watch(
     },
     { deep: true, immediate: true },
 );
+watch(
+    () => NetworkType,
+    (value) => {
+        if (value) {
+            const { cluster } = dynamicValidateForm;
+            formData.value.type = value;
+            cluster[0].configuration.host = '0.0.0.0';
+        }
+    },
+    { deep: true, immediate: true },
+);
 </script>
 
 <style lang="less" scoped>