From 5759baeccb9333d6236053b189e692b75ef59104 Mon Sep 17 00:00:00 2001
From: JiangQiming <291854119@qq.com>
Date: Mon, 6 Mar 2023 10:46:30 +0800
Subject: [PATCH 01/16] =?UTF-8?q?fix:=20=E8=A7=A3=E5=86=B3=E5=85=A8?=
 =?UTF-8?q?=E5=B1=8F=E5=A4=B1=E6=95=88=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Player/ScreenPlayer.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/Player/ScreenPlayer.vue b/src/components/Player/ScreenPlayer.vue
index 1e8e38f4..cbff2af4 100644
--- a/src/components/Player/ScreenPlayer.vue
+++ b/src/components/Player/ScreenPlayer.vue
@@ -5,7 +5,7 @@
             <!-- 工具栏 -->
             <div class="player-screen-tool" v-if="showScreen">
                 <a-radio-group
-                    v-model:value="screen"
+                    :value="screen"
                     button-style="solid"
                     @change="handleScreenChange"
                 >
@@ -208,9 +208,7 @@ const formData = ref({
 
 // 全屏元素
 const fullscreenRef = ref(null);
-const { isFullscreen, enter, exit, toggle } = useFullscreen(
-    fullscreenRef.value,
-);
+const { isFullscreen, enter, exit, toggle } = useFullscreen(fullscreenRef);
 
 /**
  * 刷新视频

From 21e45c060d3797cb4f9caf61bfffc179417657ce Mon Sep 17 00:00:00 2001
From: JiangQiming <291854119@qq.com>
Date: Mon, 6 Mar 2023 11:16:57 +0800
Subject: [PATCH 02/16] =?UTF-8?q?update:=20=E8=A7=86=E9=A2=91=E5=8F=96?=
 =?UTF-8?q?=E6=B6=88=E8=87=AA=E5=8A=A8=E6=92=AD=E6=94=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Player/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Player/index.vue b/src/components/Player/index.vue
index ef5d2bcf..b5d20225 100644
--- a/src/components/Player/index.vue
+++ b/src/components/Player/index.vue
@@ -30,7 +30,7 @@ const options = reactive({
     muted: false, //静音
     webFullScreen: false,
     speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
-    autoPlay: true, //自动播放
+    autoPlay: false, //自动播放
     loop: false, //循环播放
     mirror: false, //镜像画面
     ligthOff: false, //关灯模式

From 66234bdfd49037e6861314836c5e88f4a94a0987 Mon Sep 17 00:00:00 2001
From: 100011797 <2642441182@qq.com>
Date: Mon, 6 Mar 2023 11:19:11 +0800
Subject: [PATCH 03/16] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E8=AE=BE?=
 =?UTF-8?q?=E5=A4=87=E6=96=B0=E5=A2=9E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/BadgeStatus/index.vue       |   1 -
 src/components/JUpload/index.vue           |   4 +-
 src/components/index.ts                    |   4 +-
 src/views/device/Instance/Export/index.vue | 104 +++++++++++++--------
 src/views/device/Instance/Import/index.vue |  50 +++++-----
 src/views/device/Instance/Save/index.vue   |  24 ++---
 src/views/device/Instance/index.vue        |   8 +-
 src/views/device/Instance/typings.d.ts     |  13 +++
 src/views/rule-engine/Scene/index.vue      |  32 ++++---
 yarn.lock                                  |   4 +-
 10 files changed, 151 insertions(+), 93 deletions(-)

diff --git a/src/components/BadgeStatus/index.vue b/src/components/BadgeStatus/index.vue
index 6929f8bb..403cbbe6 100644
--- a/src/components/BadgeStatus/index.vue
+++ b/src/components/BadgeStatus/index.vue
@@ -28,5 +28,4 @@ const props = defineProps({
      */
     statusNames: { type: Object },
 });
-
 </script>
diff --git a/src/components/JUpload/index.vue b/src/components/JUpload/index.vue
index 03ee6536..18def1a3 100644
--- a/src/components/JUpload/index.vue
+++ b/src/components/JUpload/index.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="upload-image-warp">
         <div class="upload-image-border">
-            <a-upload
+            <j-upload
                 name="file"
                 list-type="picture-card"
                 class="avatar-uploader"
@@ -45,7 +45,7 @@
                         />
                     </template>
                 </div>
-            </a-upload>
+            </j-upload>
             <div class="upload-loading-mask" v-if="props.disabled"></div>
             <div class="upload-loading-mask" v-if="imageUrl && loading">
                 <AIcon type="LoadingOutlined" style="font-size: 20px" />
diff --git a/src/components/index.ts b/src/components/index.ts
index 3e8f4b57..fdbb2309 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -8,7 +8,7 @@ import CardBox from './CardBox/index.vue';
 // import Search from './Search'
 import NormalUpload from './NormalUpload/index.vue'
 import FileFormat from './FileFormat/index.vue'
-// import JUpload from './JUpload/index.vue'
+import JProUpload from './JUpload/index.vue'
 import { BasicLayoutPage, BlankLayoutPage } from './Layout'
 import { PageContainer } from 'jetlinks-ui-components/es/components'
 import Ellipsis from './Ellipsis/index.vue'
@@ -27,7 +27,7 @@ export default  {
             // .component('Search', Search)
             .component('NormalUpload', NormalUpload)
             .component('FileFormat', FileFormat)
-            // .component('JUpload', JUpload)
+            .component('JProUpload', JProUpload)
             .component('BasicLayoutPage', BasicLayoutPage)
             .component('BlankLayoutPage', BlankLayoutPage)
             .component('PageContainer', PageContainer)
diff --git a/src/views/device/Instance/Export/index.vue b/src/views/device/Instance/Export/index.vue
index 9f49c011..1b422fde 100644
--- a/src/views/device/Instance/Export/index.vue
+++ b/src/views/device/Instance/Export/index.vue
@@ -1,5 +1,12 @@
 <template>
-    <a-modal :maskClosable="false" width="800px" :visible="true" title="导出" @ok="handleOk" @cancel="handleCancel">
+    <j-modal
+        :maskClosable="false"
+        width="800px"
+        :visible="true"
+        title="导出"
+        @ok="handleOk"
+        @cancel="handleCancel"
+    >
         <div style="background-color: rgb(236, 237, 238)">
             <p style="padding: 10px">
                 <AIcon type="ExclamationCircleOutlined" />
@@ -7,63 +14,86 @@
             </p>
         </div>
         <div style="margin-top: 20px">
-            <a-form :layout="'vertical'">
-                <a-form-item label="产品">
-                    <a-select showSearch v-model:value="modelRef.product" placeholder="请选择产品">
-                        <a-select-option :value="item.id" v-for="item in productList" :key="item.id" :title="item.name"></a-select-option>
-                    </a-select>
-                </a-form-item>
-                <a-form-item label="文件格式">
-                    <a-radio-group button-style="solid" v-model:value="modelRef.fileType" placeholder="请选择文件格式">
-                        <a-radio-button value="xlsx">xlsx</a-radio-button>
-                        <a-radio-button value="csv">csv</a-radio-button>
-                    </a-radio-group>
-                </a-form-item>
-            </a-form>
+            <j-form :layout="'vertical'">
+                <j-form-item label="产品">
+                    <j-select
+                        show-search
+                        :filter-option="filterOption"
+                        v-model:value="modelRef.product"
+                        placeholder="请选择产品"
+                        allowClear
+                    >
+                        <j-select-option
+                            :value="item.id"
+                            v-for="item in productList"
+                            :key="item.id"
+                            :label="item.name"
+                            >{{ item.name }}</j-select-option
+                        >
+                    </j-select>
+                </j-form-item>
+                <j-form-item label="文件格式">
+                    <j-radio-group
+                        button-style="solid"
+                        v-model:value="modelRef.fileType"
+                        placeholder="请选择文件格式"
+                    >
+                        <j-radio-button value="xlsx">xlsx</j-radio-button>
+                        <j-radio-button value="csv">csv</j-radio-button>
+                    </j-radio-group>
+                </j-form-item>
+            </j-form>
         </div>
-    </a-modal>
+    </j-modal>
 </template>
 
 <script lang="ts" setup>
-import { queryNoPagingPost } from '@/api/device/product'
-import { downloadFile } from '@/utils/utils'
-import encodeQuery from '@/utils/encodeQuery'
-import { BASE_API_PATH } from '@/utils/variable'
-import { deviceExport } from '@/api/device/instance'
+import { queryNoPagingPost } from '@/api/device/product';
+import { downloadFile } from '@/utils/utils';
+import encodeQuery from '@/utils/encodeQuery';
+import { BASE_API_PATH } from '@/utils/variable';
+import { deviceExport } from '@/api/device/instance';
 
-const emit = defineEmits(['close'])
+const emit = defineEmits(['close']);
 const props = defineProps({
     data: {
         type: Object,
-        default: undefined
-    }
-})
+        default: undefined,
+    },
+});
 const modelRef = reactive({
     product: undefined,
-    fileType: 'xlsx'
+    fileType: 'xlsx',
 });
 
-const productList = ref<Record<string, any>[]>([])
+const filterOption = (input: string, option: any) => {
+    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+};
+
+const productList = ref<Record<string, any>[]>([]);
 
 watch(
     () => props.data,
     () => {
-        queryNoPagingPost({paging: false}).then(resp => {
-            if(resp.status === 200){
-                productList.value = resp.result as Record<string, any>[]
+        queryNoPagingPost({ paging: false }).then((resp) => {
+            if (resp.status === 200) {
+                productList.value = resp.result as Record<string, any>[];
             }
-        })
+        });
     },
-    {immediate: true, deep: true}
-)
+    { immediate: true, deep: true },
+);
 
 const handleOk = () => {
     const params = encodeQuery(props.data);
-    downloadFile(deviceExport(modelRef.product || "", modelRef.fileType),params);
-    emit('close')
-}
+    downloadFile(
+        deviceExport(modelRef.product || '', modelRef.fileType),
+        params,
+    );
+    emit('close');
+};
 
 const handleCancel = () => {
-    emit('close')    
-}
+    emit('close');
+};
 </script>
\ No newline at end of file
diff --git a/src/views/device/Instance/Import/index.vue b/src/views/device/Instance/Import/index.vue
index 899cdb61..335ff68d 100644
--- a/src/views/device/Instance/Import/index.vue
+++ b/src/views/device/Instance/Import/index.vue
@@ -1,36 +1,35 @@
 <template>
-    <a-modal :maskClosable="false" width="800px" :visible="true" title="导入" @ok="handleCancel" @cancel="handleCancel">
+    <j-modal :maskClosable="false" width="800px" :visible="true" title="导入" @ok="handleSave" @cancel="handleCancel">
         <div style="margin-top: 10px">
-            <a-form :layout="'vertical'">
-                <a-row>
-                    <a-col span="24">
-                        <a-form-item label="产品" required>
-                            <a-select showSearch v-model:value="modelRef.product" placeholder="请选择产品">
-                                <a-select-option :value="item.id" v-for="item in productList" :key="item.id" :title="item.name"></a-select-option>
-                            </a-select>
-                        </a-form-item>
-                    </a-col>
-                    <a-col span="24">
-                        <a-form-item label="文件格式" v-if="modelRef.product">
+            <j-form :layout="'vertical'">
+                <j-row>
+                    <j-col span="24">
+                        <j-form-item label="产品" required>
+                            <j-select showSearch v-model:value="modelRef.product" placeholder="请选择产品">
+                                <j-select-option :value="item.id" v-for="item in productList" :key="item.id" :label="item.name">{{ item.name }}</j-select-option>
+                            </j-select>
+                        </j-form-item>
+                    </j-col>
+                    <j-col span="24">
+                        <j-form-item label="文件格式" v-if="modelRef.product">
                             <FileFormat v-model="modelRef.file" />
-                        </a-form-item>
-                    </a-col>
-                    <a-col span="12">
-                        <a-form-item label="文件上传" v-if="modelRef.product">
+                        </j-form-item>
+                    </j-col>
+                    <j-col span="12">
+                        <j-form-item label="文件上传" v-if="modelRef.product">
                             <NormalUpload :product="modelRef.product" v-model="modelRef.upload" :file="modelRef.file" />
-                        </a-form-item>
-                    </a-col>
-                </a-row>
-            </a-form>
+                        </j-form-item>
+                    </j-col>
+                </j-row>
+            </j-form>
         </div>
-    </a-modal>
+    </j-modal>
 </template>
 
 <script lang="ts" setup>
 import { queryNoPagingPost } from '@/api/device/product'
-import { Form } from 'ant-design-vue';
 
-const emit = defineEmits(['close'])
+const emit = defineEmits(['close', 'save'])
 const props = defineProps({
     data: {
         type: Object,
@@ -38,7 +37,6 @@ const props = defineProps({
     }
 })
 const productList = ref<Record<string, any>[]>([])
-const useForm = Form.useForm;
 
 const modelRef = reactive({
     product: undefined,
@@ -64,4 +62,8 @@ watch(
 const handleCancel = () => {
     emit('close')    
 }
+
+const handleSave = () => {
+    emit('close')
+}
 </script>
\ No newline at end of file
diff --git a/src/views/device/Instance/Save/index.vue b/src/views/device/Instance/Save/index.vue
index b49cd0ba..00bf127c 100644
--- a/src/views/device/Instance/Save/index.vue
+++ b/src/views/device/Instance/Save/index.vue
@@ -18,7 +18,7 @@
                 <j-row type="flex">
                     <j-col flex="180px">
                         <j-form-item name="photoUrl">
-                            <JUpload v-model="modelRef.photoUrl" />
+                            <JProUpload v-model="modelRef.photoUrl" />
                         </j-form-item>
                     </j-col>
                     <j-col flex="auto">
@@ -60,15 +60,14 @@
                     <j-select
                         showSearch
                         v-model:value="modelRef.productId"
-                        placeholder="请选择所属产品"
-                        :filter-option="filterOption"
+                        :disabled="!!data?.id"
+                        placeholder="请选择状态为“正常”的产品"
                     >
                         <j-select-option
                             :value="item.id"
                             v-for="item in productList"
                             :key="item.id"
                             :label="item.name"
-                            :disabled="!!data?.id"
                         >{{item.name}}</j-select-option>
                     </j-select>
                 </j-form-item>
@@ -105,16 +104,12 @@ const formRef = ref();
 
 const modelRef = reactive({
     productId: undefined,
-    id: '',
+    id: undefined,
     name: '',
     describe: '',
     photoUrl: getImage('/device/instance/device-card.png'),
 });
 
-const filterOption = (input: string, option: any) => {
-    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
-};
-
 const vailId = async (_: Record<string, any>, value: string) => {
     if (!props?.data?.id && value) {
         const resp = await isExists(value);
@@ -202,10 +197,15 @@ const handleCancel = () => {
 const handleSave = () => {
     formRef.value
         .validate()
-        .then(async () => {
+        .then(async (_data: any) => {
             loading.value = true;
-            const resp = await update(toRaw(modelRef));
-            loading.value = false;
+            const obj = {...toRaw(modelRef), ..._data}
+            if(!obj.id){
+                delete obj.id
+            }
+            const resp = await update(obj).finally(() => {
+                loading.value = false;
+            })
             if (resp.status === 200) {
                 message.success('操作成功！');
                 emit('save');
diff --git a/src/views/device/Instance/index.vue b/src/views/device/Instance/index.vue
index d28d075d..5320be4e 100644
--- a/src/views/device/Instance/index.vue
+++ b/src/views/device/Instance/index.vue
@@ -229,7 +229,7 @@
             </template>
         </JProTable>
     </page-container>
-    <Import v-if="importVisible" @close="importVisible = false" />
+    <Import v-if="importVisible" @close="importVisible = false" @save="onRefresh" />
     <Export
         v-if="exportVisible"
         @close="exportVisible = false"
@@ -259,7 +259,6 @@ import {
     batchDeployDevice,
     batchDeleteDevice,
 } from '@/api/device/instance';
-// import type { ActionsType } from '@/components/Table/index.vue';
 import { getImage, LocalStore } from '@/utils/comm';
 import { message } from 'ant-design-vue';
 import Import from './Import/index.vue';
@@ -275,6 +274,7 @@ import {
 } from '@/api/device/product';
 import { queryTree } from '@/api/device/category';
 import { useMenuStore } from '@/store/menu';
+import { ActionsType } from './typings';
 
 const router = useRouter();
 const instanceRef = ref<Record<string, any>>({});
@@ -696,4 +696,8 @@ const saveBtn = () => {
 const handleSearch = (_params: any) => {
     params.value = _params;
 };
+
+const onRefresh = () => {
+    instanceRef.value?.reload();
+}
 </script>
diff --git a/src/views/device/Instance/typings.d.ts b/src/views/device/Instance/typings.d.ts
index e00c9319..035c56f0 100644
--- a/src/views/device/Instance/typings.d.ts
+++ b/src/views/device/Instance/typings.d.ts
@@ -83,4 +83,17 @@ type InstanceModel = {
   params: Set<string>; // 处理无限循环Card
   active?: string; // 当前编辑的Card
   selectedRows: Map<string, any>;
+}
+
+export interface ActionsType {
+  key: string;
+  text?: string;
+  disabled?: boolean;
+  permission?: boolean;
+  onClick?: (data: any) => void;
+  style?: CSSProperties;
+  tooltip?: TooltipProps;
+  popConfirm?: PopconfirmProps;
+  icon?: string;
+  children?: ActionsType[];
 }
\ No newline at end of file
diff --git a/src/views/rule-engine/Scene/index.vue b/src/views/rule-engine/Scene/index.vue
index 9d49e85d..1ec7c88f 100644
--- a/src/views/rule-engine/Scene/index.vue
+++ b/src/views/rule-engine/Scene/index.vue
@@ -1,6 +1,6 @@
 <template>
     <page-container>
-        <Search :columns="columns" target="scene" @search="handleSearch" />
+        <j-advanced-search :columns="columns" target="scene" @search="handleSearch" />
         <JProTable
             ref="sceneRef"
             :columns="columns"
@@ -23,7 +23,6 @@
             <template #card="slotProps">
                 <SceneCard
                     :value="slotProps"
-                    @click="handleClick"
                     :actions="getActions(slotProps, 'card')"
                     :status="slotProps.state?.value"
                     :statusText="slotProps.state?.text"
@@ -50,7 +49,7 @@
                         <Ellipsis style="width: calc(100% - 100px)">
                             <span
                                 style="font-size: 16px; font-weight: 600"
-                                @click.stop="handleView(slotProps.id)"
+                                @click.stop="handleView(slotProps.id, slotProps.triggerType)"
                             >
                                 {{ slotProps.name }}
                             </span>
@@ -126,7 +125,7 @@
 import SaveModal from './Save/save.vue';
 import type { SceneItem } from './typings';
 import { useMenuStore } from 'store/menu';
-import { query, _delete, _action } from '@/api/rule-engine/scene';
+import { query, _delete, _action, _execute } from '@/api/rule-engine/scene';
 import { message } from 'ant-design-vue';
 import type { ActionsType } from '@/components/Table';
 import { getImage } from '@/utils/comm';
@@ -180,10 +179,12 @@ const columns = [
         scopedSlots: true,
         search: {
             type: 'select',
-            options: Array.from(typeMap).map((item) => ({
-                label: item[1],
-                value: item[0],
-            })),
+            options: Array.from(typeMap).map((item) => {
+                return {
+                    label: item[1]?.text,
+                    value: item[0],
+                }
+            }),
         },
     },
     {
@@ -305,9 +306,18 @@ const getActions = (
                         : '未启用，不能手动触发',
             },
             icon: 'LikeOutlined',
-            onClick: () => {
-                // handleView(data.id, data.triggerType);
-            },
+            popConfirm: {
+                title: '',
+                onConfirm: async () => {
+                    const resp = await _execute(data.id)
+                    if (resp.status === 200) {
+                        message.success('操作成功！');
+                        sceneRef.value?.reload();
+                    } else {
+                        message.error('操作失败！');
+                    }
+                }
+            }
         };
         actions.splice(1, 0, _item);
     }
diff --git a/yarn.lock b/yarn.lock
index 04660101..1bda2b9a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3903,8 +3903,8 @@ jetlinks-store@^0.0.3:
 
 jetlinks-ui-components@^1.0.4:
   version "1.0.4"
-  resolved "https://registry.jetlinks.cn/jetlinks-ui-components/-/jetlinks-ui-components-1.0.4.tgz#38f2abbb6c686ce1e1d7c08a318a6c2f50267adc"
-  integrity sha512-bpmSoKVpdgZ2FUxIBaqBpewt2T9g1tTf4tECam9uTdww6SDxyvLzWmeKIUfVIwp2Ts7uKpHPFsCtI8fPmZuRjw==
+  resolved "https://registry.jetlinks.cn/jetlinks-ui-components/-/jetlinks-ui-components-1.0.4.tgz#31f6879f83d394ba45bfd6e94ce0b20de817d490"
+  integrity sha512-5X26+GsqsduCUSmlaYOAw/MDwKRsZFnifzzRqHcm5qbCi0KrrkID9aKatsMRaeTVEEca1/nzPaPGgXAo6bEpfQ==
   dependencies:
     "@vueuse/core" "^9.12.0"
     ant-design-vue "^3.2.15"

From 7ed42f8acc8df44b47a2cf5e1ff0c5fdf4d19afe Mon Sep 17 00:00:00 2001
From: JiangQiming <291854119@qq.com>
Date: Mon, 6 Mar 2023 11:29:56 +0800
Subject: [PATCH 04/16] =?UTF-8?q?update:=20=E6=90=9C=E7=B4=A2=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=9B=B4=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/media/Cascade/Channel/BindChannel/index.vue | 2 +-
 src/views/media/Cascade/Channel/index.vue             | 2 +-
 src/views/media/Cascade/index.vue                     | 2 +-
 src/views/media/Device/Channel/index.vue              | 2 +-
 src/views/media/Device/index.vue                      | 2 +-
 src/views/notice/Config/Log/index.vue                 | 2 +-
 src/views/notice/Config/index.vue                     | 2 +-
 src/views/notice/Template/Log/index.vue               | 2 +-
 src/views/notice/Template/index.vue                   | 2 +-
 9 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/views/media/Cascade/Channel/BindChannel/index.vue b/src/views/media/Cascade/Channel/BindChannel/index.vue
index 137a0b19..18145a37 100644
--- a/src/views/media/Cascade/Channel/BindChannel/index.vue
+++ b/src/views/media/Cascade/Channel/BindChannel/index.vue
@@ -10,7 +10,7 @@
         @cancel="_vis = false"
         :confirmLoading="loading"
     >
-        <Search
+        <j-advanced-search
             type="simple"
             :columns="columns"
             target="media"
diff --git a/src/views/media/Cascade/Channel/index.vue b/src/views/media/Cascade/Channel/index.vue
index 679c15ca..4fe73718 100644
--- a/src/views/media/Cascade/Channel/index.vue
+++ b/src/views/media/Cascade/Channel/index.vue
@@ -1,7 +1,7 @@
 <!-- 国标级联-通道列表 -->
 <template>
     <page-container>
-        <Search
+        <j-advanced-search
             type="simple"
             :columns="columns"
             target="media"
diff --git a/src/views/media/Cascade/index.vue b/src/views/media/Cascade/index.vue
index 49d2b4d0..71b281c7 100644
--- a/src/views/media/Cascade/index.vue
+++ b/src/views/media/Cascade/index.vue
@@ -1,6 +1,6 @@
 <template>
     <page-container>
-        <Search
+        <j-advanced-search
             :columns="columns"
             target="media-cascade"
             @search="handleSearch"
diff --git a/src/views/media/Device/Channel/index.vue b/src/views/media/Device/Channel/index.vue
index 35e35c4c..a7a2068f 100644
--- a/src/views/media/Device/Channel/index.vue
+++ b/src/views/media/Device/Channel/index.vue
@@ -1,7 +1,7 @@
 <!-- 视频设备-通道列表 -->
 <template>
     <page-container>
-        <Search
+        <j-advanced-search
             type="simple"
             :columns="columns"
             target="product"
diff --git a/src/views/media/Device/index.vue b/src/views/media/Device/index.vue
index d9e07707..f3a592c2 100644
--- a/src/views/media/Device/index.vue
+++ b/src/views/media/Device/index.vue
@@ -1,6 +1,6 @@
 <template>
     <page-container>
-        <Search
+        <j-advanced-search
             :columns="columns"
             target="notice-config"
             @search="handleSearch"
diff --git a/src/views/notice/Config/Log/index.vue b/src/views/notice/Config/Log/index.vue
index 99c93aa6..8865041d 100644
--- a/src/views/notice/Config/Log/index.vue
+++ b/src/views/notice/Config/Log/index.vue
@@ -1,6 +1,6 @@
 <template>
     <a-modal v-model:visible="_vis" title="通知记录" :footer="null" width="70%">
-        <Search
+        <j-search
             type="simple"
             :columns="columns"
             target="product"
diff --git a/src/views/notice/Config/index.vue b/src/views/notice/Config/index.vue
index a56c20d1..25280a0d 100644
--- a/src/views/notice/Config/index.vue
+++ b/src/views/notice/Config/index.vue
@@ -1,6 +1,6 @@
 <template>
     <page-container>
-        <Search
+        <j-advanced-search
             :columns="columns"
             target="notice-config"
             @search="handleSearch"
diff --git a/src/views/notice/Template/Log/index.vue b/src/views/notice/Template/Log/index.vue
index 583f445a..ee4c4576 100644
--- a/src/views/notice/Template/Log/index.vue
+++ b/src/views/notice/Template/Log/index.vue
@@ -1,6 +1,6 @@
 <template>
     <a-modal v-model:visible="_vis" title="通知记录" :footer="null" width="70%">
-        <Search
+        <j-search
             type="simple"
             :columns="columns"
             target="product"
diff --git a/src/views/notice/Template/index.vue b/src/views/notice/Template/index.vue
index ef4f9831..6d684d03 100644
--- a/src/views/notice/Template/index.vue
+++ b/src/views/notice/Template/index.vue
@@ -1,6 +1,6 @@
 <template>
     <page-container>
-        <Search
+        <j-advanced-search
             :columns="columns"
             target="notice-config"
             @search="handleSearch"

From 24b2afd45c5f5ef0068da82d903d8a6e0fdb744a Mon Sep 17 00:00:00 2001
From: easy <1358086367@qq.com>
Date: Mon, 6 Mar 2023 11:43:45 +0800
Subject: [PATCH 05/16] =?UTF-8?q?update:=20=E7=BB=84=E7=BB=87=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86-=E4=BA=A7=E5=93=81=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/Department/product/index.vue | 234 ++++++++++++++----
 yarn.lock                                     |   4 +-
 2 files changed, 186 insertions(+), 52 deletions(-)

diff --git a/src/views/system/Department/product/index.vue b/src/views/system/Department/product/index.vue
index aea5a9eb..c7ba80d5 100644
--- a/src/views/system/Department/product/index.vue
+++ b/src/views/system/Department/product/index.vue
@@ -1,15 +1,15 @@
 <template>
     <div class="product-container">
-        <Search :columns="query.columns" @search="query.search" />
+        <j-advanced-search :columns="columns" @search="query.search" />
         <j-pro-table
             ref="tableRef"
             :request="table.requestFun"
             :gridColumn="2"
-            model="CARD"
             :params="query.params.value"
             :rowSelection="{
                 selectedRowKeys: table._selectedRowKeys.value,
             }"
+            :columns="columns"
             @cancelSelect="table.cancelSelect"
         >
             <template #headerTitle>
@@ -56,7 +56,7 @@
             <template #card="slotProps">
                 <CardBox
                     :value="slotProps"
-                    :actions="[{ key: 1 }]"
+                    :actions="table.getActions(slotProps, 'card')"
                     v-bind="slotProps"
                     :active="
                         table._selectedRowKeys.value.includes(slotProps.id)
@@ -110,8 +110,52 @@
                             </j-col>
                         </j-row>
                     </template>
-                    <template #actions>
-                        <PermissionButton
+                    <template #actions="item">
+                        <a-tooltip
+                            v-bind="item.tooltip"
+                            :title="item.disabled && item.tooltip.title"
+                        >
+                            <a-dropdown
+                                placement="bottomRight"
+                                v-if="item.key === 'others'"
+                            >
+                                <a-button>
+                                    <AIcon :type="item.icon" />
+                                    <span>{{ item.text }}</span>
+                                </a-button>
+                                <template #overlay>
+                                    <a-menu>
+                                        <a-menu-item
+                                            v-for="(o, i) in item.children"
+                                            :key="i"
+                                        >
+                                            <a-button
+                                                type="link"
+                                                @click="o.onClick"
+                                            >
+                                                <AIcon :type="o.icon" />
+                                                <span>{{ o.text }}</span>
+                                            </a-button>
+                                        </a-menu-item>
+                                    </a-menu>
+                                </template>
+                            </a-dropdown>
+                            <PermissionButton
+                                v-else
+                                :uhasPermission="item.permission"
+                                :tooltip="item.tooltip"
+                                :pop-confirm="item.popConfirm"
+                                @click="item.onClick"
+                                :disabled="item.disabled"
+                            >
+                                <AIcon :type="item.icon" />
+                                <span v-if="item.key !== 'delete'">{{
+                                    item.text
+                                }}</span>
+                            </PermissionButton>
+                        </a-tooltip>
+
+                        <!-- <PermissionButton
                             :uhasPermission="`${permission}:assert`"
                             @click="() => table.clickEdit(slotProps)"
                         >
@@ -126,17 +170,50 @@
                             }"
                         >
                             <AIcon type="DisconnectOutlined" />
-                        </PermissionButton>
+                        </PermissionButton> -->
                     </template>
                 </CardBox>
             </template>
+
+            <template #permission="slotProps">
+                {{
+                    table.permissionList.value.length &&
+                    table.getPermissLabel(slotProps.permission)
+                }}
+            </template>
+            <template #state="slotProps">
+                <BadgeStatus
+                    :status="slotProps.state.value"
+                    :text="slotProps.state.text"
+                    :statusNames="{
+                        online: 'success',
+                        offline: 'error',
+                        notActive: 'warning',
+                    }"
+                ></BadgeStatus>
+            </template>
+            <template #action="slotProps">
+                <a-space :size="16">
+                    <PermissionButton
+                        v-for="i in table.getActions(slotProps, 'table')"
+                        :uhasPermission="i.permission"
+                        type="link"
+                        :tooltip="i?.tooltip"
+                        :pop-confirm="i.popConfirm"
+                        @click="i.onClick"
+                        :disabled="i?.disabled"
+                    >
+                        <AIcon :type="i.icon" />
+                    </PermissionButton>
+                </a-space>
+            </template>
         </j-pro-table>
 
         <div class="dialogs">
             <AddDeviceOrProductDialog
                 v-if="dialogs.addShow"
                 v-model:visible="dialogs.addShow"
-                :query-columns="query.columns"
+                :query-columns="columns"
                 :parent-id="props.parentId"
                 :all-permission="table.permissionList.value"
                 asset-type="product"
@@ -185,49 +262,70 @@ const emits = defineEmits(['openDeviceBind']);
 const props = defineProps<{
     parentId: string;
 }>();
+
+const columns = [
+    {
+        title: 'ID',
+        dataIndex: 'id',
+        key: 'id',
+        ellipsis: true,
+        fixed: 'left',
+        search: {
+            type: 'string',
+        },
+    },
+    {
+        title: '名称',
+        dataIndex: 'name',
+        key: 'name',
+        ellipsis: true,
+        search: {
+            type: 'string',
+        },
+    },
+    {
+        title: '资产权限',
+        dataIndex: 'permission',
+        key: 'permission',
+        ellipsis: true,
+        scopedSlots: true,
+    },
+    {
+        title: '说明',
+        dataIndex: 'describe',
+        key: 'describe',
+        ellipsis: true,
+    },
+    {
+        title: '状态',
+        dataIndex: 'state',
+        key: 'state',
+        ellipsis: true,
+        search: {
+            type: 'select',
+            options: [
+                {
+                    label: '正常',
+                    value: 1,
+                },
+                {
+                    label: '禁用',
+                    value: 0,
+                },
+            ],
+        },
+        scopedSlots: true,
+    },
+
+    {
+        title: '操作',
+        dataIndex: 'action',
+        key: 'action',
+        fixed: 'right',
+        scopedSlots: true,
+    },
+];
 const query = {
-    columns: [
-        {
-            title: 'ID',
-            dataIndex: 'id',
-            key: 'id',
-            ellipsis: true,
-            fixed: 'left',
-            search: {
-                type: 'string',
-            },
-        },
-        {
-            title: '名称',
-            dataIndex: 'name',
-            key: 'name',
-            ellipsis: true,
-            fixed: 'left',
-            search: {
-                type: 'string',
-            },
-        },
-        {
-            title: '状态',
-            dataIndex: 'state',
-            key: 'state',
-            ellipsis: true,
-            fixed: 'left',
-            search: {
-                type: 'select',
-                options: [
-                    {
-                        label: '正常',
-                        value: 1,
-                    },
-                    {
-                        label: '禁用',
-                        value: 0,
-                    },
-                ],
-            },
-        },
-    ],
     params: ref({}),
     search: (params: any) => {
         query.params.value = params;
@@ -250,6 +348,33 @@ const table = {
         );
     },
 
+    getActions: (
+        data: Partial<Record<string, any>>,
+        type: 'card' | 'table',
+    ) => {
+        if (!data) return [];
+        else
+            return [
+                {
+                    permission: true,
+                    key: 'edit',
+                    tooltip: { title: '编辑' },
+                    icon: 'EditOutlined',
+                    onClick: () => table.clickEdit(data),
+                },
+                {
+                    permission: true,
+                    key: 'unbind',
+                    tooltip: { title: '解除绑定' },
+                    popConfirm: {
+                        title: `是否解除绑定`,
+                        onConfirm: () => table.clickUnBind(data),
+                    },
+                    icon: 'DisconnectOutlined',
+                },
+            ];
+    },
+
     // 获取权限数据字典
     getPermissionDict: () => {
         getPermissionDict_api().then((resp: any) => {
@@ -261,7 +386,7 @@ const table = {
         const permissionList = table.permissionList.value;
         if (permissionList.length < 1 || values.length < 1) return '';
         const result = values.map(
-            (key) => permissionList.find((item:any) => item.id === key)?.name,
+            (key) => permissionList.find((item: any) => item.id === key)?.name,
         );
         return result.join(',');
     },
@@ -442,6 +567,15 @@ const dialogs = reactive({
 
 <style lang="less" scoped>
 .product-container {
+    :deep(.ant-table-tbody) {
+        .ant-table-cell {
+            .ant-space-item {
+                .ant-btn-link {
+                    padding: 0;
+                }
+            }
+        }
+    }
     .card {
         .card-warp {
             &.active {
diff --git a/yarn.lock b/yarn.lock
index 04660101..fe22eca3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3903,8 +3903,8 @@ jetlinks-store@^0.0.3:
 
 jetlinks-ui-components@^1.0.4:
   version "1.0.4"
-  resolved "https://registry.jetlinks.cn/jetlinks-ui-components/-/jetlinks-ui-components-1.0.4.tgz#38f2abbb6c686ce1e1d7c08a318a6c2f50267adc"
-  integrity sha512-bpmSoKVpdgZ2FUxIBaqBpewt2T9g1tTf4tECam9uTdww6SDxyvLzWmeKIUfVIwp2Ts7uKpHPFsCtI8fPmZuRjw==
+  resolved "https://registry.jetlinks.cn/jetlinks-ui-components/-/jetlinks-ui-components-1.0.4.tgz#b19f0ea6d9170ded2f8f0f09daf9ac7309039885"
+  integrity sha512-SGDNn8w11ygP20SksxCdYLJwzx8zAen6FKqVUc07ffhbd2oIHdqtKA5gWaAY9lRtentDUBMAFca1kkkgifXPZw==
   dependencies:
     "@vueuse/core" "^9.12.0"
     ant-design-vue "^3.2.15"

From 1abe6450d36c8d757447afc241aaca9ccfd0b278 Mon Sep 17 00:00:00 2001
From: easy <1358086367@qq.com>
Date: Mon, 6 Mar 2023 14:02:19 +0800
Subject: [PATCH 06/16] =?UTF-8?q?update:=20=E7=BB=84=E7=BB=87=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/Department/device/index.vue  | 246 +++++++++++-------
 src/views/system/Department/product/index.vue |  14 +-
 2 files changed, 162 insertions(+), 98 deletions(-)

diff --git a/src/views/system/Department/device/index.vue b/src/views/system/Department/device/index.vue
index 6927ba59..5b90ce26 100644
--- a/src/views/system/Department/device/index.vue
+++ b/src/views/system/Department/device/index.vue
@@ -1,16 +1,19 @@
 <template>
     <div class="product-container">
-        <Search :columns="query.columns" @search="query.search" />
+        <j-advanced-search
+            :columns="columns"
+            @search="(params:any) => (queryParams = params)"
+        />
         <j-pro-table
             ref="tableRef"
             :request="table.requestFun"
             :gridColumn="2"
-            model="CARD"
-            :params="query.params.value"
+            :params="queryParams"
             :rowSelection="{
                 selectedRowKeys: table._selectedRowKeys.value,
             }"
             @cancelSelect="table.cancelSelect"
+            :columns="columns"
         >
             <template #headerTitle>
                 <j-space>
@@ -130,13 +133,46 @@
                     </template>
                 </CardBox>
             </template>
+
+            <template #permission="slotProps">
+                {{
+                    table.permissionList.value.length &&
+                    table.getPermissLabel(slotProps.permission)
+                }}
+            </template>
+            <template #state="slotProps">
+                <BadgeStatus
+                    :status="slotProps.state.value"
+                    :text="slotProps.state.text"
+                    :statusNames="{
+                        online: 'success',
+                        offline: 'error',
+                        notActive: 'warning',
+                    }"
+                ></BadgeStatus>
+            </template>
+            <template #action="slotProps">
+                <a-space :size="16">
+                    <PermissionButton
+                        v-for="i in table.getActions(slotProps, 'table')"
+                        :uhasPermission="i.permission"
+                        type="link"
+                        :tooltip="i?.tooltip"
+                        :pop-confirm="i.popConfirm"
+                        @click="i.onClick"
+                        :disabled="i?.disabled"
+                    >
+                        <AIcon :type="i.icon" />
+                    </PermissionButton>
+                </a-space>
+            </template>
         </j-pro-table>
 
         <div class="dialogs">
             <AddDeviceOrProductDialog
                 v-if="dialogs.addShow"
                 v-model:visible="dialogs.addShow"
-                :query-columns="query.columns"
+                :query-columns="columns"
                 :parent-id="props.parentId"
                 :all-permission="table.permissionList.value"
                 asset-type="device"
@@ -171,7 +207,7 @@ import {
 } from '@/api/system/department';
 import { intersection } from 'lodash-es';
 
-import type { dictType } from '../typing';
+import type { dictType, optionsType } from '../typing';
 import { message } from 'ant-design-vue';
 
 const permission = 'system/Department';
@@ -181,93 +217,97 @@ const props = defineProps<{
     parentId: string;
     bindBool: boolean;
 }>();
-const query = {
-    columns: [
-        {
-            title: 'ID',
-            dataIndex: 'id',
-            key: 'id',
-            ellipsis: true,
-            fixed: 'left',
-            search: {
-                type: 'string',
-            },
+const columns = [
+    {
+        title: 'ID',
+        dataIndex: 'id',
+        key: 'id',
+        ellipsis: true,
+        fixed: 'left',
+        search: {
+            type: 'string',
         },
-        {
-            title: '名称',
-            dataIndex: 'name',
-            key: 'name',
-            ellipsis: true,
-            fixed: 'left',
-            search: {
-                type: 'string',
-            },
-        },
-        {
-            title: '所属产品',
-            dataIndex: 'productId$product-info',
-            key: 'productId$product-info',
-            ellipsis: true,
-            fixed: 'left',
-            search: {
-                type: 'select',
-                options: () =>
-                    new Promise((resolve) => {
-                        const params = {
-                            paging: false,
-                            'sorts[0].name': 'createTime',
-                            'sorts[0].order': 'desc',
-                        };
-                        getDeviceProduct_api(params).then((resp: any) => {
-                            const result = resp.result.map((item: any) => ({
-                                label: item.name,
-                                value: item.id,
-                            }));
-                            resolve(result);
-                        });
-                    }),
-            },
-        },
-        {
-            title: '注册时间',
-            dataIndex: 'registryTime',
-            key: 'registryTime',
-            ellipsis: true,
-            fixed: 'left',
-            search: {
-                type: 'date',
-            },
-        },
-        {
-            title: '状态',
-            dataIndex: 'state',
-            key: 'state',
-            ellipsis: true,
-            fixed: 'left',
-            search: {
-                type: 'select',
-                options: [
-                    {
-                        label: '在线',
-                        value: 'online',
-                    },
-                    {
-                        label: '离线',
-                        value: 'offline',
-                    },
-                    {
-                        label: '禁用',
-                        value: 'notActive',
-                    },
-                ],
-            },
-        },
-    ],
-    params: ref({}),
-    search: (params: any) => {
-        query.params.value = params;
     },
-};
+    {
+        title: '名称',
+        dataIndex: 'name',
+        key: 'name',
+        ellipsis: true,
+        search: {
+            type: 'string',
+        },
+    },
+    {
+        title: '所属产品',
+        dataIndex: 'productName',
+        key: 'productName',
+        ellipsis: true,
+        search: {
+            rename: 'productId$product-info',
+            type: 'select',
+            options: () =>
+                new Promise((resolve) => {
+                    const params = {
+                        paging: false,
+                        'sorts[0].name': 'createTime',
+                        'sorts[0].order': 'desc',
+                    };
+                    getDeviceProduct_api(params).then((resp: any) => {
+                        const result = resp.result.map((item: any) => ({
+                            label: item.name,
+                            value: item.id,
+                        }));
+                        resolve(result);
+                    });
+                }),
+        },
+    },
+    {
+        title: '资产权限',
+        dataIndex: 'permission',
+        key: 'permission',
+        ellipsis: true,
+        scopedSlots: true,
+    },
+    {
+        title: '注册时间',
+        dataIndex: 'registryTime',
+        key: 'registryTime',
+        ellipsis: true,
+        search: {
+            type: 'date',
+        },
+    },
+    {
+        title: '状态',
+        dataIndex: 'state',
+        key: 'state',
+        ellipsis: true,
+        search: {
+            type: 'select',
+            options: [
+                {
+                    label: '正常',
+                    value: 1,
+                },
+                {
+                    label: '禁用',
+                    value: 0,
+                },
+            ],
+        },
+        scopedSlots: true,
+    },
+
+    {
+        title: '操作',
+        dataIndex: 'action',
+        key: 'action',
+        fixed: 'right',
+        scopedSlots: true,
+    },
+];
+const queryParams = ref({});
 
 const tableRef = ref();
 const table = {
@@ -285,6 +325,32 @@ const table = {
         );
     },
 
+    getActions: (
+        data: Partial<Record<string, any>>,
+        type: 'card' | 'table',
+    ) => {
+        if (!data) return [];
+        else
+            return [
+                {
+                    permission: true,
+                    key: 'edit',
+                    tooltip: { title: '编辑' },
+                    icon: 'EditOutlined',
+                    onClick: () => table.clickEdit(data),
+                },
+                {
+                    permission: true,
+                    key: 'unbind',
+                    tooltip: { title: '解除绑定' },
+                    popConfirm: {
+                        title: `是否解除绑定`,
+                        onConfirm: () => table.clickUnBind(data),
+                    },
+                    icon: 'DisconnectOutlined',
+                },
+            ];
+    },
     // 获取权限数据字典
     getPermissionDict: () => {
         getPermissionDict_api().then((resp: any) => {
diff --git a/src/views/system/Department/product/index.vue b/src/views/system/Department/product/index.vue
index c7ba80d5..a2916425 100644
--- a/src/views/system/Department/product/index.vue
+++ b/src/views/system/Department/product/index.vue
@@ -1,11 +1,14 @@
 <template>
     <div class="product-container">
-        <j-advanced-search :columns="columns" @search="query.search" />
+        <j-advanced-search
+            :columns="columns"
+            @search="(params:any)=>queryParams = {...params}"
+        />
         <j-pro-table
             ref="tableRef"
             :request="table.requestFun"
             :gridColumn="2"
-            :params="query.params.value"
+            :params="queryParams"
             :rowSelection="{
                 selectedRowKeys: table._selectedRowKeys.value,
             }"
@@ -325,12 +328,7 @@ const columns = [
         scopedSlots: true,
     },
 ];
-const query = {
-    params: ref({}),
-    search: (params: any) => {
-        query.params.value = params;
-    },
-};
+const queryParams = ref({});
 
 const tableRef = ref();
 const table = {

From 787c85b399bb1a0e2a68a2b0f49045c84773ce19 Mon Sep 17 00:00:00 2001
From: easy <1358086367@qq.com>
Date: Mon, 6 Mar 2023 14:05:58 +0800
Subject: [PATCH 07/16] =?UTF-8?q?update:=20=E8=A7=92=E8=89=B2=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86-=E6=90=9C=E7=B4=A2=E7=BB=84=E4=BB=B6=E6=9B=B4?=
 =?UTF-8?q?=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/User/index.vue | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/views/system/User/index.vue b/src/views/system/User/index.vue
index 64a6c72d..d9170f59 100644
--- a/src/views/system/User/index.vue
+++ b/src/views/system/User/index.vue
@@ -1,14 +1,14 @@
 <template>
     <page-container>
         <div class="user-container">
-            <Search :columns="columns" @search="query.search" />
+            <j-advanced-search :columns="columns" @search="(params:any)=>queryParams = {...params}" />
 
             <j-pro-table
                 ref="tableRef"
                 :columns="columns"
                 :request="getUserList_api"
                 model="TABLE"
-                :params="query.params.value"
+                :params="queryParams"
                 :defaultParams="{
                     sorts: [{ name: 'createTime', order: 'desc' }],
                 }"
@@ -208,12 +208,7 @@ const columns = [
         scopedSlots: true,
     },
 ];
-const query = {
-    params: ref({}),
-    search: (params: object) => {
-        query.params.value = params;
-    },
-};
+const queryParams = ({});
 
 const tableRef = ref<Record<string, any>>({}); // 表格实例
 const table = {

From 9d411034f6a01569cbf4df72f98a1c8d0ef90ff0 Mon Sep 17 00:00:00 2001
From: JiangQiming <291854119@qq.com>
Date: Mon, 6 Mar 2023 15:43:15 +0800
Subject: [PATCH 08/16] =?UTF-8?q?feat:=20=E5=9B=9E=E6=94=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/media/playback.ts                    |  49 ++++
 src/components/AIcon/index.tsx               |   4 +-
 src/views/media/Device/Playback/iconNode.vue |  76 ++++++
 src/views/media/Device/Playback/index.less   | 120 +++++++++
 src/views/media/Device/Playback/index.vue    | 202 +++++++++++++-
 src/views/media/Device/Playback/timeLine.vue | 262 +++++++++++++++++++
 6 files changed, 709 insertions(+), 4 deletions(-)
 create mode 100644 src/api/media/playback.ts
 create mode 100644 src/views/media/Device/Playback/iconNode.vue
 create mode 100644 src/views/media/Device/Playback/index.less
 create mode 100644 src/views/media/Device/Playback/timeLine.vue

diff --git a/src/api/media/playback.ts b/src/api/media/playback.ts
new file mode 100644
index 00000000..10b88c55
--- /dev/null
+++ b/src/api/media/playback.ts
@@ -0,0 +1,49 @@
+import server from '@/utils/request';
+import { LocalStore } from '@/utils/comm';
+import { BASE_API_PATH, TOKEN_KEY } from '@/utils/variable';
+import { recordsItemType } from '@/views/media/Device/Playback/typings';
+
+export default {
+    // 开始直播
+    ptzStart: (deviceId: string, channelId: string, type: string) =>
+        `${BASE_API_PATH}/media/device/${deviceId}/${channelId}/live.${type}?:X_Access_Token=${LocalStore.get(TOKEN_KEY)}`,
+
+    // 查询设备通道详情
+    queryDetail: (deviceId: string, data: any) => server.post(`/media/device/${deviceId}/channel/_query`, data),
+
+    // 查询本地回放记录
+    queryRecordLocal: (deviceId: string, channelId: string, data?: any) =>
+        server.post<any>(`/media/device/${deviceId}/${channelId}/records/in-local`, data),
+
+    // 下载到云端
+    downloadRecord: (deviceId: string, channelId: string, data: any) =>
+        server.post(`/media/device/${deviceId}/${channelId}/_record`, data),
+
+    // 播放本地回放
+    playbackLocal: (
+        deviceId: string,
+        channelId: string,
+        suffix: string,
+        startTime: string,
+        endTime: string,
+        speed: number = 1
+    ) =>
+        `${BASE_API_PATH}/media/device/${deviceId}/${channelId}/playback.${suffix}?:X_Access_Token=${LocalStore.get(TOKEN_KEY)}&startTime=${startTime}&endTime=${endTime}&speed=${speed}`,
+
+    // 本地录像播放控制
+    playbackControl: (deviceId: string, channelId: string) =>
+        server.post(`/media/device/${deviceId}/${channelId}/stream-control`),
+
+    // 查询云端回放记录
+    recordsInServer: (deviceId: string, channelId: string, data: any) =>
+        server.post<recordsItemType[]>(`/media/device/${deviceId}/${channelId}/records/in-server`, data),
+
+    // 查询云端回放文件信息
+    recordsInServerFiles: (deviceId: string, channelId: string, data: any) =>
+        server.post<recordsItemType[]>(`/media/device/${deviceId}/${channelId}/records/in-server/files`, data),
+
+    // 播放云端回放
+    playbackStart: (recordId: string) => `${BASE_API_PATH}/record/${recordId}.mp4?:X_Access_Token=${LocalStore.get(TOKEN_KEY)}`,
+
+    downLoadFile: (recordId: string) => `${BASE_API_PATH}/record/${recordId}.mp4?download=true&:X_Access_Token=${LocalStore.get(TOKEN_KEY)}`
+}
\ No newline at end of file
diff --git a/src/components/AIcon/index.tsx b/src/components/AIcon/index.tsx
index dd5e389f..7ff28560 100644
--- a/src/components/AIcon/index.tsx
+++ b/src/components/AIcon/index.tsx
@@ -73,7 +73,9 @@ const iconKeys = [
     'BellOutlined',
     'UserOutlined',
     'LogoutOutlined',
-    'ReadIconOutlined'
+    'ReadIconOutlined',
+    'CloudDownloadOutlined',
+    'PauseCircleOutlined',
 ]
 
 const Icon = (props: {type: string}) => {
diff --git a/src/views/media/Device/Playback/iconNode.vue b/src/views/media/Device/Playback/iconNode.vue
new file mode 100644
index 00000000..501c7861
--- /dev/null
+++ b/src/views/media/Device/Playback/iconNode.vue
@@ -0,0 +1,76 @@
+<!-- 视频图标组件 -->
+<template>
+    <a @click="handleClick">
+        <AIcon :type="iconType" />
+    </a>
+</template>
+
+<script setup lang="ts">
+import type { recordsItemType } from './typings';
+import playBackApi from '@/api/media/playback';
+import { message } from 'ant-design-vue';
+
+interface Props {
+    type: string;
+    item: recordsItemType;
+    onCloudView: (startTime: number, endTime: number) => void;
+    onDownLoad: () => void;
+}
+const props = defineProps<Props>();
+
+// type 为local时有效，0：未下载； 1：下载中：2：已下载
+// const status = ref(props.item?.isServer ? 2 : 0);
+const status = computed({
+    get: () => (props.item?.isServer ? 2 : 0),
+    set: (val: number) => {},
+});
+
+const getLocalIcon = (s: number) => {
+    if (s === 0) {
+        return 'CloudDownloadOutlined';
+    } else if (s === 2) {
+        return 'EyeOutlined';
+    } else {
+        return 'LoadingOutlined';
+    }
+};
+
+const iconType = computed(() =>
+    props.type === 'local' ? getLocalIcon(status.value) : 'DownloadOutlined',
+);
+
+const downLoadCloud = (item: recordsItemType) => {
+    status.value = 1;
+    playBackApi
+        .downloadRecord(item.deviceId, item.channelId, {
+            local: false,
+            downloadSpeed: 4,
+            startTime: item.startTime,
+            endTime: item.endTime,
+        })
+        .then((res) => {
+            if (res.status === 200) {
+                message.success(
+                    '操作成功。上传云端需要一定时间，请稍后查看云端数据',
+                );
+            }
+            status.value = res.status === 200 ? 2 : 0;
+        });
+};
+
+const handleClick = () => {
+    if (props.type === 'local') {
+        if (status.value === 2) {
+            // 已下载，进行跳转
+            props.onCloudView(props.item.startTime, props.item.endTime);
+        } else if (status.value === 0) {
+            // 未下载 进行下载
+            downLoadCloud(props.item);
+        }
+    } else {
+        props.onDownLoad();
+    }
+};
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/media/Device/Playback/index.less b/src/views/media/Device/Playback/index.less
new file mode 100644
index 00000000..dfa44d81
--- /dev/null
+++ b/src/views/media/Device/Playback/index.less
@@ -0,0 +1,120 @@
+@borderColor: #d9d9d9;
+
+.playback-warp {
+    display: flex;
+    padding: 24px;
+    background-color: #fff;
+
+    .playback-left {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        width: 0;
+
+        .playback-media {
+            width: 100%;
+        }
+    }
+
+    .playback-right {
+        width: 300px;
+        margin-left: 24px;
+
+        .playback-calendar {
+            margin-top: 16px;
+            border: 1px solid @borderColor;
+            border-radius: 2px;
+
+            .ant-picker-calendar-header {
+                justify-content: space-between;
+
+                > div:nth-child(3) {
+                    display: none;
+                }
+            }
+        }
+
+        .playback-list {
+            display: flex;
+            height: 300px;
+            margin-top: 16px;
+            overflow-y: auto;
+            border: 1px solid @borderColor;
+
+            &.no-list {
+                align-items: center;
+                justify-content: center;
+            }
+
+            .playback-list-items {
+                width: 100%;
+
+                .ant-list-item {
+                    padding-left: 12px;
+                }
+            }
+        }
+    }
+
+    .time-line-warp {
+        padding: 10px 0;
+
+        .time-line-clock {
+            display: flex;
+            align-items: stretch;
+            justify-content: space-between;
+            width: 100%;
+
+            > div {
+                color: #666;
+                font-size: 12px;
+            }
+        }
+
+        .time-line-content {
+            position: relative;
+            padding-bottom: 20px;
+
+            .time-line-progress {
+                position: relative;
+                height: 16px;
+                overflow: hidden;
+                background-color: #d9d9d9;
+                border-radius: 2px;
+
+                > div {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    height: 100%;
+                    background-color: #52c41a;
+                    cursor: pointer;
+                }
+            }
+            .time-line-btn {
+                position: absolute;
+                top: -2px;
+                left: 0;
+                width: 3px;
+                height: 19px;
+                background-color: @primary-color;
+                border-radius: 2px;
+                visibility: hidden;
+            }
+
+            .time-line {
+                position: absolute;
+                bottom: -8px;
+                left: -30px;
+                width: 60px;
+                padding: 2px 0;
+                font-size: 12px;
+                text-align: center;
+                background-color: #d9d9d9;
+                border-radius: 2px;
+                box-shadow: 0 0 12px rgba(#000, 0.15);
+                visibility: hidden;
+            }
+        }
+    }
+}
diff --git a/src/views/media/Device/Playback/index.vue b/src/views/media/Device/Playback/index.vue
index e0d2ef94..321a7127 100644
--- a/src/views/media/Device/Playback/index.vue
+++ b/src/views/media/Device/Playback/index.vue
@@ -1,7 +1,203 @@
+<!-- 回放 -->
 <template>
-    <page-container> 回放 </page-container>
+    <page-container>
+        <div class="playback-warp">
+            <div class="playback-left">
+                <LivePlayer :src="url" />
+                <TimeLine
+                    ref="playTimeNode"
+                    :type="type"
+                    :data="historyList"
+                    :date-time="time"
+                    :on-change="handleTimeLineChange"
+                    :play-status="playStatus"
+                    :play-time="playNowTime + playTime * 1000"
+                    :local-to-server="cloudTime"
+                />
+            </div>
+            <div class="playback-right">
+                <a-spin :spinning="loading">
+                    <a-tooltip title="">
+
+                    </a-tooltip>
+                </a-spin>
+            </div>
+        </div>
+    </page-container>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import playBackApi from '@/api/media/playback';
+import type { Moment } from 'moment';
+import moment from 'moment';
+import TimeLine from './timeLine.vue';
+import IconNode from './iconNode.vue';
+import type { recordsItemType } from './typings';
+import LivePlayer from '@/components/Player/index.vue';
 
-<style lang="less" scoped></style>
+const route = useRoute();
+
+const url = ref('');
+const type = ref('local');
+const historyList = ref<recordsItemType[]>([]);
+const time = ref<Moment | undefined>(undefined);
+const loading = ref(false);
+const cloudTime = ref<any>();
+const location = ref({ search: '' });
+const player = ref<any>();
+const playStatus = ref(0); // 播放状态, 0 停止， 1 播放， 2 暂停, 3 播放完成
+const playTime = ref(0);
+
+const playNowTime = ref(0); // 当前播放视频标识
+const playTimeNode = ref<any>(null);
+const isEnded = ref(false); // 是否结束播放
+const param = new URLSearchParams(location.value.search);
+const deviceId = computed(() => route.params.id as string);
+const channelId = computed(() => route.params.channelId as string);
+
+const deviceType = ref('');
+
+const queryLocalRecords = async (date: Moment) => {
+    playStatus.value = 0;
+    url.value = '';
+    if (deviceId.value && channelId.value && date) {
+        loading.value = true;
+        const params = {
+            startTime: date.format('YYYY-MM-DD 00:00:00'),
+            endTime: date.format('YYYY-MM-DD 23:59:59'),
+        };
+        const localResp = await playBackApi.queryRecordLocal(
+            deviceId.value,
+            channelId.value,
+            params,
+        );
+        if (localResp.status === 200 && localResp.result.length) {
+            const serviceResp = await playBackApi.recordsInServer(
+                deviceId.value,
+                channelId.value,
+                {
+                    ...params,
+                    includeFiles: false,
+                },
+            );
+            loading.value = false;
+            let newList: recordsItemType[] = serviceResp.result;
+            // console.log(newList)
+
+            if (serviceResp.status === 200 && serviceResp.result) {
+                // 判断是否已下载云端视频
+                newList = localResp.result.map((item: recordsItemType) => {
+                    return {
+                        ...item,
+                        isServer: serviceResp.result.length
+                            ? serviceResp.result.some(
+                                  (serverFile: any) =>
+                                      item.startTime <=
+                                          serverFile.streamStartTime &&
+                                      serverFile.streamEndTime <= item.endTime,
+                              )
+                            : false,
+                    };
+                });
+
+                historyList.value = newList;
+            } else {
+                historyList.value = newList;
+            }
+        } else {
+            loading.value = false;
+            historyList.value = [];
+        }
+    }
+};
+
+/**
+ * 查询云端视频
+ * @param date
+ */
+const queryServiceRecords = async (date: Moment) => {
+    playStatus.value = 0;
+    url.value = '';
+    if (deviceId.value && channelId.value && date) {
+        loading.value = true;
+        const params = {
+            startTime: date.format('YYYY-MM-DD 00:00:00'),
+            endTime: date.format('YYYY-MM-DD 23:59:59'),
+            includeFiles: true,
+        };
+
+        const resp = await playBackApi.recordsInServerFiles(
+            deviceId.value,
+            channelId.value,
+            params,
+        );
+        loading.value = false;
+        if (resp.status === 200) {
+            historyList.value = resp.result;
+        }
+    }
+};
+
+const cloudView = (startTime: number, endTime: number) => {
+    type.value = 'cloud';
+    cloudTime.value = { startTime, endTime };
+    queryServiceRecords(time.value!);
+};
+
+const downloadClick = async (item: recordsItemType) => {
+    const downloadUrl = playBackApi.downLoadFile(item.id);
+    const downNode = document.createElement('a');
+    downNode.href = downloadUrl;
+    downNode.download = `${channelId}-${moment(item.startTime).format(
+        'YYYY-MM-DD-HH-mm-ss',
+    )}.mp4`;
+    downNode.style.display = 'none';
+    document.body.appendChild(downNode);
+    downNode.click();
+    document.body.removeChild(downNode);
+};
+
+watch(
+    () => location.value,
+    (val: any) => {
+        const _param = new URLSearchParams(val?.search);
+        const _type = _param.get('type');
+
+        if (_type) {
+            deviceType.value = _type;
+            const _timeStr = moment(new Date());
+            time.value = _timeStr;
+            if (_type === 'fixed-media') {
+                type.value = 'cloud';
+                queryServiceRecords(_timeStr);
+            } else {
+                queryLocalRecords(_timeStr);
+                type.value = 'local';
+            }
+        }
+    },
+);
+
+const handleTimeLineChange = (times: any) => {
+    if (times) {
+        playNowTime.value = Number(times.startTime.valueOf());
+        playTime.value = 0;
+        url.value =
+            type.value === 'local'
+                ? playBackApi.playbackLocal(
+                      times.deviceId,
+                      times.channelId,
+                      'mp4',
+                      moment(times.startTime).format('YYYY-MM-DD HH:mm:ss'),
+                      moment(times.endTime).format('YYYY-MM-DD HH:mm:ss'),
+                  )
+                : playBackApi.playbackStart(times.deviceId);
+    } else {
+        url.value = '';
+    }
+};
+</script>
+
+<style lang="less" scoped>
+@import './index.less';
+</style>
diff --git a/src/views/media/Device/Playback/timeLine.vue b/src/views/media/Device/Playback/timeLine.vue
new file mode 100644
index 00000000..e77c014d
--- /dev/null
+++ b/src/views/media/Device/Playback/timeLine.vue
@@ -0,0 +1,262 @@
+<!-- 播放器时间刻度 -->
+<template>
+    <div class="time-line-warp">
+        <div class="time-line-clock">
+            <div
+                v-for="item in Array.from(Array(25), (v, k) => k)"
+                :key="item"
+                style="width: 12px"
+            >
+                {{ item }}
+            </div>
+        </div>
+        <div class="time-line-content" ref="LineContent">
+            <div class="time-line-progress">
+                <div
+                    v-for="(item, index) in list"
+                    :key="`time_${index}`"
+                    @click="handleProgress($event, item)"
+                    :style="
+                        getLineItemStyle(
+                            item.startTime || item.mediaStartTime,
+                            item.endTime || item.mediaEndTime,
+                        )
+                    "
+                ></div>
+            </div>
+            <div id="btn" class="time-line-btn"></div>
+            <div id="time" class="time-line">
+                {{ moment(playTime || 0).format('HH:mm:ss') }}
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { message } from 'ant-design-vue';
+import type { Moment } from 'moment';
+import moment from 'moment';
+import type { recordsItemType } from './typings';
+
+export type TimeChangeType = {
+    endTime: Moment;
+    startTime: Moment;
+    deviceId: string;
+    channelId: string;
+};
+
+interface Props {
+    onChange: (times: TimeChangeType | undefined) => void;
+    data: recordsItemType[];
+    dateTime?: Moment;
+    type: string;
+    playStatus: number;
+    playTime: number;
+    server?: any;
+    localToServer?: {
+        endTime: number;
+        startTime: number;
+    };
+    getPlayList?: (data: any) => void;
+}
+
+const props = defineProps<Props>();
+
+// 获取选中当天开始时间戳
+const startT = ref<number>(
+    new Date(
+        moment(props.dateTime).startOf('day').format('YYYY-MM-DD HH:mm:ss'),
+    ).getTime(),
+);
+// 获取选中当天结束时间戳
+const endT = ref<number>(
+    new Date(
+        moment(props.dateTime).endOf('day').format('YYYY-MM-DD HH:mm:ss'),
+    ).getTime(),
+);
+const list = ref<any[]>([]);
+const playTime = ref<number>(0);
+const LineContent = ref<HTMLDivElement>();
+// const LineContentSize = LineContent.value;
+const LineContentSize = ref({ width: 100 });
+
+const setTimeAndPosition = (ob: number) => {
+    const oBtn = document.getElementById('btn');
+    const oTime = document.getElementById('time');
+
+    if (oBtn && oTime && LineContentSize.value.width) {
+        oBtn.style.visibility = 'visible';
+        oBtn.style.left = `${ob * LineContentSize.value.width}px`;
+        oTime.style.visibility = 'visible';
+        oTime.style.left = `${ob * LineContentSize.value.width - 15}px`;
+    }
+};
+
+watch(
+    () => props.dateTime,
+    (val: any) => {
+        startT.value = new Date(
+            moment(val).startOf('day').format('YYYY-MM-DD HH:mm:ss'),
+        ).getTime();
+    },
+);
+
+const onChange = (
+    startTime: number,
+    endTime: number,
+    deviceId: string,
+    channelId: string,
+) => {
+    playTime.value = startTime;
+    props.onChange({
+        startTime: moment(startTime),
+        endTime: moment(endTime),
+        deviceId,
+        channelId,
+    });
+};
+
+const playByStartTime = (time: any) => {
+    const playNow = props.data.find((item) => {
+        const startTime = item.startTime || item.mediaStartTime;
+        return startTime === time;
+    });
+
+    if (playNow) {
+        const startTime = playNow.startTime || playNow.mediaStartTime;
+        const endTime = playNow.endTime || playNow.mediaEndTime;
+        const deviceId = props.type === 'local' ? playNow.deviceId : playNow.id;
+        onChange(startTime, endTime, deviceId, playNow.channelId);
+    }
+};
+playByStartTime(0);
+
+const onNextPlay = () => {
+    if (playTime.value) {
+        // 查找下一个视频
+        const nowIndex = props.data.findIndex((item) => {
+            const startTime = item.startTime || item.mediaStartTime;
+            return startTime === playTime.value;
+        });
+        // 是否为最后一个
+        if (nowIndex !== props.data.length - 1) {
+            const nextPlay = props.data[nowIndex + 1];
+            const startTime = nextPlay.startTime || nextPlay.mediaStartTime;
+            const endTime = nextPlay.endTime || nextPlay.mediaEndTime;
+            const deviceId =
+                props.type === 'local' ? nextPlay.deviceId : nextPlay.id;
+            onChange(startTime, endTime, deviceId, nextPlay.channelId);
+        }
+    }
+};
+onNextPlay();
+
+watch(
+    () => props.data,
+    (val: any) => {
+        const { data, localToServer, type } = props;
+        if (data && Array.isArray(data) && data.length > 0) {
+            list.value = [...data];
+            if (type === 'local') {
+                // 播放第一个
+                onChange(
+                    data[0].startTime,
+                    data[0].endTime,
+                    data[0].deviceId,
+                    data[0].channelId,
+                );
+            } else if (type === 'cloud') {
+                // 是否从本地跳转到云端播放
+                if (localToServer && Object.keys(localToServer).length > 0) {
+                    // 获取跳转播放段
+                    const playItem = data.find((item) => {
+                        return (
+                            item.mediaEndTime <= localToServer.endTime &&
+                            item.mediaStartTime >= localToServer.startTime
+                        );
+                    });
+                    if (playItem) {
+                        //播放片段
+                        onChange(
+                            playItem.mediaStartTime,
+                            playItem.mediaEndTime,
+                            playItem.id,
+                            playItem.channelId,
+                        );
+                    } else {
+                        props.onChange(undefined);
+                        message.error('没有可播放的视频资源');
+                    }
+                } else {
+                    onChange(
+                        data[0].mediaStartTime,
+                        data[0].mediaEndTime,
+                        data[0].id,
+                        data[0].channelId,
+                    );
+                }
+            }
+        } else if (localToServer && localToServer.startTime) {
+            // 本地跳转云端但是无资源
+            props.onChange(undefined);
+            message.error('没有可播放的视频资源');
+            list.value = [];
+        } else {
+            // 啥都没有
+            list.value = [];
+            props.onChange(undefined);
+        }
+    },
+);
+
+const getLineItemStyle = (
+    startTime: number,
+    endTime: number,
+): { left: string; width: string } => {
+    const start = startTime - startT.value > 0 ? startTime - startT.value : 0;
+    const _width = LineContentSize.value.width!;
+    const itemWidth = ((endTime - startTime) / (24 * 3600000)) * _width;
+    return {
+        left: `${(start / (24 * 3600000)) * _width}px`,
+        width: `${itemWidth < 1 ? 1 : itemWidth}px`,
+    };
+};
+
+const playTimeChange = () => {
+    if (
+        props.playTime &&
+        props.playTime >= startT.value &&
+        props.playTime <= endT.value &&
+        props.data &&
+        props.data.length
+    ) {
+        setTimeAndPosition((props.playTime - startT.value) / 3600000 / 24);
+    }
+};
+watch(
+    () => props.playTime,
+    () => {
+        playTimeChange();
+    },
+);
+watch(
+    () => startT.value,
+    () => {
+        playTimeChange();
+    },
+);
+
+const handleProgress = (event: any, item: any) => {
+    const pos = LineContent.value?.getBoundingClientRect();
+    if (pos && item.endTime) {
+        const dt = event.clientX - pos.x;
+        const start = (dt / pos.width) * 24 * 3600000 + startT.value;
+        const _start = start < item.startTime ? item.startTime : start;
+        onChange(_start, item.endTime, item.deviceId, item.channelId);
+    }
+};
+</script>
+
+<style lang="less" scoped>
+@import './index.less';
+</style>

From 3039c20e2f06d5e03db524c807c1d6ef6c60f4aa Mon Sep 17 00:00:00 2001
From: easy <1358086367@qq.com>
Date: Mon, 6 Mar 2023 16:35:59 +0800
Subject: [PATCH 09/16] =?UTF-8?q?update:=20=E8=A7=92=E8=89=B2=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E7=BB=84=E4=BB=B6=E6=9B=B4=E6=8D=A2=E3=80=81=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97=E9=80=BB=E8=BE=91=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../system/Role/Detail/Permiss/index.vue      |  32 +--
 src/views/system/Role/Detail/User/index.vue   | 253 ++++++++++--------
 .../Role/Detail/components/AddUserDialog.vue  | 148 +++++-----
 .../Role/Detail/components/PermissTree.vue    |  56 ++--
 src/views/system/Role/Detail/index.vue        |   9 +-
 .../system/Role/components/AddDialog.vue      |  90 +++----
 src/views/system/Role/index.vue               | 122 ++++-----
 7 files changed, 338 insertions(+), 372 deletions(-)

diff --git a/src/views/system/Role/Detail/Permiss/index.vue b/src/views/system/Role/Detail/Permiss/index.vue
index c41cb1b8..3fcbe584 100644
--- a/src/views/system/Role/Detail/Permiss/index.vue
+++ b/src/views/system/Role/Detail/Permiss/index.vue
@@ -1,42 +1,42 @@
 <template>
     <div class="role-permiss-container">
-        <a-card>
+        <section class="card">
             <h5>基本信息</h5>
-            <a-form ref="formRef" class="basic-form" :model="form.data" layout="vertical">
-                <a-form-item
+            <j-form ref="formRef" class="basic-form" :model="form.data" layout="vertical">
+                <j-form-item
                     name="name"
                     label="名称"
                     :rules="[{ required: true, message: '请输入名称' }]"
                 >
-                    <a-input
+                    <j-input
                         v-model:value="form.data.name"
                         placeholder="请输入角色名称"
                         :maxlength="64"
                     />
-                </a-form-item>
-                <a-form-item name="name" label="说明">
-                    <a-textarea
+                </j-form-item>
+                <j-form-item name="name" label="说明">
+                    <j-textarea
                         v-model:value="form.data.description"
                         placeholder="请输入说明"
                         :maxlength="200"
                         show-count
                     />
-                </a-form-item>
-            </a-form>
-        </a-card>
+                </j-form-item>
+            </j-form>
+        </section>
 
-        <a-card>
+        <section class="card">
             <h5>权限分配</h5>
             <PermissTree v-model:select-items="form.menus" />
 
-            <a-button
+            <j-button
                 type="primary"
                 :disabled="form.loading"
                 @click="form.clickSave"
                 style="margin-top: 24px;"
-                >保存</a-button
+                >保存</j-button
             >
-        </a-card>
+        </section>
     </div>
 </template>
 
@@ -86,8 +86,10 @@ form.getForm();
 
 <style lang="less" scoped>
 .role-permiss-container {
-    .ant-card {
+    .card {
         margin-bottom: 24px;
+        background-color: #fff;
+        padding: 24px;
 
         h5 {
             position: relative;
diff --git a/src/views/system/Role/Detail/User/index.vue b/src/views/system/Role/Detail/User/index.vue
index abb633d8..2ad6f4ee 100644
--- a/src/views/system/Role/Detail/User/index.vue
+++ b/src/views/system/Role/Detail/User/index.vue
@@ -1,134 +1,149 @@
 <template>
-    <a-card class="role-user-container">
-        <Search :columns="query.columns" />
+    <div class="role-user-container">
+        <j-advanced-search
+            :columns="columns"
+            @search="(params:any)=>queryParams = {...params}"
+        />
 
         <j-pro-table
             ref="tableRef"
-            :columns="table.columns"
-            :request="getUserByRole_api"
+            :columns="columns"
+            :request="table.getList"
             model="TABLE"
-            :defaultParams="query.params"
+            :params="queryParams"
             :rowSelection="{
-                selectedRowKeys: table._selectedRowKeys,
-                onChange: table.onSelectChange,
+                selectedRowKeys: selectedRowKeys,
+                onChange: (keys:string[])=>selectedRowKeys = keys,
             }"
-            @cancelSelect="table.cancelSelect"
+            @cancelSelect="selectedRowKeys = []"
+            size="small"
         >
             <template #headerTitle>
-                <a-button type="primary" @click="table.clickAdd"
-                    ><plus-outlined />新增</a-button
-                >
+                <j-button type="primary" @click="dialogVisible = true">
+                    <AIcon type="PlusOutlined" />新增
+                </j-button>
+            </template>
+
+            <template #status="slotProps">
+                <BadgeStatus
+                    :status="slotProps.status"
+                    :text="slotProps.status ? '正常' : '禁用'"
+                    :statusNames="{
+                        1: 'success',
+                        0: 'error',
+                    }"
+                ></BadgeStatus>
             </template>
 
             <template #action="slotProps">
-                <a-space :size="16">
-                    <a-popconfirm
-                        title="确认解绑"
-                        ok-text="确定"
-                        cancel-text="取消"
-                        @confirm="table.clickUnBind(slotProps)"
+                <j-space :size="16">
+                    <PermissionButton
+                        type="link"
+                        :tooltip="{ title: '解绑' }"
+                        :pop-confirm="{
+                            title: `确认解绑`,
+                            onConfirm: () => table.unbind([slotProps.id]),
+                        }"
                     >
-                        <a-tooltip>
-                            <template #title>解绑</template>
-                            <a-button style="padding: 0" type="link">
-                                <disconnect-outlined />
-                            </a-button>
-                        </a-tooltip>
-                    </a-popconfirm>
-                </a-space>
+                        <AIcon type="DisconnectOutlined" />
+                    </PermissionButton>
+                </j-space>
             </template>
         </j-pro-table>
 
-        <div class="dialogs">
-            <AddUserDialog :open="dialog.openAdd" @refresh="table.refresh" />
-        </div>
-    </a-card>
+        <AddUserDialog
+            v-if="dialogVisible"
+            v-model:visible="dialogVisible"
+            :role-id="roleId"
+            @refresh="table.refresh"
+        />
+    </div>
 </template>
 
 <script setup lang="ts" name="RoleUser">
-import { PlusOutlined, DisconnectOutlined } from '@ant-design/icons-vue';
+import PermissionButton from '@/components/PermissionButton/index.vue';
 import AddUserDialog from '../components/AddUserDialog.vue';
 import { getUserByRole_api, unbindUser_api } from '@/api/system/role';
 import { message } from 'ant-design-vue';
-import userType from './index';
 
-const route = useRoute();
-const roleId = route.params.id as string;
-const query = reactive<userType.queryType>({
-    columns: [
-        {
-            title: '姓名',
-            dataIndex: 'name',
-            key: 'name',
+const roleId = useRoute().params.id as string;
+
+const columns = [
+    {
+        title: '姓名',
+        dataIndex: 'name',
+        key: 'name',
+        search: {
+            type: 'string',
         },
-        {
-            title: '用户名',
-            dataIndex: 'username',
-            key: 'username',
-        },
-        {
-            title: '创建时间',
-            dataIndex: 'createTime',
-            key: 'createTime',
-        },
-        {
-            title: '状态',
-            dataIndex: 'status',
-            key: 'status',
-        },
-    ],
-    params: {
-        terms: [
-            {
-                terms: [
-                    {
-                        column: 'id$in-dimension$role',
-                        value: route.params.id,
-                    },
-                ],
-            },
-        ],
     },
-});
+    {
+        title: '用户名',
+        dataIndex: 'username',
+        key: 'username',
+        search: {
+            type: 'string',
+        },
+    },
+    {
+        title: '创建时间',
+        dataIndex: 'createTime',
+        key: 'createTime',
+        search: {
+            type: 'date',
+        },
+    },
+    {
+        title: '状态',
+        dataIndex: 'status',
+        key: 'status',
+        search: {
+            type: 'select',
+            options: [
+                {
+                    label: '正常',
+                    value: 1,
+                },
+                {
+                    label: '禁用',
+                    value: 0,
+                },
+            ],
+        },
+        scopedSlots: true,
+    },
+    {
+        title: '操作',
+        dataIndex: 'action',
+        key: 'action',
+        width: '200px',
+        scopedSlots: true,
+    },
+];
+const queryParams = ref({});
 
 const tableRef = ref<Record<string, any>>({});
-const table = reactive<userType.tableType>({
-    columns: [
-        {
-            title: '姓名',
-            dataIndex: 'name',
-            key: 'name',
-        },
-        {
-            title: '用户名',
-            dataIndex: 'username',
-            key: 'username',
-        },
-        {
-            title: '创建时间',
-            dataIndex: 'createTime',
-            key: 'createTime',
-        },
-        {
-            title: '状态',
-            dataIndex: 'status',
-            key: 'status',
-        },
-        {
-            title: '操作',
-            dataIndex: 'action',
-            key: 'action',
-            scopedSlots: true,
-        },
-    ],
-    tableData: [],
-    // 点击打开新增弹窗
-    clickAdd: () => {
-        dialog.openAdd += 1;
-    },
-    // 点击解绑
-    clickUnBind: (row: any) => {
-        table.unbind([row.id]);
+const selectedRowKeys = ref<string[]>([]);
+const table = {
+    getList: (oParams: any) => {
+        const params = {
+            ...oParams,
+            terms: [
+                {
+                    terms: [
+                        {
+                            column: 'id$in-dimension$role',
+                            value: roleId,
+                        },
+                    ],
+                },
+            ],
+        };
+        if (oParams.terms[0])
+            params.terms.unshift({
+                terms: oParams.terms[0].terms,
+            });
+        return getUserByRole_api(params);
     },
     // 批量解绑
     unbind: (ids: string[] = []) => {
@@ -143,20 +158,24 @@ const table = reactive<userType.tableType>({
     refresh: () => {
         tableRef.value.reload();
     },
-    // 多选
-    _selectedRowKeys: [] as string[],
-    onSelectChange: (keys: string[]) => {
-        table._selectedRowKeys = [...keys];
-    },
-    cancelSelect: () => {
-        table._selectedRowKeys = [];
-    },
-});
+};
 
 // 弹窗相关
-const dialog = reactive({
-    openAdd: 0,
-});
+const dialogVisible = ref(false);
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.role-user-container {
+    background-color: #fff;
+
+    :deep(.ant-table-tbody) {
+        .ant-table-cell {
+            .ant-space-item {
+                .ant-btn-link {
+                    padding: 0;
+                }
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/system/Role/Detail/components/AddUserDialog.vue b/src/views/system/Role/Detail/components/AddUserDialog.vue
index e22e46ba..bd34c834 100644
--- a/src/views/system/Role/Detail/components/AddUserDialog.vue
+++ b/src/views/system/Role/Detail/components/AddUserDialog.vue
@@ -1,123 +1,99 @@
 <template>
-    <a-modal
-        v-model:visible="dialog.visible"
+    <j-modal
+        visible
         title="新增"
         width="1000px"
-        @ok="dialog.handleOk"
+        @ok="confirm"
+        @cancel="emits('update:visible', false)"
     >
-        <Search :columns="query.columns" type="simple" />
+        <j-advanced-search
+            :columns="columns"
+            type="simple"
+            @search="(params:any)=>queryParams = {...params}"
+        />
 
         <j-pro-table
             ref="tableRef"
-            :columns="table.columns"
-            :request="getUserByRole_api"
+            :columns="columns"
+            :request="getUserList"
             model="TABLE"
-            :params="query.params"
+            :params="queryParams"
             :rowSelection="{
-                selectedRowKeys: table._selectedRowKeys,
-                onChange: table.onSelectChange,
+                selectedRowKeys: selectedRowKeys,
+                onChange: (keys:string[])=>selectedRowKeys = keys,
             }"
-            @cancelSelect="table.cancelSelect"
+            @cancelSelect="selectedRowKeys = []"
         >
         </j-pro-table>
-
-        <template #footer>
-            <a-button key="back" @click="dialog.visible = false">取消</a-button>
-            <a-button key="submit" type="primary" @click="dialog.handleOk"
-                >确定</a-button
-            >
-        </template>
-    </a-modal>
+    </j-modal>
 </template>
 
 <script setup lang="ts">
 import { getUserByRole_api, bindUser_api } from '@/api/system/role';
 import { message } from 'ant-design-vue';
-const route = useRoute();
 
-const emits = defineEmits(['refresh']);
-const props = defineProps({
-    open: Number,
-});
+const emits = defineEmits(['refresh', 'update:visible']);
+const props = defineProps<{
+    visible: boolean;
+    roleId: string
+}>();
 
-const query = reactive({
-    columns: [
-        {
-            title: '姓名',
-            dataIndex: 'name',
-            key: 'name',
+const columns = [
+    {
+        title: '姓名',
+        dataIndex: 'name',
+        key: 'name',
+        search: {
+            type: 'string',
         },
-        {
-            title: '用户名',
-            dataIndex: 'username',
-            key: 'username',
+    },
+    {
+        title: '用户名',
+        dataIndex: 'username',
+        key: 'username',
+        search: {
+            type: 'string',
         },
-    ],
-    params: {
+    },
+];
+const queryParams = ref({});
+
+const selectedRowKeys = ref<string[]>([]);
+const getUserList = (oParams: any) => {
+    const params = {
+        ...oParams,
         sorts: [{ name: 'createTime', order: 'desc' }],
         terms: [
             {
                 terms: [
                     {
                         column: 'id$in-dimension$role$not',
-                        value: route.params.id,
+                        value: props.roleId,
                     },
                 ],
             },
         ],
-    },
-});
-const tableRef = ref<Record<string, any>>({});
-const table = reactive({
-    _selectedRowKeys: [] as string[],
-    columns: [
-        {
-            title: '姓名',
-            dataIndex: 'name',
-            key: 'name',
-        },
-        {
-            title: '用户名',
-            dataIndex: 'username',
-            key: 'username',
-        },
-    ],
-    tableData: [],
-    onSelectChange: (keys: string[]) => {
-        table._selectedRowKeys = [...keys];
-    },
-    cancelSelect: () => {
-        table._selectedRowKeys = [];
-    },
-});
+    };
+    if (oParams.terms[0])
+        params.terms.unshift({
+            terms: oParams.terms[0].terms,
+        });
+    return getUserByRole_api(params);
+};
 
-// 弹窗相关
-const dialog = reactive({
-    visible: false,
-    handleOk: () => {
-        if (table._selectedRowKeys.length < 1) {
-            message.error('请至少选择一项');
-        } else {
-            bindUser_api(
-                route.params.id as string,
-                table._selectedRowKeys,
-            ).then((resp) => {
+const confirm = () => {
+    if (selectedRowKeys.value.length < 1) {
+        message.error('请至少选择一项');
+    } else {
+        bindUser_api(props.roleId, selectedRowKeys.value).then(
+            (resp) => {
                 if (resp.status === 200) {
                     message.success('操作成功');
                     emits('refresh');
-                    dialog.visible = false;
+                    emits('update:visible', false);
                 }
-            });
-        }
-    },
-});
-
-watch(
-    () => props.open,
-    () => {
-        dialog.visible = true;
-    },
-);
+            },
+        );
+    }
+};
 </script>
-
-<style scoped></style>
diff --git a/src/views/system/Role/Detail/components/PermissTree.vue b/src/views/system/Role/Detail/components/PermissTree.vue
index ec63d97d..dc7875ab 100644
--- a/src/views/system/Role/Detail/components/PermissTree.vue
+++ b/src/views/system/Role/Detail/components/PermissTree.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="permiss-tree-container">
-        <a-table
+        <j-table
             :columns="columns"
             :data-source="tableData"
             :pagination="false"
@@ -10,28 +10,28 @@
             <!-- 表头 -->
             <template #headerCell="{ column }">
                 <div v-if="column.key === 'menu'">
-                    <a-checkbox
+                    <j-checkbox
                         v-model:checked="selectedAll"
                         :indeterminate="indeterminate"
                         @change="selectAllChange"
-                        >菜单权限</a-checkbox
+                        >菜单权限</j-checkbox
                     >
                 </div>
                 <div v-else-if="column.key === 'data'">
                     <span style="">数据权限</span>
-                    <a-tooltip>
+                    <j-tooltip>
                         <template #title
                             >勾选任意数据权限均能看到自己创建的数据权限</template
                         >
-                        <question-circle-outlined />
-                    </a-tooltip>
-                    <a-checkbox
+                        <AIcon type="QuestionCircleOutlined" />
+                    </j-tooltip>
+                    <j-checkbox
                         v-model:checked="bulkShow"
                         @change="bulkValue = ''"
                         style="margin-left: 10px"
-                        >批量设置</a-checkbox
+                        >批量设置</j-checkbox
                     >
-                    <a-select
+                    <j-select
                         v-show="bulkShow"
                         v-model:value="bulkValue"
                         :size="'middle'"
@@ -39,7 +39,7 @@
                         :options="bulkOptions"
                         @change="bulkChange"
                         placeholder="请选择"
-                    ></a-select>
+                    ></j-select>
                 </div>
                 <div v-else>
                     <span>{{ column.title }}</span>
@@ -48,21 +48,21 @@
             <!-- 表格内容 -->
             <template #bodyCell="{ column, record }">
                 <div v-if="column.key === 'menu'">
-                    <a-checkbox
+                    <j-checkbox
                         v-model:checked="record.granted"
                         :indeterminate="record.indeterminate"
                         @change="menuChange(record, true)"
-                        >{{ record.name }}</a-checkbox
+                        >{{ record.name }}</j-checkbox
                     >
                 </div>
 
                 <div v-else-if="column.key === 'action'">
                     <div v-if="record.buttons && record.buttons.length > 0">
-                        <a-checkbox
+                        <j-checkbox
                             v-for="button in record.buttons"
                             v-model:checked="button.granted"
                             @change="actionChange(record)"
-                            >{{ button.name }}</a-checkbox
+                            >{{ button.name }}</j-checkbox
                         >
                     </div>
                 </div>
@@ -72,13 +72,16 @@
                         不支持数据权限配置，默认可查看全部数据
                     </span>
                     <div v-else-if="record.accessSupport.value === 'support'">
-                        <a-radio-group v-model:value="record.selectAccesses">
-                            <a-radio
+                        <j-radio-group
+                            v-model:value="record.selectAccesses"
+                            @change="resetBulk"
+                        >
+                            <j-radio
                                 :value="asset.supportId"
                                 v-for="asset in record.assetAccesses"
-                                >{{ asset.name }}</a-radio
+                                >{{ asset.name }}</j-radio
                             >
-                        </a-radio-group>
+                        </j-radio-group>
                     </div>
                     <span
                         v-else-if="
@@ -89,12 +92,11 @@
                     >
                 </div>
             </template>
-        </a-table>
+        </j-table>
     </div>
 </template>
 
 <script setup lang="ts">
-import { QuestionCircleOutlined } from '@ant-design/icons-vue';
 import { cloneDeep } from 'lodash-es';
 import { getPrimissTree_api } from '@/api/system/role';
 
@@ -167,6 +169,12 @@ const bulkChange = () => {
         }
     });
 };
+
+// 重置批量设置
+const resetBulk = () => {
+    bulkValue.value = '';
+    bulkShow.value = false;
+};
 // ------------下面为表格内容部分------------------
 const flatTableData: tableItemType[] = []; // 表格数据的扁平化版本--浅克隆   方便进行对表格数据进行操作
 
@@ -273,6 +281,9 @@ function menuChange(
         }
     }
 
+    // 取消批量设置
+    resetBulk();
+
     // 改变头部节点状态
     const selectList = flatTableData.filter((item) => item.granted); // 第一列选中的项
     if (selectList.length === flatTableData.length) {
@@ -390,8 +401,3 @@ type tableItemType = {
     assetAccesses?: any[];
 };
 </script>
-
-<style lang="less" scoped>
-.permiss-tree-container {
-}
-</style>
diff --git a/src/views/system/Role/Detail/index.vue b/src/views/system/Role/Detail/index.vue
index 639cdc98..c97dbd05 100644
--- a/src/views/system/Role/Detail/index.vue
+++ b/src/views/system/Role/Detail/index.vue
@@ -1,10 +1,10 @@
 <template>
     <page-container>
         <div class="details-container">
-            <a-tabs v-model:activeKey="activeKey">
-                <a-tab-pane key="1" tab="权限分配"><Permiss /></a-tab-pane>
-                <a-tab-pane key="2" tab="用户管理"><User /></a-tab-pane>
-            </a-tabs>
+            <j-tabs v-model:activeKey="activeKey">
+                <j-tab-pane key="1" tab="权限分配"><Permiss /></j-tab-pane>
+                <j-tab-pane key="2" tab="用户管理"><User /></j-tab-pane>
+            </j-tabs>
         </div>
     </page-container>
 </template>
@@ -12,7 +12,6 @@
 <script setup lang="ts" name="Detail">
 import Permiss from './Permiss/index.vue';
 import User from './User/index.vue';
-const route = useRoute();
 
 const activeKey = ref('1');
 </script>
diff --git a/src/views/system/Role/components/AddDialog.vue b/src/views/system/Role/components/AddDialog.vue
index 16c3fc54..b57c50e3 100644
--- a/src/views/system/Role/components/AddDialog.vue
+++ b/src/views/system/Role/components/AddDialog.vue
@@ -1,18 +1,20 @@
 <template>
     <a-modal
-        v-model:visible="dialog.visible"
+        visible
         title="新增"
         width="670px"
-        @ok="dialog.handleOk"
+        @cancel="emits('update:visible', false)"
+        @ok="confirm"
+        :confirm-loading="loading"
     >
-        <a-form ref="formRef" :model="form.data" layout="vertical">
+        <a-form ref="formRef" :model="form" layout="vertical">
             <a-form-item
                 name="name"
                 label="名称"
                 :rules="[{ required: true, message: '请输入名称' }]"
             >
                 <a-input
-                    v-model:value="form.data.name"
+                    v-model:value="form.name"
                     placeholder="请输入角色名称"
                     allow-clear
                     :maxlength="64"
@@ -20,72 +22,52 @@
             </a-form-item>
             <a-form-item name="name" label="说明">
                 <a-textarea
-                    v-model:value="form.data.description"
+                    v-model:value="form.description"
                     placeholder="请输入说明"
                     allow-clear
                     :maxlength="200"
                 />
             </a-form-item>
         </a-form>
-
-        <template #footer>
-            <a-button key="back" @click="dialog.visible = false">取消</a-button>
-            <a-button
-                key="submit"
-                type="primary"
-                :loading="form.loading"
-                @click="dialog.handleOk"
-                >确定</a-button
-            >
-        </template>
     </a-modal>
 </template>
 
 <script setup lang="ts">
 import { FormInstance, message } from 'ant-design-vue';
 import { saveRole_api } from '@/api/system/role';
-const router = useRouter();
+import { useMenuStore } from '@/store/menu';
 const route = useRoute();
+const { jumpPage } = useMenuStore();
+
+const emits = defineEmits(['update:visible']);
+const props = defineProps<{
+    visible: boolean;
+}>();
 // 弹窗相关
-const dialog = reactive({
-    visible: false,
-    handleOk: () => {
-        formRef.value
-            ?.validate()
-            .then(() => saveRole_api(form.data))
-            .then((resp) => {
-                if (resp.status === 200) {
-                    message.success('操作成功');
-                    dialog.visible = false;
-
-                    if (route.query.save) {
-                        // @ts-ignore
-                        window?.onSaveSuccess && window.onSaveSuccess(resp.result.id);
-                        window.close();
-                    } else router.push(`/system/Role/detail/${resp.result.id}`);
-                }
-            });
-    },
-    // 控制弹窗的打开与关闭
-    changeVisible: (status: boolean, defaultForm: object = {}) => {
-        dialog.visible = status;
-        form.data = { name: '', description: '', ...defaultForm };
-    },
-});
-// 表单相关
+const loading = ref(false);
+const form = ref<any>({});
 const formRef = ref<FormInstance>();
-const form = reactive({
-    loading: false,
-    data: {
-        name: '',
-        description: '',
-    },
-});
 
-// 将打开弹窗的操作暴露给父组件
-defineExpose({
-    openDialog: dialog.changeVisible,
-});
+const confirm = () => {
+    loading.value = true;
+    formRef.value
+        ?.validate()
+        .then(() => saveRole_api(form.value))
+        .then((resp) => {
+            if (resp.status === 200) {
+                message.success('操作成功');
+                emits('update:visible', false);
+
+                if (route.query.save) {
+                    // @ts-ignore
+                    window?.onSaveSuccess(resp.result.id);
+                    window.close();
+                } else jumpPage(`system/Role/detail`, { id: resp.result.id });
+            }
+        })
+        .finally(() => (loading.value = false));
+};
+// 表单相关
 </script>
 
 <style scoped></style>
diff --git a/src/views/system/Role/index.vue b/src/views/system/Role/index.vue
index 72ee4749..ee75a296 100644
--- a/src/views/system/Role/index.vue
+++ b/src/views/system/Role/index.vue
@@ -1,20 +1,23 @@
 <template>
     <page-container>
         <a-card class="role-container">
-            <Search :columns="query.columns" />
+            <j-advanced-search
+                :columns="columns"
+                @search="(params:any)=>queryParams = params"
+            />
 
             <j-pro-table
                 ref="tableRef"
-                :columns="table.columns"
+                :columns="columns"
                 :request="getRoleList_api"
                 model="TABLE"
-                :params="query.params"
+                :params="queryParams"
             >
                 <template #headerTitle>
                     <PermissionButton
                         type="primary"
                         :uhasPermission="`${permission}:add`"
-                        @click="table.clickAdd"
+                        @click="dialogVisible = true"
                     >
                         <AIcon type="PlusOutlined" />新增
                     </PermissionButton>
@@ -47,9 +50,7 @@
                 </template>
             </j-pro-table>
 
-            <div class="dialogs">
-                <AddDialog ref="addDialogRef" />
-            </div>
+            <AddDialog v-if="dialogVisible" v-model:visible="dialogVisible" />
         </a-card>
     </page-container>
 </template>
@@ -59,73 +60,56 @@ import PermissionButton from '@/components/PermissionButton/index.vue';
 import AddDialog from './components/AddDialog.vue';
 import { getRoleList_api, delRole_api } from '@/api/system/role';
 import { message } from 'ant-design-vue';
+import { useMenuStore } from '@/store/menu';
 
 const permission = 'system/Role';
+const { jumpPage } = useMenuStore();
 
 const addDialogRef = ref(); // 新增弹窗实例
-const router = useRouter();
-const route = useRoute();
+const isSave = !!useRoute().query.save;
 
-// 筛选
-const query = reactive({
-    columns: [
-        {
-            title: '标识',
-            dataIndex: 'id',
-            key: 'id',
-            ellipsis: true,
-            fixed: 'left',
+const columns = [
+    {
+        title: '标识',
+        dataIndex: 'id',
+        key: 'id',
+        ellipsis: true,
+        fixed: 'left',
+        search: {
+            type: 'string',
         },
-        {
-            title: '名称',
-            dataIndex: 'name',
-            key: 'name',
-            ellipsis: true,
+    },
+    {
+        title: '名称',
+        dataIndex: 'name',
+        key: 'name',
+        ellipsis: true,
+        search: {
+            type: 'string',
         },
-        {
-            title: '描述',
-            key: 'description',
-            ellipsis: true,
-            dataIndex: 'description',
-            filters: true,
-            onFilter: true,
+    },
+    {
+        title: '描述',
+        key: 'description',
+        ellipsis: true,
+        dataIndex: 'description',
+        search: {
+            type: 'string',
         },
-        {
-            title: '操作',
-            valueType: 'option',
-            width: 200,
-            fixed: 'right',
-        },
-    ],
-    params: {},
-});
+    },
+    {
+        title: '操作',
+        dataIndex: 'action',
+        key: 'action',
+        width: 200,
+        fixed: 'right',
+        scopedSlots: true,
+    },
+];
+const queryParams = ref({});
 // 表格
 const tableRef = ref<Record<string, any>>({});
-const table = reactive({
-    columns: [
-        {
-            title: '标识',
-            dataIndex: 'id',
-            key: 'id',
-        },
-        {
-            title: '名称',
-            dataIndex: 'name',
-            key: 'name',
-        },
-        {
-            title: '说明',
-            dataIndex: 'description',
-            key: 'description',
-        },
-        {
-            title: '操作',
-            dataIndex: 'action',
-            key: 'action',
-            scopedSlots: true,
-        },
-    ],
-    tableData: [],
+const table = {
     clickAdd: () => {
         addDialogRef.value.openDialog(true, {});
     },
@@ -137,13 +121,11 @@ const table = reactive({
             }
         });
     },
-    clickEdit: (row: any) => {
-        router.push(`/system/Role/detail/${row.id}`);
+    clickEdit: ({ id }: { id: string }) => {
+        jumpPage(`system/Role/Detail`, { id });
     },
-});
-nextTick(() => {
-    route.query.save && table.clickAdd();
-});
+};
+const dialogVisible = ref(isSave);
 </script>
 
 <style lang="less" scoped>

From c032832ea7c886c48ace0a3718e71d3dc99056df Mon Sep 17 00:00:00 2001
From: JiangQiming <291854119@qq.com>
Date: Mon, 6 Mar 2023 17:34:33 +0800
Subject: [PATCH 10/16] =?UTF-8?q?feat:=20=E8=A7=86=E9=A2=91=E4=B8=AD?=
 =?UTF-8?q?=E5=BF=83-=E5=9B=9E=E6=94=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/RadioCard/index.vue           |   3 +-
 src/views/media/Device/Playback/iconNode.vue |  10 +-
 src/views/media/Device/Playback/index.vue    | 160 ++++++++++++++++++-
 src/views/media/Device/Playback/timeLine.vue |   2 +
 4 files changed, 166 insertions(+), 9 deletions(-)

diff --git a/src/components/RadioCard/index.vue b/src/components/RadioCard/index.vue
index 676cc94e..eb07f433 100644
--- a/src/components/RadioCard/index.vue
+++ b/src/components/RadioCard/index.vue
@@ -26,7 +26,7 @@
             <div
                 :class="[
                     'checked-icon',
-                    disabled && myValue === item.value
+                    (disabled && myValue === item.value) || item.disabled
                         ? 'checked-icon-disabled'
                         : '',
                 ]"
@@ -45,6 +45,7 @@ interface IOption {
     label: string;
     value: string;
     logo: string;
+    disabled?: boolean;
 }
 
 type Emits = {
diff --git a/src/views/media/Device/Playback/iconNode.vue b/src/views/media/Device/Playback/iconNode.vue
index 501c7861..bf39f32b 100644
--- a/src/views/media/Device/Playback/iconNode.vue
+++ b/src/views/media/Device/Playback/iconNode.vue
@@ -19,11 +19,11 @@ interface Props {
 const props = defineProps<Props>();
 
 // type 为local时有效，0：未下载； 1：下载中：2：已下载
-// const status = ref(props.item?.isServer ? 2 : 0);
-const status = computed({
-    get: () => (props.item?.isServer ? 2 : 0),
-    set: (val: number) => {},
-});
+const status = ref(props.item?.isServer ? 2 : 0);
+// const status = computed({
+//     get: () => (props.item?.isServer ? 2 : 0),
+//     set: (val: number) => {},
+// });
 
 const getLocalIcon = (s: number) => {
     if (s === 0) {
diff --git a/src/views/media/Device/Playback/index.vue b/src/views/media/Device/Playback/index.vue
index 321a7127..cc225d39 100644
--- a/src/views/media/Device/Playback/index.vue
+++ b/src/views/media/Device/Playback/index.vue
@@ -3,7 +3,12 @@
     <page-container>
         <div class="playback-warp">
             <div class="playback-left">
-                <LivePlayer :src="url" />
+                <LivePlayer
+                    ref="player"
+                    :src="url"
+                    width="758px"
+                    height="462px"
+                />
                 <TimeLine
                     ref="playTimeNode"
                     :type="type"
@@ -17,9 +22,120 @@
             </div>
             <div class="playback-right">
                 <a-spin :spinning="loading">
-                    <a-tooltip title="">
-
+                    <a-tooltip placement="topLeft">
+                        <template #title>
+                            <div>云端：存储在服务器中</div>
+                            <div>本地：存储在设备本地</div>
+                        </template>
+                        <div>类型: <AIcon type="QuestionCircleOutlined" /></div>
                     </a-tooltip>
+                    <RadioCard
+                        layout="horizontal"
+                        :options="[
+                            {
+                                label: '云端',
+                                value: 'cloud',
+                                imgUrl: getImage('/media/cloud.png'),
+                            },
+                            {
+                                label: '本地',
+                                value: 'local',
+                                imgUrl: getImage('/local.png'),
+                                disabled: deviceType === 'fixed-media',
+                            },
+                        ]"
+                        :checkStyle="true"
+                        v-model="type"
+                    />
+                    <div class="playback-calendar">
+                        <a-calendar
+                            v-model:value="time"
+                            :fullscreen="false"
+                            :disabledDate="
+                                (currentDate) =>
+                                    currentDate > moment(new Date())
+                            "
+                            @panelChange="handlePanelChange"
+                        />
+                    </div>
+                    <div
+                        class="playback-list"
+                        :class="{ 'no-list': !historyList.length }"
+                    >
+                        <a-empty v-if="!historyList.length" />
+                        <a-list
+                            class="playback-list-items"
+                            itemLayout="horizontal"
+                            :dataSource="historyList"
+                        >
+                            <template #renderItem="{ item }">
+                                <a-list-item>
+                                    <template #actions>
+                                        <a-tooltip
+                                            key="play-btn"
+                                            :title="
+                                                (item.startTime ||
+                                                    item.mediaStartTime) ===
+                                                    playNowTime &&
+                                                playStatus === 1
+                                                    ? '暂停'
+                                                    : '播放'
+                                            "
+                                        >
+                                            <a @click="handlePlay">
+                                                <AIcon
+                                                    :type="
+                                                        (item.startTime ||
+                                                            item.mediaStartTime) ===
+                                                            playNowTime &&
+                                                        playStatus === 1
+                                                            ? 'PauseCircleOutlined'
+                                                            : 'PlayCircleOutlined'
+                                                    "
+                                                />
+                                            </a>
+                                        </a-tooltip>
+                                        <a-tooltip
+                                            key="download"
+                                            :title="
+                                                type !== 'local'
+                                                    ? '下载录像文件'
+                                                    : item.isServer
+                                                    ? '查看'
+                                                    : '下载到云端'
+                                            "
+                                        >
+                                            <IconNode
+                                                :type="type"
+                                                :item="item"
+                                                :on-cloud-view="cloudView"
+                                                :on-down-load="
+                                                    () => downloadClick(item)
+                                                "
+                                            />
+                                        </a-tooltip>
+                                    </template>
+
+                                    <div>
+                                        {{
+                                            moment(
+                                                item.startTime ||
+                                                    item.mediaStartTime,
+                                            ).format('HH:mm:ss')
+                                        }}
+                                        ~
+                                        {{
+                                            moment(
+                                                item.endTime ||
+                                                    item.mediaEndTime,
+                                            ).format('HH:mm:ss')
+                                        }}
+                                    </div>
+                                </a-list-item>
+                            </template>
+                            <div></div>
+                        </a-list>
+                    </div>
                 </a-spin>
             </div>
         </div>
@@ -34,6 +150,7 @@ import TimeLine from './timeLine.vue';
 import IconNode from './iconNode.vue';
 import type { recordsItemType } from './typings';
 import LivePlayer from '@/components/Player/index.vue';
+import { getImage } from '@/utils/comm';
 
 const route = useRoute();
 
@@ -196,6 +313,43 @@ const handleTimeLineChange = (times: any) => {
         url.value = '';
     }
 };
+
+watch(
+    () => type.value,
+    (val: string) => {
+        if (val === 'cloud') {
+            queryServiceRecords(time.value!);
+        } else {
+            queryLocalRecords(time.value!);
+        }
+    },
+);
+
+const handlePanelChange = (date: any) => {
+    // time.value = date;
+    if (type.value === 'cloud') {
+        queryServiceRecords(date);
+    } else {
+        queryLocalRecords(date);
+    }
+};
+
+// 播放暂停
+const handlePlay = (_startTime: any) => {
+    if (playStatus.value === 0 || _startTime !== playNowTime.value) {
+        if (playTimeNode.value) {
+            playTimeNode.value.playByStartTime(_startTime);
+        }
+    } else if (playStatus.value == 1 && _startTime === playNowTime.value) {
+        if (player.value.getVueInstance) {
+            // player.value.getVueInstance().pause();
+        }
+    } else if (playStatus.value == 2 && _startTime === playNowTime.value) {
+        if (player.value.getVueInstance) {
+            // player.value.getVueInstance().play();
+        }
+    }
+};
 </script>
 
 <style lang="less" scoped>
diff --git a/src/views/media/Device/Playback/timeLine.vue b/src/views/media/Device/Playback/timeLine.vue
index e77c014d..e57e3aa0 100644
--- a/src/views/media/Device/Playback/timeLine.vue
+++ b/src/views/media/Device/Playback/timeLine.vue
@@ -255,6 +255,8 @@ const handleProgress = (event: any, item: any) => {
         onChange(_start, item.endTime, item.deviceId, item.channelId);
     }
 };
+
+defineExpose({ playByStartTime });
 </script>
 
 <style lang="less" scoped>

From 4ce8a15b6ec0be64cac50c38f5552ef1196a5570 Mon Sep 17 00:00:00 2001
From: 100011797 <2642441182@qq.com>
Date: Mon, 6 Mar 2023 17:42:26 +0800
Subject: [PATCH 11/16] =?UTF-8?q?fix:=20=E8=AE=BE=E5=A4=87=E6=9B=BF?=
 =?UTF-8?q?=E6=8D=A2=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ValueItem/index.vue            |  25 +-
 .../Detail/Diagnose/Message/Dialog/index.vue  |  17 +-
 .../Diagnose/Message/Function/EditTable.vue   |   6 +-
 .../Diagnose/Message/Function/index.vue       |  90 +++---
 .../Detail/Diagnose/Message/Log/index.vue     | 107 +++++++-
 .../Detail/Diagnose/Message/index.vue         |  24 +-
 .../Diagnose/Status/DiagnosticAdvice.tsx      |  15 +-
 .../Diagnose/Status/ManualInspection.tsx      | 108 ++++----
 .../Instance/Detail/Diagnose/Status/index.tsx |  99 ++++++-
 .../device/Instance/Detail/Diagnose/index.vue |   6 +-
 .../Detail/Info/components/Config/Save.vue    |   4 +-
 .../Detail/Info/components/Config/index.vue   |   2 +-
 .../Detail/Info/components/Relation/Save.vue  |   2 +-
 .../Detail/Info/components/Tags/Save.vue      |   2 +-
 .../device/Instance/Detail/Log/index.vue      |   8 +-
 .../Instance/Detail/Running/Event/index.vue   |  43 ++-
 .../Detail/Running/Property/Detail/Charts.vue |  38 +--
 .../Running/Property/Detail/PropertyAMap.vue  |  12 +-
 .../Detail/Running/Property/Detail/Table.vue  |  33 ++-
 .../Running/Property/Detail/TimeComponent.vue |  16 +-
 .../Detail/Running/Property/Detail/index.vue  |  20 +-
 .../Detail/Running/Property/Indicators.vue    | 208 ++++++++------
 .../Detail/Running/Property/PropertyCard.vue  |  20 +-
 .../Instance/Detail/Running/Property/Save.vue |  19 +-
 .../Detail/Running/Property/ValueDetail.vue   |   6 +-
 .../Detail/Running/Property/ValueRender.vue   | 258 +++++++++++-------
 .../Detail/Running/Property/index.vue         |  80 ++----
 .../components/BindParentDevice/index.vue     | 175 ++++++++++++
 .../components/EditTable/PatchMapping.vue     |  34 +--
 .../Detail/components/EditTable/index.vue     |  68 ++---
 .../Instance/Detail/components/MSelect.vue    |   8 +-
 src/views/device/Instance/Detail/index.vue    |  26 +-
 src/views/device/Instance/Import/index.vue    |   2 +-
 src/views/device/Instance/Process/index.vue   |   8 +-
 src/views/device/Instance/Save/index.vue      |   2 +-
 src/views/device/Instance/index.vue           |  25 +-
 yarn.lock                                     |   4 +-
 37 files changed, 1061 insertions(+), 559 deletions(-)
 create mode 100644 src/views/device/Instance/Detail/components/BindParentDevice/index.vue

diff --git a/src/components/ValueItem/index.vue b/src/components/ValueItem/index.vue
index 3e7528ae..ecd0ac16 100644
--- a/src/components/ValueItem/index.vue
+++ b/src/components/ValueItem/index.vue
@@ -1,14 +1,14 @@
 <!-- 参数类型输入组件 -->
 <template>
     <div class="wrapper">
-        <a-select
+        <j-select
             v-if="typeMap.get(itemType) === 'select'"
             v-model:value="myValue"
             :options="options"
             allowClear
             style="width: 100%"
         />
-        <a-date-picker
+        <j-date-picker
             v-else-if="typeMap.get(itemType) === 'date'"
             v-model:value="myValue"
             allowClear
@@ -17,13 +17,13 @@
             format="YYYY-MM-DD HH:mm:ss"
             style="width: 100%"
         />
-        <a-input-number
+        <j-input-number
             v-else-if="typeMap.get(itemType) === 'inputNumber'"
             v-model:value="myValue"
             allowClear
             style="width: 100%"
         />
-        <a-input
+        <j-input
             allowClear
             v-else-if="typeMap.get(itemType) === 'object'"
             v-model:value="myValue"
@@ -31,19 +31,19 @@
             <template #addonAfter>
                 <form-outlined @click="modalVis = true" />
             </template>
-        </a-input>
+        </j-input>
         <GeoComponent
             v-else-if="typeMap.get(itemType) === 'geoPoint'"
             v-model:point="myValue"
         />
-        <a-input
+        <j-input
             v-else-if="typeMap.get(itemType) === 'file'"
             v-model:value="myValue"
             placeholder="请输入图片链接"
             allowClear
         >
             <template #addonAfter>
-                <a-upload
+                <j-upload
                     name="file"
                     :action="FILE_UPLOAD"
                     :headers="headers"
@@ -51,10 +51,10 @@
                     @change="handleFileChange"
                 >
                     <cloud-upload-outlined />
-                </a-upload>
+                </j-upload>
             </template>
-        </a-input>
-        <a-input
+        </j-input>
+        <j-input
             v-else
             allowClear
             type="text"
@@ -63,7 +63,7 @@
         />
 
         <!-- 代码编辑器弹窗 -->
-        <a-modal
+        <j-modal
             title="编辑"
             ok-text="确认"
             cancel-text="取消"
@@ -75,13 +75,12 @@
             <div style="width: 100%; height: 400px">
                 <MonacoEditor v-model:modelValue="objectValue" />
             </div>
-        </a-modal>
+        </j-modal>
     </div>
 </template>
 
 <script setup lang="ts">
 import { PropType } from 'vue';
-import { FormOutlined, CloudUploadOutlined } from '@ant-design/icons-vue';
 import { UploadChangeParam, UploadFile } from 'ant-design-vue';
 import { DefaultOptionType } from 'ant-design-vue/lib/select';
 import MonacoEditor from '@/components/MonacoEditor/index.vue';
diff --git a/src/views/device/Instance/Detail/Diagnose/Message/Dialog/index.vue b/src/views/device/Instance/Detail/Diagnose/Message/Dialog/index.vue
index 0cb6bd97..f3a85a85 100644
--- a/src/views/device/Instance/Detail/Diagnose/Message/Dialog/index.vue
+++ b/src/views/device/Instance/Detail/Diagnose/Message/Dialog/index.vue
@@ -16,7 +16,7 @@
                 <div class="dialog-box">
                     <div class="dialog-header">
                         <div class="dialog-title">
-                            <a-badge
+                            <j-badge
                                 :color="
                                     statusColor.get(
                                         item.error ? 'error' : 'success',
@@ -41,7 +41,7 @@
                         class="dialog-editor"
                         v-if="visible.includes(item.key)"
                     >
-                        <a-textarea autoSize :bordered="false" :value="item?.detail" />
+                        <j-textarea autoSize :bordered="false" :value="item?.detail" />
                     </div>
                 </div>
             </div>
@@ -50,8 +50,9 @@
 </template>
 
 <script lang="ts" setup>
-const operationMap = new Map();
 import moment from 'moment';
+
+const operationMap = new Map();
 operationMap.set('connection', '连接');
 operationMap.set('auth', '权限验证');
 operationMap.set('decode', '解码');
@@ -80,19 +81,9 @@ const getDetail = (item: any) => {
         visible.value.splice(index, 1);
     }
 };
-
-watchEffect(() => {
-  console.log(props.data)
-})
 </script>
 
 <style lang="less" scoped>
-// @import 'ant-design-vue/es/style/themes/default.less';
-
-// :root {
-//     --dialog-primary-color: @primary-color;
-// }
-
 .dialog-item {
     display: flex;
     justify-content: flex-start;
diff --git a/src/views/device/Instance/Detail/Diagnose/Message/Function/EditTable.vue b/src/views/device/Instance/Detail/Diagnose/Message/Function/EditTable.vue
index 5aa519c6..2a2f2d30 100644
--- a/src/views/device/Instance/Detail/Diagnose/Message/Function/EditTable.vue
+++ b/src/views/device/Instance/Detail/Diagnose/Message/Function/EditTable.vue
@@ -1,8 +1,8 @@
 <template>
-    <a-table
+    <j-table
         rowKey="id"
         :columns="columns"
-        :data-source="dataSource"
+        :datj-source="dataSource"
         bordered
         :pagination="false"
     >
@@ -36,7 +36,7 @@
                 </template>
             </div>
         </template>
-    </a-table>
+    </j-table>
 </template>
 
 <script lang="ts" setup>
diff --git a/src/views/device/Instance/Detail/Diagnose/Message/Function/index.vue b/src/views/device/Instance/Detail/Diagnose/Message/Function/index.vue
index bfddb73d..cfd71262 100644
--- a/src/views/device/Instance/Detail/Diagnose/Message/Function/index.vue
+++ b/src/views/device/Instance/Detail/Diagnose/Message/Function/index.vue
@@ -1,110 +1,110 @@
 <template>
     <div class="function">
-        <a-form :layout="'vertical'" ref="formRef" :model="modelRef">
-            <a-row :gutter="24">
-                <a-col :span="6">
-                    <a-form-item
+        <j-form :layout="'vertical'" ref="formRef" :model="modelRef">
+            <j-row :gutter="24">
+                <j-col :span="6">
+                    <j-form-item
                         name="type"
                         :rules="{
                             required: true,
                             message: '请选择',
                         }"
                     >
-                        <a-select
+                        <j-select
                             placeholder="请选择"
                             v-model:value="modelRef.type"
                             show-search
                             :filter-option="filterOption"
                         >
-                            <a-select-option value="READ_PROPERTY"
-                                >读取属性</a-select-option
+                            <j-select-option value="READ_PROPERTY"
+                                >读取属性</j-select-option
                             >
-                            <a-select-option value="WRITE_PROPERTY"
-                                >修改属性</a-select-option
+                            <j-select-option value="WRITE_PROPERTY"
+                                >修改属性</j-select-option
                             >
-                            <a-select-option value="INVOKE_FUNCTION"
-                                >调用功能</a-select-option
+                            <j-select-option value="INVOKE_FUNCTION"
+                                >调用功能</j-select-option
                             >
-                        </a-select>
-                    </a-form-item>
-                </a-col>
-                <a-col
+                        </j-select>
+                    </j-form-item>
+                </j-col>
+                <j-col
                     :span="6"
                     v-if="
                         ['READ_PROPERTY', 'WRITE_PROPERTY'].includes(
-                            modelRef.type,
+                            modelRef?.type || '',
                         )
                     "
                 >
-                    <a-form-item
+                    <j-form-item
                         name="properties"
                         :rules="{
                             required: true,
                             message: '请选择属性',
                         }"
                     >
-                        <a-select
+                        <j-select
                             placeholder="请选择属性"
                             v-model:value="modelRef.properties"
                             show-search
                             :filter-option="filterOption"
                         >
-                            <a-select-option
+                            <j-select-option
                                 v-for="i in metadata?.properties || []"
                                 :key="i.id"
                                 :value="i.id"
                                 :label="i.name"
-                                >{{ i.name }}</a-select-option
+                                >{{ i.name }}</j-select-option
                             >
-                        </a-select>
-                    </a-form-item>
-                </a-col>
-                <a-col :span="6" v-if="modelRef.type === 'WRITE_PROPERTY'">
-                    <a-form-item
+                        </j-select>
+                    </j-form-item>
+                </j-col>
+                <j-col :span="6" v-if="modelRef.type === 'WRITE_PROPERTY'">
+                    <j-form-item
                         name="propertyValue"
                         :rules="{
                             required: true,
                             message: '请输入值',
                         }"
                     >
-                        <a-input v-model:value="modelRef.propertyValue" />
-                    </a-form-item>
-                </a-col>
-                <a-col :span="6" v-if="modelRef.type === 'INVOKE_FUNCTION'">
-                    <a-form-item
+                        <j-input v-model:value="modelRef.propertyValue" />
+                    </j-form-item>
+                </j-col>
+                <j-col :span="6" v-if="modelRef.type === 'INVOKE_FUNCTION'">
+                    <j-form-item
                         name="function"
                         :rules="{
                             required: true,
                             message: '请选择功能',
                         }"
                     >
-                        <a-select
+                        <j-select
                             placeholder="请选择功能"
                             v-model:value="modelRef.function"
                             show-search
                             :filter-option="filterOption"
                             @change="funcChange"
                         >
-                            <a-select-option
+                            <j-select-option
                                 v-for="i in metadata?.functions || []"
                                 :key="i.id"
                                 :value="i.id"
                                 :label="i.name"
-                                >{{ i.name }}</a-select-option
+                                >{{ i.name }}</j-select-option
                             >
-                        </a-select>
-                    </a-form-item>
-                </a-col>
-                <a-col :span="4">
-                    <a-button type="primary" @click="saveBtn">发送</a-button>
-                </a-col>
-                <a-col
+                        </j-select>
+                    </j-form-item>
+                </j-col>
+                <j-col :span="4">
+                    <j-button type="primary" @click="saveBtn">发送</j-button>
+                </j-col>
+                <j-col
                     :span="24"
                     v-if="
                         modelRef.type === 'INVOKE_FUNCTION' && modelRef.function && modelRef.inputs.length
                     "
                 >
-                    <a-form-item
+                    <j-form-item
                         name="inputs"
                         label="参数列表"
                         :rules="{
@@ -113,10 +113,10 @@
                         }"
                     >
                         <EditTable v-model="modelRef.inputs" />
-                    </a-form-item>
-                </a-col>
-            </a-row>
-        </a-form>
+                    </j-form-item>
+                </j-col>
+            </j-row>
+        </j-form>
     </div>
 </template>
 
diff --git a/src/views/device/Instance/Detail/Diagnose/Message/Log/index.vue b/src/views/device/Instance/Detail/Diagnose/Message/Log/index.vue
index 81efb838..57fa0308 100644
--- a/src/views/device/Instance/Detail/Diagnose/Message/Log/index.vue
+++ b/src/views/device/Instance/Detail/Diagnose/Message/Log/index.vue
@@ -1,3 +1,106 @@
 <template>
-    log
-</template>
\ No newline at end of file
+    <div class="log-item" :key="data.id">
+        <div class="log-card">
+            <div class="log-icon" @click="visible = !visible">
+                <AIcon :type="visible ? 'DownOutlined' : 'RightOutlined'" />
+            </div>
+            <div class="log-box">
+                <div class="log-header">
+                    <div class="log-title">
+                        <j-tag color="error">ERROR</j-tag>
+                        {{ operationMap.get(data.operation) }}
+                    </div>
+                    <div class="log-time">
+                        {{ dayjs(data.endTime).format('YYYY-MM-DD HH:mm:ss') }}
+                    </div>
+                </div>
+                <div className="log-editor" v-if="visible">
+                    <j-textarea
+                        autoSize
+                        :bordered="false"
+                        :value="data?.detail"
+                    />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import dayjs from 'dayjs';
+
+const operationMap = new Map();
+operationMap.set('connection', '连接');
+operationMap.set('auth', '权限验证');
+operationMap.set('decode', '解码');
+operationMap.set('encode', '编码');
+operationMap.set('request', '请求');
+operationMap.set('response', '响应');
+operationMap.set('downstream', '下行消息');
+operationMap.set('upstream', '上行消息');
+
+const visible = ref<boolean>(false);
+
+const props = defineProps({
+    data: {
+        type: Object,
+        default: () => {},
+    },
+});
+</script>
+
+<style lang="less" scoped>
+.log-item {
+    display: flex;
+    justify-content: flex-start;
+    width: 100%;
+    padding-bottom: 12px;
+
+    .log-card {
+        display: flex;
+        width: 100%;
+        background-color: #fff;
+
+        .log-icon {
+            margin-right: 10px;
+            color: rgba(0, 0, 0, 0.75);
+            font-weight: 500;
+            font-size: 12px;
+        }
+
+        .log-box {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+
+            .log-header {
+                .log-title {
+                    color: rgba(0, 0, 0, 0.75);
+                    font-weight: 700;
+                    font-size: 14px;
+                }
+
+                .log-time {
+                    color: rgba(0, 0, 0, 0.65);
+                    font-size: 12px;
+                }
+            }
+
+            .log-editor {
+                width: 100%;
+                margin-top: 10px;
+                color: rgba(0, 0, 0, 0.75);
+
+                textarea {
+                    color: black !important;
+                    background-color: #fafafa !important;
+                }
+
+                textarea::-webkit-scrollbar {
+                    width: 5px !important;
+                }
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/device/Instance/Detail/Diagnose/Message/index.vue b/src/views/device/Instance/Detail/Diagnose/Message/index.vue
index bac6d51c..f5bed24d 100644
--- a/src/views/device/Instance/Detail/Diagnose/Message/index.vue
+++ b/src/views/device/Instance/Detail/Diagnose/Message/index.vue
@@ -1,20 +1,20 @@
 <template>
-    <a-row :gutter="24">
-        <a-col :span="16">
-            <a-row :gutter="24" style="margin-bottom: 20px">
-                <a-col :span="12" v-for="item in messageArr" :key="item">
+    <j-row :gutter="24">
+        <j-col :span="16">
+            <j-row :gutter="24" style="margin-bottom: 20px">
+                <j-col :span="12" v-for="item in messageArr" :key="item">
                     <div
                         :style="messageStyleMap.get(item.status)"
                         class="message-status"
                     >
-                        <a-badge
+                        <j-badge
                             :status="messageStatusMap.get(item.status)"
                             style="margin-right: 5px"
                         />
                         <span>{{ item.text }}</span>
                     </div>
-                </a-col>
-            </a-row>
+                </j-col>
+            </j-row>
             <div>
                 <TitleComponent data="调试" />
                 <div class="content">
@@ -26,8 +26,8 @@
                 </div>
                 <div><Function /></div>
             </div>
-        </a-col>
-        <a-col :span="8">
+        </j-col>
+        <j-col :span="8">
             <div class="right-log">
                 <TitleComponent data="日志" />
                 <div :style="{ marginTop: '10px' }">
@@ -38,11 +38,11 @@
                             :key="item.key"
                         />
                     </template>
-                    <a-empty v-else />
+                    <j-empty v-else />
                 </div>
             </div>
-        </a-col>
-    </a-row>
+        </j-col>
+    </j-row>
 </template>
 
 <script lang="ts" setup>
diff --git a/src/views/device/Instance/Detail/Diagnose/Status/DiagnosticAdvice.tsx b/src/views/device/Instance/Detail/Diagnose/Status/DiagnosticAdvice.tsx
index acb456ff..8cbb1d45 100644
--- a/src/views/device/Instance/Detail/Diagnose/Status/DiagnosticAdvice.tsx
+++ b/src/views/device/Instance/Detail/Diagnose/Status/DiagnosticAdvice.tsx
@@ -1,7 +1,6 @@
-import { Badge, Descriptions, Modal, Tooltip } from "ant-design-vue"
+import { Badge, Descriptions, Modal, Tooltip, AIcon, DescriptionsItem } from "jetlinks-ui-components"
 import TitleComponent from '@/components/TitleComponent/index.vue'
 import styles from './index.module.less'
-import AIcon from "@/components/AIcon";
 import _ from "lodash";
 
 const DiagnosticAdvice = defineComponent({
@@ -42,11 +41,11 @@ const DiagnosticAdvice = defineComponent({
             <div style={{ marginTop: 15 }}>
                 <TitleComponent data="连接信息" />
                 <Descriptions column={2}>
-                    <Descriptions.Item span={1} label="设备ID">
+                    <DescriptionsItem span={1} label="设备ID">
                         {data?.info?.id || ''}
-                    </Descriptions.Item>
+                    </DescriptionsItem>
                     {data?.info?.address?.length > 0 && (
-                        <Descriptions.Item span={1} label="连接地址">
+                        <DescriptionsItem span={1} label="连接地址">
                             <Tooltip
                                 placement="topLeft"
                                 title={
@@ -69,11 +68,11 @@ const DiagnosticAdvice = defineComponent({
                                     ))}
                                 </div>
                             </Tooltip>
-                        </Descriptions.Item>
+                        </DescriptionsItem>
                     )}
 
                     {(_.flatten(_.map(data?.info?.config, 'properties')) || []).map((item: any, index: number) => (
-                        <Descriptions.Item
+                        <DescriptionsItem
                             key={index}
                             span={1}
                             label={
@@ -90,7 +89,7 @@ const DiagnosticAdvice = defineComponent({
                             }
                         >
                             {data?.info?.configValue[item?.property] || ''}
-                        </Descriptions.Item>
+                        </DescriptionsItem>
                     ))}
                 </Descriptions>
             </div>
diff --git a/src/views/device/Instance/Detail/Diagnose/Status/ManualInspection.tsx b/src/views/device/Instance/Detail/Diagnose/Status/ManualInspection.tsx
index 6bec31e0..06a8bf29 100644
--- a/src/views/device/Instance/Detail/Diagnose/Status/ManualInspection.tsx
+++ b/src/views/device/Instance/Detail/Diagnose/Status/ManualInspection.tsx
@@ -1,7 +1,6 @@
-import AIcon from "@/components/AIcon";
 import { useInstanceStore } from "@/store/instance";
 import { useMenuStore } from "@/store/menu";
-import { Button, Descriptions, Modal } from "ant-design-vue"
+import { AIcon, Button, Modal, Descriptions, DescriptionsItem, Space } from "jetlinks-ui-components"
 import styles from './index.module.less'
 
 const ManualInspection = defineComponent({
@@ -39,12 +38,12 @@ const ManualInspection = defineComponent({
                             <div style={{ marginTop: '10px' }}>
                                 <Descriptions title={data?.data?.name} layout="vertical" bordered>
                                     {(data?.data?.properties || []).map((item: any) => (
-                                        <Descriptions.Item
+                                        <DescriptionsItem
                                             key={item.property}
                                             label={`${item.name}${item?.description ? `(${item.description})` : ''}`}
                                         >
                                             {data?.configuration[item.property] || ''}
-                                        </Descriptions.Item>
+                                        </DescriptionsItem>
                                     ))}
                                 </Descriptions>
                             </div>
@@ -80,30 +79,30 @@ const ManualInspection = defineComponent({
                                 <Descriptions title={data?.data?.name} layout="vertical" bordered>
                                     {data.configuration?.provider === 'OneNet' ? (
                                         <>
-                                            <Descriptions.Item label={'接口地址'}>
+                                            <DescriptionsItem label={'接口地址'}>
                                                 {data?.configuration?.configuration?.apiAddress || ''}
-                                            </Descriptions.Item>
-                                            <Descriptions.Item label={'apiKey'}>
+                                            </DescriptionsItem>
+                                            <DescriptionsItem label={'apiKey'}>
                                                 {data?.configuration?.configuration?.apiKey || ''}
-                                            </Descriptions.Item>
-                                            <Descriptions.Item label={'通知Token'}>
+                                            </DescriptionsItem>
+                                            <DescriptionsItem label={'通知Token'}>
                                                 {data?.configuration?.configuration?.validateToken || ''}
-                                            </Descriptions.Item>
-                                            <Descriptions.Item label={'aesKey'}>
+                                            </DescriptionsItem>
+                                            <DescriptionsItem label={'aesKey'}>
                                                 {data?.configuration?.configuration?.aesKey || ''}
-                                            </Descriptions.Item>
+                                            </DescriptionsItem>
                                         </>
                                     ) : (
                                         <>
-                                            <Descriptions.Item label={'接口地址'}>
+                                            <DescriptionsItem label={'接口地址'}>
                                                 {data?.configuration?.configuration?.apiAddress || ''}
-                                            </Descriptions.Item>
-                                            <Descriptions.Item label={'appKey'}>
+                                            </DescriptionsItem>
+                                            <DescriptionsItem label={'appKey'}>
                                                 {data?.configuration?.configuration?.appKey || ''}
-                                            </Descriptions.Item>
-                                            <Descriptions.Item label={'appSecret'}>
+                                            </DescriptionsItem>
+                                            <DescriptionsItem label={'appSecret'}>
                                                 {data?.configuration?.configuration?.appSecret || ''}
-                                            </Descriptions.Item>
+                                            </DescriptionsItem>
                                         </>
                                     )}
                                 </Descriptions>
@@ -140,45 +139,45 @@ const ManualInspection = defineComponent({
                                 <Descriptions title={data?.data?.name} layout="vertical" bordered>
                                     {data?.configuration?.configuration?.shareCluster ? (
                                         <>
-                                            <Descriptions.Item label={'SIP 域'}>
+                                            <DescriptionsItem label={'SIP 域'}>
                                                 {data?.configuration?.configuration?.domain || ''}
-                                            </Descriptions.Item>
-                                            <Descriptions.Item label={'SIP ID'}>
+                                            </DescriptionsItem>
+                                            <DescriptionsItem label={'SIP ID'}>
                                                 {data?.configuration?.configuration?.sipId || ''}
-                                            </Descriptions.Item>
-                                            <Descriptions.Item label={'集群'}>
+                                            </DescriptionsItem>
+                                            <DescriptionsItem label={'集群'}>
                                                 {data?.configuration?.configuration?.shareCluster ? '共享配置' : '独立配置'}
-                                            </Descriptions.Item>
-                                            <Descriptions.Item label={'SIP 地址'}>
+                                            </DescriptionsItem>
+                                            <DescriptionsItem label={'SIP 地址'}>
                                                 {`${data?.configuration?.configuration?.hostPort?.host}:${data?.configuration?.configuration?.hostPort?.port}`}
-                                            </Descriptions.Item>
-                                            <Descriptions.Item label={'公网 Host'}>
+                                            </DescriptionsItem>
+                                            <DescriptionsItem label={'公网 Host'}>
                                                 {`${data?.configuration?.configuration?.hostPort?.publicHost}:${data?.configuration?.configuration?.hostPort?.publicPort}`}
-                                            </Descriptions.Item>
+                                            </DescriptionsItem>
                                         </>
                                     ) : (
                                         <>
-                                            <Descriptions.Item label={'SIP 域'}>
+                                            <DescriptionsItem label={'SIP 域'}>
                                                 {data?.configuration?.configuration?.domain || ''}
-                                            </Descriptions.Item>
-                                            <Descriptions.Item label={'SIP ID'}>
+                                            </DescriptionsItem>
+                                            <DescriptionsItem label={'SIP ID'}>
                                                 {data?.configuration?.configuration?.sipId || ''}
-                                            </Descriptions.Item>
-                                            <Descriptions.Item label={'集群'}>
+                                            </DescriptionsItem>
+                                            <DescriptionsItem label={'集群'}>
                                                 {data?.configuration?.configuration?.shareCluster ? '共享配置' : '独立配置'}
-                                            </Descriptions.Item>
+                                            </DescriptionsItem>
                                             {data?.configuration?.configuration?.cluster.map((i: any, it: number) => (
                                                 <div key={it}>
                                                     <div>节点{it + 1}</div>
-                                                    <Descriptions.Item label={'节点名称'}>
+                                                    <DescriptionsItem label={'节点名称'}>
                                                         {i?.clusterNodeId || ''}
-                                                    </Descriptions.Item>
-                                                    <Descriptions.Item label={'SIP 地址'}>
+                                                    </DescriptionsItem>
+                                                    <DescriptionsItem label={'SIP 地址'}>
                                                         {`${i.host}:${i?.port}`}
-                                                    </Descriptions.Item>
-                                                    <Descriptions.Item label={'公网 Host'}>
+                                                    </DescriptionsItem>
+                                                    <DescriptionsItem label={'公网 Host'}>
                                                         {`${i?.publicHost}:${i?.publicPort}`}
-                                                    </Descriptions.Item>
+                                                    </DescriptionsItem>
                                                 </div>
                                             ))}
                                         </>
@@ -207,20 +206,29 @@ const ManualInspection = defineComponent({
             title="人工检查"
             visible
             width={1000}
-            cancelText="去修改"
-            okText="确认无误"
             onOk={() => {
                 emit('save', data)
             }}
             onCancel={() => {
-                if (data.type === 'device') {
-                    instanceStore.tabActiveKey = 'Info'
-                } else if (data.type === 'product') {
-                    menuStory.jumpPage('device/Product/Detail', { id: data.productId, tab: 'access' });
-                } else {
-                    menuStory.jumpPage('link/AccessConfig/Detail', { id: data.configuration?.id });
-                }
-            }}>
+                emit('close')
+            }}
+            v-slots={{
+                footer: <Space>
+                    <Button onClick={() => {
+                        if (data.type === 'device') {
+                            instanceStore.tabActiveKey = 'Info'
+                        } else if (data.type === 'product') {
+                            menuStory.jumpPage('device/Product/Detail', { id: data.productId, tab: 'access' });
+                        } else {
+                            menuStory.jumpPage('link/AccessConfig/Detail', { id: data.configuration?.id });
+                        }
+                    }}>去修改</Button>
+                    <Button onClick={() => {
+                        emit('save', data)
+                    }}>确认无误</Button>
+                </Space>
+            }}
+        >
             <div style={{ display: 'flex' }}>{dataRender()}</div>
         </Modal>
     }
diff --git a/src/views/device/Instance/Detail/Diagnose/Status/index.tsx b/src/views/device/Instance/Detail/Diagnose/Status/index.tsx
index 3dbc27d2..514b5fd5 100644
--- a/src/views/device/Instance/Detail/Diagnose/Status/index.tsx
+++ b/src/views/device/Instance/Detail/Diagnose/Status/index.tsx
@@ -1,4 +1,4 @@
-import { Badge, Button, message, Popconfirm, Space } from "ant-design-vue"
+import { Badge, Button, message, Popconfirm, Space } from "jetlinks-ui-components"
 import TitleComponent from '@/components/TitleComponent/index.vue'
 import styles from './index.module.less'
 import type { ListProps } from './util'
@@ -13,6 +13,7 @@ import ManualInspection from './ManualInspection'
 import { deployDevice } from "@/api/initHome"
 import PermissionButton from '@/components/PermissionButton/index.vue'
 import { useMenuStore } from "@/store/menu"
+import BindParentDevice from '../../components/BindParentDevice/index.vue'
 
 type TypeProps = 'network' | 'child-device' | 'media' | 'cloud' | 'channel'
 
@@ -1691,6 +1692,102 @@ const Status = defineComponent({
                     }}
                 />
             )}
+            {
+                bindParentVisible && (
+                    <BindParentDevice
+                        data={device.value}
+                        onCancel={() => {
+                            bindParentVisible.value = false
+                        }}
+                        onOk={async (parentId: string) => {
+                            let item: ListProps | undefined = undefined;
+                            const response = await detail(parentId);
+                            if (response.status === 200) {
+                                if (response?.result?.state?.value === 'notActive') {
+                                    item = {
+                                        key: 'parent-device',
+                                        name: '网关父设备',
+                                        desc: '诊断网关父设备状态是否正常，禁用或离线将导致连接失败',
+                                        status: 'error',
+                                        text: '异常',
+                                        info: (
+                                            <div>
+                                                <div class={styles.infoItem}>
+                                                    <Badge
+                                                        status="default"
+                                                        text={
+                                                            <span>
+                                                                网关父设备已禁用，请先
+                                                                <PermissionButton
+                                                                    hasPermission="device/Product:action"
+                                                                    popConfirm={{
+                                                                        title: '确认启用',
+                                                                        onConfirm: async () => {
+                                                                            const resp = await _deploy(response?.result?.id || '');
+                                                                            if (resp.status === 200) {
+                                                                                message.success('操作成功！');
+                                                                                list.value = modifyArrayList(
+                                                                                    list.value,
+                                                                                    {
+                                                                                        key: 'parent-device',
+                                                                                        name: '网关父设备',
+                                                                                        desc: '诊断网关父设备状态是否正常，禁用或离线将导致连接失败',
+                                                                                        status: 'success',
+                                                                                        text: '正常',
+                                                                                        info: null,
+                                                                                    },
+                                                                                );
+                                                                            }
+                                                                        }
+                                                                    }}
+                                                                >
+                                                                    启用
+                                                                </PermissionButton>
+                                                            </span>
+                                                        }
+                                                    />
+                                                </div>
+                                            </div>
+                                        ),
+                                    };
+                                } else if (response?.state?.value === 'online') {
+                                    item = {
+                                        key: 'parent-device',
+                                        name: '网关父设备',
+                                        desc: '诊断网关父设备状态是否正常，禁用或离线将导致连接失败',
+                                        status: 'success',
+                                        text: '正常',
+                                        info: null,
+                                    };
+                                } else {
+                                    item = {
+                                        key: 'parent-device',
+                                        name: '网关父设备',
+                                        desc: '诊断网关父设备状态是否正常，禁用或离线将导致连接失败',
+                                        status: 'error',
+                                        text: '异常',
+                                        info: (
+                                            <div>
+                                                <div class={styles.infoItem}>
+                                                    <Badge
+                                                        status="default"
+                                                        text={<span>网关父设备已离线，请先排查网关设备故障</span>}
+                                                    />
+                                                </div>
+                                            </div>
+                                        ),
+                                    };
+                                }
+                                if (item) {
+                                    list.value = modifyArrayList(unref(list), item);
+                                }
+                                instanceStore.current.parentId = parentId;
+                                bindParentVisible.value = false
+                            }
+                        }}
+                    />
+                )
+            }
         </div>
     },
 })
diff --git a/src/views/device/Instance/Detail/Diagnose/index.vue b/src/views/device/Instance/Detail/Diagnose/index.vue
index cf3e9aec..96b791fc 100644
--- a/src/views/device/Instance/Detail/Diagnose/index.vue
+++ b/src/views/device/Instance/Detail/Diagnose/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <a-card>
+    <j-card>
         <div class="diagnose">
             <div class="diagnose-header" :style="{background: headerColorMap.get(topState)}">
                 <div class="diagnose-top">
@@ -19,7 +19,7 @@
                     </div>
                 </div>
                 <div class="diagnose-progress">
-                    <a-progress
+                    <j-progress
                         :percent="percent"
                         :showInfo="false"
                         size="small"
@@ -38,7 +38,7 @@
                 <Status v-show="activeKey !== 'message'" :providerType="providerType" @countChange="countChange" @percentChange="percentChange" @stateChange="stateChange" />
             </div>
         </div>
-    </a-card>
+    </j-card>
 </template>
 
 <script lang="ts" setup>
diff --git a/src/views/device/Instance/Detail/Info/components/Config/Save.vue b/src/views/device/Instance/Detail/Info/components/Config/Save.vue
index 74cb27d0..c318ec66 100644
--- a/src/views/device/Instance/Detail/Info/components/Config/Save.vue
+++ b/src/views/device/Instance/Detail/Info/components/Config/Save.vue
@@ -19,7 +19,7 @@
             </div>
         </template>
         <j-form layout="vertical" ref="formRef" :model="modelRef">
-            <template v-for="(item, index) in props.config" :key="index">
+            <template v-for="(item, index) in (props.config || [])" :key="index">
                 <j-form-item
                     :name="item.property"
                     v-for="i in item.properties"
@@ -54,7 +54,7 @@
 <script lang="ts" setup>
 import { modify } from '@/api/device/instance';
 import { useInstanceStore } from '@/store/instance';
-import { message } from 'ant-design-vue';
+import { message } from 'jetlinks-ui-components';
 
 const emit = defineEmits(['close', 'save']);
 
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 c72961f5..502b8c73 100644
--- a/src/views/device/Instance/Detail/Info/components/Config/index.vue
+++ b/src/views/device/Instance/Detail/Info/components/Config/index.vue
@@ -97,7 +97,7 @@ import {
     _deploy,
     configurationReset,
 } from '@/api/device/instance';
-import { message } from 'ant-design-vue';
+import { message } from 'jetlinks-ui-components';
 import Save from './Save.vue';
 
 const instanceStore = useInstanceStore();
diff --git a/src/views/device/Instance/Detail/Info/components/Relation/Save.vue b/src/views/device/Instance/Detail/Info/components/Relation/Save.vue
index b441e29c..12860749 100644
--- a/src/views/device/Instance/Detail/Info/components/Relation/Save.vue
+++ b/src/views/device/Instance/Detail/Info/components/Relation/Save.vue
@@ -46,7 +46,7 @@
 <script lang="ts" setup>
 import { queryUserListNoPaging, saveRelations } from '@/api/device/instance';
 import { useInstanceStore } from '@/store/instance';
-import { message } from 'ant-design-vue';
+import { message } from 'jetlinks-ui-components';
 
 const emit = defineEmits(['close', 'save']);
 
diff --git a/src/views/device/Instance/Detail/Info/components/Tags/Save.vue b/src/views/device/Instance/Detail/Info/components/Tags/Save.vue
index aba9f7ee..68011ce4 100644
--- a/src/views/device/Instance/Detail/Info/components/Tags/Save.vue
+++ b/src/views/device/Instance/Detail/Info/components/Tags/Save.vue
@@ -49,7 +49,7 @@
 
 <script lang="ts" setup>
 import { useInstanceStore } from '@/store/instance';
-import { message } from 'ant-design-vue';
+import { message } from 'jetlinks-ui-components';
 import _ from 'lodash';
 import { saveTags, delTags } from '@/api/device/instance'
 
diff --git a/src/views/device/Instance/Detail/Log/index.vue b/src/views/device/Instance/Detail/Log/index.vue
index 42deecb6..678f846d 100644
--- a/src/views/device/Instance/Detail/Log/index.vue
+++ b/src/views/device/Instance/Detail/Log/index.vue
@@ -1,9 +1,11 @@
 <template>
     <j-card>
-        <Search
+        <j-advanced-search
             :columns="columns"
             target="device-instance-log"
             @search="handleSearch"
+            type="simple"
+            class="search"
         />
         <JProTable
             ref="instanceRefLog"
@@ -12,6 +14,7 @@
             model="TABLE"
             :defaultParams="{ sorts: [{ name: 'timestamp', order: 'desc' }] }"
             :params="params"
+            :bodyStyle="{ padding: 0 }"
         >
             <template #type="slotProps">
                 {{ slotProps?.type?.text }}
@@ -150,4 +153,7 @@ const handleSearch = (_params: any) => {
 </script>
 
 <style lang="less" scoped>
+.search {
+    padding: 0;
+}
 </style>
\ 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
index a9e169ad..3059d3bf 100644
--- a/src/views/device/Instance/Detail/Running/Event/index.vue
+++ b/src/views/device/Instance/Detail/Running/Event/index.vue
@@ -1,28 +1,30 @@
 <template>
-    <Search :columns="columns" target="device-instance-running-events" />
-    <JTable
+    <j-advanced-search class="search" type="simple" :columns="columns" target="device-instance-running-events" @search="handleSearch" />
+    <JProTable
         ref="eventsRef"
         :columns="columns"
         :request="_getEventList"
         model="TABLE"
-        :bodyStyle="{ padding: '0 24px' }"
+        :params="params"
+        :bodyStyle="{ padding: '0 0 0 24px' }"
     >
         <template #timestamp="slotProps">
-            {{ moment(slotProps.timestamp).format('YYYY-MM-DD HH:mm:ss') }}
+            {{ dayjs(slotProps.timestamp).format('YYYY-MM-DD HH:mm:ss') }}
         </template>
         <template #action="slotProps">
-            <a-button type="link" @click="detail(slotProps)">
+            <j-button type="link" @click="detail(slotProps)">
                 <AIcon type="SearchOutlined" />
-            </a-button>
+            </j-button>
         </template>
-    </JTable>
+    </JProTable>
 </template>
 
 <script lang="ts" setup>
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { getEventList } from '@/api/device/instance';
 import { useInstanceStore } from '@/store/instance';
-import { Modal } from 'ant-design-vue';
+import { Modal } from 'jetlinks-ui-components';
+import JsonViewer from 'vue-json-viewer';
 
 const events = defineProps({
     data: {
@@ -51,11 +53,11 @@ const columns = ref<Record<string, any>>([
 ]);
 const params = ref<Record<string, any>>({});
 
-const _getEventList = () =>
+const _getEventList = (_params: any) =>
     getEventList(
         instanceStore.current.id || '',
         events.data.id || '',
-        params.value,
+        _params
     );
 
 watchEffect(() => {
@@ -78,12 +80,25 @@ watchEffect(() => {
     }
 });
 
-const detail = () => {
+const handleSearch = (_params: any) => {
+    params.value = _params;
+};
+
+const detail = (_info: any) => {
     Modal.info({
         title: () => '详情',
         width: 850,
-        content: () => h('div', {}, [h('p', '暂未开发')]),
+        content: () => h('JsonViewer', {
+            'expand-depth': 5,
+            value: _info
+        }),
         okText: '关闭',
     });
 };
-</script>
\ No newline at end of file
+</script>
+
+<style lang="less" scoped>
+.search {
+    padding: 0 0 0 24px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/device/Instance/Detail/Running/Property/Detail/Charts.vue b/src/views/device/Instance/Detail/Running/Property/Detail/Charts.vue
index 57c25647..6b7f6571 100644
--- a/src/views/device/Instance/Detail/Running/Property/Detail/Charts.vue
+++ b/src/views/device/Instance/Detail/Running/Property/Detail/Charts.vue
@@ -1,36 +1,36 @@
 <template>
-    <a-spin :spinning="loading">
+    <j-spin :spinning="loading">
         <div>
-            <a-space>
+            <j-space>
                 <div>
                     统计周期：
-                    <a-select v-model:value="cycle" style="width: 120px">
-                        <a-select-option value="*" v-if="_type"
-                            >实际值</a-select-option
+                    <j-select v-model:value="cycle" style="width: 120px">
+                        <j-select-option value="*" v-if="_type"
+                            >实际值</j-select-option
                         >
-                        <a-select-option value="1m">按分钟统计</a-select-option>
-                        <a-select-option value="1h">按小时统计</a-select-option>
-                        <a-select-option value="1d">按天统计</a-select-option>
-                        <a-select-option value="1w">按周统计</a-select-option>
-                        <a-select-option value="1M">按月统计</a-select-option>
-                    </a-select>
+                        <j-select-option value="1m">按分钟统计</j-select-option>
+                        <j-select-option value="1h">按小时统计</j-select-option>
+                        <j-select-option value="1d">按天统计</j-select-option>
+                        <j-select-option value="1w">按周统计</j-select-option>
+                        <j-select-option value="1M">按月统计</j-select-option>
+                    </j-select>
                 </div>
                 <div v-if="cycle !== '*' && _type">
                     统计规则：
-                    <a-select v-model:value="agg" style="width: 120px">
-                        <a-select-option value="AVG">平均值</a-select-option>
-                        <a-select-option value="MAX">最大值</a-select-option>
-                        <a-select-option value="MIN">最小值</a-select-option>
-                        <a-select-option value="COUNT">总数</a-select-option>
-                    </a-select>
+                    <j-select v-model:value="agg" style="width: 120px">
+                        <j-select-option value="AVG">平均值</j-select-option>
+                        <j-select-option value="MAX">最大值</j-select-option>
+                        <j-select-option value="MIN">最小值</j-select-option>
+                        <j-select-option value="COUNT">总数</j-select-option>
+                    </j-select>
                 </div>
-            </a-space>
+            </j-space>
         </div>
         <div style="width: 100%; height: 500px">
             <Chart :options="options" v-if="chartsList.length" />
             <JEmpty v-else />
         </div>
-    </a-spin>
+    </j-spin>
 </template>
 
 <script lang="ts" setup>
diff --git a/src/views/device/Instance/Detail/Running/Property/Detail/PropertyAMap.vue b/src/views/device/Instance/Detail/Running/Property/Detail/PropertyAMap.vue
index e6380a17..265df71f 100644
--- a/src/views/device/Instance/Detail/Running/Property/Detail/PropertyAMap.vue
+++ b/src/views/device/Instance/Detail/Running/Property/Detail/PropertyAMap.vue
@@ -1,17 +1,17 @@
 <template>
-    <a-spin :spinning="loading">
+    <j-spin :spinning="loading">
         <div style="position: relative">
             <div style="position: absolute; right: 0; top: 5px; z-index: 999">
-                <a-space>
-                    <a-button type="primary" @click="onStart">开始动画</a-button>
-                    <a-button type="primary" @click="onStop">停止动画</a-button>
-                </a-space>
+                <j-space>
+                    <j-button type="primary" @click="onStart">开始动画</j-button>
+                    <j-button type="primary" @click="onStop">停止动画</j-button>
+                </j-space>
             </div>
         </div>
         <AMapComponent style="height: 500px">
             <PathSimplifier :pathData="geoList" ref="amapPath"></PathSimplifier>
         </AMapComponent>
-    </a-spin>
+    </j-spin>
 </template>
 
 <script lang="ts" setup>
diff --git a/src/views/device/Instance/Detail/Running/Property/Detail/Table.vue b/src/views/device/Instance/Detail/Running/Property/Detail/Table.vue
index 83bba809..bd831b5e 100644
--- a/src/views/device/Instance/Detail/Running/Property/Detail/Table.vue
+++ b/src/views/device/Instance/Detail/Running/Property/Detail/Table.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <a-table
+        <j-table
             :columns="columns"
             size="small"
             rowKey="id"
@@ -11,7 +11,7 @@
                 pageSize: dataSource?.pageSize || 10,
                 showSizeChanger: true,
                 total: dataSource?.total || 0,
-                pageSizeOptions: [5, 10, 20, 50],
+                pageSizeOptions: ['8', '12', '24', '60', '100']
             }"
         >
             <template #bodyCell="{ column, record }">
@@ -26,8 +26,8 @@
                     />
                 </template>
                 <template v-else-if="column.key === 'action'">
-                    <a-space>
-                        <a-button
+                    <j-space>
+                        <j-button
                             v-if="
                                 showLoad ||
                                 (!getType(record?.value) &&
@@ -36,16 +36,16 @@
                             type="link"
                             @click="_download(record)"
                             ><AIcon type="DownloadOutlined"
-                        /></a-button>
-                        <a-button type="link" @click="showDetail(record)"
+                        /></j-button>
+                        <j-button type="link" @click="showDetail(record)"
                             ><AIcon type="SearchOutlined"
-                        /></a-button>
-                    </a-space>
+                        /></j-button>
+                    </j-space>
                 </template>
             </template>
-        </a-table>
+        </j-table>
     </div>
-    <a-modal
+    <j-modal
         title="详情"
         :visible="visible"
         @ok="visible = false"
@@ -60,13 +60,13 @@
             :expand-depth="5"
             :value="current.formatValue"
         />
-        <a-textarea
+        <j-textarea
             v-else-if="data?.valueType?.type === 'file'"
             :value="current.formatValue"
             :row="3"
         />
-        <a-input v-else disabled :value="current.formatValue" />
-    </a-modal>
+        <j-input v-else disabled :value="current.formatValue" />
+    </j-modal>
 </template>
 
 <script lang="ts" setup>
@@ -90,7 +90,12 @@ const _props = defineProps({
 });
 
 const instanceStore = useInstanceStore();
-const dataSource = ref({});
+const dataSource = ref({
+    pageIndex: 0,
+    pageSize: 10,
+    data: [],
+    total: 0
+});
 const current = ref<any>({});
 const visible = ref<boolean>(false);
 
diff --git a/src/views/device/Instance/Detail/Running/Property/Detail/TimeComponent.vue b/src/views/device/Instance/Detail/Running/Property/Detail/TimeComponent.vue
index 3528433f..e5d3870f 100644
--- a/src/views/device/Instance/Detail/Running/Property/Detail/TimeComponent.vue
+++ b/src/views/device/Instance/Detail/Running/Property/Detail/TimeComponent.vue
@@ -1,22 +1,22 @@
 <template>
-    <a-space>
-        <a-radio-group
+    <j-space>
+        <j-radio-group
             :value="radioValue"
             button-style="solid"
             @change="onRadioChange"
         >
-            <a-radio-button value="today">今日</a-radio-button>
-            <a-radio-button value="week">近一周</a-radio-button>
-            <a-radio-button value="month">近一月</a-radio-button>
-        </a-radio-group>
-        <a-range-picker
+            <j-radio-button value="today">今日</j-radio-button>
+            <j-radio-button value="week">近一周</j-radio-button>
+            <j-radio-button value="month">近一月</j-radio-button>
+        </j-radio-group>
+        <j-range-picker
             show-time
             v-model:value="dateValue"
             :placeholder="['开始时间', '结束时间']"
             @change="onRangeChange"
             :allowClear="false"
         />
-    </a-space>
+    </j-space>
 </template>
 
 <script lang="ts" setup>
diff --git a/src/views/device/Instance/Detail/Running/Property/Detail/index.vue b/src/views/device/Instance/Detail/Running/Property/Detail/index.vue
index 39d3d376..aff79dd5 100644
--- a/src/views/device/Instance/Detail/Running/Property/Detail/index.vue
+++ b/src/views/device/Instance/Detail/Running/Property/Detail/index.vue
@@ -1,20 +1,20 @@
 <template>
-    <a-modal title="详情" visible width="50vw" @ok="onCancel" @cancel="onCancel">
+    <j-modal title="详情" visible width="50vw" @ok="onCancel" @cancel="onCancel">
         <div style="margin-bottom: 10px"><TimeComponent v-model="dateValue" /></div>
         <div>
-            <a-tabs :destroyInactiveTabPane="true" v-model:activeKey="activeKey" style="max-height: 600px; overflow-y: auto">
-                <a-tab-pane key="table" tab="列表">
+            <j-tabs :destroyInactiveTabPane="true" v-model:activeKey="activeKey" style="max-height: 600px; overflow-y: auto">
+                <j-tab-pane key="table" tab="列表">
                     <Table :data="props.data" :time="_getTimes" />
-                </a-tab-pane>
-                <a-tab-pane key="charts" tab="图表">
+                </j-tab-pane>
+                <j-tab-pane key="charts" tab="图表">
                     <Charts :data="props.data" :time="_getTimes" />
-                </a-tab-pane>
-                <a-tab-pane key="geo" tab="轨迹" v-if="data?.valueType?.type === 'geoPoint'">
+                </j-tab-pane>
+                <j-tab-pane key="geo" tab="轨迹" v-if="data?.valueType?.type === 'geoPoint'">
                     <PropertyAMap :data="props.data" :time="_getTimes" />
-                </a-tab-pane>
-            </a-tabs>
+                </j-tab-pane>
+            </j-tabs>
         </div>
-    </a-modal>
+    </j-modal>
 </template>
 
 <script lang="ts" setup>
diff --git a/src/views/device/Instance/Detail/Running/Property/Indicators.vue b/src/views/device/Instance/Detail/Running/Property/Indicators.vue
index 9c5b599e..dd05bb7f 100644
--- a/src/views/device/Instance/Detail/Running/Property/Indicators.vue
+++ b/src/views/device/Instance/Detail/Running/Property/Indicators.vue
@@ -1,5 +1,5 @@
 <template>
-    <a-modal 
+    <j-modal
         :maskClosable="false"
         :visible="true"
         title="编辑指标"
@@ -7,17 +7,32 @@
         @cancel="handleCancel"
         :confirmLoading="loading"
     >
-        <a-alert message="场景联动页面可引用指标配置触发条件" type="warning" showIcon />
-        <a-form layout="vertical" ref="formRef" :model="modelRef" style="margin-top: 20px">
+        <j-alert
+            message="场景联动页面可引用指标配置触发条件"
+            type="warning"
+            showIcon
+        />
+        <j-form
+            layout="vertical"
+            ref="formRef"
+            :model="modelRef"
+            style="margin-top: 20px"
+        >
             <template v-for="(item, index) in modelRef.metrics" :key="index">
-                <a-row type="flex" justify="space-between" align="bottom">
-                    <a-col :span="11">
-                        <a-form-item 
+                <j-row type="flex" justify="space-between" :align="'bottom'">
+                    <j-col :span="item.range ? 11 : 24">
+                        <j-form-item
                             :rules="{
                                 required: true,
-                                message: `请${['date', 'boolean'].includes(data?.valueType?.type)? '选择': '输入'}指标值`,
-                            }" 
-                            :name="['metrics', index, 'value', 0]" 
+                                message: `请${
+                                    ['date', 'boolean'].includes(
+                                        data?.valueType?.type,
+                                    )
+                                        ? '选择'
+                                        : '输入'
+                                }指标值`,
+                            }"
+                            :name="['metrics', index, 'value', 0]"
                             :label="item?.name || '指标值'"
                         >
                             <ValueItem
@@ -26,100 +41,131 @@
                                 :options="
                                     data.valueType?.type === 'boolean'
                                         ? [
-                                            {
-                                                label: data.valueType?.trueText,
-                                                value: String(data.valueType?.trueValue),
-                                            },
-                                            {
-                                                label: data.valueType?.falseText,
-                                                value: String(data.valueType?.falseValue),
-                                            },
-                                        ]
+                                              {
+                                                  label: data.valueType
+                                                      ?.trueText,
+                                                  value: String(
+                                                      data.valueType?.trueValue,
+                                                  ),
+                                              },
+                                              {
+                                                  label: data.valueType
+                                                      ?.falseText,
+                                                  value: String(
+                                                      data.valueType
+                                                          ?.falseValue,
+                                                  ),
+                                              },
+                                          ]
                                         : undefined
                                 "
                             />
-                        </a-form-item>
-                    </a-col>
+                        </j-form-item>
+                    </j-col>
                     <template v-if="item.range">
-                        <a-col><div class="center-icon">~</div></a-col>
-                        <a-col :span="11">
-                            <a-form-item 
-                                :name="['metrics', index, 'value', 1]" 
+                        <j-col><div class="center-icon">~</div></j-col>
+                        <j-col :span="11">
+                            <j-form-item
+                                :name="['metrics', index, 'value', 1]"
                                 :rules="{
                                     required: true,
-                                    message: `请${['date', 'boolean'].includes(data?.valueType?.type)? '选择': '输入'}指标值`,
-                                }" 
+                                    message: `请${
+                                        ['date', 'boolean'].includes(
+                                            data?.valueType?.type,
+                                        )
+                                            ? '选择'
+                                            : '输入'
+                                    }指标值`,
+                                }"
                             >
                                 <ValueItem
                                     v-model:modelValue="item.value[1]"
                                     :itemType="data.valueType?.type"
                                 />
-                            </a-form-item>
-                        </a-col>
+                            </j-form-item>
+                        </j-col>
                     </template>
-                </a-row>
+                </j-row>
             </template>
-        </a-form>
-    </a-modal> 
+        </j-form>
+    </j-modal>
 </template>
 
 <script lang="ts" setup>
-import { queryMetric, saveMetric } from '@/api/device/instance'
-const emit = defineEmits(['close']);
-import { useInstanceStore } from "@/store/instance"
-import { message } from 'ant-design-vue';
+import { queryMetric, saveMetric } from '@/api/device/instance';
+import { useInstanceStore } from '@/store/instance';
+import { message } from 'jetlinks-ui-components';
 
 const props = defineProps({
     data: {
         type: Object,
-        default: () => {}
-    }
-})
+        default: () => {},
+    },
+});
 
-const loading = ref<boolean>(false)
-const instanceStore = useInstanceStore()
+const emit = defineEmits(['close']);
+
+const loading = ref<boolean>(false);
+const instanceStore = useInstanceStore();
 const formRef = ref();
 
 const modelRef = reactive({
-    metrics: []
+    metrics: [],
 });
 
 const handleCancel = () => {
-    emit('close')
-}
+    emit('close');
+};
 
-watch(() => props.data.id, (newVal) => {
-    if(newVal && instanceStore.current.id){
-        queryMetric(instanceStore.current.id, props.data.id).then(resp => {
-            if (resp.status === 200) {
-          if (Array.isArray(resp?.result) && resp?.result.length) {
-            const list = resp?.result.map((item: any) => {
-                const val = Array.isArray(item?.value) ? [item?.value] : item?.value?.split(',')
-              return {
-                ...item,
-                value: val
-              };
-            });
-            modelRef.metrics = list as any
-          } else {
-            const type = props.data.valueType?.type;
-            if (type === 'boolean') {
-              const list = props.data.expands?.metrics.map((item: any) => {
-                const value = (item?.value || {}).map((i: any) => String(i)) || {};
-                return {
-                  ...item,
-                  value,
-                };
-              });
-                modelRef.metrics = list || []
-            } else {
-                modelRef.metrics = props.data.expands?.metrics || []
-            }
-          }
+watch(
+    () => props.data.id,
+    (newVal) => {
+        if (newVal && instanceStore.current.id) {
+            queryMetric(instanceStore.current.id, props.data.id).then(
+                (resp) => {
+                    if (resp.status === 200) {
+                        if (
+                            Array.isArray(resp?.result) &&
+                            resp?.result.length
+                        ) {
+                            const list = resp?.result.map((item: any) => {
+                                const val = Array.isArray(item?.value)
+                                    ? [item?.value]
+                                    : item?.value?.split(',');
+                                return {
+                                    ...item,
+                                    value: val,
+                                };
+                            });
+                            modelRef.metrics = list as any;
+                        } else {
+                            const type = props.data.valueType?.type;
+                            if (type === 'boolean') {
+                                const list = props.data.expands?.metrics.map(
+                                    (item: any) => {
+                                        const value =
+                                            (item?.value || {}).map((i: any) =>
+                                                String(i),
+                                            ) || {};
+                                        return {
+                                            ...item,
+                                            value,
+                                        };
+                                    },
+                                );
+                                modelRef.metrics = list || [];
+                            } else {
+                                modelRef.metrics =
+                                    props.data.expands?.metrics || [];
+                            }
+                        }
+                    }
+                },
+            );
         }
-        })
-    }
-}, {immediate: true, deep: true})
+    },
+    { immediate: true, deep: true },
+);
 
 const handleSave = () => {
     formRef.value
@@ -132,19 +178,23 @@ const handleSave = () => {
                     value: item.value.join(','),
                 };
             });
-            const resp = await saveMetric(instanceStore.current.id || '', props.data.id || '', list).finally(() => {
-                loading.value = false
-            })
+            const resp = await saveMetric(
+                instanceStore.current.id || '',
+                props.data.id || '',
+                list,
+            ).finally(() => {
+                loading.value = false;
+            });
             if (resp.status === 200) {
                 message.success('操作成功！');
-                emit('close')
+                emit('close');
                 formRef.value.resetFields();
             }
         })
         .catch((err: any) => {
             console.log('error', err);
         });
-}
+};
 </script>
 
 <style lang="less" scoped>
diff --git a/src/views/device/Instance/Detail/Running/Property/PropertyCard.vue b/src/views/device/Instance/Detail/Running/Property/PropertyCard.vue
index 8ad0c5ef..54bc890f 100644
--- a/src/views/device/Instance/Detail/Running/Property/PropertyCard.vue
+++ b/src/views/device/Instance/Detail/Running/Property/PropertyCard.vue
@@ -1,17 +1,17 @@
 <template>
-    <a-card :hoverable="true" class="card-box">
-        <!-- <a-spin :spinning="loading"> -->
+    <j-card :hoverable="true" class="card-box">
+        <!-- <j-spin :spinning="loading"> -->
         <div class="card-container">
             <div class="header">
                 <div class="title">{{ _props.data.name }}</div>
                 <div class="extra">
-                    <a-space :size="16">
+                    <j-space :size="16">
                         <template v-for="i in actions" :key="i.key">
-                            <a-tooltip
+                            <j-tooltip
                                 v-bind="i.tooltip"
                                 v-if="i.key !== 'edit'"
                             >
-                                <a-button
+                                <j-button
                                     style="padding: 0; margin: 0"
                                     type="link"
                                     :disabled="i.disabled"
@@ -21,8 +21,8 @@
                                         :type="i.icon"
                                         style="color: #323130; font-size: 12px"
                                     />
-                                </a-button>
-                            </a-tooltip>
+                                </j-button>
+                            </j-tooltip>
                             <PermissionButton
                                 :disabled="i.disabled"
                                 v-else
@@ -38,7 +38,7 @@
                                 /></template>
                             </PermissionButton>
                         </template>
-                    </a-space>
+                    </j-space>
                 </div>
             </div>
             <div class="value">
@@ -53,8 +53,8 @@
                 </div>
             </div>
         </div>
-        <!-- </a-spin> -->
-    </a-card>
+        <!-- </j-spin> -->
+    </j-card>
 </template>
 
 <script lang="ts" setup>
diff --git a/src/views/device/Instance/Detail/Running/Property/Save.vue b/src/views/device/Instance/Detail/Running/Property/Save.vue
index ff55951c..8879f7c7 100644
--- a/src/views/device/Instance/Detail/Running/Property/Save.vue
+++ b/src/views/device/Instance/Detail/Running/Property/Save.vue
@@ -1,5 +1,5 @@
 <template>
-    <a-modal 
+    <j-modal 
         :maskClosable="false"
         :visible="true"
         title="编辑"
@@ -7,9 +7,9 @@
         @cancel="handleCancel"
         :confirmLoading="loading"
     >
-        <a-alert message="当数据来源为设备时，填写的值将下发到设备" type="warning" showIcon />
-        <a-form :rules="rules" layout="vertical" ref="formRef" :model="modelRef" style="margin-top: 20px">
-            <a-form-item name="propertyValue" :label="data?.name || '自定义属性'">
+        <j-alert message="当数据来源为设备时，填写的值将下发到设备" type="warning" showIcon />
+        <j-form :rules="rules" layout="vertical" ref="formRef" :model="modelRef" style="margin-top: 20px">
+            <j-form-item name="propertyValue" :label="data?.name || '自定义属性'">
                 <ValueItem
                     v-model:modelValue="modelRef.propertyValue"
                     :itemType="data?.valueType?.type || data?.dataType"
@@ -24,16 +24,15 @@
                             : undefined
                     "
                 />
-            </a-form-item>
-        </a-form>
-    </a-modal> 
+            </j-form-item>
+        </j-form>
+    </j-modal> 
 </template>
 
 <script lang="ts" setup>
 import { setProperty } from '@/api/device/instance'
-const emit = defineEmits(['close']);
 import { useInstanceStore } from "@/store/instance"
-import { message } from 'ant-design-vue';
+import { message } from 'jetlinks-ui-components';
 
 const props = defineProps({
     data: {
@@ -42,6 +41,8 @@ const props = defineProps({
     }
 })
 
+const emit = defineEmits(['close']);
+
 const loading = ref<boolean>(false)
 const instanceStore = useInstanceStore()
 
diff --git a/src/views/device/Instance/Detail/Running/Property/ValueDetail.vue b/src/views/device/Instance/Detail/Running/Property/ValueDetail.vue
index 279505a7..51e4bbeb 100644
--- a/src/views/device/Instance/Detail/Running/Property/ValueDetail.vue
+++ b/src/views/device/Instance/Detail/Running/Property/ValueDetail.vue
@@ -1,5 +1,5 @@
 <template>
-    <a-modal
+    <j-modal
         :maskClosable="false"
         width="600px"
         :visible="true"
@@ -10,7 +10,7 @@
         @cancel="handleCancel"
     >
         <template v-if="['.jpg', '.png'].includes(type)">
-            <a-image :src="value?.formatValue" />
+            <j-image :src="value?.formatValue" />
         </template>
         <template v-else-if="['.flv', '.m3u8', '.mp4'].includes(type)">
         </template>
@@ -20,7 +20,7 @@
                 :value="value?.formatValue"
             />
         </template>
-    </a-modal>
+    </j-modal>
 </template>
 
 <script lang="ts" setup>
diff --git a/src/views/device/Instance/Detail/Running/Property/ValueRender.vue b/src/views/device/Instance/Detail/Running/Property/ValueRender.vue
index 60045917..4846b3af 100644
--- a/src/views/device/Instance/Detail/Running/Property/ValueRender.vue
+++ b/src/views/device/Instance/Detail/Running/Property/ValueRender.vue
@@ -1,59 +1,110 @@
 <template>
     <div class="value">
-        <div v-if="value?.formatValue !== 0 && !value?.formatValue" :class="valueClass">--</div>
+        <div
+            v-if="value?.formatValue !== 0 && !value?.formatValue"
+            :class="valueClass"
+        >
+            --
+        </div>
         <div v-else-if="_data.data?.valueType?.type === 'file'">
-          <template v-if="data?.valueType?.fileType === 'base64'">
-            <div :class="valueClass" v-if="!!getType(value?.formatValue)">
-              <img :src="imgMap.get(_type)" @error="onError" />
-            </div>
-            <div v-else :class="valueClass">
-              <img :src="imgMap.get('other')" />
-            </div>
-          </template>
-          <div v-else-if="data?.valueType?.fileType === 'Binary(二进制)'" :class="valueClass">
-            <img :src="imgMap.get('other')" />
-          </div>
-          <template v-else>
-            <template v-if="imgList.some((item) => value?.formatValue.includes(item))">
-              <div :class="valueClass" @click="getDetail('img')">
-                <img :src="value?.formatValue" @error="imgError" />
-              </div>
+            <template v-if="data?.valueType?.fileType === 'base64'">
+                <div :class="valueClass" v-if="!!getType(value?.formatValue)">
+                    <img :src="imgMap.get(_type)" @error="onError" />
+                </div>
+                <div v-else :class="valueClass">
+                    <img :src="imgMap.get('other')" />
+                </div>
             </template>
-            <template v-else-if="videoList.some((item) => value?.formatValue.includes(item))">
-              <div :class="valueClass" @click="getDetail('video')">
-                <img :src="imgMap.get('video')" />
-              </div>
-            </template>
-            <template v-else-if="fileList.some((item) => value?.formatValue.includes(item))">
-              <div :class="valueClass">
-                <img :src="imgMap.get(fileList.find((item) => value?.formatValue.includes(item)).slice(1))" />
-              </div>
-            </template>
-            <template v-else>
-              <div :class="valueClass">
+            <div
+                v-else-if="data?.valueType?.fileType === 'Binary(二进制)'"
+                :class="valueClass"
+            >
                 <img :src="imgMap.get('other')" />
-              </div>
+            </div>
+            <template v-else>
+                <template
+                    v-if="
+                        imgList.some((item) =>
+                            value?.formatValue.includes(item),
+                        )
+                    "
+                >
+                    <div :class="valueClass" @click="getDetail('img')">
+                        <img :src="value?.formatValue" @error="imgError" />
+                    </div>
+                </template>
+                <template
+                    v-else-if="
+                        videoList.some((item) =>
+                            value?.formatValue.includes(item),
+                        )
+                    "
+                >
+                    <div :class="valueClass" @click="getDetail('video')">
+                        <img :src="imgMap.get('video')" />
+                    </div>
+                </template>
+                <template
+                    v-else-if="
+                        fileList.some((item) =>
+                            value?.formatValue.includes(item),
+                        )
+                    "
+                >
+                    <div :class="valueClass">
+                        <img
+                            :src="
+                                imgMap.get(
+                                    fileList
+                                        .find((item) =>
+                                            value?.formatValue.includes(item),
+                                        )
+                                        .slice(1),
+                                )
+                            "
+                        />
+                    </div>
+                </template>
+                <template v-else>
+                    <div :class="valueClass">
+                        <img :src="imgMap.get('other')" />
+                    </div>
+                </template>
             </template>
-          </template>
         </div>
-        <div v-else-if="_data.data?.valueType?.type === 'object'" @click="getDetail('obj')" :class="valueClass">
-          <img :src="imgMap.get('obj')" />
+        <div
+            v-else-if="_data.data?.valueType?.type === 'object'"
+            @click="getDetail('obj')"
+            :class="valueClass"
+        >
+            <img :src="imgMap.get('obj')" />
         </div>
-        <div v-else-if="_data.data?.valueType?.type === 'geoPoint' || _data.data?.valueType?.type === 'array'" :class="valueClass">
-          {{JSON.stringify(value?.formatValue)}}
+        <div
+            v-else-if="
+                _data.data?.valueType?.type === 'geoPoint' ||
+                _data.data?.valueType?.type === 'array'
+            "
+            :class="valueClass"
+        >
+            {{ JSON.stringify(value?.formatValue) }}
         </div>
         <div v-else :class="valueClass">
-          {{String(value?.formatValue)}}
+            {{ String(value?.formatValue) }}
         </div>
-        <ValueDetail v-if="visible" :type="_types" :value="value" @close="visible = false" />
+        <ValueDetail
+            v-if="visible"
+            :type="_types"
+            :value="value"
+            @close="visible = false"
+        />
     </div>
 </template>
 
 <script lang="ts" setup>
-import { getImage } from "@/utils/comm";
-import { message } from "ant-design-vue";
-import ValueDetail from './ValueDetail.vue'
-import {getType, imgMap, imgList, videoList, fileList} from './index'
+import { getImage } from '@/utils/comm';
+import { message } from 'jetlinks-ui-components';
+import ValueDetail from './ValueDetail.vue';
+import { getType, imgMap, imgList, videoList, fileList } from './index';
 
 const _data = defineProps({
     data: {
@@ -62,88 +113,99 @@ const _data = defineProps({
     },
     value: {
         type: Object,
-        default: () => {}
+        default: () => {},
     },
     type: {
         type: String,
-        default: 'card'
-    }
+        default: 'card',
+    },
 });
 
 const valueClass = computed(() => {
-  return _data.type === 'card' ? 'cardValue' : 'otherValue'
-})
+    return _data.type === 'card' ? 'cardValue' : 'otherValue';
+});
 
 const isHttps = document.location.protocol === 'https:';
 
-const _types = ref<string>('')
-const visible = ref<boolean>(false)
-const temp = ref<boolean>(false)
-
+const _types = ref<string>('');
+const visible = ref<boolean>(false);
+const temp = ref<boolean>(false);
 
 const onError = (e: any) => {
-  e.target.src = imgMap.get('other')
-}
+    e.target.src = imgMap.get('other');
+};
 
 const imgError = (e: any) => {
-  e.target.src = imgMap.get('error')
-  temp.value = true
-}
+    e.target.src = imgMap.get('error');
+    temp.value = true;
+};
 
 const getDetail = (_type: string) => {
-  const value = _data.value
-  let flag: string = ''
-  if(_type === 'img'){
-    if (isHttps && value?.formatValue.indexOf('http:') !== -1) {
-      message.error('域名为https时，不支持访问http地址');
-    } else if (temp.value) {
-      message.error('该图片无法访问');
-    } else {
-      flag = ['.jpg', '.png'].find((item) => value?.formatValue.includes(item)) || '--';
+    const value = _data.value;
+    let flag: string = '';
+    if (_type === 'img') {
+        if (isHttps && value?.formatValue.indexOf('http:') !== -1) {
+            message.error('域名为https时，不支持访问http地址');
+        } else if (temp.value) {
+            message.error('该图片无法访问');
+        } else {
+            flag =
+                ['.jpg', '.png'].find((item) =>
+                    value?.formatValue.includes(item),
+                ) || '--';
+            _types.value = flag;
+            visible.value = true;
+        }
+    } else if (_type === 'video') {
+        if (isHttps && value?.formatValue.indexOf('http:') !== -1) {
+            message.error('域名为https时，不支持访问http地址');
+        } else if (
+            ['.rmvb', '.mvb'].some((item) => value?.formatValue.includes(item))
+        ) {
+            message.error('当前仅支持播放.mp4,.flv,.m3u8格式的视频');
+        } else {
+            flag =
+                ['.m3u8', '.flv', '.mp4'].find((item) =>
+                    value?.formatValue.includes(item),
+                ) || '--';
+            _types.value = flag;
+            visible.value = true;
+        }
+    } else if (_type === 'obj') {
+        flag = 'obj';
+        _types.value = flag;
+        visible.value = true;
     }
-  } else if(_type === 'video'){
-    if (isHttps && value?.formatValue.indexOf('http:') !== -1) {
-      message.error('域名为https时，不支持访问http地址');
-    } else if (['.rmvb', '.mvb'].some((item) => value?.formatValue.includes(item))) {
-      message.error('当前仅支持播放.mp4,.flv,.m3u8格式的视频');
-    } else {
-      flag = ['.m3u8', '.flv', '.mp4'].find((item) => value?.formatValue.includes(item)) || '--';
-    }
-  }else if(_type === 'obj'){
-    flag = 'obj'
-  }
-  _types.value = flag
-  visible.value = true
-}
+};
 </script>
 
 <style lang="less" scoped>
 .value {
-  display: flex;
-  align-items: center;
-  width: 100%;
-
-  .cardValue {
     display: flex;
     align-items: center;
     width: 100%;
-    height: 60px;
-    overflow: hidden;
-    color: #323130;
-    font-weight: 700;
-    font-size: 24px;
-    white-space: nowrap;
-    text-overflow: ellipsis;
 
-    img {
-      width: 60px;
-    }
-  }
+    .cardValue {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        height: 60px;
+        overflow: hidden;
+        color: #323130;
+        font-weight: 700;
+        font-size: 24px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
 
-  .otherValue {
-    img {
-      width: 40px;
+        img {
+            width: 60px;
+        }
+    }
+
+    .otherValue {
+        img {
+            width: 40px;
+        }
     }
-  }
 }
 </style>
\ 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
index f0d6036a..fd9db835 100644
--- a/src/views/device/Instance/Detail/Running/Property/index.vue
+++ b/src/views/device/Instance/Detail/Running/Property/index.vue
@@ -2,7 +2,8 @@
     <j-spin :spinning="loading">
         <JProTable
             :columns="columns"
-            :dataSource="dataSource"
+            :request="query"
+            :params="_params"
             :bodyStyle="{ padding: '0 0 0 20px' }"
         >
             <template #headerTitle>
@@ -58,26 +59,6 @@
                     </template>
                 </j-space>
             </template>
-            <template #paginationRender>
-                <j-pagination
-                    size="small"
-                    :total="total"
-                    :showQuickJumper="false"
-                    :showSizeChanger="true"
-                    :current="pageIndex + 1"
-                    :pageSize="pageSize"
-                    :pageSizeOptions="['8', '12', '24', '60', '100']"
-                    :show-total="
-                        (num) =>
-                            `第 ${pageIndex * pageSize + 1} - ${
-                                (pageIndex + 1) * pageSize > num
-                                    ? num
-                                    : (pageIndex + 1) * pageSize
-                            } 条/总共 ${num} 条`
-                    "
-                    @change="pageChange"
-                />
-            </template>
         </JProTable>
     </j-spin>
     <Save v-if="editVisible" @close="editVisible = false" :data="currentInfo" />
@@ -107,6 +88,7 @@ import { message } from 'ant-design-vue';
 import { getWebSocket } from '@/utils/websocket';
 import { map } from 'rxjs/operators';
 import { queryDashboard } from '@/api/comm';
+
 const columns = [
     {
         title: '名称',
@@ -142,9 +124,6 @@ const _data = defineProps({
 const value = ref<string>('');
 const dataSource = ref<PropertyData[]>([]);
 const _dataSource = ref<PropertyData[]>([]);
-const pageIndex = ref<number>(0);
-const pageSize = ref<number>(8);
-const total = ref<number>(0);
 const editVisible = ref<boolean>(false); // 编辑
 const detailVisible = ref<boolean>(false); // 详情
 const currentInfo = ref<Record<string, any>>({});
@@ -152,6 +131,9 @@ const instanceStore = useInstanceStore();
 const indicatorVisible = ref<boolean>(false); // 指标
 const loading = ref<boolean>(false);
 const propertyValue = ref<Record<string, any>>({});
+const _params = reactive({
+    name: '',
+});
 
 const subRef = ref();
 
@@ -309,39 +291,35 @@ const getDashboard = async () => {
     loading.value = false;
 };
 
-const query = (page: number, size: number, value: string) => {
-    pageIndex.value = page || 0;
-    pageSize.value = size || 8;
-    const _from = pageIndex.value * pageSize.value;
-    const _to = (pageIndex.value + 1) * pageSize.value;
-    const arr = _.cloneDeep(_dataSource.value);
-    if (unref(value)) {
-        const li = arr.filter((i: any) => {
-            return i?.name.indexOf(unref(value)) !== -1;
+const query = (params: Record<string, any>) =>
+    new Promise((resolve) => {
+        const _from = params.pageIndex * params.pageSize;
+        const _to = (params.pageIndex + 1) * params.pageSize;
+        let arr = _.cloneDeep(_dataSource.value);
+        if (params?.name) {
+            const li = _dataSource.value.filter((i: any) => {
+                return i?.name.indexOf(params.name) !== -1;
+            });
+            arr = _.cloneDeep(li);
+        }
+        resolve({
+            result: {
+                data: arr.slice(_from, _to),
+                pageIndex: params.pageIndex || 0,
+                pageSize: params.pageSize || 12,
+                total: arr.length,
+            },
+            status: 200,
         });
-        dataSource.value = li.slice(_from, _to);
-        total.value = li.length;
-    } else {
-        dataSource.value = arr.slice(_from, _to);
-        total.value = arr.length;
-    }
-    getDashboard();
-};
-
-const pageChange = (page: number, size: number) => {
-    if (size === pageSize.value) {
-        query(page - 1, size, value.value);
-    } else {
-        query(0, size, value.value);
-    }
-};
+        getDashboard();
+    });
 
 watch(
     () => _data.data,
     (newVal) => {
         if (newVal.length) {
             _dataSource.value = newVal as PropertyData[];
-            query(0, 8, value.value);
+            _params.name = '';
         }
     },
     {
@@ -351,7 +329,7 @@ watch(
 );
 
 const onSearch = () => {
-    query(0, 8, value.value);
+    _params.name = value.value;
 };
 
 onUnmounted(() => {
diff --git a/src/views/device/Instance/Detail/components/BindParentDevice/index.vue b/src/views/device/Instance/Detail/components/BindParentDevice/index.vue
new file mode 100644
index 00000000..4d2a4cd6
--- /dev/null
+++ b/src/views/device/Instance/Detail/components/BindParentDevice/index.vue
@@ -0,0 +1,175 @@
+<!-- 绑定设备 -->
+<template>
+    <j-modal
+        :maskClosable="false"
+        width="1000px"
+        :visible="true"
+        title="绑定父设备"
+        okText="确定"
+        cancelText="取消"
+        @ok="handleOk"
+        @cancel="handleCancel"
+        :confirmLoading="btnLoading"
+    >
+        <j-advanced-search
+            :columns="columns"
+            target="child-device-bind"
+            @search="handleSearch"
+            type="simple"
+        />
+        <JProTable
+            ref="bindDeviceRef"
+            :columns="columns"
+            :request="query"
+            model="TABLE"
+            :bodyStyle="{ padding: '0 0 0 24px' }"
+            :defaultParams="defaultParams"
+            :rowSelection="{
+                selectedRowKeys: _selectedRowKeys,
+                onChange: onSelectChange,
+            }"
+            :params="params"
+        >
+            <template #registryTime="slotProps">
+                {{
+                    slotProps.registryTime
+                        ? dayjs(slotProps.registryTime).format(
+                              'YYYY-MM-DD HH:mm:ss',
+                          )
+                        : ''
+                }}
+            </template>
+            <template #state="slotProps">
+                <j-badge
+                    :text="slotProps.state.text"
+                    :status="statusMap.get(slotProps.state.value)"
+                />
+            </template>
+        </JProTable>
+    </j-modal>
+</template>
+
+<script setup lang="ts">
+import { query, bindDevice } from '@/api/device/instance';
+import dayjs from 'dayjs';
+import { message } from 'jetlinks-ui-components';
+
+const emit = defineEmits(['cancel', 'ok']);
+
+const bindDeviceRef = ref<Record<string, any>>({});
+const params = ref<Record<string, any>>({});
+const _selectedRowKeys = ref<string[]>([]);
+const btnLoading = ref<boolean>(false);
+
+const props = defineProps({
+    data: {
+        type: Object,
+        default: () => {}
+    }
+})
+
+const statusMap = new Map();
+statusMap.set('online', 'success');
+statusMap.set('offline', 'error');
+statusMap.set('notActive', 'warning');
+
+const defaultParams = {
+    terms: [
+        {
+            column: 'productId$product-info',
+            value: [
+                {
+                    column: 'deviceType',
+                    termType: 'eq',
+                    value: 'gateway',
+                },
+            ],
+        },
+    ],
+};
+
+const columns = [
+    {
+        title: 'ID',
+        dataIndex: 'id',
+        key: 'id',
+        ellipsis: true,
+        fixed: 'left',
+        search: {
+            type: 'string',
+        },
+    },
+    {
+        title: '设备名称',
+        dataIndex: 'name',
+        key: 'name',
+        ellipsis: true,
+        search: {
+            type: 'string',
+        },
+    },
+    {
+        title: '所属产品',
+        dataIndex: 'productName',
+        key: 'productName',
+        search: {
+            type: 'string',
+        },
+    },
+    {
+        title: '注册时间',
+        dataIndex: 'registryTime',
+        key: 'registryTime',
+        scopedSlots: true,
+        search: {
+            type: 'date',
+        },
+    },
+    {
+        title: '状态',
+        dataIndex: 'state',
+        key: 'state',
+        scopedSlots: true,
+        search: {
+            type: 'select',
+            options: [
+                { label: '禁用', value: 'notActive' },
+                { label: '离线', value: 'offline' },
+                { label: '在线', value: 'online' },
+            ],
+        },
+    },
+];
+
+const handleSearch = (e: any) => {
+    params.value = e;
+};
+
+const onSelectChange = (keys: string[]) => {
+    _selectedRowKeys.value = [...keys];
+};
+
+const handleOk = () => {
+    if (_selectedRowKeys.value.length === 0) {
+        message.warning('请选择需要绑定的设备');
+        return;
+    }
+    btnLoading.value = true;
+    bindDevice(_selectedRowKeys.value[0], props.data.id, )
+        .then((resp) => {
+            if(resp.status === 200){
+                emit('ok', _selectedRowKeys.value[0]);
+                message.success('操作成功');
+            }
+        })
+        .finally(() => {
+            btnLoading.value = false;
+        });
+};
+
+const handleCancel = () => {
+    emit('cancel', false);
+};
+</script>
+
+<style scoped lang="less"></style>
diff --git a/src/views/device/Instance/Detail/components/EditTable/PatchMapping.vue b/src/views/device/Instance/Detail/components/EditTable/PatchMapping.vue
index 2597cd04..add45b11 100644
--- a/src/views/device/Instance/Detail/components/EditTable/PatchMapping.vue
+++ b/src/views/device/Instance/Detail/components/EditTable/PatchMapping.vue
@@ -1,5 +1,5 @@
 <template>
-    <a-modal
+    <j-modal
         width="900px"
         title="批量映射"
         visible
@@ -10,49 +10,49 @@
             <div class="map-tree-top">
                 采集器的点位名称与属性名称一致时将自动映射绑定；有多个采集器点位名称与属性名称一致时以第1个采集器的点位数据进行绑定
             </div>
-            <a-spin :spinning="loading">
+            <j-spin :spinning="loading">
                 <div class="map-tree-content">
-                    <a-card class="map-tree-content-card" title="源数据">
-                        <a-tree
+                    <j-card class="map-tree-content-card" title="源数据">
+                        <j-tree
                             checkable
                             :height="300"
                             :tree-data="dataSource"
                             :checkedKeys="checkedKeys"
                             @check="onCheck"
                         />
-                    </a-card>
+                    </j-card>
                     <div style="width: 100px">
-                        <a-button
+                        <j-button
                             :disabled="rightList.length >= leftList.length"
                             @click="onRight"
-                            >加入右侧</a-button
+                            >加入右侧</j-button
                         >
                     </div>
-                    <a-card class="map-tree-content-card" title="采集器">
-                        <a-list
+                    <j-card class="map-tree-content-card" title="采集器">
+                        <j-list
                             size="small"
                             :data-source="rightList"
                             class="map-tree-content-card-list"
                         >
                             <template #renderItem="{ item }">
-                                <a-list-item>
+                                <j-list-item>
                                     {{ item.title }}
                                     <template #actions>
-                                        <a-popconfirm
+                                        <j-popconfirm
                                             title="确定删除?"
                                             @confirm="_delete(item.key)"
                                         >
                                             <AIcon type="DeleteOutlined" />
-                                        </a-popconfirm>
+                                        </j-popconfirm>
                                     </template>
-                                </a-list-item>
+                                </j-list-item>
                             </template>
-                        </a-list>
-                    </a-card>
+                        </j-list>
+                    </j-card>
                 </div>
-            </a-spin>
+            </j-spin>
         </div>
-    </a-modal>
+    </j-modal>
 </template>
 
 <script lang="ts" setup>
diff --git a/src/views/device/Instance/Detail/components/EditTable/index.vue b/src/views/device/Instance/Detail/components/EditTable/index.vue
index 7c9d19b4..c2c56279 100644
--- a/src/views/device/Instance/Detail/components/EditTable/index.vue
+++ b/src/views/device/Instance/Detail/components/EditTable/index.vue
@@ -1,46 +1,46 @@
 <template>
-    <a-spin :spinning="loading" v-if="metadata.properties.length">
-        <a-card>
+    <j-spin :spinning="loading" v-if="metadata.properties.length">
+        <j-card>
             <template #extra>
-                <a-space>
-                    <a-button @click="visible = true">批量映射</a-button>
-                    <a-button type="primary" @click="onSave">保存</a-button>
-                </a-space>
+                <j-space>
+                    <j-button @click="visible = true">批量映射</j-button>
+                    <j-button type="primary" @click="onSave">保存</j-button>
+                </j-space>
             </template>
-            <a-form ref="formRef" :model="modelRef">
-                <a-table :dataSource="modelRef.dataSource" :columns="columns">
+            <j-form ref="formRef" :model="modelRef">
+                <j-table :dataSource="modelRef.dataSource" :columns="columns">
                     <template #headerCell="{ column }">
                         <template v-if="column.key === 'collectorId'">
                             采集器
-                            <a-tooltip title="数据采集中配置的真实物理设备">
+                            <j-tooltip title="数据采集中配置的真实物理设备">
                                 <AIcon type="QuestionCircleOutlined" />
-                            </a-tooltip>
+                            </j-tooltip>
                         </template>
                     </template>
                     <template #bodyCell="{ column, record, index }">
                         <template v-if="column.dataIndex === 'channelId'">
-                            <a-form-item
+                            <j-form-item
                                 :name="['dataSource', index, 'channelId']"
                             >
-                                <a-select
+                                <j-select
                                     style="width: 100%"
                                     v-model:value="record[column.dataIndex]"
                                     placeholder="请选择"
                                     allowClear
                                     :filter-option="filterOption"
                                 >
-                                    <a-select-option
+                                    <j-select-option
                                         v-for="item in channelList"
                                         :key="item.value"
                                         :value="item.value"
                                         :label="item.label"
-                                        >{{ item.label }}</a-select-option
+                                        >{{ item.label }}</j-select-option
                                     >
-                                </a-select>
-                            </a-form-item>
+                                </j-select>
+                            </j-form-item>
                         </template>
                         <template v-if="column.dataIndex === 'collectorId'">
-                            <a-form-item
+                            <j-form-item
                                 :name="['dataSource', index, 'collectorId']"
                                 :rules="[
                                     {
@@ -54,10 +54,10 @@
                                     :id="record.channelId"
                                     type="COLLECTOR"
                                 />
-                            </a-form-item>
+                            </j-form-item>
                         </template>
                         <template v-if="column.dataIndex === 'pointId'">
-                            <a-form-item
+                            <j-form-item
                                 :name="['dataSource', index, 'pointId']"
                                 :rules="[
                                     {
@@ -71,33 +71,33 @@
                                     :id="record.collectorId"
                                     type="POINT"
                                 />
-                            </a-form-item>
+                            </j-form-item>
                         </template>
                         <template v-if="column.dataIndex === 'id'">
-                            <a-badge
+                            <j-badge
                                 v-if="record[column.dataIndex]"
                                 status="success"
                                 text="已绑定"
                             />
-                            <a-badge v-else status="error" text="未绑定" />
+                            <j-badge v-else status="error" text="未绑定" />
                         </template>
                         <template v-if="column.key === 'action'">
-                            <a-tooltip title="解绑">
-                                <a-popconfirm
+                            <j-tooltip title="解绑">
+                                <j-popconfirm
                                     title="确认解绑"
                                     :disabled="!record.id"
                                     @confirm="unbind(record.id)"
                                 >
-                                    <a-button type="link" :disabled="!record.id"
+                                    <j-button type="link" :disabled="!record.id"
                                         ><AIcon type="icon-jiebang"
-                                    /></a-button>
-                                </a-popconfirm>
-                            </a-tooltip>
+                                    /></j-button>
+                                </j-popconfirm>
+                            </j-tooltip>
                         </template>
                     </template>
-                </a-table>
-            </a-form>
-        </a-card>
+                </j-table>
+            </j-form>
+        </j-card>
         <PatchMapping
             :deviceId="instanceStore.current.id"
             v-if="visible"
@@ -106,10 +106,10 @@
             :type="provider"
             :metaData="modelRef.dataSource"
         />
-    </a-spin>
-    <a-card v-else>
+    </j-spin>
+    <j-card v-else>
         <JEmpty description='暂无数据，请配置物模型' style="margin: 10% 0" />
-    </a-card>
+    </j-card>
 </template>
 
 <script lang="ts" setup>
diff --git a/src/views/device/Instance/Detail/components/MSelect.vue b/src/views/device/Instance/Detail/components/MSelect.vue
index 622d5a2f..046d262a 100644
--- a/src/views/device/Instance/Detail/components/MSelect.vue
+++ b/src/views/device/Instance/Detail/components/MSelect.vue
@@ -1,14 +1,14 @@
 <template>
-    <a-select allowClear v-model:value="_value" @change="onChange" placeholder="请选择" style="width: 100%">
-        <a-select-option
+    <j-select allowClear v-model:value="_value" @change="onChange" placeholder="请选择" style="width: 100%">
+        <j-select-option
             v-for="item in list"
             :key="item.id"
             :value="item.id"
             :label="item.name"
             :filter-option="filterOption"
-            >{{ item.name }}</a-select-option
+            >{{ item.name }}</j-select-option
         >
-    </a-select>
+    </j-select>
 </template>
 
 <script lang="ts" setup>
diff --git a/src/views/device/Instance/Detail/index.vue b/src/views/device/Instance/Detail/index.vue
index eac4896e..616d2067 100644
--- a/src/views/device/Instance/Detail/index.vue
+++ b/src/views/device/Instance/Detail/index.vue
@@ -10,9 +10,9 @@
                 <div style="display: flex; align-items: center">
                     <AIcon type="ArrowLeftOutlined" @click="onBack" />
                     <div style="margin-left: 20px">{{ instanceStore.current.name }}</div>
-                    <a-divider type="vertical" />
-                    <a-space>
-                        <a-badge
+                    <j-divider type="vertical" />
+                    <j-space>
+                        <j-badge
                             :text="instanceStore.current.state?.text"
                             :status="
                                 statusMap.get(
@@ -49,7 +49,7 @@
                         >
                             断开连接
                         </PermissionButton>
-                        <a-tooltip
+                        <j-tooltip
                             v-if="
                                 instanceStore.current?.accessProvider ===
                                     'child-device' &&
@@ -68,15 +68,15 @@
                                 type="QuestionCircleOutlined"
                                 style="font-size: 14px"
                             />
-                        </a-tooltip>
-                    </a-space>
+                        </j-tooltip>
+                    </j-space>
                 </div>
                 <div style="padding-top: 10px">
-                    <a-descriptions size="small" :column="4">
-                        <a-descriptions-item label="ID">{{
+                    <j-descriptions size="small" :column="4">
+                        <j-descriptions-item label="ID">{{
                             instanceStore.current.id
-                        }}</a-descriptions-item>
-                        <a-descriptions-item label="所属产品">
+                        }}</j-descriptions-item>
+                        <j-descriptions-item label="所属产品">
                             <PermissionButton
                                 type="link"
                                 style="margin-top: -5px; padding: 0"  
@@ -85,8 +85,8 @@
                             >
                                 {{ instanceStore.current.productName }}
                             </PermissionButton>
-                        </a-descriptions-item>
-                    </a-descriptions>
+                        </j-descriptions-item>
+                    </j-descriptions>
                 </div>
             </div>
         </template>
@@ -119,7 +119,7 @@ import EdgeMap from './EdgeMap/index.vue';
 import Parsing from './Parsing/index.vue'
 import Log from './Log/index.vue'
 import { _deploy, _disconnect } from '@/api/device/instance';
-import { message } from 'ant-design-vue';
+import { message } from 'jetlinks-ui-components';
 import { getImage } from '@/utils/comm';
 import { getWebSocket } from '@/utils/websocket';
 import { useMenuStore } from '@/store/menu';
diff --git a/src/views/device/Instance/Import/index.vue b/src/views/device/Instance/Import/index.vue
index 335ff68d..c939386e 100644
--- a/src/views/device/Instance/Import/index.vue
+++ b/src/views/device/Instance/Import/index.vue
@@ -64,6 +64,6 @@ const handleCancel = () => {
 }
 
 const handleSave = () => {
-    emit('close')
+    emit('save')
 }
 </script>
\ No newline at end of file
diff --git a/src/views/device/Instance/Process/index.vue b/src/views/device/Instance/Process/index.vue
index 7dda3761..05b405ac 100644
--- a/src/views/device/Instance/Process/index.vue
+++ b/src/views/device/Instance/Process/index.vue
@@ -1,12 +1,12 @@
 <template>
-    <a-modal :maskClosable="false" width="800px" :visible="true" title="当前进度" @ok="handleCancel" @cancel="handleCancel">
+    <j-modal :maskClosable="false" width="800px" :visible="true" title="当前进度" @ok="handleCancel" @cancel="handleCancel">
         <div>
-            <a-badge v-if="flag" status="processing" text="进行中" />
-            <a-badge v-else status="success" text="已完成" /> 
+            <j-badge v-if="flag" status="processing" text="进行中" />
+            <j-badge v-else status="success" text="已完成" /> 
         </div>
         <p>总数量：{{count}}</p>
         <a style="color: red">{{errMessage}}</a>
-    </a-modal>
+    </j-modal>
 </template>
 
 <script lang="ts" setup>
diff --git a/src/views/device/Instance/Save/index.vue b/src/views/device/Instance/Save/index.vue
index 00bf127c..76f5549e 100644
--- a/src/views/device/Instance/Save/index.vue
+++ b/src/views/device/Instance/Save/index.vue
@@ -88,7 +88,7 @@
 import { queryNoPagingPost } from '@/api/device/product';
 import { isExists, update } from '@/api/device/instance';
 import { getImage } from '@/utils/comm';
-import { message } from 'ant-design-vue';
+import { message } from 'jetlinks-ui-components';
 
 const emit = defineEmits(['close', 'save']);
 const props = defineProps({
diff --git a/src/views/device/Instance/index.vue b/src/views/device/Instance/index.vue
index 5320be4e..35424de5 100644
--- a/src/views/device/Instance/index.vue
+++ b/src/views/device/Instance/index.vue
@@ -156,7 +156,10 @@
                     </template>
                     <template #content>
                         <Ellipsis style="width: calc(100% - 100px)">
-                            <span style="font-size: 16px; font-weight: 600"  @click.stop="handleView(slotProps.id)">
+                            <span
+                                style="font-size: 16px; font-weight: 600"
+                                @click.stop="handleView(slotProps.id)"
+                            >
                                 {{ slotProps.name }}
                             </span>
                         </Ellipsis>
@@ -205,6 +208,11 @@
                     :status="statusMap.get(slotProps.state?.value)"
                 />
             </template>
+            <template #createTime="slotProps">
+                <span>{{
+                    dayjs(slotProps.createTime).format('YYYY-MM-DD HH:mm:ss')
+                }}</span>
+            </template>
             <template #action="slotProps">
                 <j-space>
                     <template
@@ -229,11 +237,16 @@
             </template>
         </JProTable>
     </page-container>
-    <Import v-if="importVisible" @close="importVisible = false" @save="onRefresh" />
+    <Import
+        v-if="importVisible"
+        @close="importVisible = false"
+        @save="onRefresh"
+    />
     <Export
         v-if="exportVisible"
         @close="exportVisible = false"
         :data="params"
+        @save="onRefresh"
     />
     <Process
         v-if="operationVisible"
@@ -260,7 +273,7 @@ import {
     batchDeleteDevice,
 } from '@/api/device/instance';
 import { getImage, LocalStore } from '@/utils/comm';
-import { message } from 'ant-design-vue';
+import { message } from 'jetlinks-ui-components';
 import Import from './Import/index.vue';
 import Export from './Export/index.vue';
 import Process from './Process/index.vue';
@@ -274,9 +287,9 @@ import {
 } from '@/api/device/product';
 import { queryTree } from '@/api/device/category';
 import { useMenuStore } from '@/store/menu';
-import { ActionsType } from './typings';
+import type { ActionsType } from './typings';
+import dayjs from 'dayjs';
 
-const router = useRouter();
 const instanceRef = ref<Record<string, any>>({});
 const params = ref<Record<string, any>>({});
 const _selectedRowKeys = ref<string[]>([]);
@@ -699,5 +712,5 @@ const handleSearch = (_params: any) => {
 
 const onRefresh = () => {
     instanceRef.value?.reload();
-}
+};
 </script>
diff --git a/yarn.lock b/yarn.lock
index 1bda2b9a..40dff6cf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3903,8 +3903,8 @@ jetlinks-store@^0.0.3:
 
 jetlinks-ui-components@^1.0.4:
   version "1.0.4"
-  resolved "https://registry.jetlinks.cn/jetlinks-ui-components/-/jetlinks-ui-components-1.0.4.tgz#31f6879f83d394ba45bfd6e94ce0b20de817d490"
-  integrity sha512-5X26+GsqsduCUSmlaYOAw/MDwKRsZFnifzzRqHcm5qbCi0KrrkID9aKatsMRaeTVEEca1/nzPaPGgXAo6bEpfQ==
+  resolved "https://registry.jetlinks.cn/jetlinks-ui-components/-/jetlinks-ui-components-1.0.4.tgz#418d9218c2d0076b4a16606eb87ea755db303409"
+  integrity sha512-7c509Xx4YVamM/R6Xg62iIOxh2gWz8ASKCN2Pa8lU2CP1n+Vn5Xi5Q0fpd0AiFdi1QadssGaGUkpzbqCqWXLsQ==
   dependencies:
     "@vueuse/core" "^9.12.0"
     ant-design-vue "^3.2.15"

From 1cf4a3f8b02c70be614cc1b3dab7eaa4e842e189 Mon Sep 17 00:00:00 2001
From: 100011797 <2642441182@qq.com>
Date: Mon, 6 Mar 2023 18:03:51 +0800
Subject: [PATCH 12/16] =?UTF-8?q?fix:=20dueros=E6=9B=BF=E6=8D=A2=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DuerOS/Detail/command/EditTable.vue       |   4 +-
 .../DuerOS/Detail/command/index.vue           |  74 +++---
 src/views/Northbound/DuerOS/Detail/doc.vue    |   8 +-
 src/views/Northbound/DuerOS/Detail/index.vue  | 226 +++++++++---------
 src/views/Northbound/DuerOS/index.vue         |  34 ++-
 .../Diagnose/Message/Function/EditTable.vue   |   5 +-
 .../Detail/Info/components/Tags/Save.vue      |   2 +-
 yarn.lock                                     |   4 +-
 8 files changed, 177 insertions(+), 180 deletions(-)

diff --git a/src/views/Northbound/DuerOS/Detail/command/EditTable.vue b/src/views/Northbound/DuerOS/Detail/command/EditTable.vue
index 975d91fd..a080b038 100644
--- a/src/views/Northbound/DuerOS/Detail/command/EditTable.vue
+++ b/src/views/Northbound/DuerOS/Detail/command/EditTable.vue
@@ -1,5 +1,5 @@
 <template>
-    <a-table
+    <j-table
         rowKey="id"
         :columns="columns"
         :data-source="dataSource"
@@ -36,7 +36,7 @@
                 </template>
             </div>
         </template>
-    </a-table>
+    </j-table>
 </template>
 
 <script lang="ts" setup>
diff --git a/src/views/Northbound/DuerOS/Detail/command/index.vue b/src/views/Northbound/DuerOS/Detail/command/index.vue
index 22271343..bee8e5b1 100644
--- a/src/views/Northbound/DuerOS/Detail/command/index.vue
+++ b/src/views/Northbound/DuerOS/Detail/command/index.vue
@@ -1,60 +1,60 @@
 <template>
-    <a-form 
+    <j-form 
         :layout="'vertical'"
         ref="formRef"
         :model="modelRef"
     >
-        <a-row :gutter="24">
-            <a-col :span="24" v-if="actionType === 'command'">
-                <a-form-item name="messageType" label="指令类型" :rules="{
+        <j-row :gutter="24">
+            <j-col :span="24" v-if="actionType === 'command'">
+                <j-form-item name="messageType" label="指令类型" :rules="{
                     required: true,
                     message: '请选择指令类型',
                 }">
-                    <a-select placeholder="请选择指令类型" v-model:value="modelRef.messageType" show-search :filter-option="filterOption">
-                        <a-select-option value="READ_PROPERTY">读取属性</a-select-option>
-                        <a-select-option value="WRITE_PROPERTY">修改属性</a-select-option>
-                        <a-select-option value="INVOKE_FUNCTION">调用功能</a-select-option>
-                    </a-select>
-                </a-form-item>
-            </a-col>
-            <a-col :span="(modelRef.messageType === 'READ_PROPERTY' || actionType === 'latestData') ? 24 : 12" v-if="(actionType === 'command' && ['READ_PROPERTY','WRITE_PROPERTY'].includes(modelRef.messageType)) || actionType === 'latestData'">
-                <a-form-item :name="['message', 'properties']" label="属性" :rules="{
+                    <j-select placeholder="请选择指令类型" v-model:value="modelRef.messageType" show-search :filter-option="filterOption">
+                        <j-select-option value="READ_PROPERTY">读取属性</j-select-option>
+                        <j-select-option value="WRITE_PROPERTY">修改属性</j-select-option>
+                        <j-select-option value="INVOKE_FUNCTION">调用功能</j-select-option>
+                    </j-select>
+                </j-form-item>
+            </j-col>
+            <j-col :span="(modelRef.messageType === 'READ_PROPERTY' || actionType === 'latestData') ? 24 : 12" v-if="(actionType === 'command' && ['READ_PROPERTY','WRITE_PROPERTY'].includes(modelRef.messageType)) || actionType === 'latestData'">
+                <j-form-item :name="['message', 'properties']" label="属性" :rules="{
                     required: true,
                     message: '请选择属性',
                 }">
-                    <a-select placeholder="请选择属性" v-model:value="modelRef.message.properties" show-search :filter-option="filterOption">
-                        <a-select-option v-for="i in (metadata?.properties) || []" :key="i.id" :value="i.id" :label="i.name">{{i.name}}</a-select-option>
-                    </a-select>
-                </a-form-item>
-            </a-col>
-            <a-col :span="12" v-if="modelRef.messageType === 'WRITE_PROPERTY' && actionType === 'command'">
-                <a-form-item :name="['message', 'value']" label="值" :rules="{
+                    <j-select placeholder="请选择属性" v-model:value="modelRef.message.properties" show-search :filter-option="filterOption">
+                        <j-select-option v-for="i in (metadata?.properties) || []" :key="i.id" :value="i.id" :label="i.name">{{i.name}}</j-select-option>
+                    </j-select>
+                </j-form-item>
+            </j-col>
+            <j-col :span="12" v-if="modelRef.messageType === 'WRITE_PROPERTY' && actionType === 'command'">
+                <j-form-item :name="['message', 'value']" label="值" :rules="{
                     required: true,
                     message: '请输入值',
                 }">
-                    <a-input />
-                </a-form-item>
-            </a-col>
-            <a-col :span="24" v-if="modelRef.messageType === 'INVOKE_FUNCTION'">
-                <a-form-item :name="['message', 'functionId']" label="功能" :rules="{
+                    <j-input />
+                </j-form-item>
+            </j-col>
+            <j-col :span="24" v-if="modelRef.messageType === 'INVOKE_FUNCTION'">
+                <j-form-item :name="['message', 'functionId']" label="功能" :rules="{
                     required: true,
                     message: '请选择功能',
                 }">
-                    <a-select placeholder="请选择功能" v-model:value="modelRef.message.functionId" show-search :filter-option="filterOption" @change="funcChange">
-                        <a-select-option v-for="i in (metadata?.functions) || []" :key="i.id" :value="i.id" :label="i.name">{{i.name}}</a-select-option>
-                    </a-select>
-                </a-form-item>
-            </a-col>
-            <a-col :span="24" v-if="modelRef.messageType === 'INVOKE_FUNCTION' && modelRef.message.functionId">
-                <a-form-item :name="['message', 'inputs']" label="参数列表" :rules="{
+                    <j-select placeholder="请选择功能" v-model:value="modelRef.message.functionId" show-search :filter-option="filterOption" @change="funcChange">
+                        <j-select-option v-for="i in (metadata?.functions) || []" :key="i.id" :value="i.id" :label="i.name">{{i.name}}</j-select-option>
+                    </j-select>
+                </j-form-item>
+            </j-col>
+            <j-col :span="24" v-if="modelRef.messageType === 'INVOKE_FUNCTION' && modelRef.message.functionId">
+                <j-form-item :name="['message', 'inputs']" label="参数列表" :rules="{
                     required: true,
                     message: '请输入参数列表',
                 }">
                     <EditTable v-model="modelRef.message.inputs"/>
-                </a-form-item>
-            </a-col>
-        </a-row>
-    </a-form>
+                </j-form-item>
+            </j-col>
+        </j-row>
+    </j-form>
 </template>
 
 <script lang="ts" setup>
@@ -62,8 +62,6 @@ import EditTable from './EditTable.vue'
 
 const formRef = ref();
 
-const funcList = ref<Record<string, any>[]>([])
-
 const filterOption = (input: string, option: any) => {
     return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
 };
diff --git a/src/views/Northbound/DuerOS/Detail/doc.vue b/src/views/Northbound/DuerOS/Detail/doc.vue
index 35bfcc33..ec2dc145 100644
--- a/src/views/Northbound/DuerOS/Detail/doc.vue
+++ b/src/views/Northbound/DuerOS/Detail/doc.vue
@@ -18,7 +18,7 @@
       <div>
         <h2>1、在百度小度技能平台创建技能，并授权。完成物联网平台与DuerOS的关联。</h2>
         <div class="image">
-          <a-image width="100%" :src="getImage('/cloud/dueros-doc.jpg')" />
+          <j-image width="100%" :src="getImage('/cloud/dueros-doc.jpg')" />
         </div>
         <h1>授权地址</h1>
         <div>物联网平台的登录地址。注意需要为https。</div>
@@ -26,19 +26,19 @@
         <h1>Client_Id</h1>
         <div>请填写系统管理-应用管理中的clientId。</div>
         <div class="image">
-          <a-image width="100%" :src="getImage('/cloud/dueros-doc1.png')" />
+          <j-image width="100%" :src="getImage('/cloud/dueros-doc1.png')" />
         </div>
         <h1>回调地址</h1>
         <div>请复制DuerOS平台中的值，填写到系统管理-应用管理中-redirectUrl中。</div>
         <div class="image">
-          <a-image width="100%" :src="getImage('/cloud/dueros-doc2.png')" />
+          <j-image width="100%" :src="getImage('/cloud/dueros-doc2.png')" />
         </div>
         <h1>Token地址</h1>
         <div>请复制并填写：HTTPS://{location.host}/api/v1/token</div>
         <h1>ClientSecret</h1>
         <div>请复制系统管理-应用管理中的secureKey，填写到DuerOS平台。</div>
         <div class="image">
-          <a-image width="100%" :src="getImage('/cloud/dueros-doc3.png')" />
+          <j-image width="100%" :src="getImage('/cloud/dueros-doc3.png')" />
         </div>
         <div></div>
         <h1>WebService</h1>
diff --git a/src/views/Northbound/DuerOS/Detail/index.vue b/src/views/Northbound/DuerOS/Detail/index.vue
index 89042204..f9273b01 100644
--- a/src/views/Northbound/DuerOS/Detail/index.vue
+++ b/src/views/Northbound/DuerOS/Detail/index.vue
@@ -1,17 +1,17 @@
 <template>
     <page-container>
-        <a-card>
-            <a-row :gutter="24">
-                <a-col :span="16">
+        <j-card>
+            <j-row :gutter="24">
+                <j-col :span="16">
                     <TitleComponent data="基本信息" />
-                    <a-form
+                    <j-form
                         :layout="'vertical'"
                         ref="formRef"
                         :model="modelRef"
                     >
-                        <a-row :gutter="24">
-                            <a-col :span="24">
-                                <a-form-item
+                        <j-row :gutter="24">
+                            <j-col :span="24">
+                                <j-form-item
                                     label="名称"
                                     name="name"
                                     :rules="[
@@ -25,14 +25,14 @@
                                         },
                                     ]"
                                 >
-                                    <a-input
+                                    <j-input
                                         placeholder="请输入名称"
                                         v-model:value="modelRef.name"
                                     />
-                                </a-form-item>
-                            </a-col>
-                            <a-col :span="12">
-                                <a-form-item
+                                </j-form-item>
+                            </j-col>
+                            <j-col :span="12">
+                                <j-form-item
                                     label="产品"
                                     name="id"
                                     :rules="[
@@ -42,7 +42,7 @@
                                         },
                                     ]"
                                 >
-                                    <a-select
+                                    <j-select
                                         :disabled="
                                             type !== 'edit' &&
                                             modelRef.id &&
@@ -54,18 +54,18 @@
                                         :filter-option="filterOption"
                                         @change="productChange"
                                     >
-                                        <a-select-option
+                                        <j-select-option
                                             v-for="item in productList"
                                             :key="item.id"
                                             :value="item.id"
                                             :label="item.name"
-                                            >{{ item.name }}</a-select-option
+                                            >{{ item.name }}</j-select-option
                                         >
-                                    </a-select>
-                                </a-form-item>
-                            </a-col>
-                            <a-col :span="12">
-                                <a-form-item
+                                    </j-select>
+                                </j-form-item>
+                            </j-col>
+                            <j-col :span="12">
+                                <j-form-item
                                     name="applianceType"
                                     :rules="{
                                         required: true,
@@ -75,50 +75,50 @@
                                     <template #label>
                                         <span>
                                             设备类型
-                                            <a-tooltip
+                                            <j-tooltip
                                                 title="DuerOS平台拟定的规范"
                                             >
                                                 <AIcon
                                                     type="QuestionCircleOutlined"
                                                     style="margin-left: 2px"
                                                 />
-                                            </a-tooltip>
+                                            </j-tooltip>
                                         </span>
                                     </template>
-                                    <a-select
+                                    <j-select
                                         placeholder="请选择设备类型"
                                         v-model:value="modelRef.applianceType"
                                         show-search
                                         :filter-option="filterOption"
                                         @change="typeChange"
                                     >
-                                        <a-select-option
+                                        <j-select-option
                                             v-for="item in typeList"
                                             :key="item.id"
                                             :value="item.id"
                                             :label="item.name"
-                                            >{{ item.name }}</a-select-option
+                                            >{{ item.name }}</j-select-option
                                         >
-                                    </a-select>
-                                </a-form-item>
-                                <a-form-item
+                                    </j-select>
+                                </j-form-item>
+                                <j-form-item
                                     name="productName"
                                     v-show="false"
                                     label="产品名称"
                                 >
-                                    <a-input
+                                    <j-input
                                         v-model:value="modelRef.productName"
                                     />
-                                </a-form-item>
-                            </a-col>
-                            <a-col :span="24">
+                                </j-form-item>
+                            </j-col>
+                            <j-col :span="24">
                                 <p>动作映射</p>
-                                <a-collapse
+                                <j-collapse
                                     v-if="modelRef.actionMappings.length"
                                     :activeKey="actionActiveKey"
                                     @change="onActionCollChange"
                                 >
-                                    <a-collapse-panel
+                                    <j-collapse-panel
                                         v-for="(
                                             item, index
                                         ) in modelRef.actionMappings"
@@ -139,9 +139,9 @@
                                                 type="DeleteOutlined"
                                                 @click="delItem(index)"
                                         /></template>
-                                        <a-row :gutter="24">
-                                            <a-col :span="12">
-                                                <a-form-item
+                                        <j-row :gutter="24">
+                                            <j-col :span="12">
+                                                <j-form-item
                                                     :name="[
                                                         'actionMappings',
                                                         index,
@@ -155,16 +155,16 @@
                                                     <template #label>
                                                         <span>
                                                             动作
-                                                            <a-tooltip
+                                                            <j-tooltip
                                                                 title="DuerOS平台拟定的设备类型具有的相关动作"
                                                             >
                                                                 <AIcon
                                                                     type="QuestionCircleOutlined"
                                                                 />
-                                                            </a-tooltip>
+                                                            </j-tooltip>
                                                         </span>
                                                     </template>
-                                                    <a-select
+                                                    <j-select
                                                         placeholder="请选择动作"
                                                         v-model:value="
                                                             item.action
@@ -174,7 +174,7 @@
                                                             filterOption
                                                         "
                                                     >
-                                                        <a-select-option
+                                                        <j-select-option
                                                             v-for="i in getTypesActions(
                                                                 item.action,
                                                             )"
@@ -183,13 +183,13 @@
                                                             :label="i.name"
                                                             >{{
                                                                 i.name
-                                                            }}</a-select-option
+                                                            }}</j-select-option
                                                         >
-                                                    </a-select>
-                                                </a-form-item>
-                                            </a-col>
-                                            <a-col :span="12">
-                                                <a-form-item
+                                                    </j-select>
+                                                </j-form-item>
+                                            </j-col>
+                                            <j-col :span="12">
+                                                <j-form-item
                                                     :name="[
                                                         'actionMappings',
                                                         index,
@@ -203,16 +203,16 @@
                                                     <template #label>
                                                         <span>
                                                             操作
-                                                            <a-tooltip
+                                                            <j-tooltip
                                                                 title="映射物联网平台中所选产品具备的动作"
                                                             >
                                                                 <AIcon
                                                                     type="QuestionCircleOutlined"
                                                                 />
-                                                            </a-tooltip>
+                                                            </j-tooltip>
                                                         </span>
                                                     </template>
-                                                    <a-select
+                                                    <j-select
                                                         placeholder="请选择操作"
                                                         v-model:value="
                                                             item.actionType
@@ -222,22 +222,22 @@
                                                             filterOption
                                                         "
                                                     >
-                                                        <a-select-option
+                                                        <j-select-option
                                                             value="command"
-                                                            >下发指令</a-select-option
+                                                            >下发指令</j-select-option
                                                         >
-                                                        <a-select-option
+                                                        <j-select-option
                                                             value="latestData"
-                                                            >获取历史数据</a-select-option
+                                                            >获取历史数据</j-select-option
                                                         >
-                                                    </a-select>
-                                                </a-form-item>
-                                            </a-col>
-                                            <a-col
+                                                    </j-select>
+                                                </j-form-item>
+                                            </j-col>
+                                            <j-col
                                                 :span="24"
                                                 v-if="item.actionType"
                                             >
-                                                <a-form-item
+                                                <j-form-item
                                                     :name="[
                                                         'actionMappings',
                                                         index,
@@ -256,14 +256,14 @@
                                                             item.actionType
                                                         "
                                                     />
-                                                </a-form-item>
-                                            </a-col>
-                                        </a-row>
-                                    </a-collapse-panel>
-                                </a-collapse>
-                            </a-col>
-                            <a-col :span="24">
-                                <a-button
+                                                </j-form-item>
+                                            </j-col>
+                                        </j-row>
+                                    </j-collapse-panel>
+                                </j-collapse>
+                            </j-col>
+                            <j-col :span="24">
+                                <j-button
                                     type="dashed"
                                     style="width: 100%; margin-top: 10px"
                                     @click="addItem"
@@ -272,16 +272,16 @@
                                         type="PlusOutlined"
                                         style="margin-left: 2px"
                                     />新增动作
-                                </a-button>
-                            </a-col>
-                            <a-col :span="24">
+                                </j-button>
+                            </j-col>
+                            <j-col :span="24">
                                 <p style="margin-top: 20px">属性映射</p>
-                                <a-collapse
+                                <j-collapse
                                     v-if="modelRef.propertyMappings.length"
                                     :activeKey="propertyActiveKey"
                                     @change="onPropertyCollChange"
                                 >
-                                    <a-collapse-panel
+                                    <j-collapse-panel
                                         v-for="(
                                             item, index
                                         ) in modelRef.propertyMappings"
@@ -302,9 +302,9 @@
                                                 type="DeleteOutlined"
                                                 @click="delPropertyItem(index)"
                                         /></template>
-                                        <a-row :gutter="24">
-                                            <a-col :span="12">
-                                                <a-form-item
+                                        <j-row :gutter="24">
+                                            <j-col :span="12">
+                                                <j-form-item
                                                     label="DuerOS属性"
                                                     :name="[
                                                         'propertyMappings',
@@ -317,7 +317,7 @@
                                                             '请选择DuerOS属性',
                                                     }"
                                                 >
-                                                    <a-select
+                                                    <j-select
                                                         placeholder="请选择DuerOS属性"
                                                         v-model:value="
                                                             item.source
@@ -327,7 +327,7 @@
                                                             filterOption
                                                         "
                                                     >
-                                                        <a-select-option
+                                                        <j-select-option
                                                             v-for="i in getDuerOSProperties(
                                                                 item.source,
                                                             )"
@@ -335,13 +335,13 @@
                                                             :value="i.id"
                                                             >{{
                                                                 i.name
-                                                            }}</a-select-option
+                                                            }}</j-select-option
                                                         >
-                                                    </a-select>
-                                                </a-form-item>
-                                            </a-col>
-                                            <a-col :span="12">
-                                                <a-form-item
+                                                    </j-select>
+                                                </j-form-item>
+                                            </j-col>
+                                            <j-col :span="12">
+                                                <j-form-item
                                                     label="平台属性"
                                                     :name="[
                                                         'propertyMappings',
@@ -354,7 +354,7 @@
                                                             '请选择平台属性',
                                                     }"
                                                 >
-                                                    <a-select
+                                                    <j-select
                                                         placeholder="请选择平台属性"
                                                         v-model:value="
                                                             item.target
@@ -365,7 +365,7 @@
                                                             filterOption
                                                         "
                                                     >
-                                                        <a-select-option
+                                                        <j-select-option
                                                             v-for="i in getProductProperties(
                                                                 item.target,
                                                             )"
@@ -373,17 +373,17 @@
                                                             :value="item.id"
                                                             >{{
                                                                 i.name
-                                                            }}</a-select-option
+                                                            }}</j-select-option
                                                         >
-                                                    </a-select>
-                                                </a-form-item>
-                                            </a-col>
-                                        </a-row>
-                                    </a-collapse-panel>
-                                </a-collapse>
-                            </a-col>
-                            <a-col :span="24">
-                                <a-button
+                                                    </j-select>
+                                                </j-form-item>
+                                            </j-col>
+                                        </j-row>
+                                    </j-collapse-panel>
+                                </j-collapse>
+                            </j-col>
+                            <j-col :span="24">
+                                <j-button
                                     type="dashed"
                                     style="width: 100%; margin-top: 10px"
                                     @click="addPropertyItem"
@@ -392,10 +392,10 @@
                                         type="PlusOutlined"
                                         style="margin-left: 2px"
                                     />新增属性
-                                </a-button>
-                            </a-col>
-                            <a-col :span="24" style="margin-top: 20px">
-                                <a-form-item
+                                </j-button>
+                            </j-col>
+                            <j-col :span="24" style="margin-top: 20px">
+                                <j-form-item
                                     label="说明"
                                     name="description"
                                     :rules="{
@@ -403,16 +403,16 @@
                                         message: '最多输入200个字符',
                                     }"
                                 >
-                                    <a-textarea
+                                    <j-textarea
                                         v-model:value="modelRef.description"
                                         placeholder="请输入说明"
                                         showCount
                                         :maxlength="200"
                                     />
-                                </a-form-item>
-                            </a-col>
-                        </a-row>
-                    </a-form>
+                                </j-form-item>
+                            </j-col>
+                        </j-row>
+                    </j-form>
                     <div v-if="type === 'edit'">
                         <PermissionButton
                             type="primary"
@@ -423,12 +423,12 @@
                             保存
                         </PermissionButton>
                     </div>
-                </a-col>
-                <a-col :span="8">
+                </j-col>
+                <j-col :span="8">
                     <Doc />
-                </a-col>
-            </a-row>
-        </a-card>
+                </j-col>
+            </j-row>
+        </j-card>
     </page-container>
 </template>
 
@@ -442,9 +442,10 @@ import {
     detail,
 } from '@/api/northbound/dueros';
 import _ from 'lodash';
-import { message } from 'ant-design-vue';
+import { message } from 'jetlinks-ui-components';
+import { useMenuStore } from '@/store/menu';
 
-const router = useRouter();
+const menuStory = useMenuStore();
 const route = useRoute();
 
 const formRef = ref();
@@ -640,7 +641,8 @@ const saveBtn = async () => {
                 if (resp.status === 200) {
                     message.success('操作成功！');
                     formRef.value.resetFields();
-                    router.push('/iot/northbound/DuerOS/');
+                    menuStory.jumpPage('Northbound/DuerOS');
+
                 }
             }
         })
diff --git a/src/views/Northbound/DuerOS/index.vue b/src/views/Northbound/DuerOS/index.vue
index 39cf2dcf..f43960d7 100644
--- a/src/views/Northbound/DuerOS/index.vue
+++ b/src/views/Northbound/DuerOS/index.vue
@@ -1,11 +1,11 @@
 <template>
     <page-container>
-        <Search
+        <j-advanced-search
             :columns="columns"
             target="northbound-dueros"
             @search="handleSearch"
         />
-        <JTable
+        <JProTable
             ref="instanceRef"
             :columns="columns"
             :request="query"
@@ -13,7 +13,7 @@
             :params="params"
         >
             <template #headerTitle>
-                <a-space>
+                <j-space>
                     <PermissionButton
                         type="primary"
                         @click="handleAdd"
@@ -22,7 +22,7 @@
                         <template #icon><AIcon type="PlusOutlined" /></template>
                         新增
                     </PermissionButton>
-                </a-space>
+                </j-space>
             </template>
             <template #card="slotProps">
                 <CardBox
@@ -45,18 +45,18 @@
                         >
                             {{ slotProps.name }}
                         </h3>
-                        <a-row>
-                            <a-col :span="12">
+                        <j-row>
+                            <j-col :span="12">
                                 <div class="card-item-content-text">产品</div>
                                 <div>{{ slotProps?.productName }}</div>
-                            </a-col>
-                            <a-col :span="12">
+                            </j-col>
+                            <j-col :span="12">
                                 <div class="card-item-content-text">
                                     设备类型
                                 </div>
                                 <div>{{ slotProps?.applianceType?.text }}</div>
-                            </a-col>
-                        </a-row>
+                            </j-col>
+                        </j-row>
                     </template>
                     <template #actions="item">
                         <PermissionButton
@@ -81,7 +81,7 @@
                 </CardBox>
             </template>
             <template #state="slotProps">
-                <a-badge
+                <j-badge
                     :text="slotProps.state?.text"
                     :status="statusMap.get(slotProps.state?.value)"
                 />
@@ -90,7 +90,7 @@
                 {{ slotProps.applianceType.text }}
             </template>
             <template #action="slotProps">
-                <a-space>
+                <j-space>
                     <template
                         v-for="i in getActions(slotProps, 'table')"
                         :key="i.key"
@@ -109,9 +109,9 @@
                             <template #icon><AIcon :type="i.icon" /></template>
                         </PermissionButton>
                     </template>
-                </a-space>
+                </j-space>
             </template>
-        </JTable>
+        </JProTable>
     </page-container>
 </template>
 
@@ -124,15 +124,13 @@ import {
     queryProductList,
     queryTypes,
 } from '@/api/northbound/dueros';
-import type { ActionsType } from '@/components/Table/index.vue';
+import type { ActionsType } from '@/views/device/Instance/typings';
 import { getImage } from '@/utils/comm';
-import { message } from 'ant-design-vue';
+import { message } from 'jetlinks-ui-components';
 import { useMenuStore } from 'store/menu';
 
-const router = useRouter();
 const instanceRef = ref<Record<string, any>>({});
 const params = ref<Record<string, any>>({});
-const current = ref<Record<string, any>>({});
 const menuStory = useMenuStore();
 
 const statusMap = new Map();
diff --git a/src/views/device/Instance/Detail/Diagnose/Message/Function/EditTable.vue b/src/views/device/Instance/Detail/Diagnose/Message/Function/EditTable.vue
index 2a2f2d30..d0d4c40d 100644
--- a/src/views/device/Instance/Detail/Diagnose/Message/Function/EditTable.vue
+++ b/src/views/device/Instance/Detail/Diagnose/Message/Function/EditTable.vue
@@ -2,7 +2,7 @@
     <j-table
         rowKey="id"
         :columns="columns"
-        :datj-source="dataSource"
+        :data-source="dataSource"
         bordered
         :pagination="false"
     >
@@ -40,8 +40,7 @@
 </template>
 
 <script lang="ts" setup>
-import { PropType } from "vue-demi";
-
+import { PropType } from "vue";
 
 type Emits = {
     (e: 'update:modelValue', data: Record<string, any>[]): void;
diff --git a/src/views/device/Instance/Detail/Info/components/Tags/Save.vue b/src/views/device/Instance/Detail/Info/components/Tags/Save.vue
index 68011ce4..11757f17 100644
--- a/src/views/device/Instance/Detail/Info/components/Tags/Save.vue
+++ b/src/views/device/Instance/Detail/Info/components/Tags/Save.vue
@@ -9,7 +9,7 @@
         <j-table
             rowKey="id"
             :columns="columns"
-            :datj-source="dataSource"
+            :data-source="dataSource"
             bordered
             :pagination="false"
         >
diff --git a/yarn.lock b/yarn.lock
index 40dff6cf..b8ef732f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3903,8 +3903,8 @@ jetlinks-store@^0.0.3:
 
 jetlinks-ui-components@^1.0.4:
   version "1.0.4"
-  resolved "https://registry.jetlinks.cn/jetlinks-ui-components/-/jetlinks-ui-components-1.0.4.tgz#418d9218c2d0076b4a16606eb87ea755db303409"
-  integrity sha512-7c509Xx4YVamM/R6Xg62iIOxh2gWz8ASKCN2Pa8lU2CP1n+Vn5Xi5Q0fpd0AiFdi1QadssGaGUkpzbqCqWXLsQ==
+  resolved "https://registry.jetlinks.cn/jetlinks-ui-components/-/jetlinks-ui-components-1.0.4.tgz#4c7dc568b20a9bda7decbbb6b30f0191cb4340af"
+  integrity sha512-V1lydb150+9N+wKPaZSF+WYF1bPj1bQ8nCge8EP093tqH/wVHEs3mYRlHEEfNf/+SLIcrWuPCISihfMatVIlTQ==
   dependencies:
     "@vueuse/core" "^9.12.0"
     ant-design-vue "^3.2.15"

From 09fdc80e8d0efa6923c7fec7efa5ae5a8e07ee77 Mon Sep 17 00:00:00 2001
From: JiangQiming <291854119@qq.com>
Date: Mon, 6 Mar 2023 19:21:31 +0800
Subject: [PATCH 13/16] =?UTF-8?q?update:=20=E8=A7=86=E9=A2=91=E5=9B=9E?=
 =?UTF-8?q?=E6=94=BE=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/media/Device/Playback/iconNode.vue |  3 ++
 src/views/media/Device/Playback/index.less   |  7 ++---
 src/views/media/Device/Playback/index.vue    | 30 ++++++++++++++------
 3 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/src/views/media/Device/Playback/iconNode.vue b/src/views/media/Device/Playback/iconNode.vue
index bf39f32b..63a0dce8 100644
--- a/src/views/media/Device/Playback/iconNode.vue
+++ b/src/views/media/Device/Playback/iconNode.vue
@@ -55,6 +55,9 @@ const downLoadCloud = (item: recordsItemType) => {
                 );
             }
             status.value = res.status === 200 ? 2 : 0;
+        })
+        .catch(() => {
+            status.value = 0;
         });
 };
 
diff --git a/src/views/media/Device/Playback/index.less b/src/views/media/Device/Playback/index.less
index dfa44d81..bbe961c2 100644
--- a/src/views/media/Device/Playback/index.less
+++ b/src/views/media/Device/Playback/index.less
@@ -25,11 +25,10 @@
             border: 1px solid @borderColor;
             border-radius: 2px;
 
-            .ant-picker-calendar-header {
+            :deep(.ant-picker-calendar-header) {
                 justify-content: space-between;
-
-                > div:nth-child(3) {
-                    display: none;
+                & > div:nth-child(3) {
+                    display: none !important;
                 }
             }
         }
diff --git a/src/views/media/Device/Playback/index.vue b/src/views/media/Device/Playback/index.vue
index cc225d39..6f329592 100644
--- a/src/views/media/Device/Playback/index.vue
+++ b/src/views/media/Device/Playback/index.vue
@@ -35,12 +35,12 @@
                             {
                                 label: '云端',
                                 value: 'cloud',
-                                imgUrl: getImage('/media/cloud.png'),
+                                logo: getImage('/media/cloud.png'),
                             },
                             {
                                 label: '本地',
                                 value: 'local',
-                                imgUrl: getImage('/local.png'),
+                                logo: getImage('/local.png'),
                                 disabled: deviceType === 'fixed-media',
                             },
                         ]"
@@ -55,15 +55,19 @@
                                 (currentDate) =>
                                     currentDate > moment(new Date())
                             "
-                            @panelChange="handlePanelChange"
+                            @change="handlePanelChange"
                         />
                     </div>
                     <div
                         class="playback-list"
                         :class="{ 'no-list': !historyList.length }"
                     >
-                        <a-empty v-if="!historyList.length" />
+                        <a-empty
+                            v-if="!historyList.length"
+                            description="暂无数据"
+                        />
                         <a-list
+                            v-else
                             class="playback-list-items"
                             itemLayout="horizontal"
                             :dataSource="historyList"
@@ -82,7 +86,14 @@
                                                     : '播放'
                                             "
                                         >
-                                            <a @click="handlePlay">
+                                            <a
+                                                @click="
+                                                    handlePlay(
+                                                        item.startTime ||
+                                                            item.mediaStartTime,
+                                                    )
+                                                "
+                                            >
                                                 <AIcon
                                                     :type="
                                                         (item.startTime ||
@@ -169,14 +180,15 @@ const playNowTime = ref(0); // 当前播放视频标识
 const playTimeNode = ref<any>(null);
 const isEnded = ref(false); // 是否结束播放
 const param = new URLSearchParams(location.value.search);
-const deviceId = computed(() => route.params.id as string);
-const channelId = computed(() => route.params.channelId as string);
+const deviceId = computed(() => route.query.id as string);
+const channelId = computed(() => route.query.channelId as string);
 
 const deviceType = ref('');
 
 const queryLocalRecords = async (date: Moment) => {
     playStatus.value = 0;
     url.value = '';
+
     if (deviceId.value && channelId.value && date) {
         loading.value = true;
         const params = {
@@ -326,7 +338,7 @@ watch(
 );
 
 const handlePanelChange = (date: any) => {
-    // time.value = date;
+    time.value = date;
     if (type.value === 'cloud') {
         queryServiceRecords(date);
     } else {
@@ -334,7 +346,7 @@ const handlePanelChange = (date: any) => {
     }
 };
 
-// 播放暂停
+// 播放/暂停
 const handlePlay = (_startTime: any) => {
     if (playStatus.value === 0 || _startTime !== playNowTime.value) {
         if (playTimeNode.value) {

From c42ce6a3c136ecd2e63d2d410d91843d9c32c6a0 Mon Sep 17 00:00:00 2001
From: JiangQiming <291854119@qq.com>
Date: Mon, 6 Mar 2023 19:44:17 +0800
Subject: [PATCH 14/16] =?UTF-8?q?update:=20=E8=A7=86=E9=A2=91=E5=9B=9E?=
 =?UTF-8?q?=E6=94=BE=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/media/Device/Playback/index.vue | 34 +++++++++++++++++++----
 1 file changed, 29 insertions(+), 5 deletions(-)

diff --git a/src/views/media/Device/Playback/index.vue b/src/views/media/Device/Playback/index.vue
index 6f329592..0aa65dbc 100644
--- a/src/views/media/Device/Playback/index.vue
+++ b/src/views/media/Device/Playback/index.vue
@@ -162,6 +162,7 @@ import IconNode from './iconNode.vue';
 import type { recordsItemType } from './typings';
 import LivePlayer from '@/components/Player/index.vue';
 import { getImage } from '@/utils/comm';
+import dayjs from 'dayjs';
 
 const route = useRoute();
 
@@ -171,7 +172,7 @@ const historyList = ref<recordsItemType[]>([]);
 const time = ref<Moment | undefined>(undefined);
 const loading = ref(false);
 const cloudTime = ref<any>();
-const location = ref({ search: '' });
+// const location = ref();
 const player = ref<any>();
 const playStatus = ref(0); // 播放状态, 0 停止， 1 播放， 2 暂停, 3 播放完成
 const playTime = ref(0);
@@ -179,13 +180,14 @@ const playTime = ref(0);
 const playNowTime = ref(0); // 当前播放视频标识
 const playTimeNode = ref<any>(null);
 const isEnded = ref(false); // 是否结束播放
-const param = new URLSearchParams(location.value.search);
 const deviceId = computed(() => route.query.id as string);
 const channelId = computed(() => route.query.channelId as string);
 
 const deviceType = ref('');
 
 const queryLocalRecords = async (date: Moment) => {
+    console.log('date: ', date);
+
     playStatus.value = 0;
     url.value = '';
 
@@ -287,10 +289,9 @@ const downloadClick = async (item: recordsItemType) => {
 };
 
 watch(
-    () => location.value,
+    () => route.query,
     (val: any) => {
-        const _param = new URLSearchParams(val?.search);
-        const _type = _param.get('type');
+        const _type = val.type;
 
         if (_type) {
             deviceType.value = _type;
@@ -306,6 +307,27 @@ watch(
         }
     },
 );
+// onMounted(() => {
+//     const _type = route.query.type as string;
+//     if (_type) {
+//         // 
+//         const _timeStr = moment(new Date());
+//         console.log('_timeStr: ', _timeStr);
+//         const _timeStr1 = dayjs(new Date());
+//         console.log('_timeStr1: ', _timeStr1);
+//         // 
+//         // deviceType.value = _type;
+//         // const _timeStr = moment(new Date());
+//         // time.value = _timeStr;
+//         // if (_type === 'fixed-media') {
+//         //     type.value = 'cloud';
+//         //     queryServiceRecords(_timeStr);
+//         // } else {
+//         //     queryLocalRecords(_timeStr);
+//         //     type.value = 'local';
+//         // }
+//     }
+// });
 
 const handleTimeLineChange = (times: any) => {
     if (times) {
@@ -338,6 +360,8 @@ watch(
 );
 
 const handlePanelChange = (date: any) => {
+    console.log('type: ', typeof date);
+    console.log('date: ', date);
     time.value = date;
     if (type.value === 'cloud') {
         queryServiceRecords(date);

From 065c8ca488c0dff487fa924e0b9f67203e19341f Mon Sep 17 00:00:00 2001
From: JiangQiming <291854119@qq.com>
Date: Mon, 6 Mar 2023 20:01:03 +0800
Subject: [PATCH 15/16] =?UTF-8?q?update:=20moment=E6=9B=B4=E6=8D=A2?=
 =?UTF-8?q?=E4=B8=BAdayjs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/media/Device/Playback/index.vue    | 75 +++++++-------------
 src/views/media/Device/Playback/timeLine.vue | 22 +++---
 2 files changed, 35 insertions(+), 62 deletions(-)

diff --git a/src/views/media/Device/Playback/index.vue b/src/views/media/Device/Playback/index.vue
index 0aa65dbc..89703bbb 100644
--- a/src/views/media/Device/Playback/index.vue
+++ b/src/views/media/Device/Playback/index.vue
@@ -52,8 +52,7 @@
                             v-model:value="time"
                             :fullscreen="false"
                             :disabledDate="
-                                (currentDate) =>
-                                    currentDate > moment(new Date())
+                                (currentDate) => currentDate > dayjs(new Date())
                             "
                             @change="handlePanelChange"
                         />
@@ -129,14 +128,14 @@
 
                                     <div>
                                         {{
-                                            moment(
+                                            dayjs(
                                                 item.startTime ||
                                                     item.mediaStartTime,
                                             ).format('HH:mm:ss')
                                         }}
                                         ~
                                         {{
-                                            moment(
+                                            dayjs(
                                                 item.endTime ||
                                                     item.mediaEndTime,
                                             ).format('HH:mm:ss')
@@ -155,21 +154,20 @@
 
 <script setup lang="ts">
 import playBackApi from '@/api/media/playback';
-import type { Moment } from 'moment';
-import moment from 'moment';
 import TimeLine from './timeLine.vue';
 import IconNode from './iconNode.vue';
 import type { recordsItemType } from './typings';
 import LivePlayer from '@/components/Player/index.vue';
 import { getImage } from '@/utils/comm';
 import dayjs from 'dayjs';
+import type { Dayjs } from 'dayjs';
 
 const route = useRoute();
 
 const url = ref('');
 const type = ref('local');
 const historyList = ref<recordsItemType[]>([]);
-const time = ref<Moment | undefined>(undefined);
+const time = ref<Dayjs | undefined>(undefined);
 const loading = ref(false);
 const cloudTime = ref<any>();
 // const location = ref();
@@ -185,7 +183,7 @@ const channelId = computed(() => route.query.channelId as string);
 
 const deviceType = ref('');
 
-const queryLocalRecords = async (date: Moment) => {
+const queryLocalRecords = async (date: Dayjs) => {
     console.log('date: ', date);
 
     playStatus.value = 0;
@@ -246,7 +244,7 @@ const queryLocalRecords = async (date: Moment) => {
  * 查询云端视频
  * @param date
  */
-const queryServiceRecords = async (date: Moment) => {
+const queryServiceRecords = async (date: Dayjs) => {
     playStatus.value = 0;
     url.value = '';
     if (deviceId.value && channelId.value && date) {
@@ -279,7 +277,7 @@ const downloadClick = async (item: recordsItemType) => {
     const downloadUrl = playBackApi.downLoadFile(item.id);
     const downNode = document.createElement('a');
     downNode.href = downloadUrl;
-    downNode.download = `${channelId}-${moment(item.startTime).format(
+    downNode.download = `${channelId}-${dayjs(item.startTime).format(
         'YYYY-MM-DD-HH-mm-ss',
     )}.mp4`;
     downNode.style.display = 'none';
@@ -288,46 +286,21 @@ const downloadClick = async (item: recordsItemType) => {
     document.body.removeChild(downNode);
 };
 
-watch(
-    () => route.query,
-    (val: any) => {
-        const _type = val.type;
-
-        if (_type) {
-            deviceType.value = _type;
-            const _timeStr = moment(new Date());
-            time.value = _timeStr;
-            if (_type === 'fixed-media') {
-                type.value = 'cloud';
-                queryServiceRecords(_timeStr);
-            } else {
-                queryLocalRecords(_timeStr);
-                type.value = 'local';
-            }
+onMounted(() => {
+    const _type = route.query.type as string;
+    if (_type) {
+        deviceType.value = _type;
+        const _timeStr = dayjs(new Date());
+        time.value = _timeStr;
+        if (_type === 'fixed-media') {
+            type.value = 'cloud';
+            queryServiceRecords(_timeStr);
+        } else {
+            queryLocalRecords(_timeStr);
+            type.value = 'local';
         }
-    },
-);
-// onMounted(() => {
-//     const _type = route.query.type as string;
-//     if (_type) {
-//         // 
-//         const _timeStr = moment(new Date());
-//         console.log('_timeStr: ', _timeStr);
-//         const _timeStr1 = dayjs(new Date());
-//         console.log('_timeStr1: ', _timeStr1);
-//         // 
-//         // deviceType.value = _type;
-//         // const _timeStr = moment(new Date());
-//         // time.value = _timeStr;
-//         // if (_type === 'fixed-media') {
-//         //     type.value = 'cloud';
-//         //     queryServiceRecords(_timeStr);
-//         // } else {
-//         //     queryLocalRecords(_timeStr);
-//         //     type.value = 'local';
-//         // }
-//     }
-// });
+    }
+});
 
 const handleTimeLineChange = (times: any) => {
     if (times) {
@@ -339,8 +312,8 @@ const handleTimeLineChange = (times: any) => {
                       times.deviceId,
                       times.channelId,
                       'mp4',
-                      moment(times.startTime).format('YYYY-MM-DD HH:mm:ss'),
-                      moment(times.endTime).format('YYYY-MM-DD HH:mm:ss'),
+                      dayjs(times.startTime).format('YYYY-MM-DD HH:mm:ss'),
+                      dayjs(times.endTime).format('YYYY-MM-DD HH:mm:ss'),
                   )
                 : playBackApi.playbackStart(times.deviceId);
     } else {
diff --git a/src/views/media/Device/Playback/timeLine.vue b/src/views/media/Device/Playback/timeLine.vue
index e57e3aa0..e743be81 100644
--- a/src/views/media/Device/Playback/timeLine.vue
+++ b/src/views/media/Device/Playback/timeLine.vue
@@ -26,7 +26,7 @@
             </div>
             <div id="btn" class="time-line-btn"></div>
             <div id="time" class="time-line">
-                {{ moment(playTime || 0).format('HH:mm:ss') }}
+                {{ dayjs(playTime || 0).format('HH:mm:ss') }}
             </div>
         </div>
     </div>
@@ -34,13 +34,13 @@
 
 <script setup lang="ts">
 import { message } from 'ant-design-vue';
-import type { Moment } from 'moment';
-import moment from 'moment';
 import type { recordsItemType } from './typings';
+import type { Dayjs } from 'dayjs';
+import dayjs from 'dayjs';
 
 export type TimeChangeType = {
-    endTime: Moment;
-    startTime: Moment;
+    endTime: Dayjs;
+    startTime: Dayjs;
     deviceId: string;
     channelId: string;
 };
@@ -48,7 +48,7 @@ export type TimeChangeType = {
 interface Props {
     onChange: (times: TimeChangeType | undefined) => void;
     data: recordsItemType[];
-    dateTime?: Moment;
+    dateTime?: Dayjs;
     type: string;
     playStatus: number;
     playTime: number;
@@ -65,13 +65,13 @@ const props = defineProps<Props>();
 // 获取选中当天开始时间戳
 const startT = ref<number>(
     new Date(
-        moment(props.dateTime).startOf('day').format('YYYY-MM-DD HH:mm:ss'),
+        dayjs(props.dateTime).startOf('day').format('YYYY-MM-DD HH:mm:ss'),
     ).getTime(),
 );
 // 获取选中当天结束时间戳
 const endT = ref<number>(
     new Date(
-        moment(props.dateTime).endOf('day').format('YYYY-MM-DD HH:mm:ss'),
+        dayjs(props.dateTime).endOf('day').format('YYYY-MM-DD HH:mm:ss'),
     ).getTime(),
 );
 const list = ref<any[]>([]);
@@ -96,7 +96,7 @@ watch(
     () => props.dateTime,
     (val: any) => {
         startT.value = new Date(
-            moment(val).startOf('day').format('YYYY-MM-DD HH:mm:ss'),
+            dayjs(val).startOf('day').format('YYYY-MM-DD HH:mm:ss'),
         ).getTime();
     },
 );
@@ -109,8 +109,8 @@ const onChange = (
 ) => {
     playTime.value = startTime;
     props.onChange({
-        startTime: moment(startTime),
-        endTime: moment(endTime),
+        startTime: dayjs(startTime),
+        endTime: dayjs(endTime),
         deviceId,
         channelId,
     });

From d4d26c504da2c16f0a07d2525729f3033ed7a937 Mon Sep 17 00:00:00 2001
From: easy <1358086367@qq.com>
Date: Mon, 6 Mar 2023 20:06:49 +0800
Subject: [PATCH 16/16] =?UTF-8?q?update:=20=E8=8F=9C=E5=8D=95=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E7=BB=84=E4=BB=B6=E6=9B=BF=E6=8D=A2=E3=80=81=E7=97=B0?=
 =?UTF-8?q?=E5=96=98=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/Menu/Detail/BasicInfo.vue    | 168 +++++++-------
 src/views/system/Menu/Detail/ButtonMange.vue  |  33 +--
 src/views/system/Menu/Detail/index.vue        |  12 +-
 .../Menu/components/ButtonAddDialog.vue       | 107 ++++-----
 .../Menu/components/ChooseIconDialog.vue      |  47 ++--
 .../system/Menu/components/PermissChoose.vue  |  11 +-
 src/views/system/Menu/index.vue               | 206 +++++++-----------
 7 files changed, 256 insertions(+), 328 deletions(-)

diff --git a/src/views/system/Menu/Detail/BasicInfo.vue b/src/views/system/Menu/Detail/BasicInfo.vue
index 2a52fd3c..16b4214b 100644
--- a/src/views/system/Menu/Detail/BasicInfo.vue
+++ b/src/views/system/Menu/Detail/BasicInfo.vue
@@ -1,10 +1,10 @@
 <template>
     <div class="basic-info-container">
-        <a-card>
+        <div class="card">
             <h3>基本信息</h3>
-            <a-form ref="basicFormRef" :model="form.data" class="basic-form">
+            <j-form ref="basicFormRef" :model="form.data" class="basic-form">
                 <div class="row" style="display: flex">
-                    <a-form-item
+                    <j-form-item
                         label="菜单图标"
                         name="icon"
                         :rules="[
@@ -20,25 +20,28 @@
                                 :type="form.data.icon"
                                 style="font-size: 90px"
                             />
-                            <span class="mark" @click="dialog.openDialog"
+                            <span class="mark" @click="dialogVisible = true"
                                 >点击修改</span
                             >
                         </div>
 
                         <div
                             v-else
-                            @click="dialog.openDialog"
+                            @click="dialogVisible = true"
                             class="icon-upload no-icon"
                         >
                             <span>
-                                <plus-outlined style="font-size: 30px" />
+                                <AIcon
+                                    type="PlusOutlined"
+                                    style="font-size: 30px"
+                                />
                                 <p>点击选择图标</p>
                             </span>
                         </div>
-                    </a-form-item>
-                    <a-row :gutter="24" style="flex: 1 1 auto">
-                        <a-col :span="12">
-                            <a-form-item
+                    </j-form-item>
+                    <j-row :gutter="24" style="flex: 1 1 auto">
+                        <j-col :span="12">
+                            <j-form-item
                                 label="名称"
                                 name="name"
                                 :rules="[
@@ -46,11 +49,11 @@
                                     { max: 64, message: '最多可输入64个字符' },
                                 ]"
                             >
-                                <a-input v-model:value="form.data.name" />
-                            </a-form-item>
-                        </a-col>
-                        <a-col :span="12">
-                            <a-form-item
+                                <j-input v-model:value="form.data.name" />
+                            </j-form-item>
+                        </j-col>
+                        <j-col :span="12">
+                            <j-form-item
                                 label="编码"
                                 name="code"
                                 :rules="[
@@ -58,11 +61,11 @@
                                     { max: 64, message: '最多可输入64个字符' },
                                 ]"
                             >
-                                <a-input v-model:value="form.data.code" />
-                            </a-form-item>
-                        </a-col>
-                        <a-col :span="12">
-                            <a-form-item
+                                <j-input v-model:value="form.data.code" />
+                            </j-form-item>
+                        </j-col>
+                        <j-col :span="12">
+                            <j-form-item
                                 label="页面地址"
                                 name="url"
                                 :rules="[
@@ -73,11 +76,11 @@
                                     { max: 128, message: '最多可输入128字符' },
                                 ]"
                             >
-                                <a-input v-model:value="form.data.url" />
-                            </a-form-item>
-                        </a-col>
-                        <a-col :span="12">
-                            <a-form-item
+                                <j-input v-model:value="form.data.url" />
+                            </j-form-item>
+                        </j-col>
+                        <j-col :span="12">
+                            <j-form-item
                                 label="排序"
                                 name="sortIndex"
                                 :rules="[
@@ -87,80 +90,84 @@
                                     },
                                 ]"
                             >
-                                <a-input v-model:value="form.data.sortIndex" />
-                            </a-form-item>
-                        </a-col>
-                    </a-row>
+                                <j-input v-model:value="form.data.sortIndex" />
+                            </j-form-item>
+                        </j-col>
+                    </j-row>
                 </div>
 
-                <a-form-item label="说明" name="describe">
-                    <a-textarea
+                <j-form-item label="说明" name="describe">
+                    <j-textarea
                         v-model:value="form.data.describe"
                         :rows="4"
                         placeholder="请输入说明"
                     />
-                </a-form-item>
-            </a-form>
-        </a-card>
-        <a-card>
+                </j-form-item>
+            </j-form>
+        </div>
+        <div class="card">
             <h3>权限配置</h3>
-            <a-form
+            <j-form
                 ref="permissFormRef"
                 :model="form.data"
                 class="basic-form permiss-form"
             >
-                <a-form-item name="accessSupport" required>
+                <j-form-item name="accessSupport" required>
                     <template #label>
                         <span style="margin-right: 3px">数据权限控制</span>
-                        <a-tooltip title="此菜单页面数据所对应的资产类型">
-                            <question-circle-outlined
+                        <j-tooltip title="此菜单页面数据所对应的资产类型">
+                            <AIcon
+                                type="QuestionCircleOutlined"
                                 class="img-style"
                                 style="color: #a6a6a6"
                             />
-                        </a-tooltip>
+                        </j-tooltip>
                     </template>
-                    <a-radio-group
+                    <j-radio-group
                         v-model:value="form.data.accessSupport"
                         name="radioGroup"
                     >
-                        <a-radio value="unsupported">不支持</a-radio>
-                        <a-radio value="support">支持</a-radio>
-                        <a-radio value="indirect">
+                        <j-radio value="unsupported">不支持</j-radio>
+                        <j-radio value="support">支持</j-radio>
+                        <j-radio value="indirect">
                             <span style="margin-right: 3px">间接控制</span>
-                            <a-tooltip
+                            <j-tooltip
                                 title="此菜单内的数据基于其他菜单的数据权限控制"
                             >
-                                <question-circle-filled class="img-style" />
-                            </a-tooltip>
-                        </a-radio>
-                    </a-radio-group>
+                                <AIcon
+                                    type="QuestionCircleFilled"
+                                    class="img-style"
+                                />
+                            </j-tooltip>
+                        </j-radio>
+                    </j-radio-group>
 
-                    <a-form-item
+                    <j-form-item
                         name="assetType"
                         v-if="form.data.accessSupport === 'support'"
                         :rules="[{ required: true, message: '请选择资产类型' }]"
                         style="margin-top: 24px; margin-bottom: 0"
                     >
-                        <a-select
+                        <j-select
                             v-model:value="form.data.assetType"
                             style="width: 500px"
                             placeholder="请选择资产类型"
                         >
-                            <a-select-option
+                            <j-select-option
                                 v-for="item in form.assetsType"
                                 :value="item.value"
-                                >{{ item.label }}</a-select-option
+                                >{{ item.label }}</j-select-option
                             >
-                        </a-select>
-                    </a-form-item>
+                        </j-select>
+                    </j-form-item>
 
-                    <a-form-item
+                    <j-form-item
                         name="indirectMenus"
                         v-if="form.data.accessSupport === 'indirect'"
                         :rules="[{ required: true, message: '请选择关联菜单' }]"
                         style="margin-top: 24px; margin-bottom: 0"
                     >
-                        <a-tree-select
+                        <j-tree-select
                             v-model:value="form.data.indirectMenus"
                             style="width: 400px"
                             :dropdown-style="{
@@ -177,18 +184,18 @@
                                 value: 'id',
                             }"
                         >
-                        </a-tree-select>
-                    </a-form-item>
-                </a-form-item>
-                <a-form-item label="权限">
+                        </j-tree-select>
+                    </j-form-item>
+                </j-form-item>
+                <j-form-item label="权限">
                     <PermissChoose
                         :first-width="3"
                         max-height="350px"
                         v-model:value="form.data.permissions"
                         :key="form.data.id || ''"
                     />
-                </a-form-item>
-            </a-form>
+                </j-form-item>
+            </j-form>
 
             <PermissionButton
                 type="primary"
@@ -197,22 +204,20 @@
             >
                 保存
             </PermissionButton>
-        </a-card>
+        </div>
 
         <!-- 弹窗 -->
-        <div class="dialogs">
-            <ChooseIconDialog ref="ChooseIconRef" @confirm="dialog.confirm" />
-        </div>
+        <ChooseIconDialog
+            v-if="dialogVisible"
+            v-model:visible="dialogVisible"
+            @confirm="(typeStr:string)=>form.data.icon = typeStr"
+        />
     </div>
 </template>
 
 <script setup lang="ts">
 import PermissionButton from '@/components/PermissionButton/index.vue';
-import {
-    PlusOutlined,
-    QuestionCircleFilled,
-    QuestionCircleOutlined,
-} from '@ant-design/icons-vue';
+
 import { FormInstance, message } from 'ant-design-vue';
 import ChooseIconDialog from '../components/ChooseIconDialog.vue';
 import PermissChoose from '../components/PermissChoose.vue';
@@ -260,9 +265,12 @@ const form = reactive({
         // 获取菜单详情
         routeParams.id &&
             getMenuInfo_api(routeParams.id).then((resp: any) => {
+                console.log(1111);
+
                 form.data = {
                     ...(resp.result as formType),
-                    accessSupport: resp.result.accessSupport.value,
+                    accessSupport:
+                        resp.result?.accessSupport?.value || 'unsupported',
                 };
             });
         // 获取关联菜单
@@ -323,15 +331,7 @@ const form = reactive({
 form.init();
 
 // 弹窗
-const ChooseIconRef = ref<any>(null);
-const dialog = {
-    openDialog: () => {
-        ChooseIconRef.value && ChooseIconRef.value.openDialog();
-    },
-    confirm: (typeStr: string) => {
-        form.data.icon = typeStr || form.data.icon;
-    },
-};
+const dialogVisible = ref(false);
 
 type formType = {
     id?: string;
@@ -356,8 +356,10 @@ type assetType = {
 
 <style lang="less" scoped>
 .basic-info-container {
-    .ant-card {
+    .card {
         margin-bottom: 24px;
+        padding: 24px;
+        background-color: #fff;
 
         h3 {
             position: relative;
diff --git a/src/views/system/Menu/Detail/ButtonMange.vue b/src/views/system/Menu/Detail/ButtonMange.vue
index ebe8a14c..0a479912 100644
--- a/src/views/system/Menu/Detail/ButtonMange.vue
+++ b/src/views/system/Menu/Detail/ButtonMange.vue
@@ -11,18 +11,18 @@
                 <PermissionButton
                     type="primary"
                     :uhasPermission="`${permission}:update`"
-                    @click="dialog.openDialog('新增')"
+                    @click="openDialog('新增', {})"
                 >
                     <AIcon type="PlusOutlined" />新增
                 </PermissionButton>
             </template>
             <template #action="slotProps">
-                <a-space :size="16">
+                <j-space :size="16">
                     <PermissionButton
                         type="link"
                         :uhasPermission="`${permission}:update`"
                         :tooltip="{ title: '编辑' }"
-                        @click="dialog.openDialog('编辑', slotProps)"
+                        @click="openDialog('编辑', slotProps)"
                     >
                         <AIcon type="EditOutlined" />
                     </PermissionButton>
@@ -30,7 +30,7 @@
                         type="link"
                         :uhasPermission="true"
                         :tooltip="{ title: '查看' }"
-                        @click="dialog.openDialog('查看', slotProps)"
+                        @click="openDialog('查看', slotProps)"
                     >
                         <AIcon type="SearchOutlined" />
                     </PermissionButton>
@@ -45,15 +45,18 @@
                     >
                         <AIcon type="DeleteOutlined" />
                     </PermissionButton>
-                </a-space>
+                </j-space>
             </template>
         </j-pro-table>
 
         <div class="dialog">
             <ButtonAddDialog
-                ref="dialogRef"
-                @confirm="dialog.confirm"
+                v-if="dialogVisible"
+                v-model:visible="dialogVisible"
                 :menu-info="menuInfo"
+                :mode="dialogTitle"
+                :data="selectItem"
+                @confirm="table.getList"
             />
         </div>
     </div>
@@ -76,15 +79,13 @@ const routeParams = {
 };
 
 // 弹窗相关
-const dialogRef = ref<any>(null);
-const dialog = {
-    // 打开弹窗
-    openDialog: (mode: string, row?: object) => {
-        dialogRef.value && dialogRef.value.openDialog(mode, { ...row });
-    },
-    confirm: () => {
-        table.getList();
-    },
+const selectItem = ref<any>({});
+const dialogVisible = ref(false);
+const dialogTitle = ref<'查看' | '新增' | '编辑'>('新增');
+const openDialog = (mode: '查看' | '新增' | '编辑', row: object) => {
+    selectItem.value = { ...row };
+    dialogTitle.value = mode;
+    dialogVisible.value = true;
 };
 // 菜单的基本信息-其中包括了表格的数据
 const menuInfo = ref<any>({});
diff --git a/src/views/system/Menu/Detail/index.vue b/src/views/system/Menu/Detail/index.vue
index ef85f79c..3b6876e8 100644
--- a/src/views/system/Menu/Detail/index.vue
+++ b/src/views/system/Menu/Detail/index.vue
@@ -1,14 +1,14 @@
 <template>
     <page-container>
         <div class="menu-detail-container">
-            <a-tabs v-model:activeKey="activeKey">
-                <a-tab-pane key="basic" tab="基本信息">
+            <j-tabs v-model:activeKey="activeKey">
+                <j-tab-pane key="basic" tab="基本信息">
                     <BasicInfo />
-                </a-tab-pane>
-                <a-tab-pane key="button" tab="按钮管理">
+                </j-tab-pane>
+                <j-tab-pane key="button" tab="按钮管理">
                     <ButtonMange />
-                </a-tab-pane>
-            </a-tabs>
+                </j-tab-pane>
+            </j-tabs>
         </div>
     </page-container>
 </template>
diff --git a/src/views/system/Menu/components/ButtonAddDialog.vue b/src/views/system/Menu/components/ButtonAddDialog.vue
index 9913c054..47958341 100644
--- a/src/views/system/Menu/components/ButtonAddDialog.vue
+++ b/src/views/system/Menu/components/ButtonAddDialog.vue
@@ -1,13 +1,12 @@
 <template>
     <a-modal
-        v-model:visible="dialog.visible"
-        :title="form.mode"
+        visible
+        :title="props.mode"
         width="660px"
-        @ok="dialog.handleOk"
+        @ok="confirm"
+        @cancel="emits('update:visible', false)"
         :maskClosable="false"
-        cancelText="取消"
-        okText="确定"
-        :confirmLoading="dialog.loading"
+        :confirmLoading="loading"
     >
         <a-form :model="form.data" class="basic-form" ref="formRef">
             <a-form-item
@@ -20,7 +19,7 @@
             >
                 <a-input
                     v-model:value="form.data.id"
-                    :disabled="form.mode !== '新增'"
+                    :disabled="props.mode !== '新增'"
                 />
             </a-form-item>
             <a-form-item
@@ -33,7 +32,7 @@
             >
                 <a-input
                     v-model:value="form.data.name"
-                    :disabled="form.mode === '查看'"
+                    :disabled="props.mode === '查看'"
                 />
             </a-form-item>
             <a-form-item
@@ -47,19 +46,11 @@
                     },
                 ]"
             >
-                <!-- <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 === '查看'"
+                    :disabled="props.mode === '查看'"
                     :key="form.data.id || ''"
                 />
             </a-form-item>
@@ -68,7 +59,7 @@
                     v-model:value="form.data.describe"
                     :rows="4"
                     placeholder="请输入说明"
-                    :disabled="form.mode === '查看'"
+                    :disabled="props.mode === '查看'"
                 />
             </a-form-item>
         </a-form>
@@ -81,54 +72,42 @@ import { Rule } from 'ant-design-vue/es/form';
 import PermissChoose from '../components/PermissChoose.vue';
 import { saveMenuInfo_api } from '@/api/system/menu';
 
+const emits = defineEmits(['confirm', 'update:visible']);
 const props = defineProps<{
     menuInfo: {
         buttons: formType[];
         id: string;
     };
+    visible: boolean;
+    mode: '查看' | '新增' | '编辑';
+    data: formType;
 }>();
-const emits = defineEmits(['confirm']);
-const dialog = reactive({
-    visible: false,
-    loading: false,
-    handleOk: () => {
-        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 = { ...initForm, ...formValue };
-        form.mode = mode || '';
 
-        formRef.value && formRef.value.clearValidate();
-    },
-});
+const loading = ref(false);
+const confirm = () => {
+    loading.value = true;
+    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,
+            };
+            saveMenuInfo_api(params)
+                .then((resp) => {
+                    message.success('操作成功');
+                    emits('confirm');
+                    emits('update:visible', false);
+                })
+                .finally(() => (loading.value = false));
+        });
+};
 const initForm = {
     name: '',
     id: '',
@@ -137,19 +116,13 @@ const initForm = {
 } as formType;
 const formRef = ref<FormInstance>();
 const form = reactive({
-    data: { ...initForm },
-    mode: '',
-    checkPermission: async (_rule: Rule, value: string[]) => {
+    data: { ...initForm, ...props.data },
+    checkPermission: (_rule: Rule, value: string[]) => {
         if (!value || value.length < 1) return Promise.reject('请选择权限');
         return Promise.resolve();
     },
 });
 
-// 将打开弹窗的操作暴露给父组件
-defineExpose({
-    openDialog: dialog.changeVisible,
-});
-
 type formType = {
     name: string;
     id: string;
diff --git a/src/views/system/Menu/components/ChooseIconDialog.vue b/src/views/system/Menu/components/ChooseIconDialog.vue
index 9cb64723..3f9f8c74 100644
--- a/src/views/system/Menu/components/ChooseIconDialog.vue
+++ b/src/views/system/Menu/components/ChooseIconDialog.vue
@@ -1,24 +1,33 @@
 <template>
-    <a-modal
-        v-model:visible="dialog.visible"
+    <j-modal
+        visible
         title="菜单图标"
         width="800px"
-        @ok="dialog.handleOk"
+        @cancel="emits('update:visible', false)"
+        @ok="confirm"
     >
-        <a-radio-group v-model:value="selected" class="radio">
-            <a-radio-button
+        <j-radio-group v-model:value="selected" class="radio">
+            <j-radio-button
                 v-for="typeStr in iconKeys"
                 :value="typeStr"
                 :class="{ active: selected === typeStr }"
             >
-                <a-icon :type="typeStr" />
-            </a-radio-button>
-        </a-radio-group>
-    </a-modal>
+                <AIcon :type="typeStr" />
+            </j-radio-button>
+        </j-radio-group>
+    </j-modal>
 </template>
 
 <script setup lang="ts">
-const emits = defineEmits(['confirm']);
+const emits = defineEmits(['confirm', 'update:visible']);
+const props = defineProps<{
+    visible: boolean;
+}>();
+
+const confirm = () => {
+    emits('confirm', selected.value);
+    emits('update:visible', false);
+};
 const iconKeys = [
     'EyeOutlined',
     'EditOutlined',
@@ -48,29 +57,11 @@ const iconKeys = [
     'TeamOutlined',
     'MenuUnfoldOutlined',
     'MenuFoldOutlined',
-    'QuestionCircleOutlined',
     'InfoCircleOutlined',
     'SearchOutlined',
 ];
 
-const dialog = reactive({
-    visible: false,
-    handleOk: () => {
-        emits('confirm', selected.value);
-        dialog.changeVisible();
-        selected.value = '';
-    },
-    changeVisible: (show?: boolean) => {
-        dialog.visible = show === undefined ? !dialog.visible : show;
-    },
-});
-
 const selected = ref<string>('');
-
-// 将打开弹窗的操作暴露给父组件
-defineExpose({
-    openDialog: dialog.changeVisible,
-});
 </script>
 
 <style lang="less" scoped>
diff --git a/src/views/system/Menu/components/PermissChoose.vue b/src/views/system/Menu/components/PermissChoose.vue
index 67c57bb4..0bb8a737 100644
--- a/src/views/system/Menu/components/PermissChoose.vue
+++ b/src/views/system/Menu/components/PermissChoose.vue
@@ -155,10 +155,12 @@ const permission = reactive({
             const checked = checkedValue?.find(
                 (checkedItem) => checkedItem.permission === item.id,
             );
-            const options = item.actions.map((actionItem: any) => ({
-                label: actionItem.name,
-                value: actionItem.action,
-            }));
+
+            const options =
+            item.actions && item.actions.map((actionItem: any) => ({
+                    label: actionItem.name,
+                    value: actionItem.action,
+                })) || [];
             return {
                 id: item.id,
                 name: item.name,
@@ -182,7 +184,6 @@ const permission = reactive({
 });
 permission.init();
 
-
 type permissionType = {
     id: string;
     name: string;
diff --git a/src/views/system/Menu/index.vue b/src/views/system/Menu/index.vue
index e58fb3e1..ed39b707 100644
--- a/src/views/system/Menu/index.vue
+++ b/src/views/system/Menu/index.vue
@@ -1,14 +1,18 @@
 <template>
     <page-container>
         <div class="menu-container">
-            <Search :columns="query.columns" @search="query.search" />
+            <j-advanced-search
+                :columns="columns"
+                @search="(params:any)=>queryParams = {...params}"
+            />
 
             <j-pro-table
                 ref="tableRef"
-                :columns="table.columns"
+                :columns="columns"
                 :request="table.getList"
                 model="TABLE"
-                :params="query.params"
+                :params="queryParams"
+                noPagination
             >
                 <template #headerTitle>
                     <PermissionButton
@@ -18,17 +22,11 @@
                     >
                         <AIcon type="PlusOutlined" />新增
                     </PermissionButton>
-                    <a-button
+                    <j-button
                         style="margin-left: 12px"
                         @click="router.push('/system/Menu/Setting')"
-                        >菜单配置</a-button
+                        >菜单配置</j-button
                     >
-                    <!-- <PermissionButton
-                        :uhasPermission="true"
-                        @click="router.push('/system/Menu/Setting')"
-                    >
-                        菜单配置
-                    </PermissionButton> -->
                 </template>
                 <template #createTime="slotProps">
                     {{
@@ -38,17 +36,17 @@
                     }}
                 </template>
                 <template #action="slotProps">
-                    <a-space :size="16">
-                        <a-tooltip>
+                    <j-space :size="16">
+                        <j-tooltip>
                             <template #title>查看</template>
-                            <a-button
+                            <j-button
                                 style="padding: 0"
                                 type="link"
                                 @click="table.toDetails(slotProps)"
                             >
-                                <search-outlined />
-                            </a-button>
-                        </a-tooltip>
+                                <AIcon type="SearchOutlined" />
+                            </j-button>
+                        </j-tooltip>
 
                         <PermissionButton
                             type="link"
@@ -69,7 +67,7 @@
                         >
                             <AIcon type="DeleteOutlined" />
                         </PermissionButton>
-                    </a-space>
+                    </j-space>
                 </template>
             </j-pro-table>
         </div>
@@ -80,7 +78,6 @@
 import PermissionButton from '@/components/PermissionButton/index.vue';
 
 import { getMenuTree_api, delMenuInfo_api } from '@/api/system/menu';
-import { SearchOutlined } from '@ant-design/icons-vue';
 import { message } from 'ant-design-vue';
 import moment from 'moment';
 
@@ -88,112 +85,75 @@ const permission = 'system/Menu';
 
 const router = useRouter();
 
-// 筛选
-const query = reactive({
-    columns: [
-        {
-            title: '编码',
-            dataIndex: 'code',
-            key: 'code',
-            ellipsis: true,
-            fixed: 'left',
-            search: {
-                type: 'string',
-            },
+const columns = [
+    {
+        title: '编码',
+        dataIndex: 'code',
+        key: 'code',
+        ellipsis: true,
+        fixed: 'left',
+        search: {
+            type: 'string',
         },
-        {
-            title: '名称',
-            dataIndex: 'name',
-            key: 'name',
-            ellipsis: true,
-            search: {
-                type: 'string',
-            },
-        },
-        {
-            title: '页面地址',
-            dataIndex: 'url',
-            key: 'url',
-            ellipsis: true,
-            search: {
-                type: 'string',
-            },
-        },
-        {
-            title: '排序',
-            dataIndex: 'sortIndex',
-            key: 'sortIndex',
-            ellipsis: true,
-            search: {
-                type: 'number',
-            },
-        },
-        {
-            title: '创建时间',
-            dataIndex: 'createTime',
-            key: 'createTime',
-            ellipsis: true,
-            search: {
-                type: 'date',
-            },
-        },
-    ],
-    params: {
-        terms: [],
+        width: 300,
     },
-    search: (params: any) => {
-        query.params = params;
+    {
+        title: '名称',
+        dataIndex: 'name',
+        key: 'name',
+        ellipsis: true,
+        search: {
+            type: 'string',
+        },
+        width: 220,
     },
-});
+    {
+        title: '页面地址',
+        dataIndex: 'url',
+        key: 'url',
+        ellipsis: true,
+        search: {
+            type: 'string',
+        },
+    },
+    {
+        title: '排序',
+        dataIndex: 'sortIndex',
+        key: 'sortIndex',
+        ellipsis: true,
+        search: {
+            type: 'number',
+        },
+        width: 80,
+    },
+    {
+        title: '说明',
+        dataIndex: 'describe',
+        key: 'describe',
+        width: 200,
+    },
+    {
+        title: '创建时间',
+        dataIndex: 'createTime',
+        key: 'createTime',
+        ellipsis: true,
+        search: {
+            type: 'date',
+        },
+        width: 180,
+    },
+    {
+        title: '操作',
+        dataIndex: 'action',
+        key: 'action',
+        scopedSlots: true,
+        width: 140,
+    },
+];
+const queryParams = ref({ terms: [] });
 
 const tableRef = ref<Record<string, any>>({}); // 表格实例
 const table = reactive({
-    columns: [
-        {
-            title: '编码',
-            dataIndex: 'code',
-            key: 'code',
-            width: 300,
-        },
-        {
-            title: '名称',
-            dataIndex: 'name',
-            key: 'name',
-            width: 220,
-        },
-        {
-            title: '页面地址',
-            dataIndex: 'url',
-            key: 'url',
-        },
-        {
-            title: '排序',
-            dataIndex: 'sortIndex',
-            key: 'sortIndex',
-            width: 80,
-        },
-        {
-            title: '说明',
-            dataIndex: 'describe',
-            key: 'describe',
-            width: 200,
-        },
-        {
-            title: '创建时间',
-            dataIndex: 'createTime',
-            key: 'createTime',
-            scopedSlots: true,
-            width: 180,
-        },
-        {
-            title: '操作',
-            dataIndex: 'action',
-            key: 'action',
-            scopedSlots: true,
-            width: 140,
-        },
-    ],
-    tableData: [],
     total: 0,
     getList: async (_params: any) => {
         //过滤非集成的菜单
@@ -220,7 +180,7 @@ const table = reactive({
             ..._params,
             terms:
                 _params.terms && _params.length !== 0
-                    ? [...query.params.terms, item]
+                    ? [..._params.terms, item]
                     : [item],
             sorts: [{ name: 'sortIndex', order: 'asc' }],
             paging: false,
@@ -233,9 +193,9 @@ const table = reactive({
             code: resp.message,
             result: {
                 data: resp.result,
-                pageIndex: 0,
-                pageSize: 0,
-                total: 0,
+                pageIndex: resp.pageIndex,
+                pageSize: resp.pageSize,
+                total: resp.total,
             },
             status: resp.status,
         };