longping
/
subject_gxj


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379
							<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<%@ page isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<title>项目信息</title>
</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>
<style>
	.project-title{
		width:100%;
		margin:17px 0;
		font-weight: 500;
		font-size: 27px;
		color: #333333;
		text-align:center;
	}

	.project-status{
		display:flex;
		align-items:center;
		justify-content:center;
		width:100%;
		height: 45px;
		font-weight: 400;
		font-size: 14px;
		color: #333333;
		background: rgba(28,86,163,0.05);
	}

	.project-status-light img{
		margin-left:5px;
		margin-right:5px;
	}

	.project-status-offset,
	.project-status-info{
		height:14px;
		margin-left:10px;
		padding-left:10px;
		line-height:14px;
		box-sizing:border-box;
		color: #999999;
		font-size: 12px;
	}

	.project-status-info button{
		width:fit-content;
		height:18px;
		margin:-2px 2px 0 2px;
		padding:2px;
		box-sizing:border-box;
		line-height:14px;
		color:#fff;
		border-radius:2px;
		cursor:pointer;
	}

	.project-status-plan{
		display:flex;
		align-items:center;
	}

	.plan-box{
		display:flex;
		align-items:center;
		height:14px;
		margin-left:10px;
		padding-left:10px;
		line-height:14px;
		box-sizing:border-box;
	}

	.plan-icon{
		display: flex;
	    justify-content: center;
	    align-items: center;
	    width: 16px;
	    height: 16px;
	    margin-right:3px;
	    border-radius: 50%;
	    color: #fff;
	    background: gray;
	}

	.plan-icon-done{
		background: #4979cf;
	}
	.light-rgb{
		width:32px;
		height:32px;
		margin: auto;
	}
	.light-rgb-red{
		width:32px;
		height:32px;
		margin: auto;
		animation: blink 2s infinite;  /* 调用动画，持续1秒，重复无限次 */
	}
	/* 定义闪烁的动画 */
	@keyframes blink {
		0% {
			opacity: 1; /* 不透明 */
		}
		50% {
			opacity: 0; /* 透明 */
		}
		100% {
			opacity: 1; /* 不透明 */
		}
	}
	.project-status-lights {
		display: flex;
		justify-content: center; /* 居中显示 */
		align-items: center;
		margin-top: 10px; /* 与上方偏离度有间隔 */
		flex-wrap: wrap;
	}

	.light-item {
		display: flex;
		flex-direction: column;
		align-items: center; /* 水平居中 */
		margin: 10px; /* 每个灯之间的间隔 */
		text-align: center;
	}

	.light-item img {
		width: 32px; /* 调整灯的宽度 */
		height: 32px; /* 调整灯的高度 */
	}

	.light-name {
		margin-top: 5px;
		font-size: 14px;
		color: #333;
		font-weight: 400;
	}

	.page-table{
	 	margin: 0 0 22px !important;
	}

	.table_box .table1 .label{
		color:#999;
	}
	 .right_title{
		 /*margin-bottom: 20px;*/
	 }
	.layui-layout::-webkit-scrollbar{
		width: 0;
	}
	.amt-value{
		font-weight: bold;
		color: #1C56A3;
	}
.amt-rate{
	color: #FF3300;
}
</style>
<body>
<div id="app"></div>
<template id="template">
	<div class="layui-layout layui-layout-admin" style=" padding: 0 20px 0px;overflow: auto">
		<input type="hidden" id="subId" value="${sunInfo.id }"/>
		<input type="hidden" id="projectName" value="${sunInfo.sub_name }"/>
		<input type="hidden" id="unitName" value="${sunInfo.unitName }"/>
		<!-- 内容区域 -->
<%--			<div class="right_title">
				<div class="project-title">
					<c:choose>
						<c:when test="${sunInfo.isBl == '1'}">
							<div>${sunInfo.sub_name}</div>
						</c:when>
						<c:otherwise>
							<div>${sunInfo.sub_name}</div>
						</c:otherwise>
					</c:choose>
				</div>

				<div class="project-status">

					<div class="project-status-offset">偏离度：<span class="amt-value">${sunInfo.offset}%</span></div>

					<div class="project-status-info">项目状况：<span class="amt-value">${sunInfo.statusName}</span></div>

					<div class="project-status-plan">
						<div class="project-status-offset">总投资：<span class="amt-value">${totalAmt }亿</span></div>
						<div class="project-status-offset">已完成投资：<span class="amt-value">${allEndAmt }亿</span>(<span class="amt-rate">${allEndAmtRate }%</span>)</div>
						<div class="project-status-offset">年度计划投资：<span class="amt-value">${yearAmt}亿</span></div>
						<div class="project-status-offset">年度完成投资：<span class="amt-value">${yearAmtSj }亿</span>(<span class="amt-rate">${yearEndAmtRate }%</span>)</div>
						<div class="project-status-offset">应完成投资：<span class="amt-value">${yearPlanAmt}亿</span></div>
					</div>
				</div>

				<!-- 灯显示区域，单独一行 -->
				<div class="project-status-lights">
					<div class="light-item" @click="monthReportEdit()">
						<img v-if="warningLight.yb === 0" class="light-rgb" src="${WebSite.asset}/css/images/light-green.png" />
						<img v-if="warningLight.yb === 1" class="light-rgb-red" src="${WebSite.asset}/css/images/light-yellow.png" />
						<img v-if="warningLight.yb === 2" class="light-rgb-red" src="${WebSite.asset}/css/images/light-red.png" />
						<div class="light-name">月报警示灯</div>
					</div>
					<div class="light-item" @click="detail()">
						<img v-if="warningLight.kg === 0" class="light-rgb" src="${WebSite.asset}/css/images/light-green.png" />
						<img v-if="warningLight.kg === 1" class="light-rgb-red" src="${WebSite.asset}/css/images/light-yellow.png" />
						<img v-if="warningLight.kg === 2" class="light-rgb-red" src="${WebSite.asset}/css/images/light-red.png" />
						<div class="light-name">开工警示灯</div>
					</div>
					<div class="light-item" @click="toPre()">
						<img v-if="warningLight.qq === 0" class="light-rgb" src="${WebSite.asset}/css/images/light-green.png" />
						<img v-if="warningLight.qq === 1" class="light-rgb-red" src="${WebSite.asset}/css/images/light-yellow.png" />
						<img v-if="warningLight.qq === 2" class="light-rgb-red" src="${WebSite.asset}/css/images/light-red.png" />
						<div class="light-name">手续警示灯</div>
					</div>
					<div class="light-item" @click="detail()">
						<img v-if="warningLight.jg === 0" class="light-rgb" src="${WebSite.asset}/css/images/light-green.png" />
						<img v-if="warningLight.jg === 1" class="light-rgb-red" src="${WebSite.asset}/css/images/light-yellow.png" />
						<img v-if="warningLight.jg === 2" class="light-rgb-red" src="${WebSite.asset}/css/images/light-red.png" />
						<div class="light-name">竣工警示灯</div>
					</div>
					<div class="light-item" @click="onChangeActive(2)">
						&lt;%&ndash; 偏离度显示 &ndash;%&gt;
						<c:choose>
							<c:when test="${sunInfo.status_fgw == '2'}">
								<img class="light-rgb-red"   src="${WebSite.asset}/css/images/light-red.png" title="${not empty sunInfo.problemReason ? sunInfo.problemReason : '暂无描述'}"></img>
							</c:when>
							<c:when test="${sunInfo.status_fgw == '1'}">
								<div><img  class="light-rgb-red"   src="${WebSite.asset}/css/images/light-yellow.png" title="${not empty sunInfo.problemReason ? sunInfo.problemReason : '暂无描述'}"></img></div>
							</c:when>
							<c:otherwise>
								<div><img  class="light-rgb"  src="${WebSite.asset}/css/images/light-green.png"></img></div>
							</c:otherwise>
						</c:choose>
						<div class="light-name">偏离度警示灯</div>
					</div>
				</div>

			</div>--%>
			<div class="tab-group" style="position: relative;">
				<button class="btn btn1" :class="{active: tabActive === 1}" @click="onChangeActive(1)">项目信息</button>
				<button class="btn btn2" :class="{active: tabActive === 2}" @click="onChangeActive(2)">项目进度</button>
				<!-- <button class="btn btn2" :class="{active: tabActive === 3}" @click="onChangeActive(3)">历史记录</button> -->
<!-- 				<button class="btn btn2" :class="{active: tabActive === 4}" @click="onChangeActive(4)">周报</button>
				<button class="btn btn2" :class="{active: tabActive === 5}" @click="onChangeActive(5)">年度计划</button> -->
				<button class="btn btn2" :class="{active: tabActive === 6}" @click="onChangeActive(6)">项目前期手续办理情况</button>
				<button class="btn btn2" :class="{active: tabActive === 7}" @click="onChangeActive(7)">问题督办</button>
				<!-- <button class="btn btn2" :class="{active: tabActive === 8}" @click="onChangeActive(8)">牵头领导及部门</button> -->
				<button class="btn btn2" :class="{active: tabActive === 9}" @click="onChangeActive(9)">项目图片及影像</button>
				<button class="btn btn2" :class="{active: tabActive === 11}" @click="onChangeActive(11)">重大事项</button>
<!-- 				<button class="btn btn2" :class="{active: tabActive === 12}" @click="onChangeActive(12)">短信发送</button>
				<button class="btn btn2" :class="{active: tabActive === 13}" @click="onChangeActive(13)">项目日志</button> -->
				<%--竣工项目 才有竣工报告--%>
				<c:if test="${completeCheck}">
					<button class="btn btn2" :class="{active: tabActive === 10}" @click="onChangeActive(10)">竣工报告</button>
				</c:if>
					<button class="layui-btn layui-btn-normal" style="position:relative;z-index:9;float: right" @click="backHis()">返回</button>
			</div>
			<iframe :src="iframeUrl" style="min-height:430px;border:none;margin-top: 30px"></iframe>
</div>
</template>
<script>
new Vue({
	el: "#app",
	template: "#template",
	data: {
		winH: 0,
		iframeUrl: "",
		subId: "${subId}",
		collapse: false,
		tabActive: 1,
		warningLight: {
			"qq": 0,	//前期手续办理 0绿灯 1黄灯 2红灯
			"yb": 0,	//月报
			"kg": 0,	//开工
			"jg": 0		//竣工
		}
	},
	mounted: function() {
		this.init()
	},
	methods: {
		init: function() {
			this.winH = document.body.clientHeight;
			this.onChangeActive(1);
			this.getWarningStatus();
		},
		monthReportEdit() {
			window.location.href = App.getUrl("/monthReport/view");
		},
		detail() {
			var self = this;
			var subId = this.subId;
			window.location.href=App.getUrl("/subject/subInfo/detail?subId=" + subId);
		},
		toPre() {
			var self = this;
			var subId = this.subId;
			window.location.href=App.getUrl("/subPreNew/sbTodo?subId="+subId);
		},
		getWarningStatus() {

			var self = this;
			var subId = this.subId;

			// 使用路径传递参数
			const url = '/api/subInfo/query/getWarningBySubId/' + subId;
			App.postJson(url, {}, function (res) {
				if (res.success) {
					console.log("获取到的数据：",res.data)
					self.warningLight = res.data
				}
			});
		},
		backHis(){
			if(${layer}) {
				App.closeCurrentLayer();
			}else {
				window.location.href="${lastUrl}";
			}
		},
		changeSide() {
			this.collapse = !this.collapse
		},
		onChangeActive(index) {
			var subId = this.subId;
			this.tabActive = index
			if (index === 1) {
				this.iframeUrl = App.getUrl("/overdue/projectInfo2?layer=${layer}&subId="+subId + "&queryYear=${queryYear}&lastUrl=${lastUrl}");
			}else if(index === 2){
				this.iframeUrl = App.getUrl("/rptCont/viewBySub?layer=${layer}&subId="+subId + "&queryYear=${queryYear}&lastUrl=${lastUrl}");
			}else if(index === 4){
				this.iframeUrl = App.getUrl("/weekReport/detailView?layer=${layer}&subId="+subId + "&queryYear=${queryYear}&lastUrl=${lastUrl}");
			}else if(index === 5){
				this.iframeUrl = App.getUrl("/amtPlan/detailView?layer=${layer}&subId="+subId + "&queryYear=${queryYear}&lastUrl=${lastUrl}");
			}/* else{
				window.location.href = App.getUrl("/overdue/projHistory?layer=${layer}&subId="+subId + "&lastUrl=${lastUrl}");
			} */
			else if(index === 6) {
				//项目前期
				this.iframeUrl = App.getUrl("/subPreNew/subList?layer=${layer}&subId="+subId + "&queryYear=${queryYear}&lastUrl=${lastUrl}");
			}  else if(index === 7) {
				//问题督办
				this.iframeUrl =  App.getUrl("/problemreport/subDetail?layer=${layer}&subId="+subId + "&queryYear=${queryYear}&lastUrl=${lastUrl}");
			} else if(index === 8) {
				//牵头领导
				this.iframeUrl = App.getUrl("/secUserSub/subDetail?layer=${layer}&subId="+subId + "&queryYear=${queryYear}&lastUrl=${lastUrl}");
			} else if(index === 9) {
				//现场影像
				this.iframeUrl = App.getUrl("/rptCont/fileDetail?layer=${layer}&subId="+subId + "&queryYear=${queryYear}&lastUrl=${lastUrl}");
			} else if(index === 10) {
				//竣工报告
				this.iframeUrl = App.getUrl("/subComplete/view?layer=${layer}&subId="+subId + "&queryYear=${queryYear}&lastUrl=${lastUrl}");
			} else if(index === 11) {
                //重大事项
                this.iframeUrl = App.getUrl("/meetingRecords/listBySubId?layer=${layer}&subId="+subId + "&queryYear=${queryYear}&lastUrl=${lastUrl}");
            } else if(index === 12) {
            	//短信发送
            	this.iframeUrl = App.getUrl("/msgLog/subDetail?layer=${layer}&subId="+subId+"&queryYear=${queryYear}&lastUrl=${lastUrl}");
            } else if(index === 13) {
            	//项目日志
            	this.iframeUrl = App.getUrl("/subDataLog/subList?layer=${layer}&subId="+subId+"&queryYear=${queryYear}&lastUrl=${lastUrl}");
            }
		}
	}
})
</script>
</body>
</html>