工地展示
This commit is contained in:
parent
d060d4ff8a
commit
510ff175c0
|
|
@ -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) */
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue