diff --git a/config/router_transfer.ts b/config/router_transfer.ts
index 0a255ad..712d68e 100644
--- a/config/router_transfer.ts
+++ b/config/router_transfer.ts
@@ -102,5 +102,20 @@ export default [
       },
     ],
   },
+  {
+    path: '/VideoMonitor',
+    routes: [
+      {
+        name: 'Online',
+        path: '/VideoMonitor/Online',
+        component: './VideoMonitor/Online',
+      }, 
+      {
+        name: 'Post',
+        path: '/VideoMonitor/Post',
+        component: './VideoMonitor/Post',
+      },
+    ],
+  },
 
 ]
diff --git a/src/pages/VideoMonitor/Online/components/OnlineSupervision.tsx b/src/pages/VideoMonitor/Online/components/OnlineSupervision.tsx
new file mode 100644
index 0000000..7ca20fa
--- /dev/null
+++ b/src/pages/VideoMonitor/Online/components/OnlineSupervision.tsx
@@ -0,0 +1,205 @@
+import { isNotEmpty } from '@/utils/CommonUtils';
+import ProTable, { ActionType, 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';
+
+interface ViewDetailsProps {
+    entity?: {
+        projectName?:string|null,
+        projectNumber?:string|null,
+    } | null,
+    visibleDefault?:boolean| false,
+}
+/**
+ * 在线监督列表
+ * @returns 
+ */
+const OnlineSupervision: React.FC<{}> = () => {
+
+    const [spin, spinSet] = useState<boolean>(false);
+    const [visible, setVisible] = useState<boolean>(false);
+    const [record, setRecord] = useState<any[]>([]);
+    //查询分页数据
+    const [pageData, pageDataSet] = useState<any>({
+        pageNo: 1,
+        pageSize: 10
+    });
+    const history = useHistory();
+    const ref = useRef<ActionType>();
+
+    //查看详情
+    const viewDetails = (record: any) => {
+        setVisible(true);
+        setRecord(record);
+    }
+
+    //关闭
+    const closeViewDetails = () => {
+        setVisible(false);
+    }
+
+    //在线监督
+    function supervision(record: any): void {
+        throw new Error('Function not implemented.');
+    }
+
+    const columns: ProColumns<any>[] = [
+
+        {
+            valueType: 'index',
+            align: 'center',
+            hideInSearch: true,
+        },
+        {
+            title: '项目名称',
+            align: 'center',
+            dataIndex: 'projectName',
+            width: '20%',
+            hideInSearch: false,
+        },
+        {
+            title: '项目编号',
+            align: 'center',
+            dataIndex: 'projectNumber',
+            hideInSearch: true,
+        },
+        {
+            title: '标段',
+            align: 'center',
+            dataIndex: 'sectionName',
+            hideInSearch: true,
+        },
+        {
+            title: '评审室名称',
+            align: 'center',
+            dataIndex: 'reviewRoomName',
+            hideInSearch: false,
+            width: '10%',
+        },
+        {
+            title: '预计评标开始时间',
+            align: 'center',
+            dataIndex: 'startTime',
+            hideInSearch: true,
+            width: '15%',
+        },
+        {
+            title: '预计评标结束时间',
+            align: 'center',
+            dataIndex: 'endTime',
+            hideInSearch: true,
+            width: '9.5%',
+        },
+        {
+            title: '状态',
+            align: 'center',
+            dataIndex: 'state',
+            hideInSearch: true,
+            width: '4.5%',
+            valueEnum: {
+                0: {
+                    text: '未开始'
+                },
+                1: {
+                    text: '评标中'
+                },
+                2: {
+                    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'
+                    actionRef={ref}
+                    search={{ labelWidth: 'auto', span: 6 }}
+                    loading={false}
+                    request={async (params) => {
+                        // spinSet(true);
+                        // return await getPage({
+                        //     ...params,
+                        //     basePageRequest: { pageNo: pageData.pageNo, pageSize: pageData.pageSize },
+                        // }).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);
+                        // })
+                        return {data:[{projectName: '2022年中国联通集团大厦A1913会议室智能化改造项目',
+                                      projectNumber: 'SS25102022000211',
+                                      sectionName: '标段一',
+                                      reviewRoomName: '集团第一评审室',
+                                      state : 1,
+                                      startTime : '2022-07-13 12:30',
+                                      endTime : '2022-07-13 12:30'}],
+                                total:1,
+                                pageSize:10,
+                                current:1}
+                                
+                        }
+                    }
+                    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()} data = {record}/>
+        </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..80a6f2f
--- /dev/null
+++ b/src/pages/VideoMonitor/Online/components/ReservedItems.tsx
@@ -0,0 +1,184 @@
+import { isNotEmpty } from '@/utils/CommonUtils';
+import ProTable, { ActionType, ProColumns } from '@ant-design/pro-table';
+import { Button, Spin, Modal } 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 [record, setRecord] = useState<any[]>([]);
+    //查询分页数据
+    const [pageData, pageDataSet] = useState<any>({
+        pageNo: 1,
+        pageSize: 10
+    });
+    const history = useHistory();
+    const ref = useRef<ActionType>();
+    
+    //查看详情
+    const viewDetails = (record: any) => {
+        setVisible(true);
+        setRecord(record);
+    }
+
+    //关闭
+    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: 'projectNumber',
+            hideInSearch: true,
+        },
+        {
+            title: '标段',
+            align: 'center',
+            dataIndex: 'sectionName',
+            hideInSearch: true,
+        },
+        {
+            title: '评审室名称',
+            align: 'center',
+            dataIndex: 'reviewRoomName',
+            hideInSearch: false,
+            width: '10%',
+        },
+        {
+            title: '预计评标开始时间',
+            align: 'center',
+            dataIndex: 'startTime',
+            hideInSearch: true,
+            width: '15%',
+        },
+        {
+            title: '预计评标结束时间',
+            align: 'center',
+            dataIndex: 'endTime',
+            hideInSearch: true,
+            width: '9.5%',
+        },
+        {
+            title: '状态',
+            align: 'center',
+            dataIndex: 'state',
+            hideInSearch: true,
+            width: '4.5%',
+            valueEnum: {
+                0: {
+                    text: '未开始'
+                },
+                1: {
+                    text: '评标中'
+                },
+                2: {
+                    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'
+                    actionRef={ref}
+                    search={{ labelWidth: 'auto', span: 6 }}
+                    loading={false}
+                    request={async (params) => {
+                        // spinSet(true);
+                        // return await getPage({
+                        //     ...params,
+                        //     basePageRequest: { pageNo: pageData.pageNo, pageSize: pageData.pageSize },
+                        // }).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);
+                        // })
+                        return {data:[{projectName: '2022年中国联通集团大厦A1913会议室智能化改造项目',
+                                      projectNumber: 'SS25102022000211',
+                                      sectionName: '标段一',
+                                      reviewRoomName: '集团第一评审室',
+                                      state : 0,
+                                      startTime : '2022-07-13 12:30',
+                                      endTime : '2022-07-13 12:30'}],
+                                total:1,
+                                pageSize:10,
+                                current:1}
+                                
+                        }
+                    }
+                    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()} data = {record}/>
+        </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..415ab84
--- /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-project/v1/projectRecord/supervisor/getPage', {
+    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..527b87a
--- /dev/null
+++ b/src/pages/VideoMonitor/Post/index.tsx
@@ -0,0 +1,205 @@
+import { isNotEmpty } from '@/utils/CommonUtils';
+import ProTable, { ActionType, 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';
+
+interface ViewDetailsProps {
+    entity?: {
+        projectName?:string|null,
+        projectNumber?:string|null,
+    } | null,
+    visibleDefault?:boolean| false,
+}
+/**
+ * 事后监督列表
+ * @returns 
+ */
+const PostSupervision: React.FC<{}> = () => {
+
+    const [spin, spinSet] = useState<boolean>(false);
+    const [visible, setVisible] = useState<boolean>(false);
+    const [record, setRecord] = useState<any[]>([]);
+    //查询分页数据
+    const [pageData, pageDataSet] = useState<any>({
+        pageNo: 1,
+        pageSize: 10
+    });
+    const history = useHistory();
+    const ref = useRef<ActionType>();
+
+    //查看详情
+    const viewDetails = (record: any) => {
+        setVisible(true);
+        setRecord(record);
+    }
+
+    //关闭
+    const closeViewDetails = () => {
+        setVisible(false);
+    }
+
+    //评标监控回看
+    function reviewMonitor(record: any): void {
+        throw new Error('Function not implemented.');
+    }
+
+    const columns: ProColumns<any>[] = [
+
+        {
+            valueType: 'index',
+            align: 'center',
+            hideInSearch: true,
+        },
+        {
+            title: '项目名称',
+            align: 'center',
+            dataIndex: 'projectName',
+            width: '20%',
+            hideInSearch: false,
+        },
+        {
+            title: '项目编号',
+            align: 'center',
+            dataIndex: 'projectNumber',
+            hideInSearch: true,
+        },
+        {
+            title: '标段',
+            align: 'center',
+            dataIndex: 'sectionName',
+            hideInSearch: true,
+        },
+        {
+            title: '评审室名称',
+            align: 'center',
+            dataIndex: 'reviewRoomName',
+            hideInSearch: false,
+            width: '10%',
+        },
+        {
+            title: '预计评标开始时间',
+            align: 'center',
+            dataIndex: 'startTime',
+            hideInSearch: true,
+            width: '15%',
+        },
+        {
+            title: '预计评标结束时间',
+            align: 'center',
+            dataIndex: 'endTime',
+            hideInSearch: true,
+            width: '9.5%',
+        },
+        {
+            title: '状态',
+            align: 'center',
+            dataIndex: 'state',
+            hideInSearch: true,
+            width: '4.5%',
+            valueEnum: {
+                0: {
+                    text: '未开始'
+                },
+                1: {
+                    text: '评标中'
+                },
+                2: {
+                    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'
+                    actionRef={ref}
+                    search={{ labelWidth: 'auto', span: 6 }}
+                    loading={false}
+                    request={async (params) => {
+                        // spinSet(true);
+                        // return await getPage({
+                        //     ...params,
+                        //     basePageRequest: { pageNo: pageData.pageNo, pageSize: pageData.pageSize },
+                        // }).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);
+                        // })
+                        return {data:[{projectName: '2022年中国联通集团大厦A1913会议室智能化改造项目',
+                                      projectNumber: 'SS25102022000211',
+                                      sectionName: '标段一',
+                                      reviewRoomName: '集团第一评审室',
+                                      state : 2,
+                                      startTime : '2022-07-13 12:30',
+                                      endTime : '2022-07-13 12:30'}],
+                                total:1,
+                                pageSize:10,
+                                current:1}
+                                
+                        }
+                    }
+                    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()} data = {record}/>
+        </Spin>
+    )
+}
+export default PostSupervision;
+
diff --git a/src/pages/VideoMonitor/Post/service.ts b/src/pages/VideoMonitor/Post/service.ts
new file mode 100644
index 0000000..415ab84
--- /dev/null
+++ b/src/pages/VideoMonitor/Post/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-project/v1/projectRecord/supervisor/getPage', {
+    method: 'POST',
+    data: params,
+  });
+}
\ No newline at end of file
diff --git a/src/pages/VideoMonitor/ViewModal.tsx b/src/pages/VideoMonitor/ViewModal.tsx
new file mode 100644
index 0000000..a1d9ca8
--- /dev/null
+++ b/src/pages/VideoMonitor/ViewModal.tsx
@@ -0,0 +1,39 @@
+import { Spin, Modal } from 'antd';
+import React, { useState } from 'react';
+import JgtzsModal from '../ZYuShen/Calibration/ProjectManager/ResultNotice/components/JgtzsModal';
+
+interface ViewDetailsProps {
+    modalVisible: boolean; //开启关闭控制
+    onCancel: () => void; //关闭方法传入
+    data: any //数据传入
+  }
+
+/**
+ * 详情弹出层
+ * @returns 
+ */
+ const ViewDetails: React.FC<ViewDetailsProps> = (props) => {
+        const {modalVisible, onCancel, data} = props;
+        const [spin, spinSet] = useState<boolean>(false);
+        return (<Modal
+                    destroyOnClose = {true}
+                    visible = {modalVisible}
+                    onCancel = {() => {onCancel()}}        
+                    title={<div>
+                        <span>详情</span>
+                        <span style={{textAlign: "center",width: "100%",position: "absolute",left: 0}}>{data?.projectName}</span>
+                        </div>}
+                    footer={null}
+                    width={1000}
+                >
+                    
+                    <Spin spinning={spin}></Spin>
+                    <p>Some contents...</p>
+                    <p>Some contents...</p>
+                    <p>Some contents...</p>
+                    <p>Some contents...</p>
+                    <p>Some contents...</p>
+            </Modal>)
+}
+export default ViewDetails;
+