diff --git a/src/views/media/Device/Channel/index.vue b/src/views/media/Device/Channel/index.vue
new file mode 100644
index 00000000..4ef66e6d
--- /dev/null
+++ b/src/views/media/Device/Channel/index.vue
@@ -0,0 +1,174 @@
+<template>
+    <page-container>
+        <Search
+            type="simple"
+            :columns="columns"
+            target="product"
+            @search="handleSearch"
+        />
+
+        <JTable
+            ref="instanceRef"
+            :columns="columns"
+            :request="(e:any) => templateApi.getHistory(e, data.id)"
+            :defaultParams="{
+                sorts: [{ name: 'notifyTime', order: 'desc' }],
+                terms: [{ column: 'notifyType$IN', value: data.type }],
+            }"
+            :params="params"
+            model="table"
+        >
+            <template #notifyTime="slotProps">
+                {{ moment(slotProps.notifyTime).format('YYYY-MM-DD HH:mm:ss') }}
+            </template>
+            <template #state="slotProps">
+                <a-space>
+                    <a-badge
+                        :status="slotProps.state.value"
+                        :text="slotProps.state.text"
+                    ></a-badge>
+                    <AIcon
+                        v-if="slotProps.state.value === 'error'"
+                        type="ExclamationCircleOutlined"
+                        style="color: #1d39c4; cursor: pointer"
+                        @click="handleError(slotProps.errorStack)"
+                    />
+                </a-space>
+            </template>
+            <template #action="slotProps">
+                <AIcon
+                    type="ExclamationCircleOutlined"
+                    style="color: #1d39c4; cursor: pointer"
+                    @click="handleDetail(slotProps.context)"
+                />
+            </template>
+        </JTable>
+    </page-container>
+</template>
+
+<script setup lang="ts">
+import templateApi from '@/api/notice/template';
+import { PropType } from 'vue';
+import moment from 'moment';
+import { Modal } from 'ant-design-vue';
+
+type Emits = {
+    (e: 'update:visible', data: boolean): void;
+};
+// const emit = defineEmits<Emits>();
+
+const props = defineProps({
+    visible: { type: Boolean, default: false },
+    data: {
+        type: Object as PropType<Partial<Record<string, any>>>,
+        default: () => ({}),
+    },
+});
+
+// const _vis = computed({
+//     get: () => props.visible,
+//     set: (val) => emit('update:visible', val),
+// });
+
+// watch(
+//     () => _vis.value,
+//     (val) => {
+//         if (val) handleSearch({ terms: [] });
+//     },
+// );
+
+const columns = [
+    {
+        title: 'ID',
+        dataIndex: 'id',
+        key: 'id',
+        search: {
+            type: 'string',
+        },
+    },
+    {
+        title: '发送时间',
+        dataIndex: 'notifyTime',
+        key: 'notifyTime',
+        scopedSlots: true,
+        search: {
+            type: 'date',
+            handleValue: (v: any) => {
+                return v;
+            },
+        },
+    },
+    {
+        title: '状态',
+        dataIndex: 'state',
+        key: 'state',
+        scopedSlots: true,
+        search: {
+            type: 'select',
+            options: [
+                { label: '成功', value: 'success' },
+                { label: '失败', value: 'error' },
+            ],
+            handleValue: (v: any) => {
+                return v;
+            },
+        },
+    },
+    {
+        title: '操作',
+        key: 'action',
+        scopedSlots: true,
+    },
+];
+
+const params = ref<Record<string, any>>({});
+
+/**
+ * 搜索
+ * @param params
+ */
+const handleSearch = (e: any) => {
+    // console.log('handleSearch e:', e);
+    params.value = e;
+    // console.log('params.value: ', params.value);
+};
+
+/**
+ * 查看错误信息
+ */
+const handleError = (e: any) => {
+    Modal.info({
+        title: '错误信息',
+        content: h(
+            'p',
+            {
+                style: {
+                    maxHeight: '300px',
+                    overflowY: 'auto',
+                },
+            },
+            JSON.stringify(e),
+        ),
+    });
+};
+/**
+ * 查看详情
+ */
+const handleDetail = (e: any) => {
+    Modal.info({
+        title: '详情信息',
+        content: h(
+            'p',
+            {
+                style: {
+                    maxHeight: '300px',
+                    overflowY: 'auto',
+                },
+            },
+            JSON.stringify(e),
+        ),
+    });
+};
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/media/Device/Channel/typings.d.ts b/src/views/media/Device/Channel/typings.d.ts
new file mode 100644
index 00000000..09d659aa
--- /dev/null
+++ b/src/views/media/Device/Channel/typings.d.ts
@@ -0,0 +1,114 @@
+export type CatalogItemType = {
+    district?: string;
+    device?: string;
+    platform?: string;
+    user?: string;
+    platform_outer?: string;
+    ext?: string;
+};
+
+export interface CatalogItem {
+    id: string;
+    channelId: string;
+    deviceId: string;
+    name: string;
+    type: CatalogItemType;
+    createTime: number;
+    modifyTime: number;
+    children?: CatalogItem[];
+}
+
+export type ChannelStatusType =
+    | 'online'
+    | 'lost'
+    | 'defect'
+    | 'add'
+    | 'delete'
+    | 'update'
+    | 'offline';
+
+export type PtzType = 'unknown' | 'ball' | 'hemisphere' | 'fixed' | 'remoteControl';
+
+export type CatalogType = keyof CatalogItemType;
+
+export type ChannelType =
+    | 'dv_no_storage'
+    | 'dv_has_storage'
+    | 'dv_decoder'
+    | 'networking_monitor_server'
+    | 'media_proxy'
+    | 'web_access_server'
+    | 'video_management_server'
+    | 'network_matrix'
+    | 'network_controller'
+    | 'network_alarm_machine'
+    | 'dvr'
+    | 'video_server'
+    | 'encoder'
+    | 'decoder'
+    | 'video_switching_matrix'
+    | 'audio_switching_matrix'
+    | 'alarm_controller'
+    | 'nvr'
+    | 'hvr'
+    | 'camera'
+    | 'ipc'
+    | 'display'
+    | 'alarm_input'
+    | 'alarm_output'
+    | 'audio_input'
+    | 'audio_output'
+    | 'mobile_trans'
+    | 'other_outer'
+    | 'center_server'
+    | 'web_server'
+    | 'media_dispatcher'
+    | 'proxy_server'
+    | 'secure_server'
+    | 'alarm_server'
+    | 'database_server'
+    | 'gis_server'
+    | 'management_server'
+    | 'gateway_server'
+    | 'media_storage_server'
+    | 'signaling_secure_gateway'
+    | 'business_group'
+    | 'virtual_group'
+    | 'center_user'
+    | 'end_user'
+    | 'media_iap'
+    | 'media_ops'
+    | 'district'
+    | 'other';
+
+export interface ChannelItem {
+    id: string;
+    deviceId: string;
+    deviceName: string;
+    channelId: string;
+    name: string;
+    manufacturer: string;
+    model: string;
+    address: string;
+    provider: string;
+    status: {
+        value: string;
+        text: string;
+    };
+    others: object;
+    description: string;
+    parentChannelId: string;
+    subCount: integer;
+    civilCode: string;
+    ptzType: PtzType;
+    catalogType: CatalogType;
+    channelType: ChannelType;
+    catalogCode: string;
+    longitude: number;
+    latitude: number;
+    createTime: number;
+    modifyTime: number;
+    parentId: string;
+    gb28181ProxyStream: boolean;
+    gb28181ChannelId: string;
+}