diff --git a/config/router.config.ts b/config/router.config.ts
index 1e2c3eb..dd70d53 100644
--- a/config/router.config.ts
+++ b/config/router.config.ts
@@ -327,6 +327,22 @@ export default [
               },
             ]
           },
+          //在线监督和事后监督
+          {
+            path: '/VideoMonitor',
+            routes: [
+              {
+                name: 'Online',
+                path: '/VideoMonitor/Online',
+                component: './VideoMonitor/Online',
+              }, 
+              {
+                name: 'Post',
+                path: '/VideoMonitor/Post',
+                component: './VideoMonitor/Post',
+              },
+            ],
+          },
           {//账号信息管理-代理机构管理员
             name: 'Account',
             icon: 'form',
diff --git a/config/router_transfer.ts b/config/router_transfer.ts
index 0a255ad..fe00262 100644
--- a/config/router_transfer.ts
+++ b/config/router_transfer.ts
@@ -102,5 +102,4 @@ export default [
       },
     ],
   },
-
 ]
diff --git a/src/pages/VideoMonitor/Online/components/OnlineSupervision.tsx b/src/pages/VideoMonitor/Online/components/OnlineSupervision.tsx
new file mode 100644
index 0000000..d2d1d28
--- /dev/null
+++ b/src/pages/VideoMonitor/Online/components/OnlineSupervision.tsx
@@ -0,0 +1,192 @@
+import { isNotEmpty } from '@/utils/CommonUtils';
+import ProTable, { ProColumns } from '@ant-design/pro-table';
+import { Button, Spin, message } from 'antd';
+import React, { useRef, useState } from 'react';
+import { useHistory } from 'umi';
+import ViewModal from '../../ViewModal';
+import { getPage } from '../../service';
+
+/**
+ * 在线监督列表
+ * @returns 
+ */
+const OnlineSupervision: React.FC<{}> = () => {
+    const [spin, spinSet] = useState<boolean>(false);
+    const [visible, setVisible] = useState<boolean>(false);
+    //查询分页数据
+    const [pageData, pageDataSet] = useState<any>({
+        pageNo: 1,
+        pageSize: 10
+    });
+    const history = useHistory();
+    const viewModalRef = useRef(null);
+    //查看详情
+    const viewDetails = (record: any) => {
+        setVisible(true);
+        viewModalRef.current?.InitData(record.id);
+    }
+    //关闭
+    const closeViewDetails = () => {
+        setVisible(false);
+    }
+
+    //在线监督
+    function supervision(record: any): void {
+        window.open("/MonitorScreen/ProjectMonitorRoom?monitorId=" + record.id);
+    }
+
+    const columns: ProColumns<any>[] = [
+        {
+            valueType: 'index',
+            align: 'center',
+            hideInSearch: true,
+        },
+        {
+            title: '项目名称',
+            align: 'center',
+            dataIndex: 'projectName',
+            width: '20%',
+            hideInSearch: false,
+        },
+        {
+            title: '项目编号',
+            align: 'center',
+            dataIndex: 'projectNum',
+            hideInSearch: true,
+        },
+        {
+            title: '标段',
+            align: 'center',
+            dataIndex: 'packageNames',
+            hideInSearch: true,
+        },
+        {
+            title: '评审室名称',
+            align: 'center',
+            dataIndex: 'areaName',
+            hideInSearch: false,
+            width: '10%',
+        },
+        {
+            title: '预计评标开始时间',
+            align: 'center',
+            dataIndex: 'reserveStartDate',
+            hideInSearch: true,
+            width: '15%',
+        },
+        {
+            title: '预计评标结束时间',
+            align: 'center',
+            dataIndex: 'reserveEndDate',
+            hideInSearch: true,
+            width: '9.5%',
+        },
+        {
+            title: '状态',
+            align: 'center',
+            dataIndex: 'status',
+            hideInSearch: true,
+            width: '4.5%',
+            valueEnum: {
+                '-1': {
+                    text: '待确认'
+                },
+                '0': {
+                    text: '未开启'
+                },
+                '1': {
+                    text: '进行中'
+                },
+                '2': {
+                    text: '已结束'
+                },
+                '3': {
+                    text: '已取消'
+                },
+                '4': {
+                    text: '结束未使用'
+                },
+            }
+        },
+        {
+            title: '操作',
+            align: 'center',
+            valueType: 'option',
+            width: '9%',
+            render: (_: any, record: any) =>
+            (
+                <>
+                    <Button
+                        key="viewDetails"
+                        type="text"
+                        onClick={() =>
+                            viewDetails(record)
+                        }
+                    >
+                        查看详情
+                    </Button>
+                    <Button
+                        key="supervision"
+                        type="text"
+                        onClick={() =>
+                            supervision(record)
+                        }
+                    >
+                        在线监督
+                    </Button>
+                </>
+            )
+        },
+    ]
+
+    return (
+        <Spin spinning={spin}>
+            <div className="zjl-entrust confirm">
+                <ProTable
+                    columns={columns}
+                    options={false}
+                    bordered={false}
+                    size='small'
+                    search={{ labelWidth: 'auto', span: 6 }}
+                    loading={false}
+                    request={async (params) => {
+                        spinSet(true);
+                        return await getPage({
+                            ...params,
+                            basePageRequest: { pageNo: pageData.pageNo, pageSize: pageData.pageSize },
+                            queryType: 1,
+                            areaRoomName: params.areaName
+                        }).then((res) => {
+                            const result = {
+                                data: res.data.records,
+                                total: res.data.total,
+                                success: res.success,
+                                pageSize: res.data.size,
+                                current: res.data.current
+                            }
+                            return result;
+                        }).finally(() => {
+                            isNotEmpty(window.location.search) && history.push(window.location.pathname);
+                            spinSet(false);
+                        })       
+                        }
+                    }
+                    pagination={{
+                        defaultPageSize: 10,
+                        pageSizeOptions: [10, 20, 30, 50],
+                        defaultCurrent: 1,
+                        size: "small",
+                        showSizeChanger: true,
+                        onChange: (page, pageSize) => pageDataSet({ pageNo: page, pageSize: pageSize }),
+                        onShowSizeChange: (current, size) => pageDataSet({ pageNo: current, pageSize: size }),
+                    }}
+                    onReset={() => { pageDataSet({ pageNo: 1, pageSize: 10 }) }}
+                    rowKey={"id"}
+                />
+            </div>
+            <ViewModal modalVisible = {visible} onCancel = {()=> closeViewDetails()} ref = {viewModalRef}/>
+        </Spin>
+    )
+}
+export default OnlineSupervision;
+
diff --git a/src/pages/VideoMonitor/Online/components/ReservedItems.tsx b/src/pages/VideoMonitor/Online/components/ReservedItems.tsx
new file mode 100644
index 0000000..5a52e23
--- /dev/null
+++ b/src/pages/VideoMonitor/Online/components/ReservedItems.tsx
@@ -0,0 +1,181 @@
+import { isNotEmpty } from '@/utils/CommonUtils';
+import ProTable, { ProColumns } from '@ant-design/pro-table';
+import { Button, Spin } from 'antd';
+import React, { useRef, useState } from 'react';
+import { useHistory } from 'umi';
+import ViewModal from '../../ViewModal';
+import { getPage } from '../../service';
+
+/**
+ * 预约项目列表
+ * @returns 
+ */
+const ReservedItems: React.FC<{}> = () => {
+
+    const [spin, spinSet] = useState<boolean>(false);
+    const [visible, setVisible] = useState(false);
+    //查询分页数据
+    const [pageData, pageDataSet] = useState<any>({
+        pageNo: 1,
+        pageSize: 10
+    });
+    const history = useHistory();
+    const viewModalRef = useRef(null);
+    
+    //查看详情
+    const viewDetails = (record: any) => {
+        setVisible(true);
+        viewModalRef.current?.InitData(record.id);
+    }
+
+    //关闭
+    const closeViewDetails = () => {
+        setVisible(false);
+    }
+
+    const columns: ProColumns<any>[] = [
+    {
+        valueType: 'index',
+        align: 'center',
+        hideInSearch: true,
+    },
+    {
+        title: '项目名称',
+        align: 'center',
+        dataIndex: 'projectName',
+        width: '20%',
+        hideInSearch: false,
+    },
+    {
+        title: '项目编号',
+        align: 'center',
+        dataIndex: 'projectNum',
+        hideInSearch: true,
+    },
+    {
+        title: '标段',
+        align: 'center',
+        dataIndex: 'packageNames',
+        hideInSearch: true,
+    },
+    {
+        title: '评审室名称',
+        align: 'center',
+        dataIndex: 'areaName',
+        hideInSearch: false,
+        width: '10%',
+    },
+    {
+        title: '预计评标开始时间',
+        align: 'center',
+        dataIndex: 'reserveStartDate',
+        hideInSearch: true,
+        width: '15%',
+    },
+    {
+        title: '预计评标结束时间',
+        align: 'center',
+        dataIndex: 'reserveEndDate',
+        hideInSearch: true,
+        width: '9.5%',
+    },
+        {
+            title: '状态',
+            align: 'center',
+            dataIndex: 'status',
+            hideInSearch: true,
+            width: '4.5%',
+            valueEnum: {
+                '-1': {
+                    text: '待确认'
+                },
+                '0': {
+                    text: '未开启'
+                },
+                '1': {
+                    text: '进行中'
+                },
+                '2': {
+                    text: '已结束'
+                },
+                '3': {
+                    text: '已取消'
+                },
+                '4': {
+                    text: '结束未使用'
+                },
+            }
+        },
+        {
+            title: '操作',
+            align: 'center',
+            valueType: 'option',
+            width: '4.5%',
+            render: (_: any, record: any) =>
+            (
+                <>
+                    <Button
+                        key="viewDetails"
+                        type="text"
+                        onClick={() =>
+                            viewDetails(record)
+                        }
+                    >
+                        查看详情
+                    </Button>
+                </>
+            )
+        },
+    ]
+
+    return (
+        <Spin spinning={spin}>
+            <div className="zjl-entrust confirm">
+                <ProTable
+                    columns={columns}
+                    options={false}
+                    bordered={false}
+                    size='small'
+                    search={{ labelWidth: 'auto', span: 6 }}
+                    loading={false}
+                    request={async (params) => {
+                        spinSet(true);
+                        return await getPage({
+                            ...params,
+                            basePageRequest: { pageNo: pageData.pageNo, pageSize: pageData.pageSize },
+                            queryType: 0,
+                            areaRoomName: params.areaName
+                        }).then((res) => {
+                            const result = {
+                                data: res.data.records,
+                                total: res.data.total,
+                                success: res.success,
+                                pageSize: res.data.size,
+                                current: res.data.current
+                            }
+                            return result;
+                        }).finally(() => {
+                            isNotEmpty(window.location.search) && history.push(window.location.pathname);
+                            spinSet(false);
+                        })     
+                        }
+                    }
+                    pagination={{
+                        defaultPageSize: 10,
+                        pageSizeOptions: [10, 20, 30, 50],
+                        defaultCurrent: 1,
+                        size: "small",
+                        showSizeChanger: true,
+                        onChange: (page, pageSize) => pageDataSet({ pageNo: page, pageSize: pageSize }),
+                        onShowSizeChange: (current, size) => pageDataSet({ pageNo: current, pageSize: size }),
+                    }}
+                    onReset={() => { pageDataSet({ pageNo: 1, pageSize: 10 }) }}
+                    rowKey={"id"}
+                />
+            </div>
+            <ViewModal modalVisible = {visible} onCancel = {()=> closeViewDetails()} ref = {viewModalRef}/>
+        </Spin>
+    )
+}
+export default ReservedItems;
+
diff --git a/src/pages/VideoMonitor/Online/index.tsx b/src/pages/VideoMonitor/Online/index.tsx
new file mode 100644
index 0000000..2e27f91
--- /dev/null
+++ b/src/pages/VideoMonitor/Online/index.tsx
@@ -0,0 +1,34 @@
+import { Card, Radio } from 'antd';
+import React, { useState } from 'react';
+import OnlineSupervision from './components/OnlineSupervision';
+import ReservedItems from './components/ReservedItems';
+/**
+ * 在线监督
+ * @returns 
+ */
+const OnlineIndex: React.FC<{}> = () => {
+  //radio value
+  const [mode, setMode] = useState<string>('OnlineSupervision');
+
+  const handleModeChange = (e: any) => {
+    const mode = e.target.value;
+    setMode(mode);
+  };
+
+  return (
+    <Card style={{ borderRadius: 6 }} bodyStyle={{ padding: '16px 24px 0px' }}>
+      <Radio.Group onChange={handleModeChange} value={mode} buttonStyle="solid">
+        <Radio.Button value="OnlineSupervision">在线监督</Radio.Button>
+        <Radio.Button value="ReservedItems">预约项目</Radio.Button>
+      </Radio.Group>
+      {
+        mode === 'OnlineSupervision' ? (
+          <OnlineSupervision />
+        ) : (
+          <ReservedItems />
+        )
+      }
+    </Card>
+  )
+}
+export default OnlineIndex;
\ No newline at end of file
diff --git a/src/pages/VideoMonitor/Online/service.ts b/src/pages/VideoMonitor/Online/service.ts
new file mode 100644
index 0000000..1777360
--- /dev/null
+++ b/src/pages/VideoMonitor/Online/service.ts
@@ -0,0 +1,11 @@
+import request from '@/utils/request';
+/**
+ * 查询数据并分页
+ * @param params 
+ */
+export async function getPage(params?: any) {
+  return request('/api/biz-service-ebtp-evaluation//v1/eval/room/reserve/supervise/list', {
+    method: 'POST',
+    data: params,
+  });
+}
\ No newline at end of file
diff --git a/src/pages/VideoMonitor/Post/index.tsx b/src/pages/VideoMonitor/Post/index.tsx
new file mode 100644
index 0000000..05d7ac6
--- /dev/null
+++ b/src/pages/VideoMonitor/Post/index.tsx
@@ -0,0 +1,194 @@
+import { isNotEmpty } from '@/utils/CommonUtils';
+import ProTable, { ProColumns } from '@ant-design/pro-table';
+import { Button, Spin, message } from 'antd';
+import React, { useRef, useState } from 'react';
+import { useHistory } from 'umi';
+import ViewModal from '../ViewModal';
+import { getPage } from '../service';
+
+/**
+ * 事后监督列表
+ * @returns 
+ */
+const PostSupervision: React.FC<{}> = () => {
+    const [spin, spinSet] = useState<boolean>(false);
+    const [visible, setVisible] = useState<boolean>(false);
+    //查询分页数据
+    const [pageData, pageDataSet] = useState<any>({
+        pageNo: 1,
+        pageSize: 10
+    });
+    const history = useHistory();
+    const viewModalRef = useRef(null);
+
+    //查看详情
+    const viewDetails = (record: any) => {
+        setVisible(true);
+        viewModalRef.current?.InitData(record.id);
+    }
+
+    //关闭
+    const closeViewDetails = () => {
+        setVisible(false);
+    }
+
+    //评标监控回看
+    function reviewMonitor(record: any): void {
+        window.open("/MonitorScreen/ProjectMonitorRoom?monitorId=" + record.id);
+    }
+
+    const columns: ProColumns<any>[] = [
+        {
+            valueType: 'index',
+            align: 'center',
+            hideInSearch: true,
+        },
+        {
+            title: '项目名称',
+            align: 'center',
+            dataIndex: 'projectName',
+            width: '20%',
+            hideInSearch: false,
+        },
+        {
+            title: '项目编号',
+            align: 'center',
+            dataIndex: 'projectNum',
+            hideInSearch: true,
+        },
+        {
+            title: '标段',
+            align: 'center',
+            dataIndex: 'packageNames',
+            hideInSearch: true,
+        },
+        {
+            title: '评审室名称',
+            align: 'center',
+            dataIndex: 'areaName',
+            hideInSearch: false,
+            width: '10%',
+        },
+        {
+            title: '预计评标开始时间',
+            align: 'center',
+            dataIndex: 'reserveStartDate',
+            hideInSearch: true,
+            width: '15%',
+        },
+        {
+            title: '预计评标结束时间',
+            align: 'center',
+            dataIndex: 'reserveEndDate',
+            hideInSearch: true,
+            width: '9.5%',
+        },
+        {
+            title: '状态',
+            align: 'center',
+            dataIndex: 'status',
+            hideInSearch: true,
+            width: '4.5%',
+            valueEnum: {
+                '-1': {
+                    text: '待确认'
+                },
+                '0': {
+                    text: '未开启'
+                },
+                '1': {
+                    text: '进行中'
+                },
+                '2': {
+                    text: '已结束'
+                },
+                '3': {
+                    text: '已取消'
+                },
+                '4': {
+                    text: '结束未使用'
+                },
+            }
+        },
+        {
+            title: '操作',
+            align: 'center',
+            valueType: 'option',
+            width: '10%',
+            render: (_: any, record: any) =>
+            (
+                <>
+                    <Button
+                        key="viewDetails"
+                        type="text"
+                        onClick={() =>
+                            viewDetails(record)
+                        }
+                    >
+                        查看详情
+                    </Button>
+                    <Button
+                        key="reviewMonitor"
+                        type="text"
+                        onClick={() =>
+                            reviewMonitor(record)
+                        }
+                    >
+                        评标监控回看
+                    </Button>
+                </>
+            )
+        },
+    ]
+
+    return (
+        <Spin spinning={spin}>
+            <div className="zjl-entrust confirm">
+                <ProTable
+                    columns={columns}
+                    options={false}
+                    bordered={false}
+                    size='small'
+                    search={{ labelWidth: 'auto', span: 6 }}
+                    loading={false}
+                    request={async (params) => {
+                        spinSet(true);
+                        return await getPage({
+                            ...params,
+                            basePageRequest: { pageNo: pageData.pageNo, pageSize: pageData.pageSize },
+                            queryType: 2,
+                            areaRoomName: params.areaName
+                        }).then((res) => {
+                            const result = {
+                                data: res.data.records,
+                                total: res.data.total,
+                                success: res.success,
+                                pageSize: res.data.size,
+                                current: res.data.current
+                            }
+                            return result;
+                        }).finally(() => {
+                            isNotEmpty(window.location.search) && history.push(window.location.pathname);
+                            spinSet(false);
+                        })      
+                        }
+                    }
+                    pagination={{
+                        defaultPageSize: 10,
+                        pageSizeOptions: [10, 20, 30, 50],
+                        defaultCurrent: 1,
+                        size: "small",
+                        showSizeChanger: true,
+                        onChange: (page, pageSize) => pageDataSet({ pageNo: page, pageSize: pageSize }),
+                        onShowSizeChange: (current, size) => pageDataSet({ pageNo: current, pageSize: size }),
+                    }}
+                    onReset={() => { pageDataSet({ pageNo: 1, pageSize: 10 }) }}
+                    rowKey={"id"}
+                />
+            </div>
+            <ViewModal modalVisible = {visible} onCancel = {()=> closeViewDetails()} ref = {viewModalRef}/>
+        </Spin>
+    )
+}
+export default PostSupervision;
+
diff --git a/src/pages/VideoMonitor/ViewModal.tsx b/src/pages/VideoMonitor/ViewModal.tsx
new file mode 100644
index 0000000..38f8f5b
--- /dev/null
+++ b/src/pages/VideoMonitor/ViewModal.tsx
@@ -0,0 +1,181 @@
+import { Spin, Modal, Descriptions, Table, message } from 'antd';
+import type { ColumnsType } from 'antd/es/table';
+import React, { useState, useImperativeHandle, forwardRef } from 'react';
+import { getReservationInfo, getReportInfo } from './service';
+
+interface ViewDetailsProps {
+    modalVisible: boolean; //开启关闭控制
+    onCancel: () => void; //关闭方法传入
+}
+
+interface ReportInfo {
+    expertAmount ?: string;
+    purchaseExpertAmount ?: string;
+    manageAmount ?: string;
+    userList ?: DataType[];
+}
+
+interface DataType {
+    key ?: string;
+    userName ?: string;
+    status: number;
+    reportStatus ?: string;
+    signDate ?: string;
+}
+
+interface ReservationInfo {
+    projectName ?: string;
+    projectNum ?: string;
+    packageNames ?: string;
+    areaName ?: string;
+    reserveStartDate ?: string;
+    reserveEndDate ?: string;
+    status: number;
+    realStartDate ?: string;
+    realEndDate ?: string;
+}
+
+const columns: ColumnsType<DataType> = [
+    {
+        title: '序号',
+        dataIndex: 'key',
+        key: 'key',
+    },
+    {
+      title: '人员',
+      dataIndex: 'userName',
+      key: 'userName',
+    },
+    {
+      title: '报到状态',
+      dataIndex: 'reportStatus',
+      key: 'reportStatus',
+    },
+    {
+      title: '报到时间',
+      dataIndex: 'signDate',
+      key: 'signDate',
+    },
+  ];
+
+/**
+ * 详情弹出层
+ * @returns 
+ */
+ const ViewDetails: React.FC<ViewDetailsProps> = forwardRef((props,ref) => {
+        const {modalVisible, onCancel} = props;
+        const [initReservationInfo, setInitReservationInfo] = useState<boolean>(false);
+        const [initReportInfo, setInitReportInfo] = useState<boolean>(false);
+        const [reservationInfo, setReservationInfo] = useState<ReservationInfo>();
+        const [reportInfo, setReportInfo] = useState<ReportInfo>();
+        const InitData = (id:string) => {
+            setInitReservationInfo(true);
+            setInitReportInfo(true);
+            //获取预约信息
+            getReservationInfo(id)
+            .then((res) => {
+                if (res.code == 200) {
+                    setReservationInfo(res.data);
+                }else{
+                    message.error(res.message);
+                }
+            })
+            .catch(res => {
+                message.error(res.message);
+            })
+            .finally(() => {
+                setInitReservationInfo(false);
+            });
+            //获取报道信息
+            getReportInfo(id)
+            .then((res) => {
+                if (res.code == 200) {
+                    let _data: DataType[] = res.data.userList;
+                    _data?.forEach((item, index) =>{
+                        item.key = (index + 1).toString();
+                        item.reportStatus = getReportStatus(item.status);
+                    })
+                    setReportInfo(res.data);
+                }else{
+                    message.error(res.message);
+                }
+            })
+            .catch(res => {
+                message.error(res.message);
+            })
+            .finally(() => {
+                setInitReportInfo(false);
+            })
+        }
+        useImperativeHandle(ref, () => ({
+            InitData,
+        }));
+        const getStatus = (state: number) => {
+            let result = '';
+            switch(state){
+                case -1: 
+                    result = '待确认';
+                    break;
+                case 0: 
+                    result = '未开启';
+                    break;
+                case 1: 
+                    result = '进行中';
+                    break;
+                case 2: 
+                    result = '已结束';
+                    break;
+                case 3: 
+                    result = '已取消';
+                    break;
+                case 4: 
+                    result = '结束为使用';
+                    break;   
+            }
+            return result;
+        }
+        const getReportStatus = (state:number) => {
+            let result = '';
+            switch(state){
+                case 0: 
+                    result = '未报道';
+                    break;
+                case 1: 
+                    result = '已报道';
+                    break;   
+            }
+            return result;
+        }
+        return (<Modal
+                    destroyOnClose = {true}
+                    visible = {modalVisible}
+                    onCancel = {() => {onCancel()}}        
+                    title={<div>
+                        <span>详情</span>
+                        <span style={{textAlign: "center",width: "100%",position: "absolute",left: 0}}>{reservationInfo?.projectName}</span>
+                        </div>}
+                    footer={null}
+                    width={1000}
+                >
+                    
+                    <Spin spinning={initReservationInfo || initReportInfo}>
+                        <Descriptions>
+                            <Descriptions.Item label="项目编号">{reservationInfo?.projectNum}</Descriptions.Item>
+                            <Descriptions.Item label="标段名称">{reservationInfo?.packageNames}</Descriptions.Item>
+                            <Descriptions.Item label="评标室名称">{reservationInfo?.areaName}</Descriptions.Item>
+                            <Descriptions.Item label="评标状态">{reservationInfo?getStatus(reservationInfo?.status):''}</Descriptions.Item>
+                            <Descriptions.Item label="预计开始时间">{reservationInfo?.reserveStartDate}</Descriptions.Item>
+                            <Descriptions.Item label="预计结束时间">{reservationInfo?.reserveEndDate}</Descriptions.Item>
+                            <Descriptions.Item label="开启评标室时间">{reservationInfo?.realStartDate}</Descriptions.Item>
+                            <Descriptions.Item label="关闭评标室时间" span={2}>{reservationInfo?.realEndDate}</Descriptions.Item>
+                            <Descriptions.Item label="专家人数">{reportInfo?.expertAmount}人</Descriptions.Item>
+                            <Descriptions.Item label="采购人代表">{reportInfo?.purchaseExpertAmount}人</Descriptions.Item>
+                            <Descriptions.Item label="招标代理机构">{reportInfo?.manageAmount}人</Descriptions.Item>
+                        </Descriptions>
+                        <h3>报道信息</h3>
+                        <Table columns={columns} dataSource={reportInfo?.userList} />
+                    </Spin>
+            </Modal>)
+})
+export default ViewDetails;
+
diff --git a/src/pages/VideoMonitor/service.ts b/src/pages/VideoMonitor/service.ts
new file mode 100644
index 0000000..0f62e29
--- /dev/null
+++ b/src/pages/VideoMonitor/service.ts
@@ -0,0 +1,31 @@
+import request from '@/utils/request';
+/**
+ * 查询数据并分页
+ * @param params 
+ */
+export async function getPage(params?: any) {
+  return request('/api/biz-service-ebtp-evaluation/v1/eval/room/reserve/supervise/list', {
+    method: 'POST',
+    data: params,
+  });
+}
+
+/**
+ * 查询预约信息
+ * @param params 
+ */
+ export async function getReservationInfo(params?: string) {
+  return request('/api/biz-service-ebtp-evaluation/v1/eval/room/reserve/' + params, {
+    method: 'GET'
+  });
+}
+
+/**
+ * 查询报道信息
+ * @param params 
+ */
+ export async function getReportInfo(params?: string) {
+  return request('/api/biz-service-ebtp-evaluation/v1/eleceval/user/number/report/' + params, {
+    method: 'GET'
+  });
+}
\ No newline at end of file