diff --git a/config/router.config.ts b/config/router.config.ts
index 46b1726..c1f53cd 100644
--- a/config/router.config.ts
+++ b/config/router.config.ts
@@ -47,6 +47,16 @@ export default [
     path: '/401',
     component: './401',
   },
+  {
+    path: '/MonitorScreen',
+    routes: [
+      {
+        name: 'Home',
+        path: '/MonitorScreen/Home',
+        component: './MonitorScreen/Home',
+      },
+    ],
+  },
 
 
 
diff --git a/src/assets/screen/title_bg.png b/src/assets/screen/title_bg.png
new file mode 100644
index 0000000..d4f9626
Binary files /dev/null and b/src/assets/screen/title_bg.png differ
diff --git a/src/assets/screen/top_bg.png b/src/assets/screen/top_bg.png
new file mode 100644
index 0000000..1ee87ed
Binary files /dev/null and b/src/assets/screen/top_bg.png differ
diff --git a/src/assets/screen/warn_icon_01.png b/src/assets/screen/warn_icon_01.png
new file mode 100644
index 0000000..7555e57
Binary files /dev/null and b/src/assets/screen/warn_icon_01.png differ
diff --git a/src/assets/screen/warn_icon_02.png b/src/assets/screen/warn_icon_02.png
new file mode 100644
index 0000000..57bf375
Binary files /dev/null and b/src/assets/screen/warn_icon_02.png differ
diff --git a/src/pages/MonitorScreen/Home/index.tsx b/src/pages/MonitorScreen/Home/index.tsx
new file mode 100644
index 0000000..1e3a04d
--- /dev/null
+++ b/src/pages/MonitorScreen/Home/index.tsx
@@ -0,0 +1,396 @@
+import { Col, Descriptions, Radio, Row, Table } from 'antd';
+import React, { useEffect, useRef, useState } from 'react';
+import './style.less';
+import * as echarts from 'echarts';
+import warn_icon_01 from '@/assets/screen/warn_icon_01.png'
+import warn_icon_02 from '@/assets/screen/warn_icon_02.png'
+import moment from 'moment';
+
+const onCell = (_: any, rowIndex: any) => ({ className: rowIndex % 2 == 0 ? "screen-table-odd-content" : "screen-table-even-content", });
+const onHeaderCell = () => ({ className: "screen-table-header", });
+
+const evalColumn: any[] = [
+    {
+        title: '项目名称',
+        dataIndex: 'name',
+        key: 'name',
+        ellipsis: true,
+        onCell,
+        onHeaderCell,
+    },
+    {
+        title: '时间',
+        dataIndex: 'time',
+        key: 'time',
+        align: 'center',
+        onCell,
+        onHeaderCell,
+    },
+    {
+        title: '所属单位',
+        dataIndex: 'unit',
+        key: 'unit',
+        align: 'center',
+        ellipsis: true,
+        onCell,
+        onHeaderCell,
+    },
+    {
+        title: '评标地点',
+        dataIndex: 'place',
+        key: 'place',
+        align: 'center',
+        ellipsis: true,
+        onCell,
+        onHeaderCell,
+    },
+    {
+        title: '专家人数',
+        dataIndex: 'number',
+        key: 'number',
+        align: 'center',
+        onCell,
+        onHeaderCell,
+    },
+];
+const todayEvalColumn: any[] = [
+    {
+        title: '项目名称',
+        dataIndex: 'name',
+        key: 'name',
+        ellipsis: true,
+        width: '20%',
+        onCell,
+        onHeaderCell,
+    },
+    {
+        title: '中标供应商名称',
+        dataIndex: 'supplierName',
+        key: 'supplierName',
+        ellipsis: true,
+        align: 'center',
+        onCell,
+        onHeaderCell,
+    },
+    {
+        title: '拟签约金额',
+        dataIndex: 'money',
+        key: 'money',
+        align: 'center',
+        ellipsis: true,
+        width: '25%',
+        onCell,
+        onHeaderCell,
+    },
+];
+
+const dataSource = [
+    {
+        id: '1',
+        name: '中国联通集团股份有限公司',
+        time: "11:00",
+        unit: '北京',
+        place: '评标地点',
+        number: '5',
+        supplierName: '通信工程局有限责任公司',
+        money: '100000',
+    },
+    {
+        id: '2',
+        name: '中国联通集团股份有限公司',
+        time: "11:00",
+        unit: '北京',
+        place: '评标地点',
+        number: '7',
+        supplierName: '通信工程局有限责任公司',
+        money: '100000',
+    },
+    {
+        id: '3',
+        name: '中国联通集团股份有限公司',
+        time: "11:00",
+        unit: '北京',
+        place: '评标地点',
+        number: '7',
+        supplierName: '通信工程局有限责任公司',
+        money: '100000',
+    },
+    {
+        id: '4',
+        name: '中国联通集团股份有限公司',
+        time: "11:00",
+        unit: '北京',
+        place: '评标地点',
+        number: '7',
+        supplierName: '通信工程局有限责任公司',
+        money: '100000',
+    },
+    {
+        id: '5',
+        name: '中国联通集团股份有限公司',
+        time: "11:00",
+        unit: '北京',
+        place: '评标地点',
+        number: '7',
+        supplierName: '通信工程局有限责任公司',
+        money: '100000',
+    },
+];
+const GraphChart = (props: { type: string }) => {
+    const { type } = props;
+    const random = Math.random().toString();
+    useEffect(() => {
+        type EChartsOption = echarts.EChartsOption;
+        const chartDom = document.getElementById(random)!;
+        const myChart = echarts.init(chartDom);
+        const categoryOption: any = {
+            legend: { top: '3%', textStyle: { color: '#fff' } },
+            tooltip: {},
+            grid: { left: '8%', right: '4%', top: '16%', bottom: 60 },
+            dataset: {
+                dimensions: ['product', '专家人数', '专家签到数量'],
+                source: [
+                    { product: '招标项目', '专家人数': 43.3, '专家签到数量': 85.8, },
+                    { product: '公开比选', '专家人数': 83.1, '专家签到数量': 73.4, },
+                    { product: '公开询价', '专家人数': 86.4, '专家签到数量': 65.2, },
+                    { product: '公开招募', '专家人数': 72.4, '专家签到数量': 53.9, },
+                    { product: '竞争性谈判', '专家人数': 72.4, '专家签到数量': 53.9, },
+                    { product: '单一来源', '专家人数': 72.4, '专家签到数量': 53.9, },
+                ]
+            },
+            xAxis: { type: 'category', axisLabel: { interval: 0, color: '#fff' } },
+            yAxis: { axisLabel: { color: '#fff' } },
+            // Declare several bar series, each will be mapped
+            // to a column of dataset.source by default.
+            series: [{ type: 'bar' }, { type: 'bar' }]
+        };
+        const pieOption: any = {
+            legend: {
+                orient: 'vertical',
+                right: '3%',
+                top: 'middle',
+                textStyle: { color: '#fff' }
+            },
+            tooltip: {},
+            dataset: {
+                source: [
+                    ['product', 'today', 'tomorrow', 'total'],
+                    ['招标项目', 86.5, 92.1, 85.7],
+                    ['公开比选', 41.1, 30.4, 65.1],
+                    ['公开询价', 24.1, 67.2, 79.5],
+                    ['公开招募', 55.2, 67.1, 69.2],
+                    ['竞争性谈判', 86.4, 65.2, 82.5],
+                    ['单一来源', 72.4, 53.9, 39.1],
+                ]
+            },
+            series: [
+                {
+                    type: 'pie',
+                    radius: ['44%', '77%'],
+                    center: ['15%', '45%'],
+                    // No encode specified, by default, it is 'today'.
+                    label: {
+                        show: false,
+                        position: 'center'
+                    },
+                    emphasis: {
+                        label: {
+                            show: true,
+                            fontSize: 24,
+                            fontWeight: 'bold',
+                            color: '#fff'
+                        }
+                    }
+                },
+                {
+                    type: 'pie',
+                    radius: ['44%', '77%'],
+                    center: ['45%', '45%'],
+                    label: {
+                        show: false,
+                        position: 'center'
+                    },
+                    emphasis: {
+                        label: {
+                            show: true,
+                            fontSize: 24,
+                            fontWeight: 'bold',
+                            color: '#fff'
+                        }
+                    },
+                    encode: {
+                        itemName: 'product',
+                        value: 'tomorrow'
+                    }
+                },
+                {
+                    type: 'pie',
+                    radius: ['44%', '77%'],
+                    center: ['75%', '45%'],
+                    label: {
+                        show: false,
+                        position: 'center'
+                    },
+                    emphasis: {
+                        label: {
+                            show: true,
+                            fontSize: '20px',
+                            fontWeight: 'bold',
+                            color: '#fff'
+                        }
+                    },
+                    encode: {
+                        itemName: 'product',
+                        value: 'total'
+                    }
+                }
+            ]
+        };
+
+        const option: EChartsOption = type == "pie" ? pieOption : categoryOption;
+        myChart.setOption(option);
+    }, [])
+    return (
+        <div id={random} style={{ width: '100%', height: '100%' }}></div>
+    )
+}
+
+export default () => {
+    const [time, setTime] = useState<string>('');
+    useEffect(() => {
+
+        const interval = setInterval(function () {
+            const date = moment().format("YYYY-MM-DD HH:mm:ss");
+            setTime(date);
+        }, 1000);
+        return () => {
+            clearInterval(interval)
+        };
+    }, [])
+    //异常预警
+    const EarlyWarn = ({ img, name, num }: { img: string, name: string, num: string | number }) => {
+        return (
+            <div className='screen-warn-content'>
+                <img src={img} className='screen-warn-img' />
+                <div className='screen-warn-content'>
+                    <div className='screen-warn-num'>{num}</div>
+                    <div>{name}</div>
+                </div>
+            </div>
+        )
+    }
+    return (
+        <div className="screen-bg">
+            <div className='top-block'>
+            </div>
+            <div className='top'>
+                <Row>
+                    <Col span={6}>
+                        <div className='top-left'>
+                            <span>当前时间：2022-07-14 07:00:00</span>
+                        </div>
+                    </Col>
+                    <Col span={12}>
+                        <div className='top-title'>
+                            <span>数字化评标监控平台</span>
+                        </div>
+                    </Col>
+                    <Col span={6}>
+                        <div className='top-right'>
+                            <span>当前时间：{time}</span>
+                        </div>
+                    </Col>
+                </Row>
+            </div>
+            <Row className="screen-content">
+                <Col span={18}>
+                    <Row>
+                        <Col span={8} className='screen-right4'>
+                            <div className='screen-card'>
+                                <div className='card-title'>
+                                    <span>今日评标专家数量</span>
+                                </div>
+                                <GraphChart type="category" />
+                            </div>
+                            <div className='screen-card screen-top8'>
+                                <div className='card-title'>
+                                    <span>评标室监控</span>
+                                </div>
+                                <Descriptions size="small" column={2}>
+                                    <Descriptions.Item label="项目名称" span={2}>监控及相关设备IT服务建设购置项目</Descriptions.Item>
+                                    <Descriptions.Item label="标段名称">监控及相关设备IT服务建设购置项目（标段一）</Descriptions.Item>
+                                    <Descriptions.Item label="监控设备名称">摄像头1</Descriptions.Item>
+                                    <Descriptions.Item label="评标室名称">集团第一评标室</Descriptions.Item>
+                                    <Descriptions.Item label="省分">北京</Descriptions.Item>
+                                </Descriptions>
+                            </div>
+                        </Col>
+                        <Col span={16} className='screen-left4 screen-right4'>
+                            <div className='middle-c'>
+                                <div className='map-bg'>
+                                    大屏地图
+                                </div>
+                            </div>
+                        </Col>
+                        <Col span={24} className='screen-top8 screen-right4'>
+                            <div className='screen-card'>
+                                <div className='screen-graph-top'>
+                                    <span className='screen-graph-title'>今日项目数量：50</span>
+                                    <span className='screen-graph-title'>明日项目数量：40</span>
+                                    <span className='screen-graph-title'>累计项目数量：500</span>
+                                    <Radio.Group defaultValue="a" buttonStyle="solid" size='small'>
+                                        <Radio.Button value="a">当月</Radio.Button>
+                                        <Radio.Button value="b">年</Radio.Button>
+                                    </Radio.Group>
+                                </div>
+                                <div className='screen-graph-chart'>
+                                    <GraphChart type="pie" />
+                                </div>
+                                <div className='screen-graph-end'>
+                                    <span>&gt;&gt;项目列表</span>
+                                </div>
+                            </div>
+                        </Col>
+                    </Row>
+                </Col>
+                <Col span={6} className='screen-left4'>
+                    <div className='screen-card'>
+                        <div className='card-title'>
+                            <span>异常预警</span>
+                        </div>
+                        <div className='screen-warn'>
+                            <EarlyWarn name="陌生人预警" img={warn_icon_01} num={10} />
+                            <EarlyWarn name="评标室人数预警" img={warn_icon_02} num={20} />
+                        </div>
+                    </div>
+                    <div className='screen-card screen-top8'>
+                        <div className='card-title'>
+                            <span>评标中项目（20）</span>
+                        </div>
+                        <Table
+                            pagination={false}
+                            className="screen-table"
+                            rowKey="id"
+                            size="small"
+                            dataSource={dataSource}
+                            columns={evalColumn}
+                        />
+                    </div>
+                    <div className='screen-card screen-top8'>
+                        <div className='card-title'>
+                            <span>今日中标项目信息（10）</span>
+                        </div>
+                        <Table
+                            pagination={false}
+                            className="screen-table"
+                            rowKey="id"
+                            size="small"
+                            dataSource={dataSource}
+                            columns={todayEvalColumn}
+                        />
+                    </div>
+                </Col>
+            </Row>
+        </div>
+    );
+};;
diff --git a/src/pages/MonitorScreen/Home/style.less b/src/pages/MonitorScreen/Home/style.less
new file mode 100644
index 0000000..bceb273
--- /dev/null
+++ b/src/pages/MonitorScreen/Home/style.less
@@ -0,0 +1,231 @@
+@import '~antd/lib/style/themes/default.less';
+
+@screen-img-url: "~@/assets/screen";
+@screen-color: #041a6d;
+
+.screen-bg {
+    background: @screen-color;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    text-decoration: none;
+    border: none;
+
+    .top-block {
+        height: 1rem;
+    }
+
+    .top {
+        background-image: url('@{screen-img-url}/top_bg.png');
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+
+        .top-title {
+            text-align: center;
+            letter-spacing: 0.6rem;
+            text-indent: 0.6rem;
+        }
+
+        .top-title span {
+            display: inline-block;
+            color: #fff;
+            font-size: xx-large;
+            position: relative;
+            top: -0.625rem;
+            line-height: 61px;
+        }
+
+        .top-left {
+            color: #fff;
+            font-size: large;
+            letter-spacing: 1px;
+        }
+
+        .top-right {
+            .top-left;
+            margin-top: 0.5rem;
+        }
+    }
+}
+
+.screen-card {
+    height: calc(~"(100vh - 61px - 3rem) / 3");
+    width: 100%;
+    border: 1px solid rgba(255, 255, 255, 0.45);
+    border-radius: 4px;
+
+    .card-title {
+        background-image: url('@{screen-img-url}/title_bg.png');
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        text-align: center;
+    }
+
+    .card-title span {
+        color: #ffcd00;
+        line-height: 36px;
+        font-size: 1rem;
+    }
+
+    .screen-warn {
+        display: flex;
+        justify-content: space-evenly;
+        align-items: center;
+        height: calc(92.6% - 36px);
+    }
+
+    .screen-table {
+        margin-top: 0.5rem;
+        height: calc(100% - 36px - 0.5rem);
+        overflow: hidden;
+
+        .ant-table-container table>thead>tr:first-child th:first-child {
+            border-radius: 0;
+        }
+
+        .ant-table-container table>thead>tr:first-child th:last-child {
+            border-radius: 0;
+        }
+
+        .ant-table-tbody>tr.ant-table-row:hover>td {
+            background: #0e3583;
+        }
+
+        .screen-table-header {
+            background: #045da8;
+            color: #fff;
+            border: 0;
+        }
+
+        .screen-table-odd-content {
+            .screen-table-header;
+            background: #041a6d;
+            color: #2adff5;
+        }
+
+        .screen-table-even-content {
+            .screen-table-odd-content;
+            background: #0e3583;
+        }
+    }
+
+    .screen-graph-top {
+        color: #2cdbf5;
+        font-size: 1rem;
+        padding-top: 0.75rem;
+
+        .screen-graph-title {
+            display: inline-block;
+            width: 30%;
+            text-align: center;
+        }
+    }
+
+    .screen-graph-chart {
+        height: calc(~"100% - 25px - 0.75rem");
+    }
+
+    .screen-graph-end {
+        color: #2cdbf5;
+        // display: flex;
+        // justify-content: flex-end;
+
+        // &>span {
+        //     width: 9%;
+        //     position: relative;
+        //     top: -6px;
+        // }
+        position: absolute;
+        right: 4%;
+        bottom: 2px;
+    }
+}
+
+.screen-warn-content {
+    display: flex;
+    justify-content: left;
+    color: #fff;
+
+    .screen-warn-img {
+        height: 56px;
+        width: 56px;
+    }
+
+    .screen-warn-content {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        margin-left: 0.625rem;
+    }
+
+    .screen-warn-num {
+        color: #f6c507;
+        font-size: 1.6rem;
+        line-height: 1.6rem;
+    }
+}
+
+.screen-content {
+    padding: 0.5rem;
+}
+
+.screen-top8 {
+    margin-top: 0.5rem;
+}
+
+.screen-bottom8 {
+    margin-bottom: 0.5rem;
+}
+
+.screen-left4 {
+    padding-left: 0.25rem;
+}
+
+.screen-right4 {
+    padding-right: 0.25rem;
+}
+
+.middle-c {
+    border: 3px solid #009dff;
+    width: 100%;
+    height: 100%;
+    border-radius: 4px;
+    position: relative;
+    box-sizing: border-box;
+    padding: 0.5rem;
+
+    &:before {
+        content: '';
+        position: absolute;
+        width: 82%;
+        bottom: -3px;
+        top: -3px;
+        left: 9%;
+        border-bottom: 3px solid @screen-color;
+        border-top: 3px solid @screen-color;
+    }
+
+    &:after {
+        content: '';
+        position: absolute;
+        height: 66%;
+        left: -3px;
+        right: -3px;
+        top: 17%;
+        border-left: 3px solid @screen-color;
+        border-right: 3px solid @screen-color;
+    }
+
+    .map-bg {
+        width: 100%;
+        height: 100%;
+        color: white;
+        padding: 1rem;
+        border-radius: 4px;
+        box-shadow: 0 0 3rem rgba(100, 200, 255, .5) inset;
+        background: rgba(0, 0, 0, 0);
+        box-sizing: border-box;
+    }
+}
\ No newline at end of file