czl-web/pages/newpro/historyProView.html

450 lines
19 KiB
HTML
Raw Permalink Normal View History

2025-05-20 13:54:27 +08:00
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>历史工程表单查看</title>
<link rel="stylesheet" href="../../layui-v2.8.18/layui/css/layui.css" media="all"/>
</head>
<style>
.layui-form-label {
position: relative;
float: left;
display: block;
padding: 9px 10px;
width: 100%;
font-weight: 400;
line-height: 20px;
text-align: right;
}
table {
border-collapse: collapse;
overflow: auto;
}
table, th, td {
border: 1px solid rgb(219 219 219);
text-align: center;
font-size: 16px;
}
th, td {
padding: 10px;
text-align: center;
}
.table-input[type="number" i] {
padding: 2px 4px;
width: 100%;
height: 20px;
border: none;
text-align: center;
}
.table-input {
outline: none; /* 取消默认的选中时轮廓线 */
border: 0px solid #919090; /* 设置选中时的边框样式 */
background-color: #f0f0f0; /* 设置选中时的背景颜色 */
color: #000; /* 设置选中时的文字颜色 */
border-radius: 5px;
text-indent: 5px;
}
</style>
<body>
<form class="layui-form" action="" onsubmit="return false">
<div>
<div class="layui-form-item" style="margin-top: 1%;">
<div class="layui-col-xs6">
<div class="layui-form-item" style="margin-top: 1%;">
<div class="layui-inline" style="width: 100%;">
<div class="layui-input-inline" style="width: 140px;">
<label class="layui-form-label"><i class="tip-required"
style="color: red;font-size: 20px">*</i> 分公司:</label>
</div>
<div class="layui-input-inline" style="border: 0px dashed dimgrey;width: 54.5%;">
<select id="orgId" name="orgId" class="layui-select" lay-search="" lay-verify="required"
lay-filter="orgId"></select>
</div>
</div>
</div>
<div class="layui-form-item" style="margin-top: 1%;">
<div class="layui-inline" style="width:100%">
<div class=" layui-input-inline" style="width: 140px;">
<label class="layui-form-label"><i class="tip-required"
style="color: red;font-size: 20px">*</i>工程名称:</label>
</div>
<div class="layui-input-inline" style="border: 0px dashed dimgrey;width: 54.5%;">
<input class="proName layui-input" id="proName" name="proName" maxlength="32"
lay-verify="required">
</div>
</div>
</div>
<div class="layui-form-item" style="margin-top: 1%;">
<div class="layui-inline" style="width: 100%;">
<div class="layui-input-inline" style="width: 140px;">
<label class="layui-form-label"><i class="tip-required"
style="color: red;font-size: 20px">*</i>电压等级:</label>
</div>
<div class="layui-input-inline" style="border: 0px dashed dimgrey;width: 54.5%;">
<select id="volLevelIds" name="volLevelIds" class="layui-select" lay-search=""
lay-verify="required"
lay-filter="volLevelIds"></select>
</div>
</div>
</div>
</div>
<div class="layui-col-xs6">
<div class="layui-form-item" style="margin-top: 1%;">
<div class="layui-form-item" style="margin-top: 1%;">
<div class="layui-inline" style="width: 100%;">
<div class="layui-input-inline" style="width: 140px;">
<label class="layui-form-label"><i class="tip-required"
style="color: red;font-size: 20px">*</i>
规模km</label>
</div>
<div class="layui-input-inline" style="border: 0px dashed dimgrey;width: 53%;">
<input class="scale layui-input" id="scale" name="scale" min="0" step="0.01"
oninput="validity.valid||(value='');"
type="number"
lay-verify="required">
</div>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline" style="width: 100%;">
<div class="layui-input-inline" style="width: 140px;">
<label class="layui-form-label"><i class="tip-required"
style="color: red;font-size: 20px">*</i>开竣工时间:</label>
</div>
<div class="layui-inline" id="ID-laydate-rangeLinked" style="width:54%">
<div class="layui-input-inline" style="width:45.5%">
<input type="text" autocomplete="off" id="startTime" class="layui-input"
style="padding-left: 5px;" lay-verify="required"
placeholder="开始日期">
</div>
<div class="layui-form-mid">-</div>
<div class="layui-input-inline" style="width:45.5%">
<input type="text" autocomplete="off" id="endTime" class="layui-input"
style="padding-left: 5px;" lay-verify="required"
placeholder="结束日期">
</div>
</div>
</div>
</div>
</div>
</div>
<div id="table-container" style="max-width: 100%;overflow-x: auto;padding: 5px"></div>
</div>
</form>
</body>
</html>
<script src="../../js/jquery/jquery-3.6.0.js"></script>
<script src="../../layui-v2.8.18/layui/layui.js"></script>
<script type="text/javascript" src="../../js/jq.js"></script>
<script src="../../js/common_methon.js"></script>
<script type="text/javascript" src="../../js/publicJs.js"></script>
<script type="text/javascript" src="../../js/select.js"></script>
<script type="text/javascript" src="../../js/my/permission.js"></script>
<script type="text/javascript">
layui.config({
base: '../../js/layuiModules/', // 第三方模块所在目录
version: 'v1.6.4' // 插件版本号
}).extend({
soulTable: 'notice,layNotify', // 模块
});
var form;
var table;
var newData;
var notice;
var layNotify;
var laydate;
var id = localStorage.getItem("historyProId");
layui.use(['table', 'form', 'notice', 'layNotify', 'laydate'], function () {
laydate = layui.laydate;
table = layui.table;
form = layui.form;
notice = layui.notice;
layNotify = layui.layNotify;
initTime();
getData();
// 获取所有的 input、textarea 和 select 元素
const inputElements = document.querySelectorAll('input, textarea, select');
// 遍历所有元素,设置为不可更改和不可选择
inputElements.forEach(function (element) {
element.setAttribute('readonly', 'readonly'); // 设置为只读,不可更改
element.setAttribute('disabled', 'disabled'); // 设置为禁用,不可选择
});
});
function initTime() {
// 获取当前日期的年份和月份
// 日期范围 - 左右面板联动选择模式
laydate.render({
elem: '#ID-laydate-rangeLinked',
range: ['#startTime', '#endTime'],
min: getNowTime(), // 设置最小日期为当前月份的起始日期
done: function (value, date) {
// 自定义事件处理逻辑
console.log('用户选择的时间范围为:', value);
console.log('用户选择的时间范围为:', value.substring(0, 10));
console.log('用户选择的时间范围为:', value.substring(13, 23));
// 在这里执行你想要的操作
generateTable(value.substring(0, 10), value.substring(13, 23));
}
});
}
var arrMonth = [];
function generateTable(start, end) {
var startDate = new Date(start);
var endDate = new Date(end);
var table = '<table style="width: 100%"><tr><th rowspan="2" style="min-width: 70px;">工序</th>';
var startYear = startDate.getFullYear();
var endYear = endDate.getFullYear();
arrMonth = getMonthsBetweenDates(startDate, endDate);
var monthsInEachYear = 12;
var yearArr = [startYear];
var yearCount = [];
var count = 0;
for (var i = 0; i < arrMonth.length; i++) {
if (startYear != arrMonth[i].substring(0, 4)) {
startYear = arrMonth[i].substring(0, 4);
yearArr.push(arrMonth[i].substring(0, 4))
yearCount.push(count);
count = 1;
} else {
count += 1;
}
if (i == arrMonth.length - 1) {
yearCount.push(count);
}
}
for (var i = 0; i < yearArr.length; i++) {
table += '<th colspan="' + yearCount[i] + '" >' + yearArr[i] + '年</th>'; // 合并单元格
}
table += '</tr><tr>';
for (var i = 0; i < arrMonth.length; i++) {
table += '<th style="min-width: 70px;width:auto">' + arrMonth[i].substring(5, 8) + '月</th>';
}
table += '</tr><tr><td style="min-width: 70px;">基础</td>';
for (var i = 0; i < arrMonth.length; i++) {
table += '<td style="min-width: 70px;width:auto"><input class="table-input" id="jc_' + i + '" type="number" min="0" oninput="validity.valid||(value=\'\');"/></td>';
}
table += '</tr><tr><td style="min-width: 70px;">组塔</td>';
for (var i = 0; i < arrMonth.length; i++) {
table += '<td style="min-width: 70px;width:auto"><input class="table-input" id="zt_' + i + '" type="number" min="0" oninput="validity.valid||(value=\'\');"/></td>';
}
table += '</tr><tr><td style="min-width: 70px;">架线</td>';
for (var i = 0; i < arrMonth.length; i++) {
table += '<td style="min-width: 70px;width:auto"><input class="table-input" id="jx_' + i + '" type="number" min="0" oninput="validity.valid||(value=\'\');"/></td>';
}
table += '</tr></table>';
document.getElementById('table-container').innerHTML = table;
}
function getDateString(date) {
var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();
return year + '-' + month + '-' + day;
}
function getMonthsBetweenDates(startDate, endDate) {
var start = new Date(startDate);
var end = new Date(endDate);
var months = [];
var firstDay = getFirstDayOfMonth(start);
var currentDate = new Date(firstDay);
while (currentDate <= end) {
var year = currentDate.getFullYear();
var month = currentDate.getMonth() + 1;
months.push(year + '-' + (month < 10 ? '0' : '') + month); // 将年月格式化为字符串并添加到数组中
currentDate.setMonth(currentDate.getMonth() + 1); // 增加一个月
}
console.log('总共有' + months.length + '个月');
console.log('每个月份:', months);
return months;
}
function getFirstDayOfMonth(start) {
var today = new Date(start);
var year = today.getFullYear();
var month = today.getMonth();
var firstDayOfMonth = new Date(year, month, 1);
return firstDayOfMonth;
}
function getTableData() {
var jcObj = [];
var ztObj = [];
var jxObj = [];
for (var i = 0; i < arrMonth.length; i++) {
jcObj.push({'jc': $("#jc_" + i).val()})
ztObj.push({'zt': $("#zt_" + i).val()})
jxObj.push({'jx': $("#jx_" + i).val()})
}
var obj = {
"jcObj": jcObj,
"ztObj": ztObj,
"jxObj": jxObj
};
console.log(JSON.stringify(obj));
return JSON.stringify(obj);
}
function setData(jsonData) {
var data = {
"jcObj": [{"jc": "11"}, {"jc": "12"}, {"jc": "13"}, {"jc": "14"}, {"jc": "15"}, {"jc": "16"}, {"jc": ""}, {"jc": "34"}, {"jc": "34"}, {"jc": "45"}, {"jc": "55"}, {"jc": ""}, {"jc": ""}],
"ztObj": [{"zt": ""}, {"zt": "44"}, {"zt": ""}, {"zt": ""}, {"zt": ""}, {"zt": ""}, {"zt": ""}, {"zt": ""}, {"zt": ""}, {"zt": ""}, {"zt": "55"}, {"zt": ""}, {"zt": ""}],
"jxObj": [{"jx": "55"}, {"jx": "66"}, {"jx": ""}, {"jx": "55"}, {"jx": "67"}, {"jx": "55"}, {"jx": ""}, {"jx": ""}, {"jx": "55"}, {"jx": ""}, {"jx": ""}, {"jx": ""}, {"jx": ""}]
};
// var o = JSON.stringify(data);
var obj = JSON.parse(jsonData)
var length = arrMonth.length;
if (obj.jcObj.length < arrMonth.length) {
length = obj.jcObj.length;
}
for (var i = 0; i < length; i++) {
$("#jc_" + i).val(obj.jcObj[i].jc == 0 ? "" : obj.jcObj[i].jc)
$("#zt_" + i).val(obj.ztObj[i].zt == 0 ? "" : obj.ztObj[i].zt)
$("#jx_" + i).val(obj.jxObj[i].jx == 0 ? "" : obj.jxObj[i].jx)
}
}
function getData() {
$.ajax({
type: 'post',
url: ctxPath + '/newPro/getHistoryListById',
dataType: 'json', // 服务器返回数据类型
async: false,
data: {
id: id,
},
success: function (data) {
var resMsg = data.resMsg;
if ("数据获取成功" == resMsg) {
let info = data.obj.newProBean;
getOrgName(form, info.orgId);
$("#proName").val(info.proName);
getVoltageLevel(form, info.voltageLevelId);
$("#startTime").val(info.startTime);
$("#endTime").val(info.endTime);
$("#scale").val(info.scale);
$("#theQuantityRequiredNum").val(info.theQuantityRequiredNum);
$("#teamNum").val(info.teamNum);
$("#efficacy").val(info.efficacy);
$("#kilometers").val(info.kilometers);
$("#clothSpacing").val(info.clothSpacing);
$("#baseNumberOfTowers").val(info.baseNumberOfTowers);
$("#totalConstructionDays").val(info.totalConstructionDays);
$("#planToDay").val(info.planToDay);
generateTable(info.startTime, info.endTime);
setTimeout(function () {
setData(info.jsonData);
}, 500)
}
},
error: function (err) {
console.log("获取工程下拉列表出错:", err);
}
});
}
function addInfo() {
var tip = '保存';
var formUrl = ctxPath + "/newPro/addInfo";
if (type == '2') {
tip = '修改';
formUrl = ctxPath + "/newPro/updateInfo";
}
var jsonData = getTableData();
var data = {
orgId: $("#orgId").val(),
orgName: $("#orgId").find("option:selected").text(),
proName: $("#proName").val(),
voltageLevelId: $("#volLevelIds").val(),
startTime: $("#startTime").val(),
endTime: $("#endTime").val(),
scale: $("#scale").val(),
theQuantityRequiredNum: $("#theQuantityRequiredNum").val(),
teamNum: $("#teamNum").val(),
efficacy: $("#efficacy").val(),
kilometers: $("#kilometers").val(),
clothSpacing: $("#clothSpacing").val(),
baseNumberOfTowers: $("#baseNumberOfTowers").val(),
totalConstructionDays: $("#totalConstructionDays").val(),
planToDay: $("#planToDay").val(),
jsonData: jsonData,
id: isEmpty(id) ? '' : id,
}
// 加载提示
var addLoadingMsg = top.layer.msg('数据上传中,请稍候...', {
icon: 16,
scrollbar: false,
time: 0,
shade: [0.8, '#393D49']
});
$.ajax({
type: 'post',
async: false, // 默认异步true,false表示同步
url: formUrl, // 请求地址
contentType: "application/json; charset=utf-8",
dataType: 'json', // 服务器返回数据类型
data: JSON.stringify(data), //获取提交的表单字段
success: function (data) {
if (data.resMsg == "发起成功") {
top.layer.close(addLoadingMsg); //再执行关闭
reloadTip(tip + "提示", tip + "成功", "success");
setTimeout(function () {
parent.layer.closeAll();
window.parent.table.reload('menuTable');
}, 2000);
} else if (data.resMsg == "工程名称已存在") {
top.layer.close(addLoadingMsg); //再执行关闭
reloadTip(tip + "提示", "工程名称已存在", "error");
} else {
top.layer.close(addLoadingMsg); //再执行关闭
reloadTip(tip + "提示", tip + "失败", "error");
}
},
error: function (XMLHttpRequest, textStatus, e) {
layer.msg('数据请求发生异常,请稍后重试', {icon: 16, scrollbar: false});
top.layer.close(addLoadingMsg); //再执行关闭
}
});
}
function getNowTime() {
var time = new Date();
var year = time.getFullYear();
var month = time.getMonth() + 1 >= 10 ? time.getMonth() + 1 : '0' + (time.getMonth() + 1);
var day = time.getDate() >= 10 ? time.getDate() : '0' + time.getDate();
return year + "-" + month + "-" + day;
}
function reloadTip(tip, message, type) {
parent.layNotify.notice({
title: tip + "提示",
type: type,
message: message
});
}
</script>