From 66f77fbbd46f462ed286757a1299eddad1d5edf4 Mon Sep 17 00:00:00 2001
From: easy <1358086367@qq.com>
Date: Wed, 1 Feb 2023 11:00:20 +0800
Subject: [PATCH 01/13] =?UTF-8?q?update:=20=E8=8F=9C=E5=8D=95=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86-=E6=9A=82=E5=AD=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/Menu/Detail/ButtonMange.vue  | 16 +++++-----
 src/views/system/Menu/Detail/index.vue        |  5 ++++
 .../Menu/components/ButtonAddDialog.vue       | 30 +++++++++++++++----
 .../system/Menu/components/PermissChoose.vue  |  6 +++-
 src/views/system/Menu/index.vue               |  8 ++++-
 5 files changed, 49 insertions(+), 16 deletions(-)

diff --git a/src/views/system/Menu/Detail/ButtonMange.vue b/src/views/system/Menu/Detail/ButtonMange.vue
index ec037a7d..861b510f 100644
--- a/src/views/system/Menu/Detail/ButtonMange.vue
+++ b/src/views/system/Menu/Detail/ButtonMange.vue
@@ -4,13 +4,13 @@
             ref="tableRef"
             :columns="table.columns"
             model="TABLE"
-            :dataSource="table.data"
+            :dataSource="table.tableData"
         >
             <template #headerTitle>
                 <a-button
                     type="primary"
                     style="margin-right: 10px"
-                    @click="() => dialog.openDialog()"
+                    @click="() => dialog.openDialog('新增')"
                     ><plus-outlined />新增</a-button
                 >
             </template>
@@ -21,7 +21,7 @@
                         <a-button
                             style="padding: 0"
                             type="link"
-                            @click="() => dialog.openDialog(slotProps)"
+                            @click="() => dialog.openDialog('编辑', slotProps)"
                         >
                             <edit-outlined />
                         </a-button>
@@ -31,7 +31,7 @@
                         <a-button
                             style="padding: 0"
                             type="link"
-                            @click="() => dialog.openDialog(slotProps)"
+                            @click="() => dialog.openDialog('查看', slotProps)"
                         >
                             <edit-outlined />
                         </a-button>
@@ -81,8 +81,8 @@ const routeParams = {
 const dialogRef = ref<any>(null);
 const dialog = {
     // 打开弹窗
-    openDialog: (row?: object) => {
-        dialogRef.value && dialogRef.value.openDialog(row);
+    openDialog: (mode: string, row?: object) => {
+        dialogRef.value && dialogRef.value.openDialog(mode, row);
     },
     confirm: () => {},
 };
@@ -114,11 +114,11 @@ const table = reactive({
             width: 240,
         },
     ],
-    data: [] as tableDataItem[],
+    tableData: [] as tableDataItem[],
     getList: () => {
         routeParams.id &&
             getMenuInfo_api(routeParams.id).then((resp: any) => {
-                table.data = resp.result.buttons as tableDataItem[];
+                table.tableData = resp.result.buttons as tableDataItem[];
             });
     },
 });
diff --git a/src/views/system/Menu/Detail/index.vue b/src/views/system/Menu/Detail/index.vue
index 08de6fd6..9c40f0e1 100644
--- a/src/views/system/Menu/Detail/index.vue
+++ b/src/views/system/Menu/Detail/index.vue
@@ -17,6 +17,11 @@ const activeKey = ref('basic');
 
 <style lang="less" scoped>
 .menu-detail-container {
+    :deep(.ant-tabs-nav) {
+        background-color: #fff;
+        padding-left: 24px;
+        margin-bottom: 0;
+    }
     .ant-tabs-tabpane {
         background-color: #f0f2f5;
         padding: 24px;
diff --git a/src/views/system/Menu/components/ButtonAddDialog.vue b/src/views/system/Menu/components/ButtonAddDialog.vue
index 0099a601..78f9d309 100644
--- a/src/views/system/Menu/components/ButtonAddDialog.vue
+++ b/src/views/system/Menu/components/ButtonAddDialog.vue
@@ -1,7 +1,7 @@
 <template>
     <a-modal
         v-model:visible="dialog.visible"
-        title="新增"
+        :title="form.mode"
         width="660px"
         @ok="dialog.handleOk"
     >
@@ -14,7 +14,10 @@
                     { max: 64, message: '最多可输入64个字符' },
                 ]"
             >
-                <a-input v-model:value="form.data.id" />
+                <a-input
+                    v-model:value="form.data.id"
+                    :disabled="form.mode !== '新增'"
+                />
             </a-form-item>
             <a-form-item
                 label="名称"
@@ -24,13 +27,20 @@
                     { max: 64, message: '最多可输入64个字符' },
                 ]"
             >
-                <a-input v-model:value="form.data.name" />
+                <a-input
+                    v-model:value="form.data.name"
+                    :disabled="form.mode === '查看'"
+                />
             </a-form-item>
-            <a-form-item label="权限">
+            <a-form-item
+                label="权限"
+                :rules="[{ required: true, message: '请选择权限', validator: form.checkPermission, }]"
+            >
                 <PermissChoose
                     :first-width="8"
                     max-height="350px"
                     v-model:value="form.data.permissions"
+                    :disabled="form.mode === '查看'"
                 />
             </a-form-item>
             <a-form-item label="说明" name="describe">
@@ -38,6 +48,7 @@
                     v-model:value="form.data.describe"
                     :rows="4"
                     placeholder="请输入说明"
+                    :disabled="form.mode === '查看'"
                 />
             </a-form-item>
         </a-form>
@@ -45,6 +56,7 @@
 </template>
 
 <script setup lang="ts">
+import { Rule } from 'ant-design-vue/es/form';
 import PermissChoose from '../components/PermissChoose.vue';
 
 const emits = defineEmits(['confirm']);
@@ -53,9 +65,10 @@ const dialog = reactive({
     handleOk: () => {
         dialog.changeVisible();
     },
-    changeVisible: (formValue?: formType, show?: boolean) => {
-        dialog.visible = show === undefined ? !dialog.visible : show;
+    changeVisible: (mode?: string, formValue?: formType) => {
+        dialog.visible = !dialog.visible;
         form.data = formValue || { ...initForm };
+        form.mode = mode || '';
         console.log(1111111111, form.data);
     },
 });
@@ -67,6 +80,11 @@ const initForm = {
 } as formType;
 const form = reactive({
     data: { ...initForm },
+    mode: '',
+    checkPermission:async (_rule: Rule, value: string[])=>{
+        if(!value || value.length < 1) return Promise.reject('请选择权限')
+        return Promise.resolve()
+    }
 });
 
 // 将打开弹窗的操作暴露给父组件
diff --git a/src/views/system/Menu/components/PermissChoose.vue b/src/views/system/Menu/components/PermissChoose.vue
index 2657443e..7cc248c0 100644
--- a/src/views/system/Menu/components/PermissChoose.vue
+++ b/src/views/system/Menu/components/PermissChoose.vue
@@ -6,6 +6,7 @@
             allowClear
             placeholder="请输入权限名称"
             @input="search.search"
+            :disabled="props.disabled"
         />
 
         <div class="permission-table">
@@ -24,6 +25,7 @@
                             v-model:checked="rowItem.checkAll"
                             :indeterminate="rowItem.indeterminate"
                             @change="() => permission.selectAllOpions(rowItem)"
+                            :disabled="props.disabled"
                         >
                             {{ rowItem.name }}
                         </a-checkbox>
@@ -33,6 +35,7 @@
                             v-model:value="rowItem.checkedList"
                             :options="rowItem.options"
                             @change="((checkValue:string[])=>permission.selectOption(rowItem, checkValue))"
+                            :disabled="props.disabled"
                         />
                     </a-col>
                 </a-row>
@@ -48,6 +51,7 @@ const props = defineProps<{
     value: any[];
     firstWidth: number;
     maxHeight: string;
+    disabled: boolean;
 }>();
 const emits = defineEmits(['update:value']);
 const searchValue = ref<string>('');
@@ -128,7 +132,7 @@ const permission = reactive({
     },
     makeList: (checkedValue: any[], sourceList: any[]): permissionType[] => {
         console.log(checkedValue);
-        
+
         const result = sourceList.map((item) => {
             const checked = checkedValue.find(
                 (checkedItem) => checkedItem.permission === item.id,
diff --git a/src/views/system/Menu/index.vue b/src/views/system/Menu/index.vue
index c218aa80..a8c40c11 100644
--- a/src/views/system/Menu/index.vue
+++ b/src/views/system/Menu/index.vue
@@ -8,6 +8,7 @@
             :request="table.getList"
             model="TABLE"
             :params="query.params"
+
         >
             <template #headerTitle>
                 <a-button
@@ -252,4 +253,9 @@ const table = reactive({
 });
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.menu-container {
+    padding: 24px;
+}
+
+</style>

From 15e19f87146fa0123687f14db80c5e9dcefca86a Mon Sep 17 00:00:00 2001
From: jackhoo_98 <jackhoo_98@foxmail.com>
Date: Wed, 1 Feb 2023 11:38:22 +0800
Subject: [PATCH 02/13] =?UTF-8?q?fix:=20=E8=AE=BE=E5=A4=87=E6=8E=A5?=
 =?UTF-8?q?=E5=85=A5=E7=BD=91=E5=85=B3/=E8=AF=81=E4=B9=A6=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=20=E4=BB=A3=E7=A0=81=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/link/AccessConfig/Detail/index.vue  |  82 ++++----
 .../AccessConfig/components/Channel/index.vue |  10 +-
 .../AccessConfig/components/Cloud/Ctwing.vue  |  18 +-
 .../AccessConfig/components/Cloud/OneNet.vue  |  17 +-
 .../AccessConfig/components/Edge/index.vue    |  14 +-
 .../AccessConfig/components/Media/GB28181.vue |  10 +-
 .../AccessConfig/components/Media/index.vue   |  10 +-
 .../link/AccessConfig/components/Network.vue  |  40 ++--
 src/views/link/AccessConfig/index.vue         |  33 +--
 src/views/link/Certificate/Detail/index.vue   | 196 +++++++++---------
 src/views/link/Certificate/index.vue          |  40 ++--
 11 files changed, 238 insertions(+), 232 deletions(-)

diff --git a/src/views/link/AccessConfig/Detail/index.vue b/src/views/link/AccessConfig/Detail/index.vue
index 3211fd75..f15fcdf3 100644
--- a/src/views/link/AccessConfig/Detail/index.vue
+++ b/src/views/link/AccessConfig/Detail/index.vue
@@ -1,42 +1,44 @@
 <template>
-    <a-spin :spinning="loading">
-        <a-card :bordered="false">
-            <div v-if="type && modeType === 'add'">
-                <Provider
-                    @onClick="goProviders"
-                    :dataSource="dataSource"
-                ></Provider>
-            </div>
-            <div v-else>
-                <div v-if="!id"><a @click="goBack">返回</a></div>
-                <AccessNetwork
-                    v-if="showType === 'network'"
-                    :provider="provider"
-                    :data="data"
-                />
-                <Media
-                    v-if="showType === 'media'"
-                    :provider="provider"
-                    :data="data"
-                />
-                <Channel
-                    v-if="showType === 'channel'"
-                    :provider="provider"
-                    :data="data"
-                />
-                <Edge
-                    v-if="showType === 'edge'"
-                    :provider="provider"
-                    :data="data"
-                />
-                <Cloud
-                    v-if="showType === 'cloud'"
-                    :provider="provider"
-                    :data="data"
-                />
-            </div>
-        </a-card>
-    </a-spin>
+    <page-container>
+        <a-spin :spinning="loading">
+            <a-card :bordered="false">
+                <div v-if="type && id === ':id'">
+                    <Provider
+                        @onClick="goProviders"
+                        :dataSource="dataSource"
+                    ></Provider>
+                </div>
+                <div v-else>
+                    <div v-if="!id"><a @click="goBack">返回</a></div>
+                    <AccessNetwork
+                        v-if="showType === 'network'"
+                        :provider="provider"
+                        :data="data"
+                    />
+                    <Media
+                        v-if="showType === 'media'"
+                        :provider="provider"
+                        :data="data"
+                    />
+                    <Channel
+                        v-if="showType === 'channel'"
+                        :provider="provider"
+                        :data="data"
+                    />
+                    <Edge
+                        v-if="showType === 'edge'"
+                        :provider="provider"
+                        :data="data"
+                    />
+                    <Cloud
+                        v-if="showType === 'cloud'"
+                        :provider="provider"
+                        :data="data"
+                    />
+                </div>
+            </a-card>
+        </a-spin>
+    </page-container>
 </template>
 
 <script lang="ts" setup name="AccessConfigDetail">
@@ -51,7 +53,7 @@ import Cloud from '../components/Cloud/index.vue';
 
 const route = useRoute();
 
-const modeType = route.params.type as string;
+const view = route.query.view as string;
 const id = route.params.id as string;
 
 const dataSource = ref([]);
@@ -138,7 +140,7 @@ const queryProviders = async () => {
 };
 
 const getProvidersData = async () => {
-    if (id && modeType !== 'add') {
+    if (id !== ':id') {
         getProviders().then((response) => {
             if (response.status === 200) {
                 const list = getTypeList(response.result);
diff --git a/src/views/link/AccessConfig/components/Channel/index.vue b/src/views/link/AccessConfig/components/Channel/index.vue
index 8e8ffd74..08340b9b 100644
--- a/src/views/link/AccessConfig/components/Channel/index.vue
+++ b/src/views/link/AccessConfig/components/Channel/index.vue
@@ -40,7 +40,7 @@
                             </a-form-item>
                             <a-form-item>
                                 <a-button
-                                    v-if="modeType !== 'view'"
+                                    v-if="view === 'false'"
                                     type="primary"
                                     html-type="submit"
                                     >保存</a-button
@@ -96,7 +96,7 @@ interface FormState {
     description: string;
 }
 const route = useRoute();
-const modeType = route.params.type as string;
+const view = route.query.view as string;
 const id = route.params.id as string;
 
 const props = defineProps({
@@ -126,9 +126,7 @@ const onFinish = async (values: any) => {
         channel: providerId === 'modbus-tcp' ? 'modbus' : 'opc-ua',
     };
     const resp =
-        !!id && modeType !== 'add'
-            ? await update({ ...params, id })
-            : await save(params);
+        id === ':id' ? await save(params) : await update({ ...params, id });
     if (resp.status === 200) {
         message.success('操作成功！');
         // if (params.get('save')) {
@@ -145,7 +143,7 @@ const onFinish = async (values: any) => {
 };
 
 onMounted(() => {
-    if (modeType !== 'add') {
+    if (id === ':id') {
         formState.value = {
             name: props.data.name,
             description: props.data?.description || '',
diff --git a/src/views/link/AccessConfig/components/Cloud/Ctwing.vue b/src/views/link/AccessConfig/components/Cloud/Ctwing.vue
index 026bf4ef..4e77e9ef 100644
--- a/src/views/link/AccessConfig/components/Cloud/Ctwing.vue
+++ b/src/views/link/AccessConfig/components/Cloud/Ctwing.vue
@@ -283,7 +283,7 @@
                 下一步
             </a-button>
             <a-button
-                v-if="current === 2 && modeType !== 'view'"
+                v-if="current === 2 && view === 'false'"
                 type="primary"
                 style="margin-right: 8px"
                 @click="saveData"
@@ -383,7 +383,7 @@ interface Form {
     description: string;
 }
 const route = useRoute();
-const modeType = route.params.type as string;
+const view = route.query.view as string;
 const id = route.params.id as string;
 
 const props = defineProps({
@@ -450,13 +450,13 @@ const saveData = async () => {
         transport: 'HTTP_SERVER',
     };
     const resp =
-        !!id && modeType !== 'add'
-            ? await update({
+        id === ':id'
+            ? await save(params)
+            : await update({
                   ...props.data,
                   ...params,
-              })
-            : await save(params);
-
+                  id,
+              });
     if (resp.status === 200) {
         message.success('操作成功！');
         // 回到列表页面
@@ -489,7 +489,7 @@ const queryProcotolList = async (id: string, params = {}) => {
 
 const addProcotol = () => {
     // const url = this.$store.state.permission.routes['Link/Protocol']
-    const url = '/demo';
+    const url = '/iot/link/protocol';
     const tab = window.open(
         `${window.location.origin + window.location.pathname}#${url}?save=true`,
     );
@@ -518,7 +518,7 @@ const prev = () => {
     current.value = current.value - 1;
 };
 onMounted(() => {
-    if (modeType !== 'add') {
+    if (id !== ':id') {
         formState.value = props.data.configuration;
         procotolCurrent.value = props.data.protocol;
         formData.value = {
diff --git a/src/views/link/AccessConfig/components/Cloud/OneNet.vue b/src/views/link/AccessConfig/components/Cloud/OneNet.vue
index cb066751..3e91d432 100644
--- a/src/views/link/AccessConfig/components/Cloud/OneNet.vue
+++ b/src/views/link/AccessConfig/components/Cloud/OneNet.vue
@@ -377,7 +377,7 @@
             </a-button>
             <a-button
                 style="margin-right: 8px"
-                v-if="current === 2 && modeType !== 'view'"
+                v-if="current === 2 && view === 'false'"
                 type="primary"
                 @click="saveData"
             >
@@ -479,7 +479,7 @@ interface Form {
     description: string;
 }
 const route = useRoute();
-const modeType = route.params.type as string;
+const view = route.query.view as string;
 const id = route.params.id as string;
 
 const props = defineProps({
@@ -547,12 +547,13 @@ const saveData = async () => {
         transport: 'HTTP_SERVER',
     };
     const resp =
-        !!id && modeType !== 'add'
-            ? await update({
+        id === ':id'
+            ? await save(params)
+            : await update({
                   ...props.data,
                   ...params,
-              })
-            : await save(params);
+                  id,
+              });
 
     if (resp.status === 200) {
         message.success('操作成功！');
@@ -585,7 +586,7 @@ const queryProcotolList = async (id: string, params = {}) => {
 
 const addProcotol = () => {
     // const url = this.$store.state.permission.routes['Link/Protocol']
-    const url = '/demo';
+    const url = '/iot/link/protocol';
     const tab = window.open(
         `${window.location.origin + window.location.pathname}#${url}?save=true`,
     );
@@ -615,7 +616,7 @@ const prev = () => {
 };
 
 onMounted(() => {
-    if (modeType !== 'add') {
+    if (id !== ':id') {
         formState.value = props.data.configuration;
         procotolCurrent.value = props.data.protocol;
         formData.value = {
diff --git a/src/views/link/AccessConfig/components/Edge/index.vue b/src/views/link/AccessConfig/components/Edge/index.vue
index 2ac57f96..0a21a879 100644
--- a/src/views/link/AccessConfig/components/Edge/index.vue
+++ b/src/views/link/AccessConfig/components/Edge/index.vue
@@ -140,7 +140,7 @@
                             </a-form-item>
                             <a-form-item>
                                 <a-button
-                                    v-if="current !== 1 && modeType !== 'view'"
+                                    v-if="current !== 1 && view === 'false'"
                                     type="primary"
                                     html-type="submit"
                                     >保存</a-button
@@ -179,7 +179,7 @@
                 下一步
             </a-button>
             <a-button
-                v-if="current === 1 && modeType !== 'view'"
+                v-if="current === 1 && view === 'false'"
                 type="primary"
                 style="margin-right: 8px"
                 @click="saveData"
@@ -297,7 +297,7 @@ interface FormState {
     description: string;
 }
 const route = useRoute();
-const modeType = route.params.type as string;
+const view = route.query.view as string;
 const id = route.params.id as string;
 
 const props = defineProps({
@@ -338,9 +338,7 @@ const onFinish = async (values: any) => {
     };
     if (networkCurrent.value) params.channelId = networkCurrent.value;
     const resp =
-        !!id && modeType !== 'add'
-            ? await update({ ...params, id })
-            : await save(params);
+        id === ':id' ? await save(params) : await update({ ...params, id });
     if (resp.status === 200) {
         message.success('操作成功！');
         // if (params.get('save')) {
@@ -392,7 +390,7 @@ const saveData = async () => {
 
 const addNetwork = () => {
     // const url = this.$store.state.permission.routes['Link/Type/Detail']
-    const url = '/demo';
+    const url = '/iot/link/type/detail/:id';
     const tab = window.open(
         `${window.location.origin + window.location.pathname}#${url}?type=${
             NetworkTypeMapping.get(props.provider?.id) || ''
@@ -421,7 +419,7 @@ onMounted(() => {
     if (props.provider.id === 'official-edge-gateway') {
         queryNetworkList(props.provider.id, '');
     }
-    if (modeType !== 'add') {
+    if (id !== ':id') {
         formState.value = {
             name: props.data.name,
             description: props.data?.description || '',
diff --git a/src/views/link/AccessConfig/components/Media/GB28181.vue b/src/views/link/AccessConfig/components/Media/GB28181.vue
index 8d05ce36..a3c04aad 100644
--- a/src/views/link/AccessConfig/components/Media/GB28181.vue
+++ b/src/views/link/AccessConfig/components/Media/GB28181.vue
@@ -503,7 +503,7 @@
                 下一步
             </a-button>
             <a-button
-                v-if="current === 1 && modeType !== 'view'"
+                v-if="current === 1 && view === 'false'"
                 type="primary"
                 style="margin-right: 8px"
                 @click="saveData"
@@ -559,7 +559,7 @@ const props = defineProps({
 });
 
 const route = useRoute();
-const modeType = route.params.type as string;
+const view = route.query.view as string;
 const id = route.params.id as string;
 
 const activeKey: any = ref([]);
@@ -663,9 +663,7 @@ const saveData = () => {
         };
 
         const resp =
-            !!id && modeType !== 'add'
-                ? await update({ ...params, id })
-                : await save(params);
+            id === ':id' ? await save(params) : await update({ ...params, id });
         if (resp.status === 200) {
             message.success('操作成功！');
             // if (params.get('save')) {
@@ -741,7 +739,7 @@ onMounted(() => {
         }
     });
 
-    if (modeType !== 'add') {
+    if (id !== ':id') {
         formState.value = props.data.configuration;
         formData.value = {
             name: props.data.name,
diff --git a/src/views/link/AccessConfig/components/Media/index.vue b/src/views/link/AccessConfig/components/Media/index.vue
index c832fb4c..189d47ad 100644
--- a/src/views/link/AccessConfig/components/Media/index.vue
+++ b/src/views/link/AccessConfig/components/Media/index.vue
@@ -40,7 +40,7 @@
                             </a-form-item>
                             <a-form-item>
                                 <a-button
-                                    v-if="modeType !== 'view'"
+                                    v-if="view === 'false'"
                                     type="primary"
                                     html-type="submit"
                                     >保存</a-button
@@ -91,7 +91,7 @@ interface FormState {
     description: string;
 }
 const route = useRoute();
-const modeType = route.params.type as string;
+const view = route.query.view as string;
 const id = route.params.id as string;
 
 const props = defineProps({
@@ -119,9 +119,7 @@ const onFinish = async (values: any) => {
         channel: 'fixed-media',
     };
     const resp =
-        !!id && modeType !== 'add'
-            ? await update({ ...params, id })
-            : await save(params);
+        id === ':id' ? await save(params) : await update({ ...params, id });
     if (resp.status === 200) {
         message.success('操作成功！');
         // if (params.get('save')) {
@@ -138,7 +136,7 @@ const onFinish = async (values: any) => {
 };
 
 onMounted(() => {
-    if (modeType !== 'add') {
+    if (id !== ':id') {
         formState.value = {
             name: props.data.name,
             description: props.data?.description || '',
diff --git a/src/views/link/AccessConfig/components/Network.vue b/src/views/link/AccessConfig/components/Network.vue
index 4669d80d..2d871076 100644
--- a/src/views/link/AccessConfig/components/Network.vue
+++ b/src/views/link/AccessConfig/components/Network.vue
@@ -1,5 +1,5 @@
 <template>
-    <div style="margin-top: 10px">
+    <div>
         <a-steps :current="stepCurrent">
             <a-step v-for="item in steps" :key="item" :title="item" />
         </a-steps>
@@ -304,7 +304,7 @@
                 下一步
             </a-button>
             <a-button
-                v-if="current === 2 && modeType !== 'view'"
+                v-if="current === 2 && view === 'false'"
                 type="primary"
                 style="margin-right: 8px"
                 @click="saveData"
@@ -767,7 +767,7 @@ const props = defineProps({
 const clientHeight = document.body.clientHeight;
 const type = props.provider.channel;
 const route = useRoute();
-const modeType = route.params.type as string;
+const view = route.query.view as string;
 const id = route.params.id as string;
 
 const formRef = ref<FormInstance>();
@@ -839,7 +839,7 @@ const queryProcotolList = async (id: string, params = {}) => {
 
 const addNetwork = () => {
     // const url = this.$store.state.permission.routes['Link/Type/Detail']
-    const url = '/demo';
+    const url = '/iot/link/type/detail/:id';
     const tab = window.open(
         `${window.location.origin + window.location.pathname}#${url}?type=${
             NetworkTypeMapping.get(props.provider?.id) || ''
@@ -854,7 +854,7 @@ const addNetwork = () => {
 };
 const addProcotol = () => {
     // const url = this.$store.state.permission.routes['Link/Protocol']
-    const url = '/demo';
+    const url = '/iot/link/protocol';
     const tab = window.open(
         `${window.location.origin + window.location.pathname}#${url}?save=true`,
     );
@@ -903,27 +903,25 @@ const procotolSearch = (value: string) => {
 const saveData = () => {
     validate()
         .then(async (values) => {
-            let resp = undefined;
-            let params = {
+            const params = {
                 ...props.data,
                 ...values,
                 protocol: procotolCurrent.value,
                 channel: 'network', // 网络组件
                 channelId: networkCurrent.value,
             };
-            if (!!id && modeType !== 'add') {
-                resp = await update(params);
-            } else {
-                params = {
-                    ...params,
-                    provider: props.provider.id,
-                    transport:
-                        props.provider?.id === 'child-device'
-                            ? 'Gateway'
-                            : ProtocolMapping.get(props.provider.id),
-                };
-                resp = await save(params);
-            }
+            const resp =
+                id === ':id'
+                    ? await save(params)
+                    : await update({
+                          ...params,
+                          id,
+                          provider: props.provider.id,
+                          transport:
+                              props.provider?.id === 'child-device'
+                                  ? 'Gateway'
+                                  : ProtocolMapping.get(props.provider.id),
+                      });
             if (resp.status === 200) {
                 message.success('操作成功！');
                 // 回到列表页面
@@ -1104,7 +1102,7 @@ onMounted(() => {
 });
 
 onMounted(() => {
-    if (modeType !== 'add') {
+    if (id !== ':id') {
         procotolCurrent.value = props.data.protocol;
         formData.value = {
             name: props.data.name,
diff --git a/src/views/link/AccessConfig/index.vue b/src/views/link/AccessConfig/index.vue
index aa044274..699a994c 100644
--- a/src/views/link/AccessConfig/index.vue
+++ b/src/views/link/AccessConfig/index.vue
@@ -1,9 +1,8 @@
 <template>
-    <div class="page-container">
-        <a-card style="margin-bottom: 20px">
+    <page-container>
+        <div>
             <Search :columns="columns" target="search" @search="handleSearch" />
-        </a-card>
-        <a-card>
+
             <JTable
                 ref="tableRef"
                 model="CARD"
@@ -187,8 +186,8 @@
                     />
                 </template>
             </JTable>
-        </a-card>
-    </div>
+        </div>
+    </page-container>
 </template>
 <script lang="ts" setup name="AccessConfigPage">
 import type { ActionsType } from '@/components/Table/index.vue';
@@ -345,13 +344,25 @@ const getProvidersList = async () => {
 getProvidersList();
 
 const handlAdd = () => {
-    router.push('/link/accessConfig/detail/add/new');
+    // router.push('/link/accessConfig/detail/add/new');
+    router.push({
+        path: `/iot/link/accessConfig/detail/:id`,
+        query: { view: false },
+    });
 };
 const handlEdit = (id: string) => {
-    router.push(`/link/accessConfig/detail/edit/${id}`);
+    // router.push(`/link/accessConfig/detail/edit/${id}`);
+    router.push({
+        path: `/iot/link/accessConfig/detail/${id}`,
+        query: { view: false },
+    });
 };
 const handlEye = (id: string) => {
-    router.push(`/link/accessConfig/detail/view/${id}`);
+    // router.push(`/link/accessConfig/detail/view/${id}`);
+    router.push({
+        path: `/iot/link/accessConfig/detail/${id}`,
+        query: { view: true },
+    });
 };
 
 /**
@@ -375,10 +386,6 @@ const handleSearch = (e: any) => {
 // }
 </script>
 <style lang="less" scoped>
-.page-container {
-    background: #f0f2f5;
-    padding: 24px;
-}
 .tableCardDisabled {
     width: 100%;
     background: url('/images/access-config-diaabled.png') no-repeat;
diff --git a/src/views/link/Certificate/Detail/index.vue b/src/views/link/Certificate/Detail/index.vue
index 4f1f7b99..a792e929 100644
--- a/src/views/link/Certificate/Detail/index.vue
+++ b/src/views/link/Certificate/Detail/index.vue
@@ -1,96 +1,104 @@
 <template>
-    <a-card>
-        <a-row :gutter="[24, 24]" style="padding: 24px">
-            <a-col :span="12">
-                <a-form
-                    class="form"
-                    layout="vertical"
-                    :model="formData"
-                    name="basic"
-                    :label-col="{ span: 8 }"
-                    :wrapper-col="{ span: 16 }"
-                    autocomplete="off"
-                >
-                    <a-form-item label="证书标准" v-bind="validateInfos.type">
-                        <a-radio-group v-model:value="formData.type">
-                            <a-radio-button
-                                class="form-radio-button"
-                                value="common"
-                            >
-                                <img :src="getImage('/certificate.png')" />
-                            </a-radio-button>
-                        </a-radio-group>
-                    </a-form-item>
-
-                    <a-form-item label="证书名称" v-bind="validateInfos.name">
-                        <a-input
-                            placeholder="请输入证书名称"
-                            v-model:value="formData.name"
-                        />
-                    </a-form-item>
-                    <a-form-item
-                        label="证书文件"
-                        v-bind="validateInfos['configs.cert']"
+    <page-container>
+        <a-card>
+            <a-row :gutter="[24, 24]" style="padding: 24px">
+                <a-col :span="12">
+                    <a-form
+                        class="form"
+                        layout="vertical"
+                        :model="formData"
+                        name="basic"
+                        :label-col="{ span: 8 }"
+                        :wrapper-col="{ span: 16 }"
+                        autocomplete="off"
                     >
-                        <CertificateFile
-                            name="cert"
-                            v-model:modelValue="formData.configs.cert"
-                            placeholder='证书格式以"-----BEGIN CERTIFICATE-----"开头，以"-----END CERTIFICATE-----"结尾"'
-                        />
-                    </a-form-item>
-                    <a-form-item
-                        label="证书私钥"
-                        v-bind="validateInfos['configs.key']"
-                    >
-                        <CertificateFile
-                            name="key"
-                            v-model:modelValue="formData.configs.key"
-                            placeholder='证书私钥格式以"-----BEGIN (RSA|EC) PRIVATE KEY-----"开头，以"-----END(RSA|EC) PRIVATE KEY-----"结尾。'
-                        />
-                    </a-form-item>
-                    <a-form-item label="说明" name="description">
-                        <a-textarea
-                            placeholder="请输入说明"
-                            v-model:value="formData.description"
-                            :maxlength="200"
-                            :rows="3"
-                            showCount
-                        />
-                    </a-form-item>
-
-                    <a-form-item>
-                        <a-button
-                            v-if="modeType !== 'view'"
-                            class="form-submit"
-                            html-type="submit"
-                            type="primary"
-                            @click.prevent="onSubmit"
-                            :loading="loading"
-                            >保存</a-button
+                        <a-form-item
+                            label="证书标准"
+                            v-bind="validateInfos.type"
                         >
-                    </a-form-item>
-                </a-form>
-            </a-col>
-            <a-col :span="12">
-                <div class="doc">
-                    <h1>1. 概述</h1>
-                    <div>
-                        证书由受信任的数字证书颁发机构CA，在验证服务器身份后颁发，具有服务器身份验证和数据传输加密功能，保障设备与平台间的数据传输安全。配置后可被网络组件引用。
+                            <a-radio-group v-model:value="formData.type">
+                                <a-radio-button
+                                    class="form-radio-button"
+                                    value="common"
+                                >
+                                    <img :src="getImage('/certificate.png')" />
+                                </a-radio-button>
+                            </a-radio-group>
+                        </a-form-item>
+
+                        <a-form-item
+                            label="证书名称"
+                            v-bind="validateInfos.name"
+                        >
+                            <a-input
+                                placeholder="请输入证书名称"
+                                v-model:value="formData.name"
+                            />
+                        </a-form-item>
+                        <a-form-item
+                            label="证书文件"
+                            v-bind="validateInfos['configs.cert']"
+                        >
+                            <CertificateFile
+                                name="cert"
+                                v-model:modelValue="formData.configs.cert"
+                                placeholder='证书格式以"-----BEGIN CERTIFICATE-----"开头，以"-----END CERTIFICATE-----"结尾"'
+                            />
+                        </a-form-item>
+                        <a-form-item
+                            label="证书私钥"
+                            v-bind="validateInfos['configs.key']"
+                        >
+                            <CertificateFile
+                                name="key"
+                                v-model:modelValue="formData.configs.key"
+                                placeholder='证书私钥格式以"-----BEGIN (RSA|EC) PRIVATE KEY-----"开头，以"-----END(RSA|EC) PRIVATE KEY-----"结尾。'
+                            />
+                        </a-form-item>
+                        <a-form-item label="说明" name="description">
+                            <a-textarea
+                                placeholder="请输入说明"
+                                v-model:value="formData.description"
+                                :maxlength="200"
+                                :rows="3"
+                                showCount
+                            />
+                        </a-form-item>
+
+                        <a-form-item>
+                            <a-button
+                                v-if="view === 'false'"
+                                class="form-submit"
+                                html-type="submit"
+                                type="primary"
+                                @click.prevent="onSubmit"
+                                :loading="loading"
+                                >保存</a-button
+                            >
+                        </a-form-item>
+                    </a-form>
+                </a-col>
+                <a-col :span="12">
+                    <div class="doc">
+                        <h1>1. 概述</h1>
+                        <div>
+                            证书由受信任的数字证书颁发机构CA，在验证服务器身份后颁发，具有服务器身份验证和数据传输加密功能，保障设备与平台间的数据传输安全。配置后可被网络组件引用。
+                        </div>
+                        <h1>2. 配置说明</h1>
+                        <h2>1、证书文件</h2>
+                        <div>
+                            您可以使用文本编辑工具打开PEM或者CRT格式的证书文件，复制其中的内容并粘贴到该文本框，或者单击该文本框下的上传，并选择存储在本地计算机的证书文件，将文件内容上传到文本框。
+                        </div>
+                        <h2>2、证书私钥</h2>
+                        <div>
+                            填写证书私钥内容的PEM编码。
+                            您可以使用文本编辑工具打开KEY格式的证书私钥文件，复制其中的内容并粘贴到该文本框，或者单击该文本框下的上传并选择存储在本地计算机的证书私钥文件，将文件内容上传到文本框。
+                        </div>
                     </div>
-                    <h1>2. 配置说明</h1>
-                    <h2>1、证书文件</h2>
-                    <div>
-                        您可以使用文本编辑工具打开PEM或者CRT格式的证书文件，复制其中的内容并粘贴到该文本框，或者单击该文本框下的上传，并选择存储在本地计算机的证书文件，将文件内容上传到文本框。
-                    </div>
-                    <h2>2、证书私钥</h2>
-                    <div>
-                        填写证书私钥内容的PEM编码。
-                        您可以使用文本编辑工具打开KEY格式的证书私钥文件，复制其中的内容并粘贴到该文本框，或者单击该文本框下的上传并选择存储在本地计算机的证书私钥文件，将文件内容上传到文本框。
-                    </div>
-                </div>
-            </a-col>
-        </a-row>
-    </a-card>
+                </a-col>
+            </a-row>
+        </a-card>
+    </page-container>
 </template>
 
 <script lang="ts" setup name="CertificateDetail">
@@ -103,7 +111,7 @@ import { FormDataType, TypeObjType } from '../type';
 
 const router = useRouter();
 const route = useRoute();
-const modeType = route.params.type as string;
+const view = route.query.view as string;
 const id = route.params.id as string;
 
 const useForm = Form.useForm;
@@ -145,10 +153,12 @@ const onSubmit = () => {
             const params = toRaw(formData.value);
             loading.value = true;
             const response =
-                modeType === 'edit' ? await update(params) : await save(params);
+                id === ':id'
+                    ? await save(params)
+                    : await update({ ...params, id });
             if (response.status === 200) {
                 message.success('操作成功');
-                router.push('/link/certificate');
+                router.push('/iot/link/certificate');
             }
             loading.value = false;
         })
@@ -168,7 +178,7 @@ const handleChange = (info: UploadChangeParam) => {
 };
 
 const detail = async (id: string) => {
-    if (modeType !== 'add') {
+    if (id !== ':id') {
         loading.value = true;
         const res = await queryDetail(id);
         if (res.success) {
diff --git a/src/views/link/Certificate/index.vue b/src/views/link/Certificate/index.vue
index 960d0ed9..b9158961 100644
--- a/src/views/link/Certificate/index.vue
+++ b/src/views/link/Certificate/index.vue
@@ -1,13 +1,7 @@
 <template>
-    <div class="page-container">
-        <a-card style="margin-bottom: 20px">
-            <Search
-                :columns="columns"
-                target="search"
-                @search="handleSearch"
-            />
-        </a-card>
-        <a-card>
+    <page-container>
+        <div>
+            <Search :columns="columns" target="search" @search="handleSearch" />
             <JTable
                 ref="tableRef"
                 model="TABLE"
@@ -61,8 +55,8 @@
                     </a-space>
                 </template>
             </JTable>
-        </a-card>
-    </div>
+        </div>
+    </page-container>
 </template>
 <script lang="ts" setup name="CertificatePage">
 import type { ActionsType } from '@/components/Table/index.vue';
@@ -158,15 +152,24 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
 };
 
 const handlAdd = () => {
-    router.push('/link/certificate/detail/add/new');
+    router.push({
+        path: `/iot/link/certificate/detail/:id`,
+        query: { view: false },
+    });
 };
 
 const handlEye = (id: string) => {
-    router.push(`/link/certificate/detail/view/${id}`);
+    router.push({
+        path: `/iot/link/certificate/detail/${id}`,
+        query: { view: true },
+    });
 };
 
 const handlEdit = (id: string) => {
-    router.push(`/link/certificate/detail/edit/${id}`);
+    router.push({
+        path: `/iot/link/certificate/detail/${id}`,
+        query: { view: false },
+    });
 };
 
 const handlDelete = async (id: string) => {
@@ -182,15 +185,8 @@ const handlDelete = async (id: string) => {
  * @param params
  */
 const handleSearch = (e: any) => {
-    console.log(1211, e);
-
     params.value = e;
 };
 </script>
 
-<style lang="less" scoped>
-.page-container {
-    background: #f0f2f5;
-    padding: 24px;
-}
-</style>
+<style lang="less" scoped></style>

From be172b1580c46a5ab3602f136e667130c709bac5 Mon Sep 17 00:00:00 2001
From: blp <2962632571@qq.com>
Date: Wed, 1 Feb 2023 13:50:17 +0800
Subject: [PATCH 03/13] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CardBox/index.vue  | 30 ++++++++++++++++++------------
 src/views/notice/Config/index.vue |  1 +
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/components/CardBox/index.vue b/src/components/CardBox/index.vue
index 0915064a..dee607c8 100644
--- a/src/components/CardBox/index.vue
+++ b/src/components/CardBox/index.vue
@@ -2,22 +2,21 @@
     <div class="card">
         <div
             class="card-warp"
-            :class="{ active: active ? 'active' : ''}"
+            :class="{ active: active ? 'active' : '' }"
             @click="handleClick"
         >
             <div class="card-content">
-                <a-row>
-                    <a-col :span="6">
-                        <!-- 图片 -->
-                        <div class="card-item-avatar">
-                            <slot name="img"> </slot>
-                        </div>
-                    </a-col>
-                    <a-col :span="18">
-                        <!-- 内容 -->
+                <div style="display: flex">
+                    <!-- 图片 -->
+                    <div class="card-item-avatar">
+                        <slot name="img"> </slot>
+                    </div>
+
+                    <!-- 内容 -->
+                    <div class="card-item-body">
                         <slot name="content"></slot>
-                    </a-col>
-                </a-row>
+                    </div>
+                </div>
 
                 <!-- 勾选 -->
                 <div v-if="active" class="checked-icon">
@@ -201,6 +200,13 @@ const handleClick = () => {
                 margin-right: 16px;
             }
 
+            .card-item-body {
+                display: flex;
+                flex-direction: column;
+                flex-grow: 1;
+                width: 0;
+            }
+
             .card-state {
                 position: absolute;
                 top: 30px;
diff --git a/src/views/notice/Config/index.vue b/src/views/notice/Config/index.vue
index 043206a2..6fe54e10 100644
--- a/src/views/notice/Config/index.vue
+++ b/src/views/notice/Config/index.vue
@@ -47,6 +47,7 @@
                     <template #img>
                         <slot name="img">
                             <img
+                                style="width: 80px; height: 80px"
                                 :src="
                                     getLogo(slotProps.type, slotProps.provider)
                                 "

From c8b94bf439e7b03a32bc0ee86fd0f5e3daf80115 Mon Sep 17 00:00:00 2001
From: JiangQiming <291854119@qq.com>
Date: Wed, 1 Feb 2023 15:39:13 +0800
Subject: [PATCH 04/13] =?UTF-8?q?feat:=20=E8=A7=86=E9=A2=91=E4=B8=AD?=
 =?UTF-8?q?=E5=BF=83=E9=A6=96=E9=A1=B5=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/home/components/StepCard.vue |   9 ++-
 src/views/media/DashBoard/index.less   |  38 +++++++++
 src/views/media/DashBoard/index.vue    |   7 ++
 src/views/media/Home/index.vue         | 104 +++++++++++++++++++++++++
 src/views/media/Home/typings.d.ts      |  24 ++++++
 5 files changed, 179 insertions(+), 3 deletions(-)
 create mode 100644 src/views/media/DashBoard/index.less
 create mode 100644 src/views/media/DashBoard/index.vue
 create mode 100644 src/views/media/Home/index.vue
 create mode 100644 src/views/media/Home/typings.d.ts

diff --git a/src/views/home/components/StepCard.vue b/src/views/home/components/StepCard.vue
index 661de226..fdeabe9d 100644
--- a/src/views/home/components/StepCard.vue
+++ b/src/views/home/components/StepCard.vue
@@ -117,11 +117,14 @@ const objToParams = (source: object): string => {
     }
 
     .box-list {
-        grid-template-columns: repeat(5, 1fr);
-        display: grid;
-        grid-column-gap: 66px;
+        // grid-template-columns: repeat(5, 1fr);
+        // display: grid;
+        // grid-column-gap: 66px;
+        display: flex;
+        gap: 66px;
 
         .list-item {
+            flex: 1;
             position: relative;
             .box-top {
                 position: relative;
diff --git a/src/views/media/DashBoard/index.less b/src/views/media/DashBoard/index.less
new file mode 100644
index 00000000..870c54fe
--- /dev/null
+++ b/src/views/media/DashBoard/index.less
@@ -0,0 +1,38 @@
+.media-dash-board {
+    .top-card-items {
+        margin-bottom: 12px;
+
+        .top-card-item {
+            width: 25%;
+            padding: 6px 24px;
+            border: 1px solid #e3e3e3;
+
+            .top-card-top {
+                display: flex;
+                padding: 12px 0;
+
+                .top-card-top-left {
+                    width: 80px;
+                }
+
+                .top-card-top-right {
+                    .top-card-total {
+                        font-weight: bold;
+                        font-size: 20px;
+                    }
+                }
+            }
+
+            .top-card-bottom {
+                display: flex;
+                justify-content: space-between;
+                padding: 12px 0;
+                border-top: 1px solid #e3e3e3;
+            }
+        }
+    }
+
+    .media-dash-board-body {
+        border: 1px solid #f0f0f0;
+    }
+}
diff --git a/src/views/media/DashBoard/index.vue b/src/views/media/DashBoard/index.vue
new file mode 100644
index 00000000..0bd9d297
--- /dev/null
+++ b/src/views/media/DashBoard/index.vue
@@ -0,0 +1,7 @@
+<template>
+    <div class="page-container">仪表盘</div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/media/Home/index.vue b/src/views/media/Home/index.vue
new file mode 100644
index 00000000..1de094fd
--- /dev/null
+++ b/src/views/media/Home/index.vue
@@ -0,0 +1,104 @@
+<template>
+    <div class="page-container">
+        <a-row :gutter="24">
+            <a-col :span="14">
+                <BootCard
+                    :cardData="deviceBootConfig"
+                    cardTitle="视频中心引导"
+                />
+            </a-col>
+            <a-col :span="10">
+                <DeviceCountCard />
+            </a-col>
+            <a-col :span="24" style="margin: 20px 0">
+                <PlatformPicCard />
+            </a-col>
+            <a-col :span="24">
+                <StepCard
+                    cardTitle="设备接入推荐步骤"
+                    tooltip="不同的设备因为通信协议的不同，存在接入步骤的差异"
+                    :dataList="deviceStepDetails"
+                />
+            </a-col>
+        </a-row>
+    </div>
+</template>
+
+<script setup lang="ts">
+import BootCard from '@/views/home/components/BootCard.vue';
+import DeviceCountCard from '@/views/home/components/DeviceCountCard.vue';
+import PlatformPicCard from '@/views/home/components/PlatformPicCard.vue';
+import StepCard from '@/views/home/components/StepCard.vue';
+
+import { usePermissionStore } from '@/store/permission';
+import type { bootConfig, recommendList } from '@/views/home/index';
+
+// 权限控制
+const hasPermission = usePermissionStore().hasPermission;
+
+const deviceBootConfig: bootConfig[] = [
+    {
+        english: 'STEP1',
+        label: '添加视频设备',
+        link: '/media/device/Save',
+        auth: hasPermission('/media/device/Save'),
+        params: {
+            save: true,
+        },
+    },
+    {
+        english: 'STEP2',
+        label: '分屏展示',
+        link: '/media/SplitScreen',
+        auth: hasPermission('/media/SplitScreen'),
+        params: {
+            save: true,
+        },
+    },
+    {
+        english: 'STEP3',
+        label: '国标级联',
+        link: '/media/Cascade',
+        auth: hasPermission('/media/Cascade'),
+        params: {
+            save: true,
+        },
+    },
+];
+const deviceStepDetails: recommendList[] = [
+    {
+        title: '添加视频设备',
+        details: '根据视频设备的传输协议，在已创建的产品下添加对应的设备。',
+        iconUrl: '/images/home/bottom-6.png',
+        linkUrl: '/media/device/Save',
+        auth: hasPermission('/media/device/Save'),
+        params: {
+            save: true,
+        },
+    },
+    {
+        title: '查看通道',
+        details: '查看设备下的通道数据，可以进行直播、录制等操作。',
+        iconUrl: '/images/home/bottom-7.png',
+        linkUrl: '/media/device/Channel',
+        auth: hasPermission('/media/device/Save'),
+        dialogTag: 'accessMethod',
+    },
+    {
+        title: '分屏展示',
+        details: '对多个通道的视频流数据进行分屏展示。',
+        iconUrl: '/images/home/bottom-8.png',
+        linkUrl: '/media/SplitScreen',
+        auth: hasPermission('/media/SplitScreen'),
+        params: {
+            save: true,
+        },
+    },
+];
+</script>
+
+<style lang="less" scoped>
+.page-container {
+    padding: 24px;
+}
+</style>
diff --git a/src/views/media/Home/typings.d.ts b/src/views/media/Home/typings.d.ts
new file mode 100644
index 00000000..995964b8
--- /dev/null
+++ b/src/views/media/Home/typings.d.ts
@@ -0,0 +1,24 @@
+type BaseItem = {
+    id: string;
+    name: string;
+};
+type State = {
+    value: string;
+    text: string;
+};
+
+export type DeviceItem = {
+    photoUrl?: string;
+    channelNumber: number;
+    createTime: number;
+    firmware: string;
+    gatewayId: string;
+    host: string;
+    manufacturer: string;
+    model: string;
+    port: number;
+    provider: string;
+    state: State;
+    streamMode: string;
+    transport: string;
+} & BaseItem;

From 6879397b778d540f71fa0244c45c923178700d65 Mon Sep 17 00:00:00 2001
From: jackhoo_98 <jackhoo_98@foxmail.com>
Date: Wed, 1 Feb 2023 15:52:15 +0800
Subject: [PATCH 05/13] =?UTF-8?q?fix:=20=E5=A4=84=E7=90=86=E6=90=9C?=
 =?UTF-8?q?=E7=B4=A2=E7=9A=84=E7=89=B9=E6=AE=8A=E5=8F=82=E6=95=B0column?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/comm.ts | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/src/utils/comm.ts b/src/utils/comm.ts
index e7b4363f..26d09dd9 100644
--- a/src/utils/comm.ts
+++ b/src/utils/comm.ts
@@ -76,3 +76,23 @@ export function getSlotVNode<T>(slots: Slots, props: Record<string, unknown>, pr
   }
   return (props[prop] || slots[prop]?.()) as T;
 }
+
+
+/**
+ * 修改Select参数column的值
+ * @param e // 查询参数 e
+ * @param column {Object} {需要修改的值: 修改后的值}
+ * {
+        username: 'context.username',
+    }
+ */
+export const modifySearchColumnValue = (e: any, column: object) => {
+  e.terms.forEach((item: any) => {
+      item.terms.forEach((t: any) => {
+          if (column[t.column]) {
+              t.column = column[t.column];
+          }
+      });
+  });
+  return e;
+};
\ No newline at end of file

From 59e4bacd74833abf5725590af5d41a8133df51c3 Mon Sep 17 00:00:00 2001
From: JiangQiming <291854119@qq.com>
Date: Wed, 1 Feb 2023 15:59:53 +0800
Subject: [PATCH 06/13] =?UTF-8?q?feat:=20=E5=9F=BA=E7=A1=80=E7=BB=9F?=
 =?UTF-8?q?=E8=AE=A1=E7=BB=84=E4=BB=B6=E5=B0=81=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/media/home.ts                         |   9 ++
 .../media/Home/components/BasicCountCard.vue  | 117 ++++++++++++++++++
 src/views/media/Home/index.vue                |   4 +-
 3 files changed, 128 insertions(+), 2 deletions(-)
 create mode 100644 src/api/media/home.ts
 create mode 100644 src/views/media/Home/components/BasicCountCard.vue

diff --git a/src/api/media/home.ts b/src/api/media/home.ts
new file mode 100644
index 00000000..8385fd80
--- /dev/null
+++ b/src/api/media/home.ts
@@ -0,0 +1,9 @@
+import server from '@/utils/request'
+
+export default {
+    // 设备数量
+    deviceCount: () => server.get<number>(`/media/device/_count`),
+    // 通道数量
+    channelCount: () => server.post<number>(`/media/channel/_count`),
+
+}
\ No newline at end of file
diff --git a/src/views/media/Home/components/BasicCountCard.vue b/src/views/media/Home/components/BasicCountCard.vue
new file mode 100644
index 00000000..024f1b19
--- /dev/null
+++ b/src/views/media/Home/components/BasicCountCard.vue
@@ -0,0 +1,117 @@
+<template>
+    <a-card class="device-count-container">
+        <template #title>
+            <h5 class="title">基础统计</h5>
+        </template>
+        <template #extra>
+            <span style="color: #1d39c4; cursor: pointer" @click="jumpPage"
+                >详情</span
+            >
+        </template>
+
+        <div class="box-list">
+            <div class="box-item">
+                <div class="label">设备数量</div>
+                <div class="value">{{ deviceCount }}</div>
+                <img src="/images/home/top-2.png" alt="" />
+            </div>
+            <div class="box-item">
+                <div class="label">通道数量</div>
+                <div class="value">{{ channelCount }}</div>
+                <img src="/images/home/top-1.png" alt="" />
+            </div>
+        </div>
+    </a-card>
+</template>
+
+<script setup lang="ts">
+import homeApi from '@/api/media/home';
+
+const channelCount = ref(0);
+const deviceCount = ref(0);
+
+onMounted(() => {
+    getData();
+});
+
+const getData = () => {
+    homeApi.deviceCount().then((resp) => {
+        deviceCount.value = resp.result;
+    });
+    homeApi.channelCount().then((resp) => {
+        channelCount.value = resp.result;
+    });
+};
+
+const router = useRouter();
+const jumpPage = () => {
+    router.push('/media/dashboard');
+};
+</script>
+
+<style lang="less" scoped>
+.device-count-container {
+    :deep(.ant-card-body) {
+        padding-top: 0;
+    }
+    .title {
+        position: relative;
+        z-index: 2;
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 12px;
+        padding-left: 18px;
+        font-weight: 700;
+        font-size: 18px;
+
+        &::before {
+            position: absolute;
+            top: 50%;
+            left: 0;
+            width: 8px;
+            height: 8px;
+            background-color: #1d39c4;
+            border: 1px solid #b4c0da;
+            transform: translateY(-50%);
+            content: ' ';
+        }
+    }
+
+    .box-list {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        grid-gap: 24px;
+        gap: 24px;
+
+        .box-item {
+            position: relative;
+            padding: 16px;
+            background: linear-gradient(
+                135.62deg,
+                #f6f7fd 22.27%,
+                hsla(0, 0%, 100%, 0.86) 91.82%
+            );
+            border-radius: 2px;
+            box-shadow: 0 4px 18px #efefef;
+
+            .label {
+                color: #4f4f4f;
+            }
+            .value {
+                margin: 20px 0;
+                color: rgba(0, 0, 0, 0.85);
+                font-weight: 700;
+                font-size: 20px;
+            }
+
+            img {
+                position: absolute;
+                right: 10%;
+                bottom: 0;
+                width: 90px;
+                height: 90px;
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/media/Home/index.vue b/src/views/media/Home/index.vue
index 1de094fd..a0f26df9 100644
--- a/src/views/media/Home/index.vue
+++ b/src/views/media/Home/index.vue
@@ -8,7 +8,7 @@
                 />
             </a-col>
             <a-col :span="10">
-                <DeviceCountCard />
+                <BasicCountCard />
             </a-col>
             <a-col :span="24" style="margin: 20px 0">
                 <PlatformPicCard />
@@ -26,9 +26,9 @@
 
 <script setup lang="ts">
 import BootCard from '@/views/home/components/BootCard.vue';
-import DeviceCountCard from '@/views/home/components/DeviceCountCard.vue';
 import PlatformPicCard from '@/views/home/components/PlatformPicCard.vue';
 import StepCard from '@/views/home/components/StepCard.vue';
+import BasicCountCard from '@/views/media/Home/components/BasicCountCard.vue';
 
 import { usePermissionStore } from '@/store/permission';
 import type { bootConfig, recommendList } from '@/views/home/index';

From 888bb5b961b7b920eb3a3661098daa72ef865160 Mon Sep 17 00:00:00 2001
From: jackhoo_98 <jackhoo_98@foxmail.com>
Date: Wed, 1 Feb 2023 17:01:11 +0800
Subject: [PATCH 07/13] =?UTF-8?q?feat:=20=E8=BF=90=E7=BB=B4=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=20=E6=97=A5=E5=BF=97=E7=AE=A1=E7=90=86=20=E8=AE=BF?=
 =?UTF-8?q?=E9=97=AE=E6=97=A5=E5=BF=97/=E7=B3=BB=E7=BB=9F=E6=97=A5?=
 =?UTF-8?q?=E5=BF=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/link/log.ts                 |   7 +
 src/views/Log/Access/index.vue      | 255 ++++++++++++++++++++++++++++
 src/views/Log/System/index.vue      | 246 +++++++++++++++++++++++++++
 src/views/Log/index.vue             |  28 +++
 src/views/Log/typings.d.ts          |  31 ++++
 src/views/link/Log/Access/index.vue |   6 -
 src/views/link/Log/System/index.vue |   6 -
 src/views/link/Log/index.vue        |  17 --
 8 files changed, 567 insertions(+), 29 deletions(-)
 create mode 100644 src/api/link/log.ts
 create mode 100644 src/views/Log/Access/index.vue
 create mode 100644 src/views/Log/System/index.vue
 create mode 100644 src/views/Log/index.vue
 create mode 100644 src/views/Log/typings.d.ts
 delete mode 100644 src/views/link/Log/Access/index.vue
 delete mode 100644 src/views/link/Log/System/index.vue
 delete mode 100644 src/views/link/Log/index.vue

diff --git a/src/api/link/log.ts b/src/api/link/log.ts
new file mode 100644
index 00000000..c0e68404
--- /dev/null
+++ b/src/api/link/log.ts
@@ -0,0 +1,7 @@
+import server from '@/utils/request';
+
+export const queryAccess = (data: object) =>
+    server.post(`/logger/access/_query`, data);
+
+export const querySystem = (data: object) =>
+    server.post(`/logger/system/_query`, data);
diff --git a/src/views/Log/Access/index.vue b/src/views/Log/Access/index.vue
new file mode 100644
index 00000000..48679537
--- /dev/null
+++ b/src/views/Log/Access/index.vue
@@ -0,0 +1,255 @@
+<template>
+    <div>
+        <Search :columns="columns" target="search" @search="handleSearch" />
+        <JTable
+            ref="tableRef"
+            model="TABLE"
+            :columns="columns"
+            :request="queryAccess"
+            :defaultParams="{
+                sorts: [{ name: 'responseTime', order: 'desc' }],
+            }"
+            :params="params"
+        >
+            <template #requestTime="slotProps">
+                {{
+                    moment(slotProps.requestTime).format('YYYY-MM-DD HH:mm:ss')
+                }}
+            </template>
+            <template #responseTime="slotProps">
+                <a-tag color="purple">
+                    {{ slotProps.responseTime - slotProps.requestTime }} ms
+                </a-tag>
+            </template>
+            <template #username="slotProps">
+                <a-tag color="geekblue">
+                    {{ slotProps.context.userName }}
+                </a-tag>
+            </template>
+            <template #action="slotProps">
+                <a-space :size="16">
+                    <a-tooltip
+                        v-for="i in getActions(slotProps)"
+                        :key="i.key"
+                        v-bind="i.tooltip"
+                    >
+                        <a-popconfirm v-if="i.popConfirm" v-bind="i.popConfirm">
+                            <a-button
+                                :disabled="i.disabled"
+                                style="padding: 0"
+                                type="link"
+                                ><AIcon :type="i.icon"
+                            /></a-button>
+                        </a-popconfirm>
+                        <a-button
+                            style="padding: 0"
+                            type="link"
+                            v-else
+                            @click="i.onClick && i.onClick(slotProps)"
+                        >
+                            <a-button
+                                :disabled="i.disabled"
+                                style="padding: 0"
+                                type="link"
+                                ><AIcon :type="i.icon"
+                            /></a-button>
+                        </a-button>
+                    </a-tooltip>
+                </a-space>
+            </template>
+        </JTable>
+    </div>
+    <a-modal
+        :width="1100"
+        v-model:visible="visible"
+        title="详情"
+        @ok="handleOk"
+    >
+        <a-descriptions :data="descriptionsData" title="" bordered :column="2">
+            <a-descriptions-item label="URL">
+                {{ descriptionsData?.url }}
+            </a-descriptions-item>
+            <a-descriptions-item label="请求方法">
+                {{ descriptionsData?.httpMethod }}
+            </a-descriptions-item>
+            <a-descriptions-item label="动作">
+                {{ descriptionsData?.action }}
+            </a-descriptions-item>
+            <a-descriptions-item label="类名">
+                {{ descriptionsData?.target }}
+            </a-descriptions-item>
+            <a-descriptions-item label="方法名">
+                {{ descriptionsData?.method }}
+            </a-descriptions-item>
+            <a-descriptions-item label="IP">
+                {{ descriptionsData?.ip }}
+            </a-descriptions-item>
+            <a-descriptions-item label="请求时间">
+                {{
+                    moment(descriptionsData?.requestTime).format(
+                        'YYYY-MM-DD HH:mm:ss',
+                    )
+                }}
+            </a-descriptions-item>
+            <a-descriptions-item label="请求耗时">
+                {{
+                    descriptionsData?.responseTime -
+                    descriptionsData?.requestTime +
+                    'ms'
+                }}
+            </a-descriptions-item>
+            <a-descriptions-item label="请求头" :span="2">
+                {{ descriptionsData?.httpHeaders }}
+            </a-descriptions-item>
+            <a-descriptions-item label="请求参数" :span="2">
+                {{ descriptionsData?.parameters }}
+            </a-descriptions-item>
+            <a-descriptions-item label="异常信息" :span="2">
+                <a-textarea
+                    v-model:value="descriptionsData.exception"
+                    placeholder="暂无数据"
+                    :auto-size="{ minRows: 3, maxRows: 20 }"
+                />
+            </a-descriptions-item>
+        </a-descriptions>
+    </a-modal>
+</template>
+<script lang="ts" setup name="AccessLog">
+import type { ActionsType } from '@/components/Table/index.vue';
+import type { AccessLogItem } from '../typings';
+import { queryAccess } from '@/api/link/log';
+import moment from 'moment';
+
+import { modifySearchColumnValue } from '@/utils/comm';
+
+const tableRef = ref<Record<string, any>>({});
+const params = ref<Record<string, any>>({});
+
+const columns = [
+    {
+        title: 'IP',
+        dataIndex: 'ip',
+        key: 'ip',
+        search: {
+            type: 'string',
+        },
+        scopedSlots: true,
+        width: 150,
+        fixed: 'left',
+    },
+    {
+        title: '请求路径',
+        dataIndex: 'url',
+        key: 'url',
+        search: {
+            type: 'string',
+        },
+        // width: 200,
+    },
+    {
+        title: '请求方法',
+        dataIndex: 'httpMethod',
+        key: 'httpMethod',
+        search: {
+            type: 'select',
+            options: [
+                {
+                    label: 'POST',
+                    value: 'POST',
+                },
+                {
+                    label: 'GET',
+                    value: 'GET',
+                },
+                {
+                    label: 'PATCH',
+                    value: 'PATCH',
+                },
+                {
+                    label: 'DELETE',
+                    value: 'DELETE',
+                },
+                {
+                    label: 'PUT',
+                    value: 'PUT',
+                },
+            ],
+        },
+        scopedSlots: true,
+        width: 100,
+    },
+    {
+        title: '请求时间',
+        dataIndex: 'requestTime',
+        key: 'requestTime',
+        scopedSlots: true,
+        search: {
+            type: 'date',
+        },
+        width: 200,
+    },
+    {
+        title: '请求耗时',
+        dataIndex: 'responseTime',
+        key: 'responseTime',
+        scopedSlots: true,
+        width: 100,
+    },
+    {
+        title: '请求用户',
+        dataIndex: 'username',
+        key: 'username',
+        search: {
+            type: 'string',
+        },
+        width: 150,
+        scopedSlots: true,
+    },
+    {
+        title: '操作',
+        key: 'action',
+        fixed: 'right',
+        width: 150,
+        scopedSlots: true,
+    },
+];
+
+const descriptionsData = ref<AccessLogItem>();
+const visible = ref<boolean>(false);
+
+const handleOk = (e: MouseEvent) => {
+    visible.value = false;
+};
+
+const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
+    if (!data) {
+        return [];
+    }
+    return [
+        {
+            key: 'eye',
+            text: '查看',
+            tooltip: {
+                title: '查看',
+            },
+            icon: 'EyeOutlined',
+            onClick: (data: AccessLogItem) => {
+                descriptionsData.value = data;
+                visible.value = true;
+            },
+        },
+    ];
+};
+
+const column = {
+    username: 'context.username',
+};
+
+/**
+ * 搜索
+ * @param params
+ */
+const handleSearch = (e: any) => {
+    params.value = modifySearchColumnValue(e, column);
+};
+</script>
diff --git a/src/views/Log/System/index.vue b/src/views/Log/System/index.vue
new file mode 100644
index 00000000..982cc922
--- /dev/null
+++ b/src/views/Log/System/index.vue
@@ -0,0 +1,246 @@
+<template>
+    <div>
+        <Search :columns="columns" target="search" @search="handleSearch" />
+        <JTable
+            ref="tableRef"
+            model="TABLE"
+            :columns="columns"
+            :request="querySystem"
+            :defaultParams="{
+                sorts: [{ name: 'createTime', order: 'desc' }],
+            }"
+            :params="params"
+        >
+            <template #level="slotProps">
+                <a-tag
+                    :color="
+                        slotProps.level === 'WARN'
+                            ? 'orange'
+                            : slotProps.level === 'ERROR'
+                            ? 'red'
+                            : slotProps.level === 'DEBUG'
+                            ? 'blue'
+                            : 'green'
+                    "
+                >
+                    {{ slotProps.level }}
+                </a-tag>
+            </template>
+            <template #createTime="slotProps">
+                {{ moment(slotProps.createTime).format('YYYY-MM-DD HH:mm:ss') }}
+            </template>
+            <template #server="slotProps">
+                {{ slotProps.context.server }}
+            </template>
+
+            <template #action="slotProps">
+                <a-space :size="16">
+                    <a-tooltip
+                        v-for="i in getActions(slotProps)"
+                        :key="i.key"
+                        v-bind="i.tooltip"
+                    >
+                        <a-popconfirm v-if="i.popConfirm" v-bind="i.popConfirm">
+                            <a-button
+                                :disabled="i.disabled"
+                                style="padding: 0"
+                                type="link"
+                                ><AIcon :type="i.icon"
+                            /></a-button>
+                        </a-popconfirm>
+                        <a-button
+                            style="padding: 0"
+                            type="link"
+                            v-else
+                            @click="i.onClick && i.onClick(slotProps)"
+                        >
+                            <a-button
+                                :disabled="i.disabled"
+                                style="padding: 0"
+                                type="link"
+                                ><AIcon :type="i.icon"
+                            /></a-button>
+                        </a-button>
+                    </a-tooltip>
+                </a-space>
+            </template>
+        </JTable>
+    </div>
+    <a-modal
+        :width="1100"
+        v-model:visible="visible"
+        title="详情"
+        @ok="handleOk"
+    >
+        <div>
+            <span class="mr-10">[{{ descriptionsData?.threadName }}]</span>
+            <span class="mr-10">{{
+                moment(descriptionsData?.createTime).format(
+                    'YYYY-MM-DD HH:mm:ss',
+                )
+            }}</span>
+            <span>{{ descriptionsData?.className }}</span>
+        </div>
+        <div class="mb-10">
+            <a-tag
+                :color="
+                    descriptionsData?.level === 'WARN'
+                        ? 'orange'
+                        : descriptionsData?.level === 'ERROR'
+                        ? 'red'
+                        : descriptionsData?.level === 'DEBUG'
+                        ? 'blue'
+                        : 'green'
+                "
+            >
+                {{ descriptionsData?.level }}
+            </a-tag>
+            <span>{{ descriptionsData?.message }}</span>
+        </div>
+        <a-textarea
+            v-model:value="descriptionsData.exceptionStack"
+            placeholder="暂无数据"
+            :auto-size="{ minRows: 24, maxRows: 28 }"
+        />
+    </a-modal>
+</template>
+<script lang="ts" setup name="SystemLog">
+import type { ActionsType } from '@/components/Table/index.vue';
+import type { SystemLogItem } from '../typings';
+import { querySystem } from '@/api/link/log';
+import moment from 'moment';
+
+import { modifySearchColumnValue } from '@/utils/comm';
+
+const tableRef = ref<Record<string, any>>({});
+const params = ref<Record<string, any>>({});
+
+const columns = [
+    {
+        title: '名称',
+        dataIndex: 'name',
+        key: 'name',
+        search: {
+            type: 'string',
+        },
+        scopedSlots: true,
+        width: 400,
+        fixed: 'left',
+        ellipsis: true,
+    },
+    {
+        title: '日志级别',
+        dataIndex: 'level',
+        key: 'level',
+        search: {
+            type: 'select',
+            options: [
+                {
+                    label: 'ERROR',
+                    value: 'ERROR',
+                },
+                {
+                    label: 'INFO',
+                    value: 'INFO',
+                },
+                {
+                    label: 'DEBUG',
+                    value: 'DEBUG',
+                },
+                {
+                    label: 'WARN',
+                    value: 'WARN',
+                },
+            ],
+        },
+        scopedSlots: true,
+        width: 100,
+    },
+    {
+        title: '日志内容',
+        dataIndex: 'message',
+        key: 'message',
+        search: {
+            type: 'string',
+        },
+        scopedSlots: true,
+        ellipsis: true,
+    },
+    {
+        title: '服务名',
+        dataIndex: 'server',
+        key: 'server',
+        scopedSlots: true,
+        search: {
+            type: 'string',
+        },
+        width: 200,
+        ellipsis: true,
+    },
+    {
+        title: '创建时间',
+        dataIndex: 'createTime',
+        key: 'createTime',
+        search: {
+            type: 'date',
+        },
+        scopedSlots: true,
+        width: 200,
+    },
+    {
+        title: '操作',
+        key: 'action',
+        fixed: 'right',
+        width: 150,
+        scopedSlots: true,
+    },
+];
+
+const descriptionsData = ref<SystemLogItem>();
+const visible = ref<boolean>(false);
+
+const handleOk = (e: MouseEvent) => {
+    visible.value = false;
+};
+
+const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
+    if (!data) {
+        return [];
+    }
+    return [
+        {
+            key: 'eye',
+            text: '查看',
+            tooltip: {
+                title: '查看',
+            },
+            icon: 'EyeOutlined',
+            onClick: (data: SystemLogItem) => {
+                descriptionsData.value = data;
+                visible.value = true;
+            },
+        },
+    ];
+};
+
+const column = {
+    server: 'context.server',
+};
+
+/**
+ * 搜索
+ * @param params
+ */
+const handleSearch = (e: any) => {
+    params.value = modifySearchColumnValue(e, column);
+};
+</script>
+
+<style scoped lang="less">
+.mr-10 {
+    margin-right: 10px;
+}
+.mb-10 {
+    margin-bottom: 10px;
+}
+</style>
diff --git a/src/views/Log/index.vue b/src/views/Log/index.vue
new file mode 100644
index 00000000..9193b21f
--- /dev/null
+++ b/src/views/Log/index.vue
@@ -0,0 +1,28 @@
+<template>
+    <page-container :tabList="list" @tabChange="onTabChange">
+        <AccessLog v-if="activeKey === '1'" />
+        <SystemLog v-else />
+    </page-container>
+</template>
+<script lang="ts" setup name="LogPage">
+import { defineComponent, ref } from 'vue';
+import AccessLog from './Access/index.vue';
+import SystemLog from './System/index.vue';
+
+const activeKey = ref('1');
+
+const list = [
+    {
+        key: '1',
+        tab: '访问日志',
+    },
+    {
+        key: '2',
+        tab: '系统日志',
+    },
+];
+
+const onTabChange = (e: string) => {
+    activeKey.value = e;
+};
+</script>
diff --git a/src/views/Log/typings.d.ts b/src/views/Log/typings.d.ts
new file mode 100644
index 00000000..bccebed0
--- /dev/null
+++ b/src/views/Log/typings.d.ts
@@ -0,0 +1,31 @@
+export type AccessLogItem = {
+  id: string;
+  context: any;
+  describe: string;
+  exception: string;
+  httpHeaders: any;
+  httpMethod: string;
+  ip: string;
+  method: string;
+  parameters: any;
+  requestTime: number;
+  responseTime: number;
+  target: string;
+  url: string;
+  action: string;
+};
+
+export type SystemLogItem = {
+  id: string;
+  className: string;
+  context: any;
+  createTime: number;
+  exceptionStack: string;
+  level: string;
+  lineNumber: number;
+  message: string;
+  methodName: string;
+  name: string;
+  threadId: string;
+  threadName: string;
+};
diff --git a/src/views/link/Log/Access/index.vue b/src/views/link/Log/Access/index.vue
deleted file mode 100644
index 9c87e8c8..00000000
--- a/src/views/link/Log/Access/index.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<template>
-  <div>访问日志</div>
-</template>
-<script lang="ts" setup name="SystemLog">
-
-</script>
diff --git a/src/views/link/Log/System/index.vue b/src/views/link/Log/System/index.vue
deleted file mode 100644
index 1fd97c0d..00000000
--- a/src/views/link/Log/System/index.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<template>
-  <div>系统日志</div>
-</template>
-<script lang="ts" setup name="AccessLog">
-
-</script>
diff --git a/src/views/link/Log/index.vue b/src/views/link/Log/index.vue
deleted file mode 100644
index 4fbaf127..00000000
--- a/src/views/link/Log/index.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <a-tabs v-model:activeKey="activeKey">
-    <a-tab-pane key="1" tab="访问日志">
-      <AccessLog />
-    </a-tab-pane>
-    <a-tab-pane key="2" tab="系统日志" force-render>
-      <SystemLog />
-    </a-tab-pane>
-  </a-tabs>
-</template>
-<script lang="ts" setup name="LogPage">
-import { defineComponent, ref } from 'vue';
-import AccessLog from './Access/index.vue';
-import SystemLog from './System/index.vue';
-
-const activeKey = ref('1');
-</script>

From 1eda294d480eba1f8a369acdef03daca7d27615f Mon Sep 17 00:00:00 2001
From: JiangQiming <291854119@qq.com>
Date: Wed, 1 Feb 2023 17:34:15 +0800
Subject: [PATCH 08/13] =?UTF-8?q?feat:=20=E8=A7=86=E9=A2=91=E4=B8=AD?=
 =?UTF-8?q?=E5=BF=83=E4=BB=AA=E8=A1=A8=E7=9B=98=E5=8D=A1=E7=89=87=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=B0=81=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/media/dashboard.ts                    | 10 ++
 src/views/media/DashBoard/components/Card.vue |  7 ++
 .../media/DashBoard/components/TopCard.vue    | 94 +++++++++++++++++++
 src/views/media/DashBoard/index.vue           | 92 +++++++++++++++++-
 src/views/media/DashBoard/typings.d.ts        | 16 ++++
 .../media/Home/components/BasicCountCard.vue  |  5 +-
 6 files changed, 219 insertions(+), 5 deletions(-)
 create mode 100644 src/api/media/dashboard.ts
 create mode 100644 src/views/media/DashBoard/components/Card.vue
 create mode 100644 src/views/media/DashBoard/components/TopCard.vue
 create mode 100644 src/views/media/DashBoard/typings.d.ts

diff --git a/src/api/media/dashboard.ts b/src/api/media/dashboard.ts
new file mode 100644
index 00000000..9e8a2e40
--- /dev/null
+++ b/src/api/media/dashboard.ts
@@ -0,0 +1,10 @@
+import server from '@/utils/request'
+import type { Agg, AggPlaying } from '@/views/media/DashBoard/typings'
+
+export default {
+    // 录像数量
+    agg: () => server.get<Agg>(`/media/record/file/agg`),
+    // 播放中数量
+    aggPlaying: () => server.get<AggPlaying>(`/media/channel/playing/agg`),
+
+}
\ No newline at end of file
diff --git a/src/views/media/DashBoard/components/Card.vue b/src/views/media/DashBoard/components/Card.vue
new file mode 100644
index 00000000..498d600a
--- /dev/null
+++ b/src/views/media/DashBoard/components/Card.vue
@@ -0,0 +1,7 @@
+<template>
+    <div class="page-container"></div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/media/DashBoard/components/TopCard.vue b/src/views/media/DashBoard/components/TopCard.vue
new file mode 100644
index 00000000..8e7469a4
--- /dev/null
+++ b/src/views/media/DashBoard/components/TopCard.vue
@@ -0,0 +1,94 @@
+<template>
+    <div class="top-card">
+        <div class="top-card-content">
+            <div class="content-left">
+                <div class="content-left-title">
+                    <span>{{ title }}</span>
+                    <a-tooltip placement="top" v-if="tooltip">
+                        <template #title>
+                            <span>{{ tooltip }}</span>
+                        </template>
+                        <AIcon type="QuestionCircleOutlined" />
+                    </a-tooltip>
+                </div>
+                <div class="content-left-value">{{ value }}</div>
+            </div>
+            <div class="content-right">
+                <img :src="img" alt="" />
+            </div>
+        </div>
+        <div class="top-card-footer">
+            <template v-for="(item, index) in footer" :key="index">
+                <a-badge :text="item.title" :status="item.status" />
+                <div class="footer-item-value">{{ item.value }}</div>
+            </template>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue';
+import type { Footer } from '@/views/media/DashBoard/typings';
+
+const props = defineProps({
+    title: { type: String, default: '' },
+    tooltip: { type: String, default: '' },
+    img: { type: String, default: '' },
+    footer: { type: Array as PropType<Footer[]>, default: '' },
+    value: { type: Number, default: 0 },
+});
+</script>
+
+<style lang="less" scoped>
+.top-card {
+    display: flex;
+    flex-direction: column;
+    // height: 200px;
+    padding: 24px;
+    background-color: #fff;
+    border: 1px solid #e0e4e8;
+    border-radius: 2px;
+    .top-card-content {
+        display: flex;
+        flex-direction: row;
+        flex-grow: 1;
+        .content-left {
+            height: 100%;
+            width: 50%;
+            &-title {
+                color: rgba(0, 0, 0, 0.64);
+            }
+            &-value {
+                padding: 12px 0;
+                color: #323130;
+                font-weight: 700;
+                font-size: 36px;
+            }
+        }
+        .content-right {
+            width: 0;
+            height: 100%;
+            display: flex;
+            flex-grow: 1;
+            align-items: flex-end;
+            justify-content: flex-end;
+            img {
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+    .top-card-footer {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding-top: 16px;
+        border-top: 1px solid #f0f0f0;
+        .footer-item-value {
+            color: #323130;
+            font-weight: 700;
+            font-size: 16px;
+        }
+    }
+}
+</style>
diff --git a/src/views/media/DashBoard/index.vue b/src/views/media/DashBoard/index.vue
index 0bd9d297..94dcb0f2 100644
--- a/src/views/media/DashBoard/index.vue
+++ b/src/views/media/DashBoard/index.vue
@@ -1,7 +1,93 @@
 <template>
-    <div class="page-container">仪表盘</div>
+    <div class="page-container">
+        <a-row :gutter="24">
+            <a-col :span="6">
+                <TopCard
+                    title="设备数量"
+                    :img="getImage('/media/dashboard-1.png')"
+                    :footer="deviceFooter"
+                    :value="deviceTotal"
+                />
+            </a-col>
+            <a-col :span="6">
+                <TopCard
+                    title="通道数量"
+                    :img="getImage('/media/dashboard-2.png')"
+                    :footer="channelFooter"
+                    :value="channelTotal"
+                />
+            </a-col>
+            <a-col :span="6">
+                <TopCard
+                    title="录像数量"
+                    :img="getImage('/media/dashboard-3.png')"
+                    :footer="aggFooter"
+                    :value="aggTotal"
+                />
+            </a-col>
+            <a-col :span="6">
+                <TopCard
+                    title="播放中数量"
+                    tooltip="当前正在播放的通道数量之和"
+                    :img="getImage('/media/dashboard-4.png')"
+                    :footer="aggPlayingFooter"
+                    :value="aggPlayingTotal"
+                />
+            </a-col>
+        </a-row>
+    </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import TopCard from '@/views/media/DashBoard/components/TopCard.vue'
+import { getImage } from '@/utils/comm';
+import homeApi from '@/api/media/home';
+import dashboardApi from '@/api/media/dashboard';
+import type { Footer } from '@/views/media/DashBoard/typings';
 
-<style lang="less" scoped></style>
+// 设备
+const deviceFooter = ref<Footer[]>([]);
+const deviceTotal = ref(0);
+const getDeviceData = () => {
+    homeApi.deviceCount().then((res) => {
+        deviceTotal.value = res.result;
+    });
+};
+getDeviceData();
+
+// 通道
+const channelFooter = ref<Footer[]>([]);
+const channelTotal = ref(0);
+const getChannelData = () => {
+    homeApi.channelCount().then((res) => {
+        channelTotal.value = res.result;
+    });
+};
+getChannelData();
+
+// 录像
+const aggFooter = ref<Footer[]>([]);
+const aggTotal = ref(0);
+const getAggData = () => {
+    dashboardApi.agg().then((res) => {
+        aggTotal.value = res.result.total;
+    });
+};
+getAggData();
+
+// 播放中
+const aggPlayingFooter = ref<Footer[]>([]);
+const aggPlayingTotal = ref(0);
+const getAggPlayingData = () => {
+    dashboardApi.aggPlaying().then((res) => {
+        aggTotal.value = res.result.playingTotal;
+    });
+};
+getAggPlayingData();
+</script>
+
+<style lang="less" scoped>
+.page-container {
+    padding: 24px;
+}
+</style>
diff --git a/src/views/media/DashBoard/typings.d.ts b/src/views/media/DashBoard/typings.d.ts
new file mode 100644
index 00000000..2a2a62f2
--- /dev/null
+++ b/src/views/media/DashBoard/typings.d.ts
@@ -0,0 +1,16 @@
+export type Agg = {
+    duration: number
+    total: number
+}
+
+export type AggPlaying = {
+    playerTotal: number
+    playingTotal: number
+}
+
+export type Footer = {
+    title: string;
+    value: number;
+    status?: "default" | "error" | "success" | "warning" | "processing"
+}
+
diff --git a/src/views/media/Home/components/BasicCountCard.vue b/src/views/media/Home/components/BasicCountCard.vue
index 024f1b19..53cb6d36 100644
--- a/src/views/media/Home/components/BasicCountCard.vue
+++ b/src/views/media/Home/components/BasicCountCard.vue
@@ -13,12 +13,12 @@
             <div class="box-item">
                 <div class="label">设备数量</div>
                 <div class="value">{{ deviceCount }}</div>
-                <img src="/images/home/top-2.png" alt="" />
+                <img :src="getImage('/home/top-1.png')" alt="" />
             </div>
             <div class="box-item">
                 <div class="label">通道数量</div>
                 <div class="value">{{ channelCount }}</div>
-                <img src="/images/home/top-1.png" alt="" />
+                <img :src="getImage('/home/top-2.png')" alt="" />
             </div>
         </div>
     </a-card>
@@ -26,6 +26,7 @@
 
 <script setup lang="ts">
 import homeApi from '@/api/media/home';
+import { getImage } from '@/utils/comm';
 
 const channelCount = ref(0);
 const deviceCount = ref(0);

From 68eaa0ac7624476623eb6ca04fc1760652fb5005 Mon Sep 17 00:00:00 2001
From: 100011797 <2642441182@qq.com>
Date: Wed, 1 Feb 2023 17:46:25 +0800
Subject: [PATCH 09/13] =?UTF-8?q?feat:=20=E8=BF=90=E8=A1=8C=E7=8A=B6?=
 =?UTF-8?q?=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/device/instance.ts                    |   8 +
 src/components/AIcon/index.tsx                |   1 +
 src/components/Table/index.module.less        |   4 +-
 src/components/Table/index.tsx                | 168 +++++++++---------
 .../Detail/Info/components/Config/Save.vue    | 105 +++++++++++
 .../Detail/Info/components/Config/index.vue   |  15 +-
 .../Instance/Detail/Running/Event/index.vue   |  68 +++++++
 .../Detail/Running/Property/PropertyCard.vue  | 114 ++++++++++++
 .../Detail/Running/Property/ValueRender.vue   |  14 ++
 .../Detail/Running/Property/index.vue         | 166 +++++++++++++++++
 .../device/Instance/Detail/Running/index.vue  | 142 +++++++++++----
 11 files changed, 686 insertions(+), 119 deletions(-)
 create mode 100644 src/views/device/Instance/Detail/Info/components/Config/Save.vue
 create mode 100644 src/views/device/Instance/Detail/Running/Event/index.vue
 create mode 100644 src/views/device/Instance/Detail/Running/Property/PropertyCard.vue
 create mode 100644 src/views/device/Instance/Detail/Running/Property/ValueRender.vue
 create mode 100644 src/views/device/Instance/Detail/Running/Property/index.vue

diff --git a/src/api/device/instance.ts b/src/api/device/instance.ts
index ceb17116..0465df68 100644
--- a/src/api/device/instance.ts
+++ b/src/api/device/instance.ts
@@ -114,6 +114,14 @@ export const isExists = (id: string) => server.get(`/device-instance/${id}/exist
  */
 export const update = (data: Partial<DeviceInstance>) => data.id ? server.patch(`/device-instance`, data) : server.post(`/device-instance`, data)
 
+/**
+ * 修改设备信息
+ * @param id 设备id
+ * @param data 设备信息
+ * @returns 
+ */
+export const modify = (id: string, data: Partial<DeviceInstance>) => server.put(`/device-instance/${id}`, data)
+
 /**
  * 获取配置信息
  * @param id 设备id
diff --git a/src/components/AIcon/index.tsx b/src/components/AIcon/index.tsx
index 1a21e6ff..7a8a21b3 100644
--- a/src/components/AIcon/index.tsx
+++ b/src/components/AIcon/index.tsx
@@ -45,6 +45,7 @@ const iconKeys = [
     'InfoCircleOutlined',
     'SearchOutlined',
     'EllipsisOutlined',
+    'ClockCircleOutlined'
 ]
 
 const Icon = (props: {type: string}) => {
diff --git a/src/components/Table/index.module.less b/src/components/Table/index.module.less
index 98a53a92..e3f9ebc1 100644
--- a/src/components/Table/index.module.less
+++ b/src/components/Table/index.module.less
@@ -1,9 +1,9 @@
 .jtable-body {
     width: 100%;
-    padding: 0 24px 24px;
+    padding: 16px 24px 24px;
     background-color: white;
     .jtable-body-header {
-        padding: 16px 0;
+        padding-bottom: 16px;
         display: flex;
         justify-content: space-between;
         align-items: center;
diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx
index 232cc992..45929b39 100644
--- a/src/components/Table/index.tsx
+++ b/src/components/Table/index.tsx
@@ -40,11 +40,11 @@ export interface ActionsType {
     children?: ActionsType[];
 }
 
-export interface JColumnProps extends ColumnProps{
+export interface JColumnProps extends ColumnProps {
     scopedSlots?: boolean; // 是否为插槽 true: 是 false: 否
 }
 
-export interface JTableProps extends TableProps{
+export interface JTableProps extends TableProps {
     request?: (params?: Record<string, any>) => Promise<Partial<RequestData>>;
     cardBodyClass?: string;
     columns: JColumnProps[];
@@ -53,8 +53,8 @@ export interface JTableProps extends TableProps{
     // actions?: ActionsType[];
     noPagination?: boolean;
     rowSelection?: TableProps['rowSelection'];
-    cardProps?:  Record<string, any>;
-    dataSource?:  Record<string, any>[];
+    cardProps?: Record<string, any>;
+    dataSource?: Record<string, any>[];
     gridColumn?: number;
     /**
      * 用于不同分辨率
@@ -62,10 +62,11 @@ export interface JTableProps extends TableProps{
      * gridColumns[1] 1440 ~  1600 分辨率；
      * gridColumns[2] > 1600 分辨率；
      */
-     gridColumns?: number[];
-     alertRender?: boolean;
-     type?: keyof typeof TypeEnum;
-     defaultParams?: Record<string, any>;
+    gridColumns?: number[];
+    alertRender?: boolean;
+    type?: keyof typeof TypeEnum;
+    defaultParams?: Record<string, any>;
+    bodyStyle?: Record<string, any>;
 }
 
 const JTable = defineComponent<JTableProps>({
@@ -88,13 +89,17 @@ const JTable = defineComponent<JTableProps>({
             type: String,
             default: ''
         },
+        bodyStyle: {
+            type: Object,
+            default: {}
+        },
         columns: {
             type: Array,
             default: () => []
         },
         params: {
             type: Object,
-            default: () => {}
+            default: () => { }
         },
         model: {
             type: [String, undefined],
@@ -142,7 +147,7 @@ const JTable = defineComponent<JTableProps>({
             }
         }
     } as any,
-    setup(props: JTableProps ,{ slots, emit, expose }){
+    setup(props: JTableProps, { slots, emit, expose }) {
         const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE
         const _model = ref<keyof typeof ModelEnum>(props.model ? props.model : ModelEnum.CARD); // 模式切换
         const column = ref<number>(props.gridColumn || 4);
@@ -174,9 +179,9 @@ const JTable = defineComponent<JTableProps>({
          */
         const handleSearch = async (_params?: Record<string, any>) => {
             loading.value = true
-            if(props.request) {
+            if (props.request) {
                 const resp = await props.request({
-                    pageIndex: 0, 
+                    pageIndex: 0,
                     pageSize: 12,
                     ...props.defaultParams,
                     ..._params,
@@ -185,14 +190,14 @@ const JTable = defineComponent<JTableProps>({
                         ...(_params?.terms || [])
                     ]
                 })
-                if(resp.status === 200){
-                    if(props.type === 'PAGE'){
+                if (resp.status === 200) {
+                    if (props.type === 'PAGE') {
                         // 判断如果是最后一页且最后一页为空，就跳转到前一页
-                        if(resp.result.total && resp.result.pageSize && resp.result.pageIndex && resp.result?.data?.length === 0) {
+                        if (resp.result.total && resp.result.pageSize && resp.result.pageIndex && resp.result?.data?.length === 0) {
                             handleSearch({
                                 ..._params,
                                 pageSize: pageSize.value,
-                                pageIndex: pageIndex.value > 0 ?  pageIndex.value - 1 : 0,
+                                pageIndex: pageIndex.value > 0 ? pageIndex.value - 1 : 0,
                             })
                         } else {
                             _dataSource.value = resp.result?.data || []
@@ -204,31 +209,30 @@ const JTable = defineComponent<JTableProps>({
                         _dataSource.value = resp?.result || []
                     }
                 } else {
-                    _dataSource.value  = []
+                    _dataSource.value = []
                 }
             } else {
-                console.log(props?.dataSource)
                 _dataSource.value = props?.dataSource || []
             }
             loading.value = false
         }
 
         watch(
-            () => props.params, 
+            () => props.params,
             (newValue) => {
                 handleSearch(newValue)
-            }, 
-            {deep: true, immediate: true}
+            },
+            { deep: true, immediate: true }
         )
 
         watch(
-            () => props.dataSource, 
-            (newValue) => {
-                if(props.dataSource){
+            () => props.dataSource,
+            () => {
+                if (props.dataSource && !props.request) {
                     handleSearch(props.params)
                 }
-            }, 
-            {deep: true, immediate: true}
+            },
+            { deep: true, immediate: true }
         )
 
         onMounted(() => {
@@ -241,6 +245,10 @@ const JTable = defineComponent<JTableProps>({
             window.onresize = null
         })
 
+        watchEffect(() => {
+            // console.log(props.bodyStyle)
+        })
+
         /**
          * 刷新数据
          * @param _params 
@@ -256,10 +264,10 @@ const JTable = defineComponent<JTableProps>({
         /**
          * 导出方法
          */
-         expose({ reload })
-        
+        expose({ reload })
+
         return () => <Spin spinning={loading.value}>
-                <div class={styles["jtable-body"]}>
+            <div class={styles["jtable-body"]} style={{ ...props.bodyStyle }}>
                 <div class={styles["jtable-body-header"]}>
                     <div class={styles["jtable-body-header-left"]}>
                         {/* 顶部左边插槽 */}
@@ -278,7 +286,7 @@ const JTable = defineComponent<JTableProps>({
                                 <div class={[styles["jtable-setting-item"], ModelEnum.TABLE === _model.value ? styles['active'] : '']} onClick={() => {
                                     _model.value = ModelEnum.TABLE
                                 }}>
-                                    <UnorderedListOutlined  />
+                                    <UnorderedListOutlined />
                                 </div>
                             </div>
                         }
@@ -288,66 +296,66 @@ const JTable = defineComponent<JTableProps>({
                 <div class={styles['jtable-content']}>
                     {
                         props.alertRender && props?.rowSelection && props?.rowSelection?.selectedRowKeys && props.rowSelection.selectedRowKeys?.length ?
-                        <div class={styles['jtable-alert']}>
-                            <Alert
-                                message={'已选择' + props?.rowSelection?.selectedRowKeys?.length + '项'}
-                                type="info"
-                                onClose={() => {
-                                    emit('cancelSelect')
-                                }}
-                                closeText={<a-button type="link">取消选择</a-button>}
-                             />
-                        </div> : null
+                            <div class={styles['jtable-alert']}>
+                                <Alert
+                                    message={'已选择' + props?.rowSelection?.selectedRowKeys?.length + '项'}
+                                    type="info"
+                                    onClose={() => {
+                                        emit('cancelSelect')
+                                    }}
+                                    closeText={<a-button type="link">取消选择</a-button>}
+                                />
+                            </div> : null
                     }
                     {
                         _model.value === ModelEnum.CARD ?
-                        <div class={styles['jtable-card']}>
-                            {
-                                _dataSource.value.length ? 
-                                <div 
-                                    class={styles['jtable-card-items']}
-                                    style={{gridTemplateColumns: `repeat(${column.value}, 1fr)`}}
-                                >
-                                    {
-                                        _dataSource.value.map(item => slots.card ? 
-                                            <div class={[styles['jtable-card-item'], props.cardBodyClass]}>
-                                                {slots.card(item)}
-                                            </div> : null
-                                        )
-                                    }
-                                </div> : 
-                                <div><Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /></div>
-                            }
-                        </div> :
-                        <div>
-                            <Table
-                                dataSource={_dataSource.value}
-                                columns={_columns.value}
-                                pagination={false}
-                                rowKey="id"
-                                rowSelection={props.rowSelection}
-                                scroll={{x: 1366}}
-                                v-slots={{
-                                    bodyCell: (dt: Record<string, any>) => {
-                                        const {column, record} = dt;
-                                        if((column?.key || column?.dataIndex) && column?.scopedSlots && (slots?.[column?.dataIndex] || slots?.[column?.key])) {
-                                            const _key = column?.key || column?.dataIndex
-                                            return slots?.[_key]!(record)
-                                        } else {
-                                            return record?.[column?.dataIndex] || ''
+                            <div class={styles['jtable-card']}>
+                                {
+                                    _dataSource.value.length ?
+                                        <div
+                                            class={styles['jtable-card-items']}
+                                            style={{ gridTemplateColumns: `repeat(${column.value}, 1fr)` }}
+                                        >
+                                            {
+                                                _dataSource.value.map(item => slots.card ?
+                                                    <div class={[styles['jtable-card-item'], props.cardBodyClass]}>
+                                                        {slots.card(item)}
+                                                    </div> : null
+                                                )
+                                            }
+                                        </div> :
+                                        <div><Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /></div>
+                                }
+                            </div> :
+                            <div>
+                                <Table
+                                    dataSource={_dataSource.value}
+                                    columns={_columns.value}
+                                    pagination={false}
+                                    rowKey="id"
+                                    rowSelection={props.rowSelection}
+                                    scroll={{ x: 1366 }}
+                                    v-slots={{
+                                        bodyCell: (dt: Record<string, any>) => {
+                                            const { column, record } = dt;
+                                            if ((column?.key || column?.dataIndex) && column?.scopedSlots && (slots?.[column?.dataIndex] || slots?.[column?.key])) {
+                                                const _key = column?.key || column?.dataIndex
+                                                return slots?.[_key]!(record)
+                                            } else {
+                                                return record?.[column?.dataIndex] || ''
+                                            }
                                         }
-                                    }
-                                }}
-                             />
-                        </div>
+                                    }}
+                                />
+                            </div>
                     }
                 </div>
                 {/* 分页 */}
                 {
                     (!!_dataSource.value.length) && !props.noPagination && props.type === 'PAGE' &&
                     <div class={styles['jtable-pagination']}>
-                        <Pagination 
-                            size="small" 
+                        <Pagination
+                            size="small"
                             total={total.value}
                             showQuickJumper={false}
                             showSizeChanger={true}
diff --git a/src/views/device/Instance/Detail/Info/components/Config/Save.vue b/src/views/device/Instance/Detail/Info/components/Config/Save.vue
new file mode 100644
index 00000000..724cc25c
--- /dev/null
+++ b/src/views/device/Instance/Detail/Info/components/Config/Save.vue
@@ -0,0 +1,105 @@
+<template>
+    <a-drawer placement="right" :closable="false" :visible="true">
+        <template #title>
+            <div
+                style="
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                "
+            >
+                <span
+                    ><AIcon
+                        type="CloseOutlined"
+                        style="margin-right: 5px"
+                        @click="onClose"
+                    />编辑配置</span
+                >
+                <a-button type="primary" @click="saveBtn">保存</a-button>
+            </div>
+        </template>
+        <a-form layout="vertical" ref="formRef" :model="modelRef">
+            <template v-for="(item, index) in props.config" :key="index">
+                <a-form-item
+                    :name="item.property"
+                    v-for="i in item.properties"
+                    :key="i.property"
+                >
+                    <template #label>
+                        <span style="margin-right: 5px">{{ i.name }}</span>
+                        <a-tooltip v-if="i.description" :title="i.description"
+                            ><AIcon type="QuestionCircleOutlined"
+                        /></a-tooltip>
+                    </template>
+                    <ValueItem
+                        v-model:modelValue="modelRef[i.property]"
+                        :itemType="i.type.type"
+                        :options="
+                            i.type.type === 'enum'
+                                ? (i.type?.elements || []).map((item) => {
+                                      return {
+                                          label: item?.text,
+                                          value: item?.value,
+                                      };
+                                  })
+                                : undefined
+                        "
+                    />
+                </a-form-item>
+            </template>
+        </a-form>
+    </a-drawer>
+</template>
+
+<script lang="ts" setup>
+import { modify } from '@/api/device/instance';
+import { useInstanceStore } from '@/store/instance';
+import { message } from 'ant-design-vue';
+
+const emit = defineEmits(['close', 'save']);
+
+const formRef = ref();
+const modelRef = reactive({});
+
+const instanceStore = useInstanceStore();
+
+const props = defineProps({
+    config: {
+        type: Array,
+        default: []
+    }
+})
+
+watchEffect(() => {
+    const obj = instanceStore.current?.configuration
+    if(obj && Object.keys(obj).length) {
+        (props?.config || []).map((item: any) => {
+            if(Array.isArray(item.properties) && item?.properties.length){
+                item.properties.map((i: any) => {
+                    modelRef[i.property] = obj[i.property]
+                })
+            }
+        })
+    }
+
+})
+
+const onClose = () => {
+    emit('close');
+    formRef.value.resetFields();
+};
+
+const saveBtn = () => {
+    formRef.value.validate().then(async () => {
+        const values = toRaw(modelRef);
+        const resp = await modify(instanceStore.current?.id || '', {
+            id: instanceStore.current?.id,
+            configuration: { ...values }
+        })
+        if(resp.status === 200){
+            message.success('操作成功！')
+            emit('save');
+        }
+    });
+};
+</script>
\ No newline at end of file
diff --git a/src/views/device/Instance/Detail/Info/components/Config/index.vue b/src/views/device/Instance/Detail/Info/components/Config/index.vue
index 4d7b0d78..6909b405 100644
--- a/src/views/device/Instance/Detail/Info/components/Config/index.vue
+++ b/src/views/device/Instance/Detail/Info/components/Config/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div style="margin-top: 20px" v-if="config.length">
-        <div style="display: flex;">
+        <div style="display: flex; margin-bottom: 20px; align-items: center;">
             <div style="font-size: 16px; font-weight: 700">配置</div>
             <a-space>
                <a-button type="link" @click="visible = true"><AIcon type="EditOutlined" />编辑</a-button>
@@ -13,11 +13,11 @@
             </a-space>
         </div>
         <a-descriptions bordered size="small" v-for="i in config" :key="i.name">
-            <template #title><h4>{{i.name}}</h4></template>
+            <template #title><h4 style="font-size: 15px">{{i.name}}</h4></template>
             <a-descriptions-item v-for="item in i.properties" :key="item.property">
                 <template #label>
+                    <span style="margin-right: 5px">{{item.name}}</span>
                     <a-tooltip v-if="item.description" :title="item.description"><AIcon type="QuestionCircleOutlined" /></a-tooltip>
-                    <span>{{item.name}}</span>
                 </template>
                 <span v-if="item.type.type === 'password' && instanceStore.current?.configuration?.[item.property]?.length > 0">******</span>
                 <span v-else>
@@ -26,6 +26,7 @@
                 </span>
             </a-descriptions-item>
         </a-descriptions>
+        <Save v-if="visible" @save="saveBtn" @close="visible = false" :config="config" />
     </div>
 </template>
 
@@ -34,6 +35,7 @@ import { useInstanceStore } from "@/store/instance"
 import { ConfigMetadata } from "@/views/device/Product/typings"
 import { getConfigMetadata, _deploy, configurationReset } from '@/api/device/instance'
 import { message } from "ant-design-vue"
+import Save from './Save.vue'
 
 const instanceStore = useInstanceStore()
 const visible = ref<boolean>(false)
@@ -78,4 +80,11 @@ const resetBtn = async () => {
         }
     }
 }
+
+const saveBtn = () => {
+    visible.value = false
+    if(instanceStore.current.id){
+        instanceStore.refresh(instanceStore.current.id)
+    }
+}
 </script>
\ No newline at end of file
diff --git a/src/views/device/Instance/Detail/Running/Event/index.vue b/src/views/device/Instance/Detail/Running/Event/index.vue
new file mode 100644
index 00000000..bb863222
--- /dev/null
+++ b/src/views/device/Instance/Detail/Running/Event/index.vue
@@ -0,0 +1,68 @@
+<template>
+    <Search :columns="columns" target="device-instance-running-events" />
+    <JTable
+        ref="eventsRef"
+        :columns="columns"
+        :dataSource="dataSource"
+        model="TABLE"
+        :bodyStyle="{padding: '0 24px'}"
+    >
+        <template #timestamp="slotProps">
+            {{ moment(slotProps.timestamp).format('YYYY-MM-DD HH:mm:ss') }}
+        </template>
+        <template #action="slotProps">
+            <a-button type="link" @click="detail(slotProps)">
+                <AIcon type="SearchOutlined" />
+            </a-button>
+        </template>
+    </JTable>
+</template>
+
+<script lang="ts" setup>
+import moment from 'moment'
+const events = defineProps({
+    data: {
+        type: Object,
+        default: () => {}
+    }
+})
+
+const columns = ref<Record<string, any>>([
+    {
+        title: '时间',
+        dataIndex: 'timestamp',
+        key: 'timestamp',
+        scopedSlots: true,
+    },
+    {
+        title: '操作',
+        dataIndex: 'action',
+        key: 'action',
+        scopedSlots: true,
+    }
+])
+
+const dataSource = ref<Record<string, any>[]>([])
+
+watchEffect(() => {
+    if(events.data?.valueType?.type === 'object'){
+        (events.data.valueType?.properties || []).map((i: any) => {
+            columns.value.splice(0, 0, {
+              key: i.id,
+              title: i.name,
+              dataIndex: `${i.id}_format`,
+            //   renderText: (text) => (typeof text === 'object' ? JSON.stringify(text) : text),
+            })
+        })
+    } else {
+        columns.value.splice(0, 0, {
+            title: '数据',
+            dataIndex: 'value',
+        })
+    }
+})
+
+const detail = () => {
+
+}
+</script>
\ No newline at end of file
diff --git a/src/views/device/Instance/Detail/Running/Property/PropertyCard.vue b/src/views/device/Instance/Detail/Running/Property/PropertyCard.vue
new file mode 100644
index 00000000..d21fb23d
--- /dev/null
+++ b/src/views/device/Instance/Detail/Running/Property/PropertyCard.vue
@@ -0,0 +1,114 @@
+<template>
+    <a-card :hoverable="true" class="card-box">
+        <a-spin :spinning="loading">
+            <div class="card-container">
+                <div class="header">
+                    <div class="title">{{ _props.data.name }}</div>
+                    <div class="extra">
+                        <a-space>
+                            <a-tooltip title="设置属性至设备" v-if="data.expands?.type?.includes('write')">
+                                <AIcon
+                                    type="EditOutlined"
+                                    style="font-size: 12px"
+                                />
+                            </a-tooltip>
+                            <a-tooltip title="指标" v-if="(data.expands?.metrics || []).length > 0 &&
+            ['int', 'long', 'float', 'double', 'string', 'boolean', 'date'].includes(
+              data.valueType?.type || '',
+            )">
+                                <AIcon
+                                    type="ClockCircleOutlined"
+                                    style="font-size: 12px"
+                                />
+                            </a-tooltip>
+                            <a-tooltip title="获取最新属性值" v-if="data.expands?.type?.includes('read')">
+                                <AIcon
+                                    type="SyncOutlined"
+                                    style="font-size: 12px"
+                                />
+                            </a-tooltip>
+                            <a-tooltip title="详情">
+                                <AIcon
+                                    type="BarsOutlined"
+                                    style="font-size: 12px"
+                                />
+                            </a-tooltip>
+                        </a-space>
+                    </div>
+                </div>
+                <div class="value">
+                    <ValueRender :data="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>
+            </div>
+        </a-spin>
+    </a-card>
+</template>
+
+<script lang="ts" setup>
+import ValueRender from './ValueRender.vue'
+const _props = defineProps({
+    data: {
+        type: Object,
+        default: () => {},
+    },
+});
+const loading = ref<boolean>(true);
+
+watchEffect(() => {
+    if (_props.data.name) {
+        loading.value = false;
+    }
+});
+</script>
+
+<style lang="less" scoped>
+.card-box {
+    background-color: rgba(0, 0, 0, 0.02);
+    width: 100%;
+
+    .card-container {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        height: 154px;
+
+        .header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            .title {
+                width: 60%;
+                margin-right: 10px;
+                overflow: hidden;
+                color: rgba(0, 0, 0, 0.65);
+                font-weight: 400;
+                font-size: 12px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+        }
+
+        .value {
+            height: 60px;
+            line-height: 60px;
+            color: #323130;
+            font-weight: 700;
+            font-size: 24px;
+            margin: 10px 0;
+        }
+
+        .bottom {
+            .time-value {
+                margin-top: 5px;
+                font-size: 16px;
+                min-height: 25px;
+                color: #000;
+            }
+        }
+    }   
+}
+</style>
\ No newline at end of file
diff --git a/src/views/device/Instance/Detail/Running/Property/ValueRender.vue b/src/views/device/Instance/Detail/Running/Property/ValueRender.vue
new file mode 100644
index 00000000..44681001
--- /dev/null
+++ b/src/views/device/Instance/Detail/Running/Property/ValueRender.vue
@@ -0,0 +1,14 @@
+<template>
+    <div>
+        {{data.value || '--'}}
+    </div>
+</template>
+
+<script lang="ts" setup>
+const _data = defineProps({
+    data: {
+        type: Object,
+        default: () => {},
+    },
+});
+</script>
\ No newline at end of file
diff --git a/src/views/device/Instance/Detail/Running/Property/index.vue b/src/views/device/Instance/Detail/Running/Property/index.vue
new file mode 100644
index 00000000..24ed16b6
--- /dev/null
+++ b/src/views/device/Instance/Detail/Running/Property/index.vue
@@ -0,0 +1,166 @@
+<template>
+    <JTable
+        ref="metadataRef"
+        :columns="columns"
+        :dataSource="dataSource"
+        :bodyStyle="{padding: 0}"
+    >
+        <template #headerTitle>
+            <a-input-search
+                placeholder="请输入名称"
+                style="width: 300px; margin-bottom: 10px"
+                @search="onSearch"
+            />
+        </template>
+        <template #card="slotProps">
+            <PropertyCard :data="slotProps" />
+        </template>
+        <template #value="slotProps">
+            <ValueRender :data="slotProps" />
+        </template>
+        <template #time="slotProps">
+            {{slotProps.time || '--'}}
+        </template>
+        <template #action="slotProps">
+            <a-space :size="16">
+                <a-tooltip
+                    v-for="i in getActions(slotProps)"
+                    :key="i.key"
+                    v-bind="i.tooltip"
+                >
+                    <a-popconfirm
+                        v-if="i.popConfirm"
+                        v-bind="i.popConfirm"
+                        :disabled="i.disabled"
+                    >
+                        <a-button
+                            :disabled="i.disabled"
+                            style="padding: 0"
+                            type="link"
+                            ><AIcon :type="i.icon"
+                        /></a-button>
+                    </a-popconfirm>
+                    <a-button
+                        style="padding: 0"
+                        type="link"
+                        v-else
+                        @click="i.onClick && i.onClick(slotProps)"
+                    >
+                        <a-button
+                            :disabled="i.disabled"
+                            style="padding: 0"
+                            type="link"
+                            ><AIcon :type="i.icon"
+                        /></a-button>
+                    </a-button>
+                </a-tooltip>
+            </a-space>
+        </template>
+    </JTable>
+</template>
+
+<script lang="ts" setup>
+import { PropertyData } from "../../../typings"
+import PropertyCard from './PropertyCard.vue'
+import ValueRender from './ValueRender.vue'
+
+const columns = [
+    {
+        title: '名称',
+        dataIndex: 'name',
+        key: 'name',
+    },
+    {
+        title: '值',
+        dataIndex: 'value',
+        key: 'value',
+        scopedSlots: true
+    },
+    {
+        title: '更新时间',
+        dataIndex: 'time',
+        key: 'time',
+        scopedSlots: true,
+    },
+    {
+        title: '操作',
+        dataIndex: 'action',
+        key: 'action',
+        scopedSlots: true,
+    },
+]
+
+const _data = defineProps({
+    data: {
+        type: Array,
+        default: () => []
+    }
+})
+
+const dataSource = ref<PropertyData[]>([])
+
+const getActions = (data: Partial<Record<string, any>>) => {
+    const arr = []
+    if(data.expands?.type?.includes('write')){
+        arr.push({
+            key: 'edit',
+            tooltip: {
+                title: '设置属性至设备',
+            },
+            icon: 'EditOutlined',
+            onClick: () => {
+                
+            },
+        })
+    }
+    if((data.expands?.metrics || []).length && ['int', 'long', 'float', 'double', 'string', 'boolean', 'date'].includes(
+        data.valueType?.type || '',
+    )){
+        arr.push({
+            key: 'metrics',
+            tooltip: {
+                title: '指标',
+            },
+            icon: 'ClockCircleOutlined',
+            onClick: () => {
+                
+            },
+        })
+    }
+    if(data.expands?.type?.includes('read')){
+        arr.push({
+            key: 'read',
+            tooltip: {
+                title: '获取最新属性值',
+            },
+            icon: 'SyncOutlined',
+            onClick: () => {
+                
+            },
+        })
+    }
+    arr.push({
+        key: 'detail',
+        text: '详情',
+        tooltip: {
+            title: '详情',
+        },
+        icon: 'BarsOutlined',
+        onClick: () => {
+            
+        },
+    })
+    return arr
+}
+
+watchEffect(() => {
+    dataSource.value = _data.data as PropertyData[]
+})
+
+const onSearch = () => {};
+
+</script>
+
+<style scoped lang="less">
+    
+</style>
\ No newline at end of file
diff --git a/src/views/device/Instance/Detail/Running/index.vue b/src/views/device/Instance/Detail/Running/index.vue
index e2e39b8a..e97db6d1 100644
--- a/src/views/device/Instance/Detail/Running/index.vue
+++ b/src/views/device/Instance/Detail/Running/index.vue
@@ -1,46 +1,120 @@
 <template>
     <a-card>
-        <a-row type="flex">
-            <a-col flex="200px">
-                <div>
-                    <a-input-search
-                        v-model:value="value"
-                        placeholder="请输入事件名称"
-                        style="width: 200px; margin-bottom: 10px"
-                        @search="onSearch"
+        <div class="property-box">
+            <div class="property-box-left">
+                <a-input-search
+                    v-model:value="value"
+                    placeholder="请输入事件名称"
+                    style="width: 200px; margin-bottom: 10px"
+                    @search="onSearch"
+                    :allowClear="true"
+                />
+                <a-tabs
+                    tab-position="left"
+                    style="height: 600px"
+                    v-model:activeKey="activeKey"
+                    :tabBarStyle="{ width: '200px' }"
+                    @change="tabChange"
+                >
+                    <a-tab-pane
+                        v-for="i in tabList"
+                        :key="i.key"
+                        :tab="i.tab"
                     />
-                    <a-tabs
-                        tab-position="left"
-                        :style="{ height: '600px' }"
-                        v-model:activeKey="activeKey"
-                        tabBarStyle="width: 200px"
-                    >
-                        <a-tab-pane v-for="i in tabList" :key="i.key" :tab="i.tab" />
-                    </a-tabs>
-                </div>
-            </a-col>
-            <a-col flex="auto">
-                <!-- <component :is="tabs[activeKey]" /> -->
-                123
-            </a-col>
-        </a-row>
+                </a-tabs>
+            </div>
+            <div class="property-box-right">
+                <Event v-if="type === 'event'" :data="data" />
+                <Property v-else :data="properties" />
+            </div>
+        </div>
     </a-card>
 </template>
 
 <script lang="ts" setup>
-const activeKey = ref<string>('property')
-const tabList = ref<{key: string, tab: string}[]>([
-    {
-        key: 'property',
-        tab: '属性'
-    },
-    {
-        key: 'event1',
-        tab: '事件1'
+import { useInstanceStore } from '@/store/instance';
+import _ from 'lodash';
+import Event from './Event/index.vue';
+import Property from './Property/index.vue';
+
+const activeKey = ref<string>('property');
+const tabList = ref<{ key: string; tab: string; type: 'property' | 'event' }[]>(
+    [
+        {
+            key: 'property',
+            tab: '属性',
+            type: 'property',
+        },
+    ],
+);
+const type = ref<string>('property');
+const data = ref<Record<string, any>>({})
+const value = ref<string>('');
+const instanceStore = useInstanceStore()
+const metadata = JSON.parse(instanceStore.current?.metadata || '{}')
+const properties = metadata.properties
+const events = metadata.events
+
+watch(() => events, (newVal) => {
+    if(events && newVal.length){
+        newVal.map((item: any) => {
+            tabList.value.push({
+                ...item,
+                key: item.id,
+                tab: item.name,
+                type: 'event',
+            })
+        })
     }
-])
+}, {
+    deep: true,
+    immediate: true
+})
 
 const onSearch = () => {
+    const arr = [
+        {
+            key: 'property',
+            tab: '属性',
+            type: 'property',
+        },
+        ...events.map((item: any) => {
+            return {
+                ...item,
+                key: item.id,
+                tab: item.name,
+                type: 'event',
+            }
+        })
+    ]
+    if(value.value){
+        const li = arr.filter((i: any) => {
+            return i?.tab.indexOf(value.value) !== -1;
+        })
+        tabList.value = _.cloneDeep(li)
+    } else {
+        tabList.value = _.cloneDeep(arr)
+    }
+};
+const tabChange = (key: string) => {
+    const dt = tabList.value.find((i) => i.key === key);
+    if (dt) {
+        data.value = dt
+        type.value = dt.type;
+    }
+};
 
+</script>
+
+<style lang="less" scoped>
+.property-box {
+    display: flex;
+    .property-box-left {
+        width: 200px;
+        margin-right: 20px;
+    }
+    .property-box-right {
+        flex: 1;
+    }
 }
-</script>
\ No newline at end of file
+</style>
\ No newline at end of file

From d4bf79f802a5d3f605410de933a44a15df6e3fdd Mon Sep 17 00:00:00 2001
From: easy <1358086367@qq.com>
Date: Wed, 1 Feb 2023 18:10:53 +0800
Subject: [PATCH 10/13] =?UTF-8?q?update:=20=E8=8F=9C=E5=8D=95=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/system/menu.ts                        |  4 +-
 src/views/system/Menu/Detail/BasicInfo.vue    | 97 ++++++++++++-------
 src/views/system/Menu/Detail/ButtonMange.vue  | 37 +++++--
 src/views/system/Menu/Setting/index.vue       | 16 +++
 .../Menu/components/ButtonAddDialog.vue       | 84 +++++++++++++---
 .../system/Menu/components/PermissChoose.vue  | 16 +--
 src/views/system/Menu/index.vue               | 42 ++++----
 7 files changed, 215 insertions(+), 81 deletions(-)
 create mode 100644 src/views/system/Menu/Setting/index.vue

diff --git a/src/api/system/menu.ts b/src/api/system/menu.ts
index a8e6a60e..9f2c8ebd 100644
--- a/src/api/system/menu.ts
+++ b/src/api/system/menu.ts
@@ -14,4 +14,6 @@ export const getMenuInfo_api = (id:string) => server.get(`/menu/${id}`);
 // 编辑菜单信息
 export const saveMenuInfo_api = (data: object) => server.patch(`/menu`, data);
 // 新增菜单信息
-export const addMenuInfo_api = (data: object) => server.post(`/menu`, data);
\ No newline at end of file
+export const addMenuInfo_api = (data: object) => server.post(`/menu`, data);
+// 删除菜单信息
+export const delMenuInfo_api = (id: string) => server.remove(`/menu/${id}`);
\ No newline at end of file
diff --git a/src/views/system/Menu/Detail/BasicInfo.vue b/src/views/system/Menu/Detail/BasicInfo.vue
index 790d38b7..ea01abbc 100644
--- a/src/views/system/Menu/Detail/BasicInfo.vue
+++ b/src/views/system/Menu/Detail/BasicInfo.vue
@@ -181,11 +181,18 @@
                     </a-form-item>
                 </a-form-item>
                 <a-form-item label="权限">
-                    <PermissChoose :first-width="3" max-height="350px" v-model:value="form.data.permissions" />
+                    <PermissChoose
+                        :first-width="3"
+                        max-height="350px"
+                        v-model:value="form.data.permissions"
+                    />
                 </a-form-item>
             </a-form>
 
-            <a-button type="primary" @click="clickSave" v-loading="saveLoading"
+            <a-button
+                type="primary"
+                @click="form.clickSave"
+                v-loading="form.saveLoading"
                 >保存</a-button
             >
         </a-card>
@@ -215,14 +222,17 @@ import {
     addMenuInfo_api,
 } from '@/api/system/menu';
 
+// 路由
 const route = useRoute();
 const router = useRouter();
 const routeParams = {
     id: route.params.id === ':id' ? undefined : (route.params.id as string),
     ...route.query,
     url: route.query.basePath,
+    parentId: route.query.pid,
 };
 
+// 表单
 const basicFormRef = ref<FormInstance>();
 const permissFormRef = ref<FormInstance>();
 const form = reactive({
@@ -238,15 +248,18 @@ const form = reactive({
         indirectMenus: [],
         ...routeParams,
     } as formType,
-
     treeData: [], // 关联菜单
     assetsType: [] as assetType[], // 资产类型
+    saveLoading: false,
 
     init: () => {
         // 获取菜单详情
         routeParams.id &&
-            getMenuInfo_api(routeParams.id).then((resp) => {
-                form.data = resp.result as formType
+            getMenuInfo_api(routeParams.id).then((resp: any) => {
+                form.data = {
+                    ...(resp.result as formType),
+                    accessSupport: resp.result.accessSupport.value,
+                };
             });
         // 获取关联菜单
         getMenuTree_api({ paging: false }).then((resp: any) => {
@@ -260,9 +273,52 @@ const form = reactive({
             }));
         });
     },
+    clickSave: () => {
+        if (!basicFormRef || !permissFormRef) return;
+        Promise.all([
+            basicFormRef.value?.validate(),
+            permissFormRef.value?.validate(),
+        ])
+            .then(() => {
+                const api = routeParams.id ? saveMenuInfo_api : addMenuInfo_api;
+                form.saveLoading = true;
+                const accessSupportValue = form.data.accessSupport;
+                const params = {
+                    ...form.data,
+                    accessSupport: {
+                        value: accessSupportValue,
+                        label:
+                            accessSupportValue === 'unsupported'
+                                ? '不支持'
+                                : accessSupportValue === 'support'
+                                ? '支持'
+                                : '间接控制',
+                    },
+                };
+                api(params)
+                    .then((resp: any) => {
+                        if (resp.status === 200) {
+                            message.success('操作成功！');
+                            // 新增后刷新页面，编辑则不需要
+                            if (!routeParams.id) {
+                                router.push(
+                                    `/system/Menu/detail/${resp.result.id}`,
+                                );
+                                routeParams.id = resp.result.id;
+                                form.init();
+                            }
+                        } else {
+                            message.error('操作失败！');
+                        }
+                    })
+                    .finally(() => (form.saveLoading = false));
+            })
+            .catch((err) => {});
+    },
 });
 form.init();
 
+// 弹窗
 const ChooseIconRef = ref<any>(null);
 const dialog = {
     openDialog: () => {
@@ -272,36 +328,6 @@ const dialog = {
         form.data.icon = typeStr || form.data.icon;
     },
 };
-const saveLoading = ref<boolean>(false);
-const clickSave = () => {
-    if (!basicFormRef || !permissFormRef) return;
-    Promise.all([
-        basicFormRef.value?.validate(),
-        permissFormRef.value?.validate(),
-    ])
-        .then(() => {
-            const api = routeParams.id ? saveMenuInfo_api : addMenuInfo_api;
-            saveLoading.value = true;
-            api(form.data)
-                .then((resp: any) => {
-                    if (resp.status === 200) {
-                        message.success('操作成功！');
-                        // 新增后刷新页面，编辑则不需要
-                        if (!routeParams.id) {
-                            router.push(
-                                `/system/Menu/detail/${resp.result.id}`,
-                            );
-                            routeParams.id = resp.result.id;
-                            form.init();
-                        }
-                    } else {
-                        message.error('操作失败！');
-                    }
-                })
-                .finally(() => (saveLoading.value = false));
-        })
-        .catch((err) => {});
-};
 
 type formType = {
     name: string;
@@ -314,6 +340,7 @@ type formType = {
     accessSupport: string;
     assetType: string | undefined;
     indirectMenus: any[];
+    parentId?: string;
 };
 
 type assetType = {
diff --git a/src/views/system/Menu/Detail/ButtonMange.vue b/src/views/system/Menu/Detail/ButtonMange.vue
index 861b510f..cc232ce3 100644
--- a/src/views/system/Menu/Detail/ButtonMange.vue
+++ b/src/views/system/Menu/Detail/ButtonMange.vue
@@ -5,6 +5,7 @@
             :columns="table.columns"
             model="TABLE"
             :dataSource="table.tableData"
+            noPagination
         >
             <template #headerTitle>
                 <a-button
@@ -33,7 +34,7 @@
                             type="link"
                             @click="() => dialog.openDialog('查看', slotProps)"
                         >
-                            <edit-outlined />
+                            <search-outlined />
                         </a-button>
                     </a-tooltip>
 
@@ -41,7 +42,7 @@
                         title="确认删除"
                         ok-text="确定"
                         cancel-text="取消"
-                        :disabled="slotProps.status"
+                        @confirm="table.clickDel(slotProps)"
                     >
                         <a-tooltip>
                             <template #title>删除</template>
@@ -55,7 +56,11 @@
         </JTable>
 
         <div class="dialog">
-            <ButtonAddDialog ref="dialogRef" @confirm="dialog.confirm" />
+            <ButtonAddDialog
+                ref="dialogRef"
+                @confirm="dialog.confirm"
+                :menu-info="menuInfo"
+            />
         </div>
     </div>
 </template>
@@ -63,12 +68,14 @@
 <script setup lang="ts">
 import {
     EditOutlined,
+    SearchOutlined,
     DeleteOutlined,
     PlusOutlined,
 } from '@ant-design/icons-vue';
 import ButtonAddDialog from '../components/ButtonAddDialog.vue';
 
-import { getMenuInfo_api } from '@/api/system/menu';
+import { getMenuInfo_api, saveMenuInfo_api } from '@/api/system/menu';
+import { message } from 'ant-design-vue';
 
 // 路由
 const route = useRoute();
@@ -82,10 +89,14 @@ const dialogRef = ref<any>(null);
 const dialog = {
     // 打开弹窗
     openDialog: (mode: string, row?: object) => {
-        dialogRef.value && dialogRef.value.openDialog(mode, row);
+        dialogRef.value && dialogRef.value.openDialog(mode, { ...row });
+    },
+    confirm: () => {
+        table.getList();
     },
-    confirm: () => {},
 };
+// 菜单的基本信息-其中包括了表格的数据
+const menuInfo = ref<any>({});
 // 表格相关
 const table = reactive({
     columns: [
@@ -118,9 +129,23 @@ const table = reactive({
     getList: () => {
         routeParams.id &&
             getMenuInfo_api(routeParams.id).then((resp: any) => {
+                menuInfo.value = resp.result;
                 table.tableData = resp.result.buttons as tableDataItem[];
             });
     },
+    clickDel: (row: tableDataItem) => {
+        const buttons = menuInfo.value.buttons.filter(
+            (item: tableDataItem) => item.id !== row.id,
+        );
+        const params = {
+            ...menuInfo.value,
+            buttons,
+        };
+        saveMenuInfo_api(params).then(() => {
+            message.success('操作成功');
+            table.getList();
+        });
+    },
 });
 table.getList();
 type tableDataItem = {
diff --git a/src/views/system/Menu/Setting/index.vue b/src/views/system/Menu/Setting/index.vue
new file mode 100644
index 00000000..ef0d43ae
--- /dev/null
+++ b/src/views/system/Menu/Setting/index.vue
@@ -0,0 +1,16 @@
+<template>
+    <div class="setting-container">
+        <a-card>
+            <h5>
+                <info-circle-outlined />
+                <span>基于系统源代码中的菜单数据，配置系统菜单。</span>
+            </h5>
+        </a-card>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { InfoCircleOutlined } from '@ant-design/icons-vue';
+</script>
+
+<style scoped></style>
diff --git a/src/views/system/Menu/components/ButtonAddDialog.vue b/src/views/system/Menu/components/ButtonAddDialog.vue
index 78f9d309..0a54e5df 100644
--- a/src/views/system/Menu/components/ButtonAddDialog.vue
+++ b/src/views/system/Menu/components/ButtonAddDialog.vue
@@ -4,8 +4,12 @@
         :title="form.mode"
         width="660px"
         @ok="dialog.handleOk"
+        :maskClosable="false"
+        cancelText="取消"
+        okText="确定"
+        :confirmLoading="dialog.loading"
     >
-        <a-form :model="form.data" class="basic-form">
+        <a-form :model="form.data" class="basic-form" ref="formRef">
             <a-form-item
                 label="编码"
                 name="id"
@@ -34,14 +38,29 @@
             </a-form-item>
             <a-form-item
                 label="权限"
-                :rules="[{ required: true, message: '请选择权限', validator: form.checkPermission, }]"
+                name="permissions"
+                :rules="[
+                    {
+                        required: true,
+                        message: '请选择权限',
+                        validator: form.checkPermission,
+                    },
+                ]"
             >
+                <!-- <a-form-item-rest>
+                    <PermissChoose
+                        :first-width="8"
+                        max-height="350px"
+                        v-model:value="form.data.permissions"
+                        :disabled="form.mode === '查看'"
+                    />
+                </a-form-item-rest> -->
                 <PermissChoose
-                    :first-width="8"
-                    max-height="350px"
-                    v-model:value="form.data.permissions"
-                    :disabled="form.mode === '查看'"
-                />
+                        :first-width="8"
+                        max-height="350px"
+                        v-model:value="form.data.permissions"
+                        :disabled="form.mode === '查看'"
+                    />
             </a-form-item>
             <a-form-item label="说明" name="describe">
                 <a-textarea
@@ -56,20 +75,56 @@
 </template>
 
 <script setup lang="ts">
+import { FormInstance, message } from 'ant-design-vue';
 import { Rule } from 'ant-design-vue/es/form';
 import PermissChoose from '../components/PermissChoose.vue';
+import { saveMenuInfo_api } from '@/api/system/menu';
 
+const props = defineProps<{
+    menuInfo: {
+        buttons: formType[];
+        id: string;
+    };
+}>();
 const emits = defineEmits(['confirm']);
 const dialog = reactive({
     visible: false,
+    loading: false,
     handleOk: () => {
-        dialog.changeVisible();
+        props.menuInfo.id && formRef.value &&
+            formRef.value
+                .validate()
+                .then(() => {
+                    const buttons = toRaw(props.menuInfo.buttons);
+                    const button = buttons.find(
+                        (item) => item.id === form.data.id,
+                    );
+                    if (button) {
+                        Object.entries(form.data).forEach(([key, value]) => {
+                            button[key] = value;
+                        });
+                    } else buttons.push({ ...form.data });
+                    const params = {
+                        ...props.menuInfo,
+                        buttons,
+                    };
+                    dialog.loading = true;
+                    saveMenuInfo_api(params)
+                        .then((resp) => {
+                            dialog.changeVisible();
+                            message.success('操作成功')
+                            emits('confirm');
+                        })
+                        .finally(() => (dialog.loading = false));
+                })
+                .catch(() => {});
     },
     changeVisible: (mode?: string, formValue?: formType) => {
         dialog.visible = !dialog.visible;
-        form.data = formValue || { ...initForm };
+        form.data = { ...initForm, ...formValue };
         form.mode = mode || '';
-        console.log(1111111111, form.data);
+
+        formRef.value && formRef.value.clearValidate();
     },
 });
 const initForm = {
@@ -78,13 +133,14 @@ const initForm = {
     permissions: [],
     describe: '',
 } as formType;
+const formRef = ref<FormInstance>();
 const form = reactive({
     data: { ...initForm },
     mode: '',
-    checkPermission:async (_rule: Rule, value: string[])=>{
-        if(!value || value.length < 1) return Promise.reject('请选择权限')
-        return Promise.resolve()
-    }
+    checkPermission: async (_rule: Rule, value: string[]) => {
+        if (!value || value.length < 1) return Promise.reject('请选择权限');
+        return Promise.resolve();
+    },
 });
 
 // 将打开弹窗的操作暴露给父组件
diff --git a/src/views/system/Menu/components/PermissChoose.vue b/src/views/system/Menu/components/PermissChoose.vue
index 7cc248c0..f9f00226 100644
--- a/src/views/system/Menu/components/PermissChoose.vue
+++ b/src/views/system/Menu/components/PermissChoose.vue
@@ -46,12 +46,13 @@
 
 <script setup lang="ts">
 import { exportPermission_api } from '@/api/system/permission';
-
+import { Form } from 'ant-design-vue';
+Form.useInjectFormItemContext()
 const props = defineProps<{
     value: any[];
     firstWidth: number;
     maxHeight: string;
-    disabled: boolean;
+    disabled?: boolean;
 }>();
 const emits = defineEmits(['update:value']);
 const searchValue = ref<string>('');
@@ -131,18 +132,14 @@ const permission = reactive({
         emits('update:value', newProp);
     },
     makeList: (checkedValue: any[], sourceList: any[]): permissionType[] => {
-        console.log(checkedValue);
-
         const result = sourceList.map((item) => {
-            const checked = checkedValue.find(
+            const checked = checkedValue?.find(
                 (checkedItem) => checkedItem.permission === item.id,
             );
             const options = item.actions.map((actionItem: any) => ({
                 label: actionItem.name,
                 value: actionItem.action,
             }));
-            console.log(item, checked);
-
             return {
                 id: item.id,
                 name: item.name,
@@ -150,7 +147,7 @@ const permission = reactive({
                 checkAll:
                     (checked &&
                         item.actions &&
-                        checked?.actions.length === item.actions.length) ||
+                        checked.actions.length === item.actions.length) ||
                     false,
                 indeterminate:
                     (checked &&
@@ -183,6 +180,9 @@ type paramsType = {
 
 <style lang="less" scoped>
 .permission-choose-container {
+    .ant-input-affix-wrapper {
+        border-color: #d9d9d9 !important;
+    }
     .permission-table {
         margin-top: 12px;
         font-size: 14px;
diff --git a/src/views/system/Menu/index.vue b/src/views/system/Menu/index.vue
index a8c40c11..4f252116 100644
--- a/src/views/system/Menu/index.vue
+++ b/src/views/system/Menu/index.vue
@@ -8,7 +8,6 @@
             :request="table.getList"
             model="TABLE"
             :params="query.params"
-
         >
             <template #headerTitle>
                 <a-button
@@ -17,7 +16,7 @@
                     style="margin-right: 10px"
                     ><plus-outlined />新增</a-button
                 >
-                <a-button>菜单实例</a-button>
+                <a-button @click="router.push('/system/Menu/Setting')">菜单实例</a-button>
             </template>
             <template #createTime="slotProps">
                 {{ moment(slotProps.createTime).format('YYYY-MM-DD HH:mm:ss') }}
@@ -31,7 +30,7 @@
                             type="link"
                             @click="table.toDetails(slotProps)"
                         >
-                        <search-outlined />
+                            <search-outlined />
                         </a-button>
                     </a-tooltip>
                     <a-tooltip>
@@ -39,9 +38,9 @@
                         <a-button
                             style="padding: 0"
                             type="link"
-                            @click="table.toDetails(slotProps)"
+                            @click="table.addChildren(slotProps)"
                         >
-                        <plus-circle-outlined />
+                            <plus-circle-outlined />
                         </a-button>
                     </a-tooltip>
 
@@ -50,7 +49,6 @@
                         ok-text="确定"
                         cancel-text="取消"
                         @confirm="table.clickDel(slotProps)"
-                        :disabled="slotProps.status"
                     >
                         <a-tooltip>
                             <template #title>删除</template>
@@ -66,13 +64,14 @@
 </template>
 
 <script setup lang="ts">
-import { getMenuTree_api } from '@/api/system/menu';
+import { getMenuTree_api, delMenuInfo_api } from '@/api/system/menu';
 import {
     SearchOutlined,
     DeleteOutlined,
     PlusOutlined,
-    PlusCircleOutlined
+    PlusCircleOutlined,
 } from '@ant-design/icons-vue';
+import { message } from 'ant-design-vue';
 import moment from 'moment';
 
 const router = useRouter();
@@ -217,7 +216,7 @@ const table = reactive({
         const resp: any = await getMenuTree_api(params);
         const lastItem = resp.result[resp.result.length - 1];
         table.total = lastItem ? lastItem.sortIndex + 1 : 1;
-        
+
         return {
             code: resp.message,
             result: {
@@ -229,22 +228,32 @@ const table = reactive({
             status: resp.status,
         };
     },
+    addChildren: (row: any) => {
+        console.log(row);
+        router.push(
+            `/system/Menu/detail/:id?pid=${row.id}&basePath=${
+                row.url || ''
+            }&sortIndex=${row.children.length + 1}`,
+        );
+    },
     // 跳转至详情页
     toDetails: (row: any) => {
         router.push(
             `/system/Menu/detail/${row.id || ':id'}?pid=${
                 row.pid || ''
-            }&basePath=${row.basePath || ''}&sortIndex=${table.total}`,
+            }&basePath=${row.url|| ''}&sortIndex=${table.total}`,
         );
     },
     // 删除
     clickDel: (row: any) => {
-        // delPermission_api(row.id).then((resp: any) => {
-        //     if (resp.status === 200) {
-        //         tableRef.value?.reload();
-        //         message.success('操作成功!');
-        //     }
-        // });
+        console.log(row.id);
+        
+        delMenuInfo_api(row.id).then((resp: any) => {
+            if (resp.status === 200) {
+                tableRef.value?.reload();
+                message.success('操作成功!');
+            }
+        });
     },
     // 刷新列表
     refresh: () => {
@@ -257,5 +266,4 @@ const table = reactive({
 .menu-container {
     padding: 24px;
 }
-
 </style>

From f4679f47276a3e63a0f8a6b816205e26ae3ebc72 Mon Sep 17 00:00:00 2001
From: jackhoo_98 <jackhoo_98@foxmail.com>
Date: Wed, 1 Feb 2023 18:14:02 +0800
Subject: [PATCH 11/13] =?UTF-8?q?feat:=20=E5=8D=8F=E8=AE=AE=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=20=E5=8D=A1=E7=89=87/=E5=88=97=E8=A1=A8=E5=9F=BA?=
 =?UTF-8?q?=E6=9C=AC=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/link/protocol.ts               |  10 +
 src/views/link/Protocol/Save/index.vue |  37 +++
 src/views/link/Protocol/index.vue      | 327 +++++++++++++++++++++++++
 src/views/link/Protocol/typings.d.ts   |   7 +
 4 files changed, 381 insertions(+)
 create mode 100644 src/api/link/protocol.ts
 create mode 100644 src/views/link/Protocol/Save/index.vue
 create mode 100644 src/views/link/Protocol/index.vue
 create mode 100644 src/views/link/Protocol/typings.d.ts

diff --git a/src/api/link/protocol.ts b/src/api/link/protocol.ts
new file mode 100644
index 00000000..e1a88586
--- /dev/null
+++ b/src/api/link/protocol.ts
@@ -0,0 +1,10 @@
+import server from '@/utils/request';
+
+export const detail = (id: string) => server.get(`/gateway/device/${id}`);
+
+export const save = (data: Object) => server.post(`/gateway/device`, data);
+
+export const list = (data: Object) =>
+    server.post(`/protocol/_query`, data);
+
+export const remove = (id: string) => server.remove(`/gateway/device/${id}`);
diff --git a/src/views/link/Protocol/Save/index.vue b/src/views/link/Protocol/Save/index.vue
new file mode 100644
index 00000000..9a60a0be
--- /dev/null
+++ b/src/views/link/Protocol/Save/index.vue
@@ -0,0 +1,37 @@
+<template lang="">
+    <a-modal
+        :title="data.id ? '编辑' : '新增'"
+        ok-text="确认"
+        cancel-text="取消"
+        :visible="true"
+        width="600px"
+        :confirm-loading="loading"
+        @cancel="handleCancel"
+        @ok="handleOk"
+    >
+        123
+    </a-modal>
+</template>
+<script lang="ts" setup>
+const loading = ref(false);
+
+const props = defineProps({
+    data: {
+        type: Object,
+        default: () => {},
+    },
+});
+
+const emit = defineEmits(['change']);
+
+const handleOk = () => {
+    console.log(2);
+    emit('change', true);
+};
+const handleCancel = () => {
+    console.log(1);
+    emit('change', false);
+};
+</script>
+
+<style lang=""></style>
diff --git a/src/views/link/Protocol/index.vue b/src/views/link/Protocol/index.vue
new file mode 100644
index 00000000..8798fe9c
--- /dev/null
+++ b/src/views/link/Protocol/index.vue
@@ -0,0 +1,327 @@
+<template>
+    <page-container>
+        <div>
+            <Search :columns="columns" target="search" @search="handleSearch" />
+
+            <JTable
+                ref="tableRef"
+                :columns="columns"
+                :request="list"
+                :defaultParams="{
+                    sorts: [{ name: 'createTime', order: 'desc' }],
+                }"
+                :params="params"
+            >
+                <template #headerTitle>
+                    <a-button type="primary" @click="handlAdd"
+                        ><plus-outlined />新增</a-button
+                    >
+                </template>
+                <template #card="slotProps">
+                    <CardBox
+                        :showStatus="false"
+                        :value="slotProps"
+                        :actions="getActions(slotProps, 'card')"
+                        v-bind="slotProps"
+                    >
+                        <template #img>
+                            <slot name="img">
+                                <img :src="getImage('/device-access.png')" />
+                            </slot>
+                        </template>
+                        <template #content>
+                            <div class="card-item-content">
+                                <h3 class="card-item-content-title-a">
+                                    {{ slotProps.name }}
+                                </h3>
+                                <a-row class="card-item-content-box">
+                                    <a-col
+                                        :span="12"
+                                        class="card-item-content-text"
+                                    >
+                                        <div class="card-item-content-text">
+                                            ID
+                                        </div>
+                                        <div class="card-item-content-text">
+                                            <a-tooltip>
+                                                <template #title>{{
+                                                    slotProps.id
+                                                }}</template>
+                                                {{ slotProps.id }}
+                                            </a-tooltip>
+                                        </div>
+                                    </a-col>
+                                    <a-col :span="12">
+                                        <div class="card-item-content-text">
+                                            类型
+                                        </div>
+                                        <div class="card-item-content-text">
+                                            <a-tooltip>
+                                                <template #title>{{
+                                                    slotProps.type
+                                                }}</template>
+                                                {{ slotProps.type }}
+                                            </a-tooltip>
+                                        </div>
+                                    </a-col>
+                                </a-row>
+                            </div>
+                        </template>
+                        <template #actions="item">
+                            <a-tooltip
+                                v-bind="item.tooltip"
+                                :title="item.disabled && item.tooltip.title"
+                            >
+                                <a-popconfirm
+                                    v-if="item.popConfirm"
+                                    v-bind="item.popConfirm"
+                                    :disabled="item.disabled"
+                                >
+                                    <a-button :disabled="item.disabled">
+                                        <AIcon
+                                            type="DeleteOutlined"
+                                            v-if="item.key === 'delete'"
+                                        />
+                                        <template v-else>
+                                            <AIcon :type="item.icon" />
+                                            <span>{{ item.text }}</span>
+                                        </template>
+                                    </a-button>
+                                </a-popconfirm>
+                                <template v-else>
+                                    <a-button
+                                        :disabled="item.disabled"
+                                        @click="item.onClick"
+                                    >
+                                        <AIcon
+                                            type="DeleteOutlined"
+                                            v-if="item.key === 'delete'"
+                                        />
+                                        <template v-else>
+                                            <AIcon :type="item.icon" />
+                                            <span>{{ item.text }}</span>
+                                        </template>
+                                    </a-button>
+                                </template>
+                            </a-tooltip>
+                        </template>
+                    </CardBox>
+                </template>
+                <template #action="slotProps">
+                    <a-space :size="16">
+                        <a-tooltip
+                            v-for="i in getActions(slotProps, 'table')"
+                            :key="i.key"
+                            v-bind="i.tooltip"
+                        >
+                            <a-popconfirm
+                                v-if="i.popConfirm"
+                                v-bind="i.popConfirm"
+                                :disabled="i.disabled"
+                            >
+                                <a-button
+                                    :disabled="i.disabled"
+                                    style="padding: 0"
+                                    type="link"
+                                    ><AIcon :type="i.icon"
+                                /></a-button>
+                            </a-popconfirm>
+                            <a-button
+                                style="padding: 0"
+                                type="link"
+                                v-else
+                                @click="i.onClick && i.onClick(slotProps)"
+                            >
+                                <a-button
+                                    :disabled="i.disabled"
+                                    style="padding: 0"
+                                    type="link"
+                                    ><AIcon :type="i.icon"
+                                /></a-button>
+                            </a-button>
+                        </a-tooltip>
+                    </a-space>
+                </template>
+            </JTable>
+        </div>
+        <Save v-if="visible" :data="current" @change="saveChange" />
+    </page-container>
+</template>
+<script lang="ts" setup name="AccessConfigPage">
+import type { ActionsType } from '@/components/Table/index.vue';
+import { getImage } from '@/utils/comm';
+import { list, remove } from '@/api/link/protocol';
+import { message } from 'ant-design-vue';
+import Save from './Save/index.vue';
+
+const tableRef = ref<Record<string, any>>({});
+const router = useRouter();
+const params = ref<Record<string, any>>({});
+
+const visible = ref(false);
+const current = ref({});
+
+const columns = [
+    {
+        title: 'ID',
+        dataIndex: 'id',
+        key: 'id',
+        search: {
+            type: 'string',
+        },
+        width: 200,
+        fixed: 'left',
+        // scopedSlots: true,
+    },
+    {
+        title: '名称',
+        dataIndex: 'name',
+        key: 'name',
+        search: {
+            type: 'string',
+        },
+    },
+    {
+        title: '类型',
+        dataIndex: 'type',
+        key: 'type',
+        search: {
+            type: 'select',
+            options: [
+                {
+                    label: 'jar',
+                    value: 'jar',
+                },
+                {
+                    label: 'local',
+                    value: 'local',
+                },
+            ],
+        },
+        scopedSlots: true,
+    },
+    {
+        title: '说明',
+        dataIndex: 'description',
+        key: 'description',
+        search: {
+            type: 'string',
+        },
+        ellipsis: true,
+    },
+    {
+        title: '操作',
+        key: 'action',
+        fixed: 'right',
+        width: 200,
+        scopedSlots: true,
+    },
+];
+
+const getActions = (
+    data: Partial<Record<string, any>>,
+    type: 'card' | 'table',
+): ActionsType[] => {
+    if (!data) return [];
+    const actions = [
+        {
+            key: 'edit',
+            text: '编辑',
+            tooltip: {
+                title: '编辑',
+            },
+            icon: 'EditOutlined',
+            onClick: () => {
+                handlEdit(data.id);
+            },
+        },
+        {
+            key: 'delete',
+            text: '删除',
+            popConfirm: {
+                title: '确认删除?',
+                onConfirm: async () => {
+                    console.log(11, data.id);
+
+                    // const res = await remove(data.id);
+                    // if (res.success) {
+                    //     message.success('操作成功');
+                    //     tableRef.value.reload();
+                    // } else {
+                    //     message.error('操作失败！');
+                    // }
+                },
+            },
+            icon: 'DeleteOutlined',
+        },
+    ];
+    return actions;
+};
+
+const handlAdd = () => {
+    console.log(11);
+    visible.value = true;
+};
+const handlEdit = (id: string) => {
+    // router.push(`/link/accessConfig/detail/edit/${id}`);
+    // router.push({
+    //     path: `/iot/link/accessConfig/detail/${id}`,
+    //     query: { view: false },
+    // });
+    console.log(id);
+    visible.value = true;
+};
+
+const saveChange = (value: object) => {
+    visible.value = false;
+    current.value = {};
+    if (value) {
+        message.success('操作成功');
+        tableRef.value.reload();
+    }
+};
+
+/**
+ * 搜索
+ * @param params
+ */
+const handleSearch = (e: any) => {
+    params.value = e;
+};
+</script>
+<style lang="less" scoped>
+.tableCardDisabled {
+    width: 100%;
+    background: url('/images/access-config-diaabled.png') no-repeat;
+    background-size: 100% 100%;
+}
+
+.tableCardEnabled {
+    width: 100%;
+    background: url('/images/access-config-enabled.png') no-repeat;
+    background-size: 100% 100%;
+}
+
+.card-item-content {
+    min-height: 100px;
+
+    .card-item-content-title-a {
+        // color: #000 !important;
+        font-weight: 700;
+        font-size: 18px;
+        overflow: hidden; //超出的文本隐藏
+        text-overflow: ellipsis; //溢出用省略号显示
+        white-space: nowrap; //溢出不换行
+    }
+    .card-item-content-box {
+        min-height: 50px;
+    }
+    .card-item-content-text {
+        color: rgba(0, 0, 0, 0.75);
+        font-size: 12px;
+        overflow: hidden; //超出的文本隐藏
+        text-overflow: ellipsis; //溢出用省略号显示
+        white-space: nowrap; //溢出不换行
+    }
+}
+</style>
diff --git a/src/views/link/Protocol/typings.d.ts b/src/views/link/Protocol/typings.d.ts
new file mode 100644
index 00000000..91ac930a
--- /dev/null
+++ b/src/views/link/Protocol/typings.d.ts
@@ -0,0 +1,7 @@
+import type { BaseItem } from '@/utils/typings';
+
+type ProtocolItem = {
+  state: number;
+  type: string;
+  configuration: Record<string, any>;
+} & BaseItem;

From 9304911139d5b712ccb39f84ae10bb842bf46e1b Mon Sep 17 00:00:00 2001
From: blp <2962632571@qq.com>
Date: Wed, 1 Feb 2023 18:15:30 +0800
Subject: [PATCH 12/13] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9page-container?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/iot-card/CardManagement/Detail/index.vue |  6 +++---
 src/views/iot-card/CardManagement/index.vue        | 11 ++++-------
 src/views/iot-card/Dashboard/index.vue             |  6 +++---
 src/views/iot-card/Home/index.vue                  |  4 ++--
 src/views/iot-card/Recharge/index.vue              |  6 +++---
 5 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/src/views/iot-card/CardManagement/Detail/index.vue b/src/views/iot-card/CardManagement/Detail/index.vue
index 3e1a330d..fffa20e5 100644
--- a/src/views/iot-card/CardManagement/Detail/index.vue
+++ b/src/views/iot-card/CardManagement/Detail/index.vue
@@ -1,6 +1,6 @@
 <!-- 物联卡查看 -->
 <template>
-    <div class="page-container">
+    <page-container>
         <!-- 新增、编辑 -->
         <Save
             v-if="visible"
@@ -117,7 +117,7 @@
                 </a-row>
             </a-col>
         </a-row>
-    </div>
+    </page-container>
 </template>
 
 <script setup lang="ts">
@@ -138,7 +138,7 @@ const detail = ref<any>({});
 const flowData = ref<any[]>([]);
 
 const getDetail = () => {
-    queryDetail(route.query.id).then((resp: any) => {
+    queryDetail(route.params.id).then((resp: any) => {
         if (resp.status === 200) {
             detail.value = resp.result;
         }
diff --git a/src/views/iot-card/CardManagement/index.vue b/src/views/iot-card/CardManagement/index.vue
index 1ac18f80..f2eaa60a 100644
--- a/src/views/iot-card/CardManagement/index.vue
+++ b/src/views/iot-card/CardManagement/index.vue
@@ -1,6 +1,6 @@
 <!-- 物联卡管理 -->
 <template>
-    <div class="page-container">
+    <page-container class="container">
         <Search
             :columns="columns"
             target="iot-card-management-search"
@@ -323,7 +323,7 @@
             :data="current"
             @change="saveChange"
         />
-    </div>
+    </page-container>
 </template>
 
 <script setup lang="ts">
@@ -539,10 +539,7 @@ const getActions = (
             icon: 'EyeOutlined',
             onClick: () => {
                 router.push({
-                    path: '/iot-card/CardManagement/Detail',
-                    query: {
-                        id: data.id,
-                    },
+                    path: `/iot-card/CardManagement/detail/${data.id}`,
                 });
             },
         },
@@ -795,7 +792,7 @@ const handelRemove = async () => {
 </script>
 
 <style scoped lang="less">
-.page-container {
+.container {
     .search {
         width: calc(100% - 330px);
     }
diff --git a/src/views/iot-card/Dashboard/index.vue b/src/views/iot-card/Dashboard/index.vue
index 93bc1cfa..0f14238e 100644
--- a/src/views/iot-card/Dashboard/index.vue
+++ b/src/views/iot-card/Dashboard/index.vue
@@ -1,6 +1,6 @@
 <!-- 物联卡-仪表盘 -->
 <template>
-    <div class="page-container">
+    <page-container class="container">
         <a-card>
             <a-row :gutter="20" :style="{ marginBottom: '20px' }">
                 <a-col :span="24"><Guide title="数据统计" /></a-col>
@@ -104,7 +104,7 @@
                 </a-col>
             </a-row>
         </a-card>
-    </div>
+    </page-container>
 </template>
 
 <script setup lang="ts">
@@ -229,7 +229,7 @@ const dTime = [
 getTopRang(dTime[0], dTime[1]);
 </script>
 <style scoped lang="less">
-.page-container {
+.container {
     .data-statistics-item {
         height: 140px;
         background: #fcfcfc;
diff --git a/src/views/iot-card/Home/index.vue b/src/views/iot-card/Home/index.vue
index be552656..ee739310 100644
--- a/src/views/iot-card/Home/index.vue
+++ b/src/views/iot-card/Home/index.vue
@@ -1,6 +1,6 @@
 <!-- 物联卡-首页 -->
 <template>
-  <div class="page-container">
+  <page-container>
     <a-row :gutter="24">
       <a-col :span="14">
         <div class="home-guide">
@@ -79,7 +79,7 @@
         </div>
       </a-col>
     </a-row>
-  </div>
+  </page-container>
 </template>
 
 <script setup lang="ts">
diff --git a/src/views/iot-card/Recharge/index.vue b/src/views/iot-card/Recharge/index.vue
index 33813bcf..8bb0bc21 100644
--- a/src/views/iot-card/Recharge/index.vue
+++ b/src/views/iot-card/Recharge/index.vue
@@ -1,9 +1,9 @@
 <!-- 充值管理 -->
 <template>
-    <div class="page-container">
+    <page-container>
         <Search
             :columns="columns"
-            target="iot-card-management-search"
+            target="recharge-search"
             @search="handleSearch"
         />
         <JTable
@@ -71,7 +71,7 @@
         <!-- 充值 -->
         <Save v-if="visible" @change="saveChange" />
         <Detail v-if="detailVisible" :data="current" @close="close" />
-    </div>
+    </page-container>
 </template>
 
 <script setup lang="ts">

From 22bdc7901393707ef118c56d8c88f468c00be3e9 Mon Sep 17 00:00:00 2001
From: xieyonghong <18010623010@163.com>
Date: Wed, 1 Feb 2023 18:21:00 +0800
Subject: [PATCH 13/13] =?UTF-8?q?update:=201.=E4=BC=98=E5=8C=96=E5=A4=9A?=
 =?UTF-8?q?=E5=B1=82=E7=BA=A7=E8=B7=AF=E7=94=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.ts |  2 +-
 src/store/menu.ts   | 10 +++----
 src/utils/menu.ts   | 66 ++++++++++++++++++++++++++++-----------------
 3 files changed, 47 insertions(+), 31 deletions(-)

diff --git a/src/router/index.ts b/src/router/index.ts
index abe29a44..0742fa05 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -31,7 +31,7 @@ router.beforeEach((to, from, next) => {
         const system = useSystem()
         const menu = useMenuStore()
 
-        if (!menu.menuData.length) {
+        if (!menu.siderMenus.length) {
           userInfo.getUserInfo().then(() => {
             system.getSystemVersion().then((menuData: any[]) => {
               menuData.forEach(r => {
diff --git a/src/store/menu.ts b/src/store/menu.ts
index 7d1a675e..96aa4e12 100644
--- a/src/store/menu.ts
+++ b/src/store/menu.ts
@@ -54,19 +54,17 @@ export const useMenuStore = defineStore({
         ];
         const resp = await queryOwnThree({ paging: false, terms: params })
         if (resp.success) {
-          const silderMenus = filterAsnycRouter(cloneDeep(resp.result))
-          const menus = filterAsnycRouter(cloneDeep(resp.result))
-          menus.push({
+          const { menusData, silderMenus } = filterAsnycRouter(resp.result)
+          menusData.push({
             path: '/',
-            redirect: menus[0]?.path,
+            redirect: menusData[0]?.path,
             meta: {
               hideInMenu: true
             }
           })
-          this.menuData = menus
           this.siderMenus = silderMenus
           console.log('silderMenus', silderMenus)
-          res(menus)
+          res(menusData)
         }
       })
     }
diff --git a/src/utils/menu.ts b/src/utils/menu.ts
index 228ce8be..8b1d7520 100644
--- a/src/utils/menu.ts
+++ b/src/utils/menu.ts
@@ -1,5 +1,6 @@
-const pagesComponent = import.meta.glob('../views/**/*.vue', { eager: true });
+import { cloneDeep } from 'lodash-es'
 import { BlankLayoutPage, BasicLayoutPage } from 'components/Layout'
+const pagesComponent = import.meta.glob('../views/**/*.vue', { eager: true });
 
 /**
  * 权限信息
@@ -155,9 +156,9 @@ const resolveComponent = (name: any) => {
   return !!importPage ? importPage.default : undefined
 }
 
-const findChildrenRoute = (code: string, url: string): MenuItem[] => {
+const findChildrenRoute = (code: string, url: string, routes: any[] = []): MenuItem[] => {
   if (extraRouteObj[code]) {
-    return extraRouteObj[code].children.map((route: MenuItem) => {
+    const extraRoutes = extraRouteObj[code].children.map((route: MenuItem) => {
       return {
         url: `${url}/${route.code}`,
         code: route.code,
@@ -165,8 +166,9 @@ const findChildrenRoute = (code: string, url: string): MenuItem[] => {
         isShow: false
       }
     })
+    return [...routes, ...extraRoutes]
   }
-  return []
+  return routes
 }
 
 const findDetailRouteItem = (code: string, url: string): Partial<MenuItem> | null => {
@@ -194,36 +196,52 @@ const findDetailRoutes = (routes: any[]): any[] => {
   return newRoutes
 }
 
-export function filterAsnycRouter(asyncRouterMap: any, parentCode = '', level = 1) {
-
-  return asyncRouterMap.map((route: any) => {
-
-    route.path = `${route.url}`
-    route.meta = {
-      icon: route.icon,
-      title: route.name,
-      hideInMenu: route.isShow === false
+export function filterAsnycRouter(asyncRouterMap: any, parentCode = '', level = 1): { menusData: any, silderMenus: any } {
+  const _asyncRouterMap = cloneDeep(asyncRouterMap)
+  const menusData: any[] = []
+  const silderMenus: any[] = []
+  _asyncRouterMap.forEach((route: any) => {
+    const _route: any = {
+      path: `${route.url}`,
+      meta: {
+        icon: route.icon,
+        title: route.name,
+        hideInMenu: route.isShow === false,
+        buttons: route.buttons || []
+      }
     }
 
+    const silder = {..._route}
+
     // 查看是否有隐藏子路由
-    const extraChildren = findChildrenRoute(route.code, route.url)
-    route.children = route.children && route.children.length ? [...route.children, ...extraChildren] : extraChildren
+    route.children = findChildrenRoute(route.code, route.url, route.children)
     route.children = findDetailRoutes(route.children)
     if (route.children && route.children.length) {
       // TODO 查看是否具有详情页
-      route.children = filterAsnycRouter(route.children, `${parentCode}/${route.code}`, level + 1)
-      const showChildren = route.children.some((r: any) => !r.meta.hideInMenu)
+      const { menusData: _menusData, silderMenus: _silderMenus } = filterAsnycRouter(route.children, `${parentCode}/${route.code}`, level + 1)
+      _route.children = _menusData
+      silder.children = _silderMenus
+      const showChildren = _route.children.some((r: any) => !r.meta.hideInMenu)
       if (showChildren) {
-        route.component = () => level === 1 ? BasicLayoutPage : BlankLayoutPage
-        route.redirect = route.children[0].url
+        _route.component = () => level === 1 ? BasicLayoutPage : BlankLayoutPage
+        _route.redirect = route.children[0].url
       } else {
-        route.component = resolveComponent(route.code) || BlankLayoutPage;
+        const myComponent = resolveComponent(route.code)
+        _route.component = myComponent ? myComponent : BlankLayoutPage;
+        if (myComponent) {
+          _route.component = myComponent;
+          _route.children.map((r: any) => menusData.push(r))
+          delete _route.children
+        }
       }
     } else {
-      console.log(route.code)
-      route.component = route.component || resolveComponent(route.code) || BlankLayoutPage;
+      _route.component = _route.component || resolveComponent(route.code) || BlankLayoutPage;
     }
-    delete route.name
-    return route
+    menusData.push(_route)
+    silderMenus.push(silder)
   })
+  return {
+    menusData,
+    silderMenus
+  }
 }
\ No newline at end of file