hn_cloud_web/czl-web/js/project/proScheduleManagementView.js

const token = localStorage.getItem("czl-token");
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"
    });

        //监听工具条
        table.on('tool(fileDemo)', function (obj) {
            var data = obj.data; //当前行数据
            var fileName = data.fileName;
            var filePath = data.filePath;
            var rowIndex = obj.index;
            var layEvent = obj.event; //当前点击的事件名
            if (layEvent === 'download') {
                downloads(fileName,filePath)
            }
            if (layEvent === 'del') {
                var index = layer.confirm('确定要删除吗？', {
                    btn : [ '确定', '取消' ]
                }, function() {
                    layer.close(index);
                    ajaxCommonMethod('/proProgress/delById',{'id': data.id},"删除成功","删除失败");
                });
            }
        });
}

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
    });
}

function downloads(fileName,filePath){
    const url = ctxPath + `/proProgress/download?filePath=${encodeURIComponent(filePath)}` +`&token=`+token;
    fetch(url)
        .then(response => {
            if (!response.ok) throw new Error('下载失败');
            return response.blob();
        })
        .then(blob => {
            const downloadUrl = window.URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = downloadUrl;
            link.download = fileName; // 设置下载时显示的文件名
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            window.URL.revokeObjectURL(downloadUrl); // 释放内存
        })
        .catch(error => {
            console.error('文件下载出错:', error);
            alert('下载失败，请重试');
        });
}

function ajaxCommonMethod(url,data,success,error){
    $.ajax({
        type: 'POST',
        async: false, // 默认异步true,false表示同步
        url: ctxPath + url,// 请求地址
        contentType: "application/x-www-form-urlencoded",
        dataType: 'json', // 服务器返回数据类型
        data: data, //获取提交的表单字段
        success: function (data) {
            var resMsg = data.resMsg;
            if ("数据获取成功" == resMsg) {
                reloadTip("删除",success,'success');
                setTimeout(function(){
                    getFileList();
                }, 2000);
            }else {
                reloadTip("删除",error,"error");
            }
        }
    });
}