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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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