diff --git a/config/router.config.ts b/config/router.config.ts
index 46b1726..1e2c3eb 100644
--- a/config/router.config.ts
+++ b/config/router.config.ts
@@ -111,6 +111,10 @@ export default [
           },
           ...home,//各角色主页
           ...menuaZhaoBiao,//项目菜单所有路由
+          {
+            path: '/AppointmentManage',
+            component: './AppointmentManage',
+          },
           {//问卷调查
             name: 'Questionnaire',
             icon: 'UnorderedListOutlined',
diff --git a/src/components/ElecBidEvaluation/MeetingReservation.tsx b/src/components/ElecBidEvaluation/MeetingReservation.tsx
new file mode 100644
index 0000000..a4f6e8b
--- /dev/null
+++ b/src/components/ElecBidEvaluation/MeetingReservation.tsx
@@ -0,0 +1,211 @@
+import React, { useEffect, useState } from 'react';
+import { Button, DatePicker, DatePickerProps, Form, Input, message, Modal, Select, Skeleton, Spin } from 'antd';
+import moment from 'moment'
+import { cancelMeeting, getMeetingData, saveMeeting } from './service';
+import { isNotEmpty } from '@/utils/CommonUtils';
+import { ExclamationCircleOutlined } from '@ant-design/icons';
+import { dateTimeFormatter, echoDateTimeFormatter } from '@/utils/DateUtils';
+
+interface MeetingReservationProps {
+    modalVisible: boolean;
+    onCancel: () => void;
+    onSubmit?: () => void;
+    roomList?: any[];//评标室列表 带问号的参数可不传
+    status: string;//状态 0-新建 1-编辑 2-查看
+    meetId?: string;//预约id
+}
+const layout = {
+    labelCol: { span: 7 },
+    wrapperCol: { span: 14 },
+};
+const validateMessages = {
+    required: '请填写此项',
+};
+const range = (start: number, end: number) => {
+    const result = [];
+    for (let i = start; i < end; i++) {
+        result.push(i);
+    }
+    return result;
+};
+/**
+ * 评标室预约管理-会议室预约弹窗
+ * @param props 
+ * @returns 
+ */
+const MeetingReservation: React.FC<MeetingReservationProps> = (props) => {
+    const { modalVisible, onCancel, onSubmit, roomList, status, meetId } = props;
+    const [form] = Form.useForm();
+    const { Option } = Select;
+    const { confirm } = Modal;
+    const { TextArea } = Input;
+    //loading
+    const [loading, setLoading] = useState<boolean>(false);
+    //初始化
+    const [skeleing, setSkeleing] = useState<boolean>(false);
+    //窗口状态 0-新建 1-编辑 2-查看
+    const [modalStatus, setModalStatus] = useState<string | undefined>(status);
+    //评标室类型 meeting-会议室 eval-评标室
+    const [meetType, setMeetType] = useState<string>("meeting");
+
+    const onFinish = (values: any) => {
+        console.log(values);
+        if (values.reserveStartDate < moment().format(dateTimeFormatter)) {
+            message.info("开始时间不可早于当前时间");
+            return;
+        }
+        const params = JSON.parse(JSON.stringify(values));//深拷贝
+        params.reserveStartDate = moment(params.reserveStartDate).format(dateTimeFormatter);
+        params.reserveEndDate = moment(params.reserveEndDate).format(dateTimeFormatter);
+        setLoading(true);
+        saveMeeting(params).then(res => {
+            if (res?.code == 200) {
+                message.success("保存成功");
+                onSubmit && onSubmit();
+            }
+        }).finally(() => {
+            setLoading(false);
+        })
+    };
+    //不可选天
+    function disabledDate(current: any) {
+        return current && current < moment().startOf('day');
+    }
+    //不可选小时
+    const disabledDateTime = () => ({
+        disabledHours: () => [...range(0, 7), ...range(19, 24)],
+    });
+    //时间选择框日期格式化
+    const dateFormat: DatePickerProps['format'] = value => value?.startOf('hour').format('YYYY-MM-DD HH:mm:ss');
+    //获取预约信息
+    const getMeetData = () => {
+        setSkeleing(true);
+        getMeetingData(meetId).then(res => {
+            if (res?.code == 200) {
+                setSkeleing(false);
+                const data = res?.data;
+                setMeetType(data.reserveType);//变更窗口类型
+                if (data.reserveType == "meeting") {
+                    data.reserveStartDate = echoDateTimeFormatter(data.reserveStartDate);
+                    data.reserveEndDate = echoDateTimeFormatter(data.reserveEndDate);
+                }
+                form.setFieldsValue(data);
+            }
+        })
+    }
+    //取消预约
+    const cancelMeet = () => {
+        confirm({
+            title: "确认取消预约？",
+            icon: <ExclamationCircleOutlined />,
+            centered: true,
+            content: '',
+            async onOk() {
+                await cancelMeeting(meetId).then(res => {
+                    if (res?.code == 200) {
+                        message.success("取消预约成功");
+                        onSubmit && onSubmit();
+                    }
+                })
+            },
+            onCancel() { },
+        });
+    }
+    useEffect(() => {
+        if (isNotEmpty(meetId)) {
+            getMeetData();
+        }
+    }, [meetId])
+
+    return (
+        <Modal
+            destroyOnClose
+            title={skeleing ? null : meetType == "meeting" ? "会议室预约" : "详情"}
+            visible={modalVisible}
+            onCancel={() => onCancel()}
+            centered
+            width={600}
+            footer={skeleing ? [<Skeleton.Button active />] : [
+                <Button key="close" onClick={onCancel}>
+                    返回
+                </Button>,
+                <Button key="save" type="primary" onClick={() => form.submit()} hidden={meetType == "eval" || meetType == undefined || modalStatus == "2"}>
+                    保存
+                </Button>,
+                <Button key="edit" onClick={() => { setModalStatus("1"); }} hidden={meetType == "eval" || meetType == undefined || modalStatus == "1" || modalStatus == "0"}>
+                    修改预约
+                </Button>,
+                <Button type="primary" key="cancel" hidden={modalStatus == "0"} onClick={() => cancelMeet()}>
+                    取消预约
+                </Button>,
+            ]}
+        >
+            <Spin spinning={loading}>
+                <Skeleton loading={skeleing} active>
+                    <Form {...layout} form={form} name="control-hooks" onFinish={onFinish} validateMessages={validateMessages}>
+                        {meetType == "meeting" ? (
+                            <>
+                                <Form.Item name="id" label="会议id" hidden>
+                                    <Input />
+                                </Form.Item>
+                                <Form.Item name="areaId" label="评标室" rules={[{ required: !(modalStatus == "2") }]}>
+                                    <Select
+                                        placeholder="选择评标室"
+                                        allowClear
+                                        disabled={modalStatus == "2"}
+                                    >
+                                        {roomList?.map(item => (<Option value={item.id} key={item.id}>{item.areaName}</Option>))}
+                                    </Select>
+                                </Form.Item>
+                                <Form.Item name="meetingName" label="会议名称" rules={[{ required: !(modalStatus == "2") }]}>
+                                    <TextArea placeholder="会议名称" disabled={modalStatus == "2"} autoSize maxLength={50} />
+                                </Form.Item>
+                                <Form.Item name="numberInMeeting" label="会议人数" rules={[{ required: !(modalStatus == "2") }]}>
+                                    <Input type="number" placeholder="会议人数" suffix="人" disabled={modalStatus == "2"} maxLength={5} />
+                                </Form.Item>
+                                <Form.Item name="reserveStartDate" label="会议开始时间" rules={[{ required: !(modalStatus == "2") }]}>
+                                    <DatePicker showTime={{ defaultValue: moment().hour(7) }} showNow={false} disabledDate={disabledDate} disabledTime={disabledDateTime} showMinute={false} showSecond={false} format={dateFormat} style={{ width: '100%' }} disabled={modalStatus == "2"} />
+                                </Form.Item>
+                                <Form.Item name="reserveEndDate" label="会议结束时间" rules={[{ required: !(modalStatus == "2") }]}>
+                                    <DatePicker showTime={{ defaultValue: moment().hour(7) }} showNow={false} disabledDate={disabledDate} disabledTime={disabledDateTime} showMinute={false} showSecond={false} format={dateFormat} style={{ width: '100%' }} disabled={modalStatus == "2"} />
+                                </Form.Item>
+                                <Form.Item name="reserveBy" label="预约人" rules={[{ required: !(modalStatus == "2") }]}>
+                                    <Input placeholder="预约人" disabled={modalStatus == "2"} maxLength={50} />
+                                </Form.Item>
+                                <Form.Item name="reserveContactNumber" label="预约人联系方式" rules={[{ required: !(modalStatus == "2") }]}>
+                                    <Input placeholder="预约人联系方式" disabled={modalStatus == "2"} maxLength={50} />
+                                </Form.Item>
+                            </>
+                        ) : (
+                            <>
+                                <Form.Item name="projectName" label="项目名称">
+                                    <TextArea readOnly bordered={false} autoSize />
+                                </Form.Item>
+                                <Form.Item name="projectNum" label="项目编号">
+                                    <Input readOnly bordered={false} />
+                                </Form.Item>
+                                <Form.Item name="sectionNames" label="标段名称">
+                                    <TextArea readOnly bordered={false} autoSize />
+                                </Form.Item>
+                                <Form.Item name="reserveStartDate" label="预计开始时间">
+                                    <Input readOnly bordered={false} />
+                                </Form.Item>
+                                <Form.Item name="reserveEndDate" label="预计结束时间">
+                                    <Input readOnly bordered={false} />
+                                </Form.Item>
+                                <Form.Item name="reserveBy" label="预约人">
+                                    <Input readOnly bordered={false} />
+                                </Form.Item>
+                                <Form.Item name="reserveContactNumber" label="预约人联系方式">
+                                    <Input readOnly bordered={false} />
+                                </Form.Item>
+                            </>
+                        )}
+                    </Form>
+                </Skeleton>
+            </Spin>
+        </Modal>
+    );
+};
+
+export default MeetingReservation;
diff --git a/src/components/ElecBidEvaluation/service.ts b/src/components/ElecBidEvaluation/service.ts
new file mode 100644
index 0000000..944ba2b
--- /dev/null
+++ b/src/components/ElecBidEvaluation/service.ts
@@ -0,0 +1,29 @@
+import request from '@/utils/request';
+
+/**
+ * 根据预约id获取预约信息
+ */
+export async function getMeetingData(id: any) {
+    return request('/api/biz-service-ebtp-evaluation/v1/eval/room/reserve/infoById/' + id, {
+        method: 'GET',
+    });
+}
+
+/**
+ * 保存预约
+ */
+export async function saveMeeting(data: any) {
+    return request('/api/biz-service-ebtp-evaluation/v1/eval/room/reserve/meeting/save', {
+        method: 'POST',
+        data: { ...data }
+    });
+}
+
+/**
+ * 取消预约
+ */
+export async function cancelMeeting(id: any) {
+    return request('/api/biz-service-ebtp-evaluation/v1/eval/room/reserve/cancel/' + id, {
+        method: 'GET',
+    });
+}
\ No newline at end of file
diff --git a/src/pages/AppointmentManage/index.tsx b/src/pages/AppointmentManage/index.tsx
new file mode 100644
index 0000000..84d449b
--- /dev/null
+++ b/src/pages/AppointmentManage/index.tsx
@@ -0,0 +1,240 @@
+import ProList from '@ant-design/pro-list';
+import type { ActionType, ProColumns } from '@ant-design/pro-table';
+import ProTable from '@ant-design/pro-table';
+import { Button, Card, Space, Tag } from 'antd';
+import React, { ReactText, useEffect, useState } from 'react';
+import { useRef } from 'react';
+import MeetingReservation from '@/components/ElecBidEvaluation/MeetingReservation';
+import { getRecordData, getSiteList } from './service';
+import { isEmpty } from '@/utils/CommonUtils';
+
+const orange_bg = { background: '#f59a23', color: '#0000ff', cursor: 'pointer', width: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' };
+const green_bg = { background: '#4b7902' };
+const align_middle = { display: 'flex', alignItems: 'center' };
+const tag_size = { height: '20px', width: '20px' };
+
+const ScreenTable = (props: { record: any, onCellClick: (id: any) => void, refresh: number }) => {
+    const { record, onCellClick, refresh } = props;
+    const actionRef = useRef<ActionType>();
+    //表格列
+    const [tableColumns, setTableColumns] = useState<ProColumns<any>[]>([]);
+    //表格数据
+    const [tableData, setTableData] = useState<any[]>([]);
+    //星期偏移量
+    const offset = useRef<number>(0);
+
+    //表格列拼接
+    const columnsSplice = (weeksData: any[]) => {
+        const columns: ProColumns<any>[] = [
+            {
+                title: '评标室名称',
+                dataIndex: 'name',
+                align: 'center',
+                render: (_, record, index) => {
+                    return {
+                        children: _,
+                        props: {
+                            rowSpan: index % 24 == 0 ? 24 : 0,
+                        }
+                    }
+                }
+            },
+            {
+                title: '可容纳人数（人）',
+                dataIndex: 'rs',
+                align: 'center',
+                render: (_, record, index) => {
+                    return {
+                        children: _,
+                        props: {
+                            rowSpan: index % 24 == 0 ? 24 : 0,
+                        }
+                    }
+                }
+            },
+            {
+                title: '场次',
+                align: 'center',
+                colSpan: 2,
+                render: (_, record, index) => {
+                    return {
+                        children: "07:00 ~ 18:00",
+                        props: {
+                            rowSpan: index % 24 == 0 ? 24 : 0,
+                        }
+                    }
+                }
+            },
+            {
+                dataIndex: "time",
+                align: 'right',
+                width: '100px',
+                colSpan: 0,
+            },
+            {
+                title: '预约时间',
+                dataIndex: "info_time",
+                valueType: 'date',
+                hideInTable: true,
+            },
+        ];
+        for (const ite of weeksData) {
+            columns.push({
+                title: <span>{ite.week}<br />{ite.date}</span>,
+                dataIndex: ite.id,
+                align: 'center',
+                ellipsis: true,
+                onCell: (record) => {
+                    return {
+                        style: record[ite.id]?.iskssj ? orange_bg : green_bg,
+                        onClick: record[ite.id]?.iskssj ? () => onCellClick(record[ite.id]?.id) : void 0,
+                    }
+                },
+                render: (_: any, record: any) => {
+                    return {
+                        children: record[ite.id]?.hymc,
+                        props: {
+                            rowSpan: record[ite.id]?.iskssj ? record[ite.id]?.hour : record[ite.id]?.hour ? 0 : 1,
+                        }
+                    }
+                }
+            })
+        }
+        setTableColumns(columns);
+    }
+
+    const getTableData = () => {
+        getRecordData({ areaId: record?.id, offset: offset.current }).then(res => {
+            if (res?.code == 200) {
+                const data = res?.data;
+                columnsSplice(data.week);
+                setTableData(data.data);
+            }
+        })
+    }
+    const weekChange = (param: string) => {
+        if (param == "1") {
+            offset.current += 1;
+        } else if (param == "0") {
+            offset.current -= 1;
+        }
+        getTableData();
+    }
+    useEffect(() => {
+        //获取预约记录
+        getTableData();
+    }, [refresh]);
+    return (
+        <div>
+            {tableData.length > 0 && (
+                <Space style={{ margin: '10px 0' }}>
+                    <Button key="last-week" size='small' type="primary" onClick={() => weekChange("0")}>
+                        上一周
+                    </Button>
+                    <Button key="after-week" size='small' type="primary" onClick={() => weekChange("1")}>
+                        下一周
+                    </Button>
+                </Space>
+            )}
+            <ProTable<any>
+                columns={tableColumns}
+                actionRef={actionRef}
+                bordered
+                size='small'
+                dataSource={tableData}
+                rowKey="time"
+                search={false}
+                pagination={false}
+                options={false}
+                dateFormatter="string"
+            />
+        </div>
+    )
+}
+
+export default () => {
+    //预约弹窗
+    const [modalVisible, setModalVisible] = useState<boolean>(false);
+    //评标场所列表数据
+    const [siteListData, setSiteListData] = useState<any[]>([]);
+    //评标场所列表展开
+    const [expandedRowKeys, setExpandedRowKeys] = useState<readonly ReactText[]>([]);
+    //预约状态
+    const [meetStatus, setMeetStatus] = useState<string>("2");
+    //预约id
+    const [meetId, setMeetId] = useState<string>("");
+    //刷新参数
+    const [refresh, setRefresh] = useState<number>(0);
+
+    //获取评标场所
+    const getSiteListData = (key: any) => {
+        getSiteList().then(res => {
+            if (res?.code == 200) {
+                const data = res?.data;
+                setSiteListData(data);
+                if (key == "0" && data?.length > 0) {
+                    setExpandedRowKeys([data[0].id]);
+                }
+            }
+        })
+    }
+    //新建预约
+    const createMeet = () => {
+        setMeetStatus("0");
+        setMeetId("");
+        setModalVisible(true);
+    }
+    //查看预约
+    const viewMeet = (id: any) => {
+        setMeetStatus("2");
+        setMeetId(id);
+        setModalVisible(true);
+    }
+    //查看预约详情跳转
+    const viewMeetContent = () => {
+        window.open("/ElecEvalReserve");
+    }
+
+    useEffect(() => {
+        getSiteListData("0");
+    }, [])
+
+    return (
+        <Card title="评标室预约情况" bodyStyle={{ padding: '16px 0px 24px', height: window.innerHeight - 120, overflowY: 'auto' }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '0 24px 16px' }}>
+                <Space>
+                    <Button key="yuyue" type="primary" onClick={() => createMeet()}>
+                        预约
+                    </Button>
+                    <Button key="yuyueconfirm" onClick={() => viewMeetContent()}>
+                        查看预约详情
+                    </Button>
+                </Space>
+                <Space size="middle">
+                    <div style={align_middle}><Tag color="#f59a23" style={tag_size}></Tag>已预约</div>
+                    <div style={align_middle}><Tag color="#4b7902" style={tag_size}></Tag>未预约</div>
+                </Space>
+            </div>
+            <ProList<any>
+                rowKey="id"
+                expandable={{
+                    expandedRowKeys, onExpandedRowsChange: setExpandedRowKeys,
+                }}
+                dataSource={siteListData}
+                toolBarRender={false}
+                metas={{
+                    title: {
+                        render: (_: any, record: any) => <span onClick={() => setExpandedRowKeys(keys => keys.includes(record.id) ? [] : [record.id])}>{record.areaName}</span>,
+                    },
+                    subTitle: {
+                        render: (_: any, record: any) => `可容纳人数：${isEmpty(record.areaNumber) ? '' : record.areaNumber}人`,
+                    },
+                    description: {
+                        render: (_: any, record: any) => <ScreenTable record={record} onCellClick={viewMeet} refresh={refresh} />,
+                    },
+                }}
+            />
+            {modalVisible && <MeetingReservation modalVisible={modalVisible} onCancel={() => { setModalVisible(false); getSiteListData("1") }} roomList={siteListData} status={meetStatus} meetId={meetId} onSubmit={() => { setModalVisible(false); setRefresh(refresh => refresh + 1) }} />}
+        </Card >
+    );
+};
\ No newline at end of file
diff --git a/src/pages/AppointmentManage/service.ts b/src/pages/AppointmentManage/service.ts
new file mode 100644
index 0000000..4574b87
--- /dev/null
+++ b/src/pages/AppointmentManage/service.ts
@@ -0,0 +1,21 @@
+import request from '@/utils/request';
+
+/**
+ * 获取评标场所信息
+ */
+export async function getSiteList() {
+    return request('/api/biz-service-ebtp-evaluation/v1/elec/eval/room/list', {
+        method: 'GET',
+    });
+}
+
+/**
+ * 获取预约记录
+ * @params
+ */
+export async function getRecordData(params: any) {
+    return request('/api/biz-service-ebtp-evaluation/v1/eval/room/reserve/query/overview', {
+        method: 'GET',
+        params: params,
+    });
+}
\ No newline at end of file