523 lines
20 KiB
JavaScript
523 lines
20 KiB
JavaScript
layui.config({
|
||
base: '../../js/layuiModules/', // 第三方模块所在目录
|
||
version: 'v1.6.4' // 插件版本号
|
||
}).extend({
|
||
soulTable: 'notice,layNotify', // 模块
|
||
});
|
||
var proId = localStorage.getItem("proId")
|
||
var proName = localStorage.getItem("proName")
|
||
var orgId = localStorage.getItem("orgId")
|
||
var orgName = localStorage.getItem("orgName")
|
||
let form;
|
||
var tree;
|
||
var code;
|
||
var table;
|
||
var notice;
|
||
var layNotify;
|
||
var element;
|
||
$("#searchBt").click(function () {
|
||
showProjectProgressTable();
|
||
})
|
||
$("#searchPersonBt").click(function () {
|
||
getPersonList();
|
||
})
|
||
|
||
$("#changProgress").click(function () {
|
||
localStorage.setItem("proId", proId);
|
||
layerOpenFormForSecond('更新项目', './changeProgress.html');
|
||
});
|
||
|
||
$("#rollbackProgress").click(function () {
|
||
localStorage.setItem("proId", proId);
|
||
layerOpenFormForSecond('回退项目', './rollbackProgress.html');
|
||
});
|
||
|
||
$("#upload").click(function () {
|
||
localStorage.setItem("proId", proId);
|
||
layerOpenProgressView('上传附件', './uploadProcessFile.html');
|
||
});
|
||
|
||
layui.use(['table', 'form', 'notice', 'layNotify', 'element'], function () {
|
||
table = layui.table;
|
||
form = layui.form;
|
||
tree = layui.tree;
|
||
notice = layui.notice;
|
||
layNotify = layui.layNotify;
|
||
element = layui.element;
|
||
// 加载提示
|
||
var addLoadingMsg = top.layer.msg('数据加载中,请稍候...', {
|
||
icon: 16,
|
||
scrollbar: false,
|
||
time: 0,
|
||
shade: [0.8, '#393D49']
|
||
});
|
||
$("#pro_proName").text(proName);
|
||
$("#pro_orgName").text(orgName);
|
||
|
||
getProTitleData();
|
||
getProcessTitles()
|
||
showProjectProgressTable()
|
||
changeTab(code);
|
||
top.layer.close(addLoadingMsg); //再执行关闭
|
||
});
|
||
|
||
function changeTab(){
|
||
// hash 地址定位
|
||
var hashName = 'tabid'; // hash 名称
|
||
var layid = location.hash.replace(new RegExp('^#' + hashName + '='), ''); // 获取 lay-id 值
|
||
// 初始切换
|
||
element.tabChange('test-hash', layid);
|
||
//上传附件后,加载原页面数据
|
||
// 切换事件
|
||
element.on('tab(test-hash)', function (obj) {
|
||
code = hashName + '=' + this.getAttribute('lay-id');
|
||
console.log("code=" +code)
|
||
location.hash = code;
|
||
if (code == "tabid=1") {
|
||
getProcessTitles()
|
||
showProjectProgressTable()
|
||
}
|
||
if (code == "tabid=2") {
|
||
getTowerRecordTimeLine();
|
||
}
|
||
if (code == "tabid=3") {
|
||
getFileList();
|
||
}
|
||
if (code == "tabid=4") {
|
||
getPersonList();
|
||
}
|
||
});
|
||
}
|
||
|
||
function getProTitleData() {
|
||
$.ajax({
|
||
type: 'post',
|
||
url: ctxPath + '/proProgress/getProTitleData',
|
||
dataType: 'json', // 服务器返回数据类型
|
||
async: false,
|
||
data: {
|
||
proId: proId,
|
||
orgId: orgId,
|
||
},
|
||
success: function (data) {
|
||
var resMsg = data.resMsg;
|
||
if ("数据获取成功" == resMsg) {
|
||
let info = data.obj.ProgressBean;
|
||
if (info != null) {
|
||
if (info.status == '1') {
|
||
var badgeSpan = $('<span class="layui-badge-dot layui-bg-green"></span>'); // 创建包含徽章的 span 元素
|
||
var textSpan = $('<span>在建</span>'); // 创建文本 span 元素
|
||
var combinedSpan = $('<span></span>').append(badgeSpan).append(textSpan); // 合并两个 span 元素
|
||
$('#pro_status').empty().append(combinedSpan);
|
||
} else if (info.status == '2') {
|
||
var badgeSpan = $('<span class="layui-badge-dot layui-bg-orange"></span>'); // 创建包含徽章的 span 元素
|
||
var textSpan = $('<span>已完工</span>'); // 创建文本 span 元素
|
||
var combinedSpan = $('<span></span>').append(badgeSpan).append(textSpan); // 合并两个 span 元素
|
||
$('#pro_status').empty().append(combinedSpan);
|
||
} else {
|
||
var badgeSpan = $('<span class="layui-badge-dot"></span>'); // 创建包含徽章的 span 元素
|
||
var textSpan = $('<span>未开工</span>'); // 创建文本 span 元素
|
||
var combinedSpan = $('<span></span>').append(badgeSpan).append(textSpan); // 合并两个 span 元素
|
||
$('#pro_status').empty().append(combinedSpan);
|
||
}
|
||
$("#pro_voltageLevel").text(info.voltageLevel);
|
||
$("#pro_lineLength").text(info.lineLength);
|
||
$("#pro_towerNum").text(isEmpty(info.towerNum) ? '0' : info.towerNum);
|
||
$("#pro_startTime").text(info.startTime);
|
||
$("#pro_endTime").text(info.endTime);
|
||
$("#pro_updateTime").text(info.updateTime);
|
||
updateProgress(info.progress);
|
||
form.render();
|
||
}
|
||
}
|
||
},
|
||
error: function (err) {
|
||
console.log("获取项目进度管理工程表头数据出错：", err);
|
||
}
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 修改百分比
|
||
* @param newPercent
|
||
*/
|
||
function updateProgress(newPercent) {
|
||
var progressBar = $('#myBar');
|
||
progressBar.attr('lay-percent', newPercent + '%'); // 更新进度条的百分比
|
||
progressBar.css('width', newPercent); // 更新进度条的显示宽度
|
||
element.progress('myProgress', newPercent); // 使用 layui 的 element 模块更新进度条
|
||
element.render();
|
||
}
|
||
|
||
/**
|
||
* 获取项目进度表头
|
||
*/
|
||
function getProcessTitles() {
|
||
$.ajax({
|
||
type: 'post',
|
||
url: ctxPath + '/proProgress/getProcessTitles',
|
||
dataType: 'json', // 服务器返回数据类型
|
||
async: false,
|
||
data: {
|
||
proId: proId,
|
||
orgId: orgId,
|
||
},
|
||
success: function (data) {
|
||
var resMsg = data.resMsg;
|
||
if ("数据获取成功" == resMsg) {
|
||
let numInfo = data.obj.numInfo;
|
||
let lineBean = data.obj.lineBean;
|
||
if (numInfo != null) {
|
||
$("#progress_towerNum").text(parseInt(numInfo.basicFinishNum) + parseInt(numInfo.basicNotFinishNum));
|
||
$("#progress_basicFinishNum").text(parseInt(numInfo.basicFinishNum));
|
||
$("#progress_basicNotFinishNum").text(parseInt(numInfo.basicNotFinishNum));
|
||
$("#progress_towerFinishNum").text(parseInt(numInfo.towerFinishNum));
|
||
$("#progress_towerNotFinishNum").text(parseInt(numInfo.basicFinishNum) + parseInt(numInfo.basicNotFinishNum) - parseInt(numInfo.towerFinishNum));
|
||
}
|
||
if (lineBean != null) {
|
||
$("#progress_lineLength").text(lineBean.lineLength);
|
||
$("#progress_lineFinishLength").text(lineBean.lineFinishNum);
|
||
$("#progress_lineNotFinishLength").text((parseFloat(lineBean.lineLength) - parseFloat(lineBean.lineFinishNum)).toFixed(2));
|
||
}
|
||
form.render();
|
||
}
|
||
},
|
||
error: function (err) {
|
||
console.log("获取获取项目进度表头数据出错：", err);
|
||
}
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 项目进度表格
|
||
*/
|
||
function showProjectProgressTable() {
|
||
//渲染表格
|
||
table.render({
|
||
elem: '#demo'
|
||
, url: ctxPath + '/proProgress/getProjectProgress' //数据接口
|
||
, method: 'post' //方式默认是get
|
||
, toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
|
||
, where: {
|
||
proId: proId,
|
||
keyWord: $("#keyWord").val()
|
||
} //post请求必须加where ，post请求需要的参数
|
||
, cellMinWidth: 80
|
||
, cols: [[ //表头
|
||
{
|
||
field: 'number', width: 80, title: '序号', align: 'center', type: 'numbers'
|
||
}
|
||
, {field: 'towerName', align: 'center', title: '杆塔'}
|
||
, {
|
||
field: 'status', title: '基础工序', align: 'center', templet: d => {
|
||
if (d.status == '1' || d.status == '2') {
|
||
return "<img src='../../img/redFlag.png' width='30'/>";
|
||
}
|
||
return '';
|
||
}
|
||
}
|
||
, {
|
||
field: 'status', title: '组塔工序', align: 'center', templet: d => {
|
||
if (d.status == '2') {
|
||
return "<img src='../../img/redFlag.png' width='30'/>";
|
||
}
|
||
return ''
|
||
}
|
||
}
|
||
]]
|
||
, id: 'menuTable'
|
||
, page: true //开启分页
|
||
, loading: true //数据加载中。。。
|
||
, limits: [5, 10, 20, 100] //一页选择显示3,5或10条数据
|
||
, limit: 10 //一页显示5条数据
|
||
, response: {
|
||
statusCode: 200 //规定成功的状态码，默认：0
|
||
}, parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
|
||
let result;
|
||
if (res.data !== '' && res.data != null && res.data !== "null") {
|
||
if (this.page.curr) {
|
||
result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
|
||
} else {
|
||
result = res.data.slice(0, this.limit);
|
||
}
|
||
}
|
||
return {
|
||
"code": res.code, //解析接口状态
|
||
"msg": res.msg, //解析提示文本
|
||
"count": res.count, //解析数据长度
|
||
"data": result, //解析数据列表
|
||
};
|
||
},
|
||
toolbar: "#toolbar"
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 获取更新记录时间线
|
||
*/
|
||
function getTowerRecordTimeLine() {
|
||
$.ajax({
|
||
type: 'post',
|
||
url: ctxPath + '/proProgress/getTowerRecordTimeLine',
|
||
dataType: 'json', // 服务器返回数据类型
|
||
async: false,
|
||
data: {
|
||
proId: proId,
|
||
orgId: orgId,
|
||
},
|
||
success: function (data) {
|
||
var resMsg = data.resMsg;
|
||
if ("数据获取成功" == resMsg) {
|
||
$("#timeLine").empty();
|
||
let info = data.obj.ProgressBean;
|
||
if (info != null && info.length > 0) {
|
||
for (let i = 0; i < info.length; i++) {
|
||
var html = '';
|
||
html += '<div class="layui-timeline-item">\n' +
|
||
' <i class="layui-icon layui-timeline-axis"></i>\n' +
|
||
' <div class="layui-timeline-content layui-text" style="display: flex;flex-direction: column;">\n' +
|
||
' <h3 class="layui-timeline-title">' + info[i].updateTime.substring(0, 10) + '</h3>\n' +
|
||
' <div style="border: 1px solid #dedede;border-radius:10px;">\n' +
|
||
' <div style="width: 7%;float: left;">\n' +
|
||
' <img src="../../img/person.png" width="50px" style="padding: 15px;"/>\n' +
|
||
' </div>\n' +
|
||
' <div style="width: 80%;float: left;">\n' +
|
||
' <div style="margin-top: 10px;font-size: 17px;"> ' + info[i].userName + ' </div>\n' +
|
||
' <div style="margin-top: 5px;font-size: 14px;width: 98%"><span> ' + info[i].record + '</span></div>\n' +
|
||
' <div style="margin-top: 5px;font-size: 12px;"><img src="../../img/time.png" width="20" style="margin-top: -3px;margin-left: -3px;"/> ' + info[i].updateTime + ' </div>\n' +
|
||
' </div>\n' +
|
||
' <div style="margin-top:45px">\n' +
|
||
' 完成进度：' + info[i].progress + '%\n' +
|
||
' </div>\n' +
|
||
' </div>\n' +
|
||
' </div>\n' +
|
||
' </div>';
|
||
$("#timeLine").append(html);
|
||
}
|
||
}else {
|
||
var html = '<div style="display: flex; flex-direction: column; align-items: center;margin-top: 5%;">\n' +
|
||
' <img src="../../img/notData.png" width="120"/>\n' +
|
||
' <div style="font-size: 20px; color: #a19a9a;">\n' +
|
||
' 暂无更新记录\n' +
|
||
' </div>\n' +
|
||
' </div>';
|
||
$("#timeLine").append(html);
|
||
}
|
||
form.render();
|
||
}
|
||
},
|
||
error: function (err) {
|
||
console.log("获取更新记录时间线数据出错：", err);
|
||
}
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 获取成员列表
|
||
*/
|
||
function getPersonList() {
|
||
//渲染表格
|
||
table.render({
|
||
elem: '#personDemo'
|
||
, url: ctxPath + '/proProgress/getPersonList' //数据接口
|
||
, method: 'post' //方式默认是get
|
||
, toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
|
||
, where: {
|
||
proId: proId,
|
||
keyWord: $("#keyWordPerson").val()
|
||
} //post请求必须加where ，post请求需要的参数
|
||
, cellMinWidth: 80
|
||
, cols: [[ //表头
|
||
{
|
||
field: 'number', width: 80, title: '序号', align: 'center', type: 'numbers'
|
||
}
|
||
, {field: 'personName', align: 'center', title: '成员姓名'}
|
||
, {field: 'joinTime', align: 'center', title: '加入时间'}
|
||
, {field: 'postName', align: 'center', title: '岗位'}
|
||
|
||
, {field: 'teamName', align: 'center', title: '项目管理团队/班组'}
|
||
]]
|
||
, id: 'menuTable'
|
||
, page: true //开启分页
|
||
, loading: true //数据加载中。。。
|
||
, limits: [5, 10, 20, 100] //一页选择显示3,5或10条数据
|
||
, limit: 10 //一页显示5条数据
|
||
, response: {
|
||
statusCode: 200 //规定成功的状态码，默认：0
|
||
}, parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
|
||
let result;
|
||
if (res.data !== '' && res.data != null && res.data !== "null") {
|
||
if (this.page.curr) {
|
||
result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
|
||
} else {
|
||
result = res.data.slice(0, this.limit);
|
||
}
|
||
}
|
||
return {
|
||
"code": res.code, //解析接口状态
|
||
"msg": res.msg, //解析提示文本
|
||
"count": res.count, //解析数据长度
|
||
"data": result, //解析数据列表
|
||
};
|
||
},
|
||
toolbar: "#toolbar"
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 获取文件列表
|
||
*/
|
||
function getFileList() {
|
||
//渲染表格
|
||
table.render({
|
||
elem: '#fileDemo'
|
||
, url: ctxPath + '/proProgress/getFileList' //数据接口
|
||
, method: 'post' //方式默认是get
|
||
, toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
|
||
, where: {
|
||
proId: proId,
|
||
} //post请求必须加where ，post请求需要的参数
|
||
, cellMinWidth: 80
|
||
, cols: [[ //表头
|
||
{
|
||
field: 'number', width: 80, title: '序号', align: 'center', type: 'numbers'
|
||
}
|
||
, {field: 'fileName', align: 'center', title: '文件名'}
|
||
, {field: 'fileSize', align: 'center', title: '大小'}
|
||
, {field: 'uploadTime', align: 'center', title: '上传时间'}
|
||
, {field: 'userName', align: 'center', title: '上传人员'}
|
||
, {field: 'remark', align: 'center', title: '备注内容'}
|
||
, {title: '操作', toolbar: '#fileBarDemo', align: 'center'} //自定义操作栏模板
|
||
]]
|
||
, id: 'fileDemo'
|
||
, page: true //开启分页
|
||
, loading: true //数据加载中。。。
|
||
, limits: [5, 10, 20, 100] //一页选择显示3,5或10条数据
|
||
, limit: 10 //一页显示5条数据
|
||
, response: {
|
||
statusCode: 200 //规定成功的状态码，默认：0
|
||
}, parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
|
||
let result;
|
||
if (res.data !== '' && res.data != null && res.data !== "null") {
|
||
if (this.page.curr) {
|
||
result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
|
||
} else {
|
||
result = res.data.slice(0, this.limit);
|
||
}
|
||
}
|
||
return {
|
||
"code": res.code, //解析接口状态
|
||
"msg": res.msg, //解析提示文本
|
||
"count": res.count, //解析数据长度
|
||
"data": result, //解析数据列表
|
||
};
|
||
},
|
||
toolbar: "#toolbar"
|
||
});
|
||
}
|
||
|
||
function layerOpenFormForSecond(title, contentUrl) {
|
||
var index = layer.open({
|
||
title: [title, 'color:#3B70A1;background-color:#E8ECEB;font-size:20px'],
|
||
type: 2,
|
||
content: contentUrl,
|
||
area: ['90%', '95%'],
|
||
maxmin: false,
|
||
btn: ['保存'],
|
||
success: function (layero, index) {
|
||
},
|
||
yes: function (index, layero) {
|
||
//提交子页面时执行
|
||
// 获取弹出层中的form表单元素
|
||
var formSubmit = layer.getChildFrame('form', index);
|
||
// 查找class样式为submitBtn的按钮
|
||
let submited = formSubmit.find('button.subBtn');
|
||
// 触发点击事件，会对表单进行验证，验证成功则提交表单，失败则返回错误信息
|
||
submited.click();
|
||
}
|
||
, cancel: function (index, layero) {
|
||
|
||
},end:function (){
|
||
getProTitleData();
|
||
getProcessTitles()
|
||
changeTab();
|
||
}
|
||
});
|
||
}
|
||
|
||
function layerOpenProgressView(title, contentUrl) {
|
||
var index = layer.open({
|
||
title: [title, 'color:#3B70A1;background-color:#E8ECEB;font-size:20px'],
|
||
type: 2,
|
||
content: contentUrl,
|
||
area: ['90%', '95%'],
|
||
maxmin: false,
|
||
end:function () {
|
||
changeTab();
|
||
}
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 获取 blob
|
||
* @param {String} url 目标文件地址
|
||
* @return {Promise}
|
||
*/
|
||
function getBlob(url) {
|
||
return new Promise(resolve => {
|
||
const xhr = new XMLHttpRequest();
|
||
xhr.open('GET', url, true);
|
||
xhr.responseType = 'blob';
|
||
xhr.onload = () => {
|
||
if (xhr.status === 200) {
|
||
resolve(xhr.response);
|
||
}
|
||
};
|
||
|
||
xhr.send();
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 保存
|
||
* @param {Blob} blob
|
||
* @param {String} filename 想要保存的文件名称
|
||
*/
|
||
function saveAs(blob, filename) {
|
||
if (window.navigator.msSaveOrOpenBlob) {
|
||
navigator.msSaveBlob(blob, filename);
|
||
} else {
|
||
const link = document.createElement('a');
|
||
const body = document.querySelector('body');
|
||
link.href = window.URL.createObjectURL(blob);
|
||
link.download = filename;
|
||
|
||
// fix Firefox
|
||
link.style.display = 'none';
|
||
body.appendChild(link);
|
||
|
||
link.click();
|
||
body.removeChild(link);
|
||
|
||
window.URL.revokeObjectURL(link.href);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 下载
|
||
* @param {String} url 目标文件地址
|
||
* @param {String} filename 想要保存的文件名称
|
||
*/
|
||
function download(url, filename) {
|
||
getBlob(url).then(blob => {
|
||
saveAs(blob, filename);
|
||
});
|
||
}
|
||
|
||
function reloadTip(tip,message,type){
|
||
layNotify.notice({
|
||
title: tip+"提示",
|
||
type: type,
|
||
message: message
|
||
});
|
||
} |