bonus
/
gz_digital_signage
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

工程进度更新页面搭建

This commit is contained in:
cwchen 2025-04-22 18:17:19 +08:00
parent 77f95b3e6e
commit 0f478c77bb
9 changed files with 508 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

176
src/main/resources/static/css/synthesisQuery/proProgressUpdateDetail.css Normal file
View File

@ -0,0 +1,176 @@
html {
width: 100%;
height: 100%;
margin: 0;
}
body {
margin: 0;
font-family: 'Alibaba PuHuiTi R';
height: 98%;
}
.layout {
display: flex;
justify-content: center;
align-items: center;
}
#main-box {
width: 100%;
height: 100%;
padding: 0 1% 0 1%;
box-sizing: border-box;
background-color: #fff;
border-radius: 5px;
}
#pro-detail-box {
width: 100%;
height: 80px;
align-items: center;
justify-content: space-between;
}
#pro-basic-detail-box {
width: 100%;
height: 70px;
align-items: center;
justify-content: space-between;
padding: 0 0 0 4%;
box-sizing: border-box;
}
.basic-detail {
flex-direction: column;
width: 12%;
height: 100%;
align-items: start;
justify-content: space-evenly;
}
.basic-detail:nth-child(8) {
width: 28%;
}
#data-box {
width: 100%;
height: calc(100% - 160px);
}
#gx-num-box {
width: 100%;
height: 40px;
justify-content: space-between;
}
.num-box {
width: 10%;
height: 100%;
margin-right: 2%;
justify-content: space-around;
}
.num-box > p:nth-child(1) {
font-weight: bold;
font-size: 18px;
}
.num-box > p:nth-child(2) {
font-size: 18px;
}
.num-box:nth-child(1) > p:nth-child(2) {
color: #666;
}
.num-box:nth-child(2) > p:nth-child(2) {
color: #ffff00;
}
.num-box:nth-child(3) > p:nth-child(2) {
color: #19be6b;
}
.num-box:nth-child(4) > p:nth-child(2) {
color: #66b1ff;
}
.num-box:nth-child(5) > p:nth-child(2) {
color: #ff9900;
}
.num-box:nth-child(6) > p:nth-child(2) {
color: #f56c6c;
}
.num-box:nth-child(7) > p:nth-child(2) {
color: #8400ff;
}
.num-box:nth-child(8) > p:nth-child(2) {
color: #00bfbf;
}
.layui-tab-brief > .layui-tab-title .layui-this {
color: #409eff;
}
.oper-info {
width: 100%;
height: auto;
}
.oper-info > div {
margin: 10px 0;
}
.oper-info > div:nth-child(1) {
width: 7%;
height: 100%
}
.oper-info > div:nth-child(2) {
width: 73%;
height: 100%
}
.oper-info > div:nth-child(3) {
width: 20%;
height: 100%
}
.user-oper {
flex-direction: column;
}
.table-box {
width: 99%;
padding: 0 0.5%;
height: calc(100% - 240px);
}
.layui-tab-brief > .layui-tab-more li.layui-this:after,
.layui-tab-brief > .layui-tab-title .layui-this:after {
border-bottom: 2px solid #409eff;
}
.layui-tab .layui-tab-title li {
font-size: 16px;
font-weight: bold;
}
a {
color: #428bca;
text-decoration: none;
}
a:hover,
a:focus {
color: #2a6496;
text-decoration: underline;
}
.layui-tab-item{
height: 100%;
}

BIN
src/main/resources/static/img/synthesisQuery/pro_icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 963 B

BIN
src/main/resources/static/img/synthesisQuery/time_icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 502 B

BIN
src/main/resources/static/img/synthesisQuery/user_head_icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

2
src/main/resources/static/js/synthesisQuery/proProgressUpdate.js
View File

@ -130,7 +130,7 @@ function query(type) {
}
/**详情*/
function viewData(obj){
openIframeByParamObj("viewData", "详情", "./proClassifyStatisticsDetail.html", "92%", "95%", obj);
openIframeByParamObj("viewData", "更新进度", "./proProgressUpdateDetail.html", "92%", "95%", obj);
}
/*下载*/

176
src/main/resources/static/js/synthesisQuery/proProgressUpdateDetail.js Normal file
View File

@ -0,0 +1,176 @@
let form, layer, element, table, tableIns;
let pageNum = 1, pageSize = 15; // 图片定义分页
let objParams = {};
function setParams(obj) {
objParams = JSON.parse(obj);
layui.use(['form', 'layer', 'element', 'table'], function () {
form = layui.form;
layer = layui.layer;
table = layui.table;
element = layui.element;
element.on('tab(demo-filter-tab)', function (data) {
let value = $(this).attr('value');
if (value === '1') {
$('#layui-tab-title li').eq(0).addClass('layui-this');
$('#layui-tab-content>div').eq(0).addClass('layui-show');
$('#layui-tab-title li').eq(1).removeClass('layui-this');
$('#layui-tab-content>div').eq(1).removeClass('layui-show');
} else if (value === '2') {
$('#layui-tab-title li').eq(0).removeClass('layui-this');
$('#layui-tab-content>div').eq(0).removeClass('layui-show');
$('#layui-tab-title li').eq(1).addClass('layui-this');
$('#layui-tab-content>div').eq(1).addClass('layui-show');
}
});
pages(1, 10, 1);
});
}
function pages(pageNum, pageSize, typeNum) {
let params = getReqParams(pageNum, pageSize, typeNum);
let url = dataUrl + "/backstage/proProgress/getList"
ajaxRequest(url, "POST", params, true, function () {
}, function (result) {
console.log(result);
if (result.code === 200) {
if (result.data) {
initTable(result.data, result.limit, result.curr)
laypages(result.count, result.curr, result.limit)
element.render();
}
} else if (result.code === 500) {
layer.alert(result.msg, {icon: 2})
}
}, function (xhr) {
error(xhr)
});
}
function laypages(total, page, limit) {
layui.use(['laypage'], function () {
let laypage = layui.laypage;
laypage.render({
elem: 'voi-page',
count: total,
curr: page,
limit: limit,
limits: [10, 20, 50, 100, 200, 500],
layout: ['prev', 'page', 'next', 'skip', 'count', 'limit'],
groups: 5,
jump: function (obj, first) {
if (!first) {
pageNum = obj.curr, limitSize = obj.limit;
pages(obj.curr, obj.limit, null);
}
}
});
})
}
/*初始化表格*/
function initTable(dataList, limit, page) {
let loadingMsg = layer.msg("数据加载中,请稍候...", {icon: 16, scrollbar: false, time: 0,});
pageNum = page, limitSize = limit;
tableIns = table.render({
elem: "#table_data",
height: "full-330",
data: dataList,
limit: limit,
cols: [
[
{
title: "序号", width: "5%", unresize: true, align: "center",
templet: function (d) {
return (page - 1) * limit + d.LAY_NUM;
}
},
{field: "towName", title: "杆塔", width: "25%", unresize: true, align: "center"},
{title: "基础开挖",width: "10%",unresize: true,align: "center",
templet: function (d) {
let html = '';
return html;
}
},
{title: "基础开挖完成",width: "10%",unresize: true,align: "center",
templet: function (d) {
let html = '';
return html;
}
},
{title: "基础浇筑完成",width: "10%",unresize: true,align: "center",
templet: function (d) {
let html = '';
return html;
}
},
{title: "铁塔组立",width: "10%",unresize: true,align: "center",
templet: function (d) {
let html = '';
return html;
}
},
{title: "铁塔组立完成",width: "10%",unresize: true,align: "center",
templet: function (d) {
let html = '';
return html;
}
},
{title: "架线施工完成",width: "10%",unresize: true,align: "center",
templet: function (d) {
let html = '';
return html;
}
},
{title: "附件安装完成",width: "10%",unresize: true,align: "center",
templet: function (d) {
let html = '';
return html;
}
},
],
],
done: function (res, curr, count) {
layer.close(loadingMsg);
table.resize("table_data");
count || this.elem.next(".layui-table-view").find(".layui-table-header").css("display", "inline-block");
count || this.elem.next(".layui-table-view").find(".layui-table-box").css("overflow", "auto");
element.render();
},
});
}
// 获取参数
function getReqParams(page, limit, type) {
let obj = {};
if (!type) {
obj = {
pageNum: page + "",
pageSize: limit + "",
keyWord: $('#keyWord').val(),
};
} else {
obj = {
pageNum: '1',
pageSize: '10',
keyWord: '',
};
}
obj = {
encryptedData: encryptCBC(JSON.stringify(obj))
}
return obj;
}
// 查询/重置
function query(type) {
pageNum = 1;
if (type === 2) {
$('#keyWord').val('');
layui.form.render();
}
pages(1, limitSize);
}

0
src/main/resources/static/js/synthesisQuery/proProgressUpdateDetailAjax.js Normal file
View File

1
src/main/resources/static/pages/synthesisQuery/proProgressUpdate.html
View File

@ -9,7 +9,6 @@
<script src="../../js/layui-v2.9.14/layui/layui.js" charset="UTF-8" type="text/javascript"></script>
<script src="../../js/publicJs.js"></script>
<script src="../../js/commonUtils.js"></script>
<script src="../../js/select.js"></script>
<script src="../../js/openIframe.js"></script>
<script src="../../js/my/aes.js"></script>
<script src="../../js/ajaxRequest.js"></script>

155
src/main/resources/static/pages/synthesisQuery/proProgressUpdateDetail.html Normal file
View File

@ -0,0 +1,155 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../../js/layui-v2.9.14/layui/css/layui.css">
<link rel="stylesheet" href="../../css/font.css">
<link rel="stylesheet" href="../../css/table-common2.css">
<link rel="stylesheet" href="../../css/synthesisQuery/proProgressUpdateDetail.css">
<script src="../../js/libs/jquery-3.7.0.min.js" charset="UTF-8" type="text/javascript"></script>
<script src="../../js/layui-v2.9.14/layui/layui.js" charset="UTF-8" type="text/javascript"></script>
<script src="../../js/publicJs.js"></script>
<script src="../../js/commonUtils.js"></script>
<script src="../../js/openIframe.js"></script>
<script src="../../js/my/aes.js"></script>
<script src="../../js/ajaxRequest.js"></script>
<title>工程进度更新</title>
</head>
<body>
<div id="main-box">
<div id="pro-detail-box" class="layout">
<div class="layout">
<img src="../../img/synthesisQuery/pro_icon.png" width="48px" height="48px" style="margin-right: 10px;">
<div class="layout" style="flex-direction: column;">
<p style="font-size: 20px;font-weight: bold;color: #666;" id="proName">安全工器具需求计划</p>
<p style="font-size: 14px;color: #999;" id="companyName">安全工器具需求计划</p>
</div>
</div>
<div>
<button type="button" class="layui-btn layui-bg-blue no-print" onclick="print()"><i
class="layui-icon layui-icon-edit"></i>更新项目
</button>
</div>
</div>
<div id="pro-basic-detail-box" class="layout">
<div class="basic-detail layout">
<p>项目状态</p>
<p><span style="color: #51d351;"> ● </span>在建</p>
</div>
<div class="basic-detail layout">
<p>电压等级</p>
<p>110kV</p>
</div>
<div class="basic-detail layout">
<p>线路长度</p>
<p>121.35 km</p>
</div>
<div class="basic-detail layout">
<p>杆塔数量</p>
<p>67</p>
</div>
<div class="basic-detail layout">
<p>项目计划开始时间</p>
<p>2022-11-01</p>
</div>
<div class="basic-detail layout">
<p>项目计划结束时间</p>
<p>2023-11-30</p>
</div>
<div class="basic-detail layout">
<p>最后更新</p>
<p>2022-11-25 23:26:08</p>
</div>
<div class="basic-detail layout">
<p>项目进度</p>
<p></p>
</div>
</div>
<div id="data-box">
<div class="layui-tab layui-tab-brief" style="height: 100%;" lay-filter="demo-filter-tab">
<ul class="layui-tab-title" id="layui-tab-title">
<li class="layui-this" value="1">项目进度</li>
<li value="2">更新记录</li>
</ul>
<div class="layui-tab-content" style="height: calc(100% - 60px);" id="layui-tab-content">
<div class="layui-tab-item layui-show">
<div class="data-box-content" id="data-box-content">
<div id="gx-num-box" class="layout">
<div class="layout num-box">
<p>杆塔数</p>
<p>67</p>
</div>
<div class="layout num-box">
<p>基础开挖</p>
<p>60</p>
</div>
<div class="layout num-box">
<p>基础开挖完成</p>
<p>60</p>
</div>
<div class="layout num-box">
<p>基础浇筑完成</p>
<p>60</p>
</div>
<div class="layout num-box">
<p>铁塔组立</p>
<p>52</p>
</div>
<div class="layout num-box">
<p>铁塔组立完成</p>
<p>32</p>
</div>
<div class="layout num-box">
<p>架线施工完成</p>
<p>32</p>
</div>
<div class="layout num-box">
<p>附件安装完成</p>
<p>12</p>
</div>
</div>
<div class="table-box" table-responsive style="z-index: 1;">
<table id="table_data" class="table" lay-filter="table_data"></table>
<div id="voi-page" class="layout"></div>
</div>
</div>
</div>
<div class="layui-tab-item">
<div class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<h3 class="layui-timeline-title">8月18日</h3>
<div class="layui-panel">
<div class="oper-info layout">
<div class="layout">
<img src="../../img/synthesisQuery/user_head_icon.png">
</div>
<div class="user-oper layout">
<div style="width: 100%;">
<span>王天峰</span><span>（13787220576）</span><span>项目管理中心</span>
</div>
<div style="width: 100%">
<span>完结-审核确认通过，共耗时：21小时16分钟 原因备注：无</span>
</div>
<div style="width: 100%">
<img src="../../img/synthesisQuery/time_icon.png">
<span style="margin: 0 5px 0 5px;">2020-12-23 22:31</span>
</div>
</div>
<div class="layout">
<img src="../../img/synthesisQuery/time_icon.png"> <span
style="margin: 0 5px 0 5px;">2020-12-23 22:31</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="../../js/synthesisQuery/proProgressUpdateDetailAjax.js" charset="UTF-8" type="text/javascript"></script>
<script src="../../js/synthesisQuery/proProgressUpdateDetail.js" charset="UTF-8" type="text/javascript"></script>
</html>