diff --git a/src/api/media/channel.ts b/src/api/media/channel.ts
index b603cd03..e7b53af3 100644
--- a/src/api/media/channel.ts
+++ b/src/api/media/channel.ts
@@ -16,6 +16,9 @@ export default {
     // 删除
     del: (id: string) => server.remove(`/media/channel/${id}`),
 
+    // 查询树形数据
+    queryTree: (id: string, data?: any) => server.post(`/media/device/${id}/catalog/_query/tree`, data),
+
     // ========== 视频播放 ==========
     // 开始直播
     ptzStart: (deviceId: string, channelId: string, type: string) =>
diff --git a/src/views/media/Device/Channel/Tree/index.vue b/src/views/media/Device/Channel/Tree/index.vue
new file mode 100644
index 00000000..4aa6160d
--- /dev/null
+++ b/src/views/media/Device/Channel/Tree/index.vue
@@ -0,0 +1,99 @@
+<template>
+    <div class="channel-tree">
+        <div class="channel-tree-query">
+            <j-input
+                @change="debounce(queryTree, 300)"
+                placeholder="请输入目录名称"
+            >
+                <template #suffix>
+                    <AIcon type="SearchOutlined" />
+                </template>
+            </j-input>
+        </div>
+        <div class="channel-tree-content">
+            <j-tree
+                :height="500"
+                :selectedKeys="selectedKeys"
+                :treeData="treeData"
+                :onSelect="(keys:any) => {
+                    if (keys.length) {
+                    selectedKeys = keys
+                    if (props.onSelect) {
+                        props.onSelect(keys[0]);
+                    }
+                    }
+                }"
+                :fieldNames="{ key: 'id', title: 'name' }"
+            />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { debounce } from 'lodash';
+import ChannelApi from '@/api/media/channel';
+import DeviceApi from '@/api/media/device';
+
+interface TreeProps {
+    deviceId: string;
+    onSelect: (id: string) => void;
+    onTreeLoad: (type: boolean) => void;
+}
+
+const props = defineProps<TreeProps>();
+
+const treeData = ref<any[]>([]);
+const selectedKeys = ref<string[]>([]);
+
+const getTreeData = async (id: string, data?: any) => {
+    const { result } = await ChannelApi.queryTree(id, data);
+    treeData.value[0].children = result || [];
+    props.onTreeLoad(treeData.value[0].children.length > 10);
+    treeData.value = treeData.value;
+};
+
+/**
+ * 获取设备详情
+ * @param id
+ */
+const getDeviceDetail = async (id: string) => {
+    const deviceResp = await DeviceApi.detail(id);
+    if (deviceResp.status === 200) {
+        treeData.value = [
+            {
+                id,
+                name: deviceResp.result.name,
+                children: [],
+            },
+        ];
+        selectedKeys.value = [id];
+        getTreeData(props.deviceId, {});
+    }
+};
+
+const queryTree = (e: any) => {
+    getTreeData(props.deviceId, {
+        terms: [
+            { column: 'name', termType: 'like', value: `%${e.target.value}%` },
+        ],
+    });
+};
+
+watchEffect(() => {
+    getDeviceDetail(props.deviceId);
+});
+</script>
+
+<style lang="less" scoped>
+.channel-tree {
+    height: 100%;
+
+    .channel-tree-query {
+        margin-bottom: 16px;
+    }
+
+    .channel-tree-content {
+        min-height: calc(100% - 50px);
+    }
+}
+</style>
diff --git a/src/views/media/Device/Channel/index.less b/src/views/media/Device/Channel/index.less
new file mode 100644
index 00000000..ee596623
--- /dev/null
+++ b/src/views/media/Device/Channel/index.less
@@ -0,0 +1,48 @@
+.device-channel-warp {
+    display: flex;
+
+    .left-warp {
+        position: relative;
+        margin-right: 16px;
+        padding: 20px;
+        background-color: #fff;
+        border-radius: 2px;
+
+        .left-content {
+            width: 0;
+            height: 100%;
+            overflow: hidden;
+
+            &.active {
+                width: 260px;
+            }
+        }
+
+        .left-warp--btn {
+            position: absolute;
+            top: 50%;
+            right: 0;
+            padding: 20px 4px;
+            color: rgba(#000, 0.3);
+            background-color: rgba(#f0f0f0, 6);
+            border-radius: ~'100% 0 0 100% / 50% 0 0 50%';
+            cursor: pointer;
+
+            &:hover {
+                color: rgba(#000, 0.5);
+                background-color: rgba(#f0f0f0, 8);
+            }
+
+            &.active {
+                right: 50%;
+                background-color: transparent;
+                border-radius: 0;
+                transform: translateX(50%) rotate(180deg);
+            }
+        }
+    }
+
+    .right {
+        flex: 1;
+    }
+}
diff --git a/src/views/media/Device/Channel/index.vue b/src/views/media/Device/Channel/index.vue
index 94d5b9c6..b39e302a 100644
--- a/src/views/media/Device/Channel/index.vue
+++ b/src/views/media/Device/Channel/index.vue
@@ -1,82 +1,102 @@
 <!-- 视频设备-通道列表 -->
 <template>
     <page-container>
-        <j-advanced-search
-            type="simple"
-            :columns="columns"
-            target="product"
-            @search="handleSearch"
-        />
-
-        <JProTable
-            ref="listRef"
-            :columns="columns"
-            :request="(e:any) => ChannelApi.list(e, route?.query.id as string)"
-            :defaultParams="{
-                sorts: [{ name: 'notifyTime', order: 'desc' }],
-            }"
-            :params="params"
-            model="table"
-        >
-            <template #headerTitle>
-                <j-tooltip
-                    v-if="route?.query.type === 'gb28181-2016'"
-                    title="接入方式为GB/T28281时，不支持新增"
+        <div class="device-channel-warp">
+            <div class="left-warp" v-if="route.query.type === 'gb28181-2016'">
+                <div class="left-content" :class="{ active: show }">
+                    <Tree
+                        :deviceId="deviceId"
+                        :on-tree-load="(e) => (show = e)"
+                        :on-select="handleSelect"
+                    />
+                </div>
+                <div
+                    class="left-warp--btn"
+                    :class="{ active: !show }"
+                    @click="show = !show"
                 >
-                    <j-button type="primary" disabled> 新增 </j-button>
-                </j-tooltip>
-                <j-button type="primary" @click="handleAdd" v-else>
-                    新增
-                </j-button>
-            </template>
-            <template #status="slotProps">
-                <j-space>
-                    <j-badge
-                        :status="
-                            slotProps.status.value === 'online'
-                                ? 'success'
-                                : 'error'
-                        "
-                        :text="slotProps.status.text"
-                    ></j-badge>
-                </j-space>
-            </template>
-            <template #action="slotProps">
-                <j-space :size="16">
-                    <j-tooltip
-                        v-for="i in getActions(slotProps, 'table')"
-                        :key="i.key"
-                        v-bind="i.tooltip"
-                    >
-                        <j-popconfirm
-                            v-if="i.popConfirm"
-                            v-bind="i.popConfirm"
-                            :disabled="i.disabled"
+                    <AIcon type="LeftOutlined" />
+                </div>
+            </div>
+            <div class="right">
+                <j-advanced-search
+                    type="simple"
+                    :columns="columns"
+                    target="product"
+                    @search="handleSearch"
+                />
+
+                <JProTable
+                    ref="listRef"
+                    :columns="columns"
+                    :request="(e:any) => ChannelApi.list(e, route?.query.id as string)"
+                    :defaultParams="{
+                        sorts: [{ name: 'notifyTime', order: 'desc' }],
+                    }"
+                    :params="params"
+                    model="table"
+                >
+                    <template #headerTitle>
+                        <j-tooltip
+                            v-if="route?.query.type === 'gb28181-2016'"
+                            title="接入方式为GB/T28281时，不支持新增"
                         >
-                            <j-button
-                                :disabled="i.disabled"
-                                style="padding: 0"
-                                type="link"
-                                ><AIcon :type="i.icon"
-                            /></j-button>
-                        </j-popconfirm>
-                        <j-button
-                            style="padding: 0"
-                            type="link"
-                            v-else
-                            @click="i.onClick && i.onClick(slotProps)"
-                        >
-                            <j-button
-                                :disabled="i.disabled"
-                                style="padding: 0"
-                                type="link"
-                                ><AIcon :type="i.icon"
-                            /></j-button>
+                            <j-button type="primary" disabled> 新增 </j-button>
+                        </j-tooltip>
+                        <j-button type="primary" @click="handleAdd" v-else>
+                            新增
                         </j-button>
-                    </j-tooltip>
-                </j-space>
-            </template>
-        </JProTable>
+                    </template>
+                    <template #status="slotProps">
+                        <j-space>
+                            <j-badge
+                                :status="
+                                    slotProps.status.value === 'online'
+                                        ? 'success'
+                                        : 'error'
+                                "
+                                :text="slotProps.status.text"
+                            ></j-badge>
+                        </j-space>
+                    </template>
+                    <template #action="slotProps">
+                        <j-space :size="16">
+                            <j-tooltip
+                                v-for="i in getActions(slotProps, 'table')"
+                                :key="i.key"
+                                v-bind="i.tooltip"
+                            >
+                                <j-popconfirm
+                                    v-if="i.popConfirm"
+                                    v-bind="i.popConfirm"
+                                    :disabled="i.disabled"
+                                >
+                                    <j-button
+                                        :disabled="i.disabled"
+                                        style="padding: 0"
+                                        type="link"
+                                        ><AIcon :type="i.icon"
+                                    /></j-button>
+                                </j-popconfirm>
+                                <j-button
+                                    style="padding: 0"
+                                    type="link"
+                                    v-else
+                                    @click="i.onClick && i.onClick(slotProps)"
+                                >
+                                    <j-button
+                                        :disabled="i.disabled"
+                                        style="padding: 0"
+                                        type="link"
+                                        ><AIcon :type="i.icon"
+                                    /></j-button>
+                                </j-button>
+                            </j-tooltip>
+                        </j-space>
+                    </template>
+                </JProTable>
+            </div>
+        </div>
 
         <Save
             v-model:visible="saveVis"
@@ -94,7 +114,9 @@ import { useMenuStore } from 'store/menu';
 import { message } from 'ant-design-vue';
 import Save from './Save.vue';
 import Live from './Live/index.vue';
+import Tree from './Tree/index.vue';
 import { cloneDeep } from 'lodash-es';
+import { useElementSize } from '@vueuse/core';
 
 const menuStory = useMenuStore();
 const route = useRoute();
@@ -253,4 +275,25 @@ const getActions = (
         ? actions.filter((f) => f.key !== 'delete')
         : actions;
 };
+
+// 左侧树
+const show = ref(false);
+const deviceId = computed(() => route.query.id as string);
+const handleSelect = (key: string) => {
+    if (key === deviceId.value && listRef.value?.reload) {
+        listRef.value?.reload();
+    } else {
+        params.value = {
+            terms: [
+                {
+                    column: 'parentId',
+                    value: key,
+                },
+            ],
+        };
+    }
+};
 </script>
+<style lang="less" scoped>
+@import './index.less';
+</style>
diff --git a/src/views/notice/Config/index.vue b/src/views/notice/Config/index.vue
index 5ea89785..0ba66bc8 100644
--- a/src/views/notice/Config/index.vue
+++ b/src/views/notice/Config/index.vue
@@ -257,9 +257,7 @@ const columns = [
  * @param params
  */
 const handleSearch = (e: any) => {
-    console.log('handleSearch:', e);
     params.value = e;
-    console.log('params.value: ', params.value);
 };
 
 /**