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"