longping
/
subject_gxj


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528
							<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <jsp:include page="../../common/common-meta-include.jsp"></jsp:include>
    <jsp:include page="../../common/common-js-include.jsp"></jsp:include>
    <jsp:include page="../../common/common-css-include.jsp"></jsp:include>
    <%-- <link rel="stylesheet" type="text/css" href="${WebSite.asset}/css/bigDialog.css" media="all">--%>
    <link rel="stylesheet" type="text/css" href="${WebSite.asset}/css/contentIframe.css" media="all">
    <link rel="stylesheet" type="text/css" href="${WebSite.asset}/css/bigTable.css" media="all">
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
        .layui-layer-content,
        .layui-layer-iframe iframe,
        .layui-layer-iframe{
            height: 100% !important;
        }
        .big-dialog .table_box .table_step th .layui-table-cell,
        .table_box .table_step .layui-table-cell{
            color: #ffffff;
        }

        body::-webkit-scrollbar {
            display: none;
        }

        .toolBar {
            display: flow-root;
        }

        .table_box .table_process .layui-table-cell {
            display: flex;
            flex-direction: column;
            /*justify-content: center;*/
        }

        .layui-table-col-special .layui-table-cell {
            display: flex;
            flex-direction: row !important;
            justify-content: space-between !important;
        }

        .layui-table-col-special .layui-table-cell .step_red {
            background-color: red;
        }

        .table_box .table_process .step_red:before {
            border: 2px solid red;
        }

        .layui-table-col-special .layui-table-cell .step_yellow {
            background-color: yellow;
        }

        .table_box .table_process .step_yellow:before {
            border: 2px solid yellow;
        }

        .layui-table-col-special .layui-table-cell .step_green {
            background-color: green;
        }

        .table_box .table_process .step_green:before {
            border: 2px solid green;
        }

        .queryTimeType {
            margin-top: -9px;
            position: absolute;
        }

        .hiddenParam {
            display: none;
        }

        .morePan {
            margin-top: 4px;
            position: absolute;
            margin-left: 11px;
        }

        .morePan a {
            color: #2C6EC6;
        }


        .border_line {
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, #00BCFA 0%, rgba(0, 188, 250, 0) 100%);
            margin-bottom: 14px;
        }

        .layui-layer-setwin .layui-layer-close {
            display: none;
            background: url(${domain}/asset/css/images/icon-close.png);
            background-size: 100% 100%;
        }

        .table_box {
            margin: 0 0 20px 0;
            padding: 0;
        }

        /*.layui-table-view .layui-table td > div {*/
        /*    height: 80px !important;*/
        /*}*/
        .layui-table-body::-webkit-scrollbar {
            width: 0px;
            /*height: 10px;*/
        }

        .layui-table-box tbody tr:nth-child(2n) {
            background-color: #0E356A;
        }

        .layui-table-box tbody tr:nth-child(2n-1) {
            background-color: #0B2F60;
        }

        .layui-table-box tbody tr:hover{
            background-color: #0E356A !important;
        }
        .layui-layout-admin{
            padding: 0 !important;
        }
        .bigDialogInfo{
            overflow: auto;
        }
        .bigDialogInfo::-webkit-scrollbar{
            width: 0 !important;
        }
        .layui-table-body .layui-table-cell{
            padding: 5px !important;
        }
        .layui-table-header .layui-table-cell{
            height: 42px !important;
        }

        .layui-table-cell .cut {
            display: -webkit-box; /* 使用旧版的弹性盒子布局 */
            -webkit-box-orient: vertical; /* 设置为垂直方向排列 */
            overflow: hidden; /* 隐藏溢出内容 */
            text-overflow: ellipsis; /* 使用省略号表示溢出内容 */
            -webkit-line-clamp: 2; /* 显示的行数 */
        }

    </style>
</head>
<body style="z-index: 99999;position: relative">
<div id="app"></div>
<template id="template">
    <div class="layui-layout layui-layout-admin big-dialog" style="padding:0">
        <!-- 内容区域 -->
        <div class="right_title" style="display: none;">
            <span class="txt">项目信息台账</span>
            <div class="layui-collapse">
                <div class="layui-colla-item">
                    <%--                    <h2 class="layui-colla-title">筛选</h2>--%>
                    <div class="layui-colla-content layui-show">
                        <form class="layui-form" lay-filter="searchForm">
                            <input name="neTemp" type="hidden" value="${neTemp }"/>
                            <input name="isZj" type="hidden" value="${isZj}"/>
                            <input name="kind" type="hidden" value="${kind }"/>
                            <input name="otherStatus" type="hidden" value="${projStatus }"/>
                            <input name="rangeDate" type="hidden" value="${rangeDate }"/>
<%--                            <input name="startAmt" type="hidden" value="${minAmt }"/>--%>
<%--                            <input name="endAmt" type="hidden" value="${maxAmt }"/>--%>
                            <input name="startAmt" type="hidden" value="${startAmt }"/>
                            <input name="endAmt" type="hidden" value="${endAmt }"/>
                            <input name="propKind" type="hidden" value="${propKind }"/>
                            <input name="isFix" type="hidden" value="${isFix}"/>
                            <input name="fixCat" type="hidden" value="${fixCat}"/>
                            <input name="code" type="hidden" value="${code}"/>
                            <input name="type" type="hidden" value="${type}"/>
                            <input name="indusKind" type="hidden" value="${indusKind }"/>
                            <input name="subjectId" type="hidden" value="${subjectId }"/>
                            <input name="status" type="hidden" value="${projStatus }"/>
                            <input name="blSub" type="hidden" value="${blSub }"/>
                            <input name="sbdw" type="hidden" value="${unitName }"/>
                            <input name="light" type="hidden" value="${light}"/>
                            <input name="isYq" type="hidden" value="${isYq}"/>
                            <input name="zjly" type="hidden" value="${zjly}"/>
                            <input name="year" type="hidden" value="${year}"/>
                            <input name="abc" type="hidden" value="${abc}"/>
                            <input name="isCb" type="hidden" value="${isCb}"/>
                            <input name="status" type="hidden" value="${status}"/>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="table_box">
            <div class="table_process" style="position: relative; overflow-y: hidden;">
                <div style="position: relative; display: inline-block;" @click="exportExcel">
                    <div class="export">
                        <img src="${WebSite.asset}/css/images/left/export.svg"/>
                        <span>导出</span>
                    </div>
                </div>
                <table id="table1" lay-filter="test"></table>
                <div id="pagination" class="pagination"></div>
            </div>
        </div>
    </div>
</template>
<script type="text/html" id="subName">
    <span title="{{d.subName}}">{{d.subName}}</span>
</script>
<script type="text/html" id="amt">
    {{# var computedPer = function(total, now){
    return (total == 0) ? 0 : parseInt(now * 100 / total +0.5);
    };
    }}
    <span title="">总投资：{{d.amtTotal}}万元 <br/>
		年度计划投资：{{d.yearPlanAmt}}万元 <br/>
					年度完成投资：{{d.yearEndAmt}}万元( {{computedPer(d.yearPlanAmt, d.yearEndAmt)}} %)</span>
</script>
<script type="text/html" id="date">
    <div class="line">{{d.endDate?d.endDate:"--"}}

    </div>
<%--    <div title="">--%>
<%--        <div class="line">计划开工：{{d.beginDate}}--%>

<%--        </div>--%>
<%--        <div class="line">计划竣工：{{d.endDate}}--%>

<%--        </div>--%>
<%--    </div>--%>
</script>
<%--<script type="text/html" id="headerToolbar">--%>
<%--    <div class="toolBar">--%>
<%--        <span style="color:#FFDD00;" lay-event="exportExcel">导出</span>--%>
<%--    </div>--%>
<%--</script>--%>
<script type="text/html" id="toolBar">
    <div class="toolBar">
        <span style="color:#FFDD00;" lay-event="toDetail">项目信息</span>
    </div>
</script>
<script type="text/html" id="preInfo">
    <div title="" lay-event="preNew" style="cursor: pointer">
        <div class="line">办理中的手续：{{d.preProceNum}}个

        </div>
        <div class="line">已办理完成手续：{{d.preEndNum}}个

        </div>
    </div>
</script>
<script>
    new Vue({
        el: "#app",
        template: "#template",
        data: {
            winH: 0,
            dataList: [],
            startDate: "",
            endDate: "",
            tableName: 'test',
            pageNo: 1,
            kind: {},
            light: null,
            sort: {field: "amtTotal", type: ""},
            pageSize: 10
        },
        mounted: function () {
            this.init()
        },
        methods: {
            init: function () {
                this.winH = document.body.clientHeight
                this.getData();
                window.toDetail = this.toDetail;
            },
            getSearchParams: function () {
                var param = layui.form.getValue("searchForm");

                if (param.rangeDate) {
                    param.beginDate = param.rangeDate.split(" ~ ")[0];
                    param.endDate = param.rangeDate.split(" ~ ")[1];
                    param.rangeDate = null;
                    param.year = param.beginDate.substring(0, 4);
                }
                param.pageNo = this.pageNo;
                param.pageSize = this.pageSize;
                param.orderBy = this.sort.field;
                param.orderType = this.sort.type || null;
                return param;
            },
            getData: function () {
                var self = this;
                var param = this.getSearchParams();
                App.postJson("/api/subInfo/query/queryPage", param, function (res) {
                    self.dataList = res.rows;

                    self.loadPage(res.total);
                    self.loadTable(param);
                });
            },
            exportExcel: function () {
                var param = this.getSearchParams();

                var url = App.getUrl("/subInfoExport/exportDetailExcel");
                console.log(url);
                App.common.utils.downFile(url, "POST", param, "项目台账.xlsx", "导出失败");
                //App.common.utils.downFile(App.getUrl("/subInfoExport/exportCtTz"), "POST", param, "项目台账.xlsx", "导出失败");

            },
            loadTable: function (param) {
                let self = this;

                let columns = [];
                switch (param.status){
                    case '1':
                        columns = [[ // 设置表头
                            {field: 'mock1', type: 'numbers', fixed: 'left', align: 'center', title: '序号',width:44},
                            {field: 'subName', fixed: 'left', title: '项目名称', minWidth: 300, templet: '#subName'},
                            {field: 'subjectName', title: '项目所在地', minWidth: 100},
                            {field: 'content', title: '项目建设内容', minWidth: 300,
                                templet: function (row) {
                                    return row.content ? '<span class="cut" title="' + row.content + '">' + row.content + '</span>' : '';
                                }
                            },
                            {field: 'amtTotal', title: '计划总投资（亿元）', minWidth: 250, templet: d => (d.amtTotal / 10000).toFixed(2) + "亿元"},
                            {field: 'progress', title: '进展情况', minWidth: 300,
                                templet: function (row) {
                                    return row.progress ? '<span class="cut" title="' + row.progress + '">' + row.progress + '</span>' : '';
                                }},
                            {field: 'remark', title: '备注', width: 200},
                            {field: 'mock2', title: '操作&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;', width: 140, align: 'center', toolbar: '#toolBar', fixed: 'right'}
                        ]];
                        break;
                    case '2':
                        columns = [[ // 设置表头
                            {type: 'numbers',  align: 'center', width: 44, title: '序号',fixed: 'left'},
                            {field: 'subName',  title: '项目名称', minWidth: 200, templet: '#subName',fixed: 'left'},
                            {field: 'subjectName', title: '项目所在地', minWidth: 100},
                            {field: 'content', title: '项目建设内容', minWidth: 300,
                                templet: function (row) {
                                    return row.content ? '<span class="cut" title="' + row.content + '">' + row.content + '</span>' : '';
                                }},
                            {
                                field: 'amtTotal', title: '计划总投资（亿元）', width: 80, templet: function (d) {
                                    return (d.amtTotal / 10000).toFixed(2) + "亿元";
                                }
                            },
                            // {field: 'preProceNum', title: '预计开工时间', width: 160, templet: '#date'},
                            {field: 'xmbaStatus', title: '前期手续办理情况', minWidth: 160, templet: '#preInfo'},
                            {field: 'remark', title: '备注', minWidth: 245, templet: '#remark'},
                            {field: 'mock2', title: '操作&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;', width: 140, align: 'center', toolbar: '#toolBar', fixed: 'right'}
                        ]]
                        break;
                    case '3':
                        columns = [[ // 设置表头
                            {
                                type: 'numbers',
                                fixed: 'left',
                                align: 'center',
                                title: '序号',
                                width: 50,
                                templet: function (row) {
                                    if (row < 10) {
                                        return '0' + row;
                                    } else {
                                        return row;
                                    }
                                }
                            },
                            {field: 'subName', fixed: 'left', title: '项目名称', minWidth: 200, templet: '#subName'},
                            {field: 'subjectName', title: '项目所在地', width: 100},
                            {field: 'content', title: '项目建设内容', width: 300,
                                templet: function (row) {
                                    return row.content ? '<span class="cut" title="' + row.content + '">' + row.content + '</span>' : '';
                                }},
                            {
                                field: 'amtTotal',  title: '计划总投资（亿元）', width: 80, templet: function (d) {
                                    return (d.amtTotal / 10000).toFixed(2) + "亿元";
                                }
                            },
                            {field: 'endDate',  title: '建成投产时间', width: 100,templet: '#date'},
                            {field: 'yearPlanAmt', title: '年度投资(万元)', width: 100},
                            {field: 'progress',  title: '进展情况', width: 300,
                                templet: function (row) {
                                    return row.progress ? '<span class="cut" title="' + row.progress + '">' + row.progress + '</span>' : '';
                                }},
                            {field: 'remark', title: '备注', width: 200},
                            {field: 'mock2', title: '操作&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;', width: 140, align: 'center', toolbar: '#toolBar', fixed: 'right'}
                        ]]
                        break;
                    case '9':
                        columns = [[ // 设置表头
                            {type: 'numbers', fixed: 'left', align: 'center', title: '序号', width: 44},
                            {field: 'subName', fixed: 'left', title: '项目名称', minWidth: 200, templet: '#subName'},
                            {field: 'subjectName', title: '项目所在地', width: 100},
                            {field: 'content', title: '项目基本情况', minWidth: 300,
                                templet: function (row) {
                                    return row.content ? '<span class="cut" title="' + row.content + '">' + row.content + '</span>' : '';
                                }},
                            {field: 'rtDate', title: '升规入统时间', minWidth: 160,templet: '#date'},
                            {field: 'progress', title: '进展情况', minWidth: 300,
                                templet: function (row) {
                                    return row.progress ? '<span class="cut" title="' + row.progress + '">' + row.progress + '</span>' : '';
                                }},
                            {field: 'remark', title: '备注', minWidth: 150},
                            {field: 'mock2', title: '操作&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;', width: 140, align: 'center', toolbar: '#toolBar', fixed: 'right'}
                        ]]
                        break;
                    default:
                        columns = [[
                            {type: 'numbers', align: 'center', width: 44, title: '序号',fixed: 'left'},
                            {field: 'subName', title: '项目名称', minWidth: 200, templet: '#subName',fixed: 'left'},
                            {field: 'subjectName', title: '项目所在地', width: 100},
                            {field: 'content', title: '建设内容', minWidth: 300,
                                templet: function (row) {
                                    return row.content ? '<span class="cut" title="' + row.content + '">' + row.content + '</span>' : '';
                                }},
                            {
                                field: 'amtTotal',
                                title: '总投资',
                                width: 100,
                                templet: d => (d.amtTotal / 10000).toFixed(2) + "亿元"
                            },
                            {field: 'statusName', title: '状态', width: 160},
                            {field: 'beginDate', title: '计划开工日期', minWidth: 160},
                            {field: 'endDate', title: '计划完工日期', minWidth: 160},
                            {field: 'mock2', title: '操作&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;', width: 140, align: 'center', toolbar: '#toolBar', fixed: 'right'}
                        ]]
                        break;
                }
                layui.table.render({
                    elem: '#table1', // 指定原始表格元素选择器（推荐id选择器）
                    even: true,
                    autoSort: false,
                    // toolbar: '#headerToolbar',
                    defaultToolbar: [],
                    initSort: self.sort,
                    cols: columns,
                    data: self.dataList,
                    fixed: true,
                    height: window.screen.availHeight - 260,
                    done: function (res, curr, count) {
                        res.data.forEach(function (item, index) {
                            if (index % 2 == 0) {
                                var tr = $('.layui-table-view').find(".layui-table-box tbody tr[data-index='" + index + "']").eq(0).css("background-color", "#0B2F60");
                                var tr = $('.layui-table-view').find(".layui-table-box tbody tr[data-index='" + index + "']").eq(1).css("background-color", "#123D77");
                            } else {
                                var tr = $('.layui-table-view').find(".layui-table-box tbody tr[data-index='" + index + "']").eq(0).css("background-color", "#0E356A");
                                var tr = $('.layui-table-view').find(".layui-table-box tbody tr[data-index='" + index + "']").eq(1).css("background-color", "#14427F");
                            }
                            // $(".layui-table-main tr").each(function (index, val) {
                            //     $($(".layui-table-fixed .layui-table-body tbody tr")[index]).height($(val).height());
                            // });
                            $(".layui-table-body  tr").resize(function () {
                                $(".layui-table-body  tr").each(function (index, val) {
                                    $($(".layui-table-fixed .layui-table-body table tr")[index]).height($(val).height());
                                });
                            });
                            //初始化高度，使得冻结行表体高度一致
                            $(".layui-table-body  tr").each(function (index, val) {
                                $($(".layui-table-fixed .layui-table-body table tr")[index]).height($(val).height());
                            });

                        });
                    }
                });
                layui.table.on('toolbar(' + this.tableName + ')', function (obj) {
                    var event = obj.event;
                    self[event].call(this, obj);
                });
                layui.table.on('tool(' + this.tableName + ')', function (obj) {
                    var event = obj.event;
                    self[event].call(this, obj);
                });
                layui.table.on('sort(' + this.tableName + ')', function (obj) {
                    self.sort = obj;
                    self.getData();
                    return;
                })
            },
            loadPage: function (totalCount) {
                var self = this;
                layui.laypage.render({
                    elem: 'pagination',
                    count: totalCount,
                    curr: self.pageNo,
                    limit: self.pageSize,
                    layout: ['count', 'prev', 'page', 'next', 'skip'],
                    jump: function (obj, first) {
                        //首次不执行
                        if (!first) {
                            self.pageNo = obj.curr;
                            self.getData();
                        }
                    }
                });
            },
            toDetail: function (obj) {
                //详情
                var index = top.layer.open({
                    type: 2,
                    title: '',
                    closeBtn: 0,
                    area: ['1000px', '1000px'],
                    content: App.getUrl("/subject/subInfo/bigScreenView?isCt=true&layer=true&subId=" + obj.data.id + "&queryYear=" + obj.data.year + "&lastUrl=" + window.location.href),
                    skin: "bigDialogInfo"
                });
                top.layui.layer.full(index);
            },
            search: function () {
                var param = layui.form.getValue("searchForm");
                window.localStorage.setItem(this.cacheName, JSON.stringify(param));
                this.pageNo = 1;
                this.getData();
            }
        }
    });
</script>
</body>
</html>