longping
/
subject_gxj


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460
							<%@ 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>
<!--[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">
	.toolBar {
		display: flow-root;
		height: 70px;
	}
	/*.table_box .table_process .layui-table-cell {*/
	/*	height: 75px;*/
	/*}*/
	.layui-table-col-special .layui-table-cell{
		display:flex;
		justify-content:space-between;
	}
	.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: #49a2cfe6;
	}
</style>
</head>
<body>
<div id="app"></div>
<template id="template">
	<div class="layui-layout layui-layout-admin">
		<!-- 内容区域 -->
			<div class="right_title">
				<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">
								<div class="layui-row">
									<div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
										<div class="layui-form-item">
										    <label class="layui-form-label">项目名称：</label>
										    <div class="layui-input-block">
												<input type="text" name="subName" placeholder="请输入" autocomplete="off" class="layui-input">
										    </div>
										</div>
									</div>
									<div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
										<div class="layui-form-item">
											<label class="layui-form-label">项目类型：</label>
											<div class="layui-input-block">
												<div id="kind" name="kind"></div>
											</div>
										</div>
									</div>
									<div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
										<div class="layui-form-item">
											<label class="layui-form-label" style="width: 100px;">建设性质：</label>
											<div class="layui-input-block" style="margin-left: 130px;">
												<select name="propKind">
													<option value="">请选择</option>
													<c:forEach items="${JSXZ}" var="js">
														<c:if test="${kind == js.code }">
															<option value="${js.code }" selected="selected">${js.title }</option>
														</c:if>
														<c:if test="${kind != js.code }">
															<option value="${js.code }">${js.title }</option>
														</c:if>
													</c:forEach>
												</select>
										    </div>
										</div>
									</div>
									<div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
										<div class="layui-form-item">
										    <label class="layui-form-label">所属行业：</label>
										    <div class="layui-input-block">
												<select name="indusKind" lay-search="">
													<option value="">请选择</option>
													<c:forEach items="${HYFL }" var="hy">
														<c:if test="${indusKind == hy.id}">
															<option value="${hy.id }" selected="selected">${hy.title }</option>
														</c:if>
														<c:if test="${indusKind != hy.id}">
															<option value="${hy.id }">${hy.title }</option>
														</c:if>
													</c:forEach>
												</select>
										    </div>
										</div>
									</div>
								</div>
								<div class="layui-row">
									<div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
										<div class="layui-form-item">
											<label class="layui-form-label" style="width: 100px;">偏离度(%)：</label>
											<div class="layui-input-block time_box">
												<input type="number" name="endBl" placeholder="请填写最小偏离度" autocomplete="off" class="layui-input">
												<span class="split_txt">至</span>
												<input type="number" name="endBlPlus" placeholder="请填写最大偏离度" autocomplete="off" class="layui-input">
										    </div>
										</div>
									</div>
									<div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
										<div class="layui-form-item">
											<label class="layui-form-label">年月</label>
											<div class="layui-input-block time_box">
												<input type="text" id="beginYearMonth" readonly="readonly" name="beginYearMonth" class="layui-input">
												至
												<input type="text" id="endYearMonth" readonly="readonly" name="endYearMonth" class="layui-input">
											</div>
										</div>
									</div>
									<div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
										<div class="layui-form-item">
										    <label class="layui-form-label">建设地点：</label>
										    <div class="layui-input-block">
												<select name="subjectId">
													<option value="">请选择</option>
													<c:forEach items="${JSDD }" var="hy">
														<c:if test="${subjectId == hy.code}">
															<option value="${hy.code }" selected="selected">${hy.title }</option>
														</c:if>
														<c:if test="${indusKind != hy.title}">
															<option value="${hy.code }">${hy.title }</option>
														</c:if>
													</c:forEach>
												</select>
										    </div>
										</div>
									</div>
									<div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
											<div class="layui-form-item">
												<label class="layui-form-label" style="width: 100px;">金额(万元)：</label>
												<div class="layui-input-block time_box">
													<input type="text" id="startAmt" name="startAmt" placeholder="请输入最小金额" autocomplete="off" class="layui-input" value="${minAmt}">
													<span class="split_txt">至</span>
													<input type="text" id="endAmt" name="endAmt"  placeholder="请输入最大金额" autocomplete="off" class="layui-input" value="${maxAmt}">
												</div>
											</div>
									</div>
									<div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
										<div class="layui-form-item">
										    <label class="layui-form-label">投资类型：</label>
										    <div class="layui-input-block">
												<select name="kindNature">
													<option value="">请选择</option>
													<c:forEach items="${TZXZ }" var="hy">
															<option value="${hy.code }">${hy.title }</option>
													</c:forEach>
												</select>
										    </div>
										</div>
									</div>
									<div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
										<div class="layui-form-item">
											<label class="layui-form-label">项目状态：</label>
											<div class="layui-input-block">
												<select name="status">
													<option value="">请选择</option>
													<option value="0">暂存</option>
													<option value="1">项目前期</option>
													<option value="6">待开工</option>
													<option value="7">施工中</option>
													<option value="8">暂时停工</option>
													<option value="A">已竣工</option>
												</select>
										    </div>
										</div>
									</div>
									<div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
										<div class="layui-form-item">
											<label class="layui-form-label">项目单位名称：</label>
											<div class="layui-input-block">
												<input name="sbdw" class="layui-input" value="${unitName }">
										    </div>
										</div>
									</div>
									<c:if test="${currUser.statusProj == 1 }" >
									<div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
										<div class="layui-form-item">
											<label class="layui-form-label" >行业单位：</label>
											<div class="layui-input-block">
												<select name="hydw" lay-search>
													<option value="">--请选择--</option>
													<c:forEach items="${HYDW }" var="hy">
														<option value="${ hy.id}">${hy.title }</option>
													</c:forEach>
												</select>
											</div>
										</div>
									</div>
									</c:if>
									<div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
										<div class="layui-form-item">
											<label class="layui-form-label">资金来源：</label>
											<div class="layui-input-block">
												<select name="zjly" lay-search="">
													<option value="">请选择</option>
													<c:forEach items="${ZJLY }" var="zj">
															<option value="${zj.id }">${zj.title }</option>
													</c:forEach>
												</select>
											</div>
										</div>
									</div>
								</div>
								<div class="layui-row">
									<div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
										<div class="layui-form-item">
											<button type="button" class="layui-btn layui-btn-normal" @click="search"><i class="layui-icon layui-icon-search"></i>查询</button>
										</div>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>

			<div class="table_box" style="padding-top: 0;border-radius:10px;overflow:hidden">
				<div class="table_process">
					<table id="table1" lay-filter="test"></table>
					<div id="pagination"></div>
				</div>
			</div>
			<div style="height: 20px;"></div>
	</div>
</template>


<script type="text/html" id="subName">
<%--	{{# if(d.usersub == "1") { }}--%>
	<span title="{{d.subName}}">{{d.subName}}</span>
<%--	{{# }else { }}--%>
<%--	<span title="{{d.subName}}">{{d.subName}}</span>--%>
<%--	{{#}}}--%>
</script>
<script type="text/html" id="date">
	<div title="">
		<div class="line"><span class="qianse">计划开工：</span><span class="shense">{{d.beginDate}}</span>

		</div>
		<div class="line"><span class="qianse">计划竣工：</span><span class="shense">{{d.endDate}}</span>

		</div>
	</div>
</script>
<script type="text/html" id="toolBar">
	<div class="toolBar">
	<span class="view" title="项目信息" style="width: 30px;" lay-event="toDetail"></span>
	</div>
</script>
<script>
new Vue({
	el: "#app",
	template: "#template",
	data: {
		winH: 0,
		dataList : [],
		startDate:"",
		endDate:"",
		tableName : 'test',
		pageNo : 1,
		kind: {},
		showMoreFlag: false,
		sort: {field: "amtTotal", type:""},
		pageSize : 10
	},
	mounted : function() {
		this.init()
	},
	methods: {
		init : function() {
			this.winH = document.body.clientHeight
			var xmlx = [];
			<c:forEach items="${XMLX}" var="xm">
			xmlx.push({value:"${xm.code}", name:"${xm.title}"});
			</c:forEach>
			this.kind = layui.xmSelect.render({
				el: "#kind",
				language:'zn',
				data:xmlx
			});
			layui.laydate.render({
				elem: '#endYearMonth',
				type: 'month',
				theme: layDateTheme,
				value: new Date().format("yyyy-MM")
			})
			layui.laydate.render({
				elem: '#beginYearMonth',
				type: 'month',
				theme: layDateTheme,
				value: new Date().format("yyyy-MM")
			})
			this.getData();
			window.toDetail = this.toDetail;
		},
		getData : function(){
			var self = this;
			var param = layui.form.getValue("searchForm");
		 	if(param.beginYearMonth) {
		 		param.beginYearMonth = param.beginYearMonth.replace("-","");
		 	}
		 	if(param.endYearMonth) {
		 		param.endYearMonth = param.endYearMonth.replace("-","");
		 	}
			param.kind = this.kind.getValue("value").sort().join(",");
			param.pageNo = this.pageNo;
			param.pageSize = this.pageSize;
			param.orderBy = this.sort.field;
			param.orderType = this.sort.type || null;
			App.postJson("/api/subInfo/query/offset",param, function(res){
				self.dataList = res.rows;
				self.loadPage(res.total);
				self.loadTable();
			});
		},
		loadTable : function(){
			for(var i=0;i<this.dataList.length;i++){
				var tem = this.dataList[i];
				switch(tem.status){
				case '0':
					tem.statusName = '暂存';
					break;
				case '1':
					tem.statusName = '项目前期';
					break;
				case '6':
					tem.statusName = '待开工';
					break;
				case '7':
					tem.statusName = '施工中';
					break;
				case '8':
					tem.statusName = '暂时停工';
					break;
				case 'A':
					tem.statusName = '已竣工';
					break;
				}
			}
			var self = this;
			layui.table.render({
				elem: '#table1', // 指定原始表格元素选择器（推荐id选择器）
				even: true,
				autoSort: false,
				initSort: self.sort,
				cols: [[ // 设置表头
					{type: 'numbers', fixed: 'left', align: 'center'},
					{field: 'subName', fixed: 'left', title: '项目名称', minWidth: 300, templet: '#subName'},
					{field: 'unitName', title: '项目单位', minWidth: 150},
					{field: 'mainName', title: '监管单位', minWidth: 150},
					{field: 'state', title: '计划时间', width: 250, templet: '#date'},
					{field: 'statusName', title: '项目进度', width: 100},
					{field: 'month', title: '月份', width: 160},
					{field: 'planAmt', title: '月计划投资（万元）', width: 160},
					{field: 'endAmt', title: '月实际投资（万元）', width: 160},
					{field: 'offset', title: '偏离度', width: 160, templet: function(row) {
						if(row.offset) {
							return  row.offset+"%";
						}
						return "";
					}},
					{title: '操作', width: 100, align:'center', toolbar: '#toolBar'}
				]],
				data : self.dataList,
				done: function(res, curr, count){
					res.data.forEach(function(item, index) {
						//1.当前行的背景颜色cur_color
						/* if (item.usersub  == 1) {
							$('.layui-table').find('tr[data-index="' + index + '"]').find("td").css('background-color', "#0a99eb");
						} */
					});
				}
			});
			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 = layer.open({
				type: 2,
				title: "",
				area: ['1000px', '800px'],
				content: App.getUrl("/subject/subInfo/detailView?layer=true&subId="+ obj.data.id + "&lastUrl=" + window.location.href),
			});
			layui.layer.full(index);
		},
		search : function(){
			var param = layui.form.getValue("searchForm");
			this.pageNo = 1;
			this.getData();
		}
	}
});
</script>
</body>
</html>