Merge branch 'dev' of github.com:jetlinks/jetlinks-ui-vue into dev

.eslintrc.cjs

@@ -19,5 +19,8 @@ module.exports = {
 
     rules: {
         // override/add rules settings here, such as:
+    },
+    globals: {
+        NodeJS: 'readonly'
     }
 };

package.json

@@ -43,7 +43,7 @@
     "@commitlint/config-conventional": "^17.4.0",
     "@types/lodash-es": "^4.17.6",
     "@types/moment": "^2.13.0",
-    "@types/node": "^18.11.17",
+    "@types/node": "^18.14.0",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vuemap/unplugin-resolver": "^1.0.4",
     "autoprefixer": "^10.4.13",

src/api/comm.ts

@@ -27,4 +27,11 @@ export const deleteSearchHistory = (target:string, id:string) => server.remove<S
 /**
  * 获取当前系统版本
  */
-export const systemVersion = () => server.get<{edition?: string}>('/system/version')
+export const systemVersion = () => server.get<{edition?: string}>('/system/version')
+
+/**
+ * 聚合查询
+ * @param data 
+ * @returns 
+ */
+export const queryDashboard = (data: Record<string, any>) => server.post(`/dashboard/_multi`, data)

src/api/device/instance.ts

@@ -315,6 +315,31 @@ export const getGatewayDetail = (id: string) => server.get(`/gateway/device/${id
  */
 export const getUnit = () => server.get<UnitType[]>(`/protocol/units`)
 
+/**
+ * 执行功能
+ * @param deviceId 设备id
+ * @param functionId 功能id
+ * @param data 
+ * @returns 
+ */
+export const executeFunctions = (deviceId: string, functionId: string, data: any) => server.post(`/device/invoked/${deviceId}/function/${functionId}`, data)
+
+/**
+ * 读取属性
+ * @param deviceId 设备id
+ * @param data 
+ * @returns 
+ */
+export const readProperties = (deviceId: string, data: any) => server.post(`/device/instance/${deviceId}/properties/_read`, data)
+
+/**
+ * 设置属性
+ * @param deviceId 设备id
+ * @param data 
+ * @returns 
+ */
+export const settingProperties = (deviceId: string, data: any) => server.put(`/device/instance/${deviceId}/property`, data)
+
 /**
  * 设备功能-执行
  * @param id 设备id
@@ -322,4 +347,4 @@ export const getUnit = () => server.get<UnitType[]>(`/protocol/units`)
  * @param data 
  * @returns 
  */
- export const execute = (id: string, action: string, data: any) => server.post(`/device/invoked/${id}/function/${action}`, data)
+ export const execute = (id: string, action: string, data: any) => server.post(`/device/invoked/${id}/function/${action}`, data)

src/api/link/type.ts

@@ -30,3 +30,9 @@ export const allResources = () => server.get(`/network/resources/alive/_all`);
 
 export const certificates = () =>
     server.get(`/network/certificate/_query/no-paging?paging=false`);
+
+export const save = (data: Object) => server.post(`/network/config`, data);
+
+export const update = (data: Object) => server.patch(`/network/config`, data);
+
+export const detail = (id: string) => server.get(`/network/config/${id}`);

src/api/system/dataSource.ts

@@ -3,9 +3,22 @@ import server from '@/utils/request';
 
 // 获取数据源列表
 export const getDataSourceList_api = (data: object) => server.post(`/datasource/config/_query/`, data);
+// 获取数据源信息
+export const getDataSourceInfo_api = (id: string) => server.get(`/datasource/config/${id}`);
 
 // 获取数据库类型字典
 export const getDataTypeDict_api = () => server.get(`/datasource/config/types`);
 
 // 修改数据源状态
-export const changeStatus_api = (id:string, status:'_disable'|'_enable') => server.put(`/datasource/config/${id}/${status}`);
+export const changeStatus_api = (id: string, status: '_disable' | '_enable') => server.put(`/datasource/config/${id}/${status}`);
+// 新增/更新数据源
+export const saveDataSource_api = (data: any) => data.id ? server.patch(`datasource/config`, data) : server.post(`/datasource/config`, data)
+
+// 删除数据源
+export const delDataSource_api = (id: string) => server.remove(`/datasource/config/${id}`);
+// 获取左侧树
+export const rdbTree_api = (id: string) => server.get(`/datasource/rdb/${id}/tables?includeColumns=false`);
+// 获取右侧表格
+export const rdbTables_api = (id: string,key:string) => server.get(`/datasource/rdb/${id}/table/${key}`);
+// 保存表格
+export const saveTable_api = (id: string,data:object) => server.patch(`/datasource/rdb/${id}/table`,data);

src/components/MonacoEditor/index.vue

@@ -59,6 +59,20 @@ onMounted(() => {
         emit('update:modelValue', value);
     });
 });
+
+/**
+ * 代码格式化
+ */
+const editorFormat = () => {
+    if (!instance) return;
+    instance.getAction('editor.action.formatDocument')?.run();
+};
+
+watchEffect(() => {
+    setTimeout(() => {
+        editorFormat();
+    }, 300);
+});
 </script>
 
 <style lang="less" scoped>

src/utils/websocket.ts

@@ -0,0 +1,127 @@
+import { Observable } from 'rxjs'
+import { BASE_API_PATH } from '@/utils/variable';
+import { notification } from 'ant-design-vue';
+import { getToken } from '@/utils/comm';
+
+let ws: any = null
+let count = 0 // 重连计数
+let timer: NodeJS.Timeout = null
+let lockReconnect = false // 避免重复连接
+const total = 100 // 重连总次数
+const subs = {}
+const timeout = 5000
+const tempQueue: any[] = [] // websocket未连接上时，缓存消息列
+
+export const initWebSocket = () => {
+    if (ws) {
+        return ws
+    }
+    const token = getToken()
+    const url = `${document.location.protocol.replace('http', 'ws')}//${document.location.host}${BASE_API_PATH}/messaging/${token}?:X_Access_Token=${token}`;
+    if (count < total) {
+        count += 1
+        ws = new WebSocket(url)
+
+        ws.onopen = () => {
+            count = 0
+            timer = setInterval(heartCheck, 2000)
+            if (tempQueue.length > 0) {
+                for (let i = tempQueue.length - 1; i >= 0; i--) {
+                    ws.send(tempQueue[i])
+                    tempQueue.splice(i, 1)
+                }
+            }
+        }
+
+        ws.onclose = () => {
+            console.log('onerror', count)
+            ws = null
+            reconnect()
+        }
+
+        ws.onmessage = (msg: Record<string, any>) => {
+            const data = JSON.parse(msg.data)
+
+            if (data.type === 'error') {
+                notification.error({ key: 'wserr', message: data.message })
+            }
+
+            if (subs[data.requestId]) {
+                if (data.type === 'complete') {
+                    subs[data.requestId].forEach((item: Record<string, any>) => {
+                        item.complete()
+                    })
+                } else if (data.type === 'result') {
+                    subs[data.requestId].forEach((element: Record<string, any>) => {
+                        element.next(data)
+                    })
+                }
+            }
+        }
+
+        ws.onerror = () => {
+            console.log('onerror', count)
+            ws = null
+            reconnect()
+        }
+
+        return ws
+    }
+}
+
+export const getWebSocket = (id: string, topic: string, parameter: Record<string, any>) => new Observable(subscriber => {
+    if (!subs[id]) {
+        subs[id] = []
+    }
+
+    subs[id].push({
+        next(val: Record<string, any>) {
+            subscriber.next(val)
+        },
+        complete() {
+            subscriber.complete()
+        }
+    })
+
+    const msg = JSON.stringify({ id, topic, parameter, type: 'sub' })
+    const thisWs = initWebSocket()
+    if (thisWs) {
+        if (thisWs.readyState === WebSocket.OPEN) {
+            thisWs.send(msg)
+        } else {
+            tempQueue.push(msg)
+        }
+    }
+
+    return () => {
+        const unsub = JSON.stringify({ id, type: 'unsub' })
+        delete subs[id]
+        if (thisWs) {
+            thisWs.send(unsub)
+        }
+    }
+})
+
+/**
+ * 重连
+ */
+function reconnect() {
+    timer && clearInterval(timer)
+    if (lockReconnect) {
+        return
+    }
+    lockReconnect = true
+    timer = setTimeout(() => {
+        initWebSocket()
+        lockReconnect = false
+    }, timeout * count)
+}
+
+/**
+ * 心跳检测
+ */
+function heartCheck() {
+    if (ws) {
+        ws.send(JSON.stringify({ type: 'ping' }))
+    }
+}

src/views/device/Instance/Detail/Diagnose/Message/Function/EditTable.vue

@@ -72,18 +72,9 @@ const columns = [
     },
 ];
 
-// const dataSource = ref<Record<any, any>[]>(_props.modelValue || []);
-
 const dataSource = computed({
     get: () => {
-        return _props.modelValue || {
+        return _props.modelValue || []
-            messageType: undefined,
-            message: {
-                properties: undefined,
-                functionId: undefined,
-                inputs: []
-            }
-        }
     },
     set: (val: any) => {
         _emit('update:modelValue', val);

src/views/device/Instance/Detail/Diagnose/Message/Function/index.vue

@@ -1,60 +1,118 @@
 <template>
     <div class="function">
-        <a-form 
+        <a-form :layout="'vertical'" ref="formRef" :model="modelRef">
-            :layout="'vertical'"
-            ref="formRef"
-            :model="modelRef"
-        >
             <a-row :gutter="24">
                 <a-col :span="6">
-                    <a-form-item name="messageType" :rules="{
+                    <a-form-item
-                        required: true,
+                        name="type"
-                        message: '请选择',
+                        :rules="{
-                    }">
+                            required: true,
-                        <a-select placeholder="请选择" v-model:value="modelRef.messageType" show-search :filter-option="filterOption">
+                            message: '请选择',
-                            <a-select-option value="READ_PROPERTY">读取属性</a-select-option>
+                        }"
-                            <a-select-option value="WRITE_PROPERTY">修改属性</a-select-option>
+                    >
-                            <a-select-option value="INVOKE_FUNCTION">调用功能</a-select-option>
+                        <a-select
+                            placeholder="请选择"
+                            v-model:value="modelRef.type"
+                            show-search
+                            :filter-option="filterOption"
+                        >
+                            <a-select-option value="READ_PROPERTY"
+                                >读取属性</a-select-option
+                            >
+                            <a-select-option value="WRITE_PROPERTY"
+                                >修改属性</a-select-option
+                            >
+                            <a-select-option value="INVOKE_FUNCTION"
+                                >调用功能</a-select-option
+                            >
                         </a-select>
                     </a-form-item>
                 </a-col>
-                <a-col :span="6" v-if="['READ_PROPERTY','WRITE_PROPERTY'].includes(modelRef.messageType)">
+                <a-col
-                    <a-form-item :name="['message', 'properties']" :rules="{
+                    :span="6"
-                        required: true,
+                    v-if="
-                        message: '请选择属性',
+                        ['READ_PROPERTY', 'WRITE_PROPERTY'].includes(
-                    }">
+                            modelRef.type,
-                        <a-select placeholder="请选择属性" v-model:value="modelRef.message.properties" show-search :filter-option="filterOption">
+                        )
-                            <a-select-option v-for="i in (metadata?.properties) || []" :key="i.id" :value="i.id" :label="i.name">{{i.name}}</a-select-option>
+                    "
+                >
+                    <a-form-item
+                        name="properties"
+                        :rules="{
+                            required: true,
+                            message: '请选择属性',
+                        }"
+                    >
+                        <a-select
+                            placeholder="请选择属性"
+                            v-model:value="modelRef.properties"
+                            show-search
+                            :filter-option="filterOption"
+                        >
+                            <a-select-option
+                                v-for="i in metadata?.properties || []"
+                                :key="i.id"
+                                :value="i.id"
+                                :label="i.name"
+                                >{{ i.name }}</a-select-option
+                            >
                         </a-select>
                     </a-form-item>
                 </a-col>
-                <a-col :span="6" v-if="modelRef.messageType === 'WRITE_PROPERTY'">
+                <a-col :span="6" v-if="modelRef.type === 'WRITE_PROPERTY'">
-                    <a-form-item :name="['message', 'value']" :rules="{
+                    <a-form-item
-                        required: true,
+                        name="propertyValue"
-                        message: '请输入值',
+                        :rules="{
-                    }">
+                            required: true,
-                        <a-input />
+                            message: '请输入值',
+                        }"
+                    >
+                        <a-input v-model:value="propertyValue" />
                     </a-form-item>
                 </a-col>
-                <a-col :span="6" v-if="modelRef.messageType === 'INVOKE_FUNCTION'">
+                <a-col :span="6" v-if="modelRef.type === 'INVOKE_FUNCTION'">
-                    <a-form-item :name="['message', 'functionId']" :rules="{
+                    <a-form-item
-                        required: true,
+                        name="function"
-                        message: '请选择功能',
+                        :rules="{
-                    }">
+                            required: true,
-                        <a-select placeholder="请选择功能" v-model:value="modelRef.message.functionId" show-search :filter-option="filterOption" @change="funcChange">
+                            message: '请选择功能',
-                            <a-select-option v-for="i in (metadata?.functions) || []" :key="i.id" :value="i.id" :label="i.name">{{i.name}}</a-select-option>
+                        }"
+                    >
+                        <a-select
+                            placeholder="请选择功能"
+                            v-model:value="modelRef.function"
+                            show-search
+                            :filter-option="filterOption"
+                            @change="funcChange"
+                        >
+                            <a-select-option
+                                v-for="i in metadata?.functions || []"
+                                :key="i.id"
+                                :value="i.id"
+                                :label="i.name"
+                                >{{ i.name }}</a-select-option
+                            >
                         </a-select>
                     </a-form-item>
                 </a-col>
                 <a-col :span="4">
                     <a-button type="primary" @click="saveBtn">发送</a-button>
                 </a-col>
-                <a-col :span="24" v-if="modelRef.messageType === 'INVOKE_FUNCTION' && modelRef.message.functionId">
+                <a-col
-                    <a-form-item :name="['message', 'inputs']" label="参数列表" :rules="{
+                    :span="24"
-                        required: true,
+                    v-if="
-                        message: '请输入参数列表',
+                        modelRef.type === 'INVOKE_FUNCTION' && modelRef.function && modelRef.inputs.length
-                    }">
+                    "
-                        <EditTable v-model="modelRef.message.inputs"/>
+                >
+                    <a-form-item
+                        name="inputs"
+                        label="参数列表"
+                        :rules="{
+                            required: true,
+                            message: '请输入参数列表',
+                        }"
+                    >
+                        <EditTable v-model="modelRef.inputs" />
                     </a-form-item>
                 </a-col>
             </a-row>
@@ -64,9 +122,14 @@
 
 <script lang="ts" setup>
 import { useInstanceStore } from '@/store/instance';
-import EditTable from './EditTable.vue'
+import EditTable from './EditTable.vue';
+import {
+    executeFunctions,
+    readProperties,
+    settingProperties,
+} from '@/api/device/instance';
 
-const instanceStore = useInstanceStore()
+const instanceStore = useInstanceStore();
 
 const formRef = ref();
 
@@ -80,48 +143,78 @@ type Emits = {
 const emit = defineEmits<Emits>();
 
 const modelRef = reactive({
-    messageType: undefined,
+    type: undefined,
-    message: {
+    properties: undefined,
-        properties: undefined,
+    function: undefined,
-        functionId: undefined,
+    inputs: [],
-        inputs: []
+    propertyValue: undefined,
-    }
+});
-})
 
 const metadata = computed(() => {
-    return JSON.parse(instanceStore.current?.metadata || '{}')
+    return JSON.parse(instanceStore.current?.metadata || '{}');
-})
+});
 
 const funcChange = (val: string) => {
-    if(val){
+    if (val) {
-        const arr = metadata.value?.functions.find((item: any) => item.id === val)?.inputs || []
+        const arr =
+            metadata.value?.functions.find((item: any) => item.id === val)
+                ?.inputs || [];
         const list = arr.map((item: any) => {
             return {
                 id: item.id,
                 name: item.name,
                 value: undefined,
                 valueType: item?.valueType?.type,
-            }
+            };
-        })
+        });
-        modelRef.message.inputs = list
+        modelRef.inputs = list;
     }
-}
+};
 
 const saveBtn = () => {
-    formRef.value.validate()
+    formRef.value.validate().then(async () => {
-    .then(() => {
+        const values = toRaw(modelRef);
-        console.log(toRaw(modelRef))
+        let _inputs: any[] = [];
-    })
+        if (modelRef.inputs.length) {
-}
+            _inputs = modelRef.inputs.filter((i: any) => !i.value);
-
+            if (_inputs.length) {
-defineExpose({ saveBtn })
+                return;
+            }
+        }
 
+        if (values.type === 'INVOKE_FUNCTION') {
+            const list = (modelRef.inputs || []).filter((it: any) => !!it.value);
+            const obj = {};
+            list.map((it: any) => {
+                obj[it.id] = it.value;
+            });
+            await executeFunctions(
+                instanceStore.current.id || '',
+                values?.function || '',
+                {
+                    ...obj,
+                },
+            );
+        } else {
+            if (values.type === 'READ_PROPERTY') {
+                await readProperties(instanceStore.current?.id || '', [
+                    values.properties,
+                ]);
+            } else {
+                await settingProperties(instanceStore.current?.id || '', {
+                    [values.properties || '']: values.propertyValue,
+                });
+            }
+        }
+    });
+};
 
+defineExpose({ saveBtn });
 </script>
 
 <style lang="less" scoped>
 .function {
-  padding: 15px;
+    padding: 15px;
-  background-color: #e7eaec;
+    background-color: #e7eaec;
 }
 </style>

src/views/device/Instance/Detail/Diagnose/Message/index.vue

@@ -24,7 +24,7 @@
         <a-col :span="8">
             <div class="right-log">
                 <TitleComponent data="日志" />
-                <div :style="{ marginTop: 10 }">
+                <div :style="{ marginTop: '10px' }">
                     <template v-if="logList.length">
                         <Log v-for="item in logList" :data="item" :key="item.key" />
                     </template>
@@ -61,6 +61,10 @@ const messageArr = computed(() => {
     return arr.map(i => { return {...message[i], key: i}})
 })
 
+const subscribeLog = () => {
+
+}
+
 
 </script>
 

src/views/device/Instance/Detail/Diagnose/Status/ManualInspection.tsx

@@ -20,7 +20,7 @@ const ManualInspection = defineComponent({
                     <>
                         <div style={{ flex: 1 }}>
                             <div class={styles.alert}>
-                                <span style={{ marginRight: 10 }}><AIcon type="InfoCircleOutlined" /></span>
+                                <span style={{ marginRight: '10px' }}><AIcon type="InfoCircleOutlined" /></span>
                                 请检查配置项是否填写正确，若您确定该项无需诊断可
                                 <Button type="link" style="padding: 0"
                                     onClick={() => {
@@ -30,7 +30,7 @@ const ManualInspection = defineComponent({
                                     忽略
                                 </Button>
                             </div>
-                            <div style={{ marginTop: 10 }}>
+                            <div style={{ marginTop: '10px' }}>
                                 <Descriptions title={data?.data?.name} layout="vertical" bordered>
                                     {(data?.data?.properties || []).map((item: any) => (
                                         <Descriptions.Item
@@ -45,7 +45,7 @@ const ManualInspection = defineComponent({
                         </div>
                         {data?.data?.description ? (
                             <div
-                                style={{ width: '50%', border: '1px solid #f0f0f0', padding: 10, borderLeft: 'none' }}
+                                style={{ width: '50%', border: '1px solid #f0f0f0', padding: '10px', borderLeft: 'none' }}
                             >
                                 <h4>诊断项说明</h4>
                                 <p>{data?.data?.description}</p>
@@ -60,7 +60,7 @@ const ManualInspection = defineComponent({
                     <>
                         <div style={{ flex: 1 }}>
                             <div class={styles.alert}>
-                                <span style={{ marginRight: 10 }}><AIcon type="InfoCircleOutlined" /></span>
+                                <span style={{ marginRight: '10px' }}><AIcon type="InfoCircleOutlined" /></span>
                                 请检查配置项是否填写正确，若您确定该项无需诊断可
                                 <Button type="link" style="padding: 0"
                                     onClick={() => {
@@ -70,7 +70,7 @@ const ManualInspection = defineComponent({
                                     忽略
                                 </Button>
                             </div>
-                            <div style={{ marginTop: 10 }}>
+                            <div style={{ marginTop: '10px' }}>
                                 <Descriptions title={data?.data?.name} layout="vertical" bordered>
                                     {data.configuration?.provider === 'OneNet' ? (
                                         <>
@@ -105,7 +105,7 @@ const ManualInspection = defineComponent({
                         </div>
                         {data?.configuration?.configuration?.description ? (
                             <div
-                                style={{ width: '50%', border: '1px solid #f0f0f0', padding: 10, borderLeft: 'none' }}
+                                style={{ width: '50%', border: '1px solid #f0f0f0', padding: '10px', borderLeft: 'none' }}
                             >
                                 <h4>诊断项说明</h4>
                                 <p>{data?.configuration?.configuration?.description}</p>
@@ -120,7 +120,7 @@ const ManualInspection = defineComponent({
                     <>
                         <div style={{ flex: 1 }}>
                             <div class={styles.alert}>
-                                <span style={{ marginRight: 10 }}><AIcon type="InfoCircleOutlined" /></span>
+                                <span style={{ marginRight: '10px' }}><AIcon type="InfoCircleOutlined" /></span>
                                 请检查配置项是否填写正确，若您确定该项无需诊断可
                                 <Button type="link" style="padding: 0"
                                     onClick={() => {
@@ -130,7 +130,7 @@ const ManualInspection = defineComponent({
                                     忽略
                                 </Button>
                             </div>
-                            <div style={{ marginTop: 10 }}>
+                            <div style={{ marginTop: '10px' }}>
                                 <Descriptions title={data?.data?.name} layout="vertical" bordered>
                                     {data?.configuration?.configuration?.shareCluster ? (
                                         <>
@@ -180,9 +180,9 @@ const ManualInspection = defineComponent({
                                 </Descriptions>
                             </div>
                         </div>
-                        {data?.configuration?.configuration.description ? (
+                        {data?.configuration?.description ? (
                             <div
-                                style={{ width: '50%', border: '1px solid #f0f0f0', padding: 10, borderLeft: 'none' }}
+                                style={{ width: '50%', border: '1px solid #f0f0f0', padding: '10px', borderLeft: 'none' }}
                             >
                                 <h4>诊断项说明</h4>
                                 <p>{data?.configuration?.description}</p>

src/views/device/Instance/Detail/Diagnose/Status/index.tsx

@@ -10,6 +10,7 @@ import { _deploy as _deployProduct } from "@/api/device/product"
 import _ from "lodash"
 import DiagnosticAdvice from './DiagnosticAdvice'
 import ManualInspection from './ManualInspection'
+import { deployDevice } from "@/api/initHome"
 
 type TypeProps = 'network' | 'child-device' | 'media' | 'cloud' | 'channel'
 
@@ -29,9 +30,9 @@ const Status = defineComponent({
         const status = ref<'loading' | 'finish'>('loading')
 
         const device = ref(instanceStore.current)
-        const gateway = ref<Partial<Record<string, any>>>() // 网关信息
+        const gateway = ref<Partial<Record<string, any>>>({}) // 网关信息
-        const parent = ref<Partial<Record<string, any>>>() // 父设备
+        const parent = ref<Partial<Record<string, any>>>({}) // 父设备
-        const product = ref<Partial<Record<string, any>>>() // 产品
+        const product = ref<Partial<Record<string, any>>>({}) // 产品
 
         const artificialVisible = ref<boolean>(false)
         const artificialData = ref<Partial<Record<string, any>>>()
@@ -1332,7 +1333,7 @@ const Status = defineComponent({
                         unref(device)?.accessProvider &&
                         gatewayList.includes(unref(device).accessProvider as string)
                     ) {
-                        const response = await queryProtocolDetail(unref(device).protocol, 'MQTT');
+                        const response: any = await queryProtocolDetail(unref(device).protocol, 'MQTT');
                         if (response.status === 200) {
                             if ((response.result?.routes || []).length > 0) {
                                 item.push(
@@ -1521,9 +1522,103 @@ const Status = defineComponent({
                 <TitleComponent data="连接详情" />
                 <Space>
                     {
-                        status.value === 'finish' && unref(device).state?.value !== 'online' && <Button type="primary">一键修复</Button>
+                        status.value === 'finish' && unref(device).state?.value !== 'online' && <Button type="primary" onClick={async () => {
+                            let flag: boolean = true;
+                            if (
+                                Object.keys(unref(gateway)).length > 0 &&
+                                unref(gateway)?.state?.value !== 'enabled'
+                            ) {
+                                const resp = await startGateway(unref(device).accessId || '');
+                                if (resp.status === 200) {
+                                    list.value = modifyArrayList(list.value, {
+                                        key: 'gateway',
+                                        name: '设备接入网关',
+                                        desc: '诊断设备接入网关状态是否正常，禁用状态将导致连接失败',
+                                        status: 'success',
+                                        text: '正常',
+                                        info: null,
+                                    });
+                                } else {
+                                    flag = false;
+                                }
+                            }
+                            if (unref(product)?.state !== 1) {
+                                const resp = await _deployProduct(unref(device).productId || '');
+                                if (resp.status === 200) {
+                                    list.value = modifyArrayList(list.value, {
+                                        key: 'product',
+                                        name: '产品状态',
+                                        desc: '诊断产品状态是否正常，禁用状态将导致设备连接失败',
+                                        status: 'success',
+                                        text: '正常',
+                                        info: null,
+                                    });
+                                } else {
+                                    flag = false;
+                                }
+                            }
+                            if (unref(device)?.state?.value === 'notActive') {
+                                const resp = await deployDevice(unref(device)?.id || '');
+                                if (resp.status === 200) {
+                                    unref(device).state = { value: 'offline', text: '离线' };
+                                    list.value = modifyArrayList(list.value, {
+                                        key: 'device',
+                                        name: '设备状态',
+                                        desc: '诊断设备状态是否正常，禁用状态将导致设备连接失败',
+                                        status: 'success',
+                                        text: '正常',
+                                        info: null,
+                                    });
+                                } else {
+                                    flag = false;
+                                }
+                            }
+                            if (props.providerType === 'network' || props.providerType === 'child-device') {
+                                const address = unref(gateway)?.channelInfo?.addresses || [];
+                                const _label = address.some((i: any) => i.health === -1);
+                                const __label = address.every((i: any) => i.health === 1);
+                                const health = _label ? -1 : __label ? 1 : 0;
+                                if (health === -1 && unref(gateway)?.channelId) {
+                                    const res = await startNetwork(unref(gateway)?.channelId);
+                                    if (res.status === 200) {
+                                        list.value = modifyArrayList(list.value, {
+                                            key: 'network',
+                                            name: '网络组件',
+                                            desc: '诊断网络组件配置是否正确，配置错误将导致设备连接失败',
+                                            status: 'success',
+                                            text: '正常',
+                                            info: null,
+                                        });
+                                    } else {
+                                        flag = false;
+                                    }
+                                }
+                            }
+                            if (props.providerType === 'child-device' && unref(device)?.parentId) {
+                                if (unref(parent)?.state?.value === 'notActive') {
+                                    const resp = await deployDevice(unref(device)?.parentId || '');
+                                    if (resp.status === 200) {
+                                        list.value = modifyArrayList(list.value, {
+                                            key: 'parent-device',
+                                            name: '网关父设备',
+                                            desc: '诊断网关父设备状态是否正常，禁用或离线将导致连接失败',
+                                            status: 'success',
+                                            text: '正常',
+                                            info: null,
+                                        });
+                                    } else {
+                                        flag = false;
+                                    }
+                                }
+                            }
+                            if (flag) {
+                                message.success('操作成功！');
+                            }
+                        }}>一键修复</Button>
                     }
-                    <Button>重新诊断</Button>
+                    <Button onClick={() => {
+                        handleSearch()
+                    }}>重新诊断</Button>
                 </Space>
             </div>
             <div class={styles["statusContent"]}>

src/views/device/Instance/Detail/Running/Property/PropertyCard.vue

@@ -1,6 +1,6 @@
 <template>
     <a-card :hoverable="true" class="card-box">
-        <a-spin :spinning="loading">
+        <!-- <a-spin :spinning="loading"> -->
             <div class="card-container">
                 <div class="header">
                     <div class="title">{{ _props.data.name }}</div>
@@ -24,14 +24,14 @@
                     </div>
                 </div>
                 <div class="value">
-                    <ValueRender :data="data" />
+                    <ValueRender :data="data" :value="_props.data" />
                 </div>
                 <div class="bottom">
                     <div style="color: rgba(0, 0, 0, .65); font-size: 12px">更新时间</div>
-                    <div class="time-value">{{data?.time || '--'}}</div>
+                    <div class="time-value">{{_props?.data?.timeString || '--'}}</div>
                 </div>
             </div>
-        </a-spin>
+        <!-- </a-spin> -->
     </a-card>
 </template>
 
@@ -47,13 +47,14 @@ const _props = defineProps({
         default: () => []
     },
 });
-const loading = ref<boolean>(true);
+// const loading = ref<boolean>(true);
 
-watchEffect(() => {
+// watchEffect(() => {
-    if (_props.data.name) {
+//     if (_props.data) {
-        loading.value = false;
+//         console.log(_props.data)
-    }
+//         loading.value = false;
-});
+//     }
+// });
 </script>
 
 <style lang="less" scoped>

src/views/device/Instance/Detail/Running/Property/ValueRender.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="value">
-        {{value}}
+        {{value?.value || '--'}}
     </div>
 </template>
 
@@ -13,8 +13,8 @@ const _data = defineProps({
         default: () => {},
     },
     value: {
-        type: [Object, String, Number],
+        type: Object,
-        default: '--'
+        default: () => {}
     },
     type: {
         type: String,
@@ -40,6 +40,7 @@ imgMap.set('obj', getImage('/running/obj.png'));
 const imgList = ['.jpg', '.png', '.swf', '.tiff'];
 const videoList = ['.m3u8', '.flv', '.mp4', '.rmvb', '.mvb'];
 const fileList = ['.txt', '.doc', '.xls', '.pdf', '.ppt', '.docx', '.xlsx', '.pptx'];
+
 </script>
 
 <style lang="less" scoped>

src/views/device/Instance/Detail/Running/Property/index.vue

@@ -1,74 +1,95 @@
 <template>
-    <JTable
+    <a-spin :spinning="loading">
-        :columns="columns"
+        <JTable
-        :dataSource="dataSource"
+            :columns="columns"
-        :bodyStyle="{padding: '0 0 0 20px'}"
+            :dataSource="dataSource"
-    >
+            :bodyStyle="{ padding: '0 0 0 20px' }"
-        <template #headerTitle>
+        >
-            <a-input-search
+            <template #headerTitle>
-                placeholder="请输入名称"
+                <a-input-search
-                style="width: 300px; margin-bottom: 10px"
+                    placeholder="请输入名称"
-                @search="onSearch"
+                    style="width: 300px; margin-bottom: 10px"
-                v-model:value="value"
+                    @search="onSearch"
-                :allowClear="true"
+                    v-model:value="value"
-            />
+                    :allowClear="true"
-        </template>
+                />
-        <template #card="slotProps">
+            </template>
-            <PropertyCard :data="slotProps" :actions="getActions(slotProps)" />
+            <template #card="slotProps">
-        </template>
+                <PropertyCard
-        <template #value="slotProps">
+                    :data="{ ...slotProps, ...propertyValue[slotProps?.id] }"
-            <ValueRender :data="slotProps" />
+                    :actions="getActions(slotProps)"
-        </template>
+                />
-        <template #time="slotProps">
+            </template>
-            {{slotProps.time || '--'}}
+            <template #value="slotProps">
-        </template>
+                <ValueRender
-        <template #action="slotProps">
+                    :data="slotProps"
-            <a-space :size="16">
+                    :value="propertyValue[slotProps?.id]"
-                <a-tooltip
+                />
-                    v-for="i in getActions(slotProps)"
+            </template>
-                    :key="i.key"
+            <template #time="slotProps">
-                    v-bind="i.tooltip"
+                {{ propertyValue[slotProps?.id]?.timeString || '--' }}
-                >
+            </template>
-                    <a-button
+            <template #action="slotProps">
-                        style="padding: 0"
+                <a-space :size="16">
-                        type="link"
+                    <a-tooltip
-                        :disabled="i.disabled"
+                        v-for="i in getActions(slotProps)"
-                        @click="i.onClick && i.onClick(slotProps)"
+                        :key="i.key"
+                        v-bind="i.tooltip"
                     >
-                        <AIcon :type="i.icon" />
+                        <a-button
-                    </a-button>
+                            style="padding: 0"
-                </a-tooltip>
+                            type="link"
-            </a-space>
+                            :disabled="i.disabled"
-        </template>
+                            @click="i.onClick && i.onClick(slotProps)"
-        <template #paginationRender>
+                        >
-            <a-pagination
+                            <AIcon :type="i.icon" />
-                size="small"
+                        </a-button>
-                :total="total"
+                    </a-tooltip>
-                :showQuickJumper="false"
+                </a-space>
-                :showSizeChanger="true"
+            </template>
-                :current="pageIndex + 1"
+            <template #paginationRender>
-                :pageSize="pageSize"
+                <a-pagination
-                :pageSizeOptions="['8', '12', '24', '60', '100']"
+                    size="small"
-                :show-total="(num) => `第 ${pageIndex * pageSize + 1} - ${(pageIndex + 1) * pageSize > num ? num : (pageIndex + 1) * pageSize} 条/总共 ${num} 条`"
+                    :total="total"
-                @change="pageChange"
+                    :showQuickJumper="false"
-            />
+                    :showSizeChanger="true"
-        </template>
+                    :current="pageIndex + 1"
-    </JTable>
+                    :pageSize="pageSize"
+                    :pageSizeOptions="['8', '12', '24', '60', '100']"
+                    :show-total="
+                        (num) =>
+                            `第 ${pageIndex * pageSize + 1} - ${
+                                (pageIndex + 1) * pageSize > num
+                                    ? num
+                                    : (pageIndex + 1) * pageSize
+                            } 条/总共 ${num} 条`
+                    "
+                    @change="pageChange"
+                />
+            </template>
+        </JTable>
+    </a-spin>
     <Save v-if="editVisible" @close="editVisible = false" :data="currentInfo" />
-    <Indicators v-if="indicatorVisible" @close="indicatorVisible = false" :data="currentInfo" />
+    <Indicators
+        v-if="indicatorVisible"
+        @close="indicatorVisible = false"
+        :data="currentInfo"
+    />
 </template>
 
 <script lang="ts" setup>
-import _ from "lodash"
+import _, { groupBy, throttle, toArray } from 'lodash-es';
-import { PropertyData } from "../../../typings"
+import { PropertyData } from '../../../typings';
-import PropertyCard from './PropertyCard.vue'
+import PropertyCard from './PropertyCard.vue';
-import ValueRender from './ValueRender.vue'
+import ValueRender from './ValueRender.vue';
-import Save from './Save.vue'
+import Save from './Save.vue';
-import Indicators from './Indicators.vue'
+import Indicators from './Indicators.vue';
-import { getProperty } from '@/api/device/instance'
+import { getProperty } from '@/api/device/instance';
-import { useInstanceStore } from "@/store/instance"
+import { useInstanceStore } from '@/store/instance';
-import { message } from "ant-design-vue"
+import { message } from 'ant-design-vue';
-
+import { getWebSocket } from '@/utils/websocket';
+import { map } from 'rxjs/operators';
+import { queryDashboard } from '@/api/comm';
 const columns = [
     {
         title: '名称',
@@ -79,7 +100,7 @@ const columns = [
         title: '值',
         dataIndex: 'value',
         key: 'value',
-        scopedSlots: true
+        scopedSlots: true,
     },
     {
         title: '更新时间',
@@ -93,29 +114,35 @@ const columns = [
         key: 'action',
         scopedSlots: true,
     },
-]
+];
 
 const _data = defineProps({
     data: {
         type: Array,
-        default: () => []
+        default: () => [],
-    }
+    },
-})
+});
-const value = ref<string>('')
+const value = ref<string>('');
-const dataSource = ref<PropertyData[]>([])
+const dataSource = ref<PropertyData[]>([]);
-const _dataSource = ref<PropertyData[]>([])
+const _dataSource = ref<PropertyData[]>([]);
-const pageIndex = ref<number>(0)
+const pageIndex = ref<number>(0);
-const pageSize = ref<number>(8)
+const pageSize = ref<number>(8);
-const total = ref<number>(0)
+const total = ref<number>(0);
-const editVisible = ref<boolean>(false) // 编辑
+const editVisible = ref<boolean>(false); // 编辑
-const detailVisible = ref<boolean>(false) // 详情
+const detailVisible = ref<boolean>(false); // 详情
-const currentInfo = ref<Record<string, any>>({})
+const currentInfo = ref<Record<string, any>>({});
-const instanceStore = useInstanceStore()
+const instanceStore = useInstanceStore();
-const indicatorVisible = ref<boolean>(false) // 指标
+const indicatorVisible = ref<boolean>(false); // 指标
+const loading = ref<boolean>(false);
+const propertyValue = ref<Record<string, any>>({});
+
+const subRef = ref();
+
+const list = ref<any[]>([]);
 
 const getActions = (data: Partial<Record<string, any>>) => {
-    const arr = []
+    const arr = [];
-    if(data.expands?.type?.includes('write')){
+    if (data.expands?.type?.includes('write')) {
         arr.push({
             key: 'edit',
             tooltip: {
@@ -123,14 +150,23 @@ const getActions = (data: Partial<Record<string, any>>) => {
             },
             icon: 'EditOutlined',
             onClick: () => {
-                editVisible.value = true
+                editVisible.value = true;
-                currentInfo.value = data
+                currentInfo.value = data;
             },
-        })
+        });
     }
-    if((data.expands?.metrics || []).length && ['int', 'long', 'float', 'double', 'string', 'boolean', 'date'].includes(
+    if (
-        data.valueType?.type || '',
+        (data.expands?.metrics || []).length &&
-    )){
+        [
+            'int',
+            'long',
+            'float',
+            'double',
+            'string',
+            'boolean',
+            'date',
+        ].includes(data.valueType?.type || '')
+    ) {
         arr.push({
             key: 'metrics',
             tooltip: {
@@ -138,12 +174,12 @@ const getActions = (data: Partial<Record<string, any>>) => {
             },
             icon: 'ClockCircleOutlined',
             onClick: () => {
-                indicatorVisible.value = true
+                indicatorVisible.value = true;
-                currentInfo.value = data
+                currentInfo.value = data;
             },
-        })
+        });
     }
-    if(data.expands?.type?.includes('read')){
+    if (data.expands?.type?.includes('read')) {
         arr.push({
             key: 'read',
             tooltip: {
@@ -151,14 +187,17 @@ const getActions = (data: Partial<Record<string, any>>) => {
             },
             icon: 'SyncOutlined',
             onClick: async () => {
-                if(instanceStore.current.id && data.id){
+                if (instanceStore.current.id && data.id) {
-                    const resp = await getProperty(instanceStore.current.id, data.id)
+                    const resp = await getProperty(
-                    if(resp.status === 200){
+                        instanceStore.current.id,
-                        message.success('操作成功！')
+                        data.id,
+                    );
+                    if (resp.status === 200) {
+                        message.success('操作成功！');
                     }
                 }
             },
-        })
+        });
     }
     arr.push({
         key: 'detail',
@@ -168,56 +207,132 @@ const getActions = (data: Partial<Record<string, any>>) => {
         },
         icon: 'BarsOutlined',
         onClick: () => {
-            detailVisible.value = true
+            detailVisible.value = true;
-            currentInfo.value = data
+            currentInfo.value = data;
         },
-    })
+    });
-    return arr
+    return arr;
-}
-
-const query = (page: number, size: number, value: string) => {
-    pageIndex.value = page || 0
-    pageSize.value = size || 8
-    const _from = pageIndex.value * pageSize.value
-    const _to = (pageIndex.value + 1) * pageSize.value
-    const arr = _.cloneDeep(_dataSource.value)
-    if(value){
-        const li = arr.filter((i: any) => {
-            return i?.name.indexOf(value) !== -1;
-        })
-        dataSource.value = li.slice(_from, _to)
-        total.value = li.length
-    } else {
-        dataSource.value = arr.slice(_from, _to)
-        total.value = arr.length
-    }
-}
-
-const pageChange = (page: number, size: number) => {
-    if(size === pageSize.value) {
-        query(page - 1, size, value.value)
-    } else {
-        query(0, size, value.value)
-    }
-}
-
-watch(() => _data.data,
-    (newVal) => {
-        if(newVal.length) {
-            _dataSource.value = newVal as PropertyData[]
-             query(0, 8, value.value)
-        }
-}, {
-    deep: true,
-    immediate: true
-})
-
-const onSearch = () => {
-    query(0, 8, value.value)
 };
 
+// const valueChange = (arr: Record<string, any>[]) => {
+//     (arr || [])
+//         .sort((a: any, b: any) => a.timestamp - b.timestamp)
+//         .forEach((item: any) => {
+//             const { value } = item;
+//             propertyValue.value[value?.property] = { ...item, ...value };
+//         });
+//     list.value = []
+// };
+
+const subscribeProperty = () => {
+    const id = `instance-info-property-${instanceStore.current.id}-${
+        instanceStore.current.productId
+    }-${dataSource.value.map((i: Record<string, any>) => i.id).join('-')}`;
+    const topic = `/dashboard/device/${instanceStore.current.productId}/properties/realTime`;
+    subRef.value = getWebSocket(id, topic, {
+        deviceId: instanceStore.current.id,
+        properties: dataSource.value.map((i: Record<string, any>) => i.id),
+        history: 1,
+    })
+        ?.pipe(map((res: any) => res.payload))
+        .subscribe((payload) => {
+            list.value = [...list.value, payload];
+            unref(list).sort((a: any, b: any) => a.timestamp - b.timestamp)
+            .forEach((item: any) => {
+                const { value } = item;
+                propertyValue.value[value?.property] = { ...item, ...value };
+            });
+            // list.value = [...list.value, payload];
+            // throttle(valueChange(list.value), 500);
+        });
+};
+
+const getDashboard = async () => {
+    const param = [
+        {
+            dashboard: 'device',
+            object: instanceStore.current.productId,
+            measurement: 'properties',
+            dimension: 'history',
+            params: {
+                deviceId: instanceStore.current.id,
+                history: 1,
+                properties: dataSource.value.map((i: any) => i.id),
+            },
+        },
+    ];
+    loading.value = true;
+    const resp: Record<string, any> = await queryDashboard(param);
+    if (resp.status === 200) {
+        const t1 = (resp.result || []).map((item: any) => {
+            return {
+                timeString: item.data?.timeString,
+                timestamp: item.data?.timestamp,
+                ...item?.data?.value,
+            };
+        });
+        const obj = {};
+        toArray(groupBy(t1, 'property'))
+            .map((item) => {
+                return {
+                    list: item.sort((a, b) => b.timestamp - a.timestamp),
+                    property: item[0].property,
+                };
+            })
+            .forEach((i) => {
+                obj[i.property] = i.list[0];
+            });
+        propertyValue.value = { ...unref(propertyValue), ...obj };
+    }
+    subscribeProperty();
+    loading.value = false;
+};
+
+const query = (page: number, size: number, value: string) => {
+    pageIndex.value = page || 0;
+    pageSize.value = size || 8;
+    const _from = pageIndex.value * pageSize.value;
+    const _to = (pageIndex.value + 1) * pageSize.value;
+    const arr = _.cloneDeep(_dataSource.value);
+    if (unref(value)) {
+        const li = arr.filter((i: any) => {
+            return i?.name.indexOf(unref(value)) !== -1;
+        });
+        dataSource.value = li.slice(_from, _to);
+        total.value = li.length;
+    } else {
+        dataSource.value = arr.slice(_from, _to);
+        total.value = arr.length;
+    }
+    getDashboard();
+};
+
+const pageChange = (page: number, size: number) => {
+    if (size === pageSize.value) {
+        query(page - 1, size, value.value);
+    } else {
+        query(0, size, value.value);
+    }
+};
+
+watch(
+    () => _data.data,
+    (newVal) => {
+        if (newVal.length) {
+            _dataSource.value = newVal as PropertyData[];
+            query(0, 8, value.value);
+        }
+    },
+    {
+        deep: true,
+        immediate: true,
+    },
+);
+
+const onSearch = () => {
+    query(0, 8, value.value);
+};
 </script>
 
 <style scoped lang="less">
-    
 </style>

src/views/link/Type/data.ts

@@ -10,7 +10,7 @@ export const Configuration = {
     username: '',
     password: '',
     topicPrefix: '',
-    maxMessageSize: '',
+    maxMessageSize: 8192,
     certId: undefined,
     privateKeyAlias: '',
     clientId: '',
@@ -76,7 +76,6 @@ export const VisibleData = {
     length: ['LENGTH_FIELD'],
     offset: ['LENGTH_FIELD'],
     little: ['LENGTH_FIELD'],
-    secureSpan12: ['MQTT_CLIENT', 'MQTT_SERVER'],
 };
 
 export const ParserTypeOptions = [
@@ -226,8 +225,8 @@ export const Rules = {
     ],
     maxMessageSize: [
         {
-            max: 64,
+            required: true,
-            message: '最大可输入64个字符',
+            message: '请输入最大消息长度',
         },
     ],
     secure: [

src/views/link/Type/type.d.ts

@@ -10,7 +10,7 @@ export interface ConfigurationType {
     username: string;
     password: string;
     topicPrefix: string;
-    maxMessageSize: string;
+    maxMessageSize: string | number;
     certId: string | undefined;
     privateKeyAlias: string;
     clientId: string;
@@ -21,7 +21,7 @@ export interface ConfigurationType {
         size: string;
         length: string;
         offset: string;
-        little: string | boolean;
+        little: string | boolean | undefined;
     };
 }
 

src/views/system/Api/components/ApiDoes.vue

@@ -0,0 +1,316 @@
+<template>
+    <div class="api-does-container">
+        <div class="top">
+            <h5>{{ selectApi.summary }}</h5>
+            <div class="input">
+                <InputCard :value="selectApi.method" />
+                <a-input :value="selectApi?.url" disabled />
+            </div>
+        </div>
+
+        <p>
+            <span class="label">请求数据类型</span>
+            <span>{{
+                getContent(selectApi.requestBody) ||
+                'application/x-www-form-urlencoded'
+            }}</span>
+            <span class="label">响应数据类型</span>
+            <span>{{ `["/"]` }}</span>
+        </p>
+
+        <div class="api-card">
+            <h5>请求参数</h5>
+            <div class="content">
+                <JTable
+                    :columns="requestCard.columns"
+                    :dataSource="requestCard.tableData"
+                    noPagination
+                    model="TABLE"
+                >
+                    <template #required="slotProps">
+                        <span>{{ Boolean(slotProps.row.required) + '' }}</span>
+                    </template>
+                    <template #type="slotProps">
+                        <span>{{ slotProps.row.schema.type }}</span>
+                    </template>
+                </JTable>
+            </div>
+        </div>
+        <div class="api-card">
+            <h5>响应状态</h5>
+            <div class="content">
+                <JTable
+                    :columns="responseStatusCard.columns"
+                    :dataSource="responseStatusCard.tableData"
+                    noPagination
+                    model="TABLE"
+                >
+                </JTable>
+
+                <a-tabs v-model:activeKey="responseStatusCard.activeKey">
+                    <a-tab-pane
+                        :key="key"
+                        :tab="key"
+                        v-for="key in tabs"
+                    ></a-tab-pane>
+                </a-tabs>
+            </div>
+        </div>
+
+        <div class="api-card">
+            <h5>响应参数</h5>
+            <div class="content">
+                <JTable
+                    :columns="respParamsCard.columns"
+                    :dataSource="respParamsCard.tableData"
+                    noPagination
+                    model="TABLE"
+                >
+                </JTable>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { apiDetailsType } from '../typing';
+import InputCard from './InputCard.vue';
+import { PropType } from 'vue';
+
+const props = defineProps({
+    selectApi: {
+        type: Object as PropType<apiDetailsType>,
+        required: true,
+    },
+    schemas: {
+        type: Object,
+        required: true,
+    },
+});
+const { selectApi } = toRefs(props);
+
+type tableCardType = {
+    columns: object[];
+    tableData: object[];
+    activeKey?: any;
+    getData?: any;
+};
+const requestCard = reactive<tableCardType>({
+    columns: [
+        {
+            title: '参数名',
+            dataIndex: 'name',
+            key: 'name',
+        },
+        {
+            title: '参数说明',
+            dataIndex: 'description',
+            key: 'description',
+        },
+        {
+            title: '请求类型',
+            dataIndex: 'in',
+            key: 'in',
+        },
+        {
+            title: '是否必须',
+            dataIndex: 'required',
+            key: 'required',
+            scopedSlots: true,
+        },
+        {
+            title: '参数类型',
+            dataIndex: 'type',
+            key: 'type',
+            scopedSlots: true,
+        },
+    ],
+    tableData: [],
+    getData: () => {
+        requestCard.tableData = props.selectApi.parameters;
+    },
+});
+const responseStatusCard = reactive<tableCardType>({
+    activeKey: '',
+    columns: [
+        {
+            title: '状态码',
+            dataIndex: 'code',
+            key: 'code',
+        },
+        {
+            title: '说明',
+            dataIndex: 'desc',
+            key: 'desc',
+        },
+        {
+            title: 'schema',
+            dataIndex: 'schema',
+            key: 'schema',
+        },
+    ],
+    tableData: [],
+    getData: () => {
+        if (!Object.keys(props.selectApi.responses).length)
+            return (responseStatusCard.tableData = []);
+
+        const tableData = <any>[];
+        Object.entries(props.selectApi.responses || {}).forEach((item: any) => {
+            const desc = item[1].description;
+            const schema = item[1].content['*/*'].schema.$ref?.split('/') || '';
+
+            tableData.push({
+                code: item[0],
+                desc,
+                schema: schema && schema.pop(),
+            });
+        });
+        responseStatusCard.activeKey = tableData[0]?.code;
+        responseStatusCard.tableData = tableData;
+    },
+});
+const tabs = computed(() =>
+    responseStatusCard.tableData
+        .map((item: any) => item.code + '')
+        .filter((code: string) => code !== '400'),
+);
+const respParamsCard = reactive<tableCardType>({
+    columns: [
+        {
+            title: '参数名称',
+            dataIndex: 'paramsName',
+        },
+        {
+            title: '参数说明',
+            dataIndex: 'desc',
+        },
+        {
+            title: '类型',
+            dataIndex: 'paramsType',
+        },
+    ],
+    tableData: [],
+    getData: (code: string) => {
+        type schemaObjType = {
+            paramsName: string;
+            paramsType: string;
+            desc: string;
+            children?: schemaObjType[];
+        };
+
+        const schemaName = responseStatusCard.tableData.find(
+            (item: any) => item.code === code,
+        )?.schema;
+        const schemas = toRaw(props.schemas);
+        function findData(schemaName: string) {
+            if (!schemaName || !schemas[schemaName]) {
+                return [];
+            }
+            const result: schemaObjType[] = [];
+            const schema = schemas[schemaName];
+            const basicType = ['string', 'integer', 'boolean'];
+            Object.entries(schema.properties).forEach((item: [string, any]) => {
+                const paramsType =
+                    item[1].type ||
+                    (item[1].$ref && item[1].$ref.split('/').pop()) ||
+                    (item[1].items && item[1].items.$ref.split('/').pop()) ||
+                    '';
+                const schemaObj: schemaObjType = {
+                    paramsName: item[0],
+                    paramsType,
+                    desc: item[1].description || '',
+                };
+                if (!basicType.includes(paramsType))
+                    schemaObj.children = findData(paramsType);
+                result.push(schemaObj);
+            });
+            console.log(result);
+
+            return result;
+        }
+
+        respParamsCard.tableData = findData(schemaName);
+        // console.log(respParamsCard.tableData);
+    },
+});
+
+const getContent = (data: any) => {
+    if (data && data.content) {
+        return Object.keys(data.content || {})[0];
+    }
+    return '';
+};
+onMounted(() => {
+    requestCard.getData();
+    responseStatusCard.getData();
+});
+watch(
+    () => props.selectApi,
+    () => {
+        requestCard.getData();
+        responseStatusCard.getData();
+    },
+);
+
+watch([() => responseStatusCard.activeKey, () => props.selectApi], (n) => {
+    n[0] && respParamsCard.getData(n[0]);
+});
+</script>
+
+<style lang="less" scoped>
+.api-does-container {
+    .top {
+        width: 100%;
+
+        h5 {
+            font-weight: bold;
+            font-size: 16px;
+        }
+
+        .input {
+            display: flex;
+            margin: 24px 0;
+        }
+    }
+    p {
+        display: flex;
+        justify-content: space-between;
+        font-size: 14px;
+
+        .label {
+            font-weight: bold;
+        }
+    }
+    .api-card {
+        margin-top: 24px;
+        h5 {
+            position: relative;
+            padding-left: 10px;
+            font-weight: 600;
+            font-size: 16px;
+
+            &::before {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 4px;
+                height: 100%;
+                background-color: #1d39c4;
+                border-radius: 0 3px 3px 0;
+                content: ' ';
+            }
+        }
+        .content {
+            padding-left: 10px;
+
+            :deep(.jtable-body) {
+                padding: 0;
+
+                .jtable-body-header {
+                    display: none;
+                }
+            }
+        }
+    }
+}
+</style>

src/views/system/Api/components/ApiTest.vue

@@ -0,0 +1,51 @@
+<template>
+    <div class="api-test-container">
+        <div class="top">
+            <h5>{{ selectApi.summary }}</h5>
+            <div class="input">
+                <InputCard :value="selectApi.method" />
+                <a-input :value="selectApi?.url" disabled />
+                <span class="send">发送</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { apiDetailsType } from '../typing';
+import InputCard from './InputCard.vue';
+import { PropType } from 'vue';
+
+const props = defineProps({
+    selectApi: {
+        type: Object as PropType<apiDetailsType>,
+        required: true,
+    },
+});
+const { selectApi } = toRefs(props);
+</script>
+
+<style lang="less" scoped>
+.api-test-container {
+    .top {
+        width: 100%;
+
+        h5 {
+            font-weight: bold;
+            font-size: 16px;
+        }
+
+        .input {
+            display: flex;
+
+            .send {
+                width: 65px;
+                padding: 4px 15px;
+                font-size: 14px;
+                color: #fff;
+                background-color: #1890ff;
+            }
+        }
+    }
+}
+</style>

src/views/system/Api/components/ChooseApi.vue

@@ -0,0 +1,65 @@
+<template>
+    <div class="choose-api-container">
+        <JTable
+            :columns="columns"
+            :dataSource="props.tableData"
+            :rowSelection="rowSelection"
+            noPagination
+            model="TABLE"
+        >
+            <template #url="slotProps">
+                <span
+                    style="color: #1d39c4; cursor: pointer"
+                    @click="jump(slotProps.row)"
+                    >{{ slotProps.row.url }}</span
+                >
+            </template>
+        </JTable>
+
+        <a-button type="primary">保存</a-button>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { TableProps } from 'ant-design-vue';
+
+const emits = defineEmits(['update:clickApi'])
+const props = defineProps({
+    tableData: Array,
+    clickApi: Object
+});
+
+const columns = [
+    {
+        title: 'API',
+        dataIndex: 'url',
+        key: 'url',
+        scopedSlots: true,
+    },
+    {
+        title: '说明',
+        dataIndex: 'summary',
+        key: 'summary',
+    },
+];
+const rowSelection: TableProps['rowSelection'] = {
+    onChange: (selectedRowKeys, selectedRows) => {
+        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+    },
+};
+
+const jump = (row:object) => {
+    emits('update:clickApi',row)
+};
+</script>
+
+<style lang="less" scoped>
+.choose-api-container {
+    height: 100%;
+    
+    :deep(.jtable-body-header) {
+        display: none !important;
+    }
+}
+
+</style>

src/views/system/Api/components/InputCard.vue

@@ -0,0 +1,35 @@
+<template>
+    <span class="input-card-container" :class="props.value">
+        {{ props.value?.toLocaleUpperCase() }}
+    </span>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+    value: String,
+});
+</script>
+
+<style lang="less" scoped>
+.input-card-container {
+    padding: 4px 15px;
+    font-size: 14px;
+    color: #fff;
+
+    &.get {
+        background-color: #1890ff;
+    }
+    &.put {
+        background-color: #fa8c16;
+    }
+    &.post {
+        background-color: #52c41a;
+    }
+    &.delete {
+        background-color: #f5222d;
+    }
+    &.patch {
+        background-color: #a0d911;
+    }
+}
+</style>

src/views/system/Api/components/LeftTree.vue

@@ -0,0 +1,96 @@
+<template>
+    <a-tree
+        :tree-data="treeData"
+        @select="clickSelectItem"
+        showLine
+        class="left-tree-container"
+    >
+        <template #title="{ name }">
+            {{ name }}
+        </template>
+    </a-tree>
+</template>
+
+<script setup lang="ts">
+import { TreeProps } from 'ant-design-vue';
+
+import { getTreeOne_api, getTreeTwo_api } from '@/api/system/apiPage';
+import { treeNodeTpye } from '../typing';
+
+const emits = defineEmits(['select']);
+
+const treeData = ref<TreeProps['treeData']>([]);
+
+const getTreeData = () => {
+    let tree: treeNodeTpye[] = [];
+    getTreeOne_api().then((resp: any) => {
+        tree = resp.urls.map((item: any) => ({
+            ...item,
+            key: item.url,
+        }));
+        const allPromise = tree.map((item) => getTreeTwo_api(item.name));
+        Promise.all(allPromise).then((values) => {
+            values.forEach((item: any, i) => {
+                tree[i].children = combData(item?.paths);
+                tree[i].schemas = item.components.schemas
+            });
+            treeData.value = tree;
+        });
+    });
+};
+const clickSelectItem: TreeProps['onSelect'] = (key, node: any) => {
+    emits('select', node.node.dataRef, node.node?.parent.node.schemas);
+};
+
+onMounted(() => {
+    getTreeData();
+});
+
+const combData = (dataSource: object) => {
+    const apiList: treeNodeTpye[] = [];
+    const keys = Object.keys(dataSource);
+
+    keys.forEach((key) => {
+        const method = Object.keys(dataSource[key] || {})[0];
+        const name = dataSource[key][method].tags[0];
+        let apiObj: treeNodeTpye | undefined = apiList.find(
+            (item) => item.name === name,
+        );
+        if (apiObj) {
+            apiObj.apiList?.push({
+                url: key,
+                method: dataSource[key],
+            });
+        } else {
+            apiObj = {
+                name,
+                key: name,
+                apiList: [
+                    {
+                        url: key,
+                        method: dataSource[key],
+                    },
+                ],
+            };
+            apiList.push(apiObj);
+        }
+    });
+
+    return apiList;
+};
+</script>
+
+<style lang="less">
+.left-tree-container {
+    border-right: 1px solid #e9e9e9;
+    height: calc(100vh - 150px);
+    overflow-y: auto;
+    .ant-tree-list {
+        .ant-tree-list-holder-inner {
+            .ant-tree-switcher-noop {
+                display: none !important;
+            }
+        }
+    }
+}
+</style>

src/views/system/Api/index.vue

@@ -0,0 +1,84 @@
+<template>
+    <a-card class="api-page-container">
+        api
+        <a-row :gutter="24">
+            <a-col :span="5">
+                <LeftTree @select="treeSelect" />
+            </a-col>
+            <a-col :span="19">
+                <ChooseApi
+                    v-show="!selectedApi.url"
+                    v-model:click-api="selectedApi"
+                    :table-data="tableData"
+                />
+
+                <div
+                    class="api-details"
+                    v-show="selectedApi.url && tableData.length > 0"
+                >
+                    <a-button @click="selectedApi = initSelectedApi" style="margin-bottom: 24px;"
+                        >返回</a-button
+                    >
+                    <a-tabs v-model:activeKey="activeKey" type="card">
+                        <a-tab-pane key="does" tab="文档">
+                            <ApiDoes :select-api="selectedApi" :schemas="schemas" />
+                        </a-tab-pane>
+                        <a-tab-pane key="test" tab="调试">
+                            <ApiTest :select-api="selectedApi" />
+                        </a-tab-pane>
+                    </a-tabs>
+                </div>
+            </a-col>
+        </a-row>
+    </a-card>
+</template>
+
+<script setup lang="ts" name="apiPage">
+import type { treeNodeTpye, apiObjType, apiDetailsType } from './typing';
+import LeftTree from './components/LeftTree.vue';
+import ChooseApi from './components/ChooseApi.vue';
+import ApiDoes from './components/ApiDoes.vue';
+import ApiTest from './components/ApiTest.vue';
+
+const tableData = ref([]);
+const treeSelect = (node: treeNodeTpye, nodeSchemas:object = {}) => {
+    schemas.value = nodeSchemas
+    if (!node.apiList) return;
+    const apiList: apiObjType[] = node.apiList as apiObjType[];
+    const table: any = [];
+    // 将对象形式的数据转换为表格需要的形式
+    apiList?.forEach((apiItem) => {
+        const { method, url } = apiItem;
+        for (const key in method) {
+            if (Object.prototype.hasOwnProperty.call(method, key)) {
+                table.push({
+                    ...method[key],
+                    url,
+                    method: key,
+                });
+            }
+        }
+    });
+    tableData.value = table;
+};
+
+const activeKey = ref('does');
+const schemas = ref({});
+const initSelectedApi:apiDetailsType = {
+    url: '',
+    method: '',
+    summary: '',
+    parameters: [],
+    responses: {},
+    requestBody: {}
+};
+const selectedApi = ref<apiDetailsType>(initSelectedApi);
+
+watch(tableData, () => (selectedApi.value = initSelectedApi));
+</script>
+
+<style scoped>
+.api-page-container {
+    height: 100%;
+}
+</style>

src/views/system/Apply/Api/components/ApiDoes.vue

@@ -0,0 +1,316 @@
+<template>
+    <div class="api-does-container">
+        <div class="top">
+            <h5>{{ selectApi.summary }}</h5>
+            <div class="input">
+                <InputCard :value="selectApi.method" />
+                <a-input :value="selectApi?.url" disabled />
+            </div>
+        </div>
+
+        <p>
+            <span class="label">请求数据类型</span>
+            <span>{{
+                getContent(selectApi.requestBody) ||
+                'application/x-www-form-urlencoded'
+            }}</span>
+            <span class="label">响应数据类型</span>
+            <span>{{ `["/"]` }}</span>
+        </p>
+
+        <div class="api-card">
+            <h5>请求参数</h5>
+            <div class="content">
+                <JTable
+                    :columns="requestCard.columns"
+                    :dataSource="requestCard.tableData"
+                    noPagination
+                    model="TABLE"
+                >
+                    <template #required="slotProps">
+                        <span>{{ Boolean(slotProps.row.required) + '' }}</span>
+                    </template>
+                    <template #type="slotProps">
+                        <span>{{ slotProps.row.schema.type }}</span>
+                    </template>
+                </JTable>
+            </div>
+        </div>
+        <div class="api-card">
+            <h5>响应状态</h5>
+            <div class="content">
+                <JTable
+                    :columns="responseStatusCard.columns"
+                    :dataSource="responseStatusCard.tableData"
+                    noPagination
+                    model="TABLE"
+                >
+                </JTable>
+
+                <a-tabs v-model:activeKey="responseStatusCard.activeKey">
+                    <a-tab-pane
+                        :key="key"
+                        :tab="key"
+                        v-for="key in tabs"
+                    ></a-tab-pane>
+                </a-tabs>
+            </div>
+        </div>
+
+        <div class="api-card">
+            <h5>响应参数</h5>
+            <div class="content">
+                <JTable
+                    :columns="respParamsCard.columns"
+                    :dataSource="respParamsCard.tableData"
+                    noPagination
+                    model="TABLE"
+                >
+                </JTable>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { apiDetailsType } from '../typing';
+import InputCard from './InputCard.vue';
+import { PropType } from 'vue';
+
+const props = defineProps({
+    selectApi: {
+        type: Object as PropType<apiDetailsType>,
+        required: true,
+    },
+    schemas: {
+        type: Object,
+        required: true,
+    },
+});
+const { selectApi } = toRefs(props);
+
+type tableCardType = {
+    columns: object[];
+    tableData: object[];
+    activeKey?: any;
+    getData?: any;
+};
+const requestCard = reactive<tableCardType>({
+    columns: [
+        {
+            title: '参数名',
+            dataIndex: 'name',
+            key: 'name',
+        },
+        {
+            title: '参数说明',
+            dataIndex: 'description',
+            key: 'description',
+        },
+        {
+            title: '请求类型',
+            dataIndex: 'in',
+            key: 'in',
+        },
+        {
+            title: '是否必须',
+            dataIndex: 'required',
+            key: 'required',
+            scopedSlots: true,
+        },
+        {
+            title: '参数类型',
+            dataIndex: 'type',
+            key: 'type',
+            scopedSlots: true,
+        },
+    ],
+    tableData: [],
+    getData: () => {
+        requestCard.tableData = props.selectApi.parameters;
+    },
+});
+const responseStatusCard = reactive<tableCardType>({
+    activeKey: '',
+    columns: [
+        {
+            title: '状态码',
+            dataIndex: 'code',
+            key: 'code',
+        },
+        {
+            title: '说明',
+            dataIndex: 'desc',
+            key: 'desc',
+        },
+        {
+            title: 'schema',
+            dataIndex: 'schema',
+            key: 'schema',
+        },
+    ],
+    tableData: [],
+    getData: () => {
+        if (!Object.keys(props.selectApi.responses).length)
+            return (responseStatusCard.tableData = []);
+
+        const tableData = <any>[];
+        Object.entries(props.selectApi.responses || {}).forEach((item: any) => {
+            const desc = item[1].description;
+            const schema = item[1].content['*/*'].schema.$ref?.split('/') || '';
+
+            tableData.push({
+                code: item[0],
+                desc,
+                schema: schema && schema.pop(),
+            });
+        });
+        responseStatusCard.activeKey = tableData[0]?.code;
+        responseStatusCard.tableData = tableData;
+    },
+});
+const tabs = computed(() =>
+    responseStatusCard.tableData
+        .map((item: any) => item.code + '')
+        .filter((code: string) => code !== '400'),
+);
+const respParamsCard = reactive<tableCardType>({
+    columns: [
+        {
+            title: '参数名称',
+            dataIndex: 'paramsName',
+        },
+        {
+            title: '参数说明',
+            dataIndex: 'desc',
+        },
+        {
+            title: '类型',
+            dataIndex: 'paramsType',
+        },
+    ],
+    tableData: [],
+    getData: (code: string) => {
+        type schemaObjType = {
+            paramsName: string;
+            paramsType: string;
+            desc: string;
+            children?: schemaObjType[];
+        };
+
+        const schemaName = responseStatusCard.tableData.find(
+            (item: any) => item.code === code,
+        )?.schema;
+        const schemas = toRaw(props.schemas);
+        function findData(schemaName: string) {
+            if (!schemaName || !schemas[schemaName]) {
+                return [];
+            }
+            const result: schemaObjType[] = [];
+            const schema = schemas[schemaName];
+            const basicType = ['string', 'integer', 'boolean'];
+            Object.entries(schema.properties).forEach((item: [string, any]) => {
+                const paramsType =
+                    item[1].type ||
+                    (item[1].$ref && item[1].$ref.split('/').pop()) ||
+                    (item[1].items && item[1].items.$ref.split('/').pop()) ||
+                    '';
+                const schemaObj: schemaObjType = {
+                    paramsName: item[0],
+                    paramsType,
+                    desc: item[1].description || '',
+                };
+                if (!basicType.includes(paramsType))
+                    schemaObj.children = findData(paramsType);
+                result.push(schemaObj);
+            });
+            console.log(result);
+
+            return result;
+        }
+
+        respParamsCard.tableData = findData(schemaName);
+        // console.log(respParamsCard.tableData);
+    },
+});
+
+const getContent = (data: any) => {
+    if (data && data.content) {
+        return Object.keys(data.content || {})[0];
+    }
+    return '';
+};
+onMounted(() => {
+    requestCard.getData();
+    responseStatusCard.getData();
+});
+watch(
+    () => props.selectApi,
+    () => {
+        requestCard.getData();
+        responseStatusCard.getData();
+    },
+);
+
+watch([() => responseStatusCard.activeKey, () => props.selectApi], (n) => {
+    n[0] && respParamsCard.getData(n[0]);
+});
+</script>
+
+<style lang="less" scoped>
+.api-does-container {
+    .top {
+        width: 100%;
+
+        h5 {
+            font-weight: bold;
+            font-size: 16px;
+        }
+
+        .input {
+            display: flex;
+            margin: 24px 0;
+        }
+    }
+    p {
+        display: flex;
+        justify-content: space-between;
+        font-size: 14px;
+
+        .label {
+            font-weight: bold;
+        }
+    }
+    .api-card {
+        margin-top: 24px;
+        h5 {
+            position: relative;
+            padding-left: 10px;
+            font-weight: 600;
+            font-size: 16px;
+
+            &::before {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 4px;
+                height: 100%;
+                background-color: #1d39c4;
+                border-radius: 0 3px 3px 0;
+                content: ' ';
+            }
+        }
+        .content {
+            padding-left: 10px;
+
+            :deep(.jtable-body) {
+                padding: 0;
+
+                .jtable-body-header {
+                    display: none;
+                }
+            }
+        }
+    }
+}
+</style>

src/views/system/Apply/Api/components/ApiTest.vue

@@ -0,0 +1,51 @@
+<template>
+    <div class="api-test-container">
+        <div class="top">
+            <h5>{{ selectApi.summary }}</h5>
+            <div class="input">
+                <InputCard :value="selectApi.method" />
+                <a-input :value="selectApi?.url" disabled />
+                <span class="send">发送</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { apiDetailsType } from '../typing';
+import InputCard from './InputCard.vue';
+import { PropType } from 'vue';
+
+const props = defineProps({
+    selectApi: {
+        type: Object as PropType<apiDetailsType>,
+        required: true,
+    },
+});
+const { selectApi } = toRefs(props);
+</script>
+
+<style lang="less" scoped>
+.api-test-container {
+    .top {
+        width: 100%;
+
+        h5 {
+            font-weight: bold;
+            font-size: 16px;
+        }
+
+        .input {
+            display: flex;
+
+            .send {
+                width: 65px;
+                padding: 4px 15px;
+                font-size: 14px;
+                color: #fff;
+                background-color: #1890ff;
+            }
+        }
+    }
+}
+</style>

src/views/system/Apply/Api/components/ChooseApi.vue

@@ -0,0 +1,65 @@
+<template>
+    <div class="choose-api-container">
+        <JTable
+            :columns="columns"
+            :dataSource="props.tableData"
+            :rowSelection="rowSelection"
+            noPagination
+            model="TABLE"
+        >
+            <template #url="slotProps">
+                <span
+                    style="color: #1d39c4; cursor: pointer"
+                    @click="jump(slotProps.row)"
+                    >{{ slotProps.row.url }}</span
+                >
+            </template>
+        </JTable>
+
+        <a-button type="primary">保存</a-button>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { TableProps } from 'ant-design-vue';
+
+const emits = defineEmits(['update:clickApi'])
+const props = defineProps({
+    tableData: Array,
+    clickApi: Object
+});
+
+const columns = [
+    {
+        title: 'API',
+        dataIndex: 'url',
+        key: 'url',
+        scopedSlots: true,
+    },
+    {
+        title: '说明',
+        dataIndex: 'summary',
+        key: 'summary',
+    },
+];
+const rowSelection: TableProps['rowSelection'] = {
+    onChange: (selectedRowKeys, selectedRows) => {
+        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+    },
+};
+
+const jump = (row:object) => {
+    emits('update:clickApi',row)
+};
+</script>
+
+<style lang="less" scoped>
+.choose-api-container {
+    height: 100%;
+    
+    :deep(.jtable-body-header) {
+        display: none !important;
+    }
+}
+
+</style>

src/views/system/Apply/Api/components/InputCard.vue

@@ -0,0 +1,35 @@
+<template>
+    <span class="input-card-container" :class="props.value">
+        {{ props.value?.toLocaleUpperCase() }}
+    </span>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+    value: String,
+});
+</script>
+
+<style lang="less" scoped>
+.input-card-container {
+    padding: 4px 15px;
+    font-size: 14px;
+    color: #fff;
+
+    &.get {
+        background-color: #1890ff;
+    }
+    &.put {
+        background-color: #fa8c16;
+    }
+    &.post {
+        background-color: #52c41a;
+    }
+    &.delete {
+        background-color: #f5222d;
+    }
+    &.patch {
+        background-color: #a0d911;
+    }
+}
+</style>

src/views/system/Apply/Api/components/LeftTree.vue

@@ -0,0 +1,96 @@
+<template>
+    <a-tree
+        :tree-data="treeData"
+        @select="clickSelectItem"
+        showLine
+        class="left-tree-container"
+    >
+        <template #title="{ name }">
+            {{ name }}
+        </template>
+    </a-tree>
+</template>
+
+<script setup lang="ts">
+import { TreeProps } from 'ant-design-vue';
+
+import { getTreeOne_api, getTreeTwo_api } from '@/api/system/apiPage';
+import { treeNodeTpye } from '../typing';
+
+const emits = defineEmits(['select']);
+
+const treeData = ref<TreeProps['treeData']>([]);
+
+const getTreeData = () => {
+    let tree: treeNodeTpye[] = [];
+    getTreeOne_api().then((resp: any) => {
+        tree = resp.urls.map((item: any) => ({
+            ...item,
+            key: item.url,
+        }));
+        const allPromise = tree.map((item) => getTreeTwo_api(item.name));
+        Promise.all(allPromise).then((values) => {
+            values.forEach((item: any, i) => {
+                tree[i].children = combData(item?.paths);
+                tree[i].schemas = item.components.schemas
+            });
+            treeData.value = tree;
+        });
+    });
+};
+const clickSelectItem: TreeProps['onSelect'] = (key, node: any) => {
+    emits('select', node.node.dataRef, node.node?.parent.node.schemas);
+};
+
+onMounted(() => {
+    getTreeData();
+});
+
+const combData = (dataSource: object) => {
+    const apiList: treeNodeTpye[] = [];
+    const keys = Object.keys(dataSource);
+
+    keys.forEach((key) => {
+        const method = Object.keys(dataSource[key] || {})[0];
+        const name = dataSource[key][method].tags[0];
+        let apiObj: treeNodeTpye | undefined = apiList.find(
+            (item) => item.name === name,
+        );
+        if (apiObj) {
+            apiObj.apiList?.push({
+                url: key,
+                method: dataSource[key],
+            });
+        } else {
+            apiObj = {
+                name,
+                key: name,
+                apiList: [
+                    {
+                        url: key,
+                        method: dataSource[key],
+                    },
+                ],
+            };
+            apiList.push(apiObj);
+        }
+    });
+
+    return apiList;
+};
+</script>
+
+<style lang="less">
+.left-tree-container {
+    border-right: 1px solid #e9e9e9;
+    height: calc(100vh - 150px);
+    overflow-y: auto;
+    .ant-tree-list {
+        .ant-tree-list-holder-inner {
+            .ant-tree-switcher-noop {
+                display: none !important;
+            }
+        }
+    }
+}
+</style>

src/views/system/Apply/Api/index.vue

@@ -0,0 +1,84 @@
+<template>
+    <a-card class="api-page-container">
+        apply/api
+        <a-row :gutter="24">
+            <a-col :span="5">
+                <LeftTree @select="treeSelect" />
+            </a-col>
+            <a-col :span="19">
+                <ChooseApi
+                    v-show="!selectedApi.url"
+                    v-model:click-api="selectedApi"
+                    :table-data="tableData"
+                />
+
+                <div
+                    class="api-details"
+                    v-show="selectedApi.url && tableData.length > 0"
+                >
+                    <a-button @click="selectedApi = initSelectedApi" style="margin-bottom: 24px;"
+                        >返回</a-button
+                    >
+                    <a-tabs v-model:activeKey="activeKey" type="card">
+                        <a-tab-pane key="does" tab="文档">
+                            <ApiDoes :select-api="selectedApi" :schemas="schemas" />
+                        </a-tab-pane>
+                        <a-tab-pane key="test" tab="调试">
+                            <ApiTest :select-api="selectedApi" />
+                        </a-tab-pane>
+                    </a-tabs>
+                </div>
+            </a-col>
+        </a-row>
+    </a-card>
+</template>
+
+<script setup lang="ts" name="apiPage">
+import type { treeNodeTpye, apiObjType, apiDetailsType } from './typing';
+import LeftTree from './components/LeftTree.vue';
+import ChooseApi from './components/ChooseApi.vue';
+import ApiDoes from './components/ApiDoes.vue';
+import ApiTest from './components/ApiTest.vue';
+
+const tableData = ref([]);
+const treeSelect = (node: treeNodeTpye, nodeSchemas:object = {}) => {
+    schemas.value = nodeSchemas
+    if (!node.apiList) return;
+    const apiList: apiObjType[] = node.apiList as apiObjType[];
+    const table: any = [];
+    // 将对象形式的数据转换为表格需要的形式
+    apiList?.forEach((apiItem) => {
+        const { method, url } = apiItem;
+        for (const key in method) {
+            if (Object.prototype.hasOwnProperty.call(method, key)) {
+                table.push({
+                    ...method[key],
+                    url,
+                    method: key,
+                });
+            }
+        }
+    });
+    tableData.value = table;
+};
+
+const activeKey = ref('does');
+const schemas = ref({});
+const initSelectedApi:apiDetailsType = {
+    url: '',
+    method: '',
+    summary: '',
+    parameters: [],
+    responses: {},
+    requestBody: {}
+};
+const selectedApi = ref<apiDetailsType>(initSelectedApi);
+
+watch(tableData, () => (selectedApi.value = initSelectedApi));
+</script>
+
+<style scoped>
+.api-page-container {
+    height: 100%;
+}
+</style>

src/views/system/Apply/Api/typing.d.ts

@@ -0,0 +1,25 @@
+export type treeNodeTpye = {
+    name: string;
+    key: string;
+    schemas?:object;
+    link?: string;
+    apiList?: object[];
+    children?: treeNodeTpye[];
+
+};
+export type methodType = {
+    [key: string]: object
+}
+export type apiObjType = {
+    url: string,
+    method: methodType
+}
+
+export type apiDetailsType = {
+    url: string;
+    method: string;
+    summary: string;
+    parameters: any[];
+    requestBody?: any;
+    responses:object;
+}

src/views/system/DataSource/Management/index.vue

@@ -0,0 +1,398 @@
+<template>
+    <a-card class="mangement-container">
+        <div class="left">
+            <a-input-search
+                v-model:value="leftData.searchValue"
+                placeholder="请输入"
+                style="margin-bottom: 24px"
+            />
+            <!-- 使用v-if用于解决异步加载数据后不展开的问题 -->
+            <a-tree
+                v-if="leftData.treeData.length > 0"
+                showLine
+                defaultExpandAll
+                :tree-data="leftData.treeData"
+                v-model:selectedKeys="leftData.selectedKeys"
+                @select="leftData.onSelect"
+            >
+                <template #title="{ dataRef }">
+                    <div
+                        v-if="dataRef.root"
+                        :style="`
+                            justify-content: space-between;
+                            display: flex;
+                            align-items: center;
+                            `"
+                    >
+                        <span>
+                            {{ dataRef.title }}
+                        </span>
+                        <AIcon
+                            type="PlusOutlined"
+                            style="color: #1d39c4"
+                            @click="leftData.addTable"
+                        />
+                    </div>
+                    <span v-else>
+                        {{ dataRef.title }}
+                    </span>
+                </template>
+            </a-tree>
+        </div>
+        <div class="right">
+            <div class="btns">
+                <a-button type="primary" @click="table.clickSave"
+                    >保存</a-button
+                >
+            </div>
+            <JTable
+                ref="tableRef"
+                :columns="table.columns"
+                model="TABLE"
+                :dataSource="table.data"
+            >
+                <template #name="slotProps">
+                    <a-input
+                        :disabled="slotProps.scale !== undefined"
+                        v-model:value="slotProps.name"
+                        placeholder="请输入名称"
+                        :maxlength="64"
+                    />
+                </template>
+                <template #type="slotProps">
+                    <a-input
+                        v-model:value="slotProps.type"
+                        placeholder="请输入类型"
+                        :maxlength="64"
+                    />
+                </template>
+                <template #length="slotProps">
+                    <a-input-number
+                        v-model:value="slotProps.length"
+                        :min="0"
+                        :max="99999"
+                    />
+                </template>
+                <template #precision="slotProps">
+                    <a-input-number
+                        v-model:value="slotProps.precision"
+                        :min="0"
+                        :max="99999"
+                    />
+                </template>
+                <template #notnull="slotProps">
+                    <a-radio-group
+                        v-model:value="slotProps.notnull"
+                        button-style="solid"
+                    >
+                        <a-radio-button :value="true">是</a-radio-button>
+                        <a-radio-button :value="false">否</a-radio-button>
+                    </a-radio-group>
+                </template>
+                <template #comment="slotProps">
+                    <a-input
+                        v-model:value="slotProps.comment"
+                        placeholder="请输入说明"
+                    />
+                </template>
+                <template #action="slotProps">
+                    <PermissionButton
+                        :uhasPermission="`{permission}:delete`"
+                        type="link"
+                        :tooltip="{ title: '删除' }"
+                        :popConfirm="{
+                            title: `确认删除`,
+                            onConfirm: () => table.clickDel(slotProps),
+                        }"
+                        :disabled="slotProps.status"
+                    >
+                        <AIcon type="DeleteOutlined" />
+                    </PermissionButton>
+                </template>
+            </JTable>
+            <a-botton class="add-row" @click="table.addRow">
+                <AIcon type="PlusOutlined" /> 新增行
+            </a-botton>
+        </div>
+    </a-card>
+    <div class="dialogs">
+        <a-modal
+            v-model:visible="dialog.visible"
+            title="新增"
+            @ok="dialog.handleOk"
+        >
+            <a-form :model="dialog.form" ref="addFormRef">
+                <a-form-item
+                    label="名称"
+                    name="name"
+                    :rules="[
+                        {
+                            required: true,
+                            message: '请输入名称',
+                            trigger: 'change',
+                        },
+                        {
+                            max: 64,
+                            message: '最多可输入64个字符',
+                            trigger: 'change',
+                        },
+                        {
+                            pattern: /^[0-9].*$/,
+                            message: '不能以数字开头',
+                            trigger: 'change',
+                        },
+                        {
+                            pattern: /^\w+$/,
+                            message: '名称只能由数字、字母、下划线、中划线组成',
+                            trigger: 'change',
+                        },
+                    ]"
+                >
+                    <a-input
+                        v-model:value="dialog.form.name"
+                        placeholder="请输入名称"
+                    />
+                </a-form-item>
+            </a-form>
+        </a-modal>
+    </div>
+</template>
+
+<script setup lang="ts" name="Management">
+import {
+    getDataSourceInfo_api,
+    rdbTree_api,
+    rdbTables_api,
+    saveTable_api,
+} from '@/api/system/dataSource';
+import { FormInstance, message } from 'ant-design-vue';
+import { DataNode } from 'ant-design-vue/lib/tree';
+import type { dbColumnType, dictItemType, sourceItemType } from '../typing';
+
+const id = useRoute().query.id as string;
+
+const info = reactive({
+    data: {} as sourceItemType,
+    init: () => {
+        id &&
+            getDataSourceInfo_api(id).then((resp: any) => {
+                info.data = resp.result;
+            });
+    },
+});
+
+const leftData = reactive({
+    searchValue: '',
+    sourceTree: [] as dictItemType[],
+    treeData: [] as DataNode[],
+    selectedKeys: [] as string[],
+    oldKey: '',
+
+    init: () => {
+        leftData.getTree();
+        watch(
+            [
+                () => leftData.searchValue,
+                () => leftData.sourceTree,
+                () => info.data,
+            ],
+            (n) => {
+                if (leftData.sourceTree.length < 1 || !info.data.shareConfig)
+                    return;
+                let filterArr = [];
+                if (leftData.searchValue) {
+                    filterArr = leftData.sourceTree.filter((item) =>
+                        item.name.includes(n[0]),
+                    );
+                } else filterArr = leftData.sourceTree;
+                leftData.treeData = [
+                    {
+                        title: info.data.shareConfig.schema,
+                        key: info.data.shareConfig.schema,
+                        root: true,
+                        children: filterArr.map((item) => ({
+                            title: item.name,
+                            key: item.name,
+                        })),
+                    },
+                ];
+                leftData.selectedKeys = [filterArr[0].name];
+                leftData.onSelect([filterArr[0].name]);
+            },
+            {},
+        );
+    },
+    getTree: () => {
+        rdbTree_api(id)
+            .then((resp: any) => {
+                leftData.sourceTree = resp.result;
+            })
+            .catch(() => {});
+    },
+    onSelect: (selectedKeys: string[], e?: any) => {
+        if (e?.node?.root) {
+            leftData.selectedKeys = [leftData.oldKey];
+            return;
+        }
+        leftData.oldKey = selectedKeys[0];
+        const key = selectedKeys[0];
+        table.getTabelData(key);
+    },
+    addTable: (e: Event) => {
+        e.stopPropagation();
+    },
+});
+
+const table = reactive({
+    columns: [
+        {
+            title: '列名',
+            dataIndex: 'name',
+            key: 'name',
+            scopedSlots: true,
+        },
+        {
+            title: '类型',
+            dataIndex: 'type',
+            key: 'type',
+            scopedSlots: true,
+        },
+        {
+            title: '长度',
+            dataIndex: 'length',
+            key: 'length',
+            scopedSlots: true,
+        },
+        {
+            title: '精度',
+            dataIndex: 'precision',
+            key: 'precision',
+            scopedSlots: true,
+        },
+        {
+            title: '不能为空',
+            dataIndex: 'notnull',
+            key: 'notnull',
+            scopedSlots: true,
+        },
+        {
+            title: '说明',
+            dataIndex: 'comment',
+            key: 'comment',
+            scopedSlots: true,
+        },
+        {
+            title: '操作',
+            dataIndex: 'action',
+            key: 'action',
+            scopedSlots: true,
+        },
+    ],
+    data: [] as dbColumnType[],
+
+    getTabelData: (key: string) => {
+        rdbTables_api(id, key).then((resp: any) => {
+            table.data = resp.result.columns;
+        });
+    },
+    addRow: () => {
+        const initData: dbColumnType = {
+            precision: 0,
+            length: 0,
+            notnull: false,
+            type: '',
+            comment: '',
+            name: '',
+        };
+        table.data.push(initData);
+    },
+    clickSave: () => {
+        const params = {
+            name: leftData.selectedKeys[0],
+            columns: table.data,
+        };
+        saveTable_api(id, params).then(() => {
+            table.getTabelData(params.name);
+        });
+    },
+    clickDel: (row: any) => {},
+});
+
+const addFormRef = ref<FormInstance>();
+const dialog = reactive({
+    visible: false,
+    form: {
+        name: '',
+    },
+    handleOk: () => {
+        addFormRef.value &&
+            addFormRef.value.validate().then(() => {
+                const name = dialog.form.name;
+                leftData.sourceTree.unshift({
+                    id: name,
+                    name,
+                });
+                leftData.oldKey = name;
+                leftData.selectedKeys = [name];
+                table.data = [];
+            });
+    },
+});
+
+init();
+function init() {
+    info.init();
+    leftData.init();
+}
+</script>
+
+<style lang="less" scoped>
+.mangement-container {
+    padding: 24px;
+    background-color: transparent;
+    :deep(.ant-card-body) {
+        display: flex;
+        background-color: #fff;
+
+        .left {
+            flex-basis: 280px;
+            padding-right: 24px;
+            box-sizing: border-box;
+
+            .ant-tree-treenode {
+                width: 100%;
+                .ant-tree-switcher-noop {
+                    display: none;
+                }
+                .ant-tree-node-content-wrapper {
+                    width: 100%;
+                    .ant-tree-title {
+                        width: 100%;
+                    }
+                }
+                &:first-child .ant-tree-node-selected {
+                    background-color: transparent;
+                }
+            }
+        }
+        .right {
+            width: calc(100% - 280px);
+            box-sizing: border-box;
+            border-left: 1px solid #f0f0f0;
+
+            .btns {
+                display: flex;
+                justify-content: right;
+                padding: 0px 24px;
+            }
+
+            .add-row {
+                display: block;
+                text-align: center;
+                width: 100%;
+                cursor: pointer;
+            }
+        }
+    }
+}
+</style>

src/views/system/DataSource/components/EditDialog.vue

@@ -34,9 +34,9 @@
                     >
                         <a-select
                             v-model:value="form.data.typeId"
-                            style="width: 120px"
                             :options="form.typeOptions"
                             placeholder="请选择类型"
+                            :disabled="!!form.data.id"
                         />
                     </a-form-item>
                 </a-col>
@@ -83,7 +83,7 @@
                     </a-form-item>
                 </a-col>
             </a-row>
-            <a-row :gutter="24">
+            <a-row :gutter="24" v-show="form.data.typeId">
                 <a-col :span="12">
                     <a-form-item
                         :name="['shareConfig', 'username']"
@@ -179,28 +179,42 @@
 </template>
 
 <script setup lang="ts">
-import { getDataTypeDict_api } from '@/api/system/dataSource';
+import {
+    getDataTypeDict_api,
+    saveDataSource_api,
+} from '@/api/system/dataSource';
+import { FormInstance, message } from 'ant-design-vue';
 import type { dictItemType, optionItemType, sourceItemType } from '../typing';
 
+const emits = defineEmits(['confirm']);
+
 // 弹窗相关
 const dialog = {
     title: '',
     loading: ref<boolean>(false),
     visible: ref<boolean>(false),
-    handleOk: () => {},
+    handleOk: () => {
+        formRef.value?.validate().then(() => {
+            form.submit();
+        });
+    },
     // 打开弹窗
-    changeVisible: (row: sourceItemType) => {
+    openDialog: (row: sourceItemType) => {
         if (row.id) dialog.title = '编辑数据源';
         else dialog.title = '新增数据源';
         form.data = { ...row };
-        dialog.visible.value = true;
+        nextTick(() => {
+            formRef.value?.clearValidate();
+            dialog.visible.value = true;
+        });
     },
 };
 // 将打开弹窗的操作暴露给父组件
 defineExpose({
-    openDialog: dialog.changeVisible,
+    openDialog: dialog.openDialog,
 });
 
+const formRef = ref<FormInstance>();
 const form = reactive({
     data: {
         shareConfig: {},
@@ -217,8 +231,16 @@ const form = reactive({
             }));
         });
     },
+    submit: () => {
+        dialog.loading.value = true;
+        saveDataSource_api(form.data)
+            .then(() => {
+                message.success('操作成功');
+                emits('confirm');
+                dialog.visible.value = false;
+            })
+            .finally(() => (dialog.loading.value = false));
+    },
 });
 form.getTypeOption();
 </script>
-
-<style scoped></style>

src/views/system/DataSource/index.vue

@@ -66,6 +66,7 @@
                                     `/system/DataSource/Management?id=${slotProps.id}`,
                                 )
                         "
+                        :disabled="slotProps?.typeId === 'rabbitmq' || !table.getRowStatus(slotProps)"
                     >
                         <AIcon type="icon-ziyuankuguanli" />
                     </PermissionButton>
@@ -131,10 +132,11 @@ import {
     getDataSourceList_api,
     getDataTypeDict_api,
     changeStatus_api,
+    delDataSource_api
 } from '@/api/system/dataSource';
 import { message } from 'ant-design-vue';
 
-const permission = 'system/Relationship';
+const permission = 'system/DataSource';
 
 const router = useRouter();
 
@@ -226,6 +228,7 @@ const table = {
             title: '说明',
             dataIndex: 'description',
             key: 'description',
+            ellipsis: true,
         },
         {
             title: '状态',
@@ -240,6 +243,7 @@ const table = {
             key: 'action',
             scopedSlots: true,
             width: '200px',
+            fixed:'right'
         },
     ],
 
@@ -265,16 +269,16 @@ const table = {
     },
     // 打开编辑弹窗
     openDialog: (row: sourceItemType | {}) => {
-        editDialogRef.value.openDialog({shareConfig:{},...row});
+        editDialogRef.value.openDialog({ shareConfig: {}, ...row });
     },
     // 删除
     clickDel: (row: sourceItemType) => {
-        // delRelation_api(row.id).then((resp: any) => {
+        delDataSource_api(row.id as string).then((resp: any) => {
-        //     if (resp.status === 200) {
+            if (resp.status === 200) {
-        //         tableRef.value?.reload();
+                tableRef.value?.reload();
-        //         message.success('操作成功!');
+                message.success('操作成功!');
-        //     }
+            }
-        // });
+        });
     },
     clickChangeStatus: (row: sourceItemType) => {
         const status = row.state.value === 'enabled' ? '_disable' : '_enable';

src/views/system/DataSource/typing.d.ts

@@ -1,6 +1,7 @@
 export type dictItemType = {
     id: string,
-    name: string
+    name: string,
+    children?: dictItemType
 }
 export type optionItemType = {
     label: string,
@@ -11,14 +12,26 @@ export type sourceItemType = {
     name: string,
     state: { text: string, value: "enabled" | 'disabled' },
     typeId: string,
-    shareConfig:{
+    shareConfig: {
-        url:string,
+        url: string,
-        adminUrl:string,
+        adminUrl: string,
-        addresses:string,
+        addresses: string,
-        username:string,
+        username: string,
-        password:string,
+        password: string,
-        virtualHost:string,
+        virtualHost: string,
-        schema:string
+        schema: string
     }
     description: string
+}
+
+// 数据库字段
+export type dbColumnType = {
+    previousName?: string,
+    type: String,
+    length: number,
+    precision: number,
+    notnull: boolean,
+    comment: string,
+    name: string,
+    scale?:number
 }

src/views/system/apiPage/components/ApiDoes.vue

@@ -73,7 +73,7 @@
 </template>
 
 <script setup lang="ts">
-import { apiDetailsType } from '../index';
+import type { apiDetailsType } from '../typing';
 import InputCard from './InputCard.vue';
 import { PropType } from 'vue';
 
@@ -200,7 +200,7 @@ const respParamsCard = reactive<tableCardType>({
 
         const schemaName = responseStatusCard.tableData.find(
             (item: any) => item.code === code,
-        ).schema;
+        )?.schema;
         const schemas = toRaw(props.schemas);
         function findData(schemaName: string) {
             if (!schemaName || !schemas[schemaName]) {

src/views/system/apiPage/components/ApiTest.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script setup lang="ts">
-import { apiDetailsType } from '../index';
+import { apiDetailsType } from '../typing';
 import InputCard from './InputCard.vue';
 import { PropType } from 'vue';
 

src/views/system/apiPage/components/LeftTree.vue

@@ -15,7 +15,7 @@
 import { TreeProps } from 'ant-design-vue';
 
 import { getTreeOne_api, getTreeTwo_api } from '@/api/system/apiPage';
-import { treeNodeTpye } from '../index';
+import { treeNodeTpye } from '../typing';
 
 const emits = defineEmits(['select']);
 

src/views/system/apiPage/index.vue

@@ -33,7 +33,7 @@
 </template>
 
 <script setup lang="ts" name="apiPage">
-import { treeNodeTpye, apiObjType, apiDetailsType } from './index';
+import type { treeNodeTpye, apiObjType, apiDetailsType } from './typing';
 import LeftTree from './components/LeftTree.vue';
 import ChooseApi from './components/ChooseApi.vue';
 import ApiDoes from './components/ApiDoes.vue';

src/views/system/apiPage/typing.d.ts

@@ -0,0 +1,25 @@
+export type treeNodeTpye = {
+    name: string;
+    key: string;
+    schemas?:object;
+    link?: string;
+    apiList?: object[];
+    children?: treeNodeTpye[];
+
+};
+export type methodType = {
+    [key: string]: object
+}
+export type apiObjType = {
+    url: string,
+    method: methodType
+}
+
+export type apiDetailsType = {
+    url: string;
+    method: string;
+    summary: string;
+    parameters: any[];
+    requestBody?: any;
+    responses:object;
+}

vite.config.ts

@@ -83,7 +83,9 @@ export default defineConfig(({ mode}) => {
                   // target: 'http://192.168.32.244:8881',
                 //   target: 'http://47.112.135.104:5096', // opcua
                 //   target: 'http://120.77.179.54:8844', // 120测试
-                  target: 'http://47.108.63.174:8845', // 测试
+                //   target: 'http://47.108.63.174:8845', // 测试
+                  target: 'http://120.77.179.54:8844',
+                  ws: 'ws://120.77.179.54:8844',
                   changeOrigin: true,
                   rewrite: (path) => path.replace(/^\/api/, '')
               }

yarn.lock

@@ -784,11 +784,16 @@
   dependencies:
     moment "*"
 
-"@types/node@*", "@types/node@^18.11.17":
+"@types/node@*":
   version "18.11.18"
   resolved "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz"
   integrity sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==
 
+"@types/node@^18.14.0":
+  version "18.14.0"
+  resolved "https://registry.npmmirror.com/@types/node/-/node-18.14.0.tgz#94c47b9217bbac49d4a67a967fdcdeed89ebb7d0"
+  integrity sha512-5EWrvLmglK+imbCJY0+INViFWUHg1AHel1sq4ZVSfdcNqGy9Edv3UB9IIzzg+xPaUcAgZYcfVs2fBcwDeZzU0A==
+
 "@types/normalize-package-data@^2.4.0":
   version "2.4.1"
   resolved "https://registry.npmmirror.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz"