diff --git a/css/constrDisplay/constrDisplay.css b/css/constrDisplay/constrDisplay.css
new file mode 100644
index 0000000..987a8d8
--- /dev/null
+++ b/css/constrDisplay/constrDisplay.css
@@ -0,0 +1,220 @@
+html,
+body {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    color: #fff;
+    font-family: 'Alibaba PuHuiTi R';
+}
+
+#main-box {
+    width: 100%;
+    height: 100%;
+    justify-content: space-evenly;
+}
+
+.layout {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+#left-box {
+    width: 67%;
+    height: 100%;
+    padding-top: 0.85%;
+    box-sizing: border-box;
+}
+
+#person-place-situation {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background: url("../../img/constrDisplay/back-1.png") no-repeat 0 0 / 100% 100%;
+    background-position: center center !important;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.title {
+    width: 100%;
+    height: 40px;
+    justify-content: start;
+    align-items: start;
+    font-size: 16px;
+    letter-spacing: 1px;
+    padding: 5px 0 0 30px;
+    box-sizing: border-box;
+}
+
+#person-box {
+    width: 100%;
+    height: calc(100% - 40px);
+}
+
+#person-type-title {
+    width: 100%;
+    height: 50px;
+    justify-content: end;
+}
+
+
+
+#work-box {
+    width: 100%;
+    height: calc(100% - 40px);
+    flex-direction: column;
+}
+
+.type-title {
+    margin: 0 15px;
+    font-size: 14px;
+}
+
+.type-title:nth-child(1)>p:nth-child(1) {
+    width: 10px;
+    height: 10px;
+    margin: 0 5px;
+    background-color: #FF312A;
+}
+
+.type-title:nth-child(2)>p:nth-child(1) {
+    width: 10px;
+    height: 10px;
+    margin: 0 5px;
+    background-color: #2BEEC0;
+}
+
+.type-title:nth-child(3)>p:nth-child(1) {
+    width: 10px;
+    height: 10px;
+    margin: 0 5px;
+    background-color: #fff;
+}
+
+#img-box {
+    width: 100%;
+    height: calc(100% - 50px);
+}
+
+.layui-flow-more {
+    width: 100%;
+}
+
+#ID-flow-demo {
+    width: 100%;
+    height: 100%;
+    justify-content: start;
+    align-items: start;
+    flex-wrap: wrap;
+    overflow-y: auto;
+}
+
+.img-info {
+    width: 12%;
+    height: 180px;
+    margin: 1% 2.3%;
+}
+
+.imgData img {
+    width: 90%;
+    height: 86%;
+    margin: 7% 5%;
+}
+
+.imgData {
+    width: 100%;
+    height: 85%;
+    background-position: center center !important;
+}
+
+.imgData2 {
+    width: 100%;
+    height: 15%;
+}
+
+.imgData2>p {
+    margin: 0 10px;
+    font-size: 15px;
+}
+
+.img-color1 {
+    color: #FF312A;
+}
+
+.img-color2 {
+    color: #2BEEC0;
+}
+
+.img-color3 {
+    color: #fff;
+}
+
+#work-content-box {
+    width: 100%;
+    height: 36%;
+}
+
+#main-risk-box {
+    width: 100%;
+    height: 26%;
+}
+
+#yesterday-content-box {
+    width: 100%;
+    height: 36%;
+}
+
+.child-title {
+    width: 100%;
+    height: 36px;
+    background: url("../../img/constrDisplay/back-title.png") no-repeat 0 0 / 100% 100%;
+    background-position: center center !important;
+    font-size: 16px;
+    letter-spacing: 1px;
+}
+
+.content-info {
+    width: 100%;
+    height: calc(100% - 36px);
+}
+
+.content-info>div {
+    width: 100%;
+    height: 90%;
+    padding: 5px 15px;
+    letter-spacing: 1px;
+    font-size: 15px;
+    box-sizing: border-box;
+}
+
+#right-box {
+    width: 30%;
+    height: 100%;
+    flex-direction: column;
+    justify-content: space-between;
+    padding-top: 0.85%;
+    box-sizing: border-box;
+}
+
+#work-situation {
+    width: 100%;
+    height: 100%;
+    background: url("../../img/constrDisplay/back-2.png") no-repeat 0 0 / 100% 100%;
+    background-position: center center !important;
+    justify-content: space-between;
+    flex-direction: column;
+}
+
+img {
+    image-rendering: -moz-crisp-edges;
+    /* Firefox */
+    image-rendering: -o-crisp-edges;
+    /* Opera */
+    image-rendering: -webkit-optimize-contrast;
+    /*Webkit (non-standard naming) */
+    image-rendering: crisp-edges;
+    -ms-interpolation-mode: nearest-neighbor;
+    /* IE (non-standard property) */
+}
\ No newline at end of file
diff --git a/img/constrDisplay/back-1.png b/img/constrDisplay/back-1.png
new file mode 100644
index 0000000..4e2a320
Binary files /dev/null and b/img/constrDisplay/back-1.png differ
diff --git a/img/constrDisplay/back-2.png b/img/constrDisplay/back-2.png
new file mode 100644
index 0000000..bf43495
Binary files /dev/null and b/img/constrDisplay/back-2.png differ
diff --git a/img/constrDisplay/back-title.png b/img/constrDisplay/back-title.png
new file mode 100644
index 0000000..068286b
Binary files /dev/null and b/img/constrDisplay/back-title.png differ
diff --git a/img/constrDisplay/img-1.png b/img/constrDisplay/img-1.png
new file mode 100644
index 0000000..f2d4b91
Binary files /dev/null and b/img/constrDisplay/img-1.png differ
diff --git a/img/constrDisplay/img-2.png b/img/constrDisplay/img-2.png
new file mode 100644
index 0000000..964c6ec
Binary files /dev/null and b/img/constrDisplay/img-2.png differ
diff --git a/img/constrDisplay/img-3.png b/img/constrDisplay/img-3.png
new file mode 100644
index 0000000..3ef0e81
Binary files /dev/null and b/img/constrDisplay/img-3.png differ
diff --git a/img/constrDisplay/test.jpg b/img/constrDisplay/test.jpg
new file mode 100644
index 0000000..f26c4b0
Binary files /dev/null and b/img/constrDisplay/test.jpg differ
diff --git a/js/pages/constrDisplay/constrDisplay.js b/js/pages/constrDisplay/constrDisplay.js
new file mode 100644
index 0000000..448769f
--- /dev/null
+++ b/js/pages/constrDisplay/constrDisplay.js
@@ -0,0 +1,239 @@
+let form, laydate, flow, layer;
+let pageNum = 1, pageSize = 100; // 定义分页
+layui.use(["form", 'laydate', 'flow', 'layer'], function () {
+    form = layui.form;
+    laydate = layui.laydate;
+    flow = layui.flow;
+    layer = layui.layer;
+    dataFlow({
+        pageNum: pageNum,
+        pageSize: pageSize
+    });
+    $('#workContent').append('混凝土工程;模板工程;装配式围墙施工;砖砌电缆沟;阀厅建筑物接地施工;钢结构安装;钢结构安装;阀厅建筑物接地施工;模板工程;站区四通一平、站区道路工程;模板工程;模板工程;模板工程;围墙工程混凝土、砂浆搅拌及浇筑;模板安拆;装配式围墙施工;电缆沟砌筑;焊接;檩条及墙板安装;檩条及墙板安装;焊接;模板安拆;场地平整;模板安拆;模板安拆;模板安拆;围墙工程施工混凝土、砂浆搅拌及浇筑-配电装置楼;模板安拆-配电装置楼;装配式围墙施工-站区围墙;电缆沟砌筑-电缆沟;焊接-配电装置区;檩条及墙板安装-防火墙;檩条及墙板安装-配电装置楼;焊接-配电装置楼;模板安拆-消弧线圈;场地平整-配电装置楼;模板安拆-站用变压器;模板安拆-电容器;模板安拆-配电装置区;围墙工程施工-站区围墙。');
+    $('#mainRisk').append('触电、机械伤害、高处坠落,触电、机械伤害、其他伤害,物体打击、起重伤害,触电、机械伤害、物体打击,火灾、触电,坍塌,坍塌');
+    $('#yeWorkContent').append('混凝土工程;模板工程;装配式围墙施工;砖砌电缆沟;阀厅建筑物接地施工;钢结构安装;钢结构安装;阀厅建筑物接地施工;模板工程;站区四通一平、站区道路工程;模板工程;模板工程;模板工程;围墙工程混凝土、砂浆搅拌及浇筑;模板安拆;装配式围墙施工;电缆沟砌筑;焊接;檩条及墙板安装;檩条及墙板安装;焊接;模板安拆;场地平整;模板安拆;模板安拆;模板安拆;围墙工程施工混凝土、砂浆搅拌及浇筑-配电装置楼;模板安拆-配电装置楼;装配式围墙施工-站区围墙;电缆沟砌筑-电缆沟;焊接-配电装置区;檩条及墙板安装-防火墙;檩条及墙板安装-配电装置楼;焊接-配电装置楼;模板安拆-消弧线圈;场地平整-配电装置楼;模板安拆-站用变压器;模板安拆-电容器;模板安拆-配电装置区;围墙工程施工-站区围墙。');
+    $("#workContent").niceScroll({ cursorborder: "", cursorcolor: "#c0c4cc", boxzoom: true });
+    $("#mainRisk").niceScroll({ cursorborder: "", cursorcolor: "#c0c4cc", boxzoom: true });
+    $("#yeWorkContent").niceScroll({ cursorborder: "", cursorcolor: "#c0c4cc", boxzoom: true });
+    $("#ID-flow-demo").niceScroll({ cursorborder: "", cursorcolor: "#c0c4cc", boxzoom: true });
+});
+
+/**数据流加载*/
+function dataFlow(queryParams) {
+    flow.load({
+        elem: '#ID-flow-demo', // 流加载容器
+        scrollElem: '#ID-flow-demo', // 滚动条所在元素，一般不用填，此处只是演示需要。
+        end: '数据加载完毕',
+        direction: 'bottom',
+        done: function (page, next) { // 执行下一页的回调
+            console.error(page);
+            pageNum = page;
+            let lis = [];
+            queryParams.pageNum = page;
+            let returnData = loadData(queryParams);
+            if (returnData != null) {
+                lis = initImgData(returnData.data.list)
+                next(lis.join(''), page < returnData.data.total / 100);
+            }
+        }
+    });
+}
+
+/**加载图片数据*/
+function loadData(queryParams) {
+    let returnData = {
+        total: 60,
+        data: {
+            list: [
+                {
+                    'path': '../../../img/constrDisplay/test.jpg',
+                    'type': '1',
+                    'username': '张三'
+                },
+                {
+                    'path': '../../../img/constrDisplay/test.jpg',
+                    'type': '2',
+                    'username': '张三'
+                },
+                {
+                    'path': '../../../img/constrDisplay/test.jpg',
+                    'type': '3',
+                    'username': '张三'
+                },
+                {
+                    'path': '../../../img/constrDisplay/test.jpg',
+                    'type': '1',
+                    'username': '张三'
+                },
+                {
+                    'path': '../../../img/constrDisplay/test.jpg',
+                    'type': '2',
+                    'username': '张三'
+                },
+                {
+                    'path': '../../../img/constrDisplay/test.jpg',
+                    'type': '1',
+                    'username': '张三'
+                },
+                {
+                    'path': '../../../img/constrDisplay/test.jpg',
+                    'type': '1',
+                    'username': '张三'
+                },
+                {
+                    'path': '../../../img/constrDisplay/test.jpg',
+                    'type': '2',
+                    'username': '张三'
+                },
+                {
+                    'path': '../../../img/constrDisplay/test.jpg',
+                    'type': '3',
+                    'username': '张三'
+                },
+                {
+                    'path': '../../../img/constrDisplay/test.jpg',
+                    'type': '1',
+                    'username': '张三'
+                },
+                {
+                    'path': '../../../img/constrDisplay/test.jpg',
+                    'type': '2',
+                    'username': '张三'
+                },
+                {
+                    'path': '../../../img/constrDisplay/test.jpg',
+                    'type': '1',
+                    'username': '张三'
+                },
+                {
+                    'path': '../../../img/constrDisplay/test.jpg',
+                    'type': '1',
+                    'username': '张三'
+                },
+                {
+                    'path': '../../../img/constrDisplay/test.jpg',
+                    'type': '2',
+                    'username': '张三'
+                },
+                {
+                    'path': '../../../img/constrDisplay/test.jpg',
+                    'type': '3',
+                    'username': '张三'
+                },
+                {
+                    'path': '../../../img/constrDisplay/test.jpg',
+                    'type': '1',
+                    'username': '张三'
+                },
+                {
+                    'path': '../../../img/constrDisplay/test.jpg',
+                    'type': '2',
+                    'username': '张三'
+                },
+                {
+                    'path': '../../../img/constrDisplay/test.jpg',
+                    'type': '1',
+                    'username': '张三'
+                }, {
+                    'path': '../../../img/constrDisplay/test.jpg',
+                    'type': '1',
+                    'username': '张三'
+                },
+                {
+                    'path': '../../../img/constrDisplay/test.jpg',
+                    'type': '2',
+                    'username': '张三'
+                },
+                {
+                    'path': '../../../img/constrDisplay/test.jpg',
+                    'type': '3',
+                    'username': '张三'
+                },
+                {
+                    'path': '../../../img/constrDisplay/test.jpg',
+                    'type': '1',
+                    'username': '张三'
+                },
+                {
+                    'path': '../../../img/constrDisplay/test.jpg',
+                    'type': '2',
+                    'username': '张三'
+                },
+                {
+                    'path': '../../../img/constrDisplay/test.jpg',
+                    'type': '1',
+                    'username': '张三'
+                }, {
+                    'path': '../../../img/constrDisplay/test.jpg',
+                    'type': '1',
+                    'username': '张三'
+                },
+                {
+                    'path': '../../../img/constrDisplay/test.jpg',
+                    'type': '2',
+                    'username': '张三'
+                },
+                {
+                    'path': '../../../img/constrDisplay/test.jpg',
+                    'type': '3',
+                    'username': '张三'
+                },
+                {
+                    'path': '../../../img/constrDisplay/test.jpg',
+                    'type': '1',
+                    'username': '张三'
+                },
+                {
+                    'path': '../../../img/constrDisplay/test.jpg',
+                    'type': '2',
+                    'username': '张三'
+                },
+                {
+                    'path': '../../../img/constrDisplay/test.jpg',
+                    'type': '1',
+                    'username': '张三'
+                }
+            ]
+        }
+    }
+    return returnData;
+    /* let returnData = null;
+    let url = dataUrl + "/backstage/synthesisQuery/getImgList"
+    let obj = queryParams;
+    let params = {
+        encryptedData: encryptCBC(JSON.stringify(obj))
+    }
+    ajaxRequest(url, "POST", params, false, function () {
+    }, function (result) {
+        if (result.status === 200) {
+            console.log(result)
+            returnData = result;
+        } else {
+            layer.msg(result.msg, { icon: 2 })
+        }
+    }, function (xhr) {
+        error(xhr)
+    });
+    return returnData; */
+}
+
+/**渲染图片*/
+function initImgData(list) {
+    let htmlArr = [];
+    if (list && list.length > 0) {
+        $.each(list, function (index, item) {
+            // let filePath = imgUrl + item.compressFilePath + "?token=" + tokens;
+            let back_img = '../../../img/constrDisplay/img-' + item.type + '.png';
+            let filePath = item.path;
+            htmlArr.push("<div class='img-info'>" +
+                "        <div class='imgData layout' style='background: url(" + back_img + ") no-repeat 0 0 / 100% 100%;'>\n" +
+                "             <img src='" + filePath + "'>" +
+                "        </div>" +
+                "        <div class='imgData2 layout'>" +
+                "            <p class='img-color" + (item.type) + "'>" + item.username + "</p>" +
+                "        </div>" +
+                "    </div>");
+        })
+    }
+    return htmlArr;
+}
\ No newline at end of file
diff --git a/pages/constrDisplay/constrDisplay.html b/pages/constrDisplay/constrDisplay.html
new file mode 100644
index 0000000..5fb39fd
--- /dev/null
+++ b/pages/constrDisplay/constrDisplay.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../../css/font.css">
+    <link rel="stylesheet" href="../../plugin/layui-v2.9.7/layui/css/layui.css">
+    <link rel="stylesheet" href="../../css/constrDisplay/constrDisplay.css">
+    <script src="../../js/publics/sm4.js" type="text/javascript"></script>
+    <!-- <link rel="stylesheet" href="../../css/shuiYin/shuiYin.css"> -->
+    <script src="../../js/publics/jquery-3.6.0.min.js" type="text/javascript"></script>
+    <script src="../../js/publics/public.js"></script>
+    <script src="../../plugin/scroll/jquery.nicescroll.min.js"></script>
+    <script src="../../js/publics/echarts.js"></script>
+    <script src="../../plugin/layui-v2.9.7/layui/layui.js"></script>
+    <script src="../../js/publics/aescbc.js"></script>
+    <script src="../../js/publics/sm3.js"></script>
+    <script src="../../api/commonRequest.js"></script>
+    <!-- <script src="../../js/publics/shuiYin.js"></script> -->
+    <script src="../../plugin/watermark.js"></script>
+    <title>工地展示</title>
+</head>
+<!-- <script type="text/javascript">
+    let text = nickName +"\r\n"+ roleName +"\r\n" + '建设部';
+    watermark.load({ watermark_txt: text });
+</script> -->
+
+<body>
+    <div id="main-box" class="layout">
+        <div id="left-box">
+            <!-- 今日人员到位情况 -->
+            <div id="person-place-situation" class="layout">
+                <div class="title layout">
+                    <p>今日人员到位情况</p>
+                </div>
+                <div id="person-box">
+                    <div id="person-type-title" class="layout">
+                        <div class="type-title layout">
+                            <p></p>
+                            <p>班组长及安全监护员</p>
+                        </div>
+                        <div class="type-title layout">
+                            <p></p>
+                            <p>特殊作业人员</p>
+                        </div>
+                        <div class="type-title layout">
+                            <p></p>
+                            <p>班组其他成员</p>
+                        </div>
+                    </div>
+                    <div id="img-box">
+                        <div class="flow-demo layout" id="ID-flow-demo">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div id="right-box">
+            <!-- 工作情况 -->
+            <div id="work-situation">
+                <div class="title layout">
+                    <p>工作情况</p>
+                </div>
+                <div id="work-box" class="layout">
+                    <div id="work-content-box">
+                        <div class="child-title layout">
+                            <p>今日工作内容</p>
+                        </div>
+                        <div class="content-info">
+                            <div id="workContent"></div>
+                        </div>
+                    </div>
+                    <div id="main-risk-box">
+                        <div class="child-title layout">
+                            <p>工作主要风险</p>
+                        </div>
+                        <div class="content-info">
+                            <div id="mainRisk"></div>
+                        </div>
+                    </div>
+                    <div id="yesterday-content-box">
+                        <div class="child-title layout">
+                            <p>昨日工作情况</p>
+                        </div>
+                        <div class="content-info">
+                            <div id="yeWorkContent"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+<script src="../../js/pages/constrDisplay/constrDisplay.js" type="text/javascript"></script>
+
+</html>
\ No newline at end of file