first commit
This commit is contained in:
82
WebRoot/jsp/visual/1F/Q12PFS2.jsp
Normal file
82
WebRoot/jsp/visual/1F/Q12PFS2.jsp
Normal file
@ -0,0 +1,82 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
<head>
|
||||
<title><%= ServerObject.atttable.get("TOPTITLE")%></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<style type="text/css">
|
||||
.top{
|
||||
width:100%;
|
||||
height:66%;
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
.topPosition{
|
||||
width:50%;
|
||||
height:100%;
|
||||
margin:0;
|
||||
padding:0;
|
||||
float:left;
|
||||
}
|
||||
.bottom{
|
||||
background-color:#182E53;
|
||||
color:#61DEFF;
|
||||
width:100%;
|
||||
height:34%;
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
.bottomPosition{
|
||||
width:25%;
|
||||
height:100%;
|
||||
margin:0;
|
||||
padding:0;
|
||||
float:left;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
BodyHeight();
|
||||
})
|
||||
$(window).resize(function () {
|
||||
//执行代码块
|
||||
BodyHeight();
|
||||
});
|
||||
function BodyHeight() {
|
||||
$("#main").height($(window).height());
|
||||
}
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body style="margin:0;padding:0">
|
||||
<div id="main" style="width:100%;height:100%;margin:0;padding:0">
|
||||
<div class="top">
|
||||
<div class="topPosition"><img src="<%=request.getContextPath()%>/IMG/demo/zj.jpg"
|
||||
style="width:100%;height:100%;"alt="" /></div>
|
||||
<div class="topPosition"><img src="<%=request.getContextPath()%>/IMG/demo/zj.jpg"
|
||||
style="width:100%;height:100%;"alt="" /></div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="bottomPosition"><img src="<%=request.getContextPath()%>/IMG/demo/jincheng.png"
|
||||
style="width:100%;height:100%;"alt="" /></div>
|
||||
<div class="bottomPosition">
|
||||
<iframe id ="iframe1" style="height:100%; width:100%;overflow:hidden;zoom:1;"
|
||||
src="<%=request.getContextPath()%>/jsp/visual/1F/video.jsp" frameborder=0 scrolling="no" allowTransparency="false"></iframe>
|
||||
</div>
|
||||
<div class="bottomPosition">
|
||||
<iframe id ="iframe2" style="height:100%; width:100%;overflow:hidden;zoom:1;"
|
||||
src="<%=request.getContextPath()%>/jsp/visual/1F/video1.jsp" frameborder=0 scrolling="no" allowTransparency="false"></iframe>
|
||||
</div>
|
||||
<div class="bottomPosition"><img src="<%=request.getContextPath()%>/IMG/demo/daogang.png"
|
||||
style="width:100%;height:100%;"alt="" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
113
WebRoot/jsp/visual/1F/Q12PFS3.jsp
Normal file
113
WebRoot/jsp/visual/1F/Q12PFS3.jsp
Normal file
@ -0,0 +1,113 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
<head>
|
||||
<title><%= ServerObject.atttable.get("TOPTITLE")%></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<style type="text/css">
|
||||
.left{
|
||||
width:75%;
|
||||
height:100%;
|
||||
margin:0;
|
||||
padding:0;
|
||||
float:left;
|
||||
}
|
||||
.right{
|
||||
color:#61DEFF;
|
||||
width:25%;
|
||||
height:100%;
|
||||
margin:0;
|
||||
padding:0;
|
||||
float:left;
|
||||
}
|
||||
.rightSon{
|
||||
width:100%;
|
||||
height:33%;
|
||||
margin:0;padding:0;
|
||||
}
|
||||
.DateTime{
|
||||
text-align:center;
|
||||
}
|
||||
.DateTime::before{
|
||||
display: inline-block;
|
||||
content: "";
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.DateTimePosition{
|
||||
width:100%;
|
||||
height:50%;
|
||||
float:left;
|
||||
}
|
||||
.Date{
|
||||
font-size:40px;
|
||||
height:50%;
|
||||
}
|
||||
.Day{
|
||||
font-size:50px;
|
||||
height:50%;
|
||||
}
|
||||
.Time{
|
||||
font-size:70px;
|
||||
}
|
||||
.Seconds{
|
||||
font-size:40px;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
BodyHeight();
|
||||
setInterval(function(){
|
||||
var myDate = new Date;
|
||||
var year = myDate.getFullYear(); //获取当前年
|
||||
var mon = myDate.getMonth() + 1; //获取当前月
|
||||
var date = myDate.getDate(); //获取当前日
|
||||
var h = myDate.getHours();//获取当前小时数(0-23)
|
||||
var m = myDate.getMinutes();//获取当前分钟数(0-59)
|
||||
var s = myDate.getSeconds();//获取当前秒
|
||||
var week = myDate.getDay();
|
||||
var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
|
||||
$("#date").html(year + "年" + mon + "月" + date + "日");
|
||||
$("#day").html(weeks[week]);
|
||||
$("#time").html(h + ":" + m +" <font class='Seconds'>"+s+"</font>");
|
||||
}, 1000);
|
||||
})
|
||||
$(window).resize(function () {
|
||||
//执行代码块
|
||||
BodyHeight();
|
||||
});
|
||||
function BodyHeight() {
|
||||
$("#main").height($(window).height());
|
||||
var width = $(window).width();
|
||||
$(".Date").css("font-size",(40*(width/1920))+"px");
|
||||
$(".Day").css("font-size",(50*(width/1920))+"px");
|
||||
$(".Seconds").css("font-size",(40*(width/1920))+"px");
|
||||
$(".Time").css("font-size",(70*(width/1920))+"px");
|
||||
}
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body style="margin:0;padding:0">
|
||||
<div id="main" style="width:100%;height:100%;margin:0;padding:0;background-color:#182E53;">
|
||||
<div class="left"></div>
|
||||
<div class="right">
|
||||
<div class="rightSon">
|
||||
<div id="time" class="DateTime DateTimePosition Time"></div>
|
||||
<div class="DateTimePosition">
|
||||
<div id="day" class="DateTime Day"></div>
|
||||
<div id="date" class="DateTime Date"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightSon"><img src="<%=request.getContextPath()%>/IMG/demo/shengchan.png" style="width:100%;height:100%;"alt="" /></div>
|
||||
<div class="rightSon"><img src="<%=request.getContextPath()%>/IMG/demo/shengchan.png" style="width:100%;height:100%;"alt="" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
60
WebRoot/jsp/visual/1F/Q12PFS3EMS.jsp
Normal file
60
WebRoot/jsp/visual/1F/Q12PFS3EMS.jsp
Normal file
@ -0,0 +1,60 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
<head>
|
||||
<title><%= ServerObject.atttable.get("TOPTITLE")%></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<style type="text/css">
|
||||
.left{
|
||||
width:75%;
|
||||
height:100%;
|
||||
margin:0;
|
||||
padding:0;
|
||||
float:left;
|
||||
}
|
||||
.right{
|
||||
color:#61DEFF;
|
||||
width:25%;
|
||||
height:100%;
|
||||
margin:0;
|
||||
padding:0;
|
||||
float:left;
|
||||
}
|
||||
.rightSon{
|
||||
width:100%;
|
||||
height:33%;
|
||||
margin:0;padding:0;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
BodyHeight();
|
||||
})
|
||||
$(window).resize(function () {
|
||||
//执行代码块
|
||||
BodyHeight();
|
||||
});
|
||||
function BodyHeight() {
|
||||
$("#main").height($(window).height());
|
||||
}
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body style="margin:0;padding:0">
|
||||
<div id="main" style="width:100%;height:100%;margin:0;padding:0;background-color:#182E53;">
|
||||
<div class="left"></div>
|
||||
<div class="right">
|
||||
<div class="rightSon"><img src="<%=request.getContextPath()%>/IMG/demo/EMS.png" style="width:100%;height:100%;"alt="" /></div>
|
||||
<div class="rightSon"><img src="<%=request.getContextPath()%>/IMG/demo/PMS.png" style="width:100%;height:100%;"alt="" /></div>
|
||||
<div class="rightSon"><img src="<%=request.getContextPath()%>/IMG/demo/daogang.png" style="width:100%;height:100%;"alt="" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
60
WebRoot/jsp/visual/1F/Q12PFS3PMS.jsp
Normal file
60
WebRoot/jsp/visual/1F/Q12PFS3PMS.jsp
Normal file
@ -0,0 +1,60 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
<head>
|
||||
<title><%= ServerObject.atttable.get("TOPTITLE")%></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<style type="text/css">
|
||||
.left{
|
||||
width:75%;
|
||||
height:100%;
|
||||
margin:0;
|
||||
padding:0;
|
||||
float:left;
|
||||
}
|
||||
.right{
|
||||
color:#61DEFF;
|
||||
width:25%;
|
||||
height:100%;
|
||||
margin:0;
|
||||
padding:0;
|
||||
float:left;
|
||||
}
|
||||
.rightSon{
|
||||
width:100%;
|
||||
height:33%;
|
||||
margin:0;padding:0;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
BodyHeight();
|
||||
})
|
||||
$(window).resize(function () {
|
||||
//执行代码块
|
||||
BodyHeight();
|
||||
});
|
||||
function BodyHeight() {
|
||||
$("#main").height($(window).height());
|
||||
}
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body style="margin:0;padding:0">
|
||||
<div id="main" style="width:100%;height:100%;margin:0;padding:0;background-color:#182E53;">
|
||||
<div class="left"></div>
|
||||
<div class="right">
|
||||
<div class="rightSon"><img src="<%=request.getContextPath()%>/IMG/demo/PMS.png" style="width:100%;height:100%;"alt="" /></div>
|
||||
<div class="rightSon"><img src="<%=request.getContextPath()%>/IMG/demo/EMS.png" style="width:100%;height:100%;"alt="" /></div>
|
||||
<div class="rightSon"><img src="<%=request.getContextPath()%>/IMG/demo/daogang.png" style="width:100%;height:100%;"alt="" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
116
WebRoot/jsp/visual/1F/ZJMain.jsp
Normal file
116
WebRoot/jsp/visual/1F/ZJMain.jsp
Normal file
@ -0,0 +1,116 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
<head>
|
||||
<title><%= ServerObject.atttable.get("TOPTITLE")%></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<style type="text/css">
|
||||
.left{
|
||||
width:75%;
|
||||
height:100%;
|
||||
margin:0;
|
||||
padding:0;
|
||||
float:left;
|
||||
}
|
||||
.right{
|
||||
background-color:#182E53;
|
||||
color:#61DEFF;
|
||||
width:25%;
|
||||
height:100%;
|
||||
margin:0;
|
||||
padding:0;
|
||||
float:left;
|
||||
}
|
||||
.rightSon{
|
||||
width:100%;
|
||||
height:33%;
|
||||
margin:0;padding:0;
|
||||
}
|
||||
.DateTime{
|
||||
text-align:center;
|
||||
}
|
||||
.DateTime::before{
|
||||
display: inline-block;
|
||||
content: "";
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.DateTimePosition{
|
||||
width:100%;
|
||||
height:50%;
|
||||
float:left;
|
||||
}
|
||||
.Date{
|
||||
font-size:40px;
|
||||
height:50%;
|
||||
}
|
||||
.Day{
|
||||
font-size:50px;
|
||||
height:50%;
|
||||
}
|
||||
.Time{
|
||||
font-size:70px;
|
||||
}
|
||||
.Seconds{
|
||||
font-size:40px;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
BodyHeight();
|
||||
setInterval(function(){
|
||||
var myDate = new Date;
|
||||
var year = myDate.getFullYear(); //获取当前年
|
||||
var mon = myDate.getMonth() + 1; //获取当前月
|
||||
var date = myDate.getDate(); //获取当前日
|
||||
var h = myDate.getHours();//获取当前小时数(0-23)
|
||||
var m = myDate.getMinutes();//获取当前分钟数(0-59)
|
||||
var s = myDate.getSeconds();//获取当前秒
|
||||
var week = myDate.getDay();
|
||||
var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
|
||||
$("#date").html(year + "年" + mon + "月" + date + "日");
|
||||
$("#day").html(weeks[week]);
|
||||
$("#time").html(h + ":" + m +" <font class='Seconds'>"+s+"</font>");
|
||||
}, 1000);
|
||||
})
|
||||
$(window).resize(function () {
|
||||
//执行代码块
|
||||
BodyHeight();
|
||||
});
|
||||
function BodyHeight() {
|
||||
$("#main").height($(window).height());
|
||||
var width = $(window).width();
|
||||
$(".Date").css("font-size",(40*(width/1920))+"px");
|
||||
$(".Day").css("font-size",(50*(width/1920))+"px");
|
||||
$(".Seconds").css("font-size",(40*(width/1920))+"px");
|
||||
$(".Time").css("font-size",(70*(width/1920))+"px");
|
||||
}
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body style="margin:0;padding:0">
|
||||
<div id="main" style="width:100%;height:100%;margin:0;padding:0">
|
||||
<div class="left">
|
||||
<img src="<%=request.getContextPath()%>/IMG/demo/zj.jpg" style="width:100%;height:100%;"alt="" />
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="rightSon">
|
||||
<div id="time" class="DateTime DateTimePosition Time"></div>
|
||||
<div class="DateTimePosition">
|
||||
<div id="day" class="DateTime Day"></div>
|
||||
<div id="date" class="DateTime Date"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightSon"><img src="<%=request.getContextPath()%>/IMG/demo/shengchan.png" style="width:100%;height:100%;"alt="" /></div>
|
||||
<div class="rightSon"><img src="<%=request.getContextPath()%>/IMG/demo/shengchan.png" style="width:100%;height:100%;"alt="" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
1052
WebRoot/jsp/visual/1F/video.jsp
Normal file
1052
WebRoot/jsp/visual/1F/video.jsp
Normal file
File diff suppressed because it is too large
Load Diff
1042
WebRoot/jsp/visual/1F/video1.jsp
Normal file
1042
WebRoot/jsp/visual/1F/video1.jsp
Normal file
File diff suppressed because it is too large
Load Diff
56
WebRoot/jsp/visual/2F/YYChart.jsp
Normal file
56
WebRoot/jsp/visual/2F/YYChart.jsp
Normal file
@ -0,0 +1,56 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<title><%= ServerObject.atttable.get("TOPTITLE")%></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="../../inc.jsp"></jsp:include>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
//console.log("cH",document.body.offsetHeight * 0.33);
|
||||
document.getElementById("lineChartFrame").style.height = document.body.offsetHeight * 0.33 + "px";
|
||||
document.getElementById("timeDiv").style.height = document.body.offsetHeight * 0.33 + "px";
|
||||
document.getElementById("workOrderDiv1").style.height = document.body.offsetHeight * 0.33 + "px";
|
||||
document.getElementById("workOrderDiv2").style.height = document.body.offsetHeight * 0.34 + "px";
|
||||
})
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="width:100%;height:100%;margin:0;padding:0;background-color: #182F52;">
|
||||
<div id="left" class="row" style="width:50%;height:100%;margin:inherit;padding:0;float:left">
|
||||
<div style="width:100%;height:67%;margin:0;padding:0;">
|
||||
<img src="<%=request.getContextPath()%>/IMG/bg_2F/B3-Q21-00.jpg" style="width:100%;height:100%;" alt="" />
|
||||
</div>
|
||||
<!--<img src="<%=request.getContextPath()%>/IMG/bg_2F/lineChart.jpg" style="width:100%;height:100%;" alt="" />-->
|
||||
<iframe width="100%" height="33%" FRAMEBORDER="0" id="lineChartFrame" name="lineChartFrame"
|
||||
src="<%=request.getContextPath()%>/jsp/visual/modules/lineChart.jsp"></iframe>
|
||||
</div>
|
||||
|
||||
<div id="right" class="row" style="width:25%;height:100%;margin:inherit;padding:0;float:right">
|
||||
<div id="timeDiv" style="width:100%;height:34%;margin:0;padding:0;">
|
||||
<!--<img src="<%=request.getContextPath()%>/IMG/bg_2F/weather.jpg" style="width:100%;height:100%;" alt="" />-->
|
||||
<iframe width="100%" height="100%" FRAMEBORDER="0" id="timeFrame" name="timeFrame"
|
||||
src="<%=request.getContextPath()%>/jsp/visual/modules/time.jsp"></iframe>
|
||||
</div>
|
||||
<div id="workOrderDiv1" style="width:100%;height:33%;margin:0;padding:0;">
|
||||
<!--<img src="<%=request.getContextPath()%>/IMG/bg_2F/workorder.png" style="width:100%;height:100%;" alt="" />-->
|
||||
<iframe width="100%" height="100%" FRAMEBORDER="0" id="workOrderFrame" name="workOrderFrame"
|
||||
src="<%=request.getContextPath()%>/jsp/visual/modules/workOrderInfo.jsp"></iframe>
|
||||
</div>
|
||||
<div id="workOrderDiv2" style="width:100%;height:33%;margin:0;padding:0;">
|
||||
<!--<img src="<%=request.getContextPath()%>/IMG/bg_2F/workorder.png" style="width:100%;height:100%;" alt="" />-->
|
||||
<iframe width="100%" height="100%" FRAMEBORDER="0" id="workOrderFrame" name="workOrderFrame"
|
||||
src="<%=request.getContextPath()%>/jsp/visual/modules/workOrderInfo.jsp"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
52
WebRoot/jsp/visual/2F/YYMain.jsp
Normal file
52
WebRoot/jsp/visual/2F/YYMain.jsp
Normal file
@ -0,0 +1,52 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<title><%= ServerObject.atttable.get("TOPTITLE")%></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
//console.log("cH",document.body.offsetHeight * 0.33);
|
||||
document.getElementById("timeDiv").style.height = document.body.offsetHeight * 0.33 + "px";
|
||||
document.getElementById("workOrderDiv1").style.height = document.body.offsetHeight * 0.33 + "px";
|
||||
document.getElementById("workOrderDiv2").style.height = document.body.offsetHeight * 0.34 + "px";
|
||||
})
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="width:100%;height:100%;margin:0;padding:0;background-color: #182F52;">
|
||||
<div id="left" class="row" style="width:75%;height:100%;margin:inherit;padding:0;float:left">
|
||||
<div style="width:100%;height:100%;margin:0;padding:0;">
|
||||
<img src="<%=request.getContextPath()%>/IMG/bg_2F/B3-Q21-00.jpg" style="width:100%;height:100%;" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="right" class="row" style="width:25%;height:100%;margin:inherit;padding:0;float:right">
|
||||
<div id = "timeDiv" style="width:100%;height:34%;margin:0;padding:0;">
|
||||
<!--<img src="<%=request.getContextPath()%>/IMG/bg_2F/weather.jpg" style="width:100%;height:100%;" alt="" />-->
|
||||
<iframe width="100%" height="100%" FRAMEBORDER="0" id="timeFrame" name="timeFrame"
|
||||
src="<%=request.getContextPath()%>/jsp/visual/modules/time.jsp"></iframe>
|
||||
</div>
|
||||
<div id = "workOrderDiv1" style="width:100%;height:33%;margin:0;padding:0;">
|
||||
<!--<img src="<%=request.getContextPath()%>/IMG/bg_2F/workorder.png" style="width:100%;height:100%;" alt="" />-->
|
||||
<iframe width="100%" height="100%" FRAMEBORDER="0" id="workOrderFrame" name="workOrderFrame"
|
||||
src="<%=request.getContextPath()%>/jsp/visual/modules/workOrderInfo.jsp"></iframe>
|
||||
</div>
|
||||
<div id = "workOrderDiv2" style="width:100%;height:33%;margin:0;padding:0;">
|
||||
<!--<img src="<%=request.getContextPath()%>/IMG/bg_2F/workorder.png" style="width:100%;height:100%;" alt="" />-->
|
||||
<iframe width="100%" height="100%" FRAMEBORDER="0" id="workOrderFrame" name="workOrderFrame"
|
||||
src="<%=request.getContextPath()%>/jsp/visual/modules/workOrderInfo.jsp"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
41
WebRoot/jsp/visual/2F/YYQ21DOWN.jsp
Normal file
41
WebRoot/jsp/visual/2F/YYQ21DOWN.jsp
Normal file
@ -0,0 +1,41 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<title><%= ServerObject.atttable.get("TOPTITLE")%></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<script type="text/javascript">
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="width:100%;height:100%;margin:0;padding:0;background-color: #182F52;">
|
||||
<div id="left" class="row" style="width:50%;height:100%;margin:inherit;padding:0;float:left">
|
||||
<div style="width:100%;height:67%;margin:0;padding:0;">
|
||||
<img src="<%=request.getContextPath()%>/IMG/bg_2F/B3-Q21-00.jpg" style="width:100%;height:100%;" alt="" />
|
||||
</div>
|
||||
<div style="width:50%;height:33%;margin:0;padding:0;float:left">
|
||||
<img src="<%=request.getContextPath()%>/IMG/bg_2F/camera.png" style="width:100%;height:100%;" alt="" />
|
||||
</div>
|
||||
<div style="width:50%;height:33%;margin:0;padding:0;float:right">
|
||||
<img src="<%=request.getContextPath()%>/IMG/bg_2F/camera.png" style="width:100%;height:100%;" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="right" class="row" style="width:50%;height:100%;margin:inherit;padding:0;float:right">
|
||||
<div style="width:100%;height:100%;margin:0;padding:0;">
|
||||
<img src="<%=request.getContextPath()%>/IMG/bg_2F/process.jpg" style="width:100%;height:100%;" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
47
WebRoot/jsp/visual/2F/YYQ21UP.jsp
Normal file
47
WebRoot/jsp/visual/2F/YYQ21UP.jsp
Normal file
@ -0,0 +1,47 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<title><%= ServerObject.atttable.get("TOPTITLE")%></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<script type="text/javascript">
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="width:100%;height:100%;margin:0;padding:0;background-color: #182F52;">
|
||||
<div id="top" class="row" style="width:100%;height:67%;margin:inherit;padding:0;">
|
||||
<div style="width:50%;height:100%;margin:0;padding:0;float:left">
|
||||
<img src="<%=request.getContextPath()%>/IMG/bg_2F/B3-Q21-00.jpg" style="width:100%;height:100%;" alt="" />
|
||||
</div>
|
||||
<div style="width:50%;height:100%;margin:0;padding:0;float:right">
|
||||
<img src="<%=request.getContextPath()%>/IMG/bg_2F/B3-Q21-00.jpg" style="width:100%;height:100%;" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="bottom" class="row" style="width:100%;height:33%;margin:inherit;padding:0;">
|
||||
<div style="width:25%;height:100%;margin:0;padding:0;float:left">
|
||||
<img src="<%=request.getContextPath()%>/IMG/bg_2F/camera.png" style="width:100%;height:100%;" alt="" />
|
||||
</div>
|
||||
<div style="width:25%;height:100%;margin:0;padding:0;float:left">
|
||||
<img src="<%=request.getContextPath()%>/IMG/bg_2F/camera.png" style="width:100%;height:100%;" alt="" />
|
||||
</div>
|
||||
<div style="width:25%;height:100%;margin:0;padding:0;float:left">
|
||||
<img src="<%=request.getContextPath()%>/IMG/bg_2F/camera.png" style="width:100%;height:100%;" alt="" />
|
||||
</div>
|
||||
<div style="width:25%;height:100%;margin:0;padding:0;float:left">
|
||||
<img src="<%=request.getContextPath()%>/IMG/bg_2F/camera.png" style="width:100%;height:100%;" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
49
WebRoot/jsp/visual/2F/YYQ21UPDOWN.jsp
Normal file
49
WebRoot/jsp/visual/2F/YYQ21UPDOWN.jsp
Normal file
@ -0,0 +1,49 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<title><%= ServerObject.atttable.get("TOPTITLE")%></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
//console.log("cH",document.body.offsetHeight * 0.33);
|
||||
document.getElementById("timeDiv").style.height = document.body.offsetHeight * 0.33 + "px";
|
||||
document.getElementById("userDiv").style.height = document.body.offsetHeight * 0.33 + "px";
|
||||
})
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="width:100%;height:100%;margin:0;padding:0;background-color: #182F52;">
|
||||
<div id="left" class="row" style="width:50%;height:100%;margin:inherit;padding:0;float:left">
|
||||
<div style="width:100%;height:67%;margin:0;padding:0;">
|
||||
<img src="<%=request.getContextPath()%>/IMG/bg_2F/B3-Q21-00.jpg" style="width:100%;height:100%;" alt="" />
|
||||
</div>
|
||||
<div id="timeDiv" style="width:50%;height:33%;margin:0;padding:0;float:left">
|
||||
<!-- <img src="<%=request.getContextPath()%>/IMG/bg_2F/weather.jpg" style="width:100%;height:100%;" alt="" /> -->
|
||||
<iframe width="100%" height="100%" FRAMEBORDER="0" id="timeFrame" name="timeFrame"
|
||||
src="<%=request.getContextPath()%>/jsp/visual/modules/time.jsp"></iframe>
|
||||
</div>
|
||||
<div id="userDiv" style="width:50%;height:33%;margin:0;padding:0;float:right">
|
||||
<!-- <img src="<%=request.getContextPath()%>/IMG/bg_2F/user.jpg" style="width:100%;height:100%;" alt="" /> -->
|
||||
<iframe width="100%" height="100%" FRAMEBORDER="0" id="userFrame" name="userFrame"
|
||||
src="<%=request.getContextPath()%>/jsp/visual/modules/userInfo.jsp"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="right" class="row" style="width:50%;height:100%;margin:inherit;padding:0;float:right">
|
||||
<div style="width:100%;height:100%;margin:0;padding:0;">
|
||||
<img src="<%=request.getContextPath()%>/IMG/bg_2F/process.jpg" style="width:100%;height:100%;" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
47
WebRoot/jsp/visual/2F/YYQ24.jsp
Normal file
47
WebRoot/jsp/visual/2F/YYQ24.jsp
Normal file
@ -0,0 +1,47 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<title><%= ServerObject.atttable.get("TOPTITLE")%></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<script type="text/javascript">
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="width:100%;height:100%;margin:0;padding:0;background-color: #182F52;">
|
||||
<div id="top" class="row" style="width:100%;height:67%;margin:inherit;padding:0;">
|
||||
<div style="width:50%;height:100%;margin:0;padding:0;float:left">
|
||||
<img src="<%=request.getContextPath()%>/IMG/bg_2F/B3-Q21-00.jpg" style="width:100%;height:100%;" alt="" />
|
||||
</div>
|
||||
<div style="width:50%;height:100%;margin:0;padding:0;float:right">
|
||||
<img src="<%=request.getContextPath()%>/IMG/bg_2F/B3-Q21-00.jpg" style="width:100%;height:100%;" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="bottom" class="row" style="width:100%;height:33%;margin:inherit;padding:0;">
|
||||
<div style="width:25%;height:100%;margin:0;padding:0;float:left">
|
||||
<img src="<%=request.getContextPath()%>/IMG/bg_2F/camera.png" style="width:100%;height:100%;" alt="" />
|
||||
</div>
|
||||
<div style="width:25%;height:100%;margin:0;padding:0;float:left">
|
||||
<img src="<%=request.getContextPath()%>/IMG/bg_2F/camera.png" style="width:100%;height:100%;" alt="" />
|
||||
</div>
|
||||
<div style="width:25%;height:100%;margin:0;padding:0;float:left">
|
||||
<img src="<%=request.getContextPath()%>/IMG/bg_2F/camera.png" style="width:100%;height:100%;" alt="" />
|
||||
</div>
|
||||
<div style="width:25%;height:100%;margin:0;padding:0;float:left">
|
||||
<img src="<%=request.getContextPath()%>/IMG/bg_2F/camera.png" style="width:100%;height:100%;" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
24
WebRoot/jsp/visual/CeShiFour.jsp
Normal file
24
WebRoot/jsp/visual/CeShiFour.jsp
Normal file
@ -0,0 +1,24 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
<head>
|
||||
<title><%= ServerObject.atttable.get("TOPTITLE")%></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<script type="text/javascript">
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body style="width:100%;height:100%;margin:0;padding:0">
|
||||
<div style="width:100%;height:100%;margin:0;padding:0;">
|
||||
<img src="<%=request.getContextPath()%>/IMG/ceshi/ceshifour.jpg" style="width:100%;height:100%;"alt="" />
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
129
WebRoot/jsp/visual/CeShiOne.jsp
Normal file
129
WebRoot/jsp/visual/CeShiOne.jsp
Normal file
@ -0,0 +1,129 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
<head>
|
||||
<title><%= ServerObject.atttable.get("TOPTITLE")%></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<script type="text/javascript">
|
||||
|
||||
var websocket = null;
|
||||
//websocket接收信息，触发换屏
|
||||
function registerEvent() {
|
||||
websocket.onopen = function (event) {
|
||||
console.log("方案one已连接");
|
||||
}
|
||||
|
||||
websocket.onmessage = function (event) {
|
||||
var gettype = Object.prototype.toString;
|
||||
if (gettype.call(event.data) == "[object Array]") {
|
||||
var json = eval(event.data);
|
||||
console.log("" + json[0].name + "当前分辨率：" +
|
||||
json[0].width + "x" + json[0].height + "");
|
||||
} else {
|
||||
console.log("切换指令：" + event.data + "");
|
||||
if(event.data.indexOf("ceshi") >= 0){
|
||||
if($('body').hasClass('modal-open')){
|
||||
$('#myModal').modal('hide');
|
||||
}else{
|
||||
$('#myModal').modal('show');
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
websocket.onclose = function (event) {
|
||||
console.log("方案one已断开");
|
||||
websocket.close();
|
||||
};
|
||||
//连接发生错误的回调方法
|
||||
websocket.onerror = function () {
|
||||
console.log("方案one错误");
|
||||
reconnect();
|
||||
};
|
||||
}
|
||||
|
||||
//setTimeout(function(){location.reload()},3600000); //指定1小时刷新一次
|
||||
//自动重连websocket
|
||||
function reconnect() {
|
||||
var userName = "方案one";
|
||||
if (websocket) {
|
||||
websocket.close();
|
||||
}
|
||||
websocket = new WebSocket('ws://' + window.location.host+ext.contextPath + '/chat?userName=' + userName);
|
||||
websocket.onopen = function (event) {
|
||||
console.log("方案one已连接");
|
||||
}
|
||||
|
||||
websocket.onmessage = function (event) {
|
||||
var gettype = Object.prototype.toString;
|
||||
if (gettype.call(event.data) == "[object Array]") {
|
||||
var json = eval(event.data);
|
||||
console.log("" + json[0].name + "当前分辨率：" +
|
||||
json[0].width + "x" + json[0].height + "");
|
||||
} else {
|
||||
console.log("切换指令：" + event.data + "");
|
||||
if(event.data.indexOf("ceshi") >= 0){
|
||||
if($('body').hasClass('modal-open')){
|
||||
$('#myModal').modal('hide');
|
||||
}else{
|
||||
$('#myModal').modal('show');
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
websocket.onclose = function (event) {
|
||||
websocket.close();
|
||||
};
|
||||
//连接发生错误的回调方法
|
||||
websocket.onerror = function () {
|
||||
websocket.close();
|
||||
};
|
||||
}
|
||||
//websocket触发换屏
|
||||
$(document).ready(function () {
|
||||
if ('WebSocket' in window) {
|
||||
// 创建websocket对象
|
||||
var userName = "方案one";
|
||||
if (websocket) {
|
||||
websocket.close();
|
||||
}
|
||||
websocket = new WebSocket('ws://' + window.location.host+ext.contextPath + '/chat?userName=' + userName);
|
||||
registerEvent();
|
||||
}
|
||||
else {
|
||||
alert('当前浏览器不支持websocket')
|
||||
}
|
||||
$(window).unload(function(){
|
||||
websocket.close();
|
||||
console.log("方案one关闭");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body style="width:100%;height:100%;margin:0;padding:0">
|
||||
<div style="width:100%;height:100%;margin:0;padding:0;" id='content'>
|
||||
<img src="<%=request.getContextPath()%>/IMG/ceshi/ceshione.jpg" style="width:100%;height:100%;"alt="" id="img" />
|
||||
</div>
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="CloseModel()"><span aria-hidden="true">×</span></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<h2>测试交互</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
24
WebRoot/jsp/visual/CeShiThree.jsp
Normal file
24
WebRoot/jsp/visual/CeShiThree.jsp
Normal file
@ -0,0 +1,24 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
<head>
|
||||
<title><%= ServerObject.atttable.get("TOPTITLE")%></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<script type="text/javascript">
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body style="width:100%;height:100%;margin:0;padding:0">
|
||||
<div style="width:100%;height:100%;margin:0;padding:0;">
|
||||
<img src="<%=request.getContextPath()%>/IMG/ceshi/ceshithree.jpg" style="width:100%;height:100%;"alt="" />
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
24
WebRoot/jsp/visual/CeShiTwo.jsp
Normal file
24
WebRoot/jsp/visual/CeShiTwo.jsp
Normal file
@ -0,0 +1,24 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
<head>
|
||||
<title><%= ServerObject.atttable.get("TOPTITLE")%></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<script type="text/javascript">
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body style="width:100%;height:100%;margin:0;padding:0">
|
||||
<div style="width:100%;height:100%;margin:0;padding:0;">
|
||||
<img src="<%=request.getContextPath()%>/IMG/ceshi/ceshitwo.jpg" style="width:100%;height:100%;"alt="" />
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
281
WebRoot/jsp/visual/camera4Select.jsp
Normal file
281
WebRoot/jsp/visual/camera4Select.jsp
Normal file
@ -0,0 +1,281 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
||||
<!DOCTYPE html>
|
||||
|
||||
<script type="text/javascript">
|
||||
var doSearchcamera = function () {
|
||||
$("#table_camera4Select").bootstrapTable('refresh');
|
||||
};
|
||||
function doSelect() {
|
||||
var checkedItems = $("#table_camera4Select").bootstrapTable('getAllSelections');
|
||||
//console.log("checkedItems",checkedItems);
|
||||
if(checkedItems.length != 0){
|
||||
//console.log(checkedItems[0].id);
|
||||
$('#${param.formId} #${param.hiddenId}').val(checkedItems[0].id);
|
||||
$('#${param.formId} #${param.textId}').val(checkedItems[0].name);
|
||||
closeModal("camera4SelectModal");
|
||||
}
|
||||
|
||||
// var datas = "";
|
||||
// datas_name = "";
|
||||
// $.each(selectionIds, function (index, item) {
|
||||
// if (datas != "") {
|
||||
// datas += ",";
|
||||
// }
|
||||
// datas += item;
|
||||
// });
|
||||
// $.post(ext.contextPath + '/user/getUsersByIds.do', { userIds: datas }, function (resp) {
|
||||
// $.each(resp, function (index, item) {
|
||||
// if (datas_name != "") {
|
||||
// datas_name += ",";
|
||||
// }
|
||||
// datas_name += item.caption;
|
||||
// });
|
||||
// $('#${param.formId} #${param.hiddenId}').val(datas);
|
||||
// $('#${param.formId} #${param.textId}').val(datas_name);
|
||||
// closeModal("user4SelectModal")
|
||||
// }, 'json');
|
||||
};
|
||||
|
||||
var $table;
|
||||
var switchStatus = false;
|
||||
var selectionIds = []; //保存选中ids
|
||||
function initialSelectionIds() {
|
||||
// var check_array = new Array();
|
||||
// check_array.push('${param.cameraId}');
|
||||
selectionIds.push('${param.cameraId}');
|
||||
}
|
||||
function getCheckedIds() {
|
||||
var ids = "";
|
||||
var check_array = $("#table_camera4Select").bootstrapTable('getAllSelections');
|
||||
$.each(check_array, function (index, item) {
|
||||
if (ids != "") {
|
||||
ids += ",";
|
||||
}
|
||||
ids += item.id;
|
||||
});
|
||||
return ids;
|
||||
}
|
||||
function queryParams(params) {
|
||||
var temp = {
|
||||
rows: params.limit, // 每页要显示的数据条数
|
||||
page: params.offset / params.limit + 1, // 每页显示数据的开始页码
|
||||
sort: params.sort, // 要排序的字段
|
||||
order: params.order,
|
||||
search_name: $('#search_name').val(),
|
||||
};
|
||||
var status = $('#switchBtn').bootstrapSwitch('state')
|
||||
if (status) {
|
||||
temp.checkedIds = getCheckedIds();
|
||||
}
|
||||
return temp;
|
||||
}
|
||||
$(function () {
|
||||
console.log("yes");
|
||||
//jquery html()方法加载，导致box无法执行boxwidget(),手动初始化
|
||||
$('#searchBox').boxWidget();
|
||||
/* $("#search_pid").select2({
|
||||
ajax: {
|
||||
type:'POST',
|
||||
url: ext.contextPath +"/work/group/getListForSelect.do",
|
||||
dataType: 'json',
|
||||
delay: 250,
|
||||
processResults: function (data) {
|
||||
return {
|
||||
results: data
|
||||
}
|
||||
},
|
||||
cache: true
|
||||
},
|
||||
placeholder:'请选择部门',//默认文字提示
|
||||
allowClear: true,//允许清空
|
||||
escapeMarkup: function (markup) { return markup; }, // 自定义格式化防止xss注入
|
||||
language: "zh-CN",
|
||||
minimumInputLength: 0,
|
||||
minimumResultsForSearch: 10,//数据超过十个启用搜索框
|
||||
formatResult: function formatRepo(repo){return repo.text;}, // 函数用来渲染结果
|
||||
formatSelection: function formatRepoSelection(repo){return repo.text;} // 函数用于呈现当前的选择
|
||||
}); */
|
||||
//$("#active").select2({minimumResultsForSearch: 10}).val("${menu.active}").trigger("change");
|
||||
$('#switchBtn').bootstrapSwitch({
|
||||
onText: '是',
|
||||
offText: '否',
|
||||
size: "small",
|
||||
});
|
||||
$(".select2-selection--single").css({ 'height': '30px', 'paddingTop': '4px' });
|
||||
|
||||
initialSelectionIds();
|
||||
|
||||
$table = $("#table_camera4Select").bootstrapTable({ // 对应table标签的id
|
||||
url: ext.contextPath + '/work/camera/getList.do', // 获取表格数据的url
|
||||
//cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
|
||||
//clickToSelect: true,
|
||||
striped: true, //表格显示条纹，默认为false
|
||||
pagination: true, // 在表格底部显示分页组件，默认false
|
||||
pageList: [10, 20], // 设置页面可以显示的数据条数
|
||||
pageSize: 20, // 页面数据条数
|
||||
pageNumber: 1, // 首页页码
|
||||
sidePagination: 'server', // 设置为服务器端分页
|
||||
clickToSelect: true,
|
||||
responseHandler: responseHandler, //在渲染页面数据之前执行的方法，此配置很重要!!!!!!!
|
||||
queryParams: queryParams,
|
||||
queryParamsType: "limit",
|
||||
sortName: 'name', // 要排序的字段
|
||||
sortOrder: 'asc', // 排序规则
|
||||
singleSelect: true,
|
||||
/* showColumns: true,
|
||||
showRefresh: true, */
|
||||
columns: [
|
||||
{
|
||||
checkbox: true, // 显示一个勾选框
|
||||
//formatter: stateFormatter
|
||||
formatter: function (i, row) { // 每次加载 checkbox 时判断当前 row 的 id 是否已经存在全局 Set() 里
|
||||
if ($.inArray(row.id, Array.from(selectionIds)) != -1) { // 因为 Set是集合,需要先转换成数组
|
||||
return {
|
||||
checked: true // 存在则选中
|
||||
}
|
||||
}
|
||||
}
|
||||
}, {
|
||||
field: 'name', // 返回json数据中的name
|
||||
title: '名称', // 表格表头显示文字
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle', // 上下居中
|
||||
width: "25%"
|
||||
}, {
|
||||
field: 'appkey', // 返回json数据中的name
|
||||
title: 'appkey', // 表格表头显示文字
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle', // 上下居中
|
||||
width: "25%"
|
||||
}, {
|
||||
field: 'secret', // 返回json数据中的name
|
||||
title: 'secret', // 表格表头显示文字
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle', // 上下居中
|
||||
width: "25%"
|
||||
},{
|
||||
field: 'url', // 返回json数据中的name
|
||||
title: '地址(ip)', // 表格表头显示文字
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle', // 上下居中
|
||||
width: "25%"
|
||||
},
|
||||
// {
|
||||
// field: 'cameraIndexCode', // 返回json数据中的name
|
||||
// title: '监控点编号', // 表格表头显示文字
|
||||
// align: 'center', // 左右居中
|
||||
// valign: 'middle', // 上下居中
|
||||
// width: "20%"
|
||||
// }
|
||||
],
|
||||
onLoadSuccess: function () { //加载成功时执行
|
||||
adjustBootstrapTableView("table_camera4Select");
|
||||
},
|
||||
onLoadError: function () { //加载失败时执行
|
||||
console.info("加载数据失败");
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
//绑定选中事件、取消事件、全部选中、全部取消
|
||||
$table.on('check.bs.table check-all.bs.table uncheck.bs.table uncheck-all.bs.table', function (e, rows, obj) {
|
||||
if ('check' == e.type) {
|
||||
$('#table_camera4Select .checked').removeClass("checked");
|
||||
obj.parent().addClass("checked");
|
||||
checkedItem = rows;
|
||||
} else {
|
||||
obj.parent().removeClass("checked");
|
||||
checkedItem = "";
|
||||
}
|
||||
});
|
||||
});
|
||||
//选中事件操作数组
|
||||
var union = function (array, ids) {
|
||||
$.each(ids, function (i, id) {
|
||||
if ($.inArray(id, array) == -1) {
|
||||
array[array.length] = id;
|
||||
}
|
||||
});
|
||||
return array;
|
||||
};
|
||||
//取消选中事件操作数组
|
||||
var difference = function (array, ids) {
|
||||
$.each(ids, function (i, id) {
|
||||
var index = $.inArray(id, array);
|
||||
if (index != -1) {
|
||||
array.splice(index, 1);
|
||||
}
|
||||
});
|
||||
return array;
|
||||
};
|
||||
var _ = { "union": union, "difference": difference };
|
||||
|
||||
//表格分页之前处理多选框数据
|
||||
function responseHandler(res) {
|
||||
$.each(res.rows, function (i, row) {
|
||||
row.checkStatus = $.inArray(row.id, selectionIds) != -1; //判断当前行的数据id是否存在与选中的数组，存在则将多选框状态变为true
|
||||
});
|
||||
return res;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="modal fade" id="camera4SelectModal">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span></button>
|
||||
<h4 class="modal-title">选择摄像头(请单选)</h4>
|
||||
</div>
|
||||
<div class="modal-body " style="width:100%">
|
||||
<div id="alertDiv"></div>
|
||||
|
||||
<div class="box box-primary box-solid collapsed-box" id="searchBox" collapsed>
|
||||
<div class="box-header">
|
||||
<!-- tools box -->
|
||||
<div class="pull-right box-tools">
|
||||
<button type="button" class="btn btn-primary btn-sm pull-right" data-widget="collapse"
|
||||
style="margin-right: 5px;">
|
||||
<i class="fa fa-plus"></i></button>
|
||||
</div>
|
||||
<!-- /. tools -->
|
||||
<i class="fa fa-search"></i>
|
||||
</div>
|
||||
<div class="box-body collapse">
|
||||
<form class="form-horizontal ">
|
||||
<div class="form-group" style="margin-right: 20px;">
|
||||
<label class="col-sm-2 control-label">名称</label>
|
||||
<div class="col-sm-4">
|
||||
<input type="text" id="search_name" name="search_name" class="form-control input-sm" placeholder="名称"
|
||||
style="width:170px;">
|
||||
</div>
|
||||
<label class="col-sm-2 control-label">只看选中</label>
|
||||
<div class="col-sm-4">
|
||||
<div class="switch" data-on="primary" data-off="info">
|
||||
<input id="switchBtn" type="checkbox" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group" style="margin-right: 20px;">
|
||||
|
||||
<div class=" col-sm-offset-6 button-group" style="padding: 0;">
|
||||
<button type="button" class="btn btn-default btn-sm pull-right" onclick="doSearchcamera();"><i
|
||||
class="fa fa-search"> 搜索</i></button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div id="table_camera4Select" style="height:230px;overflow:auto;width:100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
|
||||
<button type="button" class="btn btn-primary" onclick="doSelect()">确认</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.modal-content -->
|
||||
</div>
|
||||
<!-- /.modal-dialog -->
|
||||
</div>
|
||||
284
WebRoot/jsp/visual/camera4SelectSave.jsp
Normal file
284
WebRoot/jsp/visual/camera4SelectSave.jsp
Normal file
@ -0,0 +1,284 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
||||
<!DOCTYPE html>
|
||||
|
||||
<script type="text/javascript">
|
||||
var doSearchcamera = function () {
|
||||
$("#table_camera4Select").bootstrapTable('refresh');
|
||||
};
|
||||
function doSelect() {
|
||||
var checkedItems = $("#table_camera4Select").bootstrapTable('getAllSelections');
|
||||
//console.log("checkedItems",checkedItems);
|
||||
if(checkedItems.length != 0){
|
||||
//console.log(checkedItems[0].id);
|
||||
// $('#${param.formId} #${param.hiddenId}').val(checkedItems[0].id);
|
||||
// $('#${param.formId} #${param.textId}').val(checkedItems[0].name);
|
||||
// closeModal("camera4SelectModal");
|
||||
savePlanLayoutCameraFun(checkedItems[0].id);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
function savePlanLayoutCameraFun(cameraId){
|
||||
$.post(ext.contextPath + '/plan/savePlanLayoutCamera.do', { planLayoutId: "${param.planLayoutId}", cameraId: cameraId }, function (data) {
|
||||
if (data == 1) {
|
||||
showAlert('s', '布局中摄像头选择配置保存成功','alertDiv_layout');
|
||||
//判断布局table是否存在
|
||||
if(document.getElementById("table_layout")){
|
||||
$("#table_layout").bootstrapTable('refresh');//刷新
|
||||
}
|
||||
closeModal("camera4SelectModal");
|
||||
} else {
|
||||
showAlert('d', '布局中摄像头选择配置保存失败','alertDiv_layout');
|
||||
//判断布局table是否存在
|
||||
if(document.getElementById("table_layout")){
|
||||
$("#table_layout").bootstrapTable('refresh');//刷新
|
||||
}
|
||||
closeModal("camera4SelectModal");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var $table;
|
||||
var switchStatus = false;
|
||||
var selectionIds = []; //保存选中ids
|
||||
function initialSelectionIds() {
|
||||
// var check_array = new Array();
|
||||
// check_array.push('${param.cameraId}');
|
||||
selectionIds.push('${param.cameraId}');
|
||||
}
|
||||
function getCheckedIds() {
|
||||
var ids = "";
|
||||
var check_array = $("#table_camera4Select").bootstrapTable('getAllSelections');
|
||||
$.each(check_array, function (index, item) {
|
||||
if (ids != "") {
|
||||
ids += ",";
|
||||
}
|
||||
ids += item.id;
|
||||
});
|
||||
return ids;
|
||||
}
|
||||
function queryParams(params) {
|
||||
var temp = {
|
||||
rows: params.limit, // 每页要显示的数据条数
|
||||
page: params.offset / params.limit + 1, // 每页显示数据的开始页码
|
||||
sort: params.sort, // 要排序的字段
|
||||
order: params.order,
|
||||
search_name: $('#search_name').val(),
|
||||
};
|
||||
var status = $('#switchBtn').bootstrapSwitch('state')
|
||||
if (status) {
|
||||
temp.checkedIds = getCheckedIds();
|
||||
}
|
||||
return temp;
|
||||
}
|
||||
$(function () {
|
||||
//console.log("yes");
|
||||
//jquery html()方法加载，导致box无法执行boxwidget(),手动初始化
|
||||
$('#searchBox').boxWidget();
|
||||
/* $("#search_pid").select2({
|
||||
ajax: {
|
||||
type:'POST',
|
||||
url: ext.contextPath +"/work/group/getListForSelect.do",
|
||||
dataType: 'json',
|
||||
delay: 250,
|
||||
processResults: function (data) {
|
||||
return {
|
||||
results: data
|
||||
}
|
||||
},
|
||||
cache: true
|
||||
},
|
||||
placeholder:'请选择部门',//默认文字提示
|
||||
allowClear: true,//允许清空
|
||||
escapeMarkup: function (markup) { return markup; }, // 自定义格式化防止xss注入
|
||||
language: "zh-CN",
|
||||
minimumInputLength: 0,
|
||||
minimumResultsForSearch: 10,//数据超过十个启用搜索框
|
||||
formatResult: function formatRepo(repo){return repo.text;}, // 函数用来渲染结果
|
||||
formatSelection: function formatRepoSelection(repo){return repo.text;} // 函数用于呈现当前的选择
|
||||
}); */
|
||||
//$("#active").select2({minimumResultsForSearch: 10}).val("${menu.active}").trigger("change");
|
||||
$('#switchBtn').bootstrapSwitch({
|
||||
onText: '是',
|
||||
offText: '否',
|
||||
size: "small",
|
||||
});
|
||||
$(".select2-selection--single").css({ 'height': '30px', 'paddingTop': '4px' });
|
||||
|
||||
initialSelectionIds();
|
||||
|
||||
$table = $("#table_camera4Select").bootstrapTable({ // 对应table标签的id
|
||||
url: ext.contextPath + '/work/camera/getList.do', // 获取表格数据的url
|
||||
//cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
|
||||
//clickToSelect: true,
|
||||
striped: true, //表格显示条纹，默认为false
|
||||
pagination: true, // 在表格底部显示分页组件，默认false
|
||||
pageList: [10, 20], // 设置页面可以显示的数据条数
|
||||
pageSize: 20, // 页面数据条数
|
||||
pageNumber: 1, // 首页页码
|
||||
sidePagination: 'server', // 设置为服务器端分页
|
||||
clickToSelect: true,
|
||||
responseHandler: responseHandler, //在渲染页面数据之前执行的方法，此配置很重要!!!!!!!
|
||||
queryParams: queryParams,
|
||||
queryParamsType: "limit",
|
||||
sortName: 'name', // 要排序的字段
|
||||
sortOrder: 'asc', // 排序规则
|
||||
singleSelect: true,
|
||||
/* showColumns: true,
|
||||
showRefresh: true, */
|
||||
columns: [
|
||||
{
|
||||
checkbox: true, // 显示一个勾选框
|
||||
//formatter: stateFormatter
|
||||
formatter: function (i, row) { // 每次加载 checkbox 时判断当前 row 的 id 是否已经存在全局 Set() 里
|
||||
if ($.inArray(row.id, Array.from(selectionIds)) != -1) { // 因为 Set是集合,需要先转换成数组
|
||||
return {
|
||||
checked: true // 存在则选中
|
||||
}
|
||||
}
|
||||
}
|
||||
}, {
|
||||
field: 'name', // 返回json数据中的name
|
||||
title: '名称', // 表格表头显示文字
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle', // 上下居中
|
||||
width: "20%"
|
||||
}, {
|
||||
field: 'appkey', // 返回json数据中的name
|
||||
title: 'appkey', // 表格表头显示文字
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle', // 上下居中
|
||||
width: "20%"
|
||||
}, {
|
||||
field: 'secret', // 返回json数据中的name
|
||||
title: 'secret', // 表格表头显示文字
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle', // 上下居中
|
||||
width: "20%"
|
||||
},{
|
||||
field: 'url', // 返回json数据中的name
|
||||
title: '地址(ip)', // 表格表头显示文字
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle', // 上下居中
|
||||
width: "20%"
|
||||
},
|
||||
{
|
||||
field: 'cameraindexcode', // 返回json数据中的name
|
||||
title: '监控点编号', // 表格表头显示文字
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle', // 上下居中
|
||||
width: "20%"
|
||||
},
|
||||
|
||||
],
|
||||
onLoadSuccess: function () { //加载成功时执行
|
||||
adjustBootstrapTableView("table_camera4Select");
|
||||
},
|
||||
onLoadError: function () { //加载失败时执行
|
||||
console.info("加载数据失败");
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
//绑定选中事件、取消事件、全部选中、全部取消
|
||||
$table.on('check.bs.table check-all.bs.table uncheck.bs.table uncheck-all.bs.table', function (e, rows, obj) {
|
||||
if ('check' == e.type) {
|
||||
$('#table_camera4Select .checked').removeClass("checked");
|
||||
obj.parent().addClass("checked");
|
||||
checkedItem = rows;
|
||||
} else {
|
||||
obj.parent().removeClass("checked");
|
||||
checkedItem = "";
|
||||
}
|
||||
});
|
||||
});
|
||||
//选中事件操作数组
|
||||
var union = function (array, ids) {
|
||||
$.each(ids, function (i, id) {
|
||||
if ($.inArray(id, array) == -1) {
|
||||
array[array.length] = id;
|
||||
}
|
||||
});
|
||||
return array;
|
||||
};
|
||||
//取消选中事件操作数组
|
||||
var difference = function (array, ids) {
|
||||
$.each(ids, function (i, id) {
|
||||
var index = $.inArray(id, array);
|
||||
if (index != -1) {
|
||||
array.splice(index, 1);
|
||||
}
|
||||
});
|
||||
return array;
|
||||
};
|
||||
var _ = { "union": union, "difference": difference };
|
||||
|
||||
//表格分页之前处理多选框数据
|
||||
function responseHandler(res) {
|
||||
$.each(res.rows, function (i, row) {
|
||||
row.checkStatus = $.inArray(row.id, selectionIds) != -1; //判断当前行的数据id是否存在与选中的数组，存在则将多选框状态变为true
|
||||
});
|
||||
return res;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="modal fade" id="camera4SelectModal">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span></button>
|
||||
<h4 class="modal-title">选择摄像头(请单选)</h4>
|
||||
</div>
|
||||
<div class="modal-body " style="width:100%">
|
||||
<div id="alertDiv"></div>
|
||||
|
||||
<div class="box box-primary box-solid collapsed-box" id="searchBox" collapsed>
|
||||
<div class="box-header">
|
||||
<!-- tools box -->
|
||||
<div class="pull-right box-tools">
|
||||
<button type="button" class="btn btn-primary btn-sm pull-right" data-widget="collapse"
|
||||
style="margin-right: 5px;">
|
||||
<i class="fa fa-plus"></i></button>
|
||||
</div>
|
||||
<!-- /. tools -->
|
||||
<i class="fa fa-search"></i>
|
||||
</div>
|
||||
<div class="box-body collapse">
|
||||
<form class="form-horizontal ">
|
||||
<div class="form-group" style="margin-right: 20px;">
|
||||
<label class="col-sm-2 control-label">名称</label>
|
||||
<div class="col-sm-4">
|
||||
<input type="text" id="search_name" name="search_name" class="form-control input-sm" placeholder="名称"
|
||||
style="width:170px;">
|
||||
</div>
|
||||
<label class="col-sm-2 control-label">只看选中</label>
|
||||
<div class="col-sm-4">
|
||||
<div class="switch" data-on="primary" data-off="info">
|
||||
<input id="switchBtn" type="checkbox" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group" style="margin-right: 20px;">
|
||||
|
||||
<div class=" col-sm-offset-6 button-group" style="padding: 0;">
|
||||
<button type="button" class="btn btn-default btn-sm pull-right" onclick="doSearchcamera();"><i
|
||||
class="fa fa-search"> 搜索</i></button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div id="table_camera4Select" style="height:230px;overflow:auto;width:100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
|
||||
<button type="button" class="btn btn-primary" onclick="doSelect()">确认</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.modal-content -->
|
||||
</div>
|
||||
<!-- /.modal-dialog -->
|
||||
</div>
|
||||
1874
WebRoot/jsp/visual/cg_process_simulation.jsp
Normal file
1874
WebRoot/jsp/visual/cg_process_simulation.jsp
Normal file
File diff suppressed because it is too large
Load Diff
156
WebRoot/jsp/visual/cityHallFileList.jsp
Normal file
156
WebRoot/jsp/visual/cityHallFileList.jsp
Normal file
@ -0,0 +1,156 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" />
|
||||
<title>
|
||||
<%= ServerObject.atttable.get("TOPTITLE")%>
|
||||
</title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<!-- 文件上传-->
|
||||
<link rel="stylesheet" href="<%=request.getContextPath()%>/node_modules/bootstrap-fileinput/css/fileinput.min.css"/>
|
||||
<script type="text/javascript" src="<%=request.getContextPath()%>/node_modules/bootstrap-fileinput/js/fileinput.min.js" charset="utf-8"></script>
|
||||
<script type="text/javascript" src="<%=request.getContextPath()%>/node_modules/bootstrap-fileinput/js/locales/zh.js" charset="utf-8"></script>
|
||||
|
||||
<style type="text/css">
|
||||
.box-body .col-md-12{
|
||||
border-bottom: 1px solid gray;
|
||||
padding: 5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
.box-body .col-md-5{
|
||||
border-right: 1px solid gray;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
var tbName = 'tb_doc_file';
|
||||
var masterId_main = 'cityHallShow_main';
|
||||
var masterId_list = 'cityHallShow_list';
|
||||
var nameSpace='Document';//保存文件夹
|
||||
$(function () {
|
||||
getFileList(masterId_main,masterId_main);
|
||||
getFileList(masterId_list,masterId_list);
|
||||
});
|
||||
|
||||
var delFileFun = function(id,masterId,eleid) {
|
||||
swal({
|
||||
text: "您确定要删除此记录？",
|
||||
dangerMode: true,
|
||||
buttons: {
|
||||
cancel: {
|
||||
text: "取消",
|
||||
value: null,
|
||||
visible: true,
|
||||
className: "btn btn-default btn-sm",
|
||||
closeModal: true,
|
||||
},
|
||||
confirm: {
|
||||
text: "确定",
|
||||
value: true,
|
||||
visible: true,
|
||||
className: "btn btn-danger btn-sm",
|
||||
closeModal: true
|
||||
}
|
||||
}
|
||||
})
|
||||
.then(function(willDelete){
|
||||
if (willDelete) {
|
||||
$.post(ext.contextPath + '/base/deletefile.do', {id : id,tbName:tbName}, function(data) {
|
||||
if(data == 1){
|
||||
getFileList(masterId,eleid);
|
||||
}else{
|
||||
showAlert('d','删除失败','mainAlertdiv');
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
});
|
||||
};
|
||||
//上传文件
|
||||
var fileinput = function(masterId) {
|
||||
$.post(ext.contextPath + '/cityHallShow/fileinput.do', {masterId:masterId,tbName:tbName,nameSpace:nameSpace} , function(data) {
|
||||
$("#fileInputDiv").html(data);
|
||||
openModal('fileInputModal');
|
||||
});
|
||||
};
|
||||
var getFileList = function(masterId,eleid) {
|
||||
$.post(ext.contextPath + '/cityHallShow/getFileList.do', {masterId:masterId,tbName:tbName,nameSpace:nameSpace} , function(data) {
|
||||
console.log();
|
||||
if(data.length>0){
|
||||
$("#"+eleid).empty();
|
||||
for(var i=0;i<data.length;i++){
|
||||
var id = data[i].id;
|
||||
var filename = data[i].filename;
|
||||
var insdt = data[i].insdt;
|
||||
var htmlStr = '<div class="col-md-12">'+
|
||||
'<div class="col-md-5">'+filename+'</div>'+
|
||||
'<div class="col-md-5">'+insdt+'</div>'+
|
||||
'<div class="col-md-2">';
|
||||
if(masterId==masterId_list){
|
||||
htmlStr += '<button type="button" class="btn btn-sm btn-default" onclick="fileinput(\''+id+'\');"><i class="fa fa-plus"></i>上传视频</button>';
|
||||
}
|
||||
'</div>'+
|
||||
'</div>';
|
||||
$("#"+eleid).append(htmlStr);
|
||||
}
|
||||
}
|
||||
},'json');
|
||||
};
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<div class="content-wrapper">
|
||||
<!-- Main content -->
|
||||
<section class="content container-fluid">
|
||||
<div id="mainAlertdiv"></div>
|
||||
<div id="subDiv"></div>
|
||||
<div id="fileInputDiv"></div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="box box-solid">
|
||||
<div class="box-header with-border">
|
||||
<h3 class="box-title">主视频 <small>只取最新一条视频</small></h3>
|
||||
<div class="box-tools">
|
||||
<button type="button" class="btn btn-default" onclick="fileinput('cityHallShow_main');"><i class="fa fa-plus"></i>上传视频</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-body text-center" id="cityHallShow_main">
|
||||
|
||||
</div>
|
||||
<!-- /.box-body -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="box box-solid">
|
||||
<div class="box-header with-border">
|
||||
<h3 class="box-title">播放列表 <small>只取最新一条视频</small></h3>
|
||||
<div class="box-tools">
|
||||
<button type="button" class="btn btn-default" onclick="fileinput('cityHallShow_list');"><i class="fa fa-plus"></i>上传图片</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-body text-center" id="cityHallShow_list">
|
||||
</div>
|
||||
<!-- /.box-body -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- /.content -->
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
214
WebRoot/jsp/visual/cityHallShow.jsp
Normal file
214
WebRoot/jsp/visual/cityHallShow.jsp
Normal file
@ -0,0 +1,214 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" />
|
||||
<title>
|
||||
<%= ServerObject.atttable.get("TOPTITLE")%>
|
||||
</title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
|
||||
<style type="text/css">
|
||||
.subject{
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
background-image: url(<%=request.getContextPath()%>/IMG/cityHall/bg.png);
|
||||
background-repeat:no-repeat;
|
||||
background-position:center center;
|
||||
padding: 0 40px 40px 40px;
|
||||
}
|
||||
.subject-top{
|
||||
width: 100%;
|
||||
height: 95px;
|
||||
cursor:pointer;
|
||||
}
|
||||
.subject-content{
|
||||
width: 100%;
|
||||
height: calc(100% - 95px);;
|
||||
border: 1px solid #00c2ff;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 0 15px #00c2ff;
|
||||
}
|
||||
.subject-menu{
|
||||
position: absolute;
|
||||
bottom: 15%;
|
||||
left: 3%;
|
||||
z-index: 10;
|
||||
}
|
||||
#mainVideo,#listVideo{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: black;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.menu {
|
||||
cursor:pointer;
|
||||
}
|
||||
.menu , .menu-list{
|
||||
float: left;
|
||||
margin-right: 30px;
|
||||
}
|
||||
.menu-list {
|
||||
display:none;
|
||||
z-index: 9;
|
||||
}
|
||||
.menu-list > img{
|
||||
float: left;
|
||||
}
|
||||
.menu-list-bg{
|
||||
z-index: 8;
|
||||
height: 70px;
|
||||
width: 300px;
|
||||
background: rgba(0,0,0,0.52);
|
||||
border-radius: 35px;
|
||||
}
|
||||
.menu-list-content{
|
||||
z-index: 7;
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
width: 300px;
|
||||
}
|
||||
.menu-list-ele{
|
||||
float: left;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
text-align: center;
|
||||
padding: 0 5px;
|
||||
cursor:pointer;
|
||||
}
|
||||
.menu-list-ele >span{
|
||||
font-size: 18px;
|
||||
color: #ffffff;
|
||||
}
|
||||
.listVideo{
|
||||
display:none;
|
||||
}
|
||||
.menu-list-text{
|
||||
width: 120px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
var mainVideo ;
|
||||
var listVideo ;
|
||||
var tbName='tb_doc_file'; //数据表
|
||||
var tbName = 'tb_doc_file';
|
||||
var masterId_main = 'cityHallShow_main';
|
||||
var masterId_list = 'cityHallShow_list';
|
||||
$(function () {
|
||||
mainVideo = document.getElementById('mainVideo');
|
||||
listVideo = document.getElementById('listVideo');
|
||||
listVideo.addEventListener('ended', function () { //结束
|
||||
$("#listVideo").hide();
|
||||
$("#mainVideo").show();
|
||||
mainVideo.play();
|
||||
}, false);
|
||||
$.post(ext.contextPath + '/cityHallShow/getFileList.do', { masterId : masterId_main,tbName : tbName} , function(data) {
|
||||
if(data.length>0){
|
||||
for(var i=0;i<data.length;i++){
|
||||
var id = data[i].id;
|
||||
var filename = data[i].filename;
|
||||
var path = data[i].abspath;
|
||||
path=path.substring(path.indexOf('webapps')+7,path.length);
|
||||
src =ext.basePath.replace(ext.contextPath,'')+ path.replace(/\\/g,"\/");
|
||||
if(i==0){
|
||||
mainVideo.src = src;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
},'json');
|
||||
$.post(ext.contextPath + '/cityHallShow/getFileList.do', { masterId : masterId_list,tbName : tbName} , function(data) {
|
||||
if(data.length>0){
|
||||
var width = 120*data.length;
|
||||
$(".menu-list-bg").width((width+80)+"px");
|
||||
$(".menu-list-content").width((width+70)+"px");
|
||||
for(var i=0;i<data.length;i++){
|
||||
var id = data[i].id;
|
||||
var filename = data[i].filename;
|
||||
var last=filename.lastIndexOf(".");
|
||||
if(last<0){
|
||||
last=filename.length;
|
||||
}
|
||||
var path = data[i].abspath;
|
||||
path=path.substring(path.indexOf('webapps')+7,path.length);
|
||||
src =ext.basePath.replace(ext.contextPath,'')+ path.replace(/\\/g,"\/");
|
||||
var htmlStr = '<div class="menu-list-ele" onclick="showVideo(\''+id+'\')" >'+
|
||||
'<div>'+
|
||||
'<img src="'+src+'" width="120" height="75"/>'+
|
||||
'</div>'+
|
||||
'<span class="menu-list-text" title="'+filename.substring(0,last)+'">'+filename.substring(0,last)+'</span>'+
|
||||
'</div>';
|
||||
$("#menu-list-content").append(htmlStr);
|
||||
}
|
||||
}
|
||||
},'json');
|
||||
$("#menu").click(function(){
|
||||
$(".menu-list").fadeToggle("slow");
|
||||
});
|
||||
|
||||
});
|
||||
function initialVideo(){
|
||||
listVideo.pause()
|
||||
$("#listVideo").hide();
|
||||
$("#mainVideo").show();
|
||||
mainVideo.play();
|
||||
}
|
||||
function showVideo(masterId){
|
||||
$("#mainVideo").hide();
|
||||
mainVideo.pause()
|
||||
$("#listVideo").show();
|
||||
$.post(ext.contextPath + '/base/getInputFileListById.do', { masterId : masterId,tbName:tbName} , function(data) {
|
||||
//console.info(data)
|
||||
if(data.length>0){
|
||||
var src= "";
|
||||
for(var i=0;i<data.length;i++){
|
||||
var path = data[i].abspath;
|
||||
path=path.substring(path.indexOf('webapps')+7,path.length);
|
||||
src =ext.basePath.replace(ext.contextPath,'')+ path.replace(/\\/g,"\/");
|
||||
if(i==0){
|
||||
listVideo.src = src;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
},'json');
|
||||
}
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="subject">
|
||||
<div class="subject-top" onclick="initialVideo()"></div>
|
||||
<div class="subject-content">
|
||||
<div class="subject-menu">
|
||||
<div id="menu" class="menu"><img src="<%=request.getContextPath()%>/IMG/cityHall/icon.png"/></div>
|
||||
<div class="menu-list">
|
||||
<div class="menu-list-bg"></div>
|
||||
<div class="menu-list-content" id="menu-list-content">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<video id="mainVideo" controls width="100%" height="100%" autoplay loop></video>
|
||||
<video id="listVideo" class="listVideo" controls width="100%" height="100%" autoplay></video>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
123
WebRoot/jsp/visual/cityHallfileAdd.jsp
Normal file
123
WebRoot/jsp/visual/cityHallfileAdd.jsp
Normal file
@ -0,0 +1,123 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<script type="text/javascript">
|
||||
var filelist = new Array();
|
||||
var control;
|
||||
var allowedFileExtensions = [];
|
||||
var allowedFileTypes = [];
|
||||
var fileExtensions = '${param.fileExtensions}';
|
||||
var fileTypes = '${param.fileTypes}';
|
||||
var fileTableID = '${param.fileTableID}';
|
||||
//初始化fileinput控件（第一次初始化）
|
||||
function initFileInput(ctrlName, uploadUrl) {
|
||||
control = $('#' + ctrlName);
|
||||
control.fileinput({
|
||||
language: 'zh', //设置语言
|
||||
uploadUrl: uploadUrl, //上传的地址
|
||||
uploadAsync: true,
|
||||
allowedFileExtensions : allowedFileExtensions,//接收的文件后缀
|
||||
//allowedFileTypes : allowedFileTypes,//接收的文件类型
|
||||
showUpload: false, //是否显示上传按钮
|
||||
showRemove: false,
|
||||
showCaption: true,//是否显示标题
|
||||
showClose:false,//右上角关闭按钮
|
||||
dropZoneEnabled: false,//是否显示拖拽区域
|
||||
fileActionSettings:{
|
||||
showDrag:false
|
||||
},
|
||||
browseClass: "btn btn-primary", //按钮样式
|
||||
maxFileCount: 10, //表示允许同时上传的最大文件个数
|
||||
enctype: 'multipart/form-data',
|
||||
validateInitialCount:true,
|
||||
previewFileIcon: "<i class='fa fa-file'></i>",
|
||||
preferIconicPreview: true,//是否强制相关文件展示icon
|
||||
initialPreviewAsData: true,
|
||||
previewFileType: ['image', 'html', 'text', 'video', 'audio', 'flash', 'object','other'],
|
||||
previewFileIconSettings: {
|
||||
'doc': '<i class="fa fa-file-word-o" style="color:#3c8dbc;"></i>',
|
||||
'docx': '<i class="fa fa-file-word-o" style="color:#3c8dbc;"></i>',
|
||||
'xls': '<i class="fa fa-file-excel-o" style="color:#00a65a ;"></i>',
|
||||
|
||||
'xlsx': '<i class="fa fa-file-excel-o" style="color:#00a65a ;"></i>',
|
||||
'pptx': '<i class="fa fa-file-powerpoint-o" style="color:#f39c12; "></i>',
|
||||
'ppt': '<i class="fa fa-file-powerpoint-o" style="color:#f39c12; "></i>',
|
||||
//'jpg': '<i class="fa fa-file-image-o" style="color:#00a65a "></i>',
|
||||
'pdf': '<i class="fa fa-file-pdf-o" style="color:#dd4b39 ;"></i>',
|
||||
'zip': '<i class="fa fa-file-zip-o" ></i>',
|
||||
},
|
||||
uploadExtraData:function (previewId, index) { //传参
|
||||
var data = {
|
||||
"masterId": '${masterId}', //此处自定义传参
|
||||
"tbName": '${tbName}',
|
||||
"nameSpace": '${nameSpace}'
|
||||
};
|
||||
return data;
|
||||
},
|
||||
//设置缩略图上的按钮,为空不显示，默认显示
|
||||
layoutTemplates:{
|
||||
// actionDelete:'',
|
||||
actionUpload:''
|
||||
},
|
||||
});
|
||||
/* control.on("filebatchselected", function (event, data, previewId, index) {
|
||||
$(this).fileinput("upload");
|
||||
}); */
|
||||
//导入文件上传完成之后的事件
|
||||
control.on("fileuploaded", function (event, data, previewId, index) {
|
||||
//alert(previewId);
|
||||
if(data.response.suc) {
|
||||
closeModal('fileInputModal');
|
||||
getFileList('${masterId}','${masterId}');
|
||||
}
|
||||
});
|
||||
control.on('fileerror', function(event, data, msg) {
|
||||
getFileList('${masterId}','${masterId}');
|
||||
showAlert('d',msg,'alertFileDiv');
|
||||
});
|
||||
}
|
||||
$(function() {
|
||||
var fileExtensions = '${param.fileExtensions}';
|
||||
if(fileExtensions!= null && fileExtensions!=undefined && fileExtensions!=""){
|
||||
allowedFileExtensions = fileExtensions.split(",");
|
||||
}
|
||||
var fileTypes = '${param.fileTypes}';
|
||||
if(fileTypes!= null && fileTypes!=undefined && fileTypes!=""){
|
||||
allowedFileTypes = fileTypes.split(",");
|
||||
}
|
||||
initFileInput("filelist",ext.contextPath+ "/cityHallShow/inputFile.do");
|
||||
})
|
||||
//导入上传文件的数据
|
||||
function uploadFun(){
|
||||
if($("#filelist").val() == null || $("#filelist").val()==""){
|
||||
showAlert('d','上传的文件不能为空！','alertFileDiv');
|
||||
}else{
|
||||
control.fileinput("upload");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<div class="modal fade" id="fileInputModal">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span></button>
|
||||
<h4 class="modal-title">上传</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<!-- 新增界面formid强制为subForm -->
|
||||
<form class="form-horizontal" id="fileInputModalForm" style="padding:10px">
|
||||
<div id="alertFileDiv"></div>
|
||||
<%-- <input type="hidden" class="form-control" id ="masterId" name ="masterId" value="${masterId}"> --%>
|
||||
<div class="form-group" >
|
||||
<input type="file" name="filelist" id="filelist" multiple class="file-loading" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
|
||||
<button type="button" class="btn btn-primary" onclick="uploadFun()" id="btn_upload"><i class="glyphicon glyphicon-upload"></i>上传</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.modal-content -->
|
||||
</div>
|
||||
<!-- /.modal-dialog -->
|
||||
</div>
|
||||
284
WebRoot/jsp/visual/dataType4Select.jsp
Normal file
284
WebRoot/jsp/visual/dataType4Select.jsp
Normal file
@ -0,0 +1,284 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
||||
<!DOCTYPE html>
|
||||
|
||||
<script type="text/javascript">
|
||||
var doSearchDataType = function () {
|
||||
$("#table_dataType4Select").bootstrapTable('refresh');
|
||||
};
|
||||
function doSelect() {
|
||||
var checkedItems = $("#table_dataType4Select").bootstrapTable('getAllSelections');
|
||||
//console.log("checkedItems",checkedItems);
|
||||
if(checkedItems.length != 0){
|
||||
//console.log(checkedItems[0].id);
|
||||
savePlanLayoutDataTypeFun(checkedItems[0].id);
|
||||
}
|
||||
|
||||
// var datas = "";
|
||||
// datas_name = "";
|
||||
// $.each(selectionIds, function (index, item) {
|
||||
// if (datas != "") {
|
||||
// datas += ",";
|
||||
// }
|
||||
// datas += item;
|
||||
// });
|
||||
// $.post(ext.contextPath + '/user/getUsersByIds.do', { userIds: datas }, function (resp) {
|
||||
// $.each(resp, function (index, item) {
|
||||
// if (datas_name != "") {
|
||||
// datas_name += ",";
|
||||
// }
|
||||
// datas_name += item.caption;
|
||||
// });
|
||||
// $('#${param.formId} #${param.hiddenId}').val(datas);
|
||||
// $('#${param.formId} #${param.textId}').val(datas_name);
|
||||
// closeModal("user4SelectModal")
|
||||
// }, 'json');
|
||||
};
|
||||
|
||||
function savePlanLayoutDataTypeFun(dataTypeId){
|
||||
$.post(ext.contextPath + '/plan/savePlanLayoutDataType.do', { planLayoutId: "${param.planLayoutId}", dataTypeId: dataTypeId }, function (data) {
|
||||
if (data == 1) {
|
||||
showAlert('s', '布局中产线选择配置保存成功','alertDiv_layout');
|
||||
//判断布局table是否存在
|
||||
if(document.getElementById("table_layout")){
|
||||
$("#table_layout").bootstrapTable('refresh');//刷新
|
||||
}
|
||||
closeModal("dataType4SelectModal");
|
||||
} else {
|
||||
showAlert('d', '布局中调用模块配置保存失败','alertDiv_layout');
|
||||
//判断布局table是否存在
|
||||
if(document.getElementById("table_layout")){
|
||||
$("#table_layout").bootstrapTable('refresh');//刷新
|
||||
}
|
||||
closeModal("dataType4SelectModal");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var $table;
|
||||
var switchStatus = false;
|
||||
var selectionIds = []; //保存选中ids
|
||||
function initialSelectionIds() {
|
||||
selectionIds.push('${param.dataTypeId}');
|
||||
}
|
||||
function getCheckedIds() {
|
||||
var ids = "";
|
||||
var check_array = $("#table_dataType4Select").bootstrapTable('getAllSelections');
|
||||
$.each(check_array, function (index, item) {
|
||||
if (ids != "") {
|
||||
ids += ",";
|
||||
}
|
||||
ids += item.id;
|
||||
});
|
||||
return ids;
|
||||
}
|
||||
function queryParams(params) {
|
||||
var temp = {
|
||||
rows: params.limit, // 每页要显示的数据条数
|
||||
page: params.offset / params.limit + 1, // 每页显示数据的开始页码
|
||||
sort: params.sort, // 要排序的字段
|
||||
order: params.order,
|
||||
search_name: $('#search_name').val(),
|
||||
};
|
||||
var status = $('#switchBtn').bootstrapSwitch('state')
|
||||
if (status) {
|
||||
temp.checkedIds = getCheckedIds();
|
||||
}
|
||||
return temp;
|
||||
}
|
||||
$(function () {
|
||||
//jquery html()方法加载，导致box无法执行boxwidget(),手动初始化
|
||||
$('#searchBox').boxWidget();
|
||||
/* $("#search_pid").select2({
|
||||
ajax: {
|
||||
type:'POST',
|
||||
url: ext.contextPath +"/work/group/getListForSelect.do",
|
||||
dataType: 'json',
|
||||
delay: 250,
|
||||
processResults: function (data) {
|
||||
return {
|
||||
results: data
|
||||
}
|
||||
},
|
||||
cache: true
|
||||
},
|
||||
placeholder:'请选择部门',//默认文字提示
|
||||
allowClear: true,//允许清空
|
||||
escapeMarkup: function (markup) { return markup; }, // 自定义格式化防止xss注入
|
||||
language: "zh-CN",
|
||||
minimumInputLength: 0,
|
||||
minimumResultsForSearch: 10,//数据超过十个启用搜索框
|
||||
formatResult: function formatRepo(repo){return repo.text;}, // 函数用来渲染结果
|
||||
formatSelection: function formatRepoSelection(repo){return repo.text;} // 函数用于呈现当前的选择
|
||||
}); */
|
||||
//$("#active").select2({minimumResultsForSearch: 10}).val("${menu.active}").trigger("change");
|
||||
$('#switchBtn').bootstrapSwitch({
|
||||
onText: '是',
|
||||
offText: '否',
|
||||
size: "small",
|
||||
});
|
||||
$(".select2-selection--single").css({ 'height': '30px', 'paddingTop': '4px' });
|
||||
|
||||
initialSelectionIds();
|
||||
|
||||
$table = $("#table_dataType4Select").bootstrapTable({ // 对应table标签的id
|
||||
url: ext.contextPath + '/datatype/getList.do', // 获取表格数据的url
|
||||
//cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
|
||||
//clickToSelect: true,
|
||||
striped: true, //表格显示条纹，默认为false
|
||||
pagination: true, // 在表格底部显示分页组件，默认false
|
||||
pageList: [10, 20], // 设置页面可以显示的数据条数
|
||||
pageSize: 20, // 页面数据条数
|
||||
pageNumber: 1, // 首页页码
|
||||
sidePagination: 'server', // 设置为服务器端分页
|
||||
clickToSelect: true,
|
||||
responseHandler: responseHandler, //在渲染页面数据之前执行的方法，此配置很重要!!!!!!!
|
||||
queryParams: queryParams,
|
||||
queryParamsType: "limit",
|
||||
sortName: 'data_type_name', // 要排序的字段
|
||||
sortOrder: 'asc', // 排序规则
|
||||
singleSelect: true,
|
||||
/* showColumns: true,
|
||||
showRefresh: true, */
|
||||
columns: [
|
||||
{
|
||||
checkbox: true, // 显示一个勾选框
|
||||
//formatter: stateFormatter
|
||||
formatter: function (i, row) { // 每次加载 checkbox 时判断当前 row 的 id 是否已经存在全局 Set() 里
|
||||
console.log("selectionIds",selectionIds);
|
||||
if ($.inArray(row.id, Array.from(selectionIds)) != -1) { // 因为 Set是集合,需要先转换成数组
|
||||
return {
|
||||
checked: true // 存在则选中
|
||||
}
|
||||
}
|
||||
}
|
||||
}, {
|
||||
field: 'dataTypeName', // 返回json数据中的name
|
||||
title: '名称', // 表格表头显示文字
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle', // 上下居中
|
||||
width: "25%"
|
||||
}, {
|
||||
field: 'morder', // 返回json数据中的name
|
||||
title: '顺序', // 表格表头显示文字
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle', // 上下居中
|
||||
width: "25%"
|
||||
}, {
|
||||
field: 'remark', // 返回json数据中的name
|
||||
title: '备注', // 表格表头显示文字
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle', // 上下居中
|
||||
width: "50%"
|
||||
},
|
||||
],
|
||||
onLoadSuccess: function () { //加载成功时执行
|
||||
adjustBootstrapTableView("table_dataType4Select");
|
||||
},
|
||||
onLoadError: function () { //加载失败时执行
|
||||
console.info("加载数据失败");
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
//绑定选中事件、取消事件、全部选中、全部取消
|
||||
$table.on('check.bs.table check-all.bs.table uncheck.bs.table uncheck-all.bs.table', function (e, rows, obj) {
|
||||
if ('check' == e.type) {
|
||||
$('#table_dataType4Select .checked').removeClass("checked");
|
||||
obj.parent().addClass("checked");
|
||||
checkedItem = rows;
|
||||
} else {
|
||||
obj.parent().removeClass("checked");
|
||||
checkedItem = "";
|
||||
}
|
||||
});
|
||||
});
|
||||
//选中事件操作数组
|
||||
var union = function (array, ids) {
|
||||
$.each(ids, function (i, id) {
|
||||
if ($.inArray(id, array) == -1) {
|
||||
array[array.length] = id;
|
||||
}
|
||||
});
|
||||
return array;
|
||||
};
|
||||
//取消选中事件操作数组
|
||||
var difference = function (array, ids) {
|
||||
$.each(ids, function (i, id) {
|
||||
var index = $.inArray(id, array);
|
||||
if (index != -1) {
|
||||
array.splice(index, 1);
|
||||
}
|
||||
});
|
||||
return array;
|
||||
};
|
||||
var _ = { "union": union, "difference": difference };
|
||||
|
||||
//表格分页之前处理多选框数据
|
||||
function responseHandler(res) {
|
||||
$.each(res.rows, function (i, row) {
|
||||
row.checkStatus = $.inArray(row.id, selectionIds) != -1; //判断当前行的数据id是否存在与选中的数组，存在则将多选框状态变为true
|
||||
});
|
||||
return res;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="modal fade" id="dataType4SelectModal">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span></button>
|
||||
<h4 class="modal-title">选择数据类型(产线)</h4>
|
||||
</div>
|
||||
<div class="modal-body " style="width:100%">
|
||||
<div id="alertDiv"></div>
|
||||
|
||||
<div class="box box-primary box-solid collapsed-box" id="searchBox" collapsed>
|
||||
<div class="box-header">
|
||||
<!-- tools box -->
|
||||
<div class="pull-right box-tools">
|
||||
<button type="button" class="btn btn-primary btn-sm pull-right" data-widget="collapse"
|
||||
style="margin-right: 5px;">
|
||||
<i class="fa fa-plus"></i></button>
|
||||
</div>
|
||||
<!-- /. tools -->
|
||||
<i class="fa fa-search"></i>
|
||||
</div>
|
||||
<div class="box-body collapse">
|
||||
<form class="form-horizontal ">
|
||||
<div class="form-group" style="margin-right: 20px;">
|
||||
<label class="col-sm-2 control-label">名称</label>
|
||||
<div class="col-sm-4">
|
||||
<input type="text" id="search_name" name="search_name" class="form-control input-sm" placeholder="名称"
|
||||
style="width:170px;">
|
||||
</div>
|
||||
<label class="col-sm-2 control-label">只看选中</label>
|
||||
<div class="col-sm-4">
|
||||
<div class="switch" data-on="primary" data-off="info">
|
||||
<input id="switchBtn" type="checkbox" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group" style="margin-right: 20px;">
|
||||
|
||||
<div class=" col-sm-offset-6 button-group" style="padding: 0;">
|
||||
<button type="button" class="btn btn-default btn-sm pull-right" onclick="doSearchDataType();"><i
|
||||
class="fa fa-search"> 搜索</i></button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div id="table_dataType4Select" style="height:230px;overflow:auto;width:100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
|
||||
<button type="button" class="btn btn-primary" onclick="doSelect()">确认</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.modal-content -->
|
||||
</div>
|
||||
<!-- /.modal-dialog -->
|
||||
</div>
|
||||
86
WebRoot/jsp/visual/dataTypeAdd.jsp
Normal file
86
WebRoot/jsp/visual/dataTypeAdd.jsp
Normal file
@ -0,0 +1,86 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<style type="text/css">
|
||||
.select2-container .select2-selection--single {
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
}
|
||||
|
||||
.select2-selection__arrow {
|
||||
margin-top: 3px;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
function dosave() {
|
||||
$("#subForm").bootstrapValidator('validate');//提交验证
|
||||
if ($("#subForm").data('bootstrapValidator').isValid()) {//获取验证结果，如果成功，执行下面代码
|
||||
$.post(ext.contextPath + "/datatype/dosave.do", $("#subForm").serialize(), function (data) {
|
||||
if (data.res == 1) {
|
||||
closeModal('subModal')
|
||||
$("#table").bootstrapTable('refresh');
|
||||
} else if (data.res == 0) {
|
||||
showAlert('d', '保存失败');
|
||||
} else {
|
||||
showAlert('d', data.res);
|
||||
}
|
||||
}, 'json');
|
||||
}
|
||||
}
|
||||
$("#subForm").bootstrapValidator({
|
||||
live: 'disabled',//验证时机，enabled是内容有变化就验证（默认），disabled和submitted是提交再验证
|
||||
fields: {
|
||||
dataTypeName: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: '名称不能为空'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
$(function () {
|
||||
|
||||
})
|
||||
</script>
|
||||
<div class="modal fade" id="subModal">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span></button>
|
||||
<h4 class="modal-title">新增交互</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<!-- 新增界面formid强制为subForm -->
|
||||
<form class="form-horizontal" id="subForm" enctype="multipart/form-data">
|
||||
<!-- 界面提醒div强制id为alertDiv -->
|
||||
<div id="alertDiv"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">*名称</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="text" id="dataTypeName" name="dataTypeName" class="form-control" placeholder="名称">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">顺序</label>
|
||||
<div class="col-sm-3">
|
||||
<input type="number" id="morder" name="morder" class="form-control" placeholder="顺序">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">备注</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="text" id="remark" name="remark" class="form-control" placeholder="备注">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
|
||||
<button type="button" class="btn btn-primary" onclick="dosave()">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.modal-content -->
|
||||
</div>
|
||||
<!-- /.modal-dialog -->
|
||||
</div>
|
||||
82
WebRoot/jsp/visual/dataTypeEdit.jsp
Normal file
82
WebRoot/jsp/visual/dataTypeEdit.jsp
Normal file
@ -0,0 +1,82 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function doupdate() {
|
||||
$("#subForm").bootstrapValidator('validate');//提交验证
|
||||
if ($("#subForm").data('bootstrapValidator').isValid()) {//获取验证结果，如果成功，执行下面代码
|
||||
$.post(ext.contextPath + "/datatype/doupdate.do", $("#subForm").serialize(), function (data) {
|
||||
if (data.res == 1) {
|
||||
closeModal('subModal');
|
||||
$("#table").bootstrapTable('refresh');
|
||||
} else if (data.res == 0) {
|
||||
showAlert('d', '更新失败');
|
||||
} else {
|
||||
showAlert('d', data.res);
|
||||
}
|
||||
}, 'json');
|
||||
}
|
||||
}
|
||||
$("#subForm").bootstrapValidator({
|
||||
live: 'disabled',//验证时机，enabled是内容有变化就验证（默认），disabled和submitted是提交再验证
|
||||
fields: {
|
||||
dataTypeName: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: '名称不能为空'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$(function () {
|
||||
|
||||
})
|
||||
</script>
|
||||
<div class="modal fade" id="subModal">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span></button>
|
||||
<h4 class="modal-title">编辑界面</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<!-- 新增界面formid强制为subForm -->
|
||||
<form class="form-horizontal" id="subForm">
|
||||
<div id="alertDiv"></div>
|
||||
<input id="id" name="id" type="hidden" value="${dataType.id}" />
|
||||
<!-- 界面提醒div强制id为alertdiv -->
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">*名称</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="text" id="dataTypeName" name="dataTypeName" class="form-control" placeholder="名称"
|
||||
value="${dataType.dataTypeName}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">顺序</label>
|
||||
<div class="col-sm-3">
|
||||
<input type="text" id="morder" name="morder" class="form-control" placeholder="名称"
|
||||
value="${dataType.morder}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">备注</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="text" id="remark" name="remark" class="form-control"
|
||||
value="${dataType.remark}" placeholder="备注">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
|
||||
<button type="button" class="btn btn-primary" onclick="doupdate()">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.modal-content -->
|
||||
</div>
|
||||
<!-- /.modal-dialog -->
|
||||
</div>
|
||||
186
WebRoot/jsp/visual/dataTypeList.jsp
Normal file
186
WebRoot/jsp/visual/dataTypeList.jsp
Normal file
@ -0,0 +1,186 @@
|
||||
<%@page import="com.sipai.entity.maintenance.Maintenance"%>
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<title><%= ServerObject.atttable.get("TOPTITLE")%></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<script type="text/javascript">
|
||||
var addFun = function () {
|
||||
$.post(ext.contextPath + '/datatype/doadd.do', {}, function (data) {
|
||||
$("#subDiv").html(data);
|
||||
openModal('subModal');
|
||||
});
|
||||
};
|
||||
var editFun = function (id) {
|
||||
$.post(ext.contextPath + '/datatype/doedit.do', { id: id }, function (data) {
|
||||
$("#subDiv").html(data);
|
||||
openModal('subModal');
|
||||
});
|
||||
};
|
||||
var deleteFun = function (id) {
|
||||
swal({
|
||||
text: "您确定要删除此记录？",
|
||||
dangerMode: true,
|
||||
buttons: {
|
||||
cancel: {
|
||||
text: "取消",
|
||||
value: null,
|
||||
visible: true,
|
||||
className: "btn btn-default btn-sm",
|
||||
closeModal: true,
|
||||
},
|
||||
confirm: {
|
||||
text: "确定",
|
||||
value: true,
|
||||
visible: true,
|
||||
className: "btn btn-danger btn-sm",
|
||||
closeModal: true
|
||||
}
|
||||
}
|
||||
})
|
||||
.then(function (willDelete) {
|
||||
if (willDelete) {
|
||||
$.post(ext.contextPath + '/datatype/dodelete.do', { id: id }, function (data) {
|
||||
if (data == 1) {
|
||||
$("#table").bootstrapTable('refresh');
|
||||
} else {
|
||||
showAlert('d', '删除失败', 'mainAlertdiv');
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
var dosearch = function () {
|
||||
$("#table").bootstrapTable('refresh');
|
||||
};
|
||||
var initFun = function () {
|
||||
$("#table").bootstrapTable({ // 对应table标签的id
|
||||
url: ext.contextPath + '/datatype/getList.do', // 获取表格数据的url
|
||||
cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
|
||||
striped: true, //表格显示条纹，默认为false
|
||||
pagination: true, // 在表格底部显示分页组件，默认false
|
||||
pageList: [10, 20, 50], // 设置页面可以显示的数据条数
|
||||
pageSize: 10, // 页面数据条数
|
||||
pageNumber: 1, // 首页页码
|
||||
sidePagination: 'server', // 设置为服务器端分页
|
||||
//showFooter: true,//添加页脚
|
||||
queryParams: function (params) { // 请求服务器数据时发送的参数，可以在这里添加额外的查询参数，返回false则终止请求
|
||||
return {
|
||||
rows: params.limit, // 每页要显示的数据条数
|
||||
page: params.offset / params.limit + 1, // 每页显示数据的开始页码
|
||||
sort: params.sort, // 要排序的字段
|
||||
order: params.order,
|
||||
search_name: $('#search_name').val(),
|
||||
}
|
||||
},
|
||||
sortName: 'data_type_name', // 要排序的字段
|
||||
sortOrder: 'asc', // 排序规则
|
||||
columns: [
|
||||
/* {
|
||||
checkbox: true, // 显示一个勾选框
|
||||
}, */{
|
||||
field: 'dataTypeName', // 返回json数据中的name
|
||||
title: '名称', // 表格表头显示文字
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle' // 上下居中
|
||||
}, {
|
||||
field: 'morder', // 返回json数据中的name
|
||||
title: '顺序', // 表格表头显示文字
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle' // 上下居中
|
||||
}, {
|
||||
field: 'remark', // 返回json数据中的name
|
||||
title: '备注', // 表格表头显示文字
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle' // 上下居中
|
||||
},{
|
||||
title: "操作",
|
||||
align: 'center',
|
||||
valign: 'middle',
|
||||
width: 120, // 定义列的宽度，单位为像素px
|
||||
formatter: function (value, row, index) {
|
||||
var buts = '';
|
||||
buts += '<button class="btn btn-default btn-sm" onclick="editFun(\'' + row.id + '\')" data-toggle="tooltip" title="编辑"><i class="fa fa-edit "></i><span class="hidden-md hidden-lg"> 编辑</span></button>';
|
||||
buts += '<button class="btn btn-default btn-sm" onclick="deleteFun(\'' + row.id + '\')" data-toggle="tooltip" title="删除"><i class="fa fa-trash-o "></i><span class="hidden-md hidden-lg"> 删除</span></button>';
|
||||
buts = '<div class = "btn-group">' + buts + '</div>';
|
||||
return buts;
|
||||
}
|
||||
}
|
||||
],
|
||||
//注册加载子表的事件。index：父表当前行的行索引,row：父表当前行的Json数据对象,$detail：当前行下面创建的新行里面的td对象。
|
||||
onLoadSuccess: function () { //加载成功时执行
|
||||
adjustBootstrapTableView("table");
|
||||
},
|
||||
onLoadError: function () { //加载失败时执行
|
||||
console.info("加载数据失败");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$(function () {
|
||||
initFun();
|
||||
});
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body onload="initMenu()" class="hold-transition ${cu.themeclass} sidebar-mini">
|
||||
<div class="wrapper">
|
||||
<div class="content-wrapper">
|
||||
<!-- Content Header (Page header) -->
|
||||
<section class="content-header">
|
||||
<h1 id="head_title"></h1>
|
||||
<ol class="breadcrumb">
|
||||
<li><a id='head_firstlevel' href="#"><i class="fa fa-dashboard"></i> </a></li>
|
||||
<!-- <li class="active">Here</li> -->
|
||||
</ol>
|
||||
</section>
|
||||
<!-- Main content -->
|
||||
<section class="content container-fluid">
|
||||
<div id="mainAlertdiv"></div>
|
||||
<div id="subDiv"></div>
|
||||
<div>
|
||||
<form id="searchForm">
|
||||
<div class="form-group form-inline" style="padding:0;">
|
||||
<div class="form-group pull-right">
|
||||
<div class="input-group input-group-sm" style="width: 250px;">
|
||||
<input type="text" id="search_name" name="search_name"
|
||||
class="form-control pull-right" placeholder="名称">
|
||||
<div class="input-group-btn">
|
||||
<button class="btn btn-default" onclick="dosearch();"><i
|
||||
class="fa fa-search"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="btn-group" style="width: 220px;padding-bottom:10px;">
|
||||
<button type="button" class="btn btn-default btn-sm" onclick="addFun();"><i
|
||||
class="fa fa-plus"></i> 新增</button>
|
||||
|
||||
<!-- <button type="button" class="btn btn-default btn-sm" onclick="deletesFun();"><i
|
||||
class="fa fa-trash-o"></i> 删除</button> -->
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<table id="table"></table>
|
||||
</div>
|
||||
</section>
|
||||
<!-- /.content -->
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
1870
WebRoot/jsp/visual/evaluate_homepage.jsp
Normal file
1870
WebRoot/jsp/visual/evaluate_homepage.jsp
Normal file
File diff suppressed because it is too large
Load Diff
1677
WebRoot/jsp/visual/evaluate_instructions.jsp
Normal file
1677
WebRoot/jsp/visual/evaluate_instructions.jsp
Normal file
File diff suppressed because it is too large
Load Diff
1540
WebRoot/jsp/visual/expo_homepage.jsp
Normal file
1540
WebRoot/jsp/visual/expo_homepage.jsp
Normal file
File diff suppressed because it is too large
Load Diff
928
WebRoot/jsp/visual/expo_top.jsp
Normal file
928
WebRoot/jsp/visual/expo_top.jsp
Normal file
@ -0,0 +1,928 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" />
|
||||
<title>
|
||||
<%= ServerObject.atttable.get("TOPTITLE")%>
|
||||
</title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<style type="text/css">
|
||||
.whole-body{
|
||||
width: 1920px;
|
||||
height: 140px;
|
||||
}
|
||||
.content-wrapper-bg{
|
||||
background-repeat:no-repeat;
|
||||
background-position:center center;
|
||||
}
|
||||
.content-wrapper-bg-darkblue{
|
||||
background-image: url(<%=request.getContextPath()%>/IMG/expo/bg.png);
|
||||
}
|
||||
.content-wrapper-bg-main{
|
||||
/*background-image: url(<%=request.getContextPath()%>/IMG/expo/main_bg.png);*/
|
||||
}
|
||||
.whole-element,.left-equ-number{
|
||||
position: absolute;
|
||||
}
|
||||
.top-title{
|
||||
top: 22px;
|
||||
left: 53px;
|
||||
font-size: 40px;
|
||||
color: #ffffff;
|
||||
}
|
||||
.top-weather{
|
||||
top: 12px;
|
||||
right: 3px;
|
||||
color: #ffffff;
|
||||
}
|
||||
.top-weather-element{
|
||||
float: left;
|
||||
padding:0;
|
||||
height: 80px;
|
||||
}
|
||||
.top-menu{
|
||||
width: 196px;
|
||||
height: 42px;
|
||||
background-size: 100% 100%;
|
||||
background-repeat:no-repeat;
|
||||
background-position:center center;
|
||||
background-image: url(<%=request.getContextPath()%>/IMG/expo/top_menu.png);
|
||||
cursor: pointer;
|
||||
top: 91.5px;
|
||||
left: 26.5px;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
text-align: left;
|
||||
color: #baf6ff;
|
||||
line-height: 28px;
|
||||
padding-top: 9px;
|
||||
padding-left: 39px;
|
||||
}
|
||||
.top-menu-list{
|
||||
width: 190px;
|
||||
top: 138px;
|
||||
left: 30px;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
text-align: left;
|
||||
color: #baf6ff;
|
||||
display: none;
|
||||
background-size: 100% 100%;
|
||||
background-repeat:no-repeat;
|
||||
background-position:center center;
|
||||
background-image: url(<%=request.getContextPath()%>/IMG/expo/u5.svg);
|
||||
z-index: 10;
|
||||
}
|
||||
.top-menu-list-option{
|
||||
height: 44px;
|
||||
line-height: 2.5;
|
||||
padding-left: 35px;
|
||||
}
|
||||
.whole-left{
|
||||
top: 200px;
|
||||
left: 30px;
|
||||
}
|
||||
.left-equ{
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
background-size: 100% 100%;
|
||||
background-repeat:no-repeat;
|
||||
background-position:center center;
|
||||
margin-bottom: 7px;
|
||||
position: relative;
|
||||
}
|
||||
.left-equ-qdkqc{
|
||||
background-image: url(<%=request.getContextPath()%>/IMG/expo/equ_qdkqc.png);
|
||||
}
|
||||
.left-equ-czfj{
|
||||
background-image: url(<%=request.getContextPath()%>/IMG/expo/equ_czfj.png);
|
||||
}
|
||||
.left-equ-gylw{
|
||||
background-image: url(<%=request.getContextPath()%>/IMG/expo/equ_gylw.png);
|
||||
}
|
||||
.left-equ-mqby{
|
||||
background-image: url(<%=request.getContextPath()%>/IMG/expo/equ_mqby.png);
|
||||
}
|
||||
.left-equ-mqddc{
|
||||
background-image: url(<%=request.getContextPath()%>/IMG/expo/equ_mqddc.png);
|
||||
}
|
||||
.left-equ-srq{
|
||||
background-image: url(<%=request.getContextPath()%>/IMG/expo/equ_srq.png);
|
||||
}
|
||||
.left-equ-xhfj{
|
||||
background-image: url(<%=request.getContextPath()%>/IMG/expo/equ_xhfj.png);
|
||||
}
|
||||
.left-equ-zyl{
|
||||
background-image: url(<%=request.getContextPath()%>/IMG/expo/equ_zyl.png);
|
||||
}
|
||||
.left-equ-open{
|
||||
top: 33px;
|
||||
left: 80px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
.left-equ-close{
|
||||
top: 33px;
|
||||
left: 135px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
.left-equ-all{
|
||||
top: 72px;
|
||||
left: 94px;
|
||||
}
|
||||
.opacity-7{
|
||||
opacity: 0.7;
|
||||
}
|
||||
.p1-data{
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
top: 497px;
|
||||
left: 375px;
|
||||
}
|
||||
.p1-data-element{
|
||||
width: 120px;
|
||||
height: 40px;
|
||||
}
|
||||
.now-people-number-element{
|
||||
top: 50px;
|
||||
left: 25px;
|
||||
}
|
||||
.max-bear-capacity-element{
|
||||
top: 50px;
|
||||
left: 155px;
|
||||
}
|
||||
.p1-temperature{
|
||||
top: 210px;
|
||||
left: 20px;
|
||||
}
|
||||
.p1-humidity{
|
||||
top: 210px;
|
||||
left: 160px;
|
||||
}
|
||||
.p-data{
|
||||
width: 500px;
|
||||
height: 315px;
|
||||
}
|
||||
.p2-data{
|
||||
top: 125px;
|
||||
left: 275px;
|
||||
}
|
||||
.p3-data{
|
||||
top: 125px;
|
||||
left: 795px;
|
||||
}
|
||||
.p4-data{
|
||||
top: 125px;
|
||||
left: 1318px;
|
||||
}
|
||||
.p-data-title{
|
||||
width: 500px;
|
||||
height: 60px;
|
||||
}
|
||||
.p-data-pie{
|
||||
width: 500px;
|
||||
height: 105px;
|
||||
position: relative;
|
||||
}
|
||||
.p-data-pie-number{
|
||||
width: 80px;
|
||||
height: 28px;
|
||||
text-align: center;
|
||||
}
|
||||
.p-data-pie-number-top{
|
||||
top: 28px;
|
||||
}
|
||||
.p2-temperature,.p3-temperature,.p4-temperature{
|
||||
left: 40px;
|
||||
}
|
||||
.p2-humidity,.p3-humidity,.p4-humidity{
|
||||
left: 153px;
|
||||
}
|
||||
.p2-co2,.p3-co2,.p4-co2{
|
||||
left: 265px;
|
||||
}
|
||||
.p2-windSpeed,.p3-windSpeed,.p4-windSpeed{
|
||||
left: 379px;
|
||||
}
|
||||
.p-data-line{
|
||||
width: 500px;
|
||||
height: 150px;
|
||||
}
|
||||
.p-url{
|
||||
width: 155px;
|
||||
height: 40px;
|
||||
}
|
||||
.p2-url{
|
||||
top: 430px;
|
||||
left: 790px;
|
||||
}
|
||||
.p3-url{
|
||||
top: 385px;
|
||||
left: 1180px;
|
||||
}
|
||||
.p4-url{
|
||||
top: 595px;
|
||||
left: 1510px;
|
||||
}
|
||||
.content-left, .content-right{
|
||||
float: left;
|
||||
padding:0;
|
||||
}
|
||||
.content-left{
|
||||
width: 810px;
|
||||
}
|
||||
.content-right{
|
||||
width: 2380px;
|
||||
}
|
||||
.content-right-subject{
|
||||
min-height: 215px;
|
||||
}
|
||||
.content-bg-darkblue{
|
||||
background: rgba(12,12,12,0.60);
|
||||
}
|
||||
.homePage-btn{
|
||||
cursor:pointer;
|
||||
background: rgba(54,167,204,0.70);
|
||||
border-radius: 10px;
|
||||
}
|
||||
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9,
|
||||
.col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9,
|
||||
.col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9,
|
||||
.col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9,
|
||||
.col-xs-1-5 {
|
||||
padding-right: 5px;
|
||||
padding-left: 5px
|
||||
}
|
||||
.col-xs-1-5 {
|
||||
width: 12%;
|
||||
}
|
||||
.col-xs-1-5{
|
||||
float: left;
|
||||
}
|
||||
.col-xs-1-5 {
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
}
|
||||
.title-height{
|
||||
height:70px;
|
||||
}
|
||||
.row-10{
|
||||
height:10%;
|
||||
}
|
||||
.row-15{
|
||||
height:15%;
|
||||
}
|
||||
.row-25{
|
||||
height:25%;
|
||||
}
|
||||
.row-30{
|
||||
height:30%;
|
||||
}
|
||||
.row-35{
|
||||
height:35%;
|
||||
}
|
||||
.row-40{
|
||||
height:40%;
|
||||
}
|
||||
.row-50{
|
||||
height:50%;
|
||||
}
|
||||
.row-70{
|
||||
height:70%;
|
||||
}
|
||||
.row-75{
|
||||
height:75%;
|
||||
}
|
||||
.row-100{
|
||||
height:100%;
|
||||
}
|
||||
.content-wrapper-bg-grey{
|
||||
background: #eeeeee;
|
||||
}
|
||||
.content-wrapper-bg-white,.bgcolor-white,.bgcolor-white-light{
|
||||
background: #ffffff;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.content-wrapper-bg-white,.content-wrapper-bg-transparent{
|
||||
margin:0 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.bgcolor-blue{
|
||||
background: #052941;
|
||||
}
|
||||
|
||||
.margin-bottom-15{
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.margin-bottom-22{
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
.margin-bottom-25{
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.margin-bottom-36{
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
.margin-bottom-55{
|
||||
margin-bottom: 55px;
|
||||
}
|
||||
.margin-bottom-75{
|
||||
margin-bottom: 75px;
|
||||
}
|
||||
.padding-topbottom-35{
|
||||
padding-top: 35px;
|
||||
padding-bottom: 35px;
|
||||
}
|
||||
.pad-topbottom-60{
|
||||
padding-top: 60px;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
.padding-leftright-15{
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
.padding-left-20{
|
||||
padding-left: 20px;
|
||||
}
|
||||
.pad-leftright-72{
|
||||
padding-left: 72px;
|
||||
padding-right: 72px;
|
||||
}
|
||||
.pad-bottom-10{
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.padding-top-5{
|
||||
padding-top:5px;
|
||||
}
|
||||
.padding-top-10{
|
||||
padding-top: 10px;
|
||||
}
|
||||
.padding-top-15{
|
||||
padding-top: 15px;
|
||||
}
|
||||
.padding-top-27{
|
||||
padding-top: 27px;
|
||||
}
|
||||
.padding-top-90{
|
||||
padding-top: 90px;
|
||||
}
|
||||
.line-height-08{
|
||||
line-height: 0.8;
|
||||
}
|
||||
.line-height-1{
|
||||
line-height: 1;
|
||||
}
|
||||
.line-height-2{
|
||||
line-height: 2;
|
||||
}
|
||||
.line-height-2-3{
|
||||
line-height: 2.3;
|
||||
}
|
||||
.line-height-3{
|
||||
line-height: 3;
|
||||
}
|
||||
.line-height-5{
|
||||
line-height: 5;
|
||||
}
|
||||
.line-height-6{
|
||||
line-height: 6;
|
||||
}
|
||||
.font-size-12{
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
}
|
||||
.font-size-14{
|
||||
font-size: 14px;
|
||||
line-height: inherit;
|
||||
}
|
||||
.font-size-16{
|
||||
font-size: 16px;
|
||||
}
|
||||
.font-size-18{
|
||||
font-size: 18px;
|
||||
}
|
||||
.font-size-20{
|
||||
font-size: 20px;
|
||||
}
|
||||
.font-size-22{
|
||||
font-size: 22px;
|
||||
}
|
||||
.font-size-28{
|
||||
font-size: 28px;
|
||||
}
|
||||
.font-size-30{
|
||||
font-size: 30px;
|
||||
}
|
||||
.font-size-35{
|
||||
font-size: 35px;
|
||||
}
|
||||
.font-size-36{
|
||||
font-size: 36px;
|
||||
}
|
||||
.font-size-40{
|
||||
font-size: 40px;
|
||||
}
|
||||
.font-size-50{
|
||||
font-size: 50px;
|
||||
}
|
||||
.font-size-60{
|
||||
font-size: 60px;
|
||||
}
|
||||
.font-size-65{
|
||||
font-size: 65px;
|
||||
}
|
||||
.font-size-70{
|
||||
font-size: 70px;
|
||||
}
|
||||
.font-color-white,.font-color-dark-white{
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.font-color-black{
|
||||
color: #0d2336;
|
||||
font-weight: 600;
|
||||
}
|
||||
.font-color-red{
|
||||
color: #CF0C0C;
|
||||
}
|
||||
.font-color-yellow{
|
||||
color: #FFF700;
|
||||
}
|
||||
.font-color-redlight{
|
||||
color: #CE00FF
|
||||
}
|
||||
.font-color-blue,.font-color-dark-blue{
|
||||
color: #1472FF;
|
||||
}
|
||||
.font-color-lightBlue,.font-color-light-blue{
|
||||
color: #00D2FF;
|
||||
}
|
||||
.font-color-green{
|
||||
color: #00EC1F;
|
||||
}
|
||||
.border-left{
|
||||
border-left: 1px solid #c1c1c1;
|
||||
}
|
||||
.border-right{
|
||||
border-right: 2px solid #ffffff;
|
||||
}
|
||||
.border-bottom{
|
||||
border-bottom: 1px solid #c1c1c1;
|
||||
}
|
||||
.border-leftAndRight{
|
||||
border-left: 1px solid #c1c1c1;border-right: 1px solid #c1c1c1;
|
||||
}
|
||||
.bgcolor-blue-light{
|
||||
background: #192B73;
|
||||
}
|
||||
.bgcolor-transparent{
|
||||
background: transparent;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.img-icon{
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
}
|
||||
.img-pump{
|
||||
width: 60px;
|
||||
height: 97px;
|
||||
}
|
||||
.progress_bar{
|
||||
min-width: 630px;
|
||||
height: 25px;
|
||||
}
|
||||
.polarBarLegend{
|
||||
width: 360px;
|
||||
height: 200px;
|
||||
position: fixed;
|
||||
}
|
||||
.polarBar{
|
||||
min-width: 630px;
|
||||
height: 450px;
|
||||
}
|
||||
.cursor-pointer{
|
||||
cursor: pointer;
|
||||
}
|
||||
.pressure-line{
|
||||
width: 1180px;
|
||||
height: 560px;
|
||||
}
|
||||
.rawwater-line{
|
||||
width: 2360px;
|
||||
height: 560px;
|
||||
}
|
||||
.instructions-line{
|
||||
width: 2360px;
|
||||
height: 355px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
var fontcolor_grey = '#aeaeae';
|
||||
var fontcolor_black = '#0d2336';
|
||||
var color_blue = '#36FFF9';
|
||||
var color_blue_other = '#1D4F6D';
|
||||
var img_name = '';
|
||||
|
||||
var color = ['#649DFF','#64FFFA','#ff2ee3','#2e97ff','#ffb536'];
|
||||
$(function () {
|
||||
$('.top-menu-list').hide();
|
||||
$(".top-menu").on("click", function (e) {
|
||||
$(".top-menu-list").toggle();
|
||||
});
|
||||
});
|
||||
|
||||
function addAndRemove4Class(one,two){
|
||||
$('.'+one).addClass(two);
|
||||
$('.'+one).removeClass(one);
|
||||
}
|
||||
function getData(){
|
||||
var bizid = "";
|
||||
var jsp_id = $('#jsp_id').val();
|
||||
var time_input = $('#time_input').val();
|
||||
$.post(ext.contextPath + '/expo/getEvaluateData.do', {bizid:bizid,time:time_input,jsp_id:jsp_id} , function(data) {
|
||||
var arr= JSON.parse(data);
|
||||
console.log(arr);
|
||||
var pressure_cumulative_seriesdata = [];
|
||||
var pressure_actual_seriesdata = [];
|
||||
var reservoir_lvl_seriesdata = [];
|
||||
var reservoir_pump_seriesdata = [];
|
||||
var rawwater_water_seriesdata = [];
|
||||
var pressure_dispatch_seriesdata = [];
|
||||
var instructions_line_seriesdata = [];
|
||||
var production_load_rate = null;
|
||||
var automatic_execution_rate = null;
|
||||
|
||||
var cumulative_times_today = 0;
|
||||
var automatic_execution_times = 0;
|
||||
|
||||
if(arr.rows!=null && arr.rows!=undefined && arr.rows!=''){
|
||||
for(var i=0;i<arr.rows.length;i++){
|
||||
var value =0;
|
||||
var numtail=0;
|
||||
var dataMax=0;
|
||||
var rate = 1;
|
||||
var nowdate = getNowTime();
|
||||
if(arr.rows[i].visualCacheConfig!=null
|
||||
&& arr.rows[i].visualCacheConfig!=undefined
|
||||
&& arr.rows[i].visualCacheConfig!=''){
|
||||
var visualCacheConfig = arr.rows[i].visualCacheConfig;
|
||||
if(visualCacheConfig.numtail!=null && visualCacheConfig.numtail!=undefined && visualCacheConfig.numtail!=''){
|
||||
numtail = visualCacheConfig.numtail;
|
||||
}
|
||||
}
|
||||
if(arr.rows[i].visualCacheData!=null
|
||||
&& arr.rows[i].visualCacheData!=undefined
|
||||
&& arr.rows[i].visualCacheData!=''){
|
||||
var visualCacheData = arr.rows[i].visualCacheData;
|
||||
if(visualCacheData.inivalue!=null && visualCacheData.inivalue!=undefined && visualCacheData.inivalue!=''){
|
||||
value = visualCacheData.inivalue;
|
||||
}else{
|
||||
if(visualCacheData.value!=null && visualCacheData.value!=undefined && visualCacheData.value!=''){
|
||||
value = visualCacheData.value;
|
||||
}else{
|
||||
if(arr.rows[i].mPoint!=null && arr.rows[i].mPoint!=undefined && arr.rows[i].mPoint!=''){
|
||||
var mPoint = arr.rows[i].mPoint;
|
||||
if(mPoint.parmvalue!=null && mPoint.parmvalue!=undefined && mPoint.parmvalue!=''){
|
||||
value = mPoint.parmvalue;
|
||||
}
|
||||
if(mPoint.alarmmax!=null && mPoint.alarmmax!=undefined && mPoint.alarmmax!=''){
|
||||
dataMax = mPoint.alarmmax;
|
||||
}
|
||||
if(mPoint.numtail!=null && mPoint.numtail!=undefined && mPoint.numtail!=''){
|
||||
numtail = mPoint.numtail;
|
||||
}
|
||||
if(mPoint.measuredt!=null && mPoint.measuredt!=undefined && mPoint.measuredt!=''){
|
||||
nowdate = mPoint.measuredt;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if(visualCacheData.numtail!=null && visualCacheData.numtail!=undefined && visualCacheData.numtail!=''){
|
||||
numtail = visualCacheData.numtail;
|
||||
}
|
||||
if(visualCacheData.insdt!=null && visualCacheData.insdt!=undefined && visualCacheData.insdt!=''){
|
||||
nowdate = visualCacheData.insdt;
|
||||
}
|
||||
if(visualCacheData.rate!=null && visualCacheData.rate!=undefined && visualCacheData.rate!=''){
|
||||
rate = visualCacheData.rate;
|
||||
}
|
||||
}else{
|
||||
var mPoint = arr.rows[i].mPoint;
|
||||
if(mPoint!=null && mPoint!=undefined && mPoint!=''){
|
||||
if(mPoint.parmvalue!=null && mPoint.parmvalue!=undefined && mPoint.parmvalue!=''){
|
||||
value = mPoint.parmvalue;
|
||||
}
|
||||
if(mPoint.alarmmax!=null && mPoint.alarmmax!=undefined && mPoint.alarmmax!=''){
|
||||
dataMax = mPoint.alarmmax;
|
||||
}
|
||||
if(mPoint.numtail!=null && mPoint.numtail!=undefined && mPoint.numtail!=''){
|
||||
numtail = mPoint.numtail;
|
||||
}
|
||||
if(mPoint.measuredt!=null && mPoint.measuredt!=undefined && mPoint.measuredt!=''){
|
||||
nowdate = mPoint.measuredt;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if($("."+arr.rows[i].elementCode+"_img").length > 0){
|
||||
var src = "<%=request.getContextPath()%>/IMG/expo/pump_grey.png";
|
||||
if(value==0){
|
||||
src = "<%=request.getContextPath()%>/IMG/expo/pump_green.png";
|
||||
}
|
||||
if(value==1){
|
||||
src = "<%=request.getContextPath()%>/IMG/expo/pump_red.png";
|
||||
}
|
||||
$("."+arr.rows[i].elementCode+"_img").html('<img class="img-pump" src='+src+'>');
|
||||
}
|
||||
if($("."+arr.rows[i].elementCode+"_text").length > 0){
|
||||
var text = "";
|
||||
if(value==1){
|
||||
text = "运行";
|
||||
}else{
|
||||
text = "检修";
|
||||
}
|
||||
$("."+arr.rows[i].elementCode+"_text").html(text);
|
||||
}
|
||||
value = parseFloat(value)*rate;
|
||||
value = value.toFixed(numtail);
|
||||
if($("."+arr.rows[i].elementCode).length > 0){
|
||||
$("."+arr.rows[i].elementCode).html(toThousands(value));
|
||||
}
|
||||
if($("."+arr.rows[i].elementCode).parent().find('.nowdate').length > 0){
|
||||
$("."+arr.rows[i].elementCode).parent().find('.nowdate').html(nowdate.substring(11,16));
|
||||
}
|
||||
|
||||
if(arr.rows[i].elementCode=='cumulative_times_today'){
|
||||
instructions_line_seriesdata = getdataseries(arr.rows[i].mPointHistory,arr.rows[i].visualCacheDataList,numtail);
|
||||
cumulative_times_today = value;
|
||||
}
|
||||
|
||||
if(arr.rows[i].elementCode=='automatic_execution_times'){
|
||||
automatic_execution_times = value;
|
||||
}
|
||||
if(arr.rows[i].elementCode=='pressure_cumulative'){
|
||||
pressure_cumulative_seriesdata = getdataseries(arr.rows[i].mPointHistory,arr.rows[i].visualCacheDataList,numtail);
|
||||
}
|
||||
if(arr.rows[i].elementCode=='pressure_actual'){
|
||||
pressure_actual_seriesdata = getdataseries(arr.rows[i].mPointHistory,arr.rows[i].visualCacheDataList,numtail);
|
||||
}
|
||||
if(arr.rows[i].elementCode=='reservoir_lvl'){
|
||||
reservoir_lvl_seriesdata = getdataseries(arr.rows[i].mPointHistory,arr.rows[i].visualCacheDataList,numtail);
|
||||
}
|
||||
if(arr.rows[i].elementCode=='reservoir_pump'){
|
||||
reservoir_pump_seriesdata = getdataseries(arr.rows[i].mPointHistory,arr.rows[i].visualCacheDataList,numtail);
|
||||
}
|
||||
if(arr.rows[i].elementCode=='rawwater_water'){
|
||||
rawwater_water_seriesdata = getdataseries(arr.rows[i].mPointHistory,arr.rows[i].visualCacheDataList,numtail);
|
||||
}
|
||||
if(arr.rows[i].elementCode=='pressure_dispatch'){
|
||||
pressure_dispatch_seriesdata = getdataseries(arr.rows[i].mPointHistory,arr.rows[i].visualCacheDataList,numtail);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
var pressure_cumulative_legenddata = ['累计压力调整'];
|
||||
var seriesdata = [
|
||||
{
|
||||
name: pressure_cumulative_legenddata[0],
|
||||
type: 'line',
|
||||
data: pressure_cumulative_seriesdata
|
||||
}
|
||||
]
|
||||
if(pressure_cumulative_seriesdata!=null && pressure_cumulative_seriesdata.length>0){
|
||||
echarts_line('pressure-cumulative',pressure_cumulative_legenddata,seriesdata,'累计压力调整');
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
function getdataseries(mPointHistory,visualCacheDataList,numtail){
|
||||
var dataseries =[];
|
||||
if(mPointHistory!=null
|
||||
&& mPointHistory!=undefined
|
||||
&& mPointHistory!=''){
|
||||
var mPointHistory = mPointHistory;
|
||||
for(var m=0;m<mPointHistory.length;m++){
|
||||
var dataserie =[];
|
||||
dataserie.push(mPointHistory[m].measuredt.substr(0,16));
|
||||
dataserie.push(mPointHistory[m].parmvalue.toFixed(numtail));
|
||||
dataseries.push(dataserie);
|
||||
}
|
||||
}else{
|
||||
if(visualCacheDataList!=null
|
||||
&& visualCacheDataList!=undefined
|
||||
&& visualCacheDataList!=''){
|
||||
var visualCacheDataList = visualCacheDataList;
|
||||
for(var m=0;m<visualCacheDataList.length;m++){
|
||||
var dataserie =[];
|
||||
dataserie.push(visualCacheDataList[m].insdt.substr(0,16));
|
||||
dataserie.push(visualCacheDataList[m].value.toFixed(numtail));
|
||||
dataseries.push(dataserie);
|
||||
}
|
||||
}
|
||||
}
|
||||
return dataseries;
|
||||
}
|
||||
function echarts_line(id,seriesdata1,seriesdata2){
|
||||
var lifeChart = echarts.getInstanceByDom(document.getElementById(id));
|
||||
//有的话就获取已有echarts实例的DOM节点。
|
||||
if (lifeChart != null) { // 如果存在，就进行销毁。
|
||||
lifeChart.dispose();
|
||||
}
|
||||
var option = {
|
||||
color:['#00FFDD','#D6FF00'],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
|
||||
legend: {
|
||||
data: ['场馆温度', '室外温度'],
|
||||
right: '5%',
|
||||
icon: 'circle',
|
||||
textStyle: {
|
||||
color: '#70AFD8' ,
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
top: '28',
|
||||
bottom: '5%',
|
||||
show: true ,
|
||||
backgroundColor: 'rgba(24,45,95,0.7)',
|
||||
borderColor: '#1D5179' ,
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type : 'category',
|
||||
boundaryGap: false,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#1D5179'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false ,
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#70AFD8' ,
|
||||
formatter: function (value, index) {
|
||||
if(value.length>15){
|
||||
return value.substring(11,16);
|
||||
}else{
|
||||
return value;
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitNumber: 3,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#1D5179'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#70AFD8' ,
|
||||
},
|
||||
//网格样式
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle:{
|
||||
color: '#1D5179',
|
||||
width: 1,
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '室外温度',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
data: seriesdata1,
|
||||
},
|
||||
{
|
||||
name: '场馆温度',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
data: seriesdata2,
|
||||
areaStyle: {
|
||||
// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 1,
|
||||
x2: 0,
|
||||
y2: 0,
|
||||
colorStops: [{
|
||||
offset: 0, color: 'rgba(255,255,255,0)' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1, color: 'rgba(214,255,0,0.7)' // 100% 处的颜色
|
||||
}],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
]
|
||||
};
|
||||
lifeChart = echarts.init(document.getElementById(id));
|
||||
lifeChart.setOption(option,true);
|
||||
}
|
||||
function homePage() {
|
||||
$('.jump-area').hide();
|
||||
$('.sub-region').hide();
|
||||
$('.homePage').show();
|
||||
}
|
||||
function jumpArea(el) {
|
||||
$('.homePage').hide();
|
||||
$('.sub-region').hide();
|
||||
$('.jump-area').show();
|
||||
$('.'+el).show();
|
||||
}
|
||||
//添加千分位符合
|
||||
function toThousands(num) {
|
||||
var nums =num;
|
||||
var re=/\d{1,3}(?=(\d{3})+$)/g;
|
||||
var n1=0;
|
||||
if(nums!=null && nums!='' && nums!=undefined){
|
||||
n1=nums.toString().replace(/^(\d+)((\.\d+)?)$/,function(s,s1,s2){return s1.replace(re,"$&,")+s2;});
|
||||
}
|
||||
return n1;
|
||||
}
|
||||
|
||||
var locationhref = function (url) {
|
||||
window.location.href = ext.contextPath + url;
|
||||
}
|
||||
var locationhref = function (url) {
|
||||
window.opener.location.href = ext.contextPath + url;
|
||||
}
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="whole-body content-wrapper-bg content-wrapper-bg-darkblue">
|
||||
<!-- BEGIN CONTAINER -->
|
||||
<input type="hidden" name="jsp_id" id="jsp_id" value="expo_top">
|
||||
<div class="whole-body content-wrapper-bg content-wrapper-bg-main text-center font-size-36 font-color-white">
|
||||
<div class="whole-element top-title">世博文化公园展览温室环境控制系统</div>
|
||||
<div class="whole-element top-weather">
|
||||
<div class="top-weather-element border-right" style="width: 233.5px;">
|
||||
<div class="text-right row-100" style="float: left;width: 120px;">
|
||||
<div class="top-date font-size-18">2023-10-24</div>
|
||||
<div class="top-time font-size-30">15:55:00</div>
|
||||
</div>
|
||||
<div class="row-100" style="float: left;width: 111.4px;">
|
||||
<img class="dayOrNight" src="<%=request.getContextPath()%>/IMG/expo/day.png">
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-weather-element border-right" style="width: 221px;">
|
||||
<div class="col-xs-6 row-100 line-height-2 weather">多云</div>
|
||||
<div class="col-xs-6 row-100 text-left ">
|
||||
<div class="top-date font-size-14">当前温度</div>
|
||||
<div class="top-time font-size-40"><span class="temperature">25</span>℃</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-weather-element border-right text-left" style="width: 172px;">
|
||||
<div class="col-xs-12 font-size-18 row-50 line-height-2 padding-left-20">降雨量<span class="temperature">0</span>mm</div>
|
||||
<div class="col-xs-12 font-size-18 row-50 line-height-2 padding-left-20">光照度<span class="temperature">0</span>lux</div>
|
||||
</div>
|
||||
<div class="top-weather-element border-right text-left" style="width: 140px;">
|
||||
<div class="col-xs-12 font-size-18 row-50 line-height-2 padding-left-20">风速<span class="temperature">0</span>m/s</div>
|
||||
<div class="col-xs-12 font-size-18 row-50 line-height-2 padding-left-20">湿度<span class="temperature">0</span>%RH</div>
|
||||
</div>
|
||||
<div class="top-weather-element padding-leftright-15">
|
||||
<img src="<%=request.getContextPath()%>/IMG/expo/transition.png">
|
||||
</div>
|
||||
</div>
|
||||
<div class=" whole-element top-menu">温室总览</div>
|
||||
<div class="whole-element top-menu-list">
|
||||
<div class="top-menu-list-option cursor-pointer" data-value="2">P2海市沙洲</div>
|
||||
<div class="top-menu-list-option cursor-pointer" data-value="3">P3云上森林</div>
|
||||
<div class="top-menu-list-option cursor-pointer" data-value="4">P4云雾峡谷</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
1081
WebRoot/jsp/visual/interaction/cameraFrame.jsp
Normal file
1081
WebRoot/jsp/visual/interaction/cameraFrame.jsp
Normal file
File diff suppressed because it is too large
Load Diff
122
WebRoot/jsp/visual/interaction/cameraInteraction.jsp
Normal file
122
WebRoot/jsp/visual/interaction/cameraInteraction.jsp
Normal file
@ -0,0 +1,122 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@page import="com.sipai.entity.visual.JspElement"%>
|
||||
<%request.setAttribute("Type_GetValue", JspElement.Type_GetValue); %>
|
||||
<%request.setAttribute("Type_GetHistory", JspElement.Type_GetHistory); %>
|
||||
<%request.setAttribute("Type_GetModbus", JspElement.Type_GetModbus); %>
|
||||
<%request.setAttribute("Type_GetHttp", JspElement.Type_GetHttp); %>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/*.playWnd {
|
||||
margin: 0 0 0 0;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border: 1px solid red;
|
||||
}*/
|
||||
.playWnd {
|
||||
margin: 0;
|
||||
width: 99%;
|
||||
height: 99%;
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
|
||||
.cbInfoDiv {
|
||||
float: left;
|
||||
width: 360px;
|
||||
margin-left: 16px;
|
||||
border: 1px solid #7F9DB9;
|
||||
}
|
||||
|
||||
.cbInfo {
|
||||
height: 200px;
|
||||
padding: 5px;
|
||||
border: 1px solid #7F9DB9;
|
||||
overflow: auto;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.operate {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.operate::after {
|
||||
content: '';
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.operate .btns {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.module {
|
||||
float: left;
|
||||
width: 340px;
|
||||
min-height: 320px;
|
||||
margin-left: 16px;
|
||||
padding: 16px 8px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
.module .item {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.module .label {
|
||||
width: 150px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: 8px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.module input[type="text"],
|
||||
.module select {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-left: 0;
|
||||
width: 150px;
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
.module .btn {
|
||||
min-width: 80px;
|
||||
min-height: 24px;
|
||||
margin-top: 16px;
|
||||
margin-left: 158px;
|
||||
}
|
||||
</style>
|
||||
<jsp:include page="/jsp/incVisual.jsp"></jsp:include>
|
||||
<script type="text/javascript">
|
||||
//自动执行第一步
|
||||
$(function () {
|
||||
//console.log("videoTypeInteraction1","${param.videoTypeInteraction}");
|
||||
document.getElementById('frameCamera').src = ext.contextPath
|
||||
+ "/jsp/visual/interaction/cameraFrame.jsp?planInteractionId=${planInteractionId}&fId=frameCamera&videoType=switch&top="
|
||||
+ document.getElementById('subModal').offsetTop + "&left=" + document.getElementById('subModal').offsetLeft
|
||||
+ "&videoTypeInteraction=${param.videoTypeInteraction}";
|
||||
//启动插件
|
||||
document.getElementById("modalDialog").style.height = 0.7 * document.documentElement.offsetHeight + "px";
|
||||
document.getElementById("modalDialog").style.width = 0.5 * document.documentElement.offsetWidth + "px";
|
||||
})
|
||||
</script>
|
||||
<div class="modal fade" id="subModal" style="width:100%;height:100%">
|
||||
<div class="modal-dialog" id="modalDialog" style="position:relative">
|
||||
<div id="modalContent" class="modal-content" style="width:100%;height:100%">
|
||||
<iframe id="frameCamera" scrolling="no" allowtransparency="yes"
|
||||
style="height:100%;width:100%;border:0px;padding:0px;margin:0px"></iframe>
|
||||
</div>
|
||||
<!-- /.modal-content -->
|
||||
</div>
|
||||
<!-- /.modal-dialog -->
|
||||
</div>
|
||||
212
WebRoot/jsp/visual/interaction/lineInteraction.jsp
Normal file
212
WebRoot/jsp/visual/interaction/lineInteraction.jsp
Normal file
@ -0,0 +1,212 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@page import="com.sipai.entity.visual.JspElement"%>
|
||||
<%request.setAttribute("Type_GetValue", JspElement.Type_GetValue); %>
|
||||
<%request.setAttribute("Type_GetHistory", JspElement.Type_GetHistory); %>
|
||||
<%request.setAttribute("Type_GetModbus", JspElement.Type_GetModbus); %>
|
||||
<%request.setAttribute("Type_GetHttp", JspElement.Type_GetHttp); %>
|
||||
<style type="text/css">
|
||||
.select2-container .select2-selection--single {
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
}
|
||||
|
||||
.select2-selection__arrow {
|
||||
margin-top: 3px;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
var colors = ['#75BC63', '#D12FD6', '#00c200', '#d14a61', '#675bba', '#5793f3'];
|
||||
var symbols = ['circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'];
|
||||
/* 请求数据 */
|
||||
function getValue() {
|
||||
//折线图
|
||||
$.post(ext.contextPath + '/plan/getDataByPlanInteractionId.do', { planInteractionId: "${planInteractionId}" }, function (data) {
|
||||
var yaAxis = [];
|
||||
var series = [];
|
||||
var measuredt = [];
|
||||
var legendName = [];
|
||||
for (var d = 0; d < data[0].mPoint.length; d++) {
|
||||
var ArrayDatas = data[0].mPoint[d].mPointHistory//eval("(" + data + ")");
|
||||
var offset = 60;
|
||||
|
||||
//y轴
|
||||
var yobj = {
|
||||
type: 'value',
|
||||
scale: true,
|
||||
name: data[0].mPoint[d].parmname + "(" + data[0].mPoint[d].unit + ")",
|
||||
nameTextStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 18
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#97C8E6',
|
||||
width: 2,
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
formatter: '{value}' + data[0].mPoint[d].unit,
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
//max: 1200,
|
||||
min: function (value) {
|
||||
return value.min;
|
||||
},
|
||||
boundaryGap: [0.2, 0.2]
|
||||
}
|
||||
if (d == 0) {
|
||||
yobj.position = 'left';
|
||||
yobj.offset = 0;
|
||||
} else {
|
||||
yobj.position = 'right';
|
||||
yobj.offset = offset * (d - 1);
|
||||
}
|
||||
if (d >= 2) {
|
||||
yobj.show = false;
|
||||
}
|
||||
yaAxis.push(yobj);
|
||||
|
||||
//series
|
||||
var sobj = {
|
||||
name: data[0].mPoint[d].parmname,
|
||||
xAxisIndex: 1,
|
||||
yAxisIndex: d,
|
||||
symbol: symbols[d % symbols.length],
|
||||
symbolSize: 10,
|
||||
itemStyle: {
|
||||
color: colors[d % colors.length],
|
||||
borderWidth: 1,
|
||||
},
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
},
|
||||
};
|
||||
sobj.type = "line";
|
||||
|
||||
//legend名称
|
||||
legendName.push(data[0].mPoint[d].parmname);
|
||||
var dataSeries = [];
|
||||
for (var j = 0; j < ArrayDatas.length; j++) {
|
||||
//x轴 只取data第一条数据进行生成x轴
|
||||
if (d == 0) {
|
||||
measuredt.push(ArrayDatas[j].measuredt.substring(5, 10) + "-" + ArrayDatas[j].measuredt.substring(11, 13));
|
||||
}
|
||||
dataSeries.push(ArrayDatas[j].parmvalue);
|
||||
}
|
||||
sobj.data = dataSeries;
|
||||
series.push(sobj);
|
||||
}
|
||||
|
||||
//赋值 x轴 y轴 series
|
||||
optionBL.legend.data = legendName;
|
||||
optionBL.xAxis[0].data = measuredt;
|
||||
optionBL.yAxis = yaAxis;
|
||||
optionBL.series = series;
|
||||
//图标加载
|
||||
//console.log("option",optionBL);
|
||||
BLChart.setOption(optionBL);
|
||||
}, 'json');
|
||||
}
|
||||
|
||||
|
||||
/* 定时器 */
|
||||
setInterval(getValue, 300000); //<!--每隔5分钟刷新一次-->
|
||||
//setInterval(change, 60000); //每1分钟切换
|
||||
|
||||
/* 初始化 */
|
||||
$(function () {
|
||||
document.getElementById("modalDialog").style.height = 0.7 * document.documentElement.offsetHeight +"px";
|
||||
document.getElementById("modalDialog").style.width = 0.5 * document.documentElement.offsetWidth + "px";
|
||||
document.getElementById("barline").style.height = 0.97*$("#modalDialog").height() +"px";
|
||||
document.getElementById("barline").style.width = 0.97*$("#modalDialog").width()+ "px";
|
||||
// console.log("modalContentHeight",document.getElementById("modalDialog").offsetHeight);
|
||||
// console.log("modalContentWidth",document.getElementById("modalDialog").offsetWidth);
|
||||
// console.log("modalContentHeight2",$("#modalDialog").height());
|
||||
// console.log("modalContentWidth2",$("#modalDialog").width());
|
||||
getValue();
|
||||
//console.log("height",document.body.scrollHeight);
|
||||
});
|
||||
|
||||
|
||||
})
|
||||
</script>
|
||||
<div class="modal fade" id="subModal" style="width:100%;height:100%">
|
||||
<div id="modalDialog" class="modal-dialog" style="width:50%;height:70%">
|
||||
<div id="modalContent" class="modal-content" style="width:100%;height:100%">
|
||||
<div class="modal-body" style="background-color: #182F52;width:100%;height:100%;">
|
||||
<div id="barline" style="width:100%;height:100%;"></div>
|
||||
<script language="JavaScript">
|
||||
/* 构造图表 */
|
||||
var BLChart = echarts.init(document.getElementById('barline'));
|
||||
optionBL = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#283b56'
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '5%',
|
||||
top: '10%',
|
||||
},
|
||||
legend: {
|
||||
left: 'center',
|
||||
itemGap: 100,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 20
|
||||
},
|
||||
//data: ['出水量', '1#压力', '2#压力']
|
||||
},
|
||||
dataZoom: {
|
||||
show: false,
|
||||
start: 0,
|
||||
end: 100
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#97C8E6',
|
||||
width: 2,
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff'
|
||||
},
|
||||
boundaryGap: true,
|
||||
//data: ['0:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00']
|
||||
},
|
||||
{
|
||||
type: 'category',
|
||||
show: false,
|
||||
boundaryGap: true,
|
||||
//data: ['0:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00']
|
||||
}
|
||||
],
|
||||
yAxis: [],
|
||||
series: []
|
||||
};
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.modal-content -->
|
||||
</div>
|
||||
<!-- /.modal-dialog -->
|
||||
</div>
|
||||
267
WebRoot/jsp/visual/interaction4Select.jsp
Normal file
267
WebRoot/jsp/visual/interaction4Select.jsp
Normal file
@ -0,0 +1,267 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
||||
<!DOCTYPE html>
|
||||
|
||||
<script type="text/javascript">
|
||||
var doSearchInteraction = function () {
|
||||
$("#table_interaction4Select").bootstrapTable('refresh');
|
||||
};
|
||||
function doSelect() {
|
||||
var checkedItems = $("#table_interaction4Select").bootstrapTable('getAllSelections');
|
||||
//console.log("checkedItems",checkedItems);
|
||||
if(checkedItems.length != 0){
|
||||
//console.log(checkedItems[0].id);
|
||||
$('#${param.formId} #${param.hiddenId}').val(checkedItems[0].id);
|
||||
$('#${param.formId} #${param.textId}').val(checkedItems[0].name);
|
||||
closeModal("interaction4SelectModal");
|
||||
}
|
||||
|
||||
// var datas = "";
|
||||
// datas_name = "";
|
||||
// $.each(selectionIds, function (index, item) {
|
||||
// if (datas != "") {
|
||||
// datas += ",";
|
||||
// }
|
||||
// datas += item;
|
||||
// });
|
||||
// $.post(ext.contextPath + '/user/getUsersByIds.do', { userIds: datas }, function (resp) {
|
||||
// $.each(resp, function (index, item) {
|
||||
// if (datas_name != "") {
|
||||
// datas_name += ",";
|
||||
// }
|
||||
// datas_name += item.caption;
|
||||
// });
|
||||
// $('#${param.formId} #${param.hiddenId}').val(datas);
|
||||
// $('#${param.formId} #${param.textId}').val(datas_name);
|
||||
// closeModal("user4SelectModal")
|
||||
// }, 'json');
|
||||
};
|
||||
|
||||
var $table;
|
||||
var switchStatus = false;
|
||||
var selectionIds = []; //保存选中ids
|
||||
function initialSelectionIds() {
|
||||
// var check_array = new Array();
|
||||
// check_array.push('${param.interactionId}');
|
||||
selectionIds.push('${param.interactionId}');
|
||||
}
|
||||
function getCheckedIds() {
|
||||
var ids = "";
|
||||
var check_array = $("#table_interaction4Select").bootstrapTable('getAllSelections');
|
||||
$.each(check_array, function (index, item) {
|
||||
if (ids != "") {
|
||||
ids += ",";
|
||||
}
|
||||
ids += item.id;
|
||||
});
|
||||
return ids;
|
||||
}
|
||||
function queryParams(params) {
|
||||
var temp = {
|
||||
rows: params.limit, // 每页要显示的数据条数
|
||||
page: params.offset / params.limit + 1, // 每页显示数据的开始页码
|
||||
sort: params.sort, // 要排序的字段
|
||||
order: params.order,
|
||||
search_name: $('#search_name').val(),
|
||||
};
|
||||
var status = $('#switchBtn').bootstrapSwitch('state')
|
||||
if (status) {
|
||||
temp.checkedIds = getCheckedIds();
|
||||
}
|
||||
return temp;
|
||||
}
|
||||
$(function () {
|
||||
//jquery html()方法加载，导致box无法执行boxwidget(),手动初始化
|
||||
$('#searchBox').boxWidget();
|
||||
/* $("#search_pid").select2({
|
||||
ajax: {
|
||||
type:'POST',
|
||||
url: ext.contextPath +"/work/group/getListForSelect.do",
|
||||
dataType: 'json',
|
||||
delay: 250,
|
||||
processResults: function (data) {
|
||||
return {
|
||||
results: data
|
||||
}
|
||||
},
|
||||
cache: true
|
||||
},
|
||||
placeholder:'请选择部门',//默认文字提示
|
||||
allowClear: true,//允许清空
|
||||
escapeMarkup: function (markup) { return markup; }, // 自定义格式化防止xss注入
|
||||
language: "zh-CN",
|
||||
minimumInputLength: 0,
|
||||
minimumResultsForSearch: 10,//数据超过十个启用搜索框
|
||||
formatResult: function formatRepo(repo){return repo.text;}, // 函数用来渲染结果
|
||||
formatSelection: function formatRepoSelection(repo){return repo.text;} // 函数用于呈现当前的选择
|
||||
}); */
|
||||
//$("#active").select2({minimumResultsForSearch: 10}).val("${menu.active}").trigger("change");
|
||||
$('#switchBtn').bootstrapSwitch({
|
||||
onText: '是',
|
||||
offText: '否',
|
||||
size: "small",
|
||||
});
|
||||
$(".select2-selection--single").css({ 'height': '30px', 'paddingTop': '4px' });
|
||||
|
||||
initialSelectionIds();
|
||||
|
||||
$table = $("#table_interaction4Select").bootstrapTable({ // 对应table标签的id
|
||||
url: ext.contextPath + '/interaction/getList.do', // 获取表格数据的url
|
||||
//cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
|
||||
//clickToSelect: true,
|
||||
striped: true, //表格显示条纹，默认为false
|
||||
pagination: true, // 在表格底部显示分页组件，默认false
|
||||
pageList: [10, 20], // 设置页面可以显示的数据条数
|
||||
pageSize: 20, // 页面数据条数
|
||||
pageNumber: 1, // 首页页码
|
||||
sidePagination: 'server', // 设置为服务器端分页
|
||||
clickToSelect: true,
|
||||
responseHandler: responseHandler, //在渲染页面数据之前执行的方法，此配置很重要!!!!!!!
|
||||
queryParams: queryParams,
|
||||
queryParamsType: "limit",
|
||||
sortName: 'name', // 要排序的字段
|
||||
sortOrder: 'asc', // 排序规则
|
||||
singleSelect: true,
|
||||
/* showColumns: true,
|
||||
showRefresh: true, */
|
||||
columns: [
|
||||
{
|
||||
checkbox: true, // 显示一个勾选框
|
||||
//formatter: stateFormatter
|
||||
formatter: function (i, row) { // 每次加载 checkbox 时判断当前 row 的 id 是否已经存在全局 Set() 里
|
||||
if ($.inArray(row.id, Array.from(selectionIds)) != -1) { // 因为 Set是集合,需要先转换成数组
|
||||
return {
|
||||
checked: true // 存在则选中
|
||||
}
|
||||
}
|
||||
}
|
||||
}, {
|
||||
field: 'name', // 返回json数据中的name
|
||||
title: '名称', // 表格表头显示文字
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle', // 上下居中
|
||||
width: "33%"
|
||||
}, {
|
||||
field: 'methodcode', // 返回json数据中的name
|
||||
title: '方法编码', // 表格表头显示文字
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle', // 上下居中
|
||||
width: "33%"
|
||||
}, {
|
||||
field: 'parameter', // 返回json数据中的name
|
||||
title: '必要参数', // 表格表头显示文字
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle', // 上下居中
|
||||
width: "33%"
|
||||
},
|
||||
],
|
||||
onLoadSuccess: function () { //加载成功时执行
|
||||
adjustBootstrapTableView("table_interaction4Select");
|
||||
},
|
||||
onLoadError: function () { //加载失败时执行
|
||||
console.info("加载数据失败");
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
//绑定选中事件、取消事件、全部选中、全部取消
|
||||
$table.on('check.bs.table check-all.bs.table uncheck.bs.table uncheck-all.bs.table', function (e, rows, obj) {
|
||||
if ('check' == e.type) {
|
||||
$('#table_interaction4Select .checked').removeClass("checked");
|
||||
obj.parent().addClass("checked");
|
||||
checkedItem = rows;
|
||||
} else {
|
||||
obj.parent().removeClass("checked");
|
||||
checkedItem = "";
|
||||
}
|
||||
});
|
||||
});
|
||||
//选中事件操作数组
|
||||
var union = function (array, ids) {
|
||||
$.each(ids, function (i, id) {
|
||||
if ($.inArray(id, array) == -1) {
|
||||
array[array.length] = id;
|
||||
}
|
||||
});
|
||||
return array;
|
||||
};
|
||||
//取消选中事件操作数组
|
||||
var difference = function (array, ids) {
|
||||
$.each(ids, function (i, id) {
|
||||
var index = $.inArray(id, array);
|
||||
if (index != -1) {
|
||||
array.splice(index, 1);
|
||||
}
|
||||
});
|
||||
return array;
|
||||
};
|
||||
var _ = { "union": union, "difference": difference };
|
||||
|
||||
//表格分页之前处理多选框数据
|
||||
function responseHandler(res) {
|
||||
$.each(res.rows, function (i, row) {
|
||||
row.checkStatus = $.inArray(row.id, selectionIds) != -1; //判断当前行的数据id是否存在与选中的数组，存在则将多选框状态变为true
|
||||
});
|
||||
return res;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="modal fade" id="interaction4SelectModal">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span></button>
|
||||
<h4 class="modal-title">选择交互(请单选)</h4>
|
||||
</div>
|
||||
<div class="modal-body " style="width:100%">
|
||||
<div id="alertDiv"></div>
|
||||
|
||||
<div class="box box-primary box-solid collapsed-box" id="searchBox" collapsed>
|
||||
<div class="box-header">
|
||||
<!-- tools box -->
|
||||
<div class="pull-right box-tools">
|
||||
<button type="button" class="btn btn-primary btn-sm pull-right" data-widget="collapse"
|
||||
style="margin-right: 5px;">
|
||||
<i class="fa fa-plus"></i></button>
|
||||
</div>
|
||||
<!-- /. tools -->
|
||||
<i class="fa fa-search"></i>
|
||||
</div>
|
||||
<div class="box-body collapse">
|
||||
<form class="form-horizontal ">
|
||||
<div class="form-group" style="margin-right: 20px;">
|
||||
<label class="col-sm-2 control-label">名称</label>
|
||||
<div class="col-sm-4">
|
||||
<input type="text" id="search_name" name="search_name" class="form-control input-sm" placeholder="名称"
|
||||
style="width:170px;">
|
||||
</div>
|
||||
<label class="col-sm-2 control-label">只看选中</label>
|
||||
<div class="col-sm-4">
|
||||
<div class="switch" data-on="primary" data-off="info">
|
||||
<input id="switchBtn" type="checkbox" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group" style="margin-right: 20px;">
|
||||
|
||||
<div class=" col-sm-offset-6 button-group" style="padding: 0;">
|
||||
<button type="button" class="btn btn-default btn-sm pull-right" onclick="doSearchInteraction();"><i
|
||||
class="fa fa-search"> 搜索</i></button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div id="table_interaction4Select" style="height:230px;overflow:auto;width:100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
|
||||
<button type="button" class="btn btn-primary" onclick="doSelect()">确认</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.modal-content -->
|
||||
</div>
|
||||
<!-- /.modal-dialog -->
|
||||
</div>
|
||||
110
WebRoot/jsp/visual/interactionAdd.jsp
Normal file
110
WebRoot/jsp/visual/interactionAdd.jsp
Normal file
@ -0,0 +1,110 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<style type="text/css">
|
||||
.select2-container .select2-selection--single {
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
}
|
||||
|
||||
.select2-selection__arrow {
|
||||
margin-top: 3px;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
function dosave() {
|
||||
$("#subForm").bootstrapValidator('validate');//提交验证
|
||||
if ($("#subForm").data('bootstrapValidator').isValid()) {//获取验证结果，如果成功，执行下面代码
|
||||
$.post(ext.contextPath + "/interaction/dosave.do", $("#subForm").serialize(), function (data) {
|
||||
if (data.res == 1) {
|
||||
closeModal('subModal')
|
||||
$("#table").bootstrapTable('refresh');
|
||||
} else if (data.res == 0) {
|
||||
showAlert('d', '保存失败');
|
||||
} else {
|
||||
showAlert('d', data.res);
|
||||
}
|
||||
}, 'json');
|
||||
}
|
||||
}
|
||||
$("#subForm").bootstrapValidator({
|
||||
live: 'disabled',//验证时机，enabled是内容有变化就验证（默认），disabled和submitted是提交再验证
|
||||
fields: {
|
||||
name: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: '名称不能为空'
|
||||
}
|
||||
}
|
||||
},methodCode: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: '方法编码不能为空'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
});
|
||||
$(function () {
|
||||
$.post(ext.contextPath + "/interaction/getAllMethodCode.do", {}, function (data) {
|
||||
$("#methodcode").empty();
|
||||
var select = $("#methodcode").select2({
|
||||
data: data,
|
||||
placeholder: '请选择',//默认文字提示
|
||||
allowClear: false,//允许清空
|
||||
escapeMarkup: function (markup) { return markup; }, // 自定义格式化防止xss注入
|
||||
language: "zh-CN",
|
||||
minimumInputLength: 0,
|
||||
minimumResultsForSearch: 10,//数据超过十个启用搜索框
|
||||
formatResult: function formatRepo(repo) { return repo.text; }, // 函数用来渲染结果
|
||||
formatSelection: function formatRepoSelection(repo) { return repo.text; } // 函数用于呈现当前的选择
|
||||
});
|
||||
select.val(data[0].id).trigger("change");
|
||||
}, 'json');
|
||||
fixSelect2ToForm("methodcode");
|
||||
})
|
||||
</script>
|
||||
<div class="modal fade" id="subModal">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span></button>
|
||||
<h4 class="modal-title">新增交互</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<!-- 新增界面formid强制为subForm -->
|
||||
<form class="form-horizontal" id="subForm" enctype="multipart/form-data">
|
||||
<!-- 界面提醒div强制id为alertDiv -->
|
||||
<div id="alertDiv"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">*名称</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="text" id="name" name="name" class="form-control" placeholder="名称">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">*方法编码</label>
|
||||
<div class="col-sm-7">
|
||||
<select class="form-control select2" id="methodcode" name="methodcode"
|
||||
style="width: 100%"></select>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">必要参数(逗号分隔)</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="text" id="parameter" name="parameter" class="form-control" placeholder="必要参数(逗号分隔)">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
|
||||
<button type="button" class="btn btn-primary" onclick="dosave()">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.modal-content -->
|
||||
</div>
|
||||
<!-- /.modal-dialog -->
|
||||
</div>
|
||||
104
WebRoot/jsp/visual/interactionEdit.jsp
Normal file
104
WebRoot/jsp/visual/interactionEdit.jsp
Normal file
@ -0,0 +1,104 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function doupdate() {
|
||||
$("#subForm").bootstrapValidator('validate');//提交验证
|
||||
if ($("#subForm").data('bootstrapValidator').isValid()) {//获取验证结果，如果成功，执行下面代码
|
||||
$.post(ext.contextPath + "/interaction/doupdate.do", $("#subForm").serialize(), function (data) {
|
||||
if (data.res == 1) {
|
||||
closeModal('subModal');
|
||||
$("#table").bootstrapTable('refresh');
|
||||
} else if (data.res == 0) {
|
||||
showAlert('d', '更新失败');
|
||||
} else {
|
||||
showAlert('d', data.res);
|
||||
}
|
||||
}, 'json');
|
||||
}
|
||||
}
|
||||
$("#subForm").bootstrapValidator({
|
||||
live: 'disabled',//验证时机，enabled是内容有变化就验证（默认），disabled和submitted是提交再验证
|
||||
fields: {
|
||||
name: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: '名称不能为空'
|
||||
}
|
||||
}
|
||||
}, methodCode: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: '识别编码不能为空'
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
$(function () {
|
||||
$.post(ext.contextPath + "/interaction/getAllMethodCode.do", {}, function (data) {
|
||||
$("#methodcode").empty();
|
||||
var select = $("#methodcode").select2({
|
||||
data: data,
|
||||
placeholder: '请选择',//默认文字提示
|
||||
allowClear: false,//允许清空
|
||||
escapeMarkup: function (markup) { return markup; }, // 自定义格式化防止xss注入
|
||||
language: "zh-CN",
|
||||
minimumInputLength: 0,
|
||||
minimumResultsForSearch: 10,//数据超过十个启用搜索框
|
||||
formatResult: function formatRepo(repo) { return repo.text; }, // 函数用来渲染结果
|
||||
formatSelection: function formatRepoSelection(repo) { return repo.text; } // 函数用于呈现当前的选择
|
||||
});
|
||||
select.val("${interaction.methodcode}").trigger("change");
|
||||
}, 'json');
|
||||
fixSelect2ToForm("methodcode");
|
||||
})
|
||||
</script>
|
||||
<div class="modal fade" id="subModal">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span></button>
|
||||
<h4 class="modal-title">编辑界面</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<!-- 新增界面formid强制为subForm -->
|
||||
<form class="form-horizontal" id="subForm">
|
||||
<div id="alertDiv"></div>
|
||||
<input id="id" name="id" type="hidden" value="${interaction.id}" />
|
||||
<!-- 界面提醒div强制id为alertdiv -->
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">*名称</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="text" id="name" name="name" class="form-control" placeholder="名称"
|
||||
value="${interaction.name}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">*方法编码</label>
|
||||
<div class="col-sm-7">
|
||||
<select class="form-control select2" id="methodcode" name="methodcode"
|
||||
style="width: 100%"></select>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">必要参数(逗号分隔)</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="text" id="parameter" name="parameter" class="form-control"
|
||||
value="${interaction.parameter}" placeholder="必要参数(逗号分隔)">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
|
||||
<button type="button" class="btn btn-primary" onclick="doupdate()">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.modal-content -->
|
||||
</div>
|
||||
<!-- /.modal-dialog -->
|
||||
</div>
|
||||
186
WebRoot/jsp/visual/interactionList.jsp
Normal file
186
WebRoot/jsp/visual/interactionList.jsp
Normal file
@ -0,0 +1,186 @@
|
||||
<%@page import="com.sipai.entity.maintenance.Maintenance"%>
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<title><%= ServerObject.atttable.get("TOPTITLE")%></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<script type="text/javascript">
|
||||
var addFun = function () {
|
||||
$.post(ext.contextPath + '/interaction/doadd.do', {}, function (data) {
|
||||
$("#subDiv").html(data);
|
||||
openModal('subModal');
|
||||
});
|
||||
};
|
||||
var editFun = function (id) {
|
||||
$.post(ext.contextPath + '/interaction/doedit.do', { id: id }, function (data) {
|
||||
$("#subDiv").html(data);
|
||||
openModal('subModal');
|
||||
});
|
||||
};
|
||||
var deleteFun = function (id) {
|
||||
swal({
|
||||
text: "您确定要删除此记录？",
|
||||
dangerMode: true,
|
||||
buttons: {
|
||||
cancel: {
|
||||
text: "取消",
|
||||
value: null,
|
||||
visible: true,
|
||||
className: "btn btn-default btn-sm",
|
||||
closeModal: true,
|
||||
},
|
||||
confirm: {
|
||||
text: "确定",
|
||||
value: true,
|
||||
visible: true,
|
||||
className: "btn btn-danger btn-sm",
|
||||
closeModal: true
|
||||
}
|
||||
}
|
||||
})
|
||||
.then(function (willDelete) {
|
||||
if (willDelete) {
|
||||
$.post(ext.contextPath + '/interaction/dodelete.do', { id: id }, function (data) {
|
||||
if (data == 1) {
|
||||
$("#table").bootstrapTable('refresh');
|
||||
} else {
|
||||
showAlert('d', '删除失败', 'mainAlertdiv');
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
var dosearch = function () {
|
||||
$("#table").bootstrapTable('refresh');
|
||||
};
|
||||
var initFun = function () {
|
||||
$("#table").bootstrapTable({ // 对应table标签的id
|
||||
url: ext.contextPath + '/interaction/getList.do', // 获取表格数据的url
|
||||
cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
|
||||
striped: true, //表格显示条纹，默认为false
|
||||
pagination: true, // 在表格底部显示分页组件，默认false
|
||||
pageList: [10, 20, 50], // 设置页面可以显示的数据条数
|
||||
pageSize: 10, // 页面数据条数
|
||||
pageNumber: 1, // 首页页码
|
||||
sidePagination: 'server', // 设置为服务器端分页
|
||||
//showFooter: true,//添加页脚
|
||||
queryParams: function (params) { // 请求服务器数据时发送的参数，可以在这里添加额外的查询参数，返回false则终止请求
|
||||
return {
|
||||
rows: params.limit, // 每页要显示的数据条数
|
||||
page: params.offset / params.limit + 1, // 每页显示数据的开始页码
|
||||
sort: params.sort, // 要排序的字段
|
||||
order: params.order,
|
||||
search_name: $('#search_name').val(),
|
||||
}
|
||||
},
|
||||
sortName: 'name', // 要排序的字段
|
||||
sortOrder: 'asc', // 排序规则
|
||||
columns: [
|
||||
/* {
|
||||
checkbox: true, // 显示一个勾选框
|
||||
}, */{
|
||||
field: 'name', // 返回json数据中的name
|
||||
title: '名称', // 表格表头显示文字
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle' // 上下居中
|
||||
}, {
|
||||
field: 'methodcode', // 返回json数据中的name
|
||||
title: '方法编码', // 表格表头显示文字
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle' // 上下居中
|
||||
}, {
|
||||
field: 'parameter', // 返回json数据中的name
|
||||
title: '必要参数', // 表格表头显示文字
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle' // 上下居中
|
||||
},{
|
||||
title: "操作",
|
||||
align: 'center',
|
||||
valign: 'middle',
|
||||
width: 120, // 定义列的宽度，单位为像素px
|
||||
formatter: function (value, row, index) {
|
||||
var buts = '';
|
||||
buts += '<button class="btn btn-default btn-sm" onclick="editFun(\'' + row.id + '\')" data-toggle="tooltip" title="编辑"><i class="fa fa-edit "></i><span class="hidden-md hidden-lg"> 编辑</span></button>';
|
||||
buts += '<button class="btn btn-default btn-sm" onclick="deleteFun(\'' + row.id + '\')" data-toggle="tooltip" title="删除"><i class="fa fa-trash-o "></i><span class="hidden-md hidden-lg"> 删除</span></button>';
|
||||
buts = '<div class = "btn-group">' + buts + '</div>';
|
||||
return buts;
|
||||
}
|
||||
}
|
||||
],
|
||||
//注册加载子表的事件。index：父表当前行的行索引,row：父表当前行的Json数据对象,$detail：当前行下面创建的新行里面的td对象。
|
||||
onLoadSuccess: function () { //加载成功时执行
|
||||
adjustBootstrapTableView("table");
|
||||
},
|
||||
onLoadError: function () { //加载失败时执行
|
||||
console.info("加载数据失败");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$(function () {
|
||||
initFun();
|
||||
});
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body onload="initMenu()" class="hold-transition ${cu.themeclass} sidebar-mini">
|
||||
<div class="wrapper">
|
||||
<div class="content-wrapper">
|
||||
<!-- Content Header (Page header) -->
|
||||
<section class="content-header">
|
||||
<h1 id="head_title"></h1>
|
||||
<ol class="breadcrumb">
|
||||
<li><a id='head_firstlevel' href="#"><i class="fa fa-dashboard"></i> </a></li>
|
||||
<!-- <li class="active">Here</li> -->
|
||||
</ol>
|
||||
</section>
|
||||
<!-- Main content -->
|
||||
<section class="content container-fluid">
|
||||
<div id="mainAlertdiv"></div>
|
||||
<div id="subDiv"></div>
|
||||
<div>
|
||||
<form id="searchForm">
|
||||
<div class="form-group form-inline" style="padding:0;">
|
||||
<div class="form-group pull-right">
|
||||
<div class="input-group input-group-sm" style="width: 250px;">
|
||||
<input type="text" id="search_name" name="search_name"
|
||||
class="form-control pull-right" placeholder="名称">
|
||||
<div class="input-group-btn">
|
||||
<button class="btn btn-default" onclick="dosearch();"><i
|
||||
class="fa fa-search"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="btn-group" style="width: 220px;padding-bottom:10px;">
|
||||
<button type="button" class="btn btn-default btn-sm" onclick="addFun();"><i
|
||||
class="fa fa-plus"></i> 新增</button>
|
||||
|
||||
<!-- <button type="button" class="btn btn-default btn-sm" onclick="deletesFun();"><i
|
||||
class="fa fa-trash-o"></i> 删除</button> -->
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<table id="table"></table>
|
||||
</div>
|
||||
</section>
|
||||
<!-- /.content -->
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
292
WebRoot/jsp/visual/jsp4Select.jsp
Normal file
292
WebRoot/jsp/visual/jsp4Select.jsp
Normal file
@ -0,0 +1,292 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
||||
<!DOCTYPE html>
|
||||
|
||||
<script type="text/javascript">
|
||||
var doSearchJSP = function () {
|
||||
$("#table_jsp4Select").bootstrapTable('refresh');
|
||||
};
|
||||
function doSelect() {
|
||||
var checkedItems = $("#table_jsp4Select").bootstrapTable('getAllSelections');
|
||||
//console.log("checkedItems",checkedItems);
|
||||
if(checkedItems.length != 0){
|
||||
//console.log(checkedItems[0].id);
|
||||
savePlanLayoutJSPFun(checkedItems[0].id);
|
||||
}
|
||||
|
||||
// var datas = "";
|
||||
// datas_name = "";
|
||||
// $.each(selectionIds, function (index, item) {
|
||||
// if (datas != "") {
|
||||
// datas += ",";
|
||||
// }
|
||||
// datas += item;
|
||||
// });
|
||||
// $.post(ext.contextPath + '/user/getUsersByIds.do', { userIds: datas }, function (resp) {
|
||||
// $.each(resp, function (index, item) {
|
||||
// if (datas_name != "") {
|
||||
// datas_name += ",";
|
||||
// }
|
||||
// datas_name += item.caption;
|
||||
// });
|
||||
// $('#${param.formId} #${param.hiddenId}').val(datas);
|
||||
// $('#${param.formId} #${param.textId}').val(datas_name);
|
||||
// closeModal("user4SelectModal")
|
||||
// }, 'json');
|
||||
};
|
||||
|
||||
function savePlanLayoutJSPFun(jspCode){
|
||||
$.post(ext.contextPath + '/plan/savePlanLayoutJSP.do', { planLayoutId: "${param.planLayoutId}", jspCode: jspCode }, function (data) {
|
||||
if (data == 1) {
|
||||
showAlert('s', '布局中调用模块配置保存成功','alertDiv_layout');
|
||||
//判断布局table是否存在
|
||||
if(document.getElementById("table_layout")){
|
||||
$("#table_layout").bootstrapTable('refresh');//刷新
|
||||
}
|
||||
closeModal("jsp4SelectModal");
|
||||
} else {
|
||||
showAlert('d', '布局中调用模块配置保存失败','alertDiv_layout');
|
||||
//判断布局table是否存在
|
||||
if(document.getElementById("table_layout")){
|
||||
$("#table_layout").bootstrapTable('refresh');//刷新
|
||||
}
|
||||
closeModal("jsp4SelectModal");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var $table;
|
||||
var switchStatus = false;
|
||||
var selectionIds = []; //保存选中ids
|
||||
function initialSelectionIds() {
|
||||
// var check_array = new Array();
|
||||
// check_array.push('${param.jspCode}');
|
||||
selectionIds.push('${param.jspId}');
|
||||
}
|
||||
function getCheckedIds() {
|
||||
var ids = "";
|
||||
var check_array = $("#table_jsp4Select").bootstrapTable('getAllSelections');
|
||||
$.each(check_array, function (index, item) {
|
||||
if (ids != "") {
|
||||
ids += ",";
|
||||
}
|
||||
ids += item.id;
|
||||
});
|
||||
return ids;
|
||||
}
|
||||
function queryParams(params) {
|
||||
var temp = {
|
||||
rows: params.limit, // 每页要显示的数据条数
|
||||
page: params.offset / params.limit + 1, // 每页显示数据的开始页码
|
||||
sort: params.sort, // 要排序的字段
|
||||
order: params.order,
|
||||
search_name: $('#search_name').val(),
|
||||
};
|
||||
var status = $('#switchBtn').bootstrapSwitch('state')
|
||||
if (status) {
|
||||
temp.checkedIds = getCheckedIds();
|
||||
}
|
||||
return temp;
|
||||
}
|
||||
$(function () {
|
||||
//jquery html()方法加载，导致box无法执行boxwidget(),手动初始化
|
||||
$('#searchBox').boxWidget();
|
||||
/* $("#search_pid").select2({
|
||||
ajax: {
|
||||
type:'POST',
|
||||
url: ext.contextPath +"/work/group/getListForSelect.do",
|
||||
dataType: 'json',
|
||||
delay: 250,
|
||||
processResults: function (data) {
|
||||
return {
|
||||
results: data
|
||||
}
|
||||
},
|
||||
cache: true
|
||||
},
|
||||
placeholder:'请选择部门',//默认文字提示
|
||||
allowClear: true,//允许清空
|
||||
escapeMarkup: function (markup) { return markup; }, // 自定义格式化防止xss注入
|
||||
language: "zh-CN",
|
||||
minimumInputLength: 0,
|
||||
minimumResultsForSearch: 10,//数据超过十个启用搜索框
|
||||
formatResult: function formatRepo(repo){return repo.text;}, // 函数用来渲染结果
|
||||
formatSelection: function formatRepoSelection(repo){return repo.text;} // 函数用于呈现当前的选择
|
||||
}); */
|
||||
//$("#active").select2({minimumResultsForSearch: 10}).val("${menu.active}").trigger("change");
|
||||
$('#switchBtn').bootstrapSwitch({
|
||||
onText: '是',
|
||||
offText: '否',
|
||||
size: "small",
|
||||
});
|
||||
$(".select2-selection--single").css({ 'height': '30px', 'paddingTop': '4px' });
|
||||
|
||||
initialSelectionIds();
|
||||
|
||||
$table = $("#table_jsp4Select").bootstrapTable({ // 对应table标签的id
|
||||
url: ext.contextPath + '/visualjsp/getList.do', // 获取表格数据的url
|
||||
//cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
|
||||
//clickToSelect: true,
|
||||
striped: true, //表格显示条纹，默认为false
|
||||
pagination: true, // 在表格底部显示分页组件，默认false
|
||||
pageList: [10, 20], // 设置页面可以显示的数据条数
|
||||
pageSize: 20, // 页面数据条数
|
||||
pageNumber: 1, // 首页页码
|
||||
sidePagination: 'server', // 设置为服务器端分页
|
||||
clickToSelect: true,
|
||||
responseHandler: responseHandler, //在渲染页面数据之前执行的方法，此配置很重要!!!!!!!
|
||||
queryParams: queryParams,
|
||||
queryParamsType: "limit",
|
||||
sortName: 'name', // 要排序的字段
|
||||
sortOrder: 'asc', // 排序规则
|
||||
singleSelect: true,
|
||||
/* showColumns: true,
|
||||
showRefresh: true, */
|
||||
columns: [
|
||||
{
|
||||
checkbox: true, // 显示一个勾选框
|
||||
//formatter: stateFormatter
|
||||
formatter: function (i, row) { // 每次加载 checkbox 时判断当前 row 的 id 是否已经存在全局 Set() 里
|
||||
//console.log("selectionIds",selectionIds);
|
||||
if ($.inArray(row.id, Array.from(selectionIds)) != -1) { // 因为 Set是集合,需要先转换成数组
|
||||
return {
|
||||
checked: true // 存在则选中
|
||||
}
|
||||
}
|
||||
}
|
||||
}, {
|
||||
field: 'name', // 返回json数据中的name
|
||||
title: '名称', // 表格表头显示文字
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle', // 上下居中
|
||||
width: "25%"
|
||||
}, {
|
||||
field: 'jspCode', // 返回json数据中的name
|
||||
title: '识别编码', // 表格表头显示文字
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle', // 上下居中
|
||||
width: "25%"
|
||||
}, {
|
||||
field: 'style', // 返回json数据中的name
|
||||
title: '样式', // 表格表头显示文字
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle', // 上下居中
|
||||
width: "25%"
|
||||
}, {
|
||||
field: 'picture', // 返回json数据中的name
|
||||
title: '示例图', // 表格表头显示文字
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle', // 上下居中
|
||||
width: "25%"
|
||||
},
|
||||
],
|
||||
onLoadSuccess: function () { //加载成功时执行
|
||||
adjustBootstrapTableView("table_jsp4Select");
|
||||
},
|
||||
onLoadError: function () { //加载失败时执行
|
||||
console.info("加载数据失败");
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
//绑定选中事件、取消事件、全部选中、全部取消
|
||||
$table.on('check.bs.table check-all.bs.table uncheck.bs.table uncheck-all.bs.table', function (e, rows, obj) {
|
||||
if ('check' == e.type) {
|
||||
$('#table_jsp4Select .checked').removeClass("checked");
|
||||
obj.parent().addClass("checked");
|
||||
checkedItem = rows;
|
||||
} else {
|
||||
obj.parent().removeClass("checked");
|
||||
checkedItem = "";
|
||||
}
|
||||
});
|
||||
});
|
||||
//选中事件操作数组
|
||||
var union = function (array, ids) {
|
||||
$.each(ids, function (i, id) {
|
||||
if ($.inArray(id, array) == -1) {
|
||||
array[array.length] = id;
|
||||
}
|
||||
});
|
||||
return array;
|
||||
};
|
||||
//取消选中事件操作数组
|
||||
var difference = function (array, ids) {
|
||||
$.each(ids, function (i, id) {
|
||||
var index = $.inArray(id, array);
|
||||
if (index != -1) {
|
||||
array.splice(index, 1);
|
||||
}
|
||||
});
|
||||
return array;
|
||||
};
|
||||
var _ = { "union": union, "difference": difference };
|
||||
|
||||
//表格分页之前处理多选框数据
|
||||
function responseHandler(res) {
|
||||
$.each(res.rows, function (i, row) {
|
||||
row.checkStatus = $.inArray(row.id, selectionIds) != -1; //判断当前行的数据id是否存在与选中的数组，存在则将多选框状态变为true
|
||||
});
|
||||
return res;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="modal fade" id="jsp4SelectModal">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span></button>
|
||||
<h4 class="modal-title">选择模块(请单选)</h4>
|
||||
</div>
|
||||
<div class="modal-body " style="width:100%">
|
||||
<div id="alertDiv"></div>
|
||||
|
||||
<div class="box box-primary box-solid collapsed-box" id="searchBox" collapsed>
|
||||
<div class="box-header">
|
||||
<!-- tools box -->
|
||||
<div class="pull-right box-tools">
|
||||
<button type="button" class="btn btn-primary btn-sm pull-right" data-widget="collapse"
|
||||
style="margin-right: 5px;">
|
||||
<i class="fa fa-plus"></i></button>
|
||||
</div>
|
||||
<!-- /. tools -->
|
||||
<i class="fa fa-search"></i>
|
||||
</div>
|
||||
<div class="box-body collapse">
|
||||
<form class="form-horizontal ">
|
||||
<div class="form-group" style="margin-right: 20px;">
|
||||
<label class="col-sm-2 control-label">名称</label>
|
||||
<div class="col-sm-4">
|
||||
<input type="text" id="search_name" name="search_name" class="form-control input-sm" placeholder="名称"
|
||||
style="width:170px;">
|
||||
</div>
|
||||
<label class="col-sm-2 control-label">只看选中</label>
|
||||
<div class="col-sm-4">
|
||||
<div class="switch" data-on="primary" data-off="info">
|
||||
<input id="switchBtn" type="checkbox" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group" style="margin-right: 20px;">
|
||||
|
||||
<div class=" col-sm-offset-6 button-group" style="padding: 0;">
|
||||
<button type="button" class="btn btn-default btn-sm pull-right" onclick="doSearchJSP();"><i
|
||||
class="fa fa-search"> 搜索</i></button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div id="table_jsp4Select" style="height:230px;overflow:auto;width:100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
|
||||
<button type="button" class="btn btn-primary" onclick="doSelect()">确认</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.modal-content -->
|
||||
</div>
|
||||
<!-- /.modal-dialog -->
|
||||
</div>
|
||||
95
WebRoot/jsp/visual/jspAdd.jsp
Normal file
95
WebRoot/jsp/visual/jspAdd.jsp
Normal file
@ -0,0 +1,95 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<style type="text/css">
|
||||
.select2-container .select2-selection--single {
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
}
|
||||
|
||||
.select2-selection__arrow {
|
||||
margin-top: 3px;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
function dosave() {
|
||||
console.log("subForm",$("#subForm").serialize());
|
||||
$("#subForm").bootstrapValidator('validate');//提交验证
|
||||
if ($("#subForm").data('bootstrapValidator').isValid()) {//获取验证结果，如果成功，执行下面代码
|
||||
$.post(ext.contextPath + "/visualjsp/dosave.do", $("#subForm").serialize(), function (data) {
|
||||
if (data.res == 1) {
|
||||
closeModal('subModal')
|
||||
$("#table").bootstrapTable('refresh');
|
||||
} else if (data.res == 0) {
|
||||
showAlert('d', '保存失败');
|
||||
} else {
|
||||
showAlert('d', data.res);
|
||||
}
|
||||
}, 'json');
|
||||
}
|
||||
}
|
||||
$("#subForm").bootstrapValidator({
|
||||
live: 'disabled',//验证时机，enabled是内容有变化就验证（默认），disabled和submitted是提交再验证
|
||||
fields: {
|
||||
name: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: '名称不能为空'
|
||||
}
|
||||
}
|
||||
},jspCode: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: '识别编码不能为空'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
});
|
||||
$(function () {
|
||||
|
||||
})
|
||||
</script>
|
||||
<div class="modal fade" id="subModal">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span></button>
|
||||
<h4 class="modal-title">新增JSP</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<!-- 新增界面formid强制为subForm -->
|
||||
<form class="form-horizontal" id="subForm" enctype="multipart/form-data">
|
||||
<!-- 界面提醒div强制id为alertDiv -->
|
||||
<div id="alertDiv"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">*名称</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="text" id="name" name="name" class="form-control" placeholder="名称">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">*识别编码</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="text" id="jspCode" name="jspCode" class="form-control" placeholder="识别编码">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">样式</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="text" id="style" name="style" class="form-control" placeholder="style">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
|
||||
<button type="button" class="btn btn-primary" onclick="dosave()">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.modal-content -->
|
||||
</div>
|
||||
<!-- /.modal-dialog -->
|
||||
</div>
|
||||
68
WebRoot/jsp/visual/jspConfigureDetail.jsp
Normal file
68
WebRoot/jsp/visual/jspConfigureDetail.jsp
Normal file
@ -0,0 +1,68 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
|
||||
<script type="text/javascript">
|
||||
var configureId= '${param.configureId}';
|
||||
var addFun = function() {
|
||||
$.post(ext.contextPath + '/jspConfigure/jspConfigureDetailAdd.do', {configureId:configureId} , function(data) {
|
||||
$("#menuBox").html(data);
|
||||
});
|
||||
};
|
||||
|
||||
var editFun = function(id) {
|
||||
$.post(ext.contextPath + '/jspConfigure/jspConfigureDetailEdit.do', {id: id} , function(data) {
|
||||
$("#menuBox").html(data);
|
||||
});
|
||||
};
|
||||
|
||||
var initTreeView = function() {
|
||||
$.post(ext.contextPath + '/jspConfigure/jspConfigureDetailGetTreeJson.do', {configureId:configureId} , function(data) {
|
||||
var treeData = data.result;
|
||||
$('#tree').treeview({data: treeData,levels: 2});
|
||||
$('#tree').on('nodeSelected', function(event, treeData) {
|
||||
editFun(treeData.id);
|
||||
});
|
||||
},'json');
|
||||
$("#menuBox").html("");
|
||||
};
|
||||
$(function() {
|
||||
initTreeView();
|
||||
});
|
||||
</script>
|
||||
<div class="modal fade" id="jspConfigureDetailModal">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span></button>
|
||||
<h4 class="modal-title">配置参数</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div id="mainAlertdiv"></div>
|
||||
<div id="subDiv"></div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<div class="box box-solid">
|
||||
<div class="box-header with-border">
|
||||
<h3 class="box-title"> </h3>
|
||||
<div class="box-tools">
|
||||
<button type="button" class="btn btn-box-tool" onclick="addFun();"><i class="fa fa-plus"></i>新增</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box-body no-padding">
|
||||
<div id="tree" style="height:450px;overflow:auto; "></div>
|
||||
</div>
|
||||
<!-- /.box-body -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-9" id="menuBox"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.modal-content -->
|
||||
</div>
|
||||
<!-- /.modal-dialog -->
|
||||
</div>
|
||||
127
WebRoot/jsp/visual/jspConfigureDetailAdd.jsp
Normal file
127
WebRoot/jsp/visual/jspConfigureDetailAdd.jsp
Normal file
@ -0,0 +1,127 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<style type="text/css">
|
||||
.select2-container .select2-selection--single{
|
||||
height:34px;
|
||||
line-height: 34px;
|
||||
}
|
||||
.select2-selection__arrow{
|
||||
margin-top:3px;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
function dosave() {
|
||||
$("#jspConfigureDetailSubForm").bootstrapValidator('validate');//提交验证
|
||||
if ($("#jspConfigureDetailSubForm").data('bootstrapValidator').isValid()) {//获取验证结果，如果成功，执行下面代码
|
||||
$.post(ext.contextPath + "/jspConfigure/jspConfigureDetailSave.do", $("#jspConfigureDetailSubForm").serialize(), function(data) {
|
||||
if (data.res == 1){
|
||||
//closeModal('subModal');
|
||||
//$("#table").bootstrapTable('refresh');
|
||||
showAlert('s','保存成功');
|
||||
initTreeView();
|
||||
editFun(data.id);
|
||||
}else if(data.res == 0){
|
||||
showAlert('d','保存失败');
|
||||
}else{
|
||||
showAlert('d',data.res);
|
||||
}
|
||||
},'json');
|
||||
}
|
||||
}
|
||||
//输入框验证
|
||||
$("#jspConfigureDetailSubForm").bootstrapValidator({
|
||||
live: 'disabled',//验证时机，enabled是内容有变化就验证（默认），disabled和submitted是提交再验证
|
||||
fields: {
|
||||
dataName: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: '名称不能为空'
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
function selectmpids() {
|
||||
var mpids = $('#jspConfigureDetailSubForm #mpcode').val();
|
||||
$.post(ext.contextPath + '/work/mpoint/mpointList4LayerES.do', {
|
||||
mpids: mpids,
|
||||
// mpids: '',
|
||||
fucname: 'ckmpidDone'
|
||||
}, function (data) {
|
||||
$("#mpSelectDiv").html(data);
|
||||
openModal('subModalMpoint');
|
||||
});
|
||||
}
|
||||
|
||||
function ckmpidDone(data) {
|
||||
var arr = "";
|
||||
if(data.length>0){
|
||||
var arrs = data.split(',');
|
||||
arr = arrs[0]
|
||||
}
|
||||
$('#jspConfigureDetailSubForm #mpcode').val(arr);
|
||||
$('#jspConfigureDetailSubForm #value').val(0);
|
||||
closeModal('subModalMpoint');
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="box box-primary">
|
||||
<div class="box-header with-border">
|
||||
<h3 class="box-title">新增</h3>
|
||||
|
||||
<div class="box-tools pull-right">
|
||||
<a onclick="dosave()" class="btn btn-box-tool" data-toggle="tooltip" title="保存"><i
|
||||
class="glyphicon glyphicon-floppy-disk"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.box-header -->
|
||||
<div class="box-body ">
|
||||
<form class="form-horizontal" id="jspConfigureDetailSubForm">
|
||||
<input id="configureId" name="configureId" type="hidden" value="${param.configureId}" />
|
||||
<!-- 界面提醒div强制id为alertDiv -->
|
||||
<div id="alertDiv"></div>
|
||||
<div id="jspConfigureDetailSubDiv"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">*显示名称</label>
|
||||
<div class="col-sm-6">
|
||||
<input type="text" class="form-control" id="dataName" name ="dataName" placeholder="名称" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">测量点位</label>
|
||||
<div class="col-sm-6">
|
||||
<input type="text" class="form-control" id="mpcode" name ="mpcode" placeholder="数据点位" onclick="selectmpids();" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">数据单位</label>
|
||||
<div class="col-sm-6">
|
||||
<input type="text" class="form-control" name ="unit" placeholder="数据单位" >
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">默认数据</label>
|
||||
<div class="col-sm-6">
|
||||
<input type="text" class="form-control" id="value" name ="value" placeholder="默认数据" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">顺序</label>
|
||||
<div class="col-sm-6">
|
||||
<input type="text" class="form-control" id="morder" name ="morder" placeholder="顺序" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">启用状态</label>
|
||||
<div class="col-sm-6">
|
||||
<select class="form-control select2" id="active" name ="active" style="width: 270px;">
|
||||
<option value= "1" selected = "selected">启用</option>
|
||||
<option value= "0">禁用</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
168
WebRoot/jsp/visual/jspConfigureDetailEdit.jsp
Normal file
168
WebRoot/jsp/visual/jspConfigureDetailEdit.jsp
Normal file
@ -0,0 +1,168 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<style type="text/css">
|
||||
.select2-container .select2-selection--single{
|
||||
height:34px;
|
||||
line-height: 34px;
|
||||
}
|
||||
.select2-selection__arrow{
|
||||
margin-top:3px;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
function doupdate() {
|
||||
$("#jspConfigureDetailSubForm").bootstrapValidator('validate');//提交验证
|
||||
setTimeout(function(){
|
||||
if ($("#jspConfigureDetailSubForm").data('bootstrapValidator').isValid()) {//获取验证结果，如果成功，执行下面代码
|
||||
$.post(ext.contextPath + "/jspConfigure/jspConfigureDetailUpdate.do", $("#jspConfigureDetailSubForm").serialize(), function(data) {
|
||||
if (data.res == 1){
|
||||
showAlert('s','修改成功');
|
||||
initTreeView();
|
||||
}else if(data.res == 0){
|
||||
showAlert('d','修改失败');
|
||||
}else{
|
||||
showAlert('d',data.res);
|
||||
}
|
||||
},'json');
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
var dodel = function (id) {
|
||||
swal({
|
||||
text: "您确定要删除此记录？",
|
||||
dangerMode: true,
|
||||
buttons: {
|
||||
cancel: {
|
||||
text: "取消",
|
||||
value: null,
|
||||
visible: true,
|
||||
className: "btn btn-default btn-sm",
|
||||
closeModal: true,
|
||||
},
|
||||
confirm: {
|
||||
text: "确定",
|
||||
value: true,
|
||||
visible: true,
|
||||
className: "btn btn-danger btn-sm",
|
||||
closeModal: true
|
||||
}
|
||||
}
|
||||
})
|
||||
.then(function (willDelete) {
|
||||
if (willDelete) {
|
||||
$.post(ext.contextPath + '/jspConfigure/jspConfigureDetailDeletes.do', { ids: id }, function (data) {
|
||||
var result = data;
|
||||
if(result === 1){
|
||||
$("#menuBox").html('');
|
||||
initTreeView();
|
||||
}else{
|
||||
showAlert('d', '删除失败', 'mainAlertdiv');
|
||||
}
|
||||
},'json');
|
||||
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//输入框验证
|
||||
$("#jspConfigureDetailSubForm").bootstrapValidator({
|
||||
live: 'disabled',//验证时机，enabled是内容有变化就验证（默认），disabled和submitted是提交再验证
|
||||
fields: {
|
||||
dataName: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: '名称不能为空'
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
function selectmpids() {
|
||||
var mpids = $('#jspConfigureDetailSubForm #mpcode').val();
|
||||
$.post(ext.contextPath + '/work/mpoint/mpointList4LayerES.do', {
|
||||
mpids: mpids,
|
||||
// mpids: '',
|
||||
fucname: 'ckmpidDone'
|
||||
}, function (data) {
|
||||
$("#mpSelectDiv").html(data);
|
||||
openModal('subModalMpoint');
|
||||
});
|
||||
}
|
||||
|
||||
function ckmpidDone(data) {
|
||||
var arr = "";
|
||||
if(data.length>0){
|
||||
var arrs = data.split(',');
|
||||
arr = arrs[0]
|
||||
}
|
||||
$('#jspConfigureDetailSubForm #mpcode').val(arr);
|
||||
$('#jspConfigureDetailSubForm #value').val(0);
|
||||
closeModal('subModalMpoint');
|
||||
}
|
||||
$(function(){
|
||||
$("#active").select2({minimumResultsForSearch: 10}).val("${jspConfigureDetail.active}").trigger("change");
|
||||
})
|
||||
</script>
|
||||
|
||||
<div class="box box-primary">
|
||||
<div class="box-header with-border">
|
||||
<h3 class="box-title">详情</h3>
|
||||
|
||||
<div class="box-tools pull-right">
|
||||
<a onclick="doupdate()" class="btn btn-box-tool" data-toggle="tooltip" title="保存"><i
|
||||
class="glyphicon glyphicon-floppy-disk"></i></a>
|
||||
<a onclick="dodel('${jspConfigureDetail.id}')" class="btn btn-box-tool" data-toggle="tooltip" title="删除"><i
|
||||
class="glyphicon glyphicon-trash"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.box-header -->
|
||||
<div class="box-body ">
|
||||
<form class="form-horizontal" id="jspConfigureDetailSubForm">
|
||||
<!-- 界面提醒div强制id为alertDiv -->
|
||||
<div id="alertDiv"></div>
|
||||
<input type="hidden" id="id" name="id" value= "${jspConfigureDetail.id}">
|
||||
<input type="hidden" id="configureId" name="configureId" value= "${jspConfigureDetail.configureId}">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">*显示名称</label>
|
||||
<div class="col-sm-6">
|
||||
<input type="text" class="form-control" id="dataName" name ="dataName" placeholder="名称" value="${jspConfigureDetail.dataName}" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">数据点位</label>
|
||||
<div class="col-sm-6">
|
||||
<input type="text" class="form-control" id="mpcode" name ="mpcode" placeholder="数据点位" value="${jspConfigureDetail.mpcode}" onclick="selectmpids();" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">数据单位</label>
|
||||
<div class="col-sm-6">
|
||||
<input type="text" class="form-control" name ="unit" placeholder="数据单位" value="${jspConfigureDetail.unit}" >
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">默认数据</label>
|
||||
<div class="col-sm-6">
|
||||
<input type="text" class="form-control" id="value" name ="value" placeholder="默认数据" value="${jspConfigureDetail.value}" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">顺序</label>
|
||||
<div class="col-sm-6">
|
||||
<input type="text" class="form-control" id="morder" name ="morder" placeholder="顺序" value="${jspConfigureDetail.morder}" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">启用状态</label>
|
||||
<div class="col-sm-6">
|
||||
<select class="form-control select2" id="active" name ="active" style="width: 270px;">
|
||||
<option value= "1" selected = "selected">启用</option>
|
||||
<option value= "0">禁用</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
87
WebRoot/jsp/visual/jspEdit.jsp
Normal file
87
WebRoot/jsp/visual/jspEdit.jsp
Normal file
@ -0,0 +1,87 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function doupdate() {
|
||||
$("#subForm").bootstrapValidator('validate');//提交验证
|
||||
if ($("#subForm").data('bootstrapValidator').isValid()) {//获取验证结果，如果成功，执行下面代码
|
||||
$.post(ext.contextPath + "/visualjsp/doupdate.do", $("#subForm").serialize(), function(data) {
|
||||
if (data.res == 1) {
|
||||
closeModal('subModal');
|
||||
$("#table").bootstrapTable('refresh');
|
||||
}else if(data.res == 0){
|
||||
showAlert('d','更新失败');
|
||||
}else{
|
||||
showAlert('d',data.res);
|
||||
}
|
||||
},'json');
|
||||
}
|
||||
}
|
||||
$("#subForm").bootstrapValidator({
|
||||
live: 'disabled',//验证时机，enabled是内容有变化就验证（默认），disabled和submitted是提交再验证
|
||||
fields: {
|
||||
name: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: '名称不能为空'
|
||||
}
|
||||
}
|
||||
},jspCode: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: '识别编码不能为空'
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
$(function(){
|
||||
|
||||
})
|
||||
</script>
|
||||
<div class="modal fade" id="subModal">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span></button>
|
||||
<h4 class="modal-title">编辑界面</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<!-- 新增界面formid强制为subForm -->
|
||||
<form class="form-horizontal" id="subForm">
|
||||
<div id="alertDiv"></div>
|
||||
<input id ="id" name="id" type="hidden" value="${visualJsp.id}"/>
|
||||
<!-- 界面提醒div强制id为alertdiv -->
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">*名称</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="text" id="name" name="name" class="form-control" placeholder="名称" value="${visualJsp.name}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">*识别编码</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="text" id="jspCode" name="jspCode" class="form-control" value="${visualJsp.jspCode}"
|
||||
placeholder="识别编码">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">样式</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="text" id="style" name="style" class="form-control" value="${visualJsp.style}"
|
||||
placeholder="style">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
|
||||
<button type="button" class="btn btn-primary" onclick="doupdate()">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.modal-content -->
|
||||
</div>
|
||||
<!-- /.modal-dialog -->
|
||||
</div>
|
||||
240
WebRoot/jsp/visual/jspElementAdd.jsp
Normal file
240
WebRoot/jsp/visual/jspElementAdd.jsp
Normal file
@ -0,0 +1,240 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<style type="text/css">
|
||||
.select2-container .select2-selection--single {
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
}
|
||||
|
||||
.select2-selection__arrow {
|
||||
margin-top: 3px;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
//测量点选择
|
||||
// function showMPoint4SelectFun() {
|
||||
// $.post(ext.contextPath + '/plan/showMPoint4SingleSelect.do', {
|
||||
// formId: "subForm",
|
||||
// hiddenId: "parameter",
|
||||
// textId: "parameterNames",
|
||||
// mPointIds: $('#valueUrl').val()
|
||||
// }, function (data) {
|
||||
// $("#subDiv_select").html(data);
|
||||
// openModal('mpSubModal');
|
||||
// });
|
||||
// };
|
||||
//摄像头选择
|
||||
// function showCamera4SelectFun() {
|
||||
// $.post(ext.contextPath + '/work/camera/showCamera4Select.do', {
|
||||
// formId: "subForm",
|
||||
// hiddenId: "cameraId",
|
||||
// textId: "cameraName",
|
||||
// cameraId: $('#cameraId').val()
|
||||
// }, function (data) {
|
||||
// $("#subDiv_select").html(data);
|
||||
// openModal('camera4SelectModal');
|
||||
// });
|
||||
// };
|
||||
function dosave() {
|
||||
$("#subForm").bootstrapValidator('validate');//提交验证
|
||||
if ($("#subForm").data('bootstrapValidator').isValid()) {//获取验证结果，如果成功，执行下面代码
|
||||
$.post(ext.contextPath + "/visualjsp/dosaveJspElement.do", $("#subForm").serialize(), function (data) {
|
||||
if (data.res == 1) {
|
||||
closeModal('subModal')
|
||||
refresh();
|
||||
} else if (data.res == 0) {
|
||||
showAlert('d', '保存失败');
|
||||
} else {
|
||||
showAlert('d', data.res);
|
||||
}
|
||||
}, 'json');
|
||||
}
|
||||
}
|
||||
$("#subForm").bootstrapValidator({
|
||||
live: 'disabled',//验证时机，enabled是内容有变化就验证（默认），disabled和submitted是提交再验证
|
||||
fields: {
|
||||
name: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: '名称不能为空'
|
||||
}
|
||||
}
|
||||
},
|
||||
elementCode: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: '元素识别编码不能为空'
|
||||
}
|
||||
}
|
||||
},
|
||||
getValueType: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: '获取值方式不能为空'
|
||||
}
|
||||
}
|
||||
},
|
||||
valueUrl: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: '链接不能为空'
|
||||
}
|
||||
}
|
||||
},
|
||||
morder: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: '顺序不能为空'
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
});
|
||||
$(function () {
|
||||
// $.post(ext.contextPath + "/datatype/getDataType4Select2.do", {}, function (data) {
|
||||
// $("#dataType").empty();
|
||||
// var select = $("#dataType").select2({
|
||||
// data: data,
|
||||
// placeholder: '请选择',//默认文字提示
|
||||
// allowClear: false,//允许清空
|
||||
// escapeMarkup: function (markup) { return markup; }, // 自定义格式化防止xss注入
|
||||
// language: "zh-CN",
|
||||
// minimumInputLength: 0,
|
||||
// minimumResultsForSearch: 10,//数据超过十个启用搜索框
|
||||
// formatResult: function formatRepo(repo) { return repo.text; }, // 函数用来渲染结果
|
||||
// formatSelection: function formatRepoSelection(repo) { return repo.text; } // 函数用于呈现当前的选择
|
||||
// });
|
||||
// select.val(data[0].id).trigger("change");
|
||||
// }, 'json');
|
||||
|
||||
$.post(ext.contextPath + '/user/getUnitForTree_Selected.do', { ng: '' }, function (data) {
|
||||
$("#unitId").val(data[0].id);
|
||||
$("#unitName").val(data[0].text);
|
||||
//$table.bootstrapTable('refresh');//异步加载重新刷新，待修改
|
||||
$('#companytree').treeview({
|
||||
data: data,
|
||||
showBorder: false,
|
||||
levels: 3,
|
||||
});
|
||||
$('#companytree').on('nodeSelected', function (event, data) {
|
||||
$("#unitId").val(data.id);
|
||||
$("#unitName").val(data.text);
|
||||
document.getElementById('ul_tree').style.display = "none";
|
||||
});
|
||||
}, 'json');
|
||||
|
||||
//防止点击树的+号收起下拉框
|
||||
$("#ul_tree").on("click", function (e) {
|
||||
event.stopPropagation();
|
||||
});
|
||||
|
||||
})
|
||||
|
||||
//点击空白隐藏树
|
||||
$(document).click(function (e) {
|
||||
var divTree = $('#ul_tree'); // 设置目标区域
|
||||
if (!divTree.is(e.target) && divTree.has(e.target).length === 0) {
|
||||
divTree.hide()
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<div class="modal fade" id="subModal">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span></button>
|
||||
<h4 class="modal-title">新增JSP元素</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<!-- 新增界面formid强制为subForm -->
|
||||
<form class="form-horizontal" id="subForm" enctype="multipart/form-data">
|
||||
<!-- 界面提醒div强制id为alertDiv -->
|
||||
<div id="alertDiv"></div>
|
||||
<input id="pid" name="pid" type="hidden" value="${pid}" />
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">*名称</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="text" id="name" name="name" class="form-control" placeholder="名称">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">*元素识别编码</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="text" id="elementCode" name="elementCode" class="form-control"
|
||||
placeholder="元素识别编码">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">样式</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="text" id="style" name="style" class="form-control" placeholder="style">
|
||||
<span style="display: inline-block;">注:1.曲线图元素时可选择bar/line等echarts支持类型。</span>
|
||||
<span style="display: inline-block;">2.颜色元素填写方式。例：FFD568(不需要#)。</span>
|
||||
<span>3.背景图地址。例：/IMG/bg_2F/Q21-singleStatus.jpg。</span>
|
||||
<span style="display: inline-block;"> 4.其他元素可填写style样式类型。例：height:30%注意符号需要英文符号。</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">*获取值方式</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="text" id="getValueType" name="getValueType" class="form-control"
|
||||
placeholder="getValue/getHistory/getModbus/getHttp" value="getValue">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">*链接</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="text" id="valueUrl" name="valueUrl" class="form-control" placeholder="链接">
|
||||
<span style="display: inline-block;">注:1.getValue/getHistory/getModbus时填写生产库测量点id。</span>
|
||||
<span>2.getHTTP/getCacheData时填写http链接路径。</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="form-group">
|
||||
<label class="col-sm-3 control-label">摄像头</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="text" class="form-control" id="cameraName" name="cameraName"
|
||||
placeholder="选择摄像头" onclick="showCamera4SelectFun();" value="" readonly
|
||||
style="background-color: white">
|
||||
<input id="cameraId" name="cameraId" type="hidden" value="" />
|
||||
<span style="display: inline-block;">注:若为摄像头元素此选项必选。</span>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">*所属厂</label>
|
||||
<input id="unitId" name="unitId" type="hidden" />
|
||||
<div class="col-sm-7">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown" style="width:300px;"
|
||||
onclick="document.getElementById('ul_tree').style.display = 'block';">
|
||||
<input class="form-control " id="unitName" name="unitName" style="width: 100%"></input>
|
||||
</a>
|
||||
<ul id="ul_tree" class="dropdown-menu" data-stopPropagation="true" style="border-color:#ccc;">
|
||||
<li class="header">
|
||||
<div id="companytree" style="width: 275px;height:400px;overflow-y:scroll;overflow-x:hidden;"></div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">*顺序</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="number" id="morder" name="morder" class="form-control" placeholder="顺序" min="1"
|
||||
value="1">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
|
||||
<button type="button" class="btn btn-primary" onclick="dosave()">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.modal-content -->
|
||||
</div>
|
||||
<!-- /.modal-dialog -->
|
||||
</div>
|
||||
265
WebRoot/jsp/visual/jspElementEdit.jsp
Normal file
265
WebRoot/jsp/visual/jspElementEdit.jsp
Normal file
@ -0,0 +1,265 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
|
||||
<script type="text/javascript">
|
||||
//摄像头选择
|
||||
// function showCamera4SelectFun() {
|
||||
// $.post(ext.contextPath + '/work/camera/showCamera4Select.do', {
|
||||
// formId: "subForm",
|
||||
// hiddenId: "cameraId",
|
||||
// textId: "cameraName",
|
||||
// cameraId: $('#cameraId').val()
|
||||
// }, function (data) {
|
||||
// $("#subDiv_select").html(data);
|
||||
// openModal('camera4SelectModal');
|
||||
// });
|
||||
// };
|
||||
|
||||
var editMPointFun = function () {
|
||||
if ($('#valueUrl').val() != "") {
|
||||
$.post(ext.contextPath + '/visualjsp/editMPoint.do', { id: $('#valueUrl').val() }, function (data) {
|
||||
$("#subDiv_select").html(data);
|
||||
openModal('subModalEditMPoint');
|
||||
});
|
||||
} else {
|
||||
swal({
|
||||
text: "请先选择测量点",
|
||||
dangerMode: true,
|
||||
buttons: {
|
||||
cancel: {
|
||||
text: "知道了",
|
||||
value: null,
|
||||
visible: true,
|
||||
className: "btn btn-default btn-sm",
|
||||
closeModal: true,
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
};
|
||||
|
||||
function doupdate() {
|
||||
$("#subForm").bootstrapValidator('validate');//提交验证
|
||||
if ($("#subForm").data('bootstrapValidator').isValid()) {//获取验证结果，如果成功，执行下面代码
|
||||
$.post(ext.contextPath + "/visualjsp/doupdateJspElement.do", $("#subForm").serialize(), function (data) {
|
||||
if (data.res == 1) {
|
||||
closeModal('subModal');
|
||||
refresh();
|
||||
} else if (data.res == 0) {
|
||||
showAlert('d', '更新失败');
|
||||
} else {
|
||||
showAlert('d', data.res);
|
||||
}
|
||||
}, 'json');
|
||||
}
|
||||
}
|
||||
$("#subForm").bootstrapValidator({
|
||||
live: 'disabled',//验证时机，enabled是内容有变化就验证（默认），disabled和submitted是提交再验证
|
||||
fields: {
|
||||
name: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: '名称不能为空'
|
||||
}
|
||||
}
|
||||
},
|
||||
elementCode: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: '元素识别编码不能为空'
|
||||
}
|
||||
}
|
||||
},
|
||||
getValueType: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: '获取值方式不能为空'
|
||||
}
|
||||
}
|
||||
},
|
||||
valueUrl: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: '链接不能为空'
|
||||
}
|
||||
}
|
||||
},
|
||||
morder: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: '顺序不能为空'
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
$(function () {
|
||||
// $.post(ext.contextPath + "/datatype/getDataType4Select2.do", {}, function (data) {
|
||||
// $("#dataType").empty();
|
||||
// var select = $("#dataType").select2({
|
||||
// data: data,
|
||||
// placeholder: '请选择',//默认文字提示
|
||||
// allowClear: false,//允许清空
|
||||
// escapeMarkup: function (markup) { return markup; }, // 自定义格式化防止xss注入
|
||||
// language: "zh-CN",
|
||||
// minimumInputLength: 0,
|
||||
// minimumResultsForSearch: 10,//数据超过十个启用搜索框
|
||||
// formatResult: function formatRepo(repo) { return repo.text; }, // 函数用来渲染结果
|
||||
// formatSelection: function formatRepoSelection(repo) { return repo.text; } // 函数用于呈现当前的选择
|
||||
// });
|
||||
// select.val("${jspElement.dataType}").trigger("change");
|
||||
// fixSelect2ToTool("dataType");
|
||||
// }, 'json');
|
||||
|
||||
$.post(ext.contextPath + '/user/getUnitForTree_Selected.do', { ng: '' }, function (data) {
|
||||
$("#unitId").val('${jspElement.unitId}');
|
||||
$.post(ext.contextPath + '/user/getCompany.do', { id:'${jspElement.unitId}'}, function (data) {
|
||||
$("#unitName").val(data.content1[0].sname);
|
||||
}, 'json');
|
||||
// $("#unitId").val(data[0].id);
|
||||
// $("#unitName").val(data[0].text);
|
||||
//$table.bootstrapTable('refresh');//异步加载重新刷新，待修改
|
||||
$('#companytree').treeview({
|
||||
data: data,
|
||||
showBorder: false,
|
||||
levels: 3,
|
||||
});
|
||||
$('#companytree').on('nodeSelected', function (event, data) {
|
||||
$("#unitId").val(data.id);
|
||||
$("#unitName").val(data.text);
|
||||
document.getElementById('ul_tree').style.display = "none";
|
||||
});
|
||||
}, 'json');
|
||||
|
||||
//防止点击树的+号收起下拉框
|
||||
$("#ul_tree").on("click", function (e) {
|
||||
event.stopPropagation();
|
||||
});
|
||||
})
|
||||
|
||||
//点击空白隐藏树
|
||||
$(document).click(function (e) {
|
||||
var divTree = $('#ul_tree'); // 设置目标区域
|
||||
if (!divTree.is(e.target) && divTree.has(e.target).length === 0) {
|
||||
divTree.hide()
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<div class="modal fade" id="subModal">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span></button>
|
||||
<h4 class="modal-title">编辑JSP元素</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<!-- 新增界面formid强制为subForm -->
|
||||
<form class="form-horizontal" id="subForm">
|
||||
<div id="alertDiv"></div>
|
||||
<input id="id" name="id" type="hidden" value="${jspElement.id}" />
|
||||
<input id="pid" name="pid" type="hidden" value="${jspElement.pid}" />
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">*名称</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="text" id="name" name="name" class="form-control" placeholder="名称"
|
||||
value="${jspElement.name}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">*元素识别编码</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="text" id="elementCode" name="elementCode" class="form-control"
|
||||
placeholder="元素识别编码" value="${jspElement.elementCode}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">样式</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="text" id="style" name="style" class="form-control" value="${jspElement.style}"
|
||||
placeholder="style">
|
||||
<span style="display: inline-block;">注:1.曲线图元素时可选择bar/line等echarts支持类型。</span>
|
||||
<span
|
||||
style="display: inline-block;">2.颜色元素填写方式。例：FFD568(不需要#)。</span>
|
||||
<span>3.背景图地址。例：/IMG/bg_2F/Q21-singleStatus.jpg。</span>
|
||||
<span
|
||||
style="display: inline-block;"> 4.其他元素可填写style样式类型。例：height:30%注意符号需要英文符号。</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">*获取值方式</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="text" id="getValueType" name="getValueType" class="form-control"
|
||||
placeholder="getValue/getHistory/getModbus/getHttp" value="${jspElement.getValueType}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">*链接</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="text" id="valueUrl" name="valueUrl" class="form-control"
|
||||
value="${jspElement.valueUrl}" placeholder="链接">
|
||||
<span style="display: inline-block;">注:1.getValue/getHistory/getModbus时填写生产库测量点id。</span>
|
||||
<span>2.getHTTP/getCacheData时填写http链接路径。</span>
|
||||
</div>
|
||||
<div class="col-sm-2">
|
||||
<button type="button" class="btn btn-default btn-sm" title="更改测量点值"
|
||||
onclick="editMPointFun();"><i class="fa fa-edit"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">*所属厂</label>
|
||||
<input id="unitId" name="unitId" type="hidden" />
|
||||
<div class="col-sm-7">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown" style="width:300px;"
|
||||
onclick="document.getElementById('ul_tree').style.display = 'block';">
|
||||
<input class="form-control " id="unitName" name="unitName" style="width: 100%"></input>
|
||||
</a>
|
||||
<ul id="ul_tree" class="dropdown-menu" data-stopPropagation="true" style="border-color:#ccc;">
|
||||
<li class="header">
|
||||
<div id="companytree" style="width: 275px;height:400px;overflow-y:scroll;overflow-x:hidden;"></div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!--
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">*产线</label>
|
||||
<div class="col-sm-7">
|
||||
<select class="form-control select2" id="dataType" name="dataType"
|
||||
style="width: 100%"></select>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- <div class="form-group">
|
||||
<label class="col-sm-3 control-label">摄像头</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="text" class="form-control" id="cameraName" name="cameraName"
|
||||
placeholder="选择摄像头" onclick="showCamera4SelectFun();" value="${planInteraction.camera.name}" readonly
|
||||
style="background-color: white">
|
||||
<input id="cameraId" name="cameraId" type="hidden" value="${planInteraction.cameraId}" />
|
||||
<span style="display: inline-block;">注:若为摄像头元素此选项必选。</span>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">*顺序</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="number" id="morder" name="morder" class="form-control" placeholder="顺序" min="1"
|
||||
value="${jspElement.morder}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
|
||||
<button type="button" class="btn btn-primary" onclick="doupdate()">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.modal-content -->
|
||||
</div>
|
||||
<!-- /.modal-dialog -->
|
||||
</div>
|
||||
388
WebRoot/jsp/visual/jspList.jsp
Normal file
388
WebRoot/jsp/visual/jspList.jsp
Normal file
@ -0,0 +1,388 @@
|
||||
<%@page import="com.sipai.entity.maintenance.Maintenance"%>
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<title><%= ServerObject.atttable.get("TOPTITLE")%></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<link rel="stylesheet"
|
||||
href="<%=request.getContextPath()%>/node_modules/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.min.css" />
|
||||
<script type="text/javascript"
|
||||
src="<%=request.getContextPath()%>/node_modules/bootstrap-switch/dist/js/bootstrap-switch.min.js"
|
||||
charset="utf-8"></script>
|
||||
<script type="text/javascript">
|
||||
var addFun = function () {
|
||||
$.post(ext.contextPath + '/visualjsp/doadd.do', {}, function (data) {
|
||||
$("#subDiv").html(data);
|
||||
openModal('subModal');
|
||||
});
|
||||
};
|
||||
var editFun = function (id) {
|
||||
$.post(ext.contextPath + '/visualjsp/doedit.do', { id: id }, function (data) {
|
||||
$("#subDiv").html(data);
|
||||
openModal('subModal');
|
||||
});
|
||||
};
|
||||
var deleteFun = function (id) {
|
||||
swal({
|
||||
text: "您确定要删除此记录？",
|
||||
dangerMode: true,
|
||||
buttons: {
|
||||
cancel: {
|
||||
text: "取消",
|
||||
value: null,
|
||||
visible: true,
|
||||
className: "btn btn-default btn-sm",
|
||||
closeModal: true,
|
||||
},
|
||||
confirm: {
|
||||
text: "确定",
|
||||
value: true,
|
||||
visible: true,
|
||||
className: "btn btn-danger btn-sm",
|
||||
closeModal: true
|
||||
}
|
||||
}
|
||||
})
|
||||
.then(function (willDelete) {
|
||||
if (willDelete) {
|
||||
$.post(ext.contextPath + '/visualjsp/dodelete.do', { id: id }, function (data) {
|
||||
if (data == 1) {
|
||||
$("#table").bootstrapTable('refresh');
|
||||
} else {
|
||||
showAlert('d', '删除失败', 'mainAlertdiv');
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
var addDetailFun = function (pid, index) {
|
||||
$.post(ext.contextPath + '/visualjsp/doaddJspElement.do', { pid: pid }, function (data) {
|
||||
$("#subDiv").html(data);
|
||||
openModal('subModal');
|
||||
});
|
||||
//存入sessionStorage
|
||||
sessionStorage.setItem("index", index);
|
||||
};
|
||||
var editDetailFun = function (id) {
|
||||
$.post(ext.contextPath + '/visualjsp/doeditJspElement.do', { id: id }, function (data) {
|
||||
$("#subDiv").html(data);
|
||||
openModal('subModal');
|
||||
});
|
||||
};
|
||||
var deleteDetailFun = function (id) {
|
||||
swal({
|
||||
text: "您确定要删除此记录？",
|
||||
dangerMode: true,
|
||||
buttons: {
|
||||
cancel: {
|
||||
text: "取消",
|
||||
value: null,
|
||||
visible: true,
|
||||
className: "btn btn-default btn-sm",
|
||||
closeModal: true,
|
||||
},
|
||||
confirm: {
|
||||
text: "确定",
|
||||
value: true,
|
||||
visible: true,
|
||||
className: "btn btn-danger btn-sm",
|
||||
closeModal: true
|
||||
}
|
||||
}
|
||||
})
|
||||
.then(function (willDelete) {
|
||||
if (willDelete) {
|
||||
$.post(ext.contextPath + '/visualjsp/dodeleteJspElement.do', { id: id }, function (data) {
|
||||
if (data == 1) {
|
||||
refresh();
|
||||
} else {
|
||||
showAlert('d', '删除失败', 'mainAlertdiv');
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
});
|
||||
};
|
||||
var dosearch = function () {
|
||||
$("#table").bootstrapTable('refresh');
|
||||
};
|
||||
//通过sessionStorage自动展开
|
||||
var doExpend = function () {
|
||||
if (sessionStorage.getItem("index") != null) {
|
||||
$("#table").bootstrapTable('expandRow', sessionStorage.getItem("index"));
|
||||
}
|
||||
};
|
||||
var refresh = function () {
|
||||
$("#table").bootstrapTable('refresh');
|
||||
//打开已打开的子表
|
||||
setTimeout(doExpend, 500);
|
||||
};
|
||||
var initFun = function () {
|
||||
$("#table").bootstrapTable({ // 对应table标签的id
|
||||
url: ext.contextPath + '/visualjsp/getList.do', // 获取表格数据的url
|
||||
cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
|
||||
striped: true, //表格显示条纹，默认为false
|
||||
pagination: true, // 在表格底部显示分页组件，默认false
|
||||
pageList: [10, 20, 50], // 设置页面可以显示的数据条数
|
||||
pageSize: 20, // 页面数据条数
|
||||
pageNumber: 1, // 首页页码
|
||||
sidePagination: 'server', // 设置为服务器端分页
|
||||
//showFooter: true,//添加页脚
|
||||
queryParams: function (params) { // 请求服务器数据时发送的参数，可以在这里添加额外的查询参数，返回false则终止请求
|
||||
return {
|
||||
rows: params.limit, // 每页要显示的数据条数
|
||||
page: params.offset / params.limit + 1, // 每页显示数据的开始页码
|
||||
sort: params.sort, // 要排序的字段
|
||||
order: params.order,
|
||||
search_name: $('#search_name').val(),
|
||||
}
|
||||
},
|
||||
sortName: 'name', // 要排序的字段
|
||||
sortOrder: 'asc', // 排序规则
|
||||
detailView: true,//父子表
|
||||
columns: [
|
||||
/* {
|
||||
checkbox: true, // 显示一个勾选框
|
||||
}, */{
|
||||
field: 'name', // 返回json数据中的name
|
||||
title: '名称', // 表格表头显示文字
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle' // 上下居中
|
||||
}, {
|
||||
field: 'jspCode', // 返回json数据中的name
|
||||
title: '识别编码', // 表格表头显示文字
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle' // 上下居中
|
||||
}, {
|
||||
field: 'style', // 返回json数据中的name
|
||||
title: '样式', // 表格表头显示文字
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle' // 上下居中
|
||||
}, {
|
||||
title: "操作",
|
||||
align: 'center',
|
||||
valign: 'middle',
|
||||
width: 120, // 定义列的宽度，单位为像素px
|
||||
formatter: function (value, row, index) {
|
||||
var buts = '';
|
||||
buts += '<button class="btn btn-default btn-sm" onclick="editFun(\'' + row.id + '\')" data-toggle="tooltip" title="编辑"><i class="fa fa-edit "></i><span class="hidden-md hidden-lg"> 编辑</span></button>';
|
||||
buts += '<button class="btn btn-default btn-sm" onclick="deleteFun(\'' + row.id + '\')" data-toggle="tooltip" title="删除"><i class="fa fa-trash-o "></i><span class="hidden-md hidden-lg"> 删除</span></button>';
|
||||
buts += '<button class="btn btn-default btn-sm" onclick="addDetailFun(\'' + row.id + '\',\'' + index + '\')" data-toggle="tooltip" title="新增JSP元素"><i class="fa fa-plus "></i><span class="hidden-md hidden-lg"> 新增布局元素</span></button>';
|
||||
buts = '<div class = "btn-group">' + buts + '</div>';
|
||||
return buts;
|
||||
}
|
||||
}
|
||||
],
|
||||
//注册加载子表的事件。index：父表当前行的行索引,row：父表当前行的Json数据对象,$detail：当前行下面创建的新行里面的td对象。
|
||||
onExpandRow: function (index, row, $detail) {
|
||||
initDetailTable(index, row, $detail);
|
||||
//存入sessionStorage
|
||||
sessionStorage.setItem("index", index);
|
||||
},
|
||||
onLoadSuccess: function () { //加载成功时执行
|
||||
adjustBootstrapTableView("table");
|
||||
},
|
||||
onLoadError: function () { //加载失败时执行
|
||||
console.info("加载数据失败");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//初始化子表
|
||||
var initDetailTable = function (index, row, $detail) {
|
||||
var pid = row.id;
|
||||
var detailTable = $detail.html('<table></table>').find('table');
|
||||
$(detailTable).bootstrapTable({
|
||||
url: ext.contextPath + '/visualjsp/getJspElementList.do', // 获取表格数据的url
|
||||
cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
|
||||
striped: true, //表格显示条纹，默认为false
|
||||
pagination: true, // 在表格底部显示分页组件，默认false
|
||||
pageList: [10, 20, 50], // 设置页面可以显示的数据条数
|
||||
pageSize: 50, // 页面数据条数
|
||||
pageNumber: 1, // 首页页码
|
||||
sidePagination: 'server', // 设置为服务器端分页
|
||||
queryParams: function (params) { // 请求服务器数据时发送的参数，可以在这里添加额外的查询参数，返回false则终止请求
|
||||
return {
|
||||
rows: params.limit, // 每页要显示的数据条数
|
||||
page: params.offset / params.limit + 1, // 每页显示数据的开始页码
|
||||
sort: params.sort, // 要排序的字段
|
||||
order: params.order,
|
||||
dataType: $('#search_dataType').val(),
|
||||
pid: pid,
|
||||
}
|
||||
},
|
||||
sortName: 'morder,name', // 要排序的字段
|
||||
sortOrder: 'asc', // 排序规则
|
||||
columns: [
|
||||
{
|
||||
field: 'name', // 返回json数据中的name
|
||||
title: '名称', // 表格表头显示文字
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle', // 上下居中
|
||||
}, {
|
||||
field: 'elementCode', // 返回json数据中的name
|
||||
title: '元素识别编码', // 表格表头显示文字
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle', // 上下居中
|
||||
}, {
|
||||
field: 'style', // 返回json数据中的name
|
||||
title: '样式', // 表格表头显示文字
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle' // 上下居中
|
||||
}, {
|
||||
field: 'getValueType', // 返回json数据中的name
|
||||
title: '获取值方式', // 表格表头显示文字
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle', // 上下居中
|
||||
}, {
|
||||
field: 'valueUrl', // 返回json数据中的name
|
||||
title: '链接', // 表格表头显示文字
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle', // 上下居中
|
||||
},
|
||||
// {
|
||||
// field: 'cameraName', // 返回json数据中的name
|
||||
// title: '摄像头', // 表格表头显示文字
|
||||
// align: 'center', // 左右居中
|
||||
// valign: 'middle', // 上下居中
|
||||
// formatter: function (value, row, index) {
|
||||
// if (row.camera != null && row.camera != "") {
|
||||
// value = row.camera.name;
|
||||
// }
|
||||
// return value;
|
||||
// }
|
||||
// },
|
||||
{
|
||||
field: 'data_type', // 返回json数据中的name
|
||||
title: '产线', // 表格表头显示文字
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle', // 上下居中
|
||||
sortable: true,
|
||||
formatter: function (value, row, index) {
|
||||
if (row.dataType != null) {
|
||||
return row.dataTypeName;
|
||||
}
|
||||
}
|
||||
}, {
|
||||
field: 'morder', // 返回json数据中的name
|
||||
title: '顺序', // 表格表头显示文字
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle', // 上下居中
|
||||
sortable: true
|
||||
}, {
|
||||
title: "操作",
|
||||
align: 'center',
|
||||
valign: 'middle',
|
||||
width: 120, // 定义列的宽度，单位为像素px
|
||||
formatter: function (value, row, index) {
|
||||
var buts = '';
|
||||
buts += '<button class="btn btn-default btn-sm" onclick="editDetailFun(\'' + row.id + '\')" data-toggle="tooltip" title="编辑JSP元素"><i class="fa fa-edit "></i><span class="hidden-md hidden-lg"> 编辑JSP元素</span></button>';
|
||||
buts += '<button class="btn btn-default btn-sm" onclick="deleteDetailFun(\'' + row.id + '\')" data-toggle="tooltip" title="删除JSP元素"><i class="fa fa-trash-o "></i><span class="hidden-md hidden-lg"> 删除JSP元素</span></button>';
|
||||
buts = '<div class = "btn-group">' + buts + '</div>';
|
||||
return buts;
|
||||
}
|
||||
}
|
||||
],
|
||||
onLoadSuccess: function () { //加载成功时执行
|
||||
adjustBootstrapTableView("detailTable");
|
||||
},
|
||||
onLoadError: function () { //加载失败时执行
|
||||
console.info("加载数据失败");
|
||||
}
|
||||
});
|
||||
}
|
||||
$(function () {
|
||||
$.post(ext.contextPath + "/datatype/getDataType4Select2.do", {}, function (data) {
|
||||
$("#search_dataType").empty();
|
||||
var select = $("#search_dataType").select2({
|
||||
data: data,
|
||||
placeholder: '请选择',//默认文字提示
|
||||
allowClear: true,//允许清空
|
||||
escapeMarkup: function (markup) { return markup; }, // 自定义格式化防止xss注入
|
||||
language: "zh-CN",
|
||||
minimumInputLength: 0,
|
||||
minimumResultsForSearch: 10,//数据超过十个启用搜索框
|
||||
formatResult: function formatRepo(repo) { return repo.text; }, // 函数用来渲染结果
|
||||
formatSelection: function formatRepoSelection(repo) { return repo.text; } // 函数用于呈现当前的选择
|
||||
});
|
||||
select.val('').trigger("change");
|
||||
select.on("change", function (e) {
|
||||
refresh();
|
||||
});
|
||||
fixSelect2ToTool("search_dataType");
|
||||
}, 'json');
|
||||
initFun();
|
||||
});
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body onload="initMenu()" class="hold-transition ${cu.themeclass} sidebar-mini">
|
||||
<div class="wrapper">
|
||||
<div class="content-wrapper">
|
||||
<!-- Content Header (Page header) -->
|
||||
<section class="content-header">
|
||||
<h1 id="head_title"></h1>
|
||||
<ol class="breadcrumb">
|
||||
<li><a id='head_firstlevel' href="#"><i class="fa fa-dashboard"></i> </a></li>
|
||||
<!-- <li class="active">Here</li> -->
|
||||
</ol>
|
||||
</section>
|
||||
<!-- Main content -->
|
||||
<section class="content container-fluid">
|
||||
<div id="mainAlertdiv"></div>
|
||||
<div id="subDiv"></div>
|
||||
<div id="subDiv_select"></div>
|
||||
<div>
|
||||
<form id="searchForm">
|
||||
<div class="form-group form-inline" style="padding:0;">
|
||||
<div class="form-group pull-right">
|
||||
<div class="input-group input-group-sm pull-left">
|
||||
<label class="form-label">产线:</label>
|
||||
<select class="form-control select2" id="search_dataType" name="search_dataType"
|
||||
style="width: 160px"></select>
|
||||
</div>
|
||||
<div class="input-group input-group-sm" style="width: 250px;">
|
||||
<input type="text" id="search_name" name="search_name"
|
||||
class="form-control pull-right" placeholder="名称">
|
||||
<div class="input-group-btn">
|
||||
<button class="btn btn-default" onclick="dosearch();"><i
|
||||
class="fa fa-search"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="btn-group" style="width: 220px;padding-bottom:10px;">
|
||||
<button type="button" class="btn btn-default btn-sm" onclick="addFun();"><i
|
||||
class="fa fa-plus"></i> 新增</button>
|
||||
|
||||
<!-- <button type="button" class="btn btn-default btn-sm" onclick="deletesFun();"><i
|
||||
class="fa fa-trash-o"></i> 删除</button> -->
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<table id="table"></table>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
<!-- /.content -->
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
312
WebRoot/jsp/visual/layout4Select.jsp
Normal file
312
WebRoot/jsp/visual/layout4Select.jsp
Normal file
@ -0,0 +1,312 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
||||
<!DOCTYPE html>
|
||||
|
||||
<script type="text/javascript">
|
||||
var doSearchLayout = function () {
|
||||
$("#table_layout4Select").bootstrapTable('refresh');
|
||||
};
|
||||
function doSelect() {
|
||||
var checkedItems = $("#table_layout4Select").bootstrapTable('getAllSelections');
|
||||
//console.log("checkedItems",checkedItems);
|
||||
if (checkedItems.length != 0) {
|
||||
$('#${param.formId} #${param.hiddenId}').val(checkedItems[0].id);
|
||||
$('#${param.formId} #${param.textId}').val(checkedItems[0].name);
|
||||
//console.log(checkedItems[0].id);
|
||||
createPlanLayout(checkedItems[0].id);
|
||||
} else {
|
||||
showAlert('d', '尚未选择布局！', 'alertDiv');
|
||||
}
|
||||
|
||||
// var datas = "";
|
||||
// datas_name = "";
|
||||
// $.each(selectionIds, function (index, item) {
|
||||
// if (datas != "") {
|
||||
// datas += ",";
|
||||
// }
|
||||
// datas += item;
|
||||
// });
|
||||
// $.post(ext.contextPath + '/user/getUsersByIds.do', { userIds: datas }, function (resp) {
|
||||
// $.each(resp, function (index, item) {
|
||||
// if (datas_name != "") {
|
||||
// datas_name += ",";
|
||||
// }
|
||||
// datas_name += item.caption;
|
||||
// });
|
||||
// $('#${param.formId} #${param.hiddenId}').val(datas);
|
||||
// $('#${param.formId} #${param.textId}').val(datas_name);
|
||||
// closeModal("user4SelectModal")
|
||||
// }, 'json');
|
||||
};
|
||||
|
||||
function createPlanLayout(layoutId) {
|
||||
$.post(ext.contextPath + '/plan/createPlanLayout.do', { id: "${param.id}", layoutId: layoutId }, function (data) {
|
||||
if (data == 1) {
|
||||
showAlert('s', '布局保存成功');
|
||||
//判断布局table是否存在
|
||||
if (document.getElementById("table_layout")) {
|
||||
$("#table_layout").bootstrapTable('refresh');//刷新
|
||||
}
|
||||
closeModal("layout4SelectModal");
|
||||
} else {
|
||||
showAlert('d', '保存失败,请点击下方更新按钮');
|
||||
//判断布局table是否存在
|
||||
if (document.getElementById("table_layout")) {
|
||||
$("#table_layout").bootstrapTable('refresh');//刷新
|
||||
}
|
||||
closeModal("layout4SelectModal");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function stateFormatter(value, row, index) {
|
||||
var flag = false;
|
||||
$.each(eval('${layouts}'), function (index, item) {
|
||||
if (row.id == item.id) {
|
||||
flag = true;
|
||||
}
|
||||
});
|
||||
if (flag)
|
||||
return {
|
||||
checked: true//设置选中
|
||||
};
|
||||
return value;
|
||||
}
|
||||
var $table;
|
||||
var switchStatus = false;
|
||||
var selectionIds = []; //保存选中ids
|
||||
function initialSelectionIds() {
|
||||
var check_array = eval('${layouts}');
|
||||
if (check_array != null && check_array.length > 0) {
|
||||
selectionIds = new Array(check_array.length);
|
||||
for (var i = 0; i < check_array.length; i++) {
|
||||
selectionIds[i] = check_array[i].id;
|
||||
}
|
||||
}
|
||||
}
|
||||
function getCheckedIds() {
|
||||
var ids = "";
|
||||
var check_array = eval('${layouts}');
|
||||
$.each(check_array, function (index, item) {
|
||||
if (ids != "") {
|
||||
ids += ",";
|
||||
}
|
||||
ids += item.id;
|
||||
});
|
||||
return ids;
|
||||
}
|
||||
function queryParams(params) {
|
||||
var temp = {
|
||||
rows: params.limit, // 每页要显示的数据条数
|
||||
page: params.offset / params.limit + 1, // 每页显示数据的开始页码
|
||||
sort: params.sort, // 要排序的字段
|
||||
order: params.order,
|
||||
search_name: $('#search_name').val(),
|
||||
};
|
||||
var status = $('#switchBtn').bootstrapSwitch('state')
|
||||
if (status) {
|
||||
temp.checkedIds = getCheckedIds();
|
||||
}
|
||||
return temp;
|
||||
}
|
||||
$(function () {
|
||||
//jquery html()方法加载，导致box无法执行boxwidget(),手动初始化
|
||||
$('#searchBox').boxWidget();
|
||||
/* $("#search_pid").select2({
|
||||
ajax: {
|
||||
type:'POST',
|
||||
url: ext.contextPath +"/work/group/getListForSelect.do",
|
||||
dataType: 'json',
|
||||
delay: 250,
|
||||
processResults: function (data) {
|
||||
return {
|
||||
results: data
|
||||
}
|
||||
},
|
||||
cache: true
|
||||
},
|
||||
placeholder:'请选择部门',//默认文字提示
|
||||
allowClear: true,//允许清空
|
||||
escapeMarkup: function (markup) { return markup; }, // 自定义格式化防止xss注入
|
||||
language: "zh-CN",
|
||||
minimumInputLength: 0,
|
||||
minimumResultsForSearch: 10,//数据超过十个启用搜索框
|
||||
formatResult: function formatRepo(repo){return repo.text;}, // 函数用来渲染结果
|
||||
formatSelection: function formatRepoSelection(repo){return repo.text;} // 函数用于呈现当前的选择
|
||||
}); */
|
||||
//$("#active").select2({minimumResultsForSearch: 10}).val("${menu.active}").trigger("change");
|
||||
$('#switchBtn').bootstrapSwitch({
|
||||
onText: '是',
|
||||
offText: '否',
|
||||
size: "small",
|
||||
});
|
||||
$(".select2-selection--single").css({ 'height': '30px', 'paddingTop': '4px' });
|
||||
|
||||
initialSelectionIds();
|
||||
|
||||
$table = $("#table_layout4Select").bootstrapTable({ // 对应table标签的id
|
||||
url: ext.contextPath + '/layout/getList.do', // 获取表格数据的url
|
||||
//cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
|
||||
//clickToSelect: true,
|
||||
striped: true, //表格显示条纹，默认为false
|
||||
pagination: true, // 在表格底部显示分页组件，默认false
|
||||
pageList: [10, 20], // 设置页面可以显示的数据条数
|
||||
pageSize: 20, // 页面数据条数
|
||||
pageNumber: 1, // 首页页码
|
||||
sidePagination: 'server', // 设置为服务器端分页
|
||||
clickToSelect: true,
|
||||
responseHandler: responseHandler, //在渲染页面数据之前执行的方法，此配置很重要!!!!!!!
|
||||
queryParams: queryParams,
|
||||
queryParamsType: "limit",
|
||||
sortName: 'name', // 要排序的字段
|
||||
sortOrder: 'asc', // 排序规则
|
||||
singleSelect: true,
|
||||
/* showColumns: true,
|
||||
showRefresh: true, */
|
||||
columns: [
|
||||
{
|
||||
checkbox: true, // 显示一个勾选框
|
||||
//formatter: stateFormatter
|
||||
formatter: function (i, row) { // 每次加载 checkbox 时判断当前 row 的 id 是否已经存在全局 Set() 里
|
||||
if ($.inArray(row.id, Array.from(selectionIds)) != -1) { // 因为 Set是集合,需要先转换成数组
|
||||
return {
|
||||
checked: true // 存在则选中
|
||||
}
|
||||
}
|
||||
}
|
||||
}, {
|
||||
field: 'name', // 返回json数据中的name
|
||||
title: '名称', // 表格表头显示文字
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle', // 上下居中
|
||||
width: '25%'
|
||||
}, {
|
||||
field: 'style', // 返回json数据中的name
|
||||
title: '样式', // 表格表头显示文字
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle', // 上下居中
|
||||
width: '25%'
|
||||
}, {
|
||||
field: 'divId', // 返回json数据中的name
|
||||
title: '布局ID', // 表格表头显示文字
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle', // 上下居中
|
||||
width: '25%'
|
||||
}, {
|
||||
field: 'divClass', // 返回json数据中的name
|
||||
title: '前端显示class', // 表格表头显示文字
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle', // 上下居中
|
||||
width: '25%'
|
||||
},
|
||||
],
|
||||
onLoadSuccess: function () { //加载成功时执行
|
||||
adjustBootstrapTableView("table_layout4Select");
|
||||
},
|
||||
onLoadError: function () { //加载失败时执行
|
||||
console.info("加载数据失败");
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
//绑定选中事件、取消事件、全部选中、全部取消
|
||||
$table.on('check.bs.table check-all.bs.table uncheck.bs.table uncheck-all.bs.table', function (e, rows, obj) {
|
||||
if ('check' == e.type) {
|
||||
$('#table_layout4Select .checked').removeClass("checked");
|
||||
obj.parent().addClass("checked");
|
||||
checkedItem = rows;
|
||||
} else {
|
||||
obj.parent().removeClass("checked");
|
||||
checkedItem = "";
|
||||
}
|
||||
});
|
||||
});
|
||||
//选中事件操作数组
|
||||
var union = function (array, ids) {
|
||||
$.each(ids, function (i, id) {
|
||||
if ($.inArray(id, array) == -1) {
|
||||
array[array.length] = id;
|
||||
}
|
||||
});
|
||||
return array;
|
||||
};
|
||||
//取消选中事件操作数组
|
||||
var difference = function (array, ids) {
|
||||
$.each(ids, function (i, id) {
|
||||
var index = $.inArray(id, array);
|
||||
if (index != -1) {
|
||||
array.splice(index, 1);
|
||||
}
|
||||
});
|
||||
return array;
|
||||
};
|
||||
var _ = { "union": union, "difference": difference };
|
||||
|
||||
//表格分页之前处理多选框数据
|
||||
function responseHandler(res) {
|
||||
$.each(res.rows, function (i, row) {
|
||||
row.checkStatus = $.inArray(row.id, selectionIds) != -1; //判断当前行的数据id是否存在与选中的数组，存在则将多选框状态变为true
|
||||
});
|
||||
return res;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="modal fade" id="layout4SelectModal">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span></button>
|
||||
<h4 class="modal-title">选择布局(请单选)</h4>
|
||||
</div>
|
||||
<div class="modal-body " style="width:100%">
|
||||
<div id="alertDiv"></div>
|
||||
|
||||
<div class="box box-primary box-solid collapsed-box" id="searchBox" collapsed>
|
||||
<div class="box-header">
|
||||
<!-- tools box -->
|
||||
<div class="pull-right box-tools">
|
||||
<button type="button" class="btn btn-primary btn-sm pull-right" data-widget="collapse"
|
||||
style="margin-right: 5px;">
|
||||
<i class="fa fa-plus"></i></button>
|
||||
</div>
|
||||
<!-- /. tools -->
|
||||
<i class="fa fa-search"></i>
|
||||
</div>
|
||||
<div class="box-body collapse">
|
||||
<form class="form-horizontal ">
|
||||
<div class="form-group" style="margin-right: 20px;">
|
||||
<label class="col-sm-2 control-label">名称</label>
|
||||
<div class="col-sm-4">
|
||||
<input type="text" id="search_name" name="search_name" class="form-control input-sm" placeholder="名称"
|
||||
style="width:170px;">
|
||||
</div>
|
||||
<label class="col-sm-2 control-label">只看选中</label>
|
||||
<div class="col-sm-4">
|
||||
<div class="switch" data-on="primary" data-off="info">
|
||||
<input id="switchBtn" type="checkbox" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group" style="margin-right: 20px;">
|
||||
|
||||
<div class=" col-sm-offset-6 button-group" style="padding: 0;">
|
||||
<button type="button" class="btn btn-default btn-sm pull-right" onclick="doSearchLayout();"><i
|
||||
class="fa fa-search"> 搜索</i></button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div id="table_layout4Select" style="height:230px;overflow:auto;width:100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
|
||||
<button type="button" class="btn btn-primary" onclick="doSelect()">确认</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.modal-content -->
|
||||
</div>
|
||||
<!-- /.modal-dialog -->
|
||||
</div>
|
||||
100
WebRoot/jsp/visual/layoutAdd.jsp
Normal file
100
WebRoot/jsp/visual/layoutAdd.jsp
Normal file
@ -0,0 +1,100 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<style type="text/css">
|
||||
.select2-container .select2-selection--single {
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
}
|
||||
|
||||
.select2-selection__arrow {
|
||||
margin-top: 3px;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet"
|
||||
href="<%=request.getContextPath()%>/node_modules/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.min.css" />
|
||||
<script type="text/javascript"
|
||||
src="<%=request.getContextPath()%>/node_modules/bootstrap-switch/dist/js/bootstrap-switch.min.js"
|
||||
charset="utf-8"></script>
|
||||
<script type="text/javascript">
|
||||
function dosave() {
|
||||
$("#subForm").bootstrapValidator('validate');//提交验证
|
||||
if ($("#subForm").data('bootstrapValidator').isValid()) {//获取验证结果，如果成功，执行下面代码
|
||||
$.post(ext.contextPath + "/layout/dosave.do", $("#subForm").serialize(), function (data) {
|
||||
if (data.res == 1) {
|
||||
closeModal('subModal')
|
||||
$("#table").bootstrapTable('refresh');
|
||||
} else if (data.res == 0) {
|
||||
showAlert('d', '保存失败');
|
||||
} else {
|
||||
showAlert('d', data.res);
|
||||
}
|
||||
}, 'json');
|
||||
}
|
||||
}
|
||||
$("#subForm").bootstrapValidator({
|
||||
live: 'disabled',//验证时机，enabled是内容有变化就验证（默认），disabled和submitted是提交再验证
|
||||
fields: {
|
||||
name: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: '名称不能为空'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
});
|
||||
$(function () {
|
||||
|
||||
})
|
||||
</script>
|
||||
<div class="modal fade" id="subModal">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span></button>
|
||||
<h4 class="modal-title">新增布局</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<!-- 新增界面formid强制为subForm -->
|
||||
<form class="form-horizontal" id="subForm" enctype="multipart/form-data">
|
||||
<!-- 界面提醒div强制id为alertDiv -->
|
||||
<div id="alertDiv"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">*名称</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="text" id="name" name="name" class="form-control" placeholder="名称">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">样式</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="text" id="style" name="style" class="form-control" placeholder="style">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">布局ID</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="text" id="divId" name="divId" class="form-control" placeholder="布局ID">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">前端显示class</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="text" id="divClass" name="divClass" class="form-control" placeholder="class">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
|
||||
<button type="button" class="btn btn-primary" onclick="dosave()">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.modal-content -->
|
||||
</div>
|
||||
<!-- /.modal-dialog -->
|
||||
</div>
|
||||
122
WebRoot/jsp/visual/layoutDetailAdd.jsp
Normal file
122
WebRoot/jsp/visual/layoutDetailAdd.jsp
Normal file
@ -0,0 +1,122 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<style type="text/css">
|
||||
.select2-container .select2-selection--single {
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
}
|
||||
|
||||
.select2-selection__arrow {
|
||||
margin-top: 3px;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
function dosave() {
|
||||
$("#subForm").bootstrapValidator('validate');//提交验证
|
||||
if ($("#subForm").data('bootstrapValidator').isValid()) {//获取验证结果，如果成功，执行下面代码
|
||||
$.post(ext.contextPath + "/layout/dosaveDetail.do", $("#subForm").serialize(), function (data) {
|
||||
if (data.res == 1) {
|
||||
closeModal('subModal');
|
||||
refresh();
|
||||
} else if (data.res == 0) {
|
||||
showAlert('d', '保存失败');
|
||||
} else {
|
||||
showAlert('d', data.res);
|
||||
}
|
||||
}, 'json');
|
||||
}
|
||||
}
|
||||
$("#subForm").bootstrapValidator({
|
||||
live: 'disabled',//验证时机，enabled是内容有变化就验证（默认），disabled和submitted是提交再验证
|
||||
fields: {
|
||||
name: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: '名称不能为空'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
$(function () {
|
||||
|
||||
})
|
||||
</script>
|
||||
<div class="modal fade" id="subModal">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span></button>
|
||||
<h4 class="modal-title">新增布局元素</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<!-- 新增界面formid强制为subForm -->
|
||||
<form class="form-horizontal" id="subForm" enctype="multipart/form-data">
|
||||
<!-- 界面提醒div强制id为alertDiv -->
|
||||
<div id="alertDiv"></div>
|
||||
<input id ="pid" name="pid" type="hidden" value="${pid}"/>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">*名称</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="text" id="name" name="name" class="form-control" placeholder="名称">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">高度</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="text" id="height" name="height" class="form-control"
|
||||
placeholder="height(百分比)">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">宽度</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="text" id="width" name="width" class="form-control"
|
||||
placeholder="width(百分比)">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">行序号</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="number" id="rowno" name="rowno" class="form-control"
|
||||
placeholder="行序号" min="1" value="1">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">占列数</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="number" id="colspan" name="colspan" class="form-control"
|
||||
placeholder="colspan" min="1" value="1">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">占行数</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="number" id="rowspan" name="rowspan" class="form-control"
|
||||
placeholder="rowspan" min="1" value="1">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">顺序</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="number" id="morder" name="morder" class="form-control"
|
||||
placeholder="顺序" min="1" value="1">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
|
||||
<button type="button" class="btn btn-primary" onclick="dosave()">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.modal-content -->
|
||||
</div>
|
||||
<!-- /.modal-dialog -->
|
||||
</div>
|
||||
115
WebRoot/jsp/visual/layoutDetailEdit.jsp
Normal file
115
WebRoot/jsp/visual/layoutDetailEdit.jsp
Normal file
@ -0,0 +1,115 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function doupdate() {
|
||||
$("#subForm").bootstrapValidator('validate');//提交验证
|
||||
if ($("#subForm").data('bootstrapValidator').isValid()) {//获取验证结果，如果成功，执行下面代码
|
||||
$.post(ext.contextPath + "/layout/doupdateDetail.do", $("#subForm").serialize(), function (data) {
|
||||
if (data.res == 1) {
|
||||
closeModal('subModal');
|
||||
refresh();
|
||||
} else if (data.res == 0) {
|
||||
showAlert('d', '更新失败');
|
||||
} else {
|
||||
showAlert('d', data.res);
|
||||
}
|
||||
}, 'json');
|
||||
}
|
||||
}
|
||||
$("#subForm").bootstrapValidator({
|
||||
live: 'disabled',//验证时机，enabled是内容有变化就验证（默认），disabled和submitted是提交再验证
|
||||
fields: {
|
||||
name: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: '名称不能为空'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$(function () {
|
||||
|
||||
})
|
||||
</script>
|
||||
<div class="modal fade" id="subModal">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span></button>
|
||||
<h4 class="modal-title">编辑布局元素</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<!-- 新增界面formid强制为subForm -->
|
||||
<form class="form-horizontal" id="subForm">
|
||||
<div id="alertDiv"></div>
|
||||
<input id="id" name="id" type="hidden" value="${layoutDetail.id}" />
|
||||
<input id="pid" name="pid" type="hidden" value="${layoutDetail.pid}" />
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">*名称</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="text" id="name" name="name" class="form-control" placeholder="名称"
|
||||
value="${layoutDetail.name}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">高度</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="text" id="height" name="height" class="form-control"
|
||||
value="${layoutDetail.height}" placeholder="height(百分比)">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">宽度</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="text" id="width" name="width" class="form-control"
|
||||
value="${layoutDetail.width}" placeholder="width(百分比)">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">行序号</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="number" id="rowno" name="rowno" class="form-control" placeholder="行序号" min="1"
|
||||
value="${layoutDetail.rowno}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">占列数</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="number" id="colspan" name="colspan" class="form-control" placeholder="colspan"
|
||||
min="1" value="${layoutDetail.colspan}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">占行数</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="number" id="rowspan" name="rowspan" class="form-control" placeholder="rowspan"
|
||||
min="1" value="${layoutDetail.rowspan}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">顺序</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="number" id="morder" name="morder" class="form-control" placeholder="顺序" min="1"
|
||||
value="${layoutDetail.morder}">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
|
||||
<button type="button" class="btn btn-primary" onclick="doupdate()">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.modal-content -->
|
||||
</div>
|
||||
<!-- /.modal-dialog -->
|
||||
</div>
|
||||
90
WebRoot/jsp/visual/layoutEdit.jsp
Normal file
90
WebRoot/jsp/visual/layoutEdit.jsp
Normal file
@ -0,0 +1,90 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function doupdate() {
|
||||
$("#subForm").bootstrapValidator('validate');//提交验证
|
||||
if ($("#subForm").data('bootstrapValidator').isValid()) {//获取验证结果，如果成功，执行下面代码
|
||||
$.post(ext.contextPath + "/layout/doupdate.do", $("#subForm").serialize(), function(data) {
|
||||
if (data.res == 1) {
|
||||
closeModal('subModal');
|
||||
$("#table").bootstrapTable('refresh');
|
||||
}else if(data.res == 0){
|
||||
showAlert('d','更新失败');
|
||||
}else{
|
||||
showAlert('d',data.res);
|
||||
}
|
||||
},'json');
|
||||
}
|
||||
}
|
||||
$("#subForm").bootstrapValidator({
|
||||
live: 'disabled',//验证时机，enabled是内容有变化就验证（默认），disabled和submitted是提交再验证
|
||||
fields: {
|
||||
name: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: '名称不能为空'
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
$(function(){
|
||||
|
||||
})
|
||||
</script>
|
||||
<div class="modal fade" id="subModal">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span></button>
|
||||
<h4 class="modal-title">编辑界面</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<!-- 新增界面formid强制为subForm -->
|
||||
<form class="form-horizontal" id="subForm">
|
||||
<div id="alertDiv"></div>
|
||||
<input id ="id" name="id" type="hidden" value="${layout.id}"/>
|
||||
<!-- 界面提醒div强制id为alertdiv -->
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">*名称</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="text" id="name" name="name" class="form-control" placeholder="名称" value="${layout.name}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">样式</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="text" id="style" name="style" class="form-control" value="${layout.style}"
|
||||
placeholder="style">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">布局ID</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="text" id="divId" name="divId" class="form-control" value="${layout.divId}"
|
||||
placeholder="布局ID">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">前端显示class</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="text" id="divClass" name="divClass" class="form-control" value="${layout.divClass}"
|
||||
placeholder="class">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
|
||||
<button type="button" class="btn btn-primary" onclick="doupdate()">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.modal-content -->
|
||||
</div>
|
||||
<!-- /.modal-dialog -->
|
||||
</div>
|
||||
343
WebRoot/jsp/visual/layoutList.jsp
Normal file
343
WebRoot/jsp/visual/layoutList.jsp
Normal file
@ -0,0 +1,343 @@
|
||||
<%@page import="com.sipai.entity.maintenance.Maintenance"%>
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<title><%= ServerObject.atttable.get("TOPTITLE")%></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
|
||||
<script type="text/javascript">
|
||||
var addFun = function () {
|
||||
$.post(ext.contextPath + '/layout/doadd.do', {}, function (data) {
|
||||
$("#subDiv").html(data);
|
||||
openModal('subModal');
|
||||
});
|
||||
};
|
||||
var editFun = function (id) {
|
||||
$.post(ext.contextPath + '/layout/doedit.do', { id: id }, function (data) {
|
||||
$("#subDiv").html(data);
|
||||
openModal('subModal');
|
||||
});
|
||||
};
|
||||
var deleteFun = function (id) {
|
||||
swal({
|
||||
text: "您确定要删除此记录？",
|
||||
dangerMode: true,
|
||||
buttons: {
|
||||
cancel: {
|
||||
text: "取消",
|
||||
value: null,
|
||||
visible: true,
|
||||
className: "btn btn-default btn-sm",
|
||||
closeModal: true,
|
||||
},
|
||||
confirm: {
|
||||
text: "确定",
|
||||
value: true,
|
||||
visible: true,
|
||||
className: "btn btn-danger btn-sm",
|
||||
closeModal: true
|
||||
}
|
||||
}
|
||||
})
|
||||
.then(function (willDelete) {
|
||||
if (willDelete) {
|
||||
$.post(ext.contextPath + '/layout/dodelete.do', { id: id }, function (data) {
|
||||
if (data == 1) {
|
||||
$("#table").bootstrapTable('refresh');
|
||||
} else {
|
||||
showAlert('d', '删除失败', 'mainAlertdiv');
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
var addDetailFun = function (pid,index) {
|
||||
$.post(ext.contextPath + '/layout/doaddDetail.do', { pid: pid }, function (data) {
|
||||
$("#subDiv").html(data);
|
||||
openModal('subModal');
|
||||
});
|
||||
//存入sessionStorage
|
||||
sessionStorage.setItem("index", index);
|
||||
};
|
||||
var editDetailFun = function (id) {
|
||||
$.post(ext.contextPath + '/layout/doeditDetail.do', { id: id }, function (data) {
|
||||
$("#subDiv").html(data);
|
||||
openModal('subModal');
|
||||
});
|
||||
};
|
||||
var deleteDetailFun = function (id) {
|
||||
swal({
|
||||
text: "您确定要删除此记录？",
|
||||
dangerMode: true,
|
||||
buttons: {
|
||||
cancel: {
|
||||
text: "取消",
|
||||
value: null,
|
||||
visible: true,
|
||||
className: "btn btn-default btn-sm",
|
||||
closeModal: true,
|
||||
},
|
||||
confirm: {
|
||||
text: "确定",
|
||||
value: true,
|
||||
visible: true,
|
||||
className: "btn btn-danger btn-sm",
|
||||
closeModal: true
|
||||
}
|
||||
}
|
||||
})
|
||||
.then(function (willDelete) {
|
||||
if (willDelete) {
|
||||
$.post(ext.contextPath + '/layout/dodeleteDetail.do', { id: id }, function (data) {
|
||||
if (data == 1) {
|
||||
$("#table").bootstrapTable('refresh');
|
||||
} else {
|
||||
showAlert('d', '删除失败', 'mainAlertdiv');
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
});
|
||||
};
|
||||
var dosearch = function () {
|
||||
$("#table").bootstrapTable('refresh');
|
||||
};
|
||||
//通过sessionStorage自动展开
|
||||
var doExpend = function () {
|
||||
if (sessionStorage.getItem("index") != null) {
|
||||
$("#table").bootstrapTable('expandRow', sessionStorage.getItem("index"));
|
||||
}
|
||||
};
|
||||
var refresh = function () {
|
||||
$("#table").bootstrapTable('refresh');
|
||||
//打开已打开的子表
|
||||
setTimeout(doExpend,500);
|
||||
};
|
||||
var initFun = function () {
|
||||
$("#table").bootstrapTable({ // 对应table标签的id
|
||||
url: ext.contextPath + '/layout/getList.do', // 获取表格数据的url
|
||||
cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
|
||||
striped: true, //表格显示条纹，默认为false
|
||||
pagination: true, // 在表格底部显示分页组件，默认false
|
||||
pageList: [10, 20, 50], // 设置页面可以显示的数据条数
|
||||
pageSize: 10, // 页面数据条数
|
||||
pageNumber: 1, // 首页页码
|
||||
sidePagination: 'server', // 设置为服务器端分页
|
||||
//showFooter: true,//添加页脚
|
||||
queryParams: function (params) { // 请求服务器数据时发送的参数，可以在这里添加额外的查询参数，返回false则终止请求
|
||||
return {
|
||||
rows: params.limit, // 每页要显示的数据条数
|
||||
page: params.offset / params.limit + 1, // 每页显示数据的开始页码
|
||||
sort: params.sort, // 要排序的字段
|
||||
order: params.order,
|
||||
search_name: $('#search_name').val(),
|
||||
}
|
||||
},
|
||||
sortName: 'style', // 要排序的字段
|
||||
sortOrder: 'asc', // 排序规则
|
||||
detailView: true,//父子表
|
||||
columns: [
|
||||
/* {
|
||||
checkbox: true, // 显示一个勾选框
|
||||
}, */{
|
||||
field: 'name', // 返回json数据中的name
|
||||
title: '名称', // 表格表头显示文字
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle' // 上下居中
|
||||
}, {
|
||||
field: 'style', // 返回json数据中的name
|
||||
title: '样式', // 表格表头显示文字
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle' // 上下居中
|
||||
}, {
|
||||
field: 'divId', // 返回json数据中的name
|
||||
title: '布局ID', // 表格表头显示文字
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle' // 上下居中
|
||||
}, {
|
||||
field: 'divClass', // 返回json数据中的name
|
||||
title: '前端显示class', // 表格表头显示文字
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle' // 上下居中
|
||||
}, {
|
||||
title: "操作",
|
||||
align: 'center',
|
||||
valign: 'middle',
|
||||
width: 120, // 定义列的宽度，单位为像素px
|
||||
formatter: function (value, row, index) {
|
||||
var buts = '';
|
||||
buts += '<button class="btn btn-default btn-sm" onclick="editFun(\'' + row.id + '\')" data-toggle="tooltip" title="编辑"><i class="fa fa-edit "></i><span class="hidden-md hidden-lg"> 编辑</span></button>';
|
||||
buts += '<button class="btn btn-default btn-sm" onclick="deleteFun(\'' + row.id + '\')" data-toggle="tooltip" title="删除"><i class="fa fa-trash-o "></i><span class="hidden-md hidden-lg"> 删除</span></button>';
|
||||
buts += '<button class="btn btn-default btn-sm" onclick="addDetailFun(\'' + row.id + '\',\'' + index + '\')" data-toggle="tooltip" title="新增布局元素"><i class="fa fa-plus "></i><span class="hidden-md hidden-lg"> 新增布局元素</span></button>';
|
||||
buts = '<div class = "btn-group">' + buts + '</div>';
|
||||
return buts;
|
||||
}
|
||||
}
|
||||
],
|
||||
//注册加载子表的事件。index：父表当前行的行索引,row：父表当前行的Json数据对象,$detail：当前行下面创建的新行里面的td对象。
|
||||
onExpandRow: function (index, row, $detail) {
|
||||
initDetailTable(index, row, $detail);
|
||||
//存入sessionStorage
|
||||
sessionStorage.setItem("index", index);
|
||||
},
|
||||
onLoadSuccess: function () { //加载成功时执行
|
||||
adjustBootstrapTableView("table");
|
||||
},
|
||||
onLoadError: function () { //加载失败时执行
|
||||
console.info("加载数据失败");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//初始化子表
|
||||
var initDetailTable = function (index, row, $detail) {
|
||||
var pid = row.id;
|
||||
var detailTable = $detail.html('<table></table>').find('table');
|
||||
$(detailTable).bootstrapTable({
|
||||
url: ext.contextPath + '/layout/getDetailList.do', // 获取表格数据的url
|
||||
cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
|
||||
striped: true, //表格显示条纹，默认为false
|
||||
pagination: true, // 在表格底部显示分页组件，默认false
|
||||
pageList: [10, 20, 50], // 设置页面可以显示的数据条数
|
||||
pageSize: 10, // 页面数据条数
|
||||
pageNumber: 1, // 首页页码
|
||||
sidePagination: 'server', // 设置为服务器端分页
|
||||
queryParams: function (params) { // 请求服务器数据时发送的参数，可以在这里添加额外的查询参数，返回false则终止请求
|
||||
return {
|
||||
rows: params.limit, // 每页要显示的数据条数
|
||||
page: params.offset / params.limit + 1, // 每页显示数据的开始页码
|
||||
sort: params.sort, // 要排序的字段
|
||||
order: params.order,
|
||||
pid: pid,
|
||||
}
|
||||
},
|
||||
sortName: 'rowno,morder', // 要排序的字段
|
||||
sortOrder: 'asc', // 排序规则
|
||||
columns: [
|
||||
{
|
||||
field: 'name', // 返回json数据中的name
|
||||
title: '名称', // 表格表头显示文字
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle', // 上下居中
|
||||
}, {
|
||||
field: 'height', // 返回json数据中的name
|
||||
title: '高度', // 表格表头显示文字
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle', // 上下居中
|
||||
}, {
|
||||
field: 'width', // 返回json数据中的name
|
||||
title: '宽度', // 表格表头显示文字
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle' // 上下居中
|
||||
}, {
|
||||
field: 'rowno', // 返回json数据中的name
|
||||
title: '行列号', // 表格表头显示文字
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle', // 上下居中
|
||||
}, {
|
||||
field: 'colspan', // 返回json数据中的name
|
||||
title: '占列数', // 表格表头显示文字
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle', // 上下居中
|
||||
}, {
|
||||
field: 'rowspan', // 返回json数据中的name
|
||||
title: '占行数', // 表格表头显示文字
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle', // 上下居中
|
||||
}, {
|
||||
field: 'morder', // 返回json数据中的name
|
||||
title: '顺序', // 表格表头显示文字
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle' // 上下居中
|
||||
}, {
|
||||
title: "操作",
|
||||
align: 'center',
|
||||
valign: 'middle',
|
||||
width: 120, // 定义列的宽度，单位为像素px
|
||||
formatter: function (value, row, index) {
|
||||
var buts = '';
|
||||
buts += '<button class="btn btn-default btn-sm" onclick="editDetailFun(\'' + row.id + '\')" data-toggle="tooltip" title="编辑布局元素"><i class="fa fa-edit "></i><span class="hidden-md hidden-lg"> 编辑布局元素</span></button>';
|
||||
buts += '<button class="btn btn-default btn-sm" onclick="deleteDetailFun(\'' + row.id + '\')" data-toggle="tooltip" title="删除布局元素"><i class="fa fa-trash-o "></i><span class="hidden-md hidden-lg"> 删除布局元素</span></button>';
|
||||
buts = '<div class = "btn-group">' + buts + '</div>';
|
||||
return buts;
|
||||
}
|
||||
}
|
||||
],
|
||||
onLoadSuccess: function () { //加载成功时执行
|
||||
adjustBootstrapTableView("detailTable");
|
||||
},
|
||||
onLoadError: function () { //加载失败时执行
|
||||
console.info("加载数据失败");
|
||||
}
|
||||
});
|
||||
}
|
||||
$(function () {
|
||||
initFun();
|
||||
});
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body onload="initMenu()" class="hold-transition ${cu.themeclass} sidebar-mini">
|
||||
<div class="wrapper">
|
||||
<div class="content-wrapper">
|
||||
<!-- Content Header (Page header) -->
|
||||
<section class="content-header">
|
||||
<h1 id="head_title"></h1>
|
||||
<ol class="breadcrumb">
|
||||
<li><a id='head_firstlevel' href="#"><i class="fa fa-dashboard"></i> </a></li>
|
||||
<!-- <li class="active">Here</li> -->
|
||||
</ol>
|
||||
</section>
|
||||
<!-- Main content -->
|
||||
<section class="content container-fluid">
|
||||
<div id="mainAlertdiv"></div>
|
||||
<div id="subDiv"></div>
|
||||
<div>
|
||||
<form id="searchForm">
|
||||
<div class="form-group form-inline" style="padding:0;">
|
||||
<div class="form-group pull-right">
|
||||
<div class="input-group input-group-sm" style="width: 250px;">
|
||||
<input type="text" id="search_name" name="search_name"
|
||||
class="form-control pull-right" placeholder="名称">
|
||||
<div class="input-group-btn">
|
||||
<button class="btn btn-default" onclick="dosearch();"><i
|
||||
class="fa fa-search"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="btn-group" style="width: 220px;padding-bottom:10px;">
|
||||
<button type="button" class="btn btn-default btn-sm" onclick="addFun();"><i
|
||||
class="fa fa-plus"></i> 新增</button>
|
||||
|
||||
<!-- <button type="button" class="btn btn-default btn-sm" onclick="deletesFun();"><i
|
||||
class="fa fa-trash-o"></i> 删除</button> -->
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<table id="table"></table>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
<!-- /.content -->
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
252
WebRoot/jsp/visual/mPointListForVisualSelect.jsp
Normal file
252
WebRoot/jsp/visual/mPointListForVisualSelect.jsp
Normal file
@ -0,0 +1,252 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ page import="com.sipai.tools.SessionManager"%>
|
||||
<%
|
||||
SessionManager sessionManager = new SessionManager();
|
||||
%>
|
||||
<%@page import="com.sipai.entity.scada.MPoint"%>
|
||||
<%request.setAttribute("Flag_Enable",MPoint.Flag_Enable);%>
|
||||
<%request.setAttribute("Flag_Disable",MPoint.Flag_Disable);%>
|
||||
|
||||
<script type="text/javascript">
|
||||
var dosearchMp = function () {
|
||||
$("#table_mpoint").bootstrapTable('refresh');
|
||||
};
|
||||
function doselect() {
|
||||
var checkedItems = $("#table_mpoint").bootstrapTable('getAllSelections');
|
||||
if (checkedItems.length != 0) {
|
||||
$('#${param.formId} #${param.hiddenId}').val(checkedItems[0].id);
|
||||
$('#${param.formId} #${param.textId}').val(checkedItems[0].name);
|
||||
//console.log(checkedItems[0].id);
|
||||
}
|
||||
closeModal("mpSubModal");
|
||||
};
|
||||
|
||||
function initialSelectionIds() {
|
||||
//var check_array = new Array();
|
||||
selectionIds = "${param.mPointIds}".split(",");
|
||||
// if (check_array != null && check_array.length > 0) {
|
||||
// selectionIds = new Array(check_array.length);
|
||||
// for (var i = 0; i < check_array.length; i++) {
|
||||
// selectionIds[i] = check_array[i];
|
||||
// }
|
||||
// }
|
||||
//var checks = "${param.mPointIds}".split(",");
|
||||
//check_array = [].slice.call(checks);
|
||||
}
|
||||
|
||||
//显示已经勾选的数据
|
||||
function stateFormatter(value, row, index) {
|
||||
var flag = false;
|
||||
if (row.id == '${mpid}') {
|
||||
flag = true;
|
||||
checkedItem = "";
|
||||
}
|
||||
if (flag)
|
||||
return {
|
||||
checked: true//设置选中
|
||||
};
|
||||
return value;
|
||||
}
|
||||
|
||||
function getCheckedIds() {
|
||||
var ids = "";
|
||||
var check_array = $("#table_mpoint").bootstrapTable('getAllSelections');
|
||||
$.each(check_array, function (index, item) {
|
||||
if (ids != "") {
|
||||
ids += ",";
|
||||
}
|
||||
ids += item.id;
|
||||
});
|
||||
return ids;
|
||||
}
|
||||
|
||||
var $table;
|
||||
var switchStatus = false;
|
||||
var selectionIds = []; //保存选中ids s
|
||||
function queryParams(params) {
|
||||
var temp = {
|
||||
//pid: params.pid,
|
||||
rows: params.limit, // 每页要显示的数据条数
|
||||
page: params.offset / params.limit + 1, // 每页显示数据的开始页码
|
||||
sort: params.sort, // 要排序的字段
|
||||
order: params.order, // 排序规则
|
||||
search_name: $('#search_mpointname').val(),
|
||||
search_mpointcode: $('#search_mpointcode').val(),
|
||||
};
|
||||
var status = $('#switchBtn').bootstrapSwitch('state')
|
||||
if (status) {
|
||||
temp.checkedIds = getCheckedIds();
|
||||
}
|
||||
return temp;
|
||||
}
|
||||
$(function () {
|
||||
$('#switchBtn').bootstrapSwitch({
|
||||
onText: '是',
|
||||
offText: '否',
|
||||
size: "small",
|
||||
});
|
||||
$(".select2-selection--single").css({ 'height': '30px', 'paddingTop': '4px' });
|
||||
initialSelectionIds();
|
||||
$table = $("#table_mpoint").bootstrapTable({ // 对应table标签的id
|
||||
url: ext.contextPath + '/work/mpoint/getlist.do', // 获取表格数据的url
|
||||
//cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
|
||||
clickToSelect: true,
|
||||
striped: true, //表格显示条纹，默认为false
|
||||
pagination: true, // 在表格底部显示分页组件，默认false
|
||||
pageList: [10, 20], // 设置页面可以显示的数据条数
|
||||
pageSize: 10, // 页面数据条数
|
||||
pageNumber: 1, // 首页页码
|
||||
sidePagination: 'server', // 设置为服务器端分页
|
||||
responseHandler: responseHandler, //在渲染页面数据之前执行的方法，此配置很重要!!!!!!!
|
||||
queryParams: queryParams,
|
||||
queryParamsType: "limit",
|
||||
sortName: 'id', // 要排序的字段
|
||||
sortOrder: 'desc', // 排序规则
|
||||
/* showColumns: true,
|
||||
showRefresh: true, */
|
||||
columns: [
|
||||
{
|
||||
checkbox: true, // 显示一个勾选框
|
||||
//formatter: stateFormatter
|
||||
formatter: function (i, row) { // 每次加载 checkbox 时判断当前 row 的 id 是否已经存在全局 Set() 里
|
||||
if ($.inArray(row.id, Array.from(selectionIds)) != -1) { // 因为 Set是集合,需要先转换成数组
|
||||
return {
|
||||
checked: true // 存在则选中
|
||||
}
|
||||
}
|
||||
}
|
||||
}, {
|
||||
field: 'mpointcode', // 返回json数据中的name
|
||||
title: '测量点Code', // 表格表头显示文字
|
||||
sortable: true,
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle' // 上下居中
|
||||
}, {
|
||||
field: 'parmname', // 返回json数据中的name
|
||||
title: '名称', // 表格表头显示文字
|
||||
sortable: true,
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle' // 上下居中
|
||||
}, {
|
||||
field: 'signaltype', // 返回json数据中的name
|
||||
title: '信号类型', // 表格表头显示文字
|
||||
sortable: true,
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle' // 上下居中
|
||||
}, {
|
||||
field: 'active', // 返回json数据中的name
|
||||
title: '启用状态', // 表格表头显示文字
|
||||
sortable: true,
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle',
|
||||
formatter: function (value, row) {
|
||||
if ('${Flag_Enable}' == value) {
|
||||
return "启用";
|
||||
} else {
|
||||
return "禁用";
|
||||
}
|
||||
} // 上下居中
|
||||
}
|
||||
],
|
||||
onLoadSuccess: function () { //加载成功时执行
|
||||
adjustBootstrapTableView("table_mpoint");
|
||||
},
|
||||
onLoadError: function () { //加载失败时执行
|
||||
console.info("加载数据失败");
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
//绑定选中事件、取消事件、全部选中、全部取消
|
||||
$table.on('check.bs.table check-all.bs.table uncheck.bs.table uncheck-all.bs.table', function (e, rows, obj) {
|
||||
if ('check' == e.type) {
|
||||
$('#table_layout4Select .checked').removeClass("checked");
|
||||
obj.parent().addClass("checked");
|
||||
checkedItem = rows;
|
||||
} else {
|
||||
obj.parent().removeClass("checked");
|
||||
checkedItem = "";
|
||||
}
|
||||
});
|
||||
//选中事件操作数组
|
||||
var union = function (array, ids) {
|
||||
$.each(ids, function (i, id) {
|
||||
if ($.inArray(id, array) == -1) {
|
||||
array[array.length] = id;
|
||||
}
|
||||
});
|
||||
return array;
|
||||
};
|
||||
//取消选中事件操作数组
|
||||
var difference = function (array, ids) {
|
||||
$.each(ids, function (i, id) {
|
||||
var index = $.inArray(id, array);
|
||||
if (index != -1) {
|
||||
array.splice(index, 1);
|
||||
}
|
||||
});
|
||||
return array;
|
||||
};
|
||||
var _ = { "union": union, "difference": difference };
|
||||
|
||||
//表格分页之前处理多选框数据
|
||||
function responseHandler(res) {
|
||||
$.each(res.rows, function (i, row) {
|
||||
row.checkStatus = $.inArray(row.id, selectionIds) != -1; //判断当前行的数据id是否存在与选中的数组，存在则将多选框状态变为true
|
||||
});
|
||||
return res;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<div class="modal fade" id="mpSubModal">
|
||||
<div class="modal-dialog modal-md">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span></button>
|
||||
<h4 class="modal-title">选择测量点</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div id="mpoint_mainAlertdiv"></div>
|
||||
<div id="modal-body">
|
||||
<div class="form-group pull-right form-inline">
|
||||
<div class="form-group" style="margin-right: 20px;width:100%">
|
||||
<label class="col-sm-2 control-label">只看选中</label>
|
||||
<div class="col-sm-2">
|
||||
<div class="switch" data-on="primary" data-off="info">
|
||||
<input id="switchBtn" type="checkbox" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-8">
|
||||
<div class="input-group input-group-sm " style="width: 160px;">
|
||||
<input type="text" id="search_mpointname" name="search_mpointname"
|
||||
class="form-control pull-right" placeholder="点位名称">
|
||||
</div>
|
||||
<div class="input-group input-group-sm " style="width: 160px;">
|
||||
<input type="text" id="search_mpointcode" name="search_mpointcode"
|
||||
class="form-control " placeholder="点位编码">
|
||||
<div class="input-group-btn">
|
||||
<button class="btn btn-default" onclick="dosearchMp();"><i
|
||||
class="fa fa-search"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-scrollable">
|
||||
<table class="table table-bordered table-striped" style="overflow:auto;width:100%"
|
||||
id="table_mpoint"></table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
|
||||
<button type="button" class="btn btn-primary" onclick="doselect()" id="btn_save">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.modal-content -->
|
||||
</div>
|
||||
<!-- /.modal-dialog -->
|
||||
</div>
|
||||
265
WebRoot/jsp/visual/mPointListForVisualSelects.jsp
Normal file
265
WebRoot/jsp/visual/mPointListForVisualSelects.jsp
Normal file
@ -0,0 +1,265 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ page import="com.sipai.tools.SessionManager"%>
|
||||
<%
|
||||
SessionManager sessionManager = new SessionManager();
|
||||
%>
|
||||
<%@page import="com.sipai.entity.scada.MPoint"%>
|
||||
<%request.setAttribute("Flag_Enable",MPoint.Flag_Enable);%>
|
||||
<%request.setAttribute("Flag_Disable",MPoint.Flag_Disable);%>
|
||||
|
||||
<script type="text/javascript">
|
||||
var dosearchMp = function () {
|
||||
$("#table_mpoint").bootstrapTable('refresh');
|
||||
};
|
||||
function doselect() {
|
||||
var checkedItems = $("#table_mpoint").bootstrapTable('getAllSelections');
|
||||
//console.log("checkedItems",checkedItems);
|
||||
var itemNameStr = "";
|
||||
var itemIdStr = "";
|
||||
for (var i = 0; i < checkedItems.length; i++) {
|
||||
if (i == 0) {
|
||||
itemIdStr = checkedItems[i].id;
|
||||
itemNameStr = checkedItems[i].parmname;
|
||||
} else {
|
||||
itemIdStr += "," + checkedItems[i].id;
|
||||
itemNameStr += "," + checkedItems[i].parmname;
|
||||
}
|
||||
}
|
||||
$('#${param.formId} #${param.hiddenId}').val(itemIdStr);
|
||||
$('#${param.formId} #${param.textId}').val(itemNameStr);
|
||||
closeModal("mpSubModal");
|
||||
};
|
||||
|
||||
function initialSelectionIds() {
|
||||
//var check_array = new Array();
|
||||
selectionIds = "${param.mPointIds}".split(",");
|
||||
// if (check_array != null && check_array.length > 0) {
|
||||
// selectionIds = new Array(check_array.length);
|
||||
// for (var i = 0; i < check_array.length; i++) {
|
||||
// selectionIds[i] = check_array[i];
|
||||
// }
|
||||
// }
|
||||
//var checks = "${param.mPointIds}".split(",");
|
||||
//check_array = [].slice.call(checks);
|
||||
}
|
||||
|
||||
//显示已经勾选的数据
|
||||
function stateFormatter(value, row, index) {
|
||||
var flag = false;
|
||||
if (row.id == '${mpid}') {
|
||||
flag = true;
|
||||
checkedItem = "";
|
||||
}
|
||||
if (flag)
|
||||
return {
|
||||
checked: true//设置选中
|
||||
};
|
||||
return value;
|
||||
}
|
||||
|
||||
function getCheckedIds() {
|
||||
var ids = "";
|
||||
var check_array = $("#table_mpoint").bootstrapTable('getAllSelections');
|
||||
//console.log("check_array",check_array);
|
||||
$.each(check_array, function (index, item) {
|
||||
if (ids != "") {
|
||||
ids += ",";
|
||||
}
|
||||
ids += item.id;
|
||||
});
|
||||
return ids;
|
||||
}
|
||||
|
||||
var $table;
|
||||
var switchStatus = false;
|
||||
var selectionIds = []; //保存选中ids s
|
||||
function queryParams(params) {
|
||||
var temp = {
|
||||
//pid: params.pid,
|
||||
rows: params.limit, // 每页要显示的数据条数
|
||||
page: params.offset / params.limit + 1, // 每页显示数据的开始页码
|
||||
sort: params.sort, // 要排序的字段
|
||||
order: params.order, // 排序规则
|
||||
search_name: $('#search_mpointname').val(),
|
||||
search_mpointcode: $('#search_mpointcode').val(),
|
||||
};
|
||||
var status = $('#switchBtn').bootstrapSwitch('state')
|
||||
if (status) {
|
||||
temp.checkedIds = getCheckedIds();
|
||||
}
|
||||
return temp;
|
||||
}
|
||||
$(function () {
|
||||
$('#switchBtn').bootstrapSwitch({
|
||||
onText: '是',
|
||||
offText: '否',
|
||||
size: "small",
|
||||
});
|
||||
$(".select2-selection--single").css({ 'height': '30px', 'paddingTop': '4px' });
|
||||
initialSelectionIds();
|
||||
$table = $("#table_mpoint").bootstrapTable({ // 对应table标签的id
|
||||
url: ext.contextPath + '/work/mpoint/getlist.do', // 获取表格数据的url
|
||||
//cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
|
||||
clickToSelect: true,
|
||||
striped: true, //表格显示条纹，默认为false
|
||||
pagination: true, // 在表格底部显示分页组件，默认false
|
||||
pageList: [10, 20], // 设置页面可以显示的数据条数
|
||||
pageSize: 10, // 页面数据条数
|
||||
pageNumber: 1, // 首页页码
|
||||
sidePagination: 'server', // 设置为服务器端分页
|
||||
responseHandler: responseHandler, //在渲染页面数据之前执行的方法，此配置很重要!!!!!!!
|
||||
queryParams: queryParams,
|
||||
queryParamsType: "limit",
|
||||
sortName: 'id', // 要排序的字段
|
||||
sortOrder: 'desc', // 排序规则
|
||||
/* showColumns: true,
|
||||
showRefresh: true, */
|
||||
columns: [
|
||||
{
|
||||
checkbox: true, // 显示一个勾选框
|
||||
//formatter: stateFormatter
|
||||
formatter: function (i, row) { // 每次加载 checkbox 时判断当前 row 的 id 是否已经存在全局 Set() 里
|
||||
if ($.inArray(row.id, Array.from(selectionIds)) != -1) { // 因为 Set是集合,需要先转换成数组
|
||||
return {
|
||||
checked: true // 存在则选中
|
||||
}
|
||||
}
|
||||
}
|
||||
}, {
|
||||
field: 'mpointcode', // 返回json数据中的name
|
||||
title: '测量点Code', // 表格表头显示文字
|
||||
sortable: true,
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle' // 上下居中
|
||||
}, {
|
||||
field: 'parmname', // 返回json数据中的name
|
||||
title: '名称', // 表格表头显示文字
|
||||
sortable: true,
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle' // 上下居中
|
||||
}, {
|
||||
field: 'signaltype', // 返回json数据中的name
|
||||
title: '信号类型', // 表格表头显示文字
|
||||
sortable: true,
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle' // 上下居中
|
||||
}, {
|
||||
field: 'active', // 返回json数据中的name
|
||||
title: '启用状态', // 表格表头显示文字
|
||||
sortable: true,
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle',
|
||||
formatter: function (value, row) {
|
||||
if ('${Flag_Enable}' == value) {
|
||||
return "启用";
|
||||
} else {
|
||||
return "禁用";
|
||||
}
|
||||
} // 上下居中
|
||||
}
|
||||
],
|
||||
onLoadSuccess: function () { //加载成功时执行
|
||||
adjustBootstrapTableView("table_mpoint");
|
||||
},
|
||||
onLoadError: function () { //加载失败时执行
|
||||
console.info("加载数据失败");
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
//绑定选中事件、取消事件、全部选中、全部取消
|
||||
$table.on('check.bs.table check-all.bs.table uncheck.bs.table uncheck-all.bs.table', function (e, rows, obj) {
|
||||
var ids = $.map(!$.isArray(rows) ? [rows] : rows, function (row) {
|
||||
return row.id;
|
||||
});
|
||||
func = $.inArray(e.type, ['check', 'check-all']) > -1 ? 'union' : 'difference';
|
||||
selectionIds = _[func](selectionIds, ids);
|
||||
if ('check' == e.type) {
|
||||
obj.parent().addClass("checked");
|
||||
} else {
|
||||
obj.parent().removeClass("checked");
|
||||
}
|
||||
//adjustBootstrapTableView("table_layout4Select");
|
||||
});
|
||||
//选中事件操作数组
|
||||
var union = function (array, ids) {
|
||||
$.each(ids, function (i, id) {
|
||||
if ($.inArray(id, array) == -1) {
|
||||
array[array.length] = id;
|
||||
}
|
||||
});
|
||||
return array;
|
||||
};
|
||||
//取消选中事件操作数组
|
||||
var difference = function (array, ids) {
|
||||
$.each(ids, function (i, id) {
|
||||
var index = $.inArray(id, array);
|
||||
if (index != -1) {
|
||||
array.splice(index, 1);
|
||||
}
|
||||
});
|
||||
return array;
|
||||
};
|
||||
var _ = { "union": union, "difference": difference };
|
||||
|
||||
//表格分页之前处理多选框数据
|
||||
function responseHandler(res) {
|
||||
$.each(res.rows, function (i, row) {
|
||||
row.checkStatus = $.inArray(row.id, selectionIds) != -1; //判断当前行的数据id是否存在与选中的数组，存在则将多选框状态变为true
|
||||
});
|
||||
return res;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<div class="modal fade" id="mpSubModal">
|
||||
<div class="modal-dialog modal-md">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span></button>
|
||||
<h4 class="modal-title">选择测量点</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div id="mpoint_mainAlertdiv"></div>
|
||||
<div id="modal-body">
|
||||
<div class="form-group pull-right form-inline">
|
||||
<div class="form-group" style="margin-right: 20px;width:100%">
|
||||
<label class="col-sm-2 control-label">只看选中</label>
|
||||
<div class="col-sm-2">
|
||||
<div class="switch" data-on="primary" data-off="info">
|
||||
<input id="switchBtn" type="checkbox" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-8">
|
||||
<div class="input-group input-group-sm " style="width: 160px;">
|
||||
<input type="text" id="search_mpointname" name="search_mpointname"
|
||||
class="form-control pull-right" placeholder="点位名称">
|
||||
</div>
|
||||
<div class="input-group input-group-sm " style="width: 160px;">
|
||||
<input type="text" id="search_mpointcode" name="search_mpointcode"
|
||||
class="form-control " placeholder="点位编码">
|
||||
<div class="input-group-btn">
|
||||
<button class="btn btn-default" onclick="dosearchMp();"><i
|
||||
class="fa fa-search"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-scrollable">
|
||||
<table class="table table-bordered table-striped" style="overflow:auto;width:100%"
|
||||
id="table_mpoint"></table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
|
||||
<button type="button" class="btn btn-primary" onclick="doselect()" id="btn_save">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.modal-content -->
|
||||
</div>
|
||||
<!-- /.modal-dialog -->
|
||||
</div>
|
||||
444
WebRoot/jsp/visual/mPointVisualEdit.jsp
Normal file
444
WebRoot/jsp/visual/mPointVisualEdit.jsp
Normal file
@ -0,0 +1,444 @@
|
||||
<%@page import="com.sipai.entity.scada.MPoint"%>
|
||||
<%@page import="com.sipai.tools.CommString"%>
|
||||
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%request.setAttribute("Active_False", CommString.Active_False); %>
|
||||
<%request.setAttribute("Active_True", CommString.Active_True); %>
|
||||
<%request.setAttribute("Flag_Enable",MPoint.Flag_Enable);%>
|
||||
<%request.setAttribute("Flag_Disable",MPoint.Flag_Disable);%>
|
||||
|
||||
<%request.setAttribute("Flag_Sql",MPoint.Flag_Sql);%>
|
||||
<%request.setAttribute("Flag_Modbus",MPoint.Flag_Modbus);%>
|
||||
<%request.setAttribute("Flag_Type_KPI",MPoint.Flag_Type_KPI);%>
|
||||
<%request.setAttribute("Flag_Type_Data",MPoint.Flag_Type_Data);%>
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
.select2-container .select2-selection--single {
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
}
|
||||
|
||||
.select2-selection__arrow {
|
||||
margin-top: 3px;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
|
||||
//初始化测量点类型选择框
|
||||
var refreshTypeSelect = function () {
|
||||
var select = $("#type").select2({
|
||||
data: null,
|
||||
placeholder: '请选择',//默认文字提示
|
||||
allowClear: false,//允许清空
|
||||
escapeMarkup: function (markup) { return markup; }, // 自定义格式化防止xss注入
|
||||
language: "zh-CN",
|
||||
minimumInputLength: 0,
|
||||
minimumResultsForSearch: 10,//数据超过十个启用搜索框
|
||||
});
|
||||
select.val('${mPoint.type}').trigger("change");
|
||||
|
||||
};
|
||||
//初始化启用状态选择框
|
||||
var refreshActiveSelect = function () {
|
||||
var select = $("#active").select2({
|
||||
data: null,
|
||||
placeholder: '请选择',//默认文字提示
|
||||
allowClear: false,//允许清空
|
||||
escapeMarkup: function (markup) { return markup; }, // 自定义格式化防止xss注入
|
||||
language: "zh-CN",
|
||||
minimumInputLength: 0,
|
||||
minimumResultsForSearch: 10,//数据超过十个启用搜索框
|
||||
});
|
||||
select.val('${mPoint.active}').trigger("change");
|
||||
|
||||
};
|
||||
//初始化信号类型选择框
|
||||
var refreshSignaltypeSelect = function () {
|
||||
var select = $("#signaltype").select2({
|
||||
data: null,
|
||||
placeholder: '请选择',//默认文字提示
|
||||
allowClear: false,//允许清空
|
||||
escapeMarkup: function (markup) { return markup; }, // 自定义格式化防止xss注入
|
||||
language: "zh-CN",
|
||||
minimumInputLength: 0,
|
||||
minimumResultsForSearch: 10,//数据超过十个启用搜索框
|
||||
});
|
||||
select.val('${mPoint.signaltype}').trigger("change");
|
||||
|
||||
};
|
||||
|
||||
//初始化信号源选择框
|
||||
var refreshValuetypeSelect = function () {
|
||||
var select = $("#valuetype").select2({
|
||||
data: null,
|
||||
placeholder: '请选择',//默认文字提示
|
||||
allowClear: false,//允许清空
|
||||
escapeMarkup: function (markup) { return markup; }, // 自定义格式化防止xss注入
|
||||
language: "zh-CN",
|
||||
minimumInputLength: 0,
|
||||
minimumResultsForSearch: 10,//数据超过十个启用搜索框
|
||||
});
|
||||
select.val('${mPoint.valuetype}').trigger("change");
|
||||
|
||||
};
|
||||
$(function () {
|
||||
refreshTypeSelect();
|
||||
refreshActiveSelect();
|
||||
refreshSignaltypeSelect();
|
||||
refreshValuetypeSelect();
|
||||
$("#measuredt").datepicker({
|
||||
language: 'zh-CN',
|
||||
autoclose: true,
|
||||
todayHighlight: true,
|
||||
format:'yyyy-mm-dd',
|
||||
})
|
||||
$("#measuredt").datepicker('setDate',new Date());
|
||||
})
|
||||
function update() {
|
||||
$("#subFormEditMPoint").bootstrapValidator('validate');//提交验证
|
||||
if ($("#subFormEditMPoint").data('bootstrapValidator').isValid()) {//获取验证结果，如果成功，执行下面代码
|
||||
$.post(ext.contextPath + "/work/mpoint/update.do", $("#subFormEditMPoint").serialize(), function (data) {
|
||||
//console.log("data",data);
|
||||
if (data.res == "1") {
|
||||
closeModal('subModalEditMPoint');
|
||||
} else if (data.res == 0) {
|
||||
showAlert('d', '保存失败');
|
||||
} else {
|
||||
showAlert('d', data.res);
|
||||
}
|
||||
}, 'json');
|
||||
}
|
||||
}
|
||||
$("#subFormEditMPoint").bootstrapValidator({
|
||||
live: 'disabled',//验证时机，enabled是内容有变化就验证（默认），disabled和submitted是提交再验证
|
||||
fields: {
|
||||
mpointcode: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: '测量点code不能为空'
|
||||
}
|
||||
}
|
||||
},
|
||||
parmname: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: '测量点名称不能为空'
|
||||
}
|
||||
}
|
||||
},
|
||||
// parmvalue: {
|
||||
// validators: {
|
||||
// notEmpty: {
|
||||
// message: '测量点值不能为空'
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
active: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: '启用状态不能为空'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
});
|
||||
//选择工艺段
|
||||
/* $.post(ext.contextPath + "/user/processSection/getProcessSection4Select.do", {companyId:'${company.id}'}, function(data) {
|
||||
var selelct_ =$("#processsectioncode").select2({
|
||||
data: data,
|
||||
placeholder:'请选择',//默认文字提示
|
||||
allowClear: false,//允许清空
|
||||
escapeMarkup: function (markup) { return markup; }, // 自定义格式化防止xss注入
|
||||
language: "zh-CN",
|
||||
minimumInputLength: 0,
|
||||
minimumResultsForSearch: 10,//数据超过十个启用搜索框
|
||||
formatResult: function formatRepo(repo){return repo.text;}, // 函数用来渲染结果
|
||||
formatSelection: function formatRepoSelection(repo){return repo.text;} // 函数用于呈现当前的选择
|
||||
});
|
||||
fixSelect2ToTool('processSectionId');
|
||||
},'json'); */
|
||||
/* function getMids(){
|
||||
var mrows= $('#grid').datagrid("getRows");
|
||||
var mids="";
|
||||
$.each(mrows, function(index, item){
|
||||
mids+=item.id+",";
|
||||
});
|
||||
mids=mids.replace(/,$/gi,"");
|
||||
return mids;
|
||||
}
|
||||
function doadd_M(){
|
||||
|
||||
$("#mids").val(getMids());
|
||||
localStorage.setItem("mids",$("#mids").val().split(","));
|
||||
var dialog = parent.ext.modalDialog({
|
||||
title : '添加设备',
|
||||
height:500,
|
||||
url : ext.contextPath + '/equipment/showEquipmentCardForSelects.do?iframeId=mPointAdd',
|
||||
buttons : [ {
|
||||
iconCls:'icon-ok',
|
||||
text : '确认',
|
||||
handler : function() {
|
||||
var data = dialog.find('iframe').get(0).contentWindow.selectFun(dialog, grid);
|
||||
var datas= $.parseJSON(data);
|
||||
console.log('enter',datas);
|
||||
if(datas.length>0){
|
||||
for(var i=0;i<datas.length;i++){
|
||||
grid.datagrid('appendRow',{
|
||||
id:datas[i].id,
|
||||
equipmentcardid:datas[i].equipmentcardid,
|
||||
equipmentname:datas[i].equipmentname,
|
||||
equipmentmodel:datas[i].equipmentmodel,
|
||||
equipmentclass:datas[i].equipmentclass,
|
||||
geographyarea:datas[i].geographyarea
|
||||
|
||||
|
||||
});
|
||||
}
|
||||
}
|
||||
dialog.dialog('destroy');
|
||||
}
|
||||
} ]
|
||||
});
|
||||
}
|
||||
function dodelete_M(){
|
||||
var rows = $('#grid').datagrid('getChecked');
|
||||
if(rows.length==0){
|
||||
top.$.messager.alert("提示","请选择需要删除的数据","info");
|
||||
}else{
|
||||
top.$.messager.confirm("提示", "确定删除这些数据？", function(r) {
|
||||
if (r) {
|
||||
//复制rows，否则deleteRow的index会出错
|
||||
var copyRows = [];
|
||||
for ( var j= 0; j < rows.length; j++) {
|
||||
copyRows.push(rows[j]);
|
||||
}
|
||||
|
||||
$.each(copyRows, function(index, item){
|
||||
$('#grid').datagrid('deleteRow',$('#grid').datagrid('getRowIndex',copyRows[index]));
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
$(function() {
|
||||
$("#scdtype").combobox({
|
||||
url : ext.contextPath + '/equipment/getGeographyArea4Combo.do',
|
||||
valueField : 'id',
|
||||
textField : 'name',
|
||||
method:'get',
|
||||
panelHeight:'auto',
|
||||
});
|
||||
$('#m').panel({
|
||||
width:"98%",
|
||||
height:"300",
|
||||
title: '使用机台',
|
||||
tools: [{
|
||||
iconCls:'icon-add',
|
||||
handler:function(){doadd_M();}
|
||||
},{
|
||||
iconCls:'icon-remove',
|
||||
handler:function(){dodelete_M();}
|
||||
}]
|
||||
|
||||
});
|
||||
|
||||
grid = $('#grid').datagrid({
|
||||
title : '',
|
||||
striped : true,
|
||||
rownumbers : true,
|
||||
idField : 'id',
|
||||
columns : [ [
|
||||
{checkbox:true , field : 'ck'},
|
||||
{width : '150', title : '设备编号', field : 'equipmentcardid', sortable : true, editor:'textbox',halign:'center'},
|
||||
{width : '150', title : '设备名称', field : 'equipmentname', sortable : true, editor:'textbox',halign:'center'},
|
||||
{width : '90', title : '设备型号', field : 'equipmentmodel', sortable : true, editor:'textbox',halign:'center'},
|
||||
{width : '90', title : '设备类型', field : 'equipmentclass', sortable : true, editor:'textbox',halign:'center'},
|
||||
{width : '90', title : '存放位置', field : 'geographyarea', sortable : true, editor:'textbox',halign:'center'}
|
||||
] ]
|
||||
});
|
||||
$("#modbusfigid").combobox({
|
||||
url : ext.contextPath + '/work/modbusfig/getlist4combo.do',
|
||||
valueField : 'id',
|
||||
textField : 'name',
|
||||
method:'get',
|
||||
panelHeight:'auto',
|
||||
});
|
||||
|
||||
$("#pointfunctiondefinition").combobox({
|
||||
url : ext.contextPath + '/work/mpoint/getMPointFunType4Combo.do',
|
||||
valueField : 'id',
|
||||
textField : 'name',
|
||||
method:'get',
|
||||
panelHeight:'auto',
|
||||
});
|
||||
}); */
|
||||
|
||||
</script>
|
||||
<div class="modal fade" id="subModalEditMPoint">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span></button>
|
||||
<h4 class="modal-title">编辑测量点</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<!-- 新增界面formid强制为subFormEditMPoint -->
|
||||
<form class="form-horizontal" id="subFormEditMPoint">
|
||||
<input name="biztype" type="hidden" value="${mPoint.biztype}" />
|
||||
<input name="id" type="hidden" value="${mPoint.id}" />
|
||||
<!-- <div class="form-group">
|
||||
<label class="col-sm-2 control-label">*厂区</label>
|
||||
<div class="col-sm-4">
|
||||
<input name="biztype" type="hidden" value="${company.id}"/>
|
||||
<p class="form-control-static" >${company.name}</p>
|
||||
</div>
|
||||
<label class="col-sm-2 control-label">*工艺段</label>
|
||||
<div class="col-sm-4">
|
||||
<select class="form-control select2" id="processsectioncode" name ="processsectioncode" style="width: 170px;"></select>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">*测量点id</label>
|
||||
<div class="col-sm-4">
|
||||
<input type="text" class="form-control" id="mpointid" name="mpointid" placeholder="测量点id"
|
||||
value="${mPoint.mpointid }">
|
||||
</div>
|
||||
<label class="col-sm-2 control-label">*测量点code</label>
|
||||
<div class="col-sm-4">
|
||||
<input type="text" class="form-control" id="mpointcode" name="mpointcode"
|
||||
placeholder="测量点code" value="${mPoint.mpointcode }">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">*测量点名称</label>
|
||||
<div class="col-sm-4">
|
||||
<input type="text" class="form-control" id="parmname" name="parmname" placeholder="测量点名称"
|
||||
value="${mPoint.parmname }">
|
||||
</div>
|
||||
<label class="col-sm-2 control-label">*启用状态</label>
|
||||
<div class="col-sm-4">
|
||||
<select id="active" name="active" class="form-control select2">
|
||||
<option value="${Active_True}">启用</option>
|
||||
<option value="${Active_False}">禁用</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">信号类型</label>
|
||||
<div class="col-sm-4">
|
||||
<select id="signaltype" name="signaltype" class="form-control select2">
|
||||
<option value="AI">AI</option>
|
||||
<option value="DI">DI</option>
|
||||
</select>
|
||||
</div>
|
||||
<label class="col-sm-2 control-label">信号源</label>
|
||||
<div class="col-sm-4">
|
||||
<select id="valuetype" name="valuetype" class="form-control select2">
|
||||
<option value="${Flag_Sql}">数据库</option>
|
||||
<option value="${Flag_Modbus}">Modbus</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">类型</label>
|
||||
<div class="col-sm-4">
|
||||
<select id="type" name="type" class="form-control select2">
|
||||
<option value="${Flag_Type_Data}">采集</option>
|
||||
<option value="${Flag_Type_KPI}">KPI</option>
|
||||
</select>
|
||||
</div>
|
||||
<label class="col-sm-2 control-label">测量点值</label>
|
||||
<div class="col-sm-4">
|
||||
<input type="text" class="form-control" id="parmvalue" name="parmvalue" placeholder="测量点值"
|
||||
value="${mPoint.parmvalue }">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">单位</label>
|
||||
<div class="col-sm-4">
|
||||
<input type="text" class="form-control" id="unit" name="unit" placeholder="测量点单位"
|
||||
value="${mPoint.unit }">
|
||||
</div>
|
||||
<label class="col-sm-2 control-label">测量日期</label>
|
||||
<div class="col-sm-4">
|
||||
<input type="text" class="form-control" id="measuredt" name="measuredt"
|
||||
style="width: 150px;" placeholder="请选择" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <tr>
|
||||
<th>单位</th>
|
||||
<td>
|
||||
<input id="unit" name="unit" class="easyui-textbox"/>
|
||||
</td>
|
||||
<th>精度位数</th>
|
||||
<td>
|
||||
<input id="rate" name="rate" class="easyui-textbox"/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>作用定义（可自定义）</th>
|
||||
<td>
|
||||
<input id="pointfunctiondefinition" name="pointfunctiondefinition" class="easyui-combobox" />
|
||||
</td>
|
||||
<th>表达式（例：>1,=1,(1-2)）</th>
|
||||
<td>
|
||||
<input id="exp" name="exp" class="easyui-textbox" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<br />
|
||||
<table class="table">
|
||||
|
||||
<tr>
|
||||
<th>报警上限</th>
|
||||
<td>
|
||||
<input id="alarmmax" name="alarmmax" class="easyui-textbox"/>
|
||||
</td>
|
||||
<th>报警下限</th>
|
||||
<td>
|
||||
<input id="alarmmin" name="alarmmin" class="easyui-textbox"/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
||||
<th>报警启用</th>
|
||||
<td>
|
||||
<select name="TriggerAlarm" class="easyui-combobox" data-options="panelHeight:'auto',editable:false,value:'${Flag_Disable}',validType:'isBlank'">
|
||||
<option value="${Flag_Enable}">启用</option>
|
||||
<option value="${Flag_Disable}">禁用</option>
|
||||
</select>
|
||||
</td>
|
||||
<th>所属车间</th>
|
||||
<td>
|
||||
<input id="scdtype" name="scdtype" class="easyui-combobox" data-options="validType:'isBlank'"/>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Modbus服务器</th>
|
||||
<td>
|
||||
<input id="modbusfigid" name="modbusfigid" class="easyui-combobox" data-options="validType:'isBlank'"/>
|
||||
</td>
|
||||
<th>寄存器地址</th>
|
||||
<td>
|
||||
<input id="register" name="register" class="easyui-textbox"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table> -->
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
|
||||
<button type="button" class="btn btn-primary" onclick="update()" id="btn_save">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.modal-content -->
|
||||
</div>
|
||||
<!-- /.modal-dialog -->
|
||||
</div>
|
||||
1605
WebRoot/jsp/visual/material.jsp
Normal file
1605
WebRoot/jsp/visual/material.jsp
Normal file
File diff suppressed because it is too large
Load Diff
275
WebRoot/jsp/visual/modules/areaInfo.jsp
Normal file
275
WebRoot/jsp/visual/modules/areaInfo.jsp
Normal file
@ -0,0 +1,275 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<%@page import="com.sipai.entity.visual.JspElement"%>
|
||||
<%request.setAttribute("Type_GetValue", JspElement.Type_GetValue); %>
|
||||
<%request.setAttribute("Type_GetHistory", JspElement.Type_GetHistory); %>
|
||||
<%request.setAttribute("Type_GetModbus", JspElement.Type_GetModbus); %>
|
||||
<%request.setAttribute("Type_GetHttp", JspElement.Type_GetHttp); %>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<title></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<style>
|
||||
.blueSpanLargeFont {
|
||||
color: #437099;
|
||||
font-family: Microsoft YaHei;
|
||||
}
|
||||
|
||||
.blueSpanMediumFont {
|
||||
color: #74D5FF;
|
||||
font-family: Microsoft YaHei;
|
||||
}
|
||||
|
||||
.blueSpanSmallFont {
|
||||
color: #437099;
|
||||
font-family: Microsoft YaHei;
|
||||
}
|
||||
|
||||
.blueSpanSmallFont {
|
||||
color: #437099;
|
||||
font-family: Microsoft YaHei;
|
||||
}
|
||||
|
||||
.whiteSpanLargeFont {
|
||||
color: white;
|
||||
font-family: Microsoft YaHei;
|
||||
}
|
||||
|
||||
.whiteSpanMediumFont {
|
||||
color: white;
|
||||
font-family: Microsoft YaHei;
|
||||
}
|
||||
|
||||
.whiteSpanSmallFont {
|
||||
color: white;
|
||||
font-family: Microsoft YaHei;
|
||||
}
|
||||
|
||||
.deepBlueSpanLargeFont {
|
||||
color: #4069B2;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
.lightBlueSpanSmallFont {
|
||||
color: #74D5FF;
|
||||
font-family: Microsoft YaHei;
|
||||
}
|
||||
|
||||
.UserPanel {
|
||||
background: #182F52;
|
||||
border-radius: 20px;
|
||||
border: 4px solid #426AB2;
|
||||
}
|
||||
|
||||
.userNumTable {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
padding-left: 5%;
|
||||
padding-right: 5%;
|
||||
padding-top: 2%;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0px 6px;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
function getValue() {
|
||||
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
|
||||
//每一条循环判断
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
//获取值 和 获取Modbus
|
||||
if (data[i].getValueType == '${Type_GetValue}' || data[i].getValueType == '${Type_GetModbus}') {
|
||||
if (data[i].elementCode.indexOf("Status") != -1) {//获取车间状态关键字
|
||||
var code = data[i].elementCode;
|
||||
if (document.getElementById(code) && data[i].mPoint.parmvalue) {//判断存不存在
|
||||
//赋值
|
||||
var src = "";
|
||||
if (data[i].mPoint.parmvalue == '生产中') {
|
||||
src = "../../../IMG/material/生产中.jpg"
|
||||
} else if (data[i].mPoint.parmvalue == '停产') {
|
||||
src = "../../../IMG/material/停产.jpg"
|
||||
} else if (data[i].mPoint.parmvalue == '未清场') {
|
||||
src = "../../../IMG/material/未清场.jpg"
|
||||
} else if (data[i].mPoint.parmvalue == '已清场') {
|
||||
src = "../../../IMG/material/已清场.jpg"
|
||||
}
|
||||
document.getElementById(code).src = src;
|
||||
document.getElementById(code).style.width = document.documentElement.clientWidth * 0.12 + "px";
|
||||
document.getElementById(code).style.height = document.documentElement.clientHeight * 0.13 + "px";
|
||||
}
|
||||
} else {
|
||||
var code = data[i].elementCode;
|
||||
document.getElementById(code).innerHTML = data[i].mPoint.parmvalue;
|
||||
}
|
||||
} else if (data[i].getValueType == '${Type_GetHistory}') {
|
||||
|
||||
} else if (data[i].getValueType == '${Type_GetHttp}') {
|
||||
var code = data[i].elementCode;
|
||||
document.getElementById(code).innerHTML = data[i].value;
|
||||
} else {
|
||||
|
||||
}
|
||||
}
|
||||
}, 'json');
|
||||
}
|
||||
/* 定时器 */
|
||||
setInterval(getValue, 300000); //<!--每隔5分钟刷新一次-->
|
||||
|
||||
/* 初始化 */
|
||||
$(function () {
|
||||
getValue();
|
||||
//console.log("height",document.body.scrollHeight);
|
||||
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
|
||||
$("#clock").css("font-size", (document.documentElement.clientWidth * 0.08 + "px"));
|
||||
// $("#lunar").css("font-size", (document.documentElement.clientWidth * 0.03 + "px"));
|
||||
$("#date").css("font-size", (document.documentElement.clientWidth * 0.03 + "px"));
|
||||
$("#week").css("font-size", (document.documentElement.clientWidth * 0.03 + "px"));
|
||||
$(".blueSpanLargeFont").css("font-size", (document.body.offsetWidth * 0.06 + "px"));
|
||||
$(".blueSpanMediumFont").css("font-size", (document.body.offsetWidth * 0.045 + "px"));
|
||||
$(".blueSpanSmallFont").css("font-size", (document.body.offsetWidth * 0.03 + "px"));
|
||||
$(".whiteSpanSmallFont").css("font-size", (document.body.offsetWidth * 0.0469 + "px"));
|
||||
$(".deepBlueSpanLargeFont").css("font-size", (document.body.offsetWidth * 0.05 + "px"));
|
||||
$(".lightBlueSpanSmallFont").css("font-size", (document.body.offsetWidth * 0.034 + "px"));
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden">
|
||||
<div style="width:46%;height:100%;float:left">
|
||||
<table
|
||||
style="width:100%;height:100%;border-collapse:separate;border-spacing:0px 6px;padding-left:5%;padding-right:5%;padding-top:5%;text-align: left;">
|
||||
<tr>
|
||||
<td>
|
||||
<span id="area1" class="blueSpanSmallFont" style="font-weight: bold;"></span>
|
||||
</td>
|
||||
<td>
|
||||
<img id="area1Status" src="" style="width:100%;height:100%;" alt="" />
|
||||
</td>
|
||||
<td align="right">
|
||||
<span id="area1ActUserNum" class="lightBlueSpanSmallFont" style="font-weight: bold;"></span>
|
||||
<span class="blueSpanSmallFont" style="font-weight: bold;">/</span>
|
||||
<span id="area1TotalUserNum" class="blueSpanSmallFont" style="font-weight: bold;"></span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<span id="area2" class="blueSpanSmallFont" style="font-weight: bold;"></span>
|
||||
</td>
|
||||
<td>
|
||||
<img id="area2Status" src="" alt="" />
|
||||
</td>
|
||||
<td align="right">
|
||||
<span id="area2ActUserNum" class="lightBlueSpanSmallFont" style="font-weight: bold;"></span>
|
||||
<span class="blueSpanSmallFont" style="font-weight: bold;">/</span>
|
||||
<span id="area2TotalUserNum" class="blueSpanSmallFont" style="font-weight: bold;"></span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<span id="area3" class="blueSpanSmallFont" style="font-weight: bold;"></span>
|
||||
</td>
|
||||
<td>
|
||||
<img id="area3Status" src="" alt="" />
|
||||
</td>
|
||||
<td align="right">
|
||||
<span id="area3ActUserNum" class="lightBlueSpanSmallFont" style="font-weight: bold;"></span>
|
||||
<span class="blueSpanSmallFont" style="font-weight: bold;">/</span>
|
||||
<span id="area3TotalUserNum" class="blueSpanSmallFont" style="font-weight: bold;"></span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<span id="area4" class="blueSpanSmallFont" style="font-weight: bold;"></span>
|
||||
</td>
|
||||
<td>
|
||||
<img id="area4Status" src="" alt="" />
|
||||
</td>
|
||||
<td align="right">
|
||||
<span id="area4ActUserNum" class="lightBlueSpanSmallFont" style="font-weight: bold;"></span>
|
||||
<span class="blueSpanSmallFont" style="font-weight: bold;">/</span>
|
||||
<span id="area4TotalUserNum" class="blueSpanSmallFont" style="font-weight: bold;"></span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div style="width:46%;height:100%;float:right">
|
||||
<table
|
||||
style="width:100%;height:100%;border-collapse:separate;border-spacing:0px 6px;padding-left:5%;padding-right:5%;padding-top:5%;text-align: left;">
|
||||
<tr>
|
||||
<td>
|
||||
<span id="area5" class="blueSpanSmallFont" style="font-weight: bold;"></span>
|
||||
</td>
|
||||
<td>
|
||||
<img id="area5Status" src="" style="width:100%" alt="" />
|
||||
</td>
|
||||
<td align="right">
|
||||
<span id="area5ActUserNum" class="lightBlueSpanSmallFont" style="font-weight: bold;"></span>
|
||||
<span class="blueSpanSmallFont" style="font-weight: bold;">/</span>
|
||||
<span id="area5TotalUserNum" class="blueSpanSmallFont" style="font-weight: bold;"></span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<span id="area6" class="blueSpanSmallFont" style="font-weight: bold;"></span>
|
||||
</td>
|
||||
<td>
|
||||
<img id="area6Status" src="" style="width:100%" alt="" />
|
||||
</td>
|
||||
<td align="right">
|
||||
<span id="area6ActUserNum" class="lightBlueSpanSmallFont" style="font-weight: bold;"></span>
|
||||
<span class="blueSpanSmallFont" style="font-weight: bold;">/</span>
|
||||
<span id="area6TotalUserNum" class="blueSpanSmallFont" style="font-weight: bold;"></span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<span id="area7" class="blueSpanSmallFont" style="font-weight: bold;"></span>
|
||||
</td>
|
||||
<td>
|
||||
<img id="area7Status" src="" style="width:100%" alt="" />
|
||||
</td>
|
||||
<td align="right">
|
||||
<span id="area7ActUserNum" class="lightBlueSpanSmallFont" style="font-weight: bold;"></span>
|
||||
<span class="blueSpanSmallFont" style="font-weight: bold;">/</span>
|
||||
<span id="area7TotalUserNum" class="blueSpanSmallFont" style="font-weight: bold;"></span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<span id="area8" class="blueSpanSmallFont" style="font-weight: bold;"></span>
|
||||
</td>
|
||||
<td>
|
||||
<img id="area8Status" src="" style="width:100%" alt="" />
|
||||
</td>
|
||||
<td align="right">
|
||||
<span id="area8ActUserNum" class="lightBlueSpanSmallFont" style="font-weight: bold;"></span>
|
||||
<span class="blueSpanSmallFont" style="font-weight: bold;">/</span>
|
||||
<span id="area8TotalUserNum" class="blueSpanSmallFont" style="font-weight: bold;"></span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
225
WebRoot/jsp/visual/modules/areaInfo1_1.jsp
Normal file
225
WebRoot/jsp/visual/modules/areaInfo1_1.jsp
Normal file
@ -0,0 +1,225 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<%@page import="com.sipai.entity.visual.JspElement"%>
|
||||
<%request.setAttribute("Type_GetValue", JspElement.Type_GetValue); %>
|
||||
<%request.setAttribute("Type_GetHistory", JspElement.Type_GetHistory); %>
|
||||
<%request.setAttribute("Type_GetModbus", JspElement.Type_GetModbus); %>
|
||||
<%request.setAttribute("Type_GetHttp", JspElement.Type_GetHttp); %>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<title></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<style>
|
||||
.blueSpanLargeFont {
|
||||
color: #437099;
|
||||
font-family: Microsoft YaHei;
|
||||
}
|
||||
|
||||
.blueSpanMediumFont {
|
||||
color: #74D5FF;
|
||||
font-family: Microsoft YaHei;
|
||||
}
|
||||
|
||||
.titleSpanFont {
|
||||
color: #437099;
|
||||
font-family: Microsoft YaHei;
|
||||
}
|
||||
|
||||
.blueSpanSmallFont {
|
||||
color: #437099;
|
||||
font-family: Microsoft YaHei;
|
||||
}
|
||||
|
||||
.whiteSpanLargeFont {
|
||||
color: white;
|
||||
font-family: Microsoft YaHei;
|
||||
}
|
||||
|
||||
.whiteSpanMediumFont {
|
||||
color: white;
|
||||
font-family: Microsoft YaHei;
|
||||
}
|
||||
|
||||
.whiteSpanSmallFont {
|
||||
color: white;
|
||||
font-family: Microsoft YaHei;
|
||||
}
|
||||
|
||||
.deepBlueSpanLargeFont {
|
||||
color: #4069B2;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
.lightBlueSpanSmallFont {
|
||||
color: #74D5FF;
|
||||
font-family: Microsoft YaHei;
|
||||
}
|
||||
|
||||
.UserPanel {
|
||||
background: #182F52;
|
||||
border-radius: 20px;
|
||||
border: 4px solid #426AB2;
|
||||
}
|
||||
|
||||
.userNumTable {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
padding-left: 5%;
|
||||
padding-right: 5%;
|
||||
padding-top: 2%;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0px 6px;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
function getValue() {
|
||||
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
|
||||
//每一条循环判断
|
||||
//console.log("data", data);
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
//获取值 和 获取Modbus
|
||||
if (data[i].getValueType == '${Type_GetValue}' || data[i].getValueType == '${Type_GetModbus}') {
|
||||
if (data[i].elementCode.indexOf("Status") != -1) {//获取车间状态关键字
|
||||
var code = data[i].elementCode;
|
||||
if (document.getElementById(code) && data[i].mPoint.parmvalue) {//判断存不存在
|
||||
//赋值
|
||||
var src = "";
|
||||
if (data[i].mPoint.parmvalue == '生产中') {
|
||||
src = "../../../IMG/material/生产中.jpg"
|
||||
} else if (data[i].mPoint.parmvalue == '停产') {
|
||||
src = "../../../IMG/material/停产.jpg"
|
||||
} else if (data[i].mPoint.parmvalue == '未清场') {
|
||||
src = "../../../IMG/material/未清场.jpg"
|
||||
} else if (data[i].mPoint.parmvalue == '已清场') {
|
||||
src = "../../../IMG/material/已清场.jpg"
|
||||
}
|
||||
document.getElementById(code).src = src;
|
||||
document.getElementById(code).style.width = document.documentElement.clientWidth * 0.25 + "px";
|
||||
document.getElementById(code).style.height = document.documentElement.clientHeight * 0.13 + "px";
|
||||
}
|
||||
} else {
|
||||
var code = data[i].elementCode;
|
||||
document.getElementById(code).innerHTML = data[i].mPoint.parmvalue;
|
||||
}
|
||||
} else if (data[i].getValueType == '${Type_GetHistory}') {
|
||||
|
||||
} else if (data[i].getValueType == '${Type_GetHttp}') {
|
||||
var code = data[i].elementCode;
|
||||
document.getElementById(code).innerHTML = data[i].value;
|
||||
} else {
|
||||
if (data[i].elementCode.indexOf("Name") != -1) {//获取车间名称关键字
|
||||
var code = data[i].elementCode;
|
||||
if (document.getElementById(code)) {//判断存不存在
|
||||
//赋值
|
||||
document.getElementById(code).innerHTML = data[i].name;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}, 'json');
|
||||
}
|
||||
/* 定时器 */
|
||||
setInterval(getValue, 300000); //<!--每隔5分钟刷新一次-->
|
||||
|
||||
/* 初始化 */
|
||||
$(function () {
|
||||
getValue();
|
||||
//console.log("height",document.body.scrollHeight);
|
||||
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
|
||||
$(".blueSpanSmallFont").css("font-size", (document.body.offsetWidth * 0.057 + "px"));
|
||||
$(".lightBlueSpanSmallFont").css("font-size", (document.body.offsetWidth * 0.065 + "px"));
|
||||
$(".titleSpanFont").css("font-size", (document.body.offsetWidth * 0.045 + "px"));
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden">
|
||||
<div style="width:100%;height:100%;">
|
||||
<table
|
||||
style="width:100%;height:100%;border-collapse:separate;border-spacing:0px 6px;padding-left:5%;padding-right:5%;padding-right:2%;text-align: left;">
|
||||
<tr>
|
||||
<td align="center">
|
||||
<span class="titleSpanFont" style="font-weight: bold;">区域名称</span>
|
||||
</td>
|
||||
<td align="center">
|
||||
<span class="titleSpanFont" style="font-weight: bold;">区域状态</span>
|
||||
</td>
|
||||
<td align="right">
|
||||
<span class="titleSpanFont" style="font-weight: bold;">当前P/最大P</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<span id="area1Name" class="blueSpanSmallFont" style="font-weight: bold;"></span>
|
||||
</td>
|
||||
<td>
|
||||
<img id="area1Status" src="" style="width:100%;height:100%;" alt="" />
|
||||
</td>
|
||||
<td align="right">
|
||||
<span id="area1ActUserNum" class="lightBlueSpanSmallFont" style="font-weight: bold;"></span>
|
||||
<span class="blueSpanSmallFont" style="font-weight: bold;">/</span>
|
||||
<span id="area1TotalUserNum" class="blueSpanSmallFont" style="font-weight: bold;"></span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<span id="area2Name" class="blueSpanSmallFont" style="font-weight: bold;"></span>
|
||||
</td>
|
||||
<td>
|
||||
<img id="area2Status" src="" alt="" />
|
||||
</td>
|
||||
<td align="right">
|
||||
<span id="area2ActUserNum" class="lightBlueSpanSmallFont" style="font-weight: bold;"></span>
|
||||
<span class="blueSpanSmallFont" style="font-weight: bold;">/</span>
|
||||
<span id="area2TotalUserNum" class="blueSpanSmallFont" style="font-weight: bold;"></span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<span id="area3Name" class="blueSpanSmallFont" style="font-weight: bold;"></span>
|
||||
</td>
|
||||
<td>
|
||||
<img id="area3Status" src="" alt="" />
|
||||
</td>
|
||||
<td align="right">
|
||||
<span id="area3ActUserNum" class="lightBlueSpanSmallFont" style="font-weight: bold;"></span>
|
||||
<span class="blueSpanSmallFont" style="font-weight: bold;">/</span>
|
||||
<span id="area3TotalUserNum" class="blueSpanSmallFont" style="font-weight: bold;"></span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<span id="area4Name" class="blueSpanSmallFont" style="font-weight: bold;"></span>
|
||||
</td>
|
||||
<td>
|
||||
<img id="area4Status" src="" alt="" />
|
||||
</td>
|
||||
<td align="right">
|
||||
<span id="area4ActUserNum" class="lightBlueSpanSmallFont" style="font-weight: bold;"></span>
|
||||
<span class="blueSpanSmallFont" style="font-weight: bold;">/</span>
|
||||
<span id="area4TotalUserNum" class="blueSpanSmallFont" style="font-weight: bold;"></span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
247
WebRoot/jsp/visual/modules/bar.jsp
Normal file
247
WebRoot/jsp/visual/modules/bar.jsp
Normal file
@ -0,0 +1,247 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<%@page import="com.sipai.entity.visual.JspElement"%>
|
||||
<%request.setAttribute("Type_GetValue", JspElement.Type_GetValue); %>
|
||||
<%request.setAttribute("Type_GetHistory", JspElement.Type_GetHistory); %>
|
||||
<%request.setAttribute("Type_GetModbus", JspElement.Type_GetModbus); %>
|
||||
<%request.setAttribute("Type_GetHttp", JspElement.Type_GetHttp); %>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<title></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<script type="text/javascript">
|
||||
var colors = ['#75BC63','#D12FD6','#00c200', '#d14a61', '#675bba', '#5793f3'];
|
||||
var symbols = ['circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'];
|
||||
/* 请求数据 */
|
||||
function getValue() {
|
||||
//折线图
|
||||
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
|
||||
//console.log("data", data);
|
||||
var yaAxis = [];
|
||||
var series = [];
|
||||
var measuredt = [];
|
||||
var legendName = [];
|
||||
for (var d = 0; d < data.length; d++) {
|
||||
if (data[d].getValueType == '${Type_GetHistory}') {
|
||||
var ArrayDatas = data[d].mPointHistory//eval("(" + data + ")");
|
||||
var offset = 60;
|
||||
|
||||
//y轴
|
||||
var yobj = {
|
||||
type: 'value',
|
||||
scale: true,
|
||||
name: data[d].name + "(" + data[d].mPoint.unit + ")",//data[d].mPoint.parmname
|
||||
nameTextStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 18
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#97C8E6',
|
||||
width: 2,
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
formatter: '{value}' + data[d].mPoint.unit,
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
//max: 1200,
|
||||
min: function (value) {
|
||||
return value.min;
|
||||
},
|
||||
boundaryGap: [0.2, 0.2]
|
||||
}
|
||||
if (d == 0) {
|
||||
yobj.position = 'left';
|
||||
yobj.offset = 0;
|
||||
} else {
|
||||
yobj.position = 'right';
|
||||
yobj.offset = offset * (d - 1);
|
||||
}
|
||||
if (d >= 2) {
|
||||
yobj.show = false;
|
||||
}
|
||||
yaAxis.push(yobj);
|
||||
|
||||
//series
|
||||
var sobj = {
|
||||
name: data[d].name,//data[d].mPoint.parmname
|
||||
xAxisIndex: 1,
|
||||
yAxisIndex: d,
|
||||
symbol: symbols[d % symbols.length],
|
||||
symbolSize: 10,
|
||||
itemStyle: {
|
||||
color: colors[d % colors.length],
|
||||
borderWidth: 1,
|
||||
},
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
},
|
||||
};
|
||||
|
||||
if (data[d].style != null && data[d].style != "") {
|
||||
sobj.type = data[d].style;
|
||||
} else {
|
||||
sobj.type = "line";
|
||||
}
|
||||
//legend名称
|
||||
legendName.push(data[d].name);//data[d].mPoint.parmname
|
||||
var dataSeries = [];
|
||||
for (var j = 0; j < ArrayDatas.length; j++) {
|
||||
//x轴 只取data第一条数据进行生成x轴
|
||||
if(d == 0){
|
||||
measuredt.push(ArrayDatas[j].measuredt.substring(5, 10) + "-" + ArrayDatas[j].measuredt.substring(11, 13));
|
||||
}
|
||||
dataSeries.push(ArrayDatas[j].parmvalue);
|
||||
}
|
||||
sobj.data = dataSeries;
|
||||
series.push(sobj);
|
||||
}
|
||||
}
|
||||
//赋值 x轴 y轴 series
|
||||
optionBL.legend.data = legendName;
|
||||
optionBL.xAxis[0].data = measuredt;
|
||||
optionBL.yAxis = yaAxis;
|
||||
optionBL.series = series;
|
||||
//图标加载
|
||||
//console.log("option",optionBL);
|
||||
BLChart.setOption(optionBL);
|
||||
}, 'json');
|
||||
}
|
||||
|
||||
/* 定时器 */
|
||||
setInterval(getValue, 300000); //<!--每隔5分钟刷新一次-->
|
||||
//setInterval(change, 60000); //每1分钟切换
|
||||
|
||||
/* 初始化 */
|
||||
$(function () {
|
||||
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
|
||||
|
||||
//getValue();
|
||||
//console.log("height",document.body.scrollHeight);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden">
|
||||
<div id="barline" style="height:95%;width:100%"></div>
|
||||
<script language="JavaScript">
|
||||
/* 构造图表 */
|
||||
var BLChart = echarts.init(document.getElementById('barline'));
|
||||
optionBL = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#283b56'
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '7%',
|
||||
top: '10%',
|
||||
},
|
||||
legend: {
|
||||
left: 'center',
|
||||
itemGap: 100,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 20
|
||||
},
|
||||
data: ['称量件数']
|
||||
},
|
||||
dataZoom: {
|
||||
show: false,
|
||||
start: 0,
|
||||
end: 100
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#97C8E6',
|
||||
width: 2,
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff'
|
||||
},
|
||||
boundaryGap: true,
|
||||
data: ['0:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00']
|
||||
},
|
||||
],
|
||||
yAxis: [{
|
||||
type: 'value',
|
||||
scale: true,
|
||||
name: '件',
|
||||
nameTextStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 18
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#97C8E6',
|
||||
width: 2,
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff'
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
//max: 1200,
|
||||
min: 0,
|
||||
boundaryGap: [0.2, 0.2]
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '称量件数',
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
color: '#426AB2',
|
||||
},
|
||||
data: (function () {
|
||||
var res = [];
|
||||
var len = 24;
|
||||
while (len--) {
|
||||
res.push(Math.round(Math.random() * 1000));
|
||||
}
|
||||
return res;
|
||||
})()
|
||||
},
|
||||
|
||||
]
|
||||
};
|
||||
BLChart.setOption(optionBL);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
190
WebRoot/jsp/visual/modules/bigScreen_Lines.jsp
Normal file
190
WebRoot/jsp/visual/modules/bigScreen_Lines.jsp
Normal file
@ -0,0 +1,190 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<%@page import="com.sipai.entity.visual.JspElement"%>
|
||||
<%request.setAttribute("Type_GetValue", JspElement.Type_GetValue); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_GetHourHistory); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_Get7dayHistory); %>
|
||||
<%request.setAttribute("Type_GetModbus", JspElement.Type_GetModbus); %>
|
||||
<%request.setAttribute("Type_GetHttp", JspElement.Type_GetHttp); %>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<title></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<script type="text/javascript" src="<%=request.getContextPath()%>/JS/tableScroll.js" charset="utf-8"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
/* 请求数据 */
|
||||
function getValue() {
|
||||
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
|
||||
// console.log(data);
|
||||
if(data!=''){
|
||||
var legendDatas=[];
|
||||
var series=[];
|
||||
var title="";
|
||||
for(var i=0;i<data.length;i++){
|
||||
if(data[i].elementCode=="line"){
|
||||
legendDatas.push(data[i].name);
|
||||
// var datas=new Array();
|
||||
// for(var j=0;j<data[i].mPointHistory.length;j++){
|
||||
// const his=data[i].mPointHistory[j];
|
||||
// var ddata=new Array();
|
||||
// ddata.push(his.measuredt.substring(0,13));
|
||||
// ddata.push(his.parmvalue);
|
||||
// datas.push(ddata);
|
||||
// }
|
||||
series.push({
|
||||
data: data[i].jsonArray,
|
||||
name: data[i].name,
|
||||
type: 'line',
|
||||
symbol:'none',
|
||||
smooth: true
|
||||
});
|
||||
|
||||
}else if(data[i].elementCode=="title"){
|
||||
title=data[i].valueUrl;
|
||||
}
|
||||
}
|
||||
getChart(title,legendDatas,series);
|
||||
}
|
||||
}, 'json');
|
||||
|
||||
}
|
||||
|
||||
var colors=[
|
||||
"#2ec7c9",
|
||||
"#b6a2de",
|
||||
"#5ab1ef",
|
||||
"#ffb980",
|
||||
"#d87a80",
|
||||
"#8d98b3",
|
||||
"#e5cf0d",
|
||||
"#97b552",
|
||||
"#95706d",
|
||||
"#dc69aa",
|
||||
"#07a2a4",
|
||||
"#9a7fd1",
|
||||
"#588dd5",
|
||||
"#f5994e",
|
||||
"#c05050",
|
||||
"#59678c",
|
||||
"#c9ab00",
|
||||
"#7eb00a",
|
||||
"#6f5553",
|
||||
"#c14089"
|
||||
];
|
||||
function getChart(title,legendDatas,series){
|
||||
document.getElementById("chart").removeAttribute("_echarts_instance_");
|
||||
var mychart=echarts.init(document.getElementById('chart'));
|
||||
var option = {
|
||||
color:colors,
|
||||
title: {
|
||||
text: title,
|
||||
top:10,
|
||||
left:20,
|
||||
textStyle:{
|
||||
color:'#FFFFFF'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: legendDatas,
|
||||
top:10,
|
||||
right:20,
|
||||
textStyle:{
|
||||
color:'#FFFFFF'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
grid:{
|
||||
left: '4%', // 与容器左侧的距离
|
||||
right: '4%', // 与容器右侧的距离
|
||||
// top: '10%', // 与容器顶部的距离
|
||||
bottom: '10%', // 与容器底部的距离
|
||||
containLabel:true
|
||||
},
|
||||
xAxis: {
|
||||
type:"time",
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'#ffffff',
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type : 'value',
|
||||
// scale:true,
|
||||
max: function (value) {
|
||||
return (value.max*1.2).toFixed(2);
|
||||
},
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'#ffffff',
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle:{
|
||||
color: '#8C8C8C'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: series
|
||||
};
|
||||
// console.log(option);
|
||||
mychart.setOption(option,true);
|
||||
}
|
||||
|
||||
/* 定时器 */
|
||||
setInterval(getValue, 300000); //每5分钟切换
|
||||
// setInterval(getValue, 3600000); //每一小时切换
|
||||
|
||||
/* 初始化 */
|
||||
$(function () {
|
||||
if('${param.backgroundColor}'=='transparent'){
|
||||
document.body.style.backgroundColor = '${param.backgroundColor}';
|
||||
}else{
|
||||
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
|
||||
}
|
||||
document.getElementById("main").style.width = document.documentElement.clientWidth + "px";
|
||||
document.getElementById("main").style.height = (document.documentElement.clientHeight) + "px";
|
||||
|
||||
getValue();
|
||||
});
|
||||
|
||||
//获取url地址根目录 当前taomcat下路径
|
||||
function getRootPath(){
|
||||
var pathName = window.location.pathname.substring(1);
|
||||
// var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
|
||||
return window.location.protocol + '//' + window.location.host;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden;">
|
||||
<div id="main" style="height:100%;width:100%;padding-top:20px;padding-left:10px;padding-right:10px;">
|
||||
<div id="chart" style="height:100%;width:100%;">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
314
WebRoot/jsp/visual/modules/bigScreen_SJDLRegionalProfile.jsp
Normal file
314
WebRoot/jsp/visual/modules/bigScreen_SJDLRegionalProfile.jsp
Normal file
@ -0,0 +1,314 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<%@page import="com.sipai.entity.visual.JspElement"%>
|
||||
<%request.setAttribute("Type_GetValue", JspElement.Type_GetValue); %>
|
||||
<%request.setAttribute("Type_GetHourHistory", JspElement.Type_GetHourHistory); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_Get7dayHistory); %>
|
||||
<%request.setAttribute("Type_GetModbus", JspElement.Type_GetModbus); %>
|
||||
<%request.setAttribute("Type_GetHttp", JspElement.Type_GetHttp); %>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<title></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<script type="text/javascript">
|
||||
|
||||
//获取url地址根目录 当前taomcat下路径
|
||||
function getRootPath(){
|
||||
var pathName = window.location.pathname.substring(1);
|
||||
// var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
|
||||
return window.location.protocol + '//' + window.location.host;
|
||||
}
|
||||
|
||||
function numOutput(num){
|
||||
var numpart=String(num).split(".");//将数字通过jq split用小数点分隔为数组对象
|
||||
numpart[0]=numpart[0].replace(new RegExp('(\\d)(?=(\\d{3})+$)','ig'),"$1,");
|
||||
//将数组对象第一个数据(整数部分)通过正则表达式每三位用逗号分隔
|
||||
return numpart.join(".");//把数组通过join方法用.进行拼接
|
||||
}
|
||||
|
||||
/* 请求数据 */
|
||||
function getValue() {
|
||||
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
|
||||
// console.log(data);
|
||||
if(data!=''){
|
||||
for(var i=0;i<data.length;i++){
|
||||
if(data[i].elementCode=="branchCompanyNum"){
|
||||
$('#branchCompanyNum').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="peopleNum"){
|
||||
$('#peopleNum').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="regionDWater"){
|
||||
$('#regionDWater').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="regionYWater"){
|
||||
$('#regionYWater').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="regionTWater"){
|
||||
$('#regionTWater').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="companyDWater1"){
|
||||
$('#companyDWater1').text(numOutput((data[i].visualCacheData.value).toFixed(1)));
|
||||
}else if(data[i].elementCode=="companyDWater2"){
|
||||
$('#companyDWater2').text(numOutput((data[i].visualCacheData.value).toFixed(1)));
|
||||
}else if(data[i].elementCode=="companyDWater3"){
|
||||
$('#companyDWater3').text(numOutput((data[i].visualCacheData.value).toFixed(1)));
|
||||
}else if(data[i].elementCode=="companyDWater4"){
|
||||
$('#companyDWater4').text(numOutput((data[i].visualCacheData.value).toFixed(1)));
|
||||
}else if(data[i].elementCode=="companyDWater5"){
|
||||
$('#companyDWater5').text(numOutput((data[i].visualCacheData.value).toFixed(1)));
|
||||
}else if(data[i].elementCode=="companyDWater6"){
|
||||
$('#companyDWater6').text(numOutput((data[i].visualCacheData.value).toFixed(1)));
|
||||
}else if(data[i].elementCode=="companyYWater1"){
|
||||
$('#companyYWater1').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="companyYWater2"){
|
||||
$('#companyYWater2').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="companyYWater3"){
|
||||
$('#companyYWater3').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="companyYWater4"){
|
||||
$('#companyYWater4').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="companyYWater5"){
|
||||
$('#companyYWater5').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="companyYWater6"){
|
||||
$('#companyYWater6').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="companyTWater1"){
|
||||
$('#companyTWater1').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="companyTWater2"){
|
||||
$('#companyTWater2').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="companyTWater3"){
|
||||
$('#companyTWater3').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="companyTWater4"){
|
||||
$('#companyTWater4').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="companyTWater5"){
|
||||
$('#companyTWater5').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="companyTWater6"){
|
||||
$('#companyTWater6').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}, 'json');
|
||||
}
|
||||
|
||||
/* 定时器 */
|
||||
setInterval(getValue, 300000); //每5分钟切换
|
||||
// setInterval(getValue, 3600000); //每一小时切换
|
||||
|
||||
/* 初始化 */
|
||||
$(function () {
|
||||
if('${param.backgroundColor}'=='transparent'){
|
||||
document.body.style.backgroundColor = '${param.backgroundColor}';
|
||||
}else{
|
||||
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
|
||||
}
|
||||
document.getElementById("main").style.width = document.documentElement.clientWidth + "px";
|
||||
document.getElementById("main").style.height = (document.documentElement.clientHeight) + "px";
|
||||
|
||||
getValue();
|
||||
//console.log("height",document.body.scrollHeight);
|
||||
});
|
||||
|
||||
var websocket = new WebSocket('ws://' + window.location.host + ext.contextPath + '/chat?userName=大屏');
|
||||
function doGo(planId){
|
||||
//清除交互
|
||||
var clearInterationJsonStr = "[{'type':'clearInteraction'}]";
|
||||
websocket.send(clearInterationJsonStr);
|
||||
var jsonstr = "[{'type':'plan','id':'" + planId + "'}]";
|
||||
websocket.send(jsonstr);
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden;">
|
||||
<div style="height:100%;width:100%;">
|
||||
<div id="main" style="height:100%;width:100%;border-radius: 8px;">
|
||||
<div style="position: absolute;width: 350px;height:80px;top:80px;left:250px;">
|
||||
<div style="float: left;width: 30%;height: 100%;line-height:55px;color: #69F6F9;font-size: 24px;font-family: Helvetica;text-align: right;">现有员工</div>
|
||||
<div style="float: left;width: 50%;height: 100%;color: #69F6F9;font-size: 35px;font-family: Helvetica;text-align: center;"><span id="peopleNum"></span><span> 人</span></div>
|
||||
</div>
|
||||
|
||||
<div style="position: absolute;width: 350px;height:80px;top:80px;left:650px;">
|
||||
<div style="float: left;width: 30%;height: 100%;line-height:55px;color: #69F6F9;font-size: 24px;font-family: Helvetica;text-align: right;">项目公司</div>
|
||||
<div style="float: left;width: 50%;height: 100%;color: #69F6F9;font-size: 35px;font-family: Helvetica;text-align: center;"><span id="branchCompanyNum"></span><span> 家</span></div>
|
||||
</div>
|
||||
|
||||
<div style="width:255px;height:136px;background: linear-gradient(149deg,#02395d 13%, rgba(0,16,107,0.5) 90%);border: 3px solid #00edf2;border-radius: 9px;position: absolute;top:610px;left:330px;">
|
||||
<div style="float:left;width:100%;height:45.5px;line-height:45.4px;text-align:center;color:#bcdfff;font-size: 16px;"><span>大连区域（</span><span id="regionDWater" style="color:#a5f1f7;font-size: 20px;"></span><span>万m³/D）</span></div>
|
||||
<div style="float:left;width:100%;height:45.5px;">
|
||||
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">昨日水量：</div>
|
||||
<div id="regionYWater" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 20px;"></div>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:45.5px;">
|
||||
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">今日水量：</div>
|
||||
<div id="regionTWater" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 20px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div onclick="doGo('5fd7d6aa78824bb2a54b600fb69fda9d');" style="cursor: pointer;width:230px;height:120px;background: rgba(3,5,18,0.25);border-radius: 9px;position:absolute;top:160px;left:50px;">
|
||||
<table style="width:100%;height:100%;table-layout: fixed;text-align: center;vertical-align: middle;font-family: PingFangSC, PingFangSC-Semibold;">
|
||||
<tr style="height:38px;">
|
||||
<td style="width:91px;background:#76afdb;border-radius: 18px 0px 28px 0px;color:rgba(52,241,255,1);font-size:16px;font-weight: 600;letter-spacing:2px;">泉水河</td>
|
||||
<td style="width:30px;"></td>
|
||||
<td style="text-align:left;"><span id="companyDWater1" style="font-size:20px;color:#a5f1f7;"></span><span style="font-size:14px;color:#ffffff;"> 万m³/D</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2" style="text-align:right;font-size: 14px;color: #ffffff;">
|
||||
昨日水量：
|
||||
</td>
|
||||
<td id="companyYWater1" style="text-align:left;font-size:20px;color:#347EFB;">
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2" style="text-align:right;font-size: 14px;color: #ffffff;">
|
||||
今日水量：
|
||||
</td>
|
||||
<td id="companyTWater1" style="text-align:left;font-size:20px;color:#347EFB;">
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div style="width:230px;height:120px;background: rgba(3,5,18,0.25);border-radius: 9px;position:absolute;top:460px;left:50px;">
|
||||
<table style="width:100%;height:100%;table-layout: fixed;text-align: center;vertical-align: middle;font-family: PingFangSC, PingFangSC-Semibold;">
|
||||
<tr style="height:38px;">
|
||||
<td style="width:91px;background:#76afdb;border-radius: 18px 0px 28px 0px;color:rgba(52,241,255,1);font-size:16px;font-weight: 600;letter-spacing:2px;">老虎滩</td>
|
||||
<td style="width:30px;"></td>
|
||||
<td style="text-align:left;"><span id="companyDWater2" style="font-size:20px;color:#a5f1f7;"></span><span style="font-size:14px;color:#ffffff;"> 万m³/D</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2" style="text-align:right;font-size: 14px;color: #ffffff;">
|
||||
昨日水量：
|
||||
</td>
|
||||
<td id="companyYWater2" style="text-align:left;font-size:20px;color:#347EFB;">
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2" style="text-align:right;font-size: 14px;color: #ffffff;">
|
||||
今日水量：
|
||||
</td>
|
||||
<td id="companyTWater2" style="text-align:left;font-size:20px;color:#347EFB;">
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div style="width:230px;height:120px;background: rgba(3,5,18,0.25);border-radius: 9px;position:absolute;top:760px;left:50px;">
|
||||
<table style="width:100%;height:100%;table-layout: fixed;text-align: center;vertical-align: middle;font-family: PingFangSC, PingFangSC-Semibold;">
|
||||
<tr style="height:38px;">
|
||||
<td style="width:91px;background:#76afdb;border-radius: 18px 0px 28px 0px;color:rgba(52,241,255,1);font-size:16px;font-weight: 600;letter-spacing:2px;">凌水河</td>
|
||||
<td style="width:30px;"></td>
|
||||
<td style="text-align:left;"><span id="companyDWater3" style="font-size:20px;color:#a5f1f7;"></span><span style="font-size:14px;color:#ffffff;"> 万m³/D</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2" style="text-align:right;font-size: 14px;color: #ffffff;">
|
||||
昨日水量：
|
||||
</td>
|
||||
<td id="companyYWater3" style="text-align:left;font-size:20px;color:#347EFB;">
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2" style="text-align:right;font-size: 14px;color: #ffffff;">
|
||||
今日水量：
|
||||
</td>
|
||||
<td id="companyTWater3" style="text-align:left;font-size:20px;color:#347EFB;">
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div style="width:230px;height:120px;background: rgba(3,5,18,0.25);border-radius: 9px;position:absolute;top:160px;left:1200px;">
|
||||
<table style="width:100%;height:100%;table-layout: fixed;text-align: center;vertical-align: middle;font-family: PingFangSC, PingFangSC-Semibold;">
|
||||
<tr style="height:38px;">
|
||||
<td style="width:91px;background:#76afdb;border-radius: 18px 0px 28px 0px;color:rgba(52,241,255,1);font-size:16px;font-weight: 600;letter-spacing:2px;">大连湾</td>
|
||||
<td style="width:30px;"></td>
|
||||
<td style="text-align:left;"><span id="companyDWater4" style="font-size:20px;color:#a5f1f7;"></span><span style="font-size:14px;color:#ffffff;"> 万m³/D</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2" style="text-align:right;font-size: 14px;color: #ffffff;">
|
||||
昨日水量：
|
||||
</td>
|
||||
<td id="companyYWater4" style="text-align:left;font-size:20px;color:#347EFB;">
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2" style="text-align:right;font-size: 14px;color: #ffffff;">
|
||||
今日水量：
|
||||
</td>
|
||||
<td id="companyTWater4" style="text-align:left;font-size:20px;color:#347EFB;">
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div style="width:230px;height:120px;background: rgba(3,5,18,0.25);border-radius: 9px;position:absolute;top:460px;left:1200px;">
|
||||
<table style="width:100%;height:100%;table-layout: fixed;text-align: center;vertical-align: middle;font-family: PingFangSC, PingFangSC-Semibold;">
|
||||
<tr style="height:38px;">
|
||||
<td style="width:91px;background:#76afdb;border-radius: 18px 0px 28px 0px;color:rgba(52,241,255,1);font-size:16px;font-weight: 600;letter-spacing:1px;">三十里堡</td>
|
||||
<td style="width:30px;"></td>
|
||||
<td style="text-align:left;"><span id="companyDWater5" style="font-size:20px;color:#a5f1f7;"></span><span style="font-size:14px;color:#ffffff;"> 万m³/D</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2" style="text-align:right;font-size: 14px;color: #ffffff;">
|
||||
昨日水量：
|
||||
</td>
|
||||
<td id="companyYWater5" style="text-align:left;font-size:20px;color:#347EFB;">
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2" style="text-align:right;font-size: 14px;color: #ffffff;">
|
||||
今日水量：
|
||||
</td>
|
||||
<td id="companyTWater5" style="text-align:left;font-size:20px;color:#347EFB;">
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div style="width:230px;height:120px;background: rgba(3,5,18,0.25);border-radius: 9px;position:absolute;top:760px;left:1200px;">
|
||||
<table style="width:100%;height:100%;table-layout: fixed;text-align: center;vertical-align: middle;font-family: PingFangSC, PingFangSC-Semibold;">
|
||||
<tr style="height:38px;">
|
||||
<td style="width:91px;background:#76afdb;border-radius: 18px 0px 28px 0px;color:rgba(52,241,255,1);font-size:16px;font-weight: 600;letter-spacing:6px;">后海</td>
|
||||
<td style="width:30px;"></td>
|
||||
<td style="text-align:left;"><span id="companyDWater6" style="font-size:20px;color:#a5f1f7;"></span><span style="font-size:14px;color:#ffffff;"> 万m³/D</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2" style="text-align:right;font-size: 14px;color: #ffffff;">
|
||||
昨日水量：
|
||||
</td>
|
||||
<td id="companyYWater6" style="text-align:left;font-size:20px;color:#347EFB;">
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2" style="text-align:right;font-size: 14px;color: #ffffff;">
|
||||
今日水量：
|
||||
</td>
|
||||
<td id="companyTWater6" style="text-align:left;font-size:20px;color:#347EFB;">
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
286
WebRoot/jsp/visual/modules/bigScreen_SJGroupRegionalProfile.jsp
Normal file
286
WebRoot/jsp/visual/modules/bigScreen_SJGroupRegionalProfile.jsp
Normal file
@ -0,0 +1,286 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<%@page import="com.sipai.entity.visual.JspElement"%>
|
||||
<%request.setAttribute("Type_GetValue", JspElement.Type_GetValue); %>
|
||||
<%request.setAttribute("Type_GetHourHistory", JspElement.Type_GetHourHistory); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_Get7dayHistory); %>
|
||||
<%request.setAttribute("Type_GetModbus", JspElement.Type_GetModbus); %>
|
||||
<%request.setAttribute("Type_GetHttp", JspElement.Type_GetHttp); %>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<title></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<script type="text/javascript">
|
||||
|
||||
//获取url地址根目录 当前taomcat下路径
|
||||
function getRootPath(){
|
||||
var pathName = window.location.pathname.substring(1);
|
||||
// var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
|
||||
return window.location.protocol + '//' + window.location.host;
|
||||
}
|
||||
|
||||
function numOutput(num){
|
||||
var numpart=String(num).split(".");//将数字通过jq split用小数点分隔为数组对象
|
||||
numpart[0]=numpart[0].replace(new RegExp('(\\d)(?=(\\d{3})+$)','ig'),"$1,");
|
||||
//将数组对象第一个数据(整数部分)通过正则表达式每三位用逗号分隔
|
||||
return numpart.join(".");//把数组通过join方法用.进行拼接
|
||||
}
|
||||
|
||||
/* 请求数据 */
|
||||
function getValue() {
|
||||
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
|
||||
//console.log(data);
|
||||
if(data!=''){
|
||||
for(var i=0;i<data.length;i++){
|
||||
if(data[i].elementCode=="branchCompanyNum"){
|
||||
$('#branchCompanyNum').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="peopleNum"){
|
||||
$('#peopleNum').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="waterDesign1"){
|
||||
$('#waterDesign1').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="waterDesign2"){
|
||||
$('#waterDesign2').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="waterDesign3"){
|
||||
$('#waterDesign3').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="waterDesign4"){
|
||||
$('#waterDesign4').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="waterDesign5"){
|
||||
$('#waterDesign5').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="waterDesign6"){
|
||||
$('#waterDesign6').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="waterDesign7"){
|
||||
$('#waterDesign7').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="waterDesign8"){
|
||||
$('#waterDesign8').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="companyNum1"){
|
||||
$('#companyNum1').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="companyNum2"){
|
||||
$('#companyNum2').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="companyNum3"){
|
||||
$('#companyNum3').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="companyNum4"){
|
||||
$('#companyNum4').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="companyNum5"){
|
||||
$('#companyNum5').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="companyNum6"){
|
||||
$('#companyNum6').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="companyNum7"){
|
||||
$('#companyNum7').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="companyNum8"){
|
||||
$('#companyNum8').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="yesterdayWater1"){
|
||||
$('#yesterdayWater1').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="yesterdayWater2"){
|
||||
$('#yesterdayWater2').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="yesterdayWater3"){
|
||||
$('#yesterdayWater3').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="yesterdayWater4"){
|
||||
$('#yesterdayWater4').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="yesterdayWater5"){
|
||||
$('#yesterdayWater5').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="yesterdayWater6"){
|
||||
$('#yesterdayWater6').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="yesterdayWater7"){
|
||||
$('#yesterdayWater7').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="yesterdayWater8"){
|
||||
$('#yesterdayWater8').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="todayWater1"){
|
||||
$('#todayWater1').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="todayWater2"){
|
||||
$('#todayWater2').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="todayWater3"){
|
||||
$('#todayWater3').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="todayWater4"){
|
||||
$('#todayWater4').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="todayWater5"){
|
||||
$('#todayWater5').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="todayWater6"){
|
||||
$('#todayWater6').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="todayWater7"){
|
||||
$('#todayWater7').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="todayWater8"){
|
||||
$('#todayWater8').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}
|
||||
}
|
||||
}
|
||||
}, 'json');
|
||||
}
|
||||
|
||||
/* 定时器 */
|
||||
setInterval(getValue, 300000); //每5分钟切换
|
||||
// setInterval(getValue, 3600000); //每一小时切换
|
||||
|
||||
/* 初始化 */
|
||||
$(function () {
|
||||
if('${param.backgroundColor}'=='transparent'){
|
||||
document.body.style.backgroundColor = '${param.backgroundColor}';
|
||||
}else{
|
||||
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
|
||||
}
|
||||
document.getElementById("main").style.width = document.documentElement.clientWidth + "px";
|
||||
document.getElementById("main").style.height = (document.documentElement.clientHeight) + "px";
|
||||
|
||||
getValue();
|
||||
//console.log("height",document.body.scrollHeight);
|
||||
});
|
||||
|
||||
var websocket = new WebSocket('ws://' + window.location.host + ext.contextPath + '/chat?userName=大屏');
|
||||
function doGo(planId){
|
||||
//清除交互
|
||||
var clearInterationJsonStr = "[{'type':'clearInteraction'}]";
|
||||
websocket.send(clearInterationJsonStr);
|
||||
var jsonstr = "[{'type':'plan','id':'" + planId + "'}]";
|
||||
websocket.send(jsonstr);
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden;">
|
||||
<div style="height:100%;width:100%;">
|
||||
<div id="main" style="height:100%;width:100%;border-radius: 8px;">
|
||||
<div style="position: absolute;width: 350px;height:80px;top:80px;left:250px;">
|
||||
<div style="float: left;width: 30%;height: 100%;line-height:55px;color: #69F6F9;font-size: 24px;font-family: Helvetica;text-align: right;">现有员工</div>
|
||||
<div style="float: left;width: 50%;height: 100%;color: #69F6F9;font-size: 35px;font-family: Helvetica;text-align: center;"><span id="peopleNum"></span><span> 人</span></div>
|
||||
</div>
|
||||
|
||||
<div style="position: absolute;width: 350px;height:80px;top:80px;left:650px;">
|
||||
<div style="float: left;width: 30%;height: 100%;line-height:55px;color: #69F6F9;font-size: 24px;font-family: Helvetica;text-align: right;">项目公司</div>
|
||||
<div style="float: left;width: 50%;height: 100%;color: #69F6F9;font-size: 35px;font-family: Helvetica;text-align: center;"><span id="branchCompanyNum"></span><span> 家</span></div>
|
||||
</div>
|
||||
|
||||
<div style="width:255px;height:182px;background: linear-gradient(149deg,#02395d 13%, rgba(0,16,107,0.5) 90%);border: 3px solid #00edf2;border-radius: 9px;position: absolute;top:230px;left:50px;">
|
||||
<div style="float:left;width:100%;height:45.5px;line-height:45.4px;text-align:center;color:#bcdfff;font-size: 16px;"><span>漯河区域（</span><span id="waterDesign1" style="color:#a5f1f7;font-size: 20px;"></span><span>万m³/D）</span></div>
|
||||
<div style="float:left;width:100%;height:45.5px;">
|
||||
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">昨日水量：</div>
|
||||
<div id="yesterdayWater1" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 20px;"></div>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:45.5px;">
|
||||
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">今日水量：</div>
|
||||
<div id="todayWater1" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 20px;"></div>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:45.5px;">
|
||||
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">污水厂数：</div>
|
||||
<div id="companyNum1" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#F5A524;font-size: 20px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width:255px;height:182px;background: linear-gradient(149deg,#02395d 13%, rgba(0,16,107,0.5) 90%);border: 3px solid #00edf2;border-radius: 9px;position: absolute;top:552px;left:52px;">
|
||||
<div style="float:left;width:100%;height:45.5px;line-height:45.4px;text-align:center;color:#bcdfff;font-size: 16px;"><span>益阳区域（</span><span id="waterDesign2" style="color:#a5f1f7;font-size: 20px;"></span><span>万m³/D）</span></div>
|
||||
<div style="float:left;width:100%;height:45.5px;">
|
||||
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">昨日水量：</div>
|
||||
<div id="yesterdayWater2" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 20px;"></div>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:45.5px;">
|
||||
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">今日水量：</div>
|
||||
<div id="todayWater2" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 20px;"></div>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:45.5px;">
|
||||
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">污水厂数：</div>
|
||||
<div id="companyNum2" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#F5A524;font-size: 20px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width:255px;height:182px;background: linear-gradient(149deg,#02395d 13%, rgba(0,16,107,0.5) 90%);border: 3px solid #00edf2;border-radius: 9px;position: absolute;top:759px;left:442px;">
|
||||
<div style="float:left;width:100%;height:45.5px;line-height:45.4px;text-align:center;color:#bcdfff;font-size: 16px;"><span>东莞区域（</span><span id="waterDesign3" style="color:#a5f1f7;font-size: 20px;"></span><span>万m³/D）</span></div>
|
||||
<div style="float:left;width:100%;height:45.5px;">
|
||||
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">昨日水量：</div>
|
||||
<div id="yesterdayWater3" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 20px;"></div>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:45.5px;">
|
||||
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">今日水量：</div>
|
||||
<div id="todayWater3" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 20px;"></div>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:45.5px;">
|
||||
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">污水厂数：</div>
|
||||
<div id="companyNum3" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#F5A524;font-size: 20px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div onclick="doGo('a31e1edee5924f44ada21de830c3ab3e');" style="cursor: pointer;width:255px;height:182px;background: linear-gradient(149deg,#02395d 13%, rgba(0,16,107,0.5) 90%);border: 3px solid #00edf2;border-radius: 9px;position: absolute;top:749px;left:815px;">
|
||||
<div style="float:left;width:100%;height:45.5px;line-height:45.4px;text-align:center;color:#bcdfff;font-size: 16px;"><span>上海区域（</span><span id="waterDesign4" style="color:#a5f1f7;font-size: 20px;"></span><span>万m³/D）</span></div>
|
||||
<div style="float:left;width:100%;height:45.5px;">
|
||||
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">昨日水量：</div>
|
||||
<div id="yesterdayWater4" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 20px;"></div>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:45.5px;">
|
||||
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">今日水量：</div>
|
||||
<div id="todayWater4" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 20px;"></div>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:45.5px;">
|
||||
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">污水厂数：</div>
|
||||
<div id="companyNum4" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#F5A524;font-size: 20px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div onclick="doGo('a26fe2699c1b4fdd9192cd606801a0c4');" style="cursor: pointer;width:255px;height:182px;background: linear-gradient(19deg,#02395d 13%, rgba(0,16,107,0.5) 90%);border: 3px solid #00edf2;border-radius: 9px;position: absolute;top:104px;left:1180px;">
|
||||
<div style="float:left;width:100%;height:45.5px;line-height:45.4px;text-align:center;color:#bcdfff;font-size: 16px;"><span>大连区域（</span><span id="waterDesign5" style="color:#a5f1f7;font-size: 20px;"></span><span>万m³/D）</span></div>
|
||||
<div style="float:left;width:100%;height:45.5px;">
|
||||
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">昨日水量：</div>
|
||||
<div id="yesterdayWater5" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 20px;"></div>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:45.5px;">
|
||||
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">今日水量：</div>
|
||||
<div id="todayWater5" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 20px;"></div>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:45.5px;">
|
||||
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">污水厂数：</div>
|
||||
<div id="companyNum5" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#F5A524;font-size: 20px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div onclick="doGo('2720d16c67a94478bbb18acc1601a0b5');" style="cursor: pointer;width:255px;height:182px;background: linear-gradient(19deg,#02395d 13%, rgba(0,16,107,0.5) 90%);border: 3px solid #00edf2;border-radius: 9px;position: absolute;top:315px;left:1180px;">
|
||||
<div style="float:left;width:100%;height:45.5px;line-height:45.4px;text-align:center;color:#bcdfff;font-size: 16px;"><span>潍坊区域（</span><span id="waterDesign6" style="color:#a5f1f7;font-size: 20px;"></span><span>万m³/D）</span></div>
|
||||
<div style="float:left;width:100%;height:45.5px;">
|
||||
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">昨日水量：</div>
|
||||
<div id="yesterdayWater6" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 20px;"></div>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:45.5px;">
|
||||
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">今日水量：</div>
|
||||
<div id="todayWater6" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 20px;"></div>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:45.5px;">
|
||||
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">污水厂数：</div>
|
||||
<div id="companyNum6" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#F5A524;font-size: 20px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width:255px;height:182px;background: linear-gradient(19deg,#02395d 13%, rgba(0,16,107,0.5) 90%);border: 3px solid #00edf2;border-radius: 9px;position: absolute;top:535px;left:1180px;">
|
||||
<div style="float:left;width:100%;height:45.5px;line-height:45.4px;text-align:center;color:#bcdfff;font-size: 16px;"><span>德州区域（</span><span id="waterDesign7" style="color:#a5f1f7;font-size: 20px;"></span><span>万m³/D）</span></div>
|
||||
<div style="float:left;width:100%;height:45.5px;">
|
||||
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">昨日水量：</div>
|
||||
<div id="yesterdayWater7" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 20px;"></div>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:45.5px;">
|
||||
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">今日水量：</div>
|
||||
<div id="todayWater7" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 20px;"></div>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:45.5px;">
|
||||
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">污水厂数：</div>
|
||||
<div id="companyNum7" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#F5A524;font-size: 20px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width:255px;height:182px;background: linear-gradient(19deg,#02395d 13%, rgba(0,16,107,0.5) 90%);border: 3px solid #00edf2;border-radius: 9px;position: absolute;top:750px;left:1180px;">
|
||||
<div style="float:left;width:100%;height:45.5px;line-height:45.4px;text-align:center;color:#bcdfff;font-size: 16px;"><span>枣庄区域（</span><span id="waterDesign8" style="color:#a5f1f7;font-size: 20px;"></span><span>万m³/D）</span></div>
|
||||
<div style="float:left;width:100%;height:45.5px;">
|
||||
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">昨日水量：</div>
|
||||
<div id="yesterdayWater8" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 20px;"></div>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:45.5px;">
|
||||
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">今日水量：</div>
|
||||
<div id="todayWater8" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 20px;"></div>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:45.5px;">
|
||||
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">污水厂数：</div>
|
||||
<div id="companyNum8" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#F5A524;font-size: 20px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
269
WebRoot/jsp/visual/modules/bigScreen_SJRegionalProfile.jsp
Normal file
269
WebRoot/jsp/visual/modules/bigScreen_SJRegionalProfile.jsp
Normal file
@ -0,0 +1,269 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<%@page import="com.sipai.entity.visual.JspElement"%>
|
||||
<%request.setAttribute("Type_GetValue", JspElement.Type_GetValue); %>
|
||||
<%request.setAttribute("Type_GetHourHistory", JspElement.Type_GetHourHistory); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_Get7dayHistory); %>
|
||||
<%request.setAttribute("Type_GetModbus", JspElement.Type_GetModbus); %>
|
||||
<%request.setAttribute("Type_GetHttp", JspElement.Type_GetHttp); %>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<title></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<script type="text/javascript">
|
||||
|
||||
//获取url地址根目录 当前taomcat下路径
|
||||
function getRootPath(){
|
||||
var pathName = window.location.pathname.substring(1);
|
||||
// var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
|
||||
return window.location.protocol + '//' + window.location.host;
|
||||
}
|
||||
|
||||
/* 请求数据 */
|
||||
function getValue() {
|
||||
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
|
||||
// console.log(data);
|
||||
if(data!=''){
|
||||
for(var i=0;i<data.length;i++){
|
||||
if(data[i].elementCode=="branchCompanyNum"){
|
||||
$('#branchCompanyNum').text(data[i].valueUrl);
|
||||
}else if(data[i].elementCode=="peopleNum"){
|
||||
$('#peopleNum').text(data[i].valueUrl);
|
||||
}else if(data[i].elementCode=="waterDesign1"){
|
||||
$('#waterDesign1').text(data[i].valueUrl);
|
||||
}else if(data[i].elementCode=="waterDesign2"){
|
||||
$('#waterDesign2').text(data[i].valueUrl);
|
||||
}else if(data[i].elementCode=="waterDesign3"){
|
||||
$('#waterDesign3').text(data[i].valueUrl);
|
||||
}else if(data[i].elementCode=="waterDesign4"){
|
||||
$('#waterDesign4').text(data[i].valueUrl);
|
||||
}else if(data[i].elementCode=="waterDesign5"){
|
||||
$('#waterDesign5').text(data[i].valueUrl);
|
||||
}else if(data[i].elementCode=="waterDesign6"){
|
||||
$('#waterDesign6').text(data[i].valueUrl);
|
||||
}else if(data[i].elementCode=="waterDesign7"){
|
||||
$('#waterDesign7').text(data[i].valueUrl);
|
||||
}else if(data[i].elementCode=="waterDesign8"){
|
||||
$('#waterDesign8').text(data[i].valueUrl);
|
||||
}else if(data[i].elementCode=="companyNum1"){
|
||||
$('#companyNum1').text(data[i].valueUrl);
|
||||
}else if(data[i].elementCode=="companyNum2"){
|
||||
$('#companyNum2').text(data[i].valueUrl);
|
||||
}else if(data[i].elementCode=="companyNum3"){
|
||||
$('#companyNum3').text(data[i].valueUrl);
|
||||
}else if(data[i].elementCode=="companyNum4"){
|
||||
$('#companyNum4').text(data[i].valueUrl);
|
||||
}else if(data[i].elementCode=="companyNum5"){
|
||||
$('#companyNum5').text(data[i].valueUrl);
|
||||
}else if(data[i].elementCode=="companyNum6"){
|
||||
$('#companyNum6').text(data[i].valueUrl);
|
||||
}else if(data[i].elementCode=="companyNum7"){
|
||||
$('#companyNum7').text(data[i].valueUrl);
|
||||
}else if(data[i].elementCode=="companyNum8"){
|
||||
$('#companyNum8').text(data[i].valueUrl);
|
||||
}else if(data[i].elementCode=="yesterdayWater1"){
|
||||
$('#yesterdayWater1').text((data[i].visualCacheData.value).toFixed(0));
|
||||
}else if(data[i].elementCode=="yesterdayWater2"){
|
||||
$('#yesterdayWater2').text((data[i].visualCacheData.value).toFixed(0));
|
||||
}else if(data[i].elementCode=="yesterdayWater3"){
|
||||
$('#yesterdayWater3').text((data[i].visualCacheData.value).toFixed(0));
|
||||
}else if(data[i].elementCode=="yesterdayWater4"){
|
||||
$('#yesterdayWater4').text((data[i].visualCacheData.value).toFixed(0));
|
||||
}else if(data[i].elementCode=="yesterdayWater5"){
|
||||
$('#yesterdayWater5').text((data[i].visualCacheData.value).toFixed(0));
|
||||
}else if(data[i].elementCode=="yesterdayWater6"){
|
||||
$('#yesterdayWater6').text((data[i].visualCacheData.value).toFixed(0));
|
||||
}else if(data[i].elementCode=="yesterdayWater7"){
|
||||
$('#yesterdayWater7').text((data[i].visualCacheData.value).toFixed(0));
|
||||
}else if(data[i].elementCode=="yesterdayWater8"){
|
||||
$('#yesterdayWater8').text((data[i].visualCacheData.value).toFixed(0));
|
||||
}else if(data[i].elementCode=="todayWater1"){
|
||||
$('#todayWater1').text((data[i].visualCacheData.value).toFixed(0));
|
||||
}else if(data[i].elementCode=="todayWater2"){
|
||||
$('#todayWater2').text((data[i].visualCacheData.value).toFixed(0));
|
||||
}else if(data[i].elementCode=="todayWater3"){
|
||||
$('#todayWater3').text((data[i].visualCacheData.value).toFixed(0));
|
||||
}else if(data[i].elementCode=="todayWater4"){
|
||||
$('#todayWater4').text((data[i].visualCacheData.value).toFixed(0));
|
||||
}else if(data[i].elementCode=="todayWater5"){
|
||||
$('#todayWater5').text((data[i].visualCacheData.value).toFixed(0));
|
||||
}else if(data[i].elementCode=="todayWater6"){
|
||||
$('#todayWater6').text((data[i].visualCacheData.value).toFixed(0));
|
||||
}else if(data[i].elementCode=="todayWater7"){
|
||||
$('#todayWater7').text((data[i].visualCacheData.value).toFixed(0));
|
||||
}else if(data[i].elementCode=="todayWater8"){
|
||||
$('#todayWater8').text((data[i].visualCacheData.value).toFixed(0));
|
||||
}
|
||||
}
|
||||
}
|
||||
}, 'json');
|
||||
}
|
||||
|
||||
/* 定时器 */
|
||||
setInterval(change, 300000); //每5分钟切换
|
||||
// setInterval(getValue, 3600000); //每一小时切换
|
||||
|
||||
/* 初始化 */
|
||||
$(function () {
|
||||
if('${param.backgroundColor}'=='transparent'){
|
||||
document.body.style.backgroundColor = '${param.backgroundColor}';
|
||||
}else{
|
||||
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
|
||||
}
|
||||
document.getElementById("main").style.width = document.documentElement.clientWidth + "px";
|
||||
document.getElementById("main").style.height = (document.documentElement.clientHeight) + "px";
|
||||
|
||||
getValue();
|
||||
//console.log("height",document.body.scrollHeight);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden;">
|
||||
<div style="height:100%;width:100%;">
|
||||
<div id="main" style="height:100%;width:100%;border-radius: 8px;">
|
||||
<div style="position: absolute;width: 350px;height:80px;top:80px;left:250px;">
|
||||
<div style="float: left;width: 30%;height: 100%;line-height:80px;color: #69F6F9;font-size: 24px;font-family: Helvetica;text-align: right;">现有员工</div>
|
||||
<div style="float: left;width: 70%;height: 100%;color: #69F6F9;font-size: 45px;font-family: Helvetica;text-align: center;"><span id="peopleNum"></span><span> 人</span></div>
|
||||
</div>
|
||||
|
||||
<div style="position: absolute;width: 350px;height:80px;top:80px;left:650px;">
|
||||
<div style="float: left;width: 30%;height: 100%;line-height:80px;color: #69F6F9;font-size: 24px;font-family: Helvetica;text-align: right;">项目公司</div>
|
||||
<div style="float: left;width: 70%;height: 100%;color: #69F6F9;font-size: 45px;font-family: Helvetica;text-align: center;"><span id="branchCompanyNum"></span><span> 家</span></div>
|
||||
</div>
|
||||
|
||||
<div style="width:255px;height:182px;background: linear-gradient(149deg,#02395d 13%, rgba(0,16,107,0.5) 90%);border: 3px solid #00edf2;border-radius: 9px;position: absolute;top:230px;left:50px;">
|
||||
<div style="float:left;width:100%;height:45.5px;line-height:45.4px;text-align:center;color:#bcdfff;font-size: 20px;"><span>漯河区域（</span><span id="waterDesign1" style="color:#347EFB;font-size: 30px;"></span><span>万m³/D）</span></div>
|
||||
<div style="float:left;width:100%;height:45.5px;">
|
||||
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 20px;">昨日水量：</div>
|
||||
<div id="yesterdayWater1" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 30px;"></div>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:45.5px;">
|
||||
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 20px;">今日水量：</div>
|
||||
<div id="todayWater1" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 30px;"></div>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:45.5px;">
|
||||
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 20px;">污水厂数：</div>
|
||||
<div id="companyNum1" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#F5A524;font-size: 30px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width:255px;height:182px;background: linear-gradient(149deg,#02395d 13%, rgba(0,16,107,0.5) 90%);border: 3px solid #00edf2;border-radius: 9px;position: absolute;top:552px;left:52px;">
|
||||
<div style="float:left;width:100%;height:45.5px;line-height:45.4px;text-align:center;color:#bcdfff;font-size: 20px;"><span>益阳区域（</span><span id="waterDesign2" style="color:#347EFB;font-size: 30px;"></span><span>万m³/D）</span></div>
|
||||
<div style="float:left;width:100%;height:45.5px;">
|
||||
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 20px;">昨日水量：</div>
|
||||
<div id="yesterdayWater2" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 30px;"></div>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:45.5px;">
|
||||
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 20px;">今日水量：</div>
|
||||
<div id="todayWater2" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 30px;"></div>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:45.5px;">
|
||||
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 20px;">污水厂数：</div>
|
||||
<div id="companyNum2" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#F5A524;font-size: 30px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width:255px;height:182px;background: linear-gradient(149deg,#02395d 13%, rgba(0,16,107,0.5) 90%);border: 3px solid #00edf2;border-radius: 9px;position: absolute;top:759px;left:442px;">
|
||||
<div style="float:left;width:100%;height:45.5px;line-height:45.4px;text-align:center;color:#bcdfff;font-size: 20px;"><span>东莞区域（</span><span id="waterDesign3" style="color:#347EFB;font-size: 30px;"></span><span>万m³/D）</span></div>
|
||||
<div style="float:left;width:100%;height:45.5px;">
|
||||
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 20px;">昨日水量：</div>
|
||||
<div id="yesterdayWater3" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 30px;"></div>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:45.5px;">
|
||||
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 20px;">今日水量：</div>
|
||||
<div id="todayWater3" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 30px;"></div>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:45.5px;">
|
||||
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 20px;">污水厂数：</div>
|
||||
<div id="companyNum3" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#F5A524;font-size: 30px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width:255px;height:182px;background: linear-gradient(149deg,#02395d 13%, rgba(0,16,107,0.5) 90%);border: 3px solid #00edf2;border-radius: 9px;position: absolute;top:749px;left:815px;">
|
||||
<div style="float:left;width:100%;height:45.5px;line-height:45.4px;text-align:center;color:#bcdfff;font-size: 20px;"><span>上海区域（</span><span id="waterDesign4" style="color:#347EFB;font-size: 30px;"></span><span>万m³/D）</span></div>
|
||||
<div style="float:left;width:100%;height:45.5px;">
|
||||
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 20px;">昨日水量：</div>
|
||||
<div id="yesterdayWater4" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 30px;"></div>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:45.5px;">
|
||||
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 20px;">今日水量：</div>
|
||||
<div id="todayWater4" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 30px;"></div>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:45.5px;">
|
||||
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 20px;">污水厂数：</div>
|
||||
<div id="companyNum4" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#F5A524;font-size: 30px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width:255px;height:182px;background: linear-gradient(19deg,#02395d 13%, rgba(0,16,107,0.5) 90%);border: 3px solid #00edf2;border-radius: 9px;position: absolute;top:104px;left:1180px;">
|
||||
<div style="float:left;width:100%;height:45.5px;line-height:45.4px;text-align:center;color:#bcdfff;font-size: 20px;"><span>大连区域（</span><span id="waterDesign5" style="color:#347EFB;font-size: 30px;"></span><span>万m³/D）</span></div>
|
||||
<div style="float:left;width:100%;height:45.5px;">
|
||||
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 20px;">昨日水量：</div>
|
||||
<div id="yesterdayWater5" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 30px;"></div>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:45.5px;">
|
||||
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 20px;">今日水量：</div>
|
||||
<div id="todayWater5" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 30px;"></div>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:45.5px;">
|
||||
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 20px;">污水厂数：</div>
|
||||
<div id="companyNum5" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#F5A524;font-size: 30px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width:255px;height:182px;background: linear-gradient(19deg,#02395d 13%, rgba(0,16,107,0.5) 90%);border: 3px solid #00edf2;border-radius: 9px;position: absolute;top:315px;left:1180px;">
|
||||
<div style="float:left;width:100%;height:45.5px;line-height:45.4px;text-align:center;color:#bcdfff;font-size: 20px;"><span>潍坊区域（</span><span id="waterDesign6" style="color:#347EFB;font-size: 30px;"></span><span>万m³/D）</span></div>
|
||||
<div style="float:left;width:100%;height:45.5px;">
|
||||
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 20px;">昨日水量：</div>
|
||||
<div id="yesterdayWater6" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 30px;"></div>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:45.5px;">
|
||||
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 20px;">今日水量：</div>
|
||||
<div id="todayWater6" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 30px;"></div>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:45.5px;">
|
||||
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 20px;">污水厂数：</div>
|
||||
<div id="companyNum6" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#F5A524;font-size: 30px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width:255px;height:182px;background: linear-gradient(19deg,#02395d 13%, rgba(0,16,107,0.5) 90%);border: 3px solid #00edf2;border-radius: 9px;position: absolute;top:535px;left:1180px;">
|
||||
<div style="float:left;width:100%;height:45.5px;line-height:45.4px;text-align:center;color:#bcdfff;font-size: 20px;"><span>德州区域（</span><span id="waterDesign7" style="color:#347EFB;font-size: 30px;"></span><span>万m³/D）</span></div>
|
||||
<div style="float:left;width:100%;height:45.5px;">
|
||||
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 20px;">昨日水量：</div>
|
||||
<div id="yesterdayWater7" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 30px;"></div>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:45.5px;">
|
||||
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 20px;">今日水量：</div>
|
||||
<div id="todayWater7" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 30px;"></div>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:45.5px;">
|
||||
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 20px;">污水厂数：</div>
|
||||
<div id="companyNum7" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#F5A524;font-size: 30px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width:255px;height:182px;background: linear-gradient(19deg,#02395d 13%, rgba(0,16,107,0.5) 90%);border: 3px solid #00edf2;border-radius: 9px;position: absolute;top:750px;left:1180px;">
|
||||
<div style="float:left;width:100%;height:45.5px;line-height:45.4px;text-align:center;color:#bcdfff;font-size: 20px;"><span>枣庄区域（</span><span id="waterDesign8" style="color:#347EFB;font-size: 30px;"></span><span>万m³/D）</span></div>
|
||||
<div style="float:left;width:100%;height:45.5px;">
|
||||
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 20px;">昨日水量：</div>
|
||||
<div id="yesterdayWater8" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 30px;"></div>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:45.5px;">
|
||||
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 20px;">今日水量：</div>
|
||||
<div id="todayWater8" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 30px;"></div>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:45.5px;">
|
||||
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 20px;">污水厂数：</div>
|
||||
<div id="companyNum8" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#F5A524;font-size: 30px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
250
WebRoot/jsp/visual/modules/bigScreen_SJWFRegionalProfile.jsp
Normal file
250
WebRoot/jsp/visual/modules/bigScreen_SJWFRegionalProfile.jsp
Normal file
@ -0,0 +1,250 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<%@page import="com.sipai.entity.visual.JspElement"%>
|
||||
<%request.setAttribute("Type_GetValue", JspElement.Type_GetValue); %>
|
||||
<%request.setAttribute("Type_GetHourHistory", JspElement.Type_GetHourHistory); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_Get7dayHistory); %>
|
||||
<%request.setAttribute("Type_GetModbus", JspElement.Type_GetModbus); %>
|
||||
<%request.setAttribute("Type_GetHttp", JspElement.Type_GetHttp); %>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<title></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<script type="text/javascript">
|
||||
|
||||
//获取url地址根目录 当前taomcat下路径
|
||||
function getRootPath(){
|
||||
var pathName = window.location.pathname.substring(1);
|
||||
// var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
|
||||
return window.location.protocol + '//' + window.location.host;
|
||||
}
|
||||
|
||||
function numOutput(num){
|
||||
var numpart=String(num).split(".");//将数字通过jq split用小数点分隔为数组对象
|
||||
numpart[0]=numpart[0].replace(new RegExp('(\\d)(?=(\\d{3})+$)','ig'),"$1,");
|
||||
//将数组对象第一个数据(整数部分)通过正则表达式每三位用逗号分隔
|
||||
return numpart.join(".");//把数组通过join方法用.进行拼接
|
||||
}
|
||||
|
||||
/* 请求数据 */
|
||||
function getValue() {
|
||||
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
|
||||
// console.log(data);
|
||||
if(data!=''){
|
||||
for(var i=0;i<data.length;i++){
|
||||
if(data[i].elementCode=="branchCompanyNum"){
|
||||
$('#branchCompanyNum').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="peopleNum"){
|
||||
$('#peopleNum').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="regionDWater"){
|
||||
$('#regionDWater').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="regionYWater"){
|
||||
$('#regionYWater').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="regionTWater"){
|
||||
$('#regionTWater').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="companyDWater1"){
|
||||
$('#companyDWater1').text(numOutput((data[i].visualCacheData.value).toFixed(1)));
|
||||
}else if(data[i].elementCode=="companyDWater2"){
|
||||
$('#companyDWater2').text(numOutput((data[i].visualCacheData.value).toFixed(1)));
|
||||
}else if(data[i].elementCode=="companyDWater3"){
|
||||
$('#companyDWater3').text(numOutput((data[i].visualCacheData.value).toFixed(1)));
|
||||
}else if(data[i].elementCode=="companyDWater4"){
|
||||
$('#companyDWater4').text(numOutput((data[i].visualCacheData.value).toFixed(1)));
|
||||
}else if(data[i].elementCode=="companyYWater1"){
|
||||
$('#companyYWater1').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="companyYWater2"){
|
||||
$('#companyYWater2').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="companyYWater3"){
|
||||
$('#companyYWater3').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="companyYWater4"){
|
||||
$('#companyYWater4').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="companyTWater1"){
|
||||
$('#companyTWater1').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="companyTWater2"){
|
||||
$('#companyTWater2').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="companyTWater3"){
|
||||
$('#companyTWater3').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="companyTWater4"){
|
||||
$('#companyTWater4').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}, 'json');
|
||||
}
|
||||
|
||||
/* 定时器 */
|
||||
setInterval(getValue, 300000); //每5分钟切换
|
||||
// setInterval(getValue, 3600000); //每一小时切换
|
||||
|
||||
/* 初始化 */
|
||||
$(function () {
|
||||
if('${param.backgroundColor}'=='transparent'){
|
||||
document.body.style.backgroundColor = '${param.backgroundColor}';
|
||||
}else{
|
||||
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
|
||||
}
|
||||
document.getElementById("main").style.width = document.documentElement.clientWidth + "px";
|
||||
document.getElementById("main").style.height = (document.documentElement.clientHeight) + "px";
|
||||
|
||||
getValue();
|
||||
//console.log("height",document.body.scrollHeight);
|
||||
});
|
||||
|
||||
var websocket = new WebSocket('ws://' + window.location.host + ext.contextPath + '/chat?userName=大屏');
|
||||
function doGo(planId){
|
||||
//清除交互
|
||||
var clearInterationJsonStr = "[{'type':'clearInteraction'}]";
|
||||
websocket.send(clearInterationJsonStr);
|
||||
var jsonstr = "[{'type':'plan','id':'" + planId + "'}]";
|
||||
websocket.send(jsonstr);
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden;">
|
||||
<div style="height:100%;width:100%;">
|
||||
<div id="main" style="height:100%;width:100%;border-radius: 8px;">
|
||||
<div style="position: absolute;width: 350px;height:80px;top:80px;left:250px;">
|
||||
<div style="float: left;width: 30%;height: 100%;line-height:55px;color: #69F6F9;font-size: 24px;font-family: Helvetica;text-align: right;">现有员工</div>
|
||||
<div style="float: left;width: 50%;height: 100%;color: #69F6F9;font-size: 35px;font-family: Helvetica;text-align: center;"><span id="peopleNum"></span><span> 人</span></div>
|
||||
</div>
|
||||
|
||||
<div style="position: absolute;width: 350px;height:80px;top:80px;left:650px;">
|
||||
<div style="float: left;width: 30%;height: 100%;line-height:55px;color: #69F6F9;font-size: 24px;font-family: Helvetica;text-align: right;">项目公司</div>
|
||||
<div style="float: left;width: 50%;height: 100%;color: #69F6F9;font-size: 35px;font-family: Helvetica;text-align: center;"><span id="branchCompanyNum"></span><span> 家</span></div>
|
||||
</div>
|
||||
|
||||
<div style="width:255px;height:136px;background: linear-gradient(19deg,#02395d 13%, rgba(0,16,107,0.5) 90%);border: 3px solid #00edf2;border-radius: 9px;position: absolute;top:430px;left:1130px;">
|
||||
<div style="float:left;width:100%;height:45.5px;line-height:45.4px;text-align:center;color:#bcdfff;font-size: 16px;"><span>潍坊区域（</span><span id="regionDWater" style="color:#a5f1f7;font-size: 20px;"></span><span>万m³/D）</span></div>
|
||||
<div style="float:left;width:100%;height:45.5px;">
|
||||
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">昨日水量：</div>
|
||||
<div id="regionYWater" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 20px;"></div>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:45.5px;">
|
||||
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">今日水量：</div>
|
||||
<div id="regionTWater" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 20px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width:230px;height:120px;background: rgba(3,5,18,0.25);border-radius: 9px;position:absolute;top:160px;left:50px;">
|
||||
<table style="width:100%;height:100%;table-layout: fixed;text-align: center;vertical-align: middle;font-family: PingFangSC, PingFangSC-Semibold;">
|
||||
<tr style="height:38px;">
|
||||
<td style="width:91px;background:#76afdb;border-radius: 18px 0px 28px 0px;color:rgba(52,241,255,1);font-size:16px;font-weight: 600;letter-spacing:2px;">高新厂</td>
|
||||
<td style="width:30px;"></td>
|
||||
<td style="text-align:left;"><span id="companyDWater1" style="font-size:20px;color:#a5f1f7;"></span><span style="font-size:14px;color:#ffffff;"> 万m³/D</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2" style="text-align:right;font-size: 14px;color: #ffffff;">
|
||||
昨日水量：
|
||||
</td>
|
||||
<td id="companyYWater1" style="text-align:left;font-size:20px;color:#347EFB;">
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2" style="text-align:right;font-size: 14px;color: #ffffff;">
|
||||
今日水量：
|
||||
</td>
|
||||
<td id="companyTWater1" style="text-align:left;font-size:20px;color:#347EFB;">
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div style="width:230px;height:120px;background: rgba(3,5,18,0.25);border-radius: 9px;position:absolute;top:760px;left:1200px;">
|
||||
<table style="width:100%;height:100%;table-layout: fixed;text-align: center;vertical-align: middle;font-family: PingFangSC, PingFangSC-Semibold;">
|
||||
<tr style="height:38px;">
|
||||
<td style="width:91px;background:#76afdb;border-radius: 18px 0px 28px 0px;color:rgba(52,241,255,1);font-size:16px;font-weight: 600;letter-spacing:2px;">沙窝厂</td>
|
||||
<td style="width:30px;"></td>
|
||||
<td style="text-align:left;"><span id="companyDWater2" style="font-size:20px;color:#a5f1f7;"></span><span style="font-size:14px;color:#ffffff;"> 万m³/D</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2" style="text-align:right;font-size: 14px;color: #ffffff;">
|
||||
昨日水量：
|
||||
</td>
|
||||
<td id="companyYWater2" style="text-align:left;font-size:20px;color:#347EFB;">
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2" style="text-align:right;font-size: 14px;color: #ffffff;">
|
||||
今日水量：
|
||||
</td>
|
||||
<td id="companyTWater2" style="text-align:left;font-size:20px;color:#347EFB;">
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div style="width:230px;height:120px;background: rgba(3,5,18,0.25);border-radius: 9px;position:absolute;top:760px;left:50px;">
|
||||
<table style="width:100%;height:100%;table-layout: fixed;text-align: center;vertical-align: middle;font-family: PingFangSC, PingFangSC-Semibold;">
|
||||
<tr style="height:38px;">
|
||||
<td style="width:91px;background:#76afdb;border-radius: 18px 0px 28px 0px;color:rgba(52,241,255,1);font-size:16px;font-weight: 600;letter-spacing:2px;">城西厂</td>
|
||||
<td style="width:30px;"></td>
|
||||
<td style="text-align:left;"><span id="companyDWater3" style="font-size:20px;color:#a5f1f7;"></span><span style="font-size:14px;color:#ffffff;"> 万m³/D</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2" style="text-align:right;font-size: 14px;color: #ffffff;">
|
||||
昨日水量：
|
||||
</td>
|
||||
<td id="companyYWater3" style="text-align:left;font-size:20px;color:#347EFB;">
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2" style="text-align:right;font-size: 14px;color: #ffffff;">
|
||||
今日水量：
|
||||
</td>
|
||||
<td id="companyTWater3" style="text-align:left;font-size:20px;color:#347EFB;">
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div onclick="doGo('e0368f13e99945dbae7dae16b4c50a76');" style="cursor: pointer;width:230px;height:120px;background: rgba(3,5,18,0.25);border-radius: 9px;position:absolute;top:160px;left:1200px;">
|
||||
<table style="width:100%;height:100%;table-layout: fixed;text-align: center;vertical-align: middle;font-family: PingFangSC, PingFangSC-Semibold;">
|
||||
<tr style="height:38px;">
|
||||
<td style="width:91px;background:#76afdb;border-radius: 18px 0px 28px 0px;color:rgba(52,241,255,1);font-size:16px;font-weight: 600;letter-spacing:2px;">城北厂</td>
|
||||
<td style="width:30px;"></td>
|
||||
<td style="text-align:left;"><span id="companyDWater4" style="font-size:20px;color:#a5f1f7;"></span><span style="font-size:14px;color:#ffffff;"> 万m³/D</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2" style="text-align:right;font-size: 14px;color: #ffffff;">
|
||||
昨日水量：
|
||||
</td>
|
||||
<td id="companyYWater4" style="text-align:left;font-size:20px;color:#347EFB;">
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2" style="text-align:right;font-size: 14px;color: #ffffff;">
|
||||
今日水量：
|
||||
</td>
|
||||
<td id="companyTWater4" style="text-align:left;font-size:20px;color:#347EFB;">
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
175
WebRoot/jsp/visual/modules/bigScreen_bigEvent.jsp
Normal file
175
WebRoot/jsp/visual/modules/bigScreen_bigEvent.jsp
Normal file
@ -0,0 +1,175 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<%@page import="com.sipai.entity.visual.JspElement"%>
|
||||
<%request.setAttribute("Type_GetValue", JspElement.Type_GetValue); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_GetHourHistory); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_Get7dayHistory); %>
|
||||
<%request.setAttribute("Type_GetModbus", JspElement.Type_GetModbus); %>
|
||||
<%request.setAttribute("Type_GetHttp", JspElement.Type_GetHttp); %>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<title></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<script type="text/javascript">
|
||||
|
||||
/* 请求数据 */
|
||||
function getValue() {
|
||||
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
|
||||
// console.log(data);
|
||||
if(data!=''){
|
||||
for(var i=0;i<data.length;i++){
|
||||
if(data[i].elementCode=="img"){
|
||||
var url=data[i].valueUrl;
|
||||
$('#Image').css("background","url("+getRootPath()+""+url+") no-repeat 0px 0px");
|
||||
$('#Image').css("background-size","cover");
|
||||
}
|
||||
}
|
||||
}
|
||||
}, 'json');
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 定时器 */
|
||||
//setInterval(change, 60000); //每1分钟切换
|
||||
// setInterval(getValue, 3600000); //每一小时切换
|
||||
|
||||
/* 初始化 */
|
||||
$(function () {
|
||||
if('${param.backgroundColor}'=='transparent'){
|
||||
document.body.style.backgroundColor = '${param.backgroundColor}';
|
||||
}else{
|
||||
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
|
||||
}
|
||||
document.getElementById("main").style.width = document.documentElement.clientWidth + "px";
|
||||
document.getElementById("main").style.height = (document.documentElement.clientHeight) + "px";
|
||||
|
||||
document.getElementById("titleImage").src = ""+getRootPath()+"/images/大屏/大屏标题文字背景.png";
|
||||
|
||||
// getValue();
|
||||
//console.log("height",document.body.scrollHeight);
|
||||
});
|
||||
|
||||
//获取url地址根目录 当前taomcat下路径
|
||||
function getRootPath(){
|
||||
var pathName = window.location.pathname.substring(1);
|
||||
// var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
|
||||
return window.location.protocol + '//' + window.location.host;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden;">
|
||||
<div id="main" style="height:100%;width:100%;padding-top:10px;padding-left:10px;padding-right:10px;">
|
||||
<div style="height:100%;width:100%;">
|
||||
<div style="float:left;width:100%;height:35px;margin-left: 20px;">
|
||||
<div style="float:left;width:194px;height:34px;">
|
||||
<div style="position:absolute;top:12px;left:50px;z-index:999;opacity: 1;font-size: 20px;font-family: Microsoft YaHei, Microsoft YaHei-Regular;margin-left:20px;">大 事 记</div>
|
||||
<img id="titleImage" src="" style="z-index:998;position:relative;height:100%;width:100%;"/>
|
||||
</div>
|
||||
<div id="content" style="float:left;width: 100%;margin-top: 20px;">
|
||||
<div style="float: left;width:100%;height:80px;">
|
||||
<div style="float: left;width:120px;color:#3EFFFF;text-align: center;font-size: 18px;font-family: SimHei, SimHei-Regular;">2020年09月</div>
|
||||
<div style="float: left;width:10px;">
|
||||
<div style="float:left;width: 10px;height: 10px;opacity: 1;background: #3effff;border-radius: 50%;"></div>
|
||||
<div style="float:left;width: 1px;height: 70px;opacity: 1;border: 1px solid #3effff;margin-left: 4px;"></div>
|
||||
</div>
|
||||
<div style="float: left;width:calc(100% - 145px);color:#3EFFFF;text-align: left;font-size: 18px;font-family: SimHei, SimHei-Regular;padding-left:15px;">渝南水司召开公司机构调整暨新大江水厂、鱼洞营管所成立工作会</div>
|
||||
</div>
|
||||
<div style="float: left;width:100%;height:80px;">
|
||||
<div style="float: left;width:120px;color:#3EFFFF;text-align: center;font-size: 18px;font-family: SimHei, SimHei-Regular;">2020年05月</div>
|
||||
<div style="float: left;width:10px;">
|
||||
<div style="float:left;width: 10px;height: 10px;opacity: 1;background: #3effff;border-radius: 50%;"></div>
|
||||
<div style="float:left;width: 1px;height: 70px;opacity: 1;border: 1px solid #3effff;margin-left: 4px;"></div>
|
||||
</div>
|
||||
<div style="float: left;width:calc(100% - 145px);color:#3EFFFF;text-align: left;font-size: 18px;font-family: SimHei, SimHei-Regular;padding-left:15px;">鸡冠石片区供水区域移交签约仪式</div>
|
||||
</div>
|
||||
<div style="float: left;width:100%;height:80px;">
|
||||
<div style="float: left;width:120px;color:#3EFFFF;text-align: center;font-size: 18px;font-family: SimHei, SimHei-Regular;">2020年01月</div>
|
||||
<div style="float: left;width:10px;">
|
||||
<div style="float:left;width: 10px;height: 10px;opacity: 1;background: #3effff;border-radius: 50%;"></div>
|
||||
<div style="float:left;width: 1px;height: 70px;opacity: 1;border: 1px solid #3effff;margin-left: 4px;"></div>
|
||||
</div>
|
||||
<div style="float: left;width:calc(100% - 145px);color:#3EFFFF;text-align: left;font-size: 18px;font-family: SimHei, SimHei-Regular;padding-left:15px;">原重庆市自来水有限公司下属江南水厂和江南营业管网所的管理主体变更为重庆市渝南自来水有限公司</div>
|
||||
</div>
|
||||
<div style="float: left;width:100%;height:80px;">
|
||||
<div style="float: left;width:120px;color:#3EFFFF;text-align: center;font-size: 18px;font-family: SimHei, SimHei-Regular;">2019年12月</div>
|
||||
<div style="float: left;width:10px;">
|
||||
<div style="float:left;width: 10px;height: 10px;opacity: 1;background: #3effff;border-radius: 50%;"></div>
|
||||
<div style="float:left;width: 1px;height: 70px;opacity: 1;border: 1px solid #3effff;margin-left: 4px;"></div>
|
||||
</div>
|
||||
<div style="float: left;width:calc(100% - 145px);color:#3EFFFF;text-align: left;font-size: 18px;font-family: SimHei, SimHei-Regular;padding-left:15px;">渝南水司与市自来水公司进行南部片区供水市场整合协议签订</div>
|
||||
</div>
|
||||
<div style="float: left;width:100%;height:80px;">
|
||||
<div style="float: left;width:120px;color:#3EFFFF;text-align: center;font-size: 18px;font-family: SimHei, SimHei-Regular;">2019年11月</div>
|
||||
<div style="float: left;width:10px;">
|
||||
<div style="float:left;width: 10px;height: 10px;opacity: 1;background: #3effff;border-radius: 50%;"></div>
|
||||
<div style="float:left;width: 1px;height: 70px;opacity: 1;border: 1px solid #3effff;margin-left: 4px;"></div>
|
||||
</div>
|
||||
<div style="float: left;width:calc(100% - 145px);color:#3EFFFF;text-align: left;font-size: 18px;font-family: SimHei, SimHei-Regular;padding-left:15px;">集团领导进行新大江水厂建设及南部保供调研</div>
|
||||
</div>
|
||||
<div style="float: left;width:100%;height:80px;">
|
||||
<div style="float: left;width:120px;color:#3EFFFF;text-align: center;font-size: 18px;font-family: SimHei, SimHei-Regular;">2018年12月</div>
|
||||
<div style="float: left;width:10px;">
|
||||
<div style="float:left;width: 10px;height: 10px;opacity: 1;background: #3effff;border-radius: 50%;"></div>
|
||||
<div style="float:left;width: 1px;height: 70px;opacity: 1;border: 1px solid #3effff;margin-left: 4px;"></div>
|
||||
</div>
|
||||
<div style="float: left;width:calc(100% - 145px);color:#3EFFFF;text-align: left;font-size: 18px;font-family: SimHei, SimHei-Regular;padding-left:15px;">新大江建设一期开工</div>
|
||||
</div>
|
||||
<div style="float: left;width:100%;height:80px;">
|
||||
<div style="float: left;width:120px;color:#3EFFFF;text-align: center;font-size: 18px;font-family: SimHei, SimHei-Regular;">2013年11月</div>
|
||||
<div style="float: left;width:10px;">
|
||||
<div style="float:left;width: 10px;height: 10px;opacity: 1;background: #3effff;border-radius: 50%;"></div>
|
||||
<div style="float:left;width: 1px;height: 70px;opacity: 1;border: 1px solid #3effff;margin-left: 4px;"></div>
|
||||
</div>
|
||||
<div style="float: left;width:calc(100% - 145px);color:#3EFFFF;text-align: left;font-size: 18px;font-family: SimHei, SimHei-Regular;padding-left:15px;">我司华夏八街新收费点正式对外开放</div>
|
||||
</div>
|
||||
<div style="float: left;width:100%;height:80px;">
|
||||
<div style="float: left;width:120px;color:#3EFFFF;text-align: center;font-size: 18px;font-family: SimHei, SimHei-Regular;">2013年02月</div>
|
||||
<div style="float: left;width:10px;">
|
||||
<div style="float:left;width: 10px;height: 10px;opacity: 1;background: #3effff;border-radius: 50%;"></div>
|
||||
<div style="float:left;width: 1px;height: 70px;opacity: 1;border: 1px solid #3effff;margin-left: 4px;"></div>
|
||||
</div>
|
||||
<div style="float: left;width:calc(100% - 145px);color:#3EFFFF;text-align: left;font-size: 18px;font-family: SimHei, SimHei-Regular;padding-left:15px;">大江水厂应急扩建工程正式开工动土</div>
|
||||
</div>
|
||||
<div style="float: left;width:100%;height:80px;">
|
||||
<div style="float: left;width:120px;color:#3EFFFF;text-align: center;font-size: 18px;font-family: SimHei, SimHei-Regular;">2012年04月</div>
|
||||
<div style="float: left;width:10px;">
|
||||
<div style="float:left;width: 10px;height: 10px;opacity: 1;background: #3effff;border-radius: 50%;"></div>
|
||||
<div style="float:left;width: 1px;height: 70px;opacity: 1;border: 1px solid #3effff;margin-left: 4px;"></div>
|
||||
</div>
|
||||
<div style="float: left;width:calc(100% - 145px);color:#3EFFFF;text-align: left;font-size: 18px;font-family: SimHei, SimHei-Regular;padding-left:15px;">龙洲湾新客户服务中心正式营业</div>
|
||||
</div>
|
||||
<div style="float: left;width:100%;height:80px;">
|
||||
<div style="float: left;width:120px;color:#3EFFFF;text-align: center;font-size: 18px;font-family: SimHei, SimHei-Regular;">2005年02月</div>
|
||||
<div style="float: left;width:10px;">
|
||||
<div style="float:left;width: 10px;height: 10px;opacity: 1;background: #3effff;border-radius: 50%;"></div>
|
||||
<div style="float:left;width: 1px;height: 70px;opacity: 1;border: 1px solid #3effff;margin-left: 4px;"></div>
|
||||
</div>
|
||||
<div style="float: left;width:calc(100% - 145px);color:#3EFFFF;text-align: left;font-size: 18px;font-family: SimHei, SimHei-Regular;padding-left:15px;">成立渝南水司大江水厂</div>
|
||||
</div>
|
||||
<div style="float: left;width:100%;height:80px;">
|
||||
<div style="float: left;width:120px;color:#3EFFFF;text-align: center;font-size: 18px;font-family: SimHei, SimHei-Regular;">2002年01月</div>
|
||||
<div style="float: left;width:10px;">
|
||||
<div style="float:left;width: 10px;height: 10px;opacity: 1;background: #3effff;border-radius: 50%;"></div>
|
||||
<div style="float:left;width: 1px;height: 70px;opacity: 1;border: 1px solid #3effff;margin-left: 4px;"></div>
|
||||
</div>
|
||||
<div style="float: left;width:calc(100% - 145px);color:#3EFFFF;text-align: left;font-size: 18px;font-family: SimHei, SimHei-Regular;padding-left:15px;">组建重庆市渝南自来水有限公司；为重庆市水务控股(集团)有限公司出资组建的国有全资子公司，依法经营，确保国有资产的保值、增值和安全。</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
76
WebRoot/jsp/visual/modules/bigScreen_camera.jsp
Normal file
76
WebRoot/jsp/visual/modules/bigScreen_camera.jsp
Normal file
@ -0,0 +1,76 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<%@page import="com.sipai.entity.visual.JspElement"%>
|
||||
<%request.setAttribute("Type_GetValue", JspElement.Type_GetValue); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_GetHourHistory); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_Get7dayHistory); %>
|
||||
<%request.setAttribute("Type_GetModbus", JspElement.Type_GetModbus); %>
|
||||
<%request.setAttribute("Type_GetHttp", JspElement.Type_GetHttp); %>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<title></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<script type="text/javascript">
|
||||
|
||||
/* 请求数据 */
|
||||
function getValue() {
|
||||
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
|
||||
// console.log(data);
|
||||
if(data!=''){
|
||||
for(var i=0;i<data.length;i++){
|
||||
if(data[i].elementCode=="camera"){
|
||||
$('#camera').attr('src',ext.contextPath+data[i].valueUrl);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}, 'json');
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 定时器 */
|
||||
//setInterval(change, 60000); //每1分钟切换
|
||||
// setInterval(getValue, 3600000); //每一小时切换
|
||||
|
||||
/* 初始化 */
|
||||
$(function () {
|
||||
if('${param.backgroundColor}'=='transparent'){
|
||||
document.body.style.backgroundColor = '${param.backgroundColor}';
|
||||
}else{
|
||||
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
|
||||
}
|
||||
document.getElementById("main").style.width = document.documentElement.clientWidth + "px";
|
||||
document.getElementById("main").style.height = (document.documentElement.clientHeight) + "px";
|
||||
|
||||
getValue();
|
||||
//console.log("height",document.body.scrollHeight);
|
||||
});
|
||||
|
||||
//获取url地址根目录 当前taomcat下路径
|
||||
function getRootPath(){
|
||||
var pathName = window.location.pathname.substring(1);
|
||||
// var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
|
||||
return window.location.protocol + '//' + window.location.host;
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden;">
|
||||
<div id="main" style="height:100%;width:100%;padding-top:45px;padding-left:10px;padding-right:10px;">
|
||||
<iframe id="camera" scrolling="no" allowtransparency="yes" style="height:100%;width:100%;border:0px;padding:0px;margin:0px;" ></iframe>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
219
WebRoot/jsp/visual/modules/bigScreen_companyOverview.jsp
Normal file
219
WebRoot/jsp/visual/modules/bigScreen_companyOverview.jsp
Normal file
@ -0,0 +1,219 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<%@page import="com.sipai.entity.visual.JspElement"%>
|
||||
<%request.setAttribute("Type_GetValue", JspElement.Type_GetValue); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_GetHourHistory); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_Get7dayHistory); %>
|
||||
<%request.setAttribute("Type_GetModbus", JspElement.Type_GetModbus); %>
|
||||
<%request.setAttribute("Type_GetHttp", JspElement.Type_GetHttp); %>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<title></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<script type="text/javascript">
|
||||
|
||||
/* 请求数据 */
|
||||
function getValue() {
|
||||
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
|
||||
// console.log(data);
|
||||
if(data!=''){
|
||||
|
||||
}
|
||||
}, 'json');
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 定时器 */
|
||||
//setInterval(change, 60000); //每1分钟切换
|
||||
// setInterval(getValue, 3600000); //每一小时切换
|
||||
|
||||
/* 初始化 */
|
||||
$(function () {
|
||||
if('${param.backgroundColor}'=='transparent'){
|
||||
document.body.style.backgroundColor = '${param.backgroundColor}';
|
||||
}else{
|
||||
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
|
||||
}
|
||||
document.getElementById("main").style.width = document.documentElement.clientWidth + "px";
|
||||
document.getElementById("main").style.height = (document.documentElement.clientHeight) + "px";
|
||||
|
||||
document.getElementById("titleImage").src = ""+getRootPath()+"/images/大屏/大屏标题文字背景.png";
|
||||
document.getElementById("areaImg").src = ""+getRootPath()+"/images/大屏/服务面积.png";
|
||||
document.getElementById("peopleImg").src = ""+getRootPath()+"/images/大屏/服务人口.png";
|
||||
document.getElementById("areaImg2").src = ""+getRootPath()+"/images/大屏/服务面积.png";
|
||||
document.getElementById("peopleImg2").src = ""+getRootPath()+"/images/大屏/服务人口.png";
|
||||
document.getElementById("areaImg3").src = ""+getRootPath()+"/images/大屏/服务面积.png";
|
||||
document.getElementById("peopleImg3").src = ""+getRootPath()+"/images/大屏/服务人口.png";
|
||||
document.getElementById("areaImg4").src = ""+getRootPath()+"/images/大屏/服务面积.png";
|
||||
document.getElementById("peopleImg4").src = ""+getRootPath()+"/images/大屏/服务人口.png";
|
||||
document.getElementById("areaImg5").src = ""+getRootPath()+"/images/大屏/服务面积.png";
|
||||
document.getElementById("peopleImg5").src = ""+getRootPath()+"/images/大屏/服务人口.png";
|
||||
|
||||
// getValue();
|
||||
//console.log("height",document.body.scrollHeight);
|
||||
});
|
||||
|
||||
//获取url地址根目录 当前taomcat下路径
|
||||
function getRootPath(){
|
||||
var pathName = window.location.pathname.substring(1);
|
||||
// var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
|
||||
return window.location.protocol + '//' + window.location.host;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden;">
|
||||
<div id="main" style="height:100%;width:100%;padding-top:10px;padding-left:10px;padding-right:10px;">
|
||||
<div style="height:100%;width:100%;">
|
||||
<div style="float:left;width:100%;height:35px;padding-left: 20px;">
|
||||
<div style="float:left;width:100%;height:34px;">
|
||||
<div style="position:absolute;top:12px;left:50px;z-index:999;opacity: 1;font-size: 20px;font-family: Microsoft YaHei, Microsoft YaHei-Regular;margin-left:30px;">污水厂介绍</div>
|
||||
<img id="titleImage" src="" style="z-index:998;position:relative;"/>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:calc((100% - 100px)/5);padding-left: 20px;margin-top: 30px;">
|
||||
<div style="float: left;height: 35%;width: 100%;">
|
||||
<div style="float: left;height: 100%;width: 50%;font-size: 30px;color: #2B9DD8;">
|
||||
城桥污水处理厂
|
||||
</div>
|
||||
<div style="float: left;height: 100%;width: 25%;">
|
||||
<div style="float: left;height:34px;width:34px;padding-top:5px;">
|
||||
<img id="areaImg" src="" style="z-index:999;position:relative;height:34px;width:34px;"/>
|
||||
</div>
|
||||
<div style="float: left;font-size: 34px;color: #69F6F9;padding-left: 25px;">
|
||||
77
|
||||
</div>
|
||||
</div>
|
||||
<div style="float: left;height: 100%;width: 25%;">
|
||||
<div style="float: left;height:34px;width:34px;padding-top:5px;">
|
||||
<img id="peopleImg" src="" style="z-index:999;position:relative;height:34px;width:34px;"/>
|
||||
</div>
|
||||
<div style="float: left;font-size: 34px;color: #69F6F9;padding-left: 25px;">
|
||||
27
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float: left;height: 65%;width: 100%;font-size: 20px;color: #D8D8D8;">
|
||||
一期设计规模5万m3/d，目前实际运行规模5万m3/d 服务范围包括城桥镇全域与庙镇部分区域
|
||||
</div>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:calc((100% - 100px)/5);padding-left: 20px;">
|
||||
<div style="float: left;height: 35%;width: 100%;">
|
||||
<div style="float: left;height: 100%;width: 50%;font-size: 30px;color: #2B9DD8;">
|
||||
新河污水处理厂
|
||||
</div>
|
||||
<div style="float: left;height: 100%;width: 25%;">
|
||||
<div style="float: left;height:34px;width:34px;padding-top:5px;">
|
||||
<img id="areaImg2" src="" style="z-index:999;position:relative;height:34px;width:34px;"/>
|
||||
</div>
|
||||
<div style="float: left;font-size: 34px;color: #69F6F9;padding-left: 25px;">
|
||||
46
|
||||
</div>
|
||||
</div>
|
||||
<div style="float: left;height: 100%;width: 25%;">
|
||||
<div style="float: left;height:34px;width:34px;padding-top:5px;">
|
||||
<img id="peopleImg2" src="" style="z-index:999;position:relative;height:34px;width:34px;"/>
|
||||
</div>
|
||||
<div style="float: left;font-size: 34px;color: #69F6F9;padding-left: 25px;">
|
||||
10.5
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float: left;height: 65%;width: 100%;font-size: 20px;color: #D8D8D8;">
|
||||
设计规模6.5万m3/d，目前实际运行规模0.5万m3/d 服务范围包括新河镇全域及竖新镇部分区域
|
||||
</div>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:calc((100% - 100px)/5);padding-left: 20px;">
|
||||
<div style="float: left;height: 35%;width: 100%;">
|
||||
<div style="float: left;height: 100%;width: 50%;font-size: 30px;color: #2B9DD8;">
|
||||
堡镇污水处理厂
|
||||
</div>
|
||||
<div style="float: left;height: 100%;width: 25%;">
|
||||
<div style="float: left;height:34px;width:34px;padding-top:5px;">
|
||||
<img id="areaImg3" src="" style="z-index:999;position:relative;height:34px;width:34px;"/>
|
||||
</div>
|
||||
<div style="float: left;font-size: 34px;color: #69F6F9;padding-left: 25px;">
|
||||
231
|
||||
</div>
|
||||
</div>
|
||||
<div style="float: left;height: 100%;width: 25%;">
|
||||
<div style="float: left;height:34px;width:34px;padding-top:5px;">
|
||||
<img id="peopleImg3" src="" style="z-index:999;position:relative;height:34px;width:34px;"/>
|
||||
</div>
|
||||
<div style="float: left;font-size: 34px;color: #69F6F9;padding-left: 25px;">
|
||||
10.8
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float: left;height: 65%;width: 100%;font-size: 20px;color: #D8D8D8;">
|
||||
一期设计规模5万m3/d，目前实际运行规模1.25万m3/d 服务范围包括堡镇、港沿、向化等区域
|
||||
</div>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:calc((100% - 100px)/5);padding-left: 20px;">
|
||||
<div style="float: left;height: 35%;width: 100%;">
|
||||
<div style="float: left;height: 100%;width: 50%;font-size: 30px;color: #2B9DD8;">
|
||||
陈家镇污水处理厂
|
||||
</div>
|
||||
<div style="float: left;height: 100%;width: 25%;">
|
||||
<div style="float: left;height:34px;width:34px;padding-top:5px;">
|
||||
<img id="areaImg4" src="" style="z-index:999;position:relative;height:34px;width:34px;"/>
|
||||
</div>
|
||||
<div style="float: left;font-size: 34px;color: #69F6F9;padding-left: 25px;">
|
||||
224
|
||||
</div>
|
||||
</div>
|
||||
<div style="float: left;height: 65%;width: 25%;">
|
||||
<div style="float: left;height:34px;width:34px;padding-top:5px;">
|
||||
<img id="peopleImg4" src="" style="z-index:999;position:relative;height:34px;width:34px;"/>
|
||||
</div>
|
||||
<div style="float: left;font-size: 34px;color: #69F6F9;padding-left: 25px;">
|
||||
24
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float: left;height: 60%;width: 100%;font-size: 20px;color: #D8D8D8;">
|
||||
设计规模7.0万m3/d，目前实际运行规模1.75万m3/d 服务范围包括陈家镇、前哨农场、崇明东滩等区域
|
||||
</div>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:calc((100% - 100px)/5);padding-left: 20px;">
|
||||
<div style="float: left;height: 35%;width: 100%;">
|
||||
<div style="float: left;height: 100%;width: 50%;font-size: 30px;color: #2B9DD8;">
|
||||
长兴污水处理厂
|
||||
</div>
|
||||
<div style="float: left;height: 100%;width: 25%;">
|
||||
<div style="float: left;height:34px;width:34px;padding-top:5px;">
|
||||
<img id="areaImg5" src="" style="z-index:999;position:relative;height:34px;width:34px;"/>
|
||||
</div>
|
||||
<div style="float: left;font-size: 34px;color: #69F6F9;padding-left: 25px;">
|
||||
26.1
|
||||
</div>
|
||||
</div>
|
||||
<div style="float: left;height: 65%;width: 25%;">
|
||||
<div style="float: left;height:34px;width:34px;padding-top:5px;">
|
||||
<img id="peopleImg5" src="" style="z-index:999;position:relative;height:34px;width:34px;"/>
|
||||
</div>
|
||||
<div style="float: left;font-size: 34px;color: #69F6F9;padding-left: 25px;">
|
||||
12
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float: left;height: 60%;width: 100%;font-size: 20px;color: #D8D8D8;">
|
||||
设计规模5万m3/d，目前实际运行规模2.5万m3/d 服务范围包括工程服务范围包括长兴岛工业、居住用地等区域
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
229
WebRoot/jsp/visual/modules/bigScreen_dataIndicators.jsp
Normal file
229
WebRoot/jsp/visual/modules/bigScreen_dataIndicators.jsp
Normal file
@ -0,0 +1,229 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<%@page import="com.sipai.entity.visual.JspElement"%>
|
||||
<%request.setAttribute("Type_GetValue", JspElement.Type_GetValue); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_GetHourHistory); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_Get7dayHistory); %>
|
||||
<%request.setAttribute("Type_GetModbus", JspElement.Type_GetModbus); %>
|
||||
<%request.setAttribute("Type_GetHttp", JspElement.Type_GetHttp); %>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<title></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<!-- nth-tabs -->
|
||||
<link rel="stylesheet"
|
||||
href="<%=request.getContextPath()%>/node_modules/nth-tabs-master/jquery.scrollbar.css"></link>
|
||||
<link rel="stylesheet" href="<%=request.getContextPath()%>/node_modules/nth-tabs-master/nth-tabs.css"></link>
|
||||
<link rel="stylesheet" href="<%=request.getContextPath()%>/node_modules/nth-tabs-master/nth-icons.css"></link>
|
||||
<script type="text/javascript" src="<%=request.getContextPath()%>/node_modules/nth-tabs-master/jquery.scrollbar.js"
|
||||
charset="utf-8"></script>
|
||||
<script type="text/javascript" src="<%=request.getContextPath()%>/node_modules/nth-tabs-master/nth-tabs.js"
|
||||
charset="utf-8"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
/* 请求数据 */
|
||||
function getbigScreen_dataIndicatorsValue() {
|
||||
// $.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}",sdt:'2020-08-17 00:00',edt:'2020-08-17 23:59',elementCode:'hyData'}, function (data) {
|
||||
// // console.log(data);
|
||||
// if(data!=''){
|
||||
// var html="";
|
||||
// for(var i=0;i<data.length;i++){
|
||||
|
||||
// }
|
||||
// }
|
||||
// }, 'json');
|
||||
// $.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}",sdt:'2020-08-17 00:00',edt:'2020-08-17 23:59',elementCode:'yx Data'}, function (data) {
|
||||
// // console.log(data);
|
||||
// if(data!=''){
|
||||
// var html="";
|
||||
// for(var i=0;i<data.length;i++){
|
||||
// }
|
||||
// }
|
||||
// }, 'json');
|
||||
// $.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}",sdt:'2020-08-17 00:00',edt:'2020-08-17 23:59',elementCode:'sbData'}, function (data) {
|
||||
// // console.log(data);
|
||||
// if(data!=''){
|
||||
// var html="";
|
||||
// for(var i=0;i<data.length;i++){
|
||||
// }
|
||||
// }
|
||||
// }, 'json');
|
||||
}
|
||||
|
||||
function showBigScreen_dataIndicatorsDetais(elementCode){
|
||||
if(elementCode=='hyData'){
|
||||
parent.addTab('hyData','化验数据','/process/dataVisualFrame/view.do?menuType=proVisual&frameId=6bbfcada534642cda634365c376533c4');
|
||||
}
|
||||
else if(elementCode=='yxData'){
|
||||
parent.addTab('yxData','运行数据','/process/dataVisualFrame/view.do?menuType=proVisual&frameId=c008a3cb894b4307b9d488d6a6657dfa');
|
||||
}
|
||||
else if(elementCode=='sbData'){
|
||||
parent.addTab('sbData','设备数据','/equipment/showEquipmentStatisticalChart.do');
|
||||
}
|
||||
}
|
||||
|
||||
// function showBigScreen_dataIndicatorsDetais(elementCode,titleName){
|
||||
// showBigScreen_dataIndicatorsOpen("${param.planLayoutId}",elementCode,titleName);
|
||||
// }
|
||||
|
||||
// function showBigScreen_dataIndicatorsOpen(planLayoutId,elementCode,titleName){
|
||||
// var myDate = new Date;
|
||||
// //获取当前年
|
||||
// var year=myDate.getFullYear();
|
||||
// //获取当前月
|
||||
// var month=myDate.getMonth()+1;
|
||||
// if(Number(month)<10){
|
||||
// month="0"+month;
|
||||
// }
|
||||
// var day = myDate.getDate(); //获取当前日
|
||||
|
||||
// var sdt=year+"-"+month+"-"+day+" 00:00";
|
||||
// var edt=year+"-"+month+"-"+day+" 23:59";
|
||||
// var index = layer.open({
|
||||
// type: 1,
|
||||
// title: false,
|
||||
// closeBtn: 0,
|
||||
// area:["500px","320px"],
|
||||
// fixed: false,
|
||||
// shadeClose: true,
|
||||
// content: '<div id="bigScreen_dataIndicatorsOpen" style="width:500px;height:320px;overflow-y:auto;background:#16314c;"></div><div id="endsubDiv"></div>',
|
||||
// success:function(){
|
||||
// $('#bigScreen_dataIndicatorsOpen').empty();
|
||||
// $.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', {planLayoutId:planLayoutId,sdt:sdt,edt:edt,elementCode:elementCode}, function (data) {
|
||||
// // console.log(data);
|
||||
// if(data!=''){
|
||||
// var html="";
|
||||
// html+="<div style=\"height:100%;width:100%;padding: 10px;\">";
|
||||
// html+="<div style=\"float: left;width:100%;height:100%;padding-left:10px;padding-right:10px;\">";
|
||||
// html+="<div style=\"width: 100%;height:20px;color:#8AC2F6;font-size: 16px;\">"+titleName+"</div>";
|
||||
// html+="<div style=\"width: 100%;height:20px;color:#8AC2F6;font-size: 12px;margin-top: 10px;\"><span>最近时间：</span><span>"+year+"-"+month+"-"+day+"</span></div>";
|
||||
// html+="<table style='height:260px;'>";
|
||||
// var tdNum=0;
|
||||
// var nowCNum=1;
|
||||
// for(var i=0;i<data.length;i++){
|
||||
// var unit="";
|
||||
// if(data[i].mPoint!=''&&data[i].mPoint!=null){
|
||||
// if(data[i].mPoint.unit!=''&&data[i].mPoint.unit!=null){
|
||||
// unit="("+data[i].mPoint.unit+")";
|
||||
// }
|
||||
// }
|
||||
// var parmvalue=0;
|
||||
// if(data[i].mPointHistory!=''&&data[i].mPointHistory!=null){
|
||||
// if(data[i].mPointHistory[0].parmvalue!=''&&data[i].mPointHistory[0].parmvalue!=null){
|
||||
// parmvalue=data[i].mPointHistory[0].parmvalue;
|
||||
// }
|
||||
// }
|
||||
|
||||
// if((i+6) % 6 == 0){
|
||||
// html+="<tr style=\"height:130px;\">";
|
||||
// }
|
||||
// if((tdNum+2) % 2 == 0){
|
||||
// html+="<td style=\"width:165px;padding-right:15px;cursor: pointer;\" >";
|
||||
// html+="<div style=\"width: 100%;height:60px;text-align: center;padding-bottom:2px;\">";
|
||||
// html+="<div onclick=\"showHisEnd('"+data[i].valueUrl+"','"+data[i].unitId+"');\" style=\"width: 100%;height: 50%;font-size: 14px;color: #8ac2f6;background-color:#0E2439;line-height:30px;\">"+data[i].name+"</div>";
|
||||
// html+="<div onclick=\"showHisEnd('"+data[i].valueUrl+"','"+data[i].unitId+"');\" style=\"width: 100%;height: 50%;font-size: 14px;background-color:#0E2439;\"><span style=\"color: #ffffff;\">"+parmvalue+"</span><span style=\"color: #8ac2f6;\">"+unit+"</span></div>";
|
||||
// html+="</div>";
|
||||
// nowCNum++;
|
||||
// }else{
|
||||
// html+="<div style=\"width: 100%;height:60px;text-align: center;padding-bottom:2px;\" >";
|
||||
// html+="<div onclick=\"showHisEnd('"+data[i].valueUrl+"','"+data[i].unitId+"');\" style=\"width: 100%;height: 50%;font-size: 14px;color: #8ac2f6;background-color:#0E2439;line-height:30px;\">"+data[i].name+"</div>";
|
||||
// html+="<div onclick=\"showHisEnd('"+data[i].valueUrl+"','"+data[i].unitId+"');\" style=\"width: 100%;height: 50%;font-size: 14px;background-color:#0E2439;\"><span style=\"color: #ffffff;\">"+parmvalue+"</span><span style=\"color: #8ac2f6;\">"+unit+"</span></div>";
|
||||
// html+="</div>";
|
||||
// html+="</td>";
|
||||
// }
|
||||
// if((i+6) % 6 == 0 && nowCNum==3){
|
||||
// html+="</tr>";
|
||||
// tdNum=0;
|
||||
// nowCNum=1;
|
||||
// }
|
||||
// tdNum++;
|
||||
// }
|
||||
// html+="</table>";
|
||||
// html+="</div>";
|
||||
// html+="</div>";
|
||||
// $('#bigScreen_dataIndicatorsOpen').html(html);
|
||||
// }
|
||||
// }, 'json');
|
||||
// },
|
||||
// end:function(){
|
||||
// layer.closeAll();
|
||||
// },
|
||||
// });
|
||||
// }
|
||||
|
||||
/* 定时器 */
|
||||
//setInterval(change, 60000); //每1分钟切换
|
||||
// setInterval(getValue, 3600000); //每一小时切换
|
||||
|
||||
/* 初始化 */
|
||||
$(function () {
|
||||
if('${param.backgroundColor}'=='transparent'){
|
||||
document.body.style.backgroundColor = '${param.backgroundColor}';
|
||||
}else{
|
||||
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
|
||||
}
|
||||
// document.getElementById("main").style.width = document.documentElement.clientWidth + "px";
|
||||
// document.getElementById("main").style.height = (document.documentElement.clientHeight) + "px";
|
||||
|
||||
document.getElementById("bigScreen_dataIndicatorsbackImage1").src = ""+getRootPath()+"/images/大屏/化验数据.png";
|
||||
document.getElementById("bigScreen_dataIndicatorsbackImage2").src = ""+getRootPath()+"/images/大屏/运行数据.png";
|
||||
document.getElementById("bigScreen_dataIndicatorsbackImage3").src = ""+getRootPath()+"/images/大屏/设备数据.png";
|
||||
// getValue();
|
||||
//console.log("height",document.body.scrollHeight);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden">
|
||||
<div id="bigScreen_dataIndicatorsmain" style="height:100%;width:100%;padding-top:10px;padding-left:10px;padding-right:10px;">
|
||||
<div style="height:100%;width:100%;background:#16314c;border-radius: 8px;padding: 10px;">
|
||||
<div style="width:100%;height: 30%;background:#254464;cursor: pointer;" onclick="showBigScreen_dataIndicatorsDetais('hyData');">
|
||||
<table style="width: 100%;height: 100%;text-align: center;vertical-align: middle;">
|
||||
<tr>
|
||||
<td style="width:40px;padding-left:8px;">
|
||||
<img id="bigScreen_dataIndicatorsbackImage1" src="" style="z-index:999;position:relative;height:50%;width:32px;"/>
|
||||
</td>
|
||||
<td style="font-size: 24px;font-weight:800px;color: #8ac2f6;">化验数据</td>
|
||||
<td style="width:60px;font-size:34px;font-weight:bold;color: #8ac2f6;"><span class="fa fa-long-arrow-right" ></span></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div style="width:100%;height: 5%;"></div>
|
||||
<div style="width:100%;height: 30%;background:#254464;cursor: pointer;" onclick="showBigScreen_dataIndicatorsDetais('yxData');">
|
||||
<table style="width: 100%;height: 100%;text-align: center;vertical-align: middle;">
|
||||
<tr>
|
||||
<td style="width:40px;padding-left:8px;">
|
||||
<img id="bigScreen_dataIndicatorsbackImage2" src="" style="z-index:999;position:relative;height:50%;width:32px;"/>
|
||||
</td>
|
||||
<td style="font-size: 24px;font-weight:800px;color: #8ac2f6;">运行数据</td>
|
||||
<td style="width:60px;font-size:34px;font-weight:bold;color: #8ac2f6;"><span class="fa fa-long-arrow-right" ></span></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div style="width:100%;height: 5%;"></div>
|
||||
<div style="width:100%;height: 30%;background:#254464;cursor: pointer;" onclick="showBigScreen_dataIndicatorsDetais('sbData');">
|
||||
<table style="width: 100%;height: 100%;text-align: center;vertical-align: middle;">
|
||||
<tr>
|
||||
<td style="width:40px;padding-left:8px;">
|
||||
<img id="bigScreen_dataIndicatorsbackImage3" src="" style="z-index:999;position:relative;height:50%;width:32px;"/>
|
||||
</td>
|
||||
<td style="font-size: 24px;font-weight:800px;color: #8ac2f6;">设备数据</td>
|
||||
<td style="width:60px;font-size:34px;font-weight:bold;color: #8ac2f6;"><span class="fa fa-long-arrow-right" ></span></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
230
WebRoot/jsp/visual/modules/bigScreen_emissionReduction.jsp
Normal file
230
WebRoot/jsp/visual/modules/bigScreen_emissionReduction.jsp
Normal file
@ -0,0 +1,230 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<%@page import="com.sipai.entity.visual.JspElement"%>
|
||||
<%request.setAttribute("Type_GetValue", JspElement.Type_GetValue); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_GetHourHistory); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_Get7dayHistory); %>
|
||||
<%request.setAttribute("Type_GetModbus", JspElement.Type_GetModbus); %>
|
||||
<%request.setAttribute("Type_GetHttp", JspElement.Type_GetHttp); %>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<title></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<script type="text/javascript">
|
||||
|
||||
//获取url地址根目录 当前taomcat下路径
|
||||
function getRootPath(){
|
||||
var pathName = window.location.pathname.substring(1);
|
||||
// var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
|
||||
return window.location.protocol + '//' + window.location.host;
|
||||
}
|
||||
|
||||
var mychart="";
|
||||
/* 请求数据 */
|
||||
function getValue() {
|
||||
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
|
||||
// console.log(data);
|
||||
if(data!=null&&data.length>0){
|
||||
var series=[];
|
||||
var actualValue=0;
|
||||
var targetValue=0;
|
||||
var actualValueNum=0;
|
||||
for(var i=0;i<data.length;i++){
|
||||
if(data[i].elementCode=="targetValue"){
|
||||
targetValue=data[i].mPoint.parmvalue;
|
||||
series.push({
|
||||
name:data[i].name,
|
||||
stack:data[i].name,
|
||||
data: [data[i].mPoint.parmvalue],
|
||||
type:'bar',
|
||||
barWidth :30,
|
||||
barGap:2.5,
|
||||
itemStyle:{
|
||||
emphasis: {//柱形图圆角，鼠标移上去效果
|
||||
color:'#ffffff',
|
||||
barBorderRadius: [0, 0, 0, 0]
|
||||
},
|
||||
normal: {//柱形图圆角，初始化效果
|
||||
color:'gray',
|
||||
barBorderRadius:[0, 0, 0, 0],
|
||||
label: {
|
||||
// formatter: "{a}",
|
||||
formatter:function(params){ //标签内容
|
||||
var name=params.seriesName.split("(");
|
||||
return name[0];
|
||||
},
|
||||
show: true,
|
||||
position: "bottom",
|
||||
textStyle: {
|
||||
// fontWeight: "bolder",
|
||||
fontSize: "14",
|
||||
color: "#FFFFFF"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}else if(data[i].elementCode=="actualValue"){
|
||||
series.push({
|
||||
name:(data[i].mPoint.parmvalue).toFixed(2),
|
||||
data: [(data[i].mPoint.parmvalue-targetValue).toFixed(2)],
|
||||
stack:data[i].name,
|
||||
type:'bar',
|
||||
barWidth :30,
|
||||
barGap:2.5,
|
||||
itemStyle:{
|
||||
emphasis: {//柱形图圆角，鼠标移上去效果
|
||||
color:'#36BAFD',
|
||||
barBorderRadius: [10, 10,0,0]
|
||||
},
|
||||
normal: {//柱形图圆角，初始化效果
|
||||
color:'#36BAFD',
|
||||
barBorderRadius:[10, 10,0,0],
|
||||
label: {
|
||||
formatter: "{a}",
|
||||
show: true,
|
||||
position: "top",
|
||||
textStyle: {
|
||||
// fontWeight: "bolder",
|
||||
fontSize: "14",
|
||||
color: "#FFFFFF"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
actualValueNum++;
|
||||
}
|
||||
}
|
||||
|
||||
mychart=echarts.init(document.getElementById('chart'));
|
||||
var option = {
|
||||
animation:false,
|
||||
grid:{
|
||||
left: '4%', // 与容器左侧的距离
|
||||
right: '4%', // 与容器右侧的距离
|
||||
top: '10%', // 与容器顶部的距离
|
||||
bottom: '10%', // 与容器底部的距离
|
||||
containLabel:true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisLabel: {
|
||||
show: true,
|
||||
align:'center',
|
||||
textStyle: {
|
||||
color: '#FFFFFF' //更改坐标轴文字颜色
|
||||
}
|
||||
},
|
||||
axisLine:{
|
||||
show:true,
|
||||
lineStyle:{
|
||||
color:'#3B415C', //更改坐标轴颜色
|
||||
width: 2 // 粗细
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false//是否显示分隔线。默认数值轴显示，类目轴不显示。
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type : 'value',
|
||||
name : false,
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#FFFFFF' //更改坐标轴文字颜色
|
||||
}
|
||||
},
|
||||
axisLine:{
|
||||
show:true,
|
||||
lineStyle:{
|
||||
color:'#3B415C', //更改坐标轴颜色
|
||||
width: 2 // 粗细
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: true,//是否显示分隔线。默认数值轴显示，类目轴不显示。
|
||||
lineStyle:{
|
||||
color:'#262952',
|
||||
type:'dashed'
|
||||
}
|
||||
},
|
||||
// scale:true//设置成 true 后坐标刻度不会强制包含零刻度。
|
||||
},
|
||||
series: series
|
||||
};
|
||||
// console.log(option);
|
||||
mychart.setOption(option,true);
|
||||
|
||||
|
||||
var textnum=data.length-actualValueNum;
|
||||
var textHtml="";
|
||||
for(var m=0;m<data.length;m++){
|
||||
if(data[m].elementCode=="targetValue"){
|
||||
textHtml+="<div style='float:left;width:100%;height: calc((100vh - 60px - 40px)/"+textnum+");'>";
|
||||
textHtml+="<div style='float:left;width:100%;height: calc((100vh - 60px - 40px)/"+textnum+"/2);line-height: calc((100vh - 60px - 40px)/"+textnum+"/2);font-size: 18px;font-family: Helvetica;text-align: center;color: #ffffff;'>"+data[m].name+"</div>";
|
||||
textHtml+="<div style='float:left;width:100%;height: calc((100vh - 60px - 40px)/"+textnum+"/2);line-height: calc((100vh - 60px - 40px)/"+textnum+"/2);font-size: 20px;font-family: Helvetica;text-align: center;color: #69F6F9;'>"+(data[m].mPoint.parmvalue).toFixed(2)+"</div>";
|
||||
// textHtml+="";
|
||||
textHtml+="</div>";
|
||||
}
|
||||
}
|
||||
$('#text').html(textHtml);
|
||||
|
||||
}
|
||||
}, 'json');
|
||||
}
|
||||
|
||||
/* 定时器 */
|
||||
//setInterval(change, 60000); //每1分钟切换
|
||||
setInterval(getValue, 3600000); //每一小时切换
|
||||
|
||||
/* 初始化 */
|
||||
$(function () {
|
||||
if('${param.backgroundColor}'=='transparent'){
|
||||
document.body.style.backgroundColor = '${param.backgroundColor}';
|
||||
}else{
|
||||
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
|
||||
}
|
||||
document.getElementById("main").style.width = document.documentElement.clientWidth + "px";
|
||||
document.getElementById("main").style.height = (document.documentElement.clientHeight-15) + "px";
|
||||
|
||||
document.getElementById("backImage").src = ""+getRootPath()+"/images/大屏/减排量.png";
|
||||
|
||||
getValue();
|
||||
//console.log("height",document.body.scrollHeight);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden">
|
||||
<div style="height:100%;width:100%;padding-top:15px;">
|
||||
<div id="main" style="height:100%;width:100%;padding:0px;background:rgba(19,32,85,0.27);border-radius: 8px;">
|
||||
<div style='float:left;width:50%;height:60px;'><img id="backImage" src="" style="z-index:-1;position:relative;height:100%;width: 100%;"/></div>
|
||||
<div style='float:left;width:50%;height:60px;'></div>
|
||||
<div id="chart" style="float:left;width:70%;height: calc(100vh - 60px - 15px);"></div>
|
||||
<div style="float:left;width:30%;height: calc(100vh - 60px - 10px);">
|
||||
<div id="titletext" style="float:left;width:100%;height:20px;color:#69F6F9;font-size:18px;text-align: center;margin-bottom: 15px;">计划值(灰色)</div>
|
||||
<div id="text" style="float:left;width:100%;height: calc(100vh - 60px - 50px);margin-top: -10px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
234
WebRoot/jsp/visual/modules/bigScreen_energyManagement.jsp
Normal file
234
WebRoot/jsp/visual/modules/bigScreen_energyManagement.jsp
Normal file
@ -0,0 +1,234 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<%@page import="com.sipai.entity.visual.JspElement"%>
|
||||
<%request.setAttribute("Type_GetValue", JspElement.Type_GetValue); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_GetHourHistory); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_Get7dayHistory); %>
|
||||
<%request.setAttribute("Type_GetModbus", JspElement.Type_GetModbus); %>
|
||||
<%request.setAttribute("Type_GetHttp", JspElement.Type_GetHttp); %>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<title></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<script type="text/javascript">
|
||||
|
||||
//获取url地址根目录 当前taomcat下路径
|
||||
function getRootPath(){
|
||||
var pathName = window.location.pathname.substring(1);
|
||||
// var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
|
||||
return window.location.protocol + '//' + window.location.host;
|
||||
}
|
||||
//获取url地址根目录 当前taomcat下路径
|
||||
function getRootPath2(){
|
||||
var pathName = window.location.pathname.substring(1);
|
||||
var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
|
||||
return window.location.protocol + '//' + window.location.host +"/"+webName;
|
||||
}
|
||||
|
||||
var mychart="";
|
||||
/* 请求数据 */
|
||||
function getValue() {
|
||||
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
|
||||
// console.log(data);
|
||||
if(data!=null&&data.length>0){
|
||||
var series=[];
|
||||
var yAxis=[];
|
||||
var actualValue=0;
|
||||
var targetValue=0;
|
||||
var actualValueNum=0;
|
||||
var targetValueNum=0;
|
||||
var barcolor="#36BAFD";
|
||||
for(var i=0;i<data.length;i++){
|
||||
if(data[i].elementCode=="actualValue"){
|
||||
if(actualValueNum==0){
|
||||
barcolor="#3482FF";
|
||||
}else if(actualValueNum==1){
|
||||
barcolor="#C08F33";
|
||||
}else if(actualValueNum==2||actualValueNum==3){
|
||||
barcolor="#8D40CC";
|
||||
}
|
||||
actualValue=data[i].mPoint.parmvalue;
|
||||
series.push({
|
||||
name:data[i].name,
|
||||
stack:data[i].name,
|
||||
data: [actualValue],
|
||||
yAxisIndex: actualValueNum,
|
||||
type:'bar',
|
||||
barWidth : 25,
|
||||
barGap:1.8,
|
||||
itemStyle:{
|
||||
emphasis: {//柱形图圆角，鼠标移上去效果
|
||||
color:barcolor,
|
||||
barBorderRadius: [0, 0, 0, 0]
|
||||
},
|
||||
normal: {//柱形图圆角，初始化效果
|
||||
color:barcolor,
|
||||
barBorderRadius:[0, 0, 0, 0],
|
||||
label: {
|
||||
// formatter: "{a}",
|
||||
formatter:function(params){ //标签内容
|
||||
var name=params.seriesName.split("(");
|
||||
return name[0];
|
||||
},
|
||||
show: true,
|
||||
position: "bottom",
|
||||
textStyle: {
|
||||
// fontWeight: "bolder",
|
||||
fontSize: "14",
|
||||
color: "#FFFFFF"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
yAxis.push({
|
||||
type:'value',
|
||||
show:false
|
||||
});
|
||||
|
||||
actualValueNum++;
|
||||
}else if(data[i].elementCode=="targetValue"){
|
||||
// console.log(actualValue);
|
||||
var tdata=[];
|
||||
if(Number(data[i].valueUrl)-actualValue>0){
|
||||
tdata.push((Number(data[i].valueUrl)-actualValue).toFixed(2));
|
||||
}else{
|
||||
tdata.push(0);
|
||||
}
|
||||
series.push({
|
||||
name:actualValue.toFixed(2),
|
||||
data: tdata,
|
||||
stack:data[i].name,
|
||||
yAxisIndex: targetValueNum,
|
||||
type:'bar',
|
||||
barWidth : 25,
|
||||
barGap:1.8,
|
||||
itemStyle:{
|
||||
emphasis: {//柱形图圆角，鼠标移上去效果
|
||||
color:'gray',
|
||||
barBorderRadius: [10, 10,0,0]
|
||||
},
|
||||
normal: {//柱形图圆角，初始化效果
|
||||
color:'gray',
|
||||
barBorderRadius:[10, 10,0,0],
|
||||
label: {
|
||||
formatter: "{a}",
|
||||
show: true,
|
||||
position: "top",
|
||||
textStyle: {
|
||||
// fontWeight: "bolder",
|
||||
fontSize: "14",
|
||||
color: "#FFFFFF"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
targetValueNum++;
|
||||
}
|
||||
}
|
||||
|
||||
mychart=echarts.init(document.getElementById('chart'));
|
||||
var option = {
|
||||
animation:false,
|
||||
grid:{
|
||||
// left: '1%', // 与容器左侧的距离
|
||||
// right: '1%', // 与容器右侧的距离
|
||||
top: '10%', // 与容器顶部的距离
|
||||
bottom: '10%', // 与容器底部的距离
|
||||
// containLabel:true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisLabel: {
|
||||
show: true,
|
||||
align:'center',
|
||||
textStyle: {
|
||||
color: '#FFFFFF' //更改坐标轴文字颜色
|
||||
}
|
||||
},
|
||||
axisLine:{
|
||||
show:true,
|
||||
lineStyle:{
|
||||
color:'#3B415C', //更改坐标轴颜色
|
||||
width: 2 // 粗细
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false//是否显示分隔线。默认数值轴显示，类目轴不显示。
|
||||
}
|
||||
},
|
||||
yAxis:yAxis,
|
||||
series: series
|
||||
};
|
||||
// console.log(option);
|
||||
mychart.setOption(option,true);
|
||||
|
||||
var textnum=data.length-actualValueNum;
|
||||
var textHtml="";
|
||||
for(var m=0;m<data.length;m++){
|
||||
if(data[m].elementCode=="targetValue"){
|
||||
textHtml+="<div style='float:left;width:100%;height: calc((100vh - 60px - 40px)/"+textnum+");'>";
|
||||
textHtml+="<div style='float:left;width:100%;height: calc((100vh - 60px - 40px)/"+textnum+"/2);line-height: calc((100vh - 60px - 40px)/"+textnum+"/2);font-size: 18px;font-family: Helvetica;text-align: center;color: #ffffff;'>"+data[m].name+"</div>";
|
||||
textHtml+="<div style='float:left;width:100%;height: calc((100vh - 60px - 40px)/"+textnum+"/2);line-height: calc((100vh - 60px - 40px)/"+textnum+"/2);font-size: 20px;font-family: Helvetica;text-align: center;color: #69F6F9;'>"+Number(data[m].valueUrl).toFixed(2)+"</div>";
|
||||
// textHtml+="";
|
||||
textHtml+="</div>";
|
||||
}
|
||||
}
|
||||
$('#text').html(textHtml);
|
||||
|
||||
}
|
||||
}, 'json');
|
||||
}
|
||||
|
||||
/* 定时器 */
|
||||
//setInterval(change, 60000); //每1分钟切换
|
||||
setInterval(getValue, 3600000); //每一小时切换
|
||||
|
||||
/* 初始化 */
|
||||
$(function () {
|
||||
if('${param.backgroundColor}'=='transparent'){
|
||||
document.body.style.backgroundColor = '${param.backgroundColor}';
|
||||
}else{
|
||||
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
|
||||
}
|
||||
document.getElementById("main").style.width = document.documentElement.clientWidth + "px";
|
||||
document.getElementById("main").style.height = (document.documentElement.clientHeight-15) + "px";
|
||||
|
||||
document.getElementById("backImage").src = ""+getRootPath()+"/images/大屏/能耗管理.png";
|
||||
|
||||
getValue();
|
||||
//console.log("height",document.body.scrollHeight);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden">
|
||||
<div style="height:100%;width:100%;padding-top:15px;">
|
||||
<div id="main" style="height:100%;width:100%;padding:0px;background:rgba(19,32,85,0.27);border-radius: 8px;">
|
||||
<div style='float:left;width:50%;height:60px;'><img id="backImage" src="" style="z-index:-1;position:relative;height:100%;width:100%;"/></div>
|
||||
<div style='float:left;width:50%;height:60px;'></div>
|
||||
<div id="chart" style="float:left;width:70%;height: calc(100vh - 60px - 15px);"></div>
|
||||
<div style="float:left;width:30%;height: calc(100vh - 60px - 10px);">
|
||||
<div id="titletext" style="float:left;width:100%;height:20px;color:#69F6F9;font-size:18px;text-align: center;margin-bottom: 15px;">计划值(灰色)</div>
|
||||
<div id="text" style="float:left;width:100%;height: calc(100vh - 60px - 50px);margin-top: -10px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
390
WebRoot/jsp/visual/modules/bigScreen_energyManagement2.jsp
Normal file
390
WebRoot/jsp/visual/modules/bigScreen_energyManagement2.jsp
Normal file
@ -0,0 +1,390 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<%@page import="com.sipai.entity.visual.JspElement"%>
|
||||
<%request.setAttribute("Type_GetValue", JspElement.Type_GetValue); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_GetHourHistory); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_Get7dayHistory); %>
|
||||
<%request.setAttribute("Type_GetModbus", JspElement.Type_GetModbus); %>
|
||||
<%request.setAttribute("Type_GetHttp", JspElement.Type_GetHttp); %>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<title></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<script type="text/javascript">
|
||||
|
||||
//获取url地址根目录 当前taomcat下路径
|
||||
function getRootPath(){
|
||||
var pathName = window.location.pathname.substring(1);
|
||||
// var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
|
||||
return window.location.protocol + '//' + window.location.host;
|
||||
}
|
||||
//获取url地址根目录 当前taomcat下路径
|
||||
function getRootPath2(){
|
||||
var pathName = window.location.pathname.substring(1);
|
||||
var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
|
||||
return window.location.protocol + '//' + window.location.host +"/"+webName;
|
||||
}
|
||||
|
||||
function numOutput(num){
|
||||
var numpart=String(num).split(".");//将数字通过jq split用小数点分隔为数组对象
|
||||
numpart[0]=numpart[0].replace(new RegExp('(\\d)(?=(\\d{3})+$)','ig'),"$1,");
|
||||
//将数组对象第一个数据(整数部分)通过正则表达式每三位用逗号分隔
|
||||
return numpart.join(".");//把数组通过join方法用.进行拼接
|
||||
}
|
||||
|
||||
var mychart="";
|
||||
var lineData=[];
|
||||
var lineData2=[];
|
||||
var lineData3=[];
|
||||
var lineData4=[];
|
||||
/* 请求数据 */
|
||||
function getValue() {
|
||||
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
|
||||
// console.log(data);
|
||||
if(data!=''){
|
||||
for(var i=0;i<data.length;i++){
|
||||
if(data[i].elementCode=="waterTrend"){
|
||||
var valueD=[];
|
||||
if(data[i].mPointHistory!=''){
|
||||
for(var h=0;h<data[i].mPointHistory.length;h++){
|
||||
var value=[];
|
||||
value.push(data[i].mPointHistory[h].measuredt.substring(5,10));
|
||||
value.push(data[i].mPointHistory[h].parmvalue);
|
||||
valueD.push(value);
|
||||
}
|
||||
$('#data1').text(numOutput((data[i].mPointHistory[data[i].mPointHistory.length-1].parmvalue).toFixed(0)));
|
||||
}
|
||||
lineData.push({
|
||||
name:'实际值',
|
||||
value:valueD
|
||||
})
|
||||
}else if(data[i].elementCode=="waterDesign"){
|
||||
var valueD=[];
|
||||
if(lineData!=''){
|
||||
for(var h=0;h<lineData[0].value.length;h++){
|
||||
var value=[];
|
||||
value.push(lineData[0].value[h][0]);
|
||||
value.push(data[i].visualCacheData.value);
|
||||
valueD.push(value);
|
||||
}
|
||||
}
|
||||
lineData.push({
|
||||
name:'目标值',
|
||||
value:valueD
|
||||
})
|
||||
}else if(data[i].elementCode=="mudTrend"){
|
||||
var valueD=[];
|
||||
if(data[i].mPointHistory!=''){
|
||||
for(var h=0;h<data[i].mPointHistory.length;h++){
|
||||
var value=[];
|
||||
value.push(data[i].mPointHistory[h].measuredt.substring(5,10));
|
||||
value.push(data[i].mPointHistory[h].parmvalue);
|
||||
valueD.push(value);
|
||||
}
|
||||
$('#data2').text(numOutput((data[i].mPointHistory[data[i].mPointHistory.length-1].parmvalue).toFixed(0)));
|
||||
}
|
||||
lineData2.push({
|
||||
name:'实际值',
|
||||
value:valueD
|
||||
})
|
||||
}else if(data[i].elementCode=="mudDesign"){
|
||||
var valueD=[];
|
||||
if(lineData2!=''){
|
||||
for(var h=0;h<lineData2[0].value.length;h++){
|
||||
var value=[];
|
||||
value.push(lineData2[0].value[h][0]);
|
||||
value.push(data[i].visualCacheData.value);
|
||||
valueD.push(value);
|
||||
}
|
||||
}
|
||||
lineData2.push({
|
||||
name:'目标值',
|
||||
value:valueD
|
||||
})
|
||||
}else if(data[i].elementCode=="waterPowerTrend"){
|
||||
var valueD=[];
|
||||
if(data[i].mPointHistory!=''){
|
||||
for(var h=0;h<data[i].mPointHistory.length;h++){
|
||||
var value=[];
|
||||
value.push(data[i].mPointHistory[h].measuredt.substring(5,10));
|
||||
value.push(data[i].mPointHistory[h].parmvalue);
|
||||
valueD.push(value);
|
||||
}
|
||||
$('#data3').text(numOutput((data[i].mPointHistory[data[i].mPointHistory.length-1].parmvalue).toFixed(2)));
|
||||
}
|
||||
lineData3.push({
|
||||
name:'实际值',
|
||||
value:valueD
|
||||
})
|
||||
}else if(data[i].elementCode=="waterPowerDesign"){
|
||||
var valueD=[];
|
||||
if(lineData3!=''){
|
||||
for(var h=0;h<lineData3[0].value.length;h++){
|
||||
var value=[];
|
||||
value.push(lineData3[0].value[h][0]);
|
||||
value.push(data[i].visualCacheData.value);
|
||||
valueD.push(value);
|
||||
}
|
||||
}
|
||||
lineData3.push({
|
||||
name:'目标值',
|
||||
value:valueD
|
||||
})
|
||||
}else if(data[i].elementCode=="waterDrugTrend"){
|
||||
var valueD=[];
|
||||
if(data[i].mPointHistory!=''){
|
||||
for(var h=0;h<data[i].mPointHistory.length;h++){
|
||||
var value=[];
|
||||
value.push(data[i].mPointHistory[h].measuredt.substring(5,10));
|
||||
value.push(data[i].mPointHistory[h].parmvalue);
|
||||
valueD.push(value);
|
||||
}
|
||||
$('#data4').text(numOutput((data[i].mPointHistory[data[i].mPointHistory.length-1].parmvalue).toFixed(0)));
|
||||
}
|
||||
lineData4.push({
|
||||
name:'实际值',
|
||||
value:valueD
|
||||
})
|
||||
}else if(data[i].elementCode=="electricPowerDesign"){
|
||||
var valueD=[];
|
||||
if(lineData4!=''){
|
||||
for(var h=0;h<lineData4[0].value.length;h++){
|
||||
var value=[];
|
||||
value.push(lineData4[0].value[h][0]);
|
||||
value.push(data[i].visualCacheData.value);
|
||||
valueD.push(value);
|
||||
}
|
||||
}
|
||||
lineData4.push({
|
||||
name:'目标值',
|
||||
value:valueD
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
doline('lineChart',lineData,'m³/D');
|
||||
}, 'json');
|
||||
}
|
||||
var colorList = ['#F55945', '#74A8FF'];
|
||||
function doline(id,data,unit){
|
||||
var series = new Array;
|
||||
data.forEach(function(val,i){
|
||||
series[i] = {
|
||||
name: val.name,
|
||||
type: 'line',
|
||||
data: val.value,
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0.9,
|
||||
x2: 0,
|
||||
y2: 0,
|
||||
colorStops: [{
|
||||
offset: 0, color: 'transparent'
|
||||
}, {
|
||||
offset: 1, color: colorList[i] // 100% 处的颜色
|
||||
}],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
},
|
||||
lineStyle:{
|
||||
color:colorList[i],
|
||||
width:4
|
||||
},
|
||||
};
|
||||
});
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
var myChart = echarts.init(document.getElementById(id));
|
||||
var option = {
|
||||
color: colorList,
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
legend: {
|
||||
top: 0,
|
||||
left: 10,
|
||||
icon:'circle',
|
||||
textStyle: {
|
||||
color: '#61798F' ,
|
||||
lineHeight: 16,
|
||||
fontSize: 13 ,
|
||||
fontWeight : 600 ,
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: '1%',
|
||||
right: '5%',
|
||||
top: '20%',
|
||||
bottom: '5%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type : 'category',
|
||||
boundaryGap: false,
|
||||
axisLabel: {
|
||||
color:'#8A88B7',
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
name:unit,
|
||||
nameTextStyle:{
|
||||
color:'#8A88B7'
|
||||
},
|
||||
type: 'value',
|
||||
splitNumber: 3 ,
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color:'#8A88B7',
|
||||
},
|
||||
//网格样式
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle:{
|
||||
color: '#8A88B7',
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: series
|
||||
};
|
||||
myChart.clear();
|
||||
myChart.setOption(option, true);
|
||||
}
|
||||
|
||||
/* 定时器 */
|
||||
//setInterval(change, 60000); //每1分钟切换
|
||||
setInterval(getValue, 3600000); //每一小时切换
|
||||
var num=1;
|
||||
$(function(){
|
||||
setInterval (showChart, 10000);
|
||||
function showChart(){
|
||||
if(num==0){
|
||||
doline('lineChart',lineData,'m³/D');
|
||||
document.getElementById("table1").style.background = "#238072";
|
||||
document.getElementById("table2").style.background = "#16314c";
|
||||
document.getElementById("table3").style.background = "#16314c";
|
||||
document.getElementById("table4").style.background = "#16314c";
|
||||
num++;
|
||||
}else if(num==1){
|
||||
doline('lineChart',lineData2,'吨');
|
||||
document.getElementById("table1").style.background = "#16314c";
|
||||
document.getElementById("table2").style.background = "#238072";
|
||||
document.getElementById("table3").style.background = "#16314c";
|
||||
document.getElementById("table4").style.background = "#16314c";
|
||||
num++;
|
||||
}else if(num==2){
|
||||
doline('lineChart',lineData3,'kwh/t');
|
||||
document.getElementById("table1").style.background = "#16314c";
|
||||
document.getElementById("table2").style.background = "#16314c";
|
||||
document.getElementById("table3").style.background = "#238072";
|
||||
document.getElementById("table4").style.background = "#16314c";
|
||||
num++;
|
||||
}else if(num==3){
|
||||
doline('lineChart',lineData4,'kwh');
|
||||
document.getElementById("table1").style.background = "#16314c";
|
||||
document.getElementById("table2").style.background = "#16314c";
|
||||
document.getElementById("table3").style.background = "#16314c";
|
||||
document.getElementById("table4").style.background = "#238072";
|
||||
num=0;
|
||||
}
|
||||
}
|
||||
})
|
||||
/* 初始化 */
|
||||
$(function () {
|
||||
if('${param.backgroundColor}'=='transparent'){
|
||||
document.body.style.backgroundColor = '${param.backgroundColor}';
|
||||
}else{
|
||||
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
|
||||
}
|
||||
document.getElementById("main").style.width = document.documentElement.clientWidth + "px";
|
||||
document.getElementById("main").style.height = (document.documentElement.clientHeight) + "px";
|
||||
|
||||
document.getElementById("backImage").src = ""+getRootPath()+"/images/大屏/KPI管理.png";
|
||||
document.getElementById("backImage2").src = ""+getRootPath()+"/images/大屏/水量.png";
|
||||
document.getElementById("backImage3").src = ""+getRootPath()+"/images/大屏/泥量.png";
|
||||
document.getElementById("backImage4").src = ""+getRootPath()+"/images/大屏/电.png";
|
||||
document.getElementById("backImage5").src = ""+getRootPath()+"/images/大屏/电.png";
|
||||
|
||||
getValue();
|
||||
//console.log("height",document.body.scrollHeight);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden;">
|
||||
<div id="main" style="height:100%;width:100%;padding-left:30px;padding-right:30px;padding-bottom:30px;">
|
||||
<div style="height:100%;width:100%;background:#16314C;border-radius: 8px;">
|
||||
<div style="float:left;width:100%;height:80px;"><img id="backImage" src="" style="z-index:999;position:relative;height:100%;width: 25%;"/></div>
|
||||
<div style="float:left;width:35%;height:calc(100% - 80px);">
|
||||
<div style="float:left;width:100%;height:25%;padding-left: 20px;padding-right: 20px;padding-top:10px;padding-bottom:10px;">
|
||||
<table id="table1" style="width: 100%;height:100%;background: #238072;border-radius: 18px;box-shadow: 9px 9px 12px 0px #0e2439, -9px -9px 12px 0px #203e5d;text-align: center;vertical-align: middle;">
|
||||
<tr>
|
||||
<td width="30%" style="color: #ffffff;"><img id="backImage2" src="" style="z-index:999;position:relative;height:45px;width:45px;"/></td>
|
||||
<td width="30%" style="color: #ffffff;"><div style="float:left;width:100%;font-size:16px;text-align: left;">昨日水量</div><div style="float:left;width:100%;font-size:12px;text-align: left;">/m³</div></td>
|
||||
<td id="data1" width="50%" style="color: #ffffff;font-size:24px;letter-spacing: 4px;"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:25%;padding-left: 20px;padding-right: 20px;padding-top:10px;padding-bottom:10px;">
|
||||
<table id="table2" style="width: 100%;height:100%;background: #16314c;border-radius: 18px;box-shadow: 9px 9px 12px 0px #0e2439, -9px -9px 12px 0px #203e5d;text-align: center;vertical-align: middle;">
|
||||
<tr>
|
||||
<td width="30%" style="color: #ffffff;"><img id="backImage3" src="" style="z-index:999;position:relative;height:45px;width:45px;"/></td>
|
||||
<td width="30%" style="color: #ffffff;"><div style="float:left;width:100%;font-size:16px;text-align: left;">昨日泥量</div><div style="float:left;width:100%;font-size:12px;text-align: left;">/t</div></td>
|
||||
<td id="data2" width="50%" style="color: #ffffff;font-size:24px;letter-spacing: 4px;"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:25%;padding-left: 20px;padding-right: 20px;padding-top:10px;padding-bottom:10px;">
|
||||
<table id="table3" style="width: 100%;height:100%;background: #16314c;border-radius: 18px;box-shadow: 9px 9px 12px 0px #0e2439, -9px -9px 12px 0px #203e5d;text-align: center;vertical-align: middle;">
|
||||
<tr>
|
||||
<td width="30%" style="color: #ffffff;"><img id="backImage4" src="" style="z-index:999;position:relative;height:45px;width:45px;"/></td>
|
||||
<td width="30%" style="color: #ffffff;"><div style="float:left;width:100%;font-size:16px;text-align: left;">吨水电耗</div><div style="float:left;width:100%;font-size:12px;text-align: left;">/kwh/t</div></td>
|
||||
<td id="data3" width="50%" style="color: #ffffff;font-size:24px;letter-spacing: 4px;"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:25%;padding-left: 20px;padding-right: 20px;padding-top:10px;padding-bottom:10px;">
|
||||
<table id="table4" style="width: 100%;height:100%;background: #16314c;border-radius: 18px;box-shadow: 9px 9px 12px 0px #0e2439, -9px -9px 12px 0px #203e5d;text-align: center;vertical-align: middle;">
|
||||
<tr>
|
||||
<td width="30%" style="color: #ffffff;"><img id="backImage5" src="" style="z-index:999;position:relative;height:45px;width:45px;"/></td>
|
||||
<td width="30%" style="color: #ffffff;"><div style="float:left;width:100%;font-size:16px;text-align: left;">用电量</div><div style="float:left;width:100%;font-size:12px;text-align: left;">/kwh</div></td>
|
||||
<td id="data4" width="50%" style="color: #ffffff;font-size:24px;letter-spacing: 4px;"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div style="float:left;width:65%;height:calc(100% - 80px);">
|
||||
<div id="lineChart" style="width:100%;height:100%;padding: 20px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
394
WebRoot/jsp/visual/modules/bigScreen_energyManagement3.jsp
Normal file
394
WebRoot/jsp/visual/modules/bigScreen_energyManagement3.jsp
Normal file
@ -0,0 +1,394 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<%@page import="com.sipai.entity.visual.JspElement"%>
|
||||
<%request.setAttribute("Type_GetValue", JspElement.Type_GetValue); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_GetHourHistory); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_Get7dayHistory); %>
|
||||
<%request.setAttribute("Type_GetModbus", JspElement.Type_GetModbus); %>
|
||||
<%request.setAttribute("Type_GetHttp", JspElement.Type_GetHttp); %>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<title></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<script type="text/javascript">
|
||||
|
||||
/* 请求数据 */
|
||||
|
||||
var series1=[];
|
||||
var series2=[];
|
||||
|
||||
function getValue() {
|
||||
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
|
||||
// console.log(data);
|
||||
if(data!=''){
|
||||
var nowpowerdayP=0;
|
||||
var lastpowerdayP=0;
|
||||
var nowdrugdayP=0;
|
||||
var lastdrugdayP=0;
|
||||
var nowWaterPowerday=0;
|
||||
var lastWaterPowerday=0;
|
||||
|
||||
for(var i=0;i<data.length;i++){
|
||||
if(data[i].elementCode=="powerLine"){
|
||||
if(data[i].getValueType!="getText"){
|
||||
var datas=new Array();
|
||||
for(var j=0;j<data[i].mPointHistory.length;j++){
|
||||
const his=data[i].mPointHistory[j];
|
||||
var ddata=new Array();
|
||||
ddata.push(his.measuredt.substring(0,10));
|
||||
ddata.push(his.parmvalue);
|
||||
datas.push(ddata);
|
||||
}
|
||||
series1.push({
|
||||
data: datas,
|
||||
name: data[i].name,
|
||||
type: 'line',
|
||||
symbol:'none',
|
||||
smooth: true
|
||||
});
|
||||
}else if(data[i].getValueType=="getText"){
|
||||
if(series1!=''&&series1.length>0){
|
||||
var datas=new Array();
|
||||
for (let j = 0; j < series1[0].data.length; j++) {
|
||||
const element = series1[0].data[j];
|
||||
var ddata=new Array();
|
||||
ddata.push(element[0]);
|
||||
ddata.push(data[i].valueUrl);
|
||||
datas.push(ddata);
|
||||
}
|
||||
series1.push({
|
||||
data: datas,
|
||||
name: data[i].name,
|
||||
type: 'line',
|
||||
symbol:'none',
|
||||
smooth: true,
|
||||
itemStyle:{
|
||||
normal:{
|
||||
lineStyle:{
|
||||
type:'dotted' //'dotted'虚线 'solid'实线
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
}else if(data[i].elementCode=="drugLine"){
|
||||
if(data[i].getValueType!="getText"){
|
||||
var datas=new Array();
|
||||
for(var j=0;j<data[i].mPointHistory.length;j++){
|
||||
const his=data[i].mPointHistory[j];
|
||||
var ddata=new Array();
|
||||
ddata.push(his.measuredt.substring(0,10));
|
||||
ddata.push(his.parmvalue);
|
||||
datas.push(ddata);
|
||||
}
|
||||
series2.push({
|
||||
data: datas,
|
||||
name: data[i].name,
|
||||
type: 'line',
|
||||
symbol:'none',
|
||||
smooth: true
|
||||
});
|
||||
}else if(data[i].getValueType=="getText"){
|
||||
if(series2!=''&&series2.length>0){
|
||||
var datas=new Array();
|
||||
for (let j = 0; j < series2[0].data.length; j++) {
|
||||
const element = series2[0].data[j];
|
||||
var ddata=new Array();
|
||||
ddata.push(element[0]);
|
||||
ddata.push(data[i].valueUrl);
|
||||
datas.push(ddata);
|
||||
}
|
||||
series2.push({
|
||||
data: datas,
|
||||
name: data[i].name,
|
||||
type: 'line',
|
||||
symbol:'none',
|
||||
smooth: true,
|
||||
itemStyle:{
|
||||
normal:{
|
||||
lineStyle:{
|
||||
type:'dotted' //'dotted'虚线 'solid'实线
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}else if(data[i].elementCode=="power"){
|
||||
nowpowerdayP = data[i].mPoint.parmvalue;
|
||||
// if(data[i].getValueType=="getTodaySumValue"){
|
||||
// if(data[i].mPointHistory.length>0){
|
||||
// nowpowerdayP=data[i].mPointHistory[0].parmvalue;
|
||||
// }
|
||||
//
|
||||
// }else if(data[i].getValueType=="getYesterdaySumValue"){
|
||||
// if(data[i].mPointHistory.length>0){
|
||||
// lastpowerdayP=data[i].mPointHistory[0].parmvalue;
|
||||
// }
|
||||
// }
|
||||
}else if(data[i].elementCode=="drug"){
|
||||
nowdrugdayP = data[i].mPoint.parmvalue;
|
||||
// if(data[i].getValueType=="getTodayFirstValue"){
|
||||
// if(data[i].mPointHistory.length>0){
|
||||
// nowdrugdayP=data[i].mPointHistory[0].parmvalue;
|
||||
// }
|
||||
//
|
||||
// }else if(data[i].getValueType=="getYesterdayFirstValue"){
|
||||
// if(data[i].mPointHistory.length>0){
|
||||
// lastdrugdayP=data[i].mPointHistory[0].parmvalue;
|
||||
// }
|
||||
// }
|
||||
}else if(data[i].elementCode=="waterPower"){
|
||||
nowWaterPowerday = data[i].mPoint.parmvalue;
|
||||
// if(data[i].getValueType=="getTodayFirstValue"){
|
||||
// if(data[i].mPointHistory.length>0){
|
||||
// nowWaterPowerday=data[i].mPointHistory[0].parmvalue;
|
||||
// }
|
||||
//
|
||||
// }else if(data[i].getValueType=="getYesterdayFirstValue"){
|
||||
// if(data[i].mPointHistory.length>0){
|
||||
// lastWaterPowerday=data[i].mPointHistory[0].parmvalue;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// var daypowerhb=(nowpowerdayP-lastpowerdayP)/lastpowerdayP*100;
|
||||
// daypowerhb=daypowerhb.toFixed(2);
|
||||
$('#dayPowerP').text(nowpowerdayP.toFixed(2));
|
||||
// if(Number(daypowerhb)<0){
|
||||
// $('#dayPowerH').css("color","red");
|
||||
// $('#dayPowerH').text("⬇ 环比"+daypowerhb+"%");
|
||||
// }else{
|
||||
// $('#dayPowerH').css("color","#3fff00");
|
||||
// $('#dayPowerH').text("⬆ 环比"+daypowerhb+"%");
|
||||
// }
|
||||
|
||||
// var daydrughb=(nowdrugdayP-lastdrugdayP)/lastdrugdayP*100;
|
||||
// daydrughb=daydrughb.toFixed(2);
|
||||
$('#dayDrugP').text(nowdrugdayP.toFixed(2));
|
||||
// if(Number(daydrughb)<0){
|
||||
// $('#dayDrugH').css("color","red");
|
||||
// $('#dayDrugH').text("⬇ 环比"+daydrughb+"%");
|
||||
// }else{
|
||||
// $('#dayDrugH').css("color","#3fff00");
|
||||
// $('#dayDrugH').text("⬆ 环比"+daydrughb+"%");
|
||||
// }
|
||||
|
||||
// var dayWaterPowerb=(nowWaterPowerday-lastWaterPowerday)/lastWaterPowerday*100;
|
||||
// dayWaterPowerb=dayWaterPowerb.toFixed(2);
|
||||
$('#dayWaterPowerP').text(nowWaterPowerday.toFixed(2));
|
||||
// if(Number(dayWaterPowerb)<0){
|
||||
// $('#dayWaterPowerH').css("color","red");
|
||||
// $('#dayWaterPowerH').text("⬇ 环比"+dayWaterPowerb+"%");
|
||||
// }else{
|
||||
// $('#dayWaterPowerH').css("color","#3fff00");
|
||||
// $('#dayWaterPowerH').text("⬆ 环比"+dayWaterPowerb+"%");
|
||||
// }
|
||||
|
||||
}
|
||||
|
||||
getChart(series1,['#FFE047','#B7875D','#FFE047']);
|
||||
}, 'json');
|
||||
}
|
||||
|
||||
function typeChange(st){
|
||||
if(st=='click1'){
|
||||
$('#click1').css('background','#e1aa13');
|
||||
$('#click2').css('background','#1a4970');
|
||||
getChart(series1,['#FFE047','#B7875D','#FFE047']);
|
||||
nowSt="click2";
|
||||
nowColor=['#20E9F2','#815DB7','#08A3A3'];
|
||||
}else{
|
||||
$('#click1').css('background','#1a4970');
|
||||
$('#click2').css('background','#e1aa13');
|
||||
getChart(series2,['#20E9F2','#815DB7','#08A3A3']);
|
||||
nowSt="click1";
|
||||
nowColor=['#FFE047','#B7875D','#FFE047'];
|
||||
}
|
||||
}
|
||||
|
||||
function getChart(series,colors){
|
||||
var mychart=echarts.init(document.getElementById('chart'));
|
||||
var option = {
|
||||
color:colors,
|
||||
legend: {
|
||||
data: ['实际', '昨日', '考核'],
|
||||
top:10,
|
||||
right:20,
|
||||
textStyle:{
|
||||
color:'#FFFFFF'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
grid:{
|
||||
left: '4%', // 与容器左侧的距离
|
||||
right: '4%', // 与容器右侧的距离
|
||||
// top: '10%', // 与容器顶部的距离
|
||||
bottom: '10%', // 与容器底部的距离
|
||||
containLabel:true
|
||||
},
|
||||
xAxis: {
|
||||
type:"category",
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'#ffffff',
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type : 'value',
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'#ffffff',
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle:{
|
||||
color: '#8C8C8C'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: series
|
||||
};
|
||||
// console.log(option);
|
||||
mychart.setOption(option,true);
|
||||
}
|
||||
|
||||
/* 定时器 */
|
||||
//setInterval(change, 60000); //每1分钟切换
|
||||
setInterval(getValue, 3600000); //每一小时切换
|
||||
|
||||
var nowSt="click2";
|
||||
var nowColor=['#20E9F2','#815DB7','#08A3A3'];
|
||||
setInterval(function(){ typeChange(nowSt,nowColor) }, 6000);
|
||||
|
||||
/* 初始化 */
|
||||
$(function () {
|
||||
if('${param.backgroundColor}'=='transparent'){
|
||||
document.body.style.backgroundColor = '${param.backgroundColor}';
|
||||
}else{
|
||||
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
|
||||
}
|
||||
document.getElementById("main").style.width = document.documentElement.clientWidth + "px";
|
||||
document.getElementById("main").style.height = (document.documentElement.clientHeight) + "px";
|
||||
|
||||
document.getElementById("image1").src = ""+getRootPath()+"/images/大屏/电单耗.png";
|
||||
document.getElementById("image2").src = ""+getRootPath()+"/images/大屏/药耗.png";
|
||||
|
||||
getValue();
|
||||
//console.log("height",document.body.scrollHeight);
|
||||
});
|
||||
|
||||
//获取url地址根目录 当前taomcat下路径
|
||||
function getRootPath(){
|
||||
var pathName = window.location.pathname.substring(1);
|
||||
// var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
|
||||
return window.location.protocol + '//' + window.location.host;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden;">
|
||||
<div id="main" style="height:100%;width:100%;padding-top:30px;padding-left:10px;padding-right:10px;">
|
||||
<div style="height:100%;width:100%;">
|
||||
<div style="float:left;width:100%;height:26px;margin-left: 20px;">
|
||||
<div style="float:left;width:33.3%;height:26px;">
|
||||
<div style="float:left;width:100px;height:26px;line-height: 26px;color: #ffffff;font-size: 20px;">
|
||||
日用电量
|
||||
</div>
|
||||
<div style="float:left;width:100px;height:26px;line-height: 26px;color: #ffffff;font-size: 16px;">
|
||||
（kWh）
|
||||
</div>
|
||||
</div>
|
||||
<div style="float:left;width:33.3%;height:26px;">
|
||||
<div style="float:left;width:100px;height:26px;line-height: 26px;color: #ffffff;font-size: 20px;">
|
||||
日药耗
|
||||
</div>
|
||||
<div style="float:left;width:100px;height:26px;line-height: 26px;color: #ffffff;font-size: 16px;">
|
||||
（kg/Km3）
|
||||
</div>
|
||||
</div>
|
||||
<div style="float:left;width:33.3%;height:26px;">
|
||||
<div style="float:left;width:100px;height:26px;line-height: 26px;color: #ffffff;font-size: 20px;">
|
||||
吨水电耗
|
||||
</div>
|
||||
<div style="float:left;width:100px;height:26px;line-height: 26px;color: #ffffff;font-size: 16px;">
|
||||
（kWh/t）
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:80px;margin-left: 20px;">
|
||||
<div style="float:left;width:33.3%;height:80px;">
|
||||
<div id="dayPowerP" style="float:left;height:80px;line-height: 80px;color: #69f6f9;font-size: 40px;">
|
||||
</div>
|
||||
<div id="dayPowerH" style="float:left;height:80px;line-height: 80px;font-size: 20px;padding-left: 10px;">
|
||||
</div>
|
||||
</div>
|
||||
<div style="float:left;width:33.3%;height:80px;">
|
||||
<div id="dayDrugP" style="float:left;height:80px;line-height: 80px;color: #69f6f9;font-size: 40px;">
|
||||
</div>
|
||||
<div id="dayDrugH" style="float:left;height:80px;line-height: 80px;font-size: 20px;padding-left: 10px;">
|
||||
</div>
|
||||
</div>
|
||||
<div style="float:left;width:33.3%;height:80px;">
|
||||
<div id="dayWaterPowerP" style="float:left;height:80px;line-height: 80px;color: #69f6f9;font-size: 40px;">
|
||||
</div>
|
||||
<div id="dayWaterPowerH" style="float:left;height:80px;line-height: 80px;font-size: 20px;padding-left: 10px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:280px;margin-left: 20px;background: #16314c;">
|
||||
<div style="float: left;width: 20%;height: 100%;">
|
||||
<div style="float: left;width:100%;height: 45px;line-height: 45px;padding-left: 15px;color: #ffffff;font-size: 20px;font-family: Microsoft YaHei, Microsoft YaHei-Regular;">能耗曲线</div>
|
||||
<div id="click1" onclick="typeChange('click1');" style="float: left;width:125px;height: 53px;margin-left: 15px;background: #e1aa13;border-radius: 10px;cursor: pointer;">
|
||||
<div style="float: left;width: 30px;height: 53px;padding-left: 9px;padding-top: 11px;padding-bottom: 11px;">
|
||||
<img id="image1" src="" style="z-index:998;position:relative;height:100%;width:100%;"/>
|
||||
</div>
|
||||
<div style="float: left;width: 84px;height: 53px;padding-left: 10px;padding-top: 11px;padding-bottom: 11px;">
|
||||
<div style="float: left;width: 100%;height: 55%;text-align: left;color: #ffffff;font-size: 16px;">电单耗</div>
|
||||
<div style="float: left;width: 100%;height: 45%;text-align: left;color: #ffffff;font-size: 8px;">kWh/t</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="click2" onclick="typeChange('click2');" style="float: left;width:125px;height: 53px;margin-left: 15px;margin-top: 15px;background: #1a4970;border-radius: 10px;cursor: pointer;">
|
||||
<div style="float: left;width: 37px;height: 53px;padding-left: 9px;padding-top: 11px;padding-bottom: 11px;">
|
||||
<img id="image2" src="" style="z-index:998;position:relative;height:100%;width:100%;"/>
|
||||
</div>
|
||||
<div style="float: left;width: 78px;height: 53px;padding-left: 10px;padding-top: 11px;padding-bottom: 11px;">
|
||||
<div style="float: left;width: 100%;height: 55%;text-align: left;color: #ffffff;font-size: 16px;">药耗</div>
|
||||
<div style="float: left;width: 100%;height: 45%;text-align: left;color: #ffffff;font-size: 8px;">kg/Km3</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float: left;width: 80%;height: 100%;">
|
||||
<div id="chart" style="width: 100%;height: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
230
WebRoot/jsp/visual/modules/bigScreen_equipmentCondition.jsp
Normal file
230
WebRoot/jsp/visual/modules/bigScreen_equipmentCondition.jsp
Normal file
@ -0,0 +1,230 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<%@page import="com.sipai.entity.visual.JspElement"%>
|
||||
<%request.setAttribute("Type_GetValue", JspElement.Type_GetValue); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_GetHourHistory); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_Get7dayHistory); %>
|
||||
<%request.setAttribute("Type_GetModbus", JspElement.Type_GetModbus); %>
|
||||
<%request.setAttribute("Type_GetHttp", JspElement.Type_GetHttp); %>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<title></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<script type="text/javascript">
|
||||
|
||||
//获取url地址根目录 当前taomcat下路径
|
||||
function getRootPath(){
|
||||
var pathName = window.location.pathname.substring(1);
|
||||
// var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
|
||||
return window.location.protocol + '//' + window.location.host;
|
||||
}
|
||||
//获取url地址根目录 当前taomcat下路径
|
||||
function getRootPath2(){
|
||||
var pathName = window.location.pathname.substring(1);
|
||||
var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
|
||||
return window.location.protocol + '//' + window.location.host +"/"+webName;
|
||||
}
|
||||
|
||||
var mychart="";
|
||||
/* 请求数据 */
|
||||
function getValue() {
|
||||
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
|
||||
if(data!=null&&data.length>0){
|
||||
var textNum=0;
|
||||
var barNum=0;
|
||||
for(var i=0;i<data.length;i++){
|
||||
if(data[i].elementCode=="text"){
|
||||
textNum++;
|
||||
}else if(data[i].elementCode=="bar"){
|
||||
barNum++;
|
||||
}
|
||||
}
|
||||
|
||||
var textHtml="";
|
||||
var nowtextNum=0;
|
||||
for(var m=0;m<data.length;m++){
|
||||
if(data[m].elementCode=="text"){
|
||||
var backgroundColor="";
|
||||
if(nowtextNum==0){
|
||||
backgroundColor="#8d40cc";
|
||||
}else if(nowtextNum==1){
|
||||
backgroundColor="#4864D7";
|
||||
}
|
||||
textHtml+="<div style='float:left;padding-left:5px;padding-right:5px;padding-top:20px;padding-bottom:20px;width:100%;height: calc((100vh - 60px - 30px)/"+textNum+");'>";
|
||||
textHtml+="<div style='float:left;width:100%;height:100%;background:"+backgroundColor+";border-radius:10px;'>";
|
||||
textHtml+="<div style='float:left;width:100%;height:50%;line-height: calc((100vh - 60px - 45px)/"+textNum+"/2 + 15px);background:"+backgroundColor+";border-radius:10px;color: #fafafa;font-family: Helvetica;font-size: 20px;text-align: center;'>"+data[m].name+"</div>";
|
||||
textHtml+="<div style='float:left;width:100%;height:50%;line-height: calc((100vh - 60px - 45px)/"+textNum+"/2 - 20px);background:"+backgroundColor+";border-radius:10px;color: #ffffff;font-family: Helvetica;font-size: 24px;text-align: center;'>"+data[m].mPoint.parmvalue+"</div>";
|
||||
textHtml+="</div>";
|
||||
textHtml+="</div>";
|
||||
nowtextNum++;
|
||||
}
|
||||
}
|
||||
$('#text').html(textHtml);
|
||||
|
||||
var nowbarNum=0;
|
||||
for(var m=0;m<data.length;m++){
|
||||
if(data[m].elementCode=="bar"){
|
||||
var backgroundColor="";
|
||||
var value=data[m].mPoint.parmvalue;
|
||||
var chartid="";
|
||||
var subtext="";
|
||||
if(nowbarNum==0){
|
||||
backgroundColor="#41C6C9";
|
||||
chartid="chart1";
|
||||
subtext="完好率";
|
||||
}else if(nowbarNum==1){
|
||||
backgroundColor="#F5A623";
|
||||
chartid="chart2";
|
||||
subtext="保养完成率";
|
||||
}
|
||||
|
||||
var mychart=echarts.init(document.getElementById(''+chartid+''));
|
||||
var option = {
|
||||
title: {
|
||||
text: value.toFixed(0)+"%",
|
||||
textStyle: {
|
||||
color: '#01c4a3',
|
||||
fontSize: 24
|
||||
},
|
||||
subtext: subtext,
|
||||
subtextStyle: {
|
||||
color: '#909090',
|
||||
fontSize: 22
|
||||
},
|
||||
itemGap: 5, // 主副标题距离
|
||||
left: 'center',
|
||||
top: 'center'
|
||||
},
|
||||
angleAxis: {
|
||||
max: 100, // 满分
|
||||
clockwise: false, // 逆时针
|
||||
// 隐藏刻度线
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
radiusAxis: {
|
||||
type: 'category',
|
||||
// 隐藏刻度线
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
polar: {
|
||||
center: ['50%', '50%'],
|
||||
radius: '160%' //图形大小
|
||||
},
|
||||
series: [{
|
||||
type: 'bar',
|
||||
data: [{
|
||||
name: '百分比',
|
||||
value: value,
|
||||
itemStyle: {
|
||||
color: backgroundColor
|
||||
},
|
||||
}],
|
||||
coordinateSystem: 'polar',
|
||||
roundCap: true,
|
||||
barWidth: 15,
|
||||
barGap: '-100%', // 两环重叠
|
||||
z: 2,
|
||||
},{ // 灰色环
|
||||
type: 'bar',
|
||||
data: [{
|
||||
value: 100,
|
||||
itemStyle: {
|
||||
color: '#2B3F69',
|
||||
shadowColor: 'rgba(0, 0, 0, 0.2)',
|
||||
shadowBlur: 5,
|
||||
shadowOffsetY: 2
|
||||
}
|
||||
}],
|
||||
coordinateSystem: 'polar',
|
||||
roundCap: true,
|
||||
barWidth: 15,
|
||||
barGap: '-100%', // 两环重叠
|
||||
z: 1
|
||||
}]
|
||||
};
|
||||
// console.log(option);
|
||||
mychart.setOption(option,true);
|
||||
|
||||
nowbarNum++;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}, 'json');
|
||||
}
|
||||
|
||||
/* 定时器 */
|
||||
//setInterval(change, 60000); //每1分钟切换
|
||||
setInterval(getValue, 3600000); //每一小时切换
|
||||
|
||||
/* 初始化 */
|
||||
$(function () {
|
||||
if('${param.backgroundColor}'=='transparent'){
|
||||
document.body.style.backgroundColor = '${param.backgroundColor}';
|
||||
}else{
|
||||
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
|
||||
}
|
||||
document.getElementById("main").style.width = document.documentElement.clientWidth + "px";
|
||||
document.getElementById("main").style.height = (document.documentElement.clientHeight-15) + "px";
|
||||
|
||||
document.getElementById("backImage").src = ""+getRootPath()+"/images/大屏/设备情况.png";
|
||||
|
||||
getValue();
|
||||
//console.log("height",document.body.scrollHeight);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden">
|
||||
<div style="height:100%;width:100%;padding-top:15px;">
|
||||
<div id="main" style="height:100%;width:100%;padding:0px;background:rgba(19,32,85,0.27);border-radius: 8px;">
|
||||
<div style='float:left;width:50%;height:60px;'><img id="backImage" src="" style="z-index:-1;position:relative;height:100%;width: 100%;"/></div>
|
||||
<div style='float:left;width:50%;height:60px;'></div>
|
||||
<div id="text" style="float:left;width:15%;height: calc(100vh - 60px - 15px);"></div>
|
||||
<div style="float:left;width:85%;height: calc(100vh - 60px - 15px);">
|
||||
<div style="float:left;width:50%;height:100%">
|
||||
<div id="chart1" style="float:left;width:70%;height:100%"></div>
|
||||
<div id="text3" style="float:left;width:30%;height:100%"></div>
|
||||
</div>
|
||||
<div style="float:left;width:50%;height:100%">
|
||||
<div id="chart2" style="float:left;width:70%;height:100%"></div>
|
||||
<div id="text4" style="float:left;width:30%;height:100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
378
WebRoot/jsp/visual/modules/bigScreen_equipmentCondition2.jsp
Normal file
378
WebRoot/jsp/visual/modules/bigScreen_equipmentCondition2.jsp
Normal file
@ -0,0 +1,378 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<%@page import="com.sipai.entity.visual.JspElement"%>
|
||||
<%request.setAttribute("Type_GetValue", JspElement.Type_GetValue); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_GetHourHistory); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_Get7dayHistory); %>
|
||||
<%request.setAttribute("Type_GetModbus", JspElement.Type_GetModbus); %>
|
||||
<%request.setAttribute("Type_GetHttp", JspElement.Type_GetHttp); %>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<title></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<script type="text/javascript">
|
||||
|
||||
//获取url地址根目录 当前taomcat下路径
|
||||
function getRootPath(){
|
||||
var pathName = window.location.pathname.substring(1);
|
||||
// var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
|
||||
return window.location.protocol + '//' + window.location.host;
|
||||
}
|
||||
//获取url地址根目录 当前taomcat下路径
|
||||
function getRootPath2(){
|
||||
var pathName = window.location.pathname.substring(1);
|
||||
var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
|
||||
return window.location.protocol + '//' + window.location.host +"/"+webName;
|
||||
}
|
||||
|
||||
function numOutput(num){
|
||||
var numpart=String(num).split(".");//将数字通过jq split用小数点分隔为数组对象
|
||||
numpart[0]=numpart[0].replace(new RegExp('(\\d)(?=(\\d{3})+$)','ig'),"$1,");
|
||||
//将数组对象第一个数据(整数部分)通过正则表达式每三位用逗号分隔
|
||||
return numpart.join(".");//把数组通过join方法用.进行拼接
|
||||
}
|
||||
|
||||
/* 请求数据 */
|
||||
function getValue() {
|
||||
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
|
||||
// console.log(data);
|
||||
if(data!=''){
|
||||
var eqTypedata =[];
|
||||
for(var i=0;i<data.length;i++){
|
||||
if(data[i].elementCode=="totalEqNum"){
|
||||
$('#totalEqNum').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="usingTotalEqNum"){
|
||||
$('#usingTotalEqNum').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="AEqNum"){
|
||||
$('#AEqNum').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
eqTypedata.push({
|
||||
name:'A类设备数量',
|
||||
value:(data[i].visualCacheData.value).toFixed(0)
|
||||
})
|
||||
}else if(data[i].elementCode=="BEqNum"){
|
||||
$('#BEqNum').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
eqTypedata.push({
|
||||
name:'B类设备数量',
|
||||
value:(data[i].visualCacheData.value).toFixed(0)
|
||||
})
|
||||
}else if(data[i].elementCode=="CEqNum"){
|
||||
$('#CEqNum').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
eqTypedata.push({
|
||||
name:'C类设备数量',
|
||||
value:(data[i].visualCacheData.value).toFixed(0)
|
||||
})
|
||||
}else if(data[i].elementCode=="eqCompletionRate"){
|
||||
dochart('chart1',(data[i].visualCacheData.value).toFixed(0),'设备完好率','#FFE538');
|
||||
}else if(data[i].elementCode=="maintainCompletionRate"){
|
||||
dochart('chart2',(data[i].visualCacheData.value).toFixed(0),'保养完成率','#3883FF');
|
||||
}else if(data[i].elementCode=="repairCompletionRate"){
|
||||
dochart('chart3',(data[i].visualCacheData.value).toFixed(0),'维修完成率','#3883FF');
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
doequtype("chart4",eqTypedata);
|
||||
|
||||
}, 'json');
|
||||
}
|
||||
|
||||
function dochart(id,value,title,color){
|
||||
var myChart = echarts.init(document.getElementById(id));
|
||||
var option = {
|
||||
title: {
|
||||
text: value+"%",
|
||||
textStyle: {
|
||||
color: '#3883FF',
|
||||
fontSize: 26
|
||||
},
|
||||
subtext: title,
|
||||
subtextStyle: {
|
||||
color: '#E0E1E1',
|
||||
fontSize: 14
|
||||
},
|
||||
itemGap: 5, // 主副标题距离
|
||||
left: 'center',
|
||||
top: 'center'
|
||||
},
|
||||
angleAxis: {
|
||||
max: 100, // 满分
|
||||
clockwise: true, // 逆时针
|
||||
// 隐藏刻度线
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
radiusAxis: {
|
||||
type: 'category',
|
||||
// 隐藏刻度线
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
polar: {
|
||||
center: ['50%', '50%'],
|
||||
radius: '150%' //图形大小
|
||||
},
|
||||
series: [{
|
||||
type: 'bar',
|
||||
data: [{
|
||||
name: '百分比',
|
||||
value: value,
|
||||
itemStyle: {
|
||||
color: color
|
||||
},
|
||||
}],
|
||||
coordinateSystem: 'polar',
|
||||
roundCap: true,
|
||||
barWidth: 15,
|
||||
barGap: '-100%', // 两环重叠
|
||||
z: 2
|
||||
},{ // 灰色环
|
||||
type: 'bar',
|
||||
data: [{
|
||||
value: 100,
|
||||
itemStyle: {
|
||||
color: '#2B3F69',
|
||||
shadowColor: 'rgba(0, 0, 0, 0.2)',
|
||||
shadowBlur: 5,
|
||||
shadowOffsetY: 2
|
||||
}
|
||||
}],
|
||||
coordinateSystem: 'polar',
|
||||
roundCap: true,
|
||||
barWidth: 18,
|
||||
barGap: '-100%', // 两环重叠
|
||||
z: 1
|
||||
}]
|
||||
};
|
||||
myChart.setOption(option, true);
|
||||
}
|
||||
|
||||
//设备类型pie
|
||||
function doequtype(id,val){
|
||||
const colorList = ['#3883FF', '#A84ECB', '#FE8840'];
|
||||
var data = val;
|
||||
var legendName = new Array;
|
||||
data.forEach(function(value,i){
|
||||
legendName[i] = value.name;
|
||||
});
|
||||
var myChart = echarts.init(document.getElementById(id));
|
||||
var option = {
|
||||
title: {
|
||||
text: '设备',
|
||||
textStyle: {
|
||||
fontSize: 17,
|
||||
color: '#61798F',
|
||||
lineHeight: 24
|
||||
},
|
||||
subtextStyle: {
|
||||
fontSize: 28,
|
||||
color: '#333'
|
||||
},
|
||||
textAlign: 'center',
|
||||
left: '48%',
|
||||
top: '41%'
|
||||
},
|
||||
grid: {
|
||||
top:0,
|
||||
left:0,
|
||||
right:0,
|
||||
bottom:0,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
},
|
||||
// legend: {
|
||||
// type: 'scroll',
|
||||
// orient: 'vertical',
|
||||
// right: 20,
|
||||
// top: '20%',
|
||||
// itemGap: 10,
|
||||
// selectedMode: false,
|
||||
// data: legendName,
|
||||
// textStyle: {
|
||||
// rich: {
|
||||
// uname: {
|
||||
// fontSize: 14,
|
||||
// color: '#61798F',
|
||||
// },
|
||||
// unum: {
|
||||
// fontSize: 20,
|
||||
// color: '#FFFFFF',
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// // formatter(name) {
|
||||
// // var index = 0;
|
||||
// // data.forEach(function(value,i){
|
||||
// // if(value.name == name){
|
||||
// // index = i;
|
||||
// // }
|
||||
// // });
|
||||
// // var value = data[index].value;
|
||||
// // return ' {uname|'+name+'}：{unum|'+value+'}';
|
||||
// // }
|
||||
// },
|
||||
color: colorList,
|
||||
series: [
|
||||
{
|
||||
name: '设备',
|
||||
type: 'pie',
|
||||
radius: ['60%', '85%'],
|
||||
center: ['50%', '50%'],
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
borderWidth: 3,
|
||||
borderColor: '#0D436A'
|
||||
},
|
||||
data: data,
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.clear();
|
||||
myChart.setOption(option, true);
|
||||
}
|
||||
|
||||
/* 定时器 */
|
||||
//setInterval(change, 60000); //每1分钟切换
|
||||
setInterval(getValue, 3600000); //每一小时切换
|
||||
|
||||
|
||||
/* 初始化 */
|
||||
$(function () {
|
||||
if('${param.backgroundColor}'=='transparent'){
|
||||
document.body.style.backgroundColor = '${param.backgroundColor}';
|
||||
}else{
|
||||
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
|
||||
}
|
||||
document.getElementById("main").style.width = document.documentElement.clientWidth + "px";
|
||||
document.getElementById("main").style.height = (document.documentElement.clientHeight) + "px";
|
||||
|
||||
document.getElementById("backImage").src = ""+getRootPath()+"/images/大屏/设备情况.png";
|
||||
|
||||
getValue();
|
||||
//console.log("height",document.body.scrollHeight);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden;">
|
||||
<div id="main" style="height:100%;width:100%;padding-left:30px;padding-right:30px;padding-bottom:30px;">
|
||||
<div style="height:100%;width:100%;background:#16314C;border-radius: 8px;">
|
||||
<div style="float:left;width:100%;height:80px;"><img id="backImage" src="" style="z-index:999;position:relative;height:100%;width: 25%;"/></div>
|
||||
<div style="float:left;width:100%;height:calc((100% - 80px)/2);">
|
||||
<div style="float:left;width:23%;height:100%;padding-left:35px;padding-top:30px;">
|
||||
<table style="width: 185px;height:102px;background: linear-gradient(134deg,#3023ae, #c86dd7 102%);border-radius: 18px;text-align: center;vertical-align: middle;">
|
||||
<tr height="70%">
|
||||
<td id="totalEqNum" width="100%" style="color: #ffffff;font-size:36px;"></td>
|
||||
</tr>
|
||||
<tr height="30%">
|
||||
<td width="100%" style="color: #ffffff;font-size:16px;vertical-align:top;">总设备数量</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div style="float:left;width:23%;height:100%;padding-left:35px;padding-top:30px;">
|
||||
<table style="width: 185px;height:102px;background: linear-gradient(50deg,#427dfe 15%, #74d6ff 104%);border-radius: 18px;text-align: center;vertical-align: middle;">
|
||||
<tr height="70%">
|
||||
<td id="usingTotalEqNum" width="100%" style="color: #ffffff;font-size:36px;"></td>
|
||||
</tr>
|
||||
<tr height="30%">
|
||||
<td width="100%" style="color: #ffffff;font-size:16px;vertical-align:top;">投运设备数量</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div style="float:left;width:18%;height:100%;">
|
||||
<div id="chart1" style="width: 100%;height: 100%;"></div>
|
||||
</div>
|
||||
<div style="float:left;width:18%;height:100%;">
|
||||
<div id="chart2" style="width: 100%;height: 100%;"></div>
|
||||
</div>
|
||||
<div style="float:left;width:18%;height:100%;">
|
||||
<div id="chart3" style="width: 100%;height: 100%;"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:calc((100% - 80px)/2);">
|
||||
<div style="float:left;width:40%;height:100%;">
|
||||
<div id="chart4" style="width: 100%;height: 100%;"></div>
|
||||
</div>
|
||||
<div style="float:left;width:20%;height:100%;">
|
||||
<table style="width: 100%;height:100%;text-align: left;vertical-align: middle;">
|
||||
<tr height="20%">
|
||||
<td width="100%" ><div style="width:52px;height:24px;background: #3883FF;border-radius: 8px;"></div></td>
|
||||
</tr>
|
||||
<tr height="30%">
|
||||
<td width="100%" style="color: #ffffff;font-size:24px;">A类设备数量</td>
|
||||
</tr>
|
||||
<tr height="50%">
|
||||
<td id="AEqNum" width="100%" style="color: #ffffff;font-size:34px;vertical-align:top;"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div style="float:left;width:20%;height:100%;">
|
||||
<table style="width: 100%;height:100%;text-align: left;vertical-align: middle;">
|
||||
<tr height="20%">
|
||||
<td width="100%" ><div style="width:52px;height:24px;background: #A84ECB;border-radius: 8px;"></div></td>
|
||||
</tr>
|
||||
<tr height="30%">
|
||||
<td width="100%" style="color: #ffffff;font-size:24px;">B类设备数量</td>
|
||||
</tr>
|
||||
<tr height="50%">
|
||||
<td id="BEqNum" width="100%" style="color: #ffffff;font-size:34px;vertical-align:top;"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div style="float:left;width:20%;height:100%;">
|
||||
<table style="width: 100%;height:100%;text-align: left;vertical-align: middle;">
|
||||
<tr height="20%">
|
||||
<td width="100%" ><div style="width:52px;height:24px;background: #FE8840;border-radius: 8px;"></div></td>
|
||||
</tr>
|
||||
<tr height="30%">
|
||||
<td width="100%" style="color: #ffffff;font-size:24px;">C类设备数量</td>
|
||||
</tr>
|
||||
<tr height="50%">
|
||||
<td id="CEqNum" width="100%" style="color: #ffffff;font-size:34px;vertical-align:top;"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
352
WebRoot/jsp/visual/modules/bigScreen_equipmentCondition3.jsp
Normal file
352
WebRoot/jsp/visual/modules/bigScreen_equipmentCondition3.jsp
Normal file
@ -0,0 +1,352 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<%@page import="com.sipai.entity.visual.JspElement"%>
|
||||
<%request.setAttribute("Type_GetValue", JspElement.Type_GetValue); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_GetHourHistory); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_Get7dayHistory); %>
|
||||
<%request.setAttribute("Type_GetModbus", JspElement.Type_GetModbus); %>
|
||||
<%request.setAttribute("Type_GetHttp", JspElement.Type_GetHttp); %>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<title></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<script type="text/javascript">
|
||||
|
||||
/* 请求数据 */
|
||||
function getbigScreen_equipmentCondition3Value() {
|
||||
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
|
||||
// console.log(data);
|
||||
// if(data!=''){
|
||||
// for(var i=0;i<data.length;i++){
|
||||
// if(data[i].elementCode=="totalEqNum"){
|
||||
// $('#bigScreen_equipmentCondition3totalEqNum').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
// }else if(data[i].elementCode=="usingTotalEqNum"){
|
||||
// $('#bigScreen_equipmentCondition3usingTotalEqNum').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
// }else if(data[i].elementCode=="AEqNum"){
|
||||
// $('#bigScreen_equipmentCondition3AEqNum').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
// eqTypedata.push({
|
||||
// name:'A类设备',
|
||||
// value:(data[i].visualCacheData.value).toFixed(0)
|
||||
// })
|
||||
// }else if(data[i].elementCode=="BEqNum"){
|
||||
// $('#BEqNum').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
// eqTypedata.push({
|
||||
// name:'B类设备',
|
||||
// value:(data[i].visualCacheData.value).toFixed(0)
|
||||
// })
|
||||
// }else if(data[i].elementCode=="CEqNum"){
|
||||
// $('#CEqNum').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
// eqTypedata.push({
|
||||
// name:'C类设备',
|
||||
// value:(data[i].visualCacheData.value).toFixed(0)
|
||||
// })
|
||||
// }else if(data[i].elementCode=="eqCompletionRate"){
|
||||
// dobigScreen_equipmentCondition3chart('bigScreen_equipmentCondition3chart1',(data[i].visualCacheData.value).toFixed(0),'设备完好率','#FFE538');
|
||||
// }else if(data[i].elementCode=="maintainCompletionRate"){
|
||||
// dobigScreen_equipmentCondition3chart('bigScreen_equipmentCondition3chart2',(data[i].visualCacheData.value).toFixed(0),'保养完成率','#3883FF');
|
||||
// }else if(data[i].elementCode=="repairCompletionRate"){
|
||||
// dobigScreen_equipmentCondition3chart('bigScreen_equipmentCondition3chart3',(data[i].visualCacheData.value).toFixed(0),'维修完成率','#3883FF');
|
||||
// }
|
||||
|
||||
|
||||
// }
|
||||
// }
|
||||
var eqTypedata =[];
|
||||
eqTypedata.push({
|
||||
name:'A类设备',
|
||||
value:1337
|
||||
})
|
||||
$('#bigScreen_equipmentCondition3AEqNum').text(1337);
|
||||
eqTypedata.push({
|
||||
name:'B类设备',
|
||||
value:1
|
||||
})
|
||||
$('#bigScreen_equipmentCondition3BEqNum').text(1);
|
||||
eqTypedata.push({
|
||||
name:'C类设备',
|
||||
value:0
|
||||
})
|
||||
$('#bigScreen_equipmentCondition3CEqNum').text(0);
|
||||
|
||||
dobigScreen_equipmentCondition3chart('bigScreen_equipmentCondition3chart1',98,'设备完好率','#FE8841');
|
||||
dobigScreen_equipmentCondition3chart('bigScreen_equipmentCondition3chart2',92,'大修完成率','#862CAA');
|
||||
dobigScreen_equipmentCondition3chart('bigScreen_equipmentCondition3chart3',94,'保养完成率','#3A84FF');
|
||||
doequbigScreen_equipmentCondition3type("bigScreen_equipmentCondition3chart4",eqTypedata);
|
||||
|
||||
}, 'json');
|
||||
}
|
||||
|
||||
function dobigScreen_equipmentCondition3chart(id,value,title,color){
|
||||
var myChart = echarts.init(document.getElementById(id));
|
||||
var option = {
|
||||
title: {
|
||||
text: value+"%",
|
||||
textStyle: {
|
||||
color: '#FFFFFF',
|
||||
fontSize: 14
|
||||
},
|
||||
subtext: title,
|
||||
subtextStyle: {
|
||||
color: '#8AC2F6',
|
||||
fontSize: 12
|
||||
},
|
||||
itemGap: 30, // 主副标题距离
|
||||
left: 'center',
|
||||
top: '40%'
|
||||
},
|
||||
angleAxis: {
|
||||
max: 100, // 满分
|
||||
clockwise: true, // 逆时针
|
||||
// 隐藏刻度线
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
radiusAxis: {
|
||||
type: 'category',
|
||||
// 隐藏刻度线
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
polar: {
|
||||
radius: ['65%', '80%'],
|
||||
center: ['50%', '40%'],
|
||||
radius: '120%' //图形大小
|
||||
},
|
||||
series: [{
|
||||
type: 'bar',
|
||||
data: [{
|
||||
name: '百分比',
|
||||
value: value,
|
||||
itemStyle: {
|
||||
color: color
|
||||
},
|
||||
}],
|
||||
coordinateSystem: 'polar',
|
||||
roundCap: true,
|
||||
barWidth: 4,
|
||||
barGap: '-100%', // 两环重叠
|
||||
z: 2
|
||||
},{ // 灰色环
|
||||
type: 'bar',
|
||||
data: [{
|
||||
value: 100,
|
||||
itemStyle: {
|
||||
color: '#2B3F69',
|
||||
shadowColor: 'rgba(0, 0, 0, 0.2)',
|
||||
shadowBlur: 2,
|
||||
shadowOffsetY: 2
|
||||
}
|
||||
}],
|
||||
coordinateSystem: 'polar',
|
||||
roundCap: true,
|
||||
barWidth: 8,
|
||||
barGap: '-100%', // 两环重叠
|
||||
z: 1
|
||||
}]
|
||||
};
|
||||
myChart.setOption(option, true);
|
||||
}
|
||||
|
||||
//设备类型pie
|
||||
function doequbigScreen_equipmentCondition3type(id,val){
|
||||
const colorList = ['#3883FF', '#A84ECB', '#FE8840'];
|
||||
var data = val;
|
||||
var legendName = new Array;
|
||||
data.forEach(function(value,i){
|
||||
legendName[i] = value.name;
|
||||
});
|
||||
var myChart = echarts.init(document.getElementById(id));
|
||||
var option = {
|
||||
title: {
|
||||
text: '设备\n数量',
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: '#FFFFFF',
|
||||
lineHeight:18
|
||||
},
|
||||
textAlign: 'center',
|
||||
left: '46%',
|
||||
top: '25%'
|
||||
},
|
||||
grid: {
|
||||
top:0,
|
||||
left:0,
|
||||
right:0,
|
||||
bottom:0,
|
||||
},
|
||||
// tooltip: {
|
||||
// trigger: 'item',
|
||||
// },
|
||||
color: colorList,
|
||||
series: [{
|
||||
name: '设备',
|
||||
type: 'pie',
|
||||
radius: ['65%', '80%'],
|
||||
center: ['50%', '40%'],
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
borderWidth: 3,
|
||||
borderColor: '#0D436A'
|
||||
},
|
||||
data: data,
|
||||
}]
|
||||
};
|
||||
myChart.clear();
|
||||
myChart.setOption(option, true);
|
||||
}
|
||||
|
||||
/* 定时器 */
|
||||
//setInterval(change, 60000); //每1分钟切换
|
||||
// setInterval(getValue, 3600000); //每一小时切换
|
||||
|
||||
|
||||
/* 初始化 */
|
||||
$(function () {
|
||||
if('${param.backgroundColor}'=='transparent'){
|
||||
document.body.style.backgroundColor = '${param.backgroundColor}';
|
||||
}else{
|
||||
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
|
||||
}
|
||||
// document.getElementById("main").style.width = document.documentElement.clientWidth + "px";
|
||||
// document.getElementById("main").style.height = (document.documentElement.clientHeight) + "px";
|
||||
|
||||
getbigScreen_equipmentCondition3Value();
|
||||
//console.log("height",document.body.scrollHeight);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden;">
|
||||
<div id="bigScreen_equipmentCondition3main" style="height:100%;width:100%;padding-top:10px;padding-left:10px;padding-right:10px;">
|
||||
<div style="height:100%;width:100%;background:#16314c;border-radius: 8px;">
|
||||
<div style="float:left;width:100%;height:calc(100%*0.3);">
|
||||
<div style="float:left;width:50%;height:100%;">
|
||||
<div style="float:left;width:40%;height:100%;">
|
||||
<table style="width:100%;height:100%;color: #8ac2f6;">
|
||||
<tr style="text-align: center;vertical-align:bottom;">
|
||||
<td>总设备</td>
|
||||
</tr>
|
||||
<tr style="text-align: center;vertical-align:top;">
|
||||
<td>数量</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div style="float:left;width:60%;height:100%;">
|
||||
<table style="width:100%;height:100%;color: #8ac2f6;">
|
||||
<tr style="text-align: center;color: #ffffff;font-weight: 700;font-size: 36px;">
|
||||
<td>1338</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float:left;width:50%;height:100%;">
|
||||
<div style="float:left;width:40%;height:100%;">
|
||||
<table style="width:100%;height:100%;color: #8ac2f6;">
|
||||
<tr style="text-align: center;vertical-align:bottom;">
|
||||
<td>投运设备</td>
|
||||
</tr>
|
||||
<tr style="text-align: center;vertical-align:top;">
|
||||
<td>数量</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div style="float:left;width:60%;height:100%;">
|
||||
<table style="width:100%;height:100%;color: #8ac2f6;">
|
||||
<tr style="text-align: center;color: #ffffff;font-weight: 700;font-size: 36px;">
|
||||
<td>1338</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:calc(100%*0.3);">
|
||||
<div style="float:left;width:33.3%;height:100%;">
|
||||
<div id="bigScreen_equipmentCondition3chart4" style="width: 100%;height: 100%;"></div>
|
||||
</div>
|
||||
<div style="float:left;width:22.2%;height:100%;">
|
||||
<table style="width: 100%;height:100%;text-align: left;vertical-align: middle;">
|
||||
<tr height="20%">
|
||||
<td width="100%" ><div style="width:26px;height:12px;background: #3883FF;border-radius: 2px;"></div></td>
|
||||
</tr>
|
||||
<tr height="30%">
|
||||
<td width="100%" style="color: #ffffff;font-size:12px;">A类设备</td>
|
||||
</tr>
|
||||
<tr height="50%">
|
||||
<td id="bigScreen_equipmentCondition3AEqNum" width="100%" style="color: #ffffff;font-size:16px;font-weight: 700;vertical-align:top;"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div style="float:left;width:22.2%;height:100%;">
|
||||
<table style="width: 100%;height:100%;text-align: left;vertical-align: middle;">
|
||||
<tr height="20%">
|
||||
<td width="100%" ><div style="width:26px;height:12px;background: #A84ECB;border-radius: 2px;"></div></td>
|
||||
</tr>
|
||||
<tr height="30%">
|
||||
<td width="100%" style="color: #ffffff;font-size:12px;">B类设备</td>
|
||||
</tr>
|
||||
<tr height="50%">
|
||||
<td id="bigScreen_equipmentCondition3BEqNum" width="100%" style="color: #ffffff;font-size:16px;font-weight: 700;vertical-align:top;"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div style="float:left;width:22.2%;height:100%;">
|
||||
<table style="width: 100%;height:100%;text-align: left;vertical-align: middle;">
|
||||
<tr height="20%">
|
||||
<td width="100%" ><div style="width:26px;height:12px;background: #FE8840;border-radius: 2px;"></div></td>
|
||||
</tr>
|
||||
<tr height="30%">
|
||||
<td width="100%" style="color: #ffffff;font-size:12px;">C类设备</td>
|
||||
</tr>
|
||||
<tr height="50%">
|
||||
<td id="bigScreen_equipmentCondition3CEqNum" width="100%" style="color: #ffffff;font-size:16px;font-weight: 700;vertical-align:top;"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:calc(100%*0.35);">
|
||||
<div id="bigScreen_equipmentCondition3chart1" style="float:left;width:33.3%;height:100%;">
|
||||
</div>
|
||||
<div id="bigScreen_equipmentCondition3chart2" style="float:left;width:33.3%;height:100%;">
|
||||
</div>
|
||||
<div id="bigScreen_equipmentCondition3chart3" style="float:left;width:33.3%;height:100%;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
225
WebRoot/jsp/visual/modules/bigScreen_equipmentCondition4.jsp
Normal file
225
WebRoot/jsp/visual/modules/bigScreen_equipmentCondition4.jsp
Normal file
@ -0,0 +1,225 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8" %>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject" %>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security" %>
|
||||
<%@page import="com.sipai.entity.visual.JspElement" %>
|
||||
<%request.setAttribute("Type_GetValue", JspElement.Type_GetValue); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_GetHourHistory); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_Get7dayHistory); %>
|
||||
<%request.setAttribute("Type_GetModbus", JspElement.Type_GetModbus); %>
|
||||
<%request.setAttribute("Type_GetHttp", JspElement.Type_GetHttp); %>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<title></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<script type="text/javascript">
|
||||
|
||||
|
||||
|
||||
/* 请求数据 */
|
||||
function getValue() {
|
||||
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', {planLayoutId: "${param.planLayoutId}"}, function (data) {
|
||||
// console.log(data);
|
||||
if (data != '') {
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
if (data[i].elementCode == "totalEqNum") {
|
||||
$('#totalEqNum').text(numOutput(data[i].valueUrl));
|
||||
} else if (data[i].elementCode == "usingTotalEqNum") {
|
||||
$('#usingTotalEqNum').text(numOutput(data[i].valueUrl));
|
||||
} else if (data[i].elementCode == "totalEqPower") {
|
||||
$('#totalEqPower').text(numOutput(data[i].valueUrl));
|
||||
} else if (data[i].elementCode == "eqRate") {
|
||||
getchart('chart', data[i].valueUrl, '', '#36FFF9');
|
||||
}
|
||||
// } else if (data[i].elementCode == "eqRate") {
|
||||
// getchart('chart', 88, '', '#36FFF9');
|
||||
// }
|
||||
}
|
||||
}
|
||||
}, 'json');
|
||||
}
|
||||
|
||||
|
||||
/* 定时器 */
|
||||
//setInterval(change, 60000); //每1分钟切换
|
||||
// setInterval(getValue, 3600000); //每一小时切换
|
||||
|
||||
/* 初始化 */
|
||||
$(function () {
|
||||
if ('${param.backgroundColor}' == 'transparent') {
|
||||
document.body.style.backgroundColor = '${param.backgroundColor}';
|
||||
} else {
|
||||
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
|
||||
}
|
||||
document.getElementById("main").style.width = document.documentElement.clientWidth + "px";
|
||||
document.getElementById("main").style.height = (document.documentElement.clientHeight) + "px";
|
||||
|
||||
document.getElementById("titleImage").src = "" + getRootPath() + "/images/大屏/大屏标题文字背景.png";
|
||||
|
||||
getValue();
|
||||
//console.log("height",document.body.scrollHeight);
|
||||
});
|
||||
|
||||
//获取url地址根目录 当前taomcat下路径
|
||||
function getRootPath() {
|
||||
var pathName = window.location.pathname.substring(1);
|
||||
// var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
|
||||
return window.location.protocol + '//' + window.location.host;
|
||||
}
|
||||
|
||||
function getchart(id, value, title, color) {
|
||||
var myChart = echarts.init(document.getElementById(id));
|
||||
var option = {
|
||||
title: {
|
||||
text: value,
|
||||
textStyle: {
|
||||
color: '#36FFF9',
|
||||
fontSize: 50
|
||||
},
|
||||
subtext: "%",
|
||||
subtextStyle: {
|
||||
color: '#36FFF9',
|
||||
fontSize: 19
|
||||
},
|
||||
itemGap: 0, // 主副标题距离
|
||||
left: 'center',
|
||||
top: '35%'
|
||||
},
|
||||
angleAxis: {
|
||||
max: 100, // 满分
|
||||
clockwise: true, // 逆时针
|
||||
// 隐藏刻度线
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
radiusAxis: {
|
||||
type: 'category',
|
||||
// 隐藏刻度线
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
polar: {
|
||||
center: ['50%', '50%'],
|
||||
radius: '120%' //图形大小
|
||||
},
|
||||
series: [{
|
||||
type: 'bar',
|
||||
data: [{
|
||||
name: '百分比',
|
||||
value: value,
|
||||
itemStyle: {
|
||||
color: color
|
||||
},
|
||||
}],
|
||||
coordinateSystem: 'polar',
|
||||
roundCap: true,
|
||||
barWidth: 10,
|
||||
barGap: '-100%', // 两环重叠
|
||||
z: 2
|
||||
}, { // 灰色环
|
||||
type: 'bar',
|
||||
data: [{
|
||||
value: 100,
|
||||
itemStyle: {
|
||||
color: '#1D4F6D',
|
||||
shadowColor: 'rgba(0, 0, 0, 0.2)',
|
||||
shadowBlur: 2,
|
||||
shadowOffsetY: 2
|
||||
}
|
||||
}],
|
||||
coordinateSystem: 'polar',
|
||||
roundCap: true,
|
||||
barWidth: 12,
|
||||
barGap: '-100%', // 两环重叠
|
||||
z: 1
|
||||
}]
|
||||
};
|
||||
myChart.setOption(option, true);
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
|
||||
function numOutput(num) {
|
||||
var numpart = String(num).split(".");//将数字通过jq split用小数点分隔为数组对象
|
||||
numpart[0] = numpart[0].replace(new RegExp('(\\d)(?=(\\d{3})+$)', 'ig'), "$1,");
|
||||
//将数组对象第一个数据(整数部分)通过正则表达式每三位用逗号分隔
|
||||
return numpart.join(".");//把数组通过join方法用.进行拼接
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden;">
|
||||
<div id="main" style="height:100%;width:100%;padding-top:10px;padding-left:10px;padding-right:10px;">
|
||||
<div style="height:100%;width:100%;">
|
||||
<div style="float:left;width:100%;height:35px;margin-left: 20px;">
|
||||
<div style="float:left;width:194px;height:34px;">
|
||||
<div style="position:absolute;top:12px;left:50px;z-index:999;opacity: 1;font-size: 20px;font-family: Microsoft YaHei, Microsoft YaHei-Regular;margin-left:20px;">
|
||||
设备管理
|
||||
</div>
|
||||
<img id="titleImage" src="" style="z-index:998;position:relative;height:100%;width:100%;"/>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float:left;width:40%;height:400px;margin-top: 20px;">
|
||||
<table>
|
||||
<tr>
|
||||
<td style="color: #ffffff;text-align: right;font-size: 16px;">设备总数 （台）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id="totalEqNum" style="color: #69f6f9;text-align: right;font-size: 30px;">2,900</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="color: #ffffff;text-align: right;font-size: 16px;">设备总功率 （kW）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id="totalEqPower" style="color: #69f6f9;text-align: right;font-size: 30px;">2,900</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="color: #ffffff;text-align: right;font-size: 16px;">投运设备 （台）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id="usingTotalEqNum" style="color: #69f6f9;text-align: right;font-size: 30px;">2,900</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div style="float:left;width:60%;height:250px;margin-top: 20px;">
|
||||
<div style="float: left;width: 100%;height:30px;text-align: center;line-height: 30px;color: #ffffff;font-size: 20px;">
|
||||
设备完好率
|
||||
</div>
|
||||
<div id="chart" style="float: left;width: 100%;height: 220px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
375
WebRoot/jsp/visual/modules/bigScreen_equipmentCondition5.jsp
Normal file
375
WebRoot/jsp/visual/modules/bigScreen_equipmentCondition5.jsp
Normal file
@ -0,0 +1,375 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<%@page import="com.sipai.entity.visual.JspElement"%>
|
||||
<%request.setAttribute("Type_GetValue", JspElement.Type_GetValue); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_GetHourHistory); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_Get7dayHistory); %>
|
||||
<%request.setAttribute("Type_GetModbus", JspElement.Type_GetModbus); %>
|
||||
<%request.setAttribute("Type_GetHttp", JspElement.Type_GetHttp); %>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<title></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<script type="text/javascript">
|
||||
|
||||
/* 请求数据 */
|
||||
function getValue() {
|
||||
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
|
||||
// console.log(data);
|
||||
if(data!=''){
|
||||
var gssb1TotalNum=0;
|
||||
var gssb1TotalRuningNum=0;
|
||||
var gssb2TotalNum=0;
|
||||
var gssb2TotalRuningNum=0;
|
||||
var gssb3TotalNum=0;
|
||||
var gssb3TotalRuningNum=0;
|
||||
var gfjTotalNum=0;
|
||||
var gfjTotalRuningNum=0;
|
||||
var tsjTotalNum=0;
|
||||
var tsjTotalRuningNum=0;
|
||||
var csbTotalNum=0;
|
||||
var csbTotalRuningNum=0;
|
||||
|
||||
var aeqnum=0;
|
||||
var beqnum=0;
|
||||
var ceqnum=0;
|
||||
|
||||
for(var i=0;i<data.length;i++){
|
||||
if(data[i].elementCode=="gssb1"){
|
||||
if(data[i].mPoint.parmvalue==1){
|
||||
gssb1TotalRuningNum++;
|
||||
}
|
||||
gssb1TotalNum++;
|
||||
}else if(data[i].elementCode=="gssb2"){
|
||||
if(data[i].mPoint.parmvalue==1){
|
||||
gssb2TotalRuningNum++;
|
||||
}
|
||||
gssb2TotalNum++;
|
||||
}else if(data[i].elementCode=="gssb3"){
|
||||
if(data[i].mPoint.parmvalue==1){
|
||||
gssb3TotalRuningNum++;
|
||||
}
|
||||
gssb3TotalNum++;
|
||||
}else if(data[i].elementCode=="gfj"){
|
||||
if(data[i].mPoint.parmvalue==1){
|
||||
gfjTotalRuningNum++;
|
||||
}
|
||||
gfjTotalNum++;
|
||||
}else if(data[i].elementCode=="tsj"){
|
||||
if(data[i].mPoint.parmvalue==1){
|
||||
tsjTotalRuningNum++;
|
||||
}
|
||||
tsjTotalNum++;
|
||||
}else if(data[i].elementCode=="csb"){
|
||||
if(data[i].mPoint.parmvalue==1){
|
||||
csbTotalRuningNum++;
|
||||
}
|
||||
csbTotalNum++;
|
||||
}else if(data[i].elementCode=="sbzsNum"){
|
||||
$('#sbzsNum').text(numOutput(data[i].valueUrl));
|
||||
}else if(data[i].elementCode=="sbglNum"){
|
||||
$('#sbglNum').text(numOutput(data[i].valueUrl));
|
||||
}else if(data[i].elementCode=="sbtyNum"){
|
||||
$('#sbtyNum').text(numOutput(data[i].valueUrl));
|
||||
}else if(data[i].elementCode=="AEqNum"){
|
||||
aeqnum=data[i].valueUrl;
|
||||
}else if(data[i].elementCode=="BEqNum"){
|
||||
beqnum=data[i].valueUrl;
|
||||
}else if(data[i].elementCode=="CEqNum"){
|
||||
ceqnum=data[i].valueUrl;
|
||||
}else if(data[i].elementCode=="eqRate"){
|
||||
getchart('chart',data[i].mPoint.parmvalue.toFixed(0),'','#36FFF9');
|
||||
}
|
||||
}
|
||||
$('#gssb1').text(gssb1TotalRuningNum+"/"+gssb1TotalNum);
|
||||
$('#gssb2').text(gssb2TotalRuningNum+"/"+gssb2TotalNum);
|
||||
$('#gssb3').text(gssb3TotalRuningNum+"/"+gssb3TotalNum);
|
||||
$('#gfj').text(gfjTotalRuningNum+"/"+gfjTotalNum);
|
||||
$('#tsj').text(tsjTotalRuningNum+"/"+tsjTotalNum);
|
||||
$('#csb').text(csbTotalRuningNum+"/"+csbTotalNum);
|
||||
|
||||
var totalEqNum=aeqnum+beqnum+ceqnum;
|
||||
|
||||
var sbZBHtml="";
|
||||
sbZBHtml+="<tr style=\"height: 24px;font-size: 20px;font-family: MicrosoftYaHei;\">";
|
||||
sbZBHtml+="<td style=\"width: "+(aeqnum/totalEqNum)+"%;text-align: left;color: #3883ff;\">A类设备</td>";
|
||||
sbZBHtml+="<td style=\"width: "+(beqnum/totalEqNum)+"%;text-align: left;color: #FF8C1A;\">B类设备</td>";
|
||||
sbZBHtml+="<td style=\"width: "+(ceqnum/totalEqNum)+"%;text-align: left;color: #B62CFF;\">C类设备</td>";
|
||||
sbZBHtml+="</tr>";
|
||||
sbZBHtml+="<tr style=\"height: 51px;font-size: 34px;font-family: MicrosoftYaHei;\">";
|
||||
sbZBHtml+="<td style=\"text-align: left;color: #3883ff;\">"+numOutput(aeqnum)+"</td>";
|
||||
sbZBHtml+="<td style=\"text-align: left;color: #FF8C1A;\">"+numOutput(beqnum)+"</td>";
|
||||
sbZBHtml+="<td style=\"text-align: left;color: #B62CFF;\">"+numOutput(ceqnum)+"</td>";
|
||||
sbZBHtml+="</tr>";
|
||||
sbZBHtml+="<tr style=\"height: 30px;\">";
|
||||
sbZBHtml+="<td style=\"background: #3883ff;\"></td>";
|
||||
sbZBHtml+="<td style=\"background: #FF8C1A;\"></td>";
|
||||
sbZBHtml+="<td style=\"background: #B62CFF;\"></td>";
|
||||
sbZBHtml+="</tr>";
|
||||
$('#sbZB').html(sbZBHtml);
|
||||
}
|
||||
|
||||
}, 'json');
|
||||
}
|
||||
|
||||
function numOutput(num){
|
||||
var numpart=String(num).split(".");//将数字通过jq split用小数点分隔为数组对象
|
||||
numpart[0]=numpart[0].replace(new RegExp('(\\d)(?=(\\d{3})+$)','ig'),"$1,");
|
||||
//将数组对象第一个数据(整数部分)通过正则表达式每三位用逗号分隔
|
||||
return numpart.join(".");//把数组通过join方法用.进行拼接
|
||||
}
|
||||
|
||||
/* 定时器 */
|
||||
setInterval(getValue, 300000); //每1分钟切换
|
||||
// setInterval(getValue, 3600000); //每一小时切换
|
||||
|
||||
/* 初始化 */
|
||||
$(function () {
|
||||
if('${param.backgroundColor}'=='transparent'){
|
||||
document.body.style.backgroundColor = '${param.backgroundColor}';
|
||||
}else{
|
||||
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
|
||||
}
|
||||
document.getElementById("main").style.width = document.documentElement.clientWidth + "px";
|
||||
document.getElementById("main").style.height = (document.documentElement.clientHeight) + "px";
|
||||
|
||||
document.getElementById("titleImage").src = ""+getRootPath()+"/images/大屏/大屏标题文字背景.png";
|
||||
|
||||
getValue();
|
||||
//console.log("height",document.body.scrollHeight);
|
||||
});
|
||||
|
||||
//获取url地址根目录 当前taomcat下路径
|
||||
function getRootPath(){
|
||||
var pathName = window.location.pathname.substring(1);
|
||||
// var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
|
||||
return window.location.protocol + '//' + window.location.host;
|
||||
}
|
||||
|
||||
function getchart(id,value,title,color){
|
||||
var myChart = echarts.init(document.getElementById(id));
|
||||
var option = {
|
||||
title: {
|
||||
text: value,
|
||||
textStyle: {
|
||||
color: '#36FFF9',
|
||||
fontSize: 50
|
||||
},
|
||||
subtext: "%",
|
||||
subtextStyle: {
|
||||
color: '#36FFF9',
|
||||
fontSize: 19
|
||||
},
|
||||
itemGap: 0, // 主副标题距离
|
||||
left: 'center',
|
||||
top: '28%'
|
||||
},
|
||||
angleAxis: {
|
||||
max: 100, // 满分
|
||||
clockwise: true, // 逆时针
|
||||
// 隐藏刻度线
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
radiusAxis: {
|
||||
type: 'category',
|
||||
// 隐藏刻度线
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
polar: {
|
||||
center: ['50%', '40%'],
|
||||
radius: '120%' //图形大小
|
||||
},
|
||||
series: [{
|
||||
type: 'bar',
|
||||
data: [{
|
||||
name: '百分比',
|
||||
value: value,
|
||||
itemStyle: {
|
||||
color: color
|
||||
},
|
||||
}],
|
||||
coordinateSystem: 'polar',
|
||||
roundCap: true,
|
||||
barWidth: 12,
|
||||
barGap: '-100%', // 两环重叠
|
||||
z: 2
|
||||
},{ // 灰色环
|
||||
type: 'bar',
|
||||
data: [{
|
||||
value: 100,
|
||||
itemStyle: {
|
||||
color: '#1D4F6D',
|
||||
shadowColor: 'rgba(0, 0, 0, 0.2)',
|
||||
shadowBlur: 2,
|
||||
shadowOffsetY: 2
|
||||
}
|
||||
}],
|
||||
coordinateSystem: 'polar',
|
||||
roundCap: true,
|
||||
barWidth: 22,
|
||||
barGap: '-135%', // 两环重叠
|
||||
z: 1
|
||||
}]
|
||||
};
|
||||
myChart.setOption(option, true);
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden;">
|
||||
<div id="main" style="height:100%;width:100%;padding-top:10px;padding-left:10px;padding-right:10px;">
|
||||
<div style="height:100%;width:100%;">
|
||||
<div style="float:left;width:100%;height:35px;margin-left: 20px;">
|
||||
<div style="float:left;width:100%;height:34px;">
|
||||
<div style="position:absolute;top:12px;left:50px;z-index:999;opacity: 1;font-size: 20px;font-family: Microsoft YaHei, Microsoft YaHei-Regular;margin-left:38px;">设备管理</div>
|
||||
<img id="titleImage" src="" style="z-index:998;position:relative;"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="float: left;width: 100%; height:40%;padding-left: 30px;padding-top: 40px;">
|
||||
<div style="float:left;width:40%;height:100%;">
|
||||
<table>
|
||||
<tr style="height: 45px;">
|
||||
<td style="color: #ffffff;text-align: right;font-size: 16px;">设备总数 （台）</td>
|
||||
</tr>
|
||||
<tr style="height: 45px;">
|
||||
<td id="sbzsNum" style="color: #69f6f9;text-align: right;font-size: 30px;"></td>
|
||||
</tr>
|
||||
<tr style="height: 45px;">
|
||||
<td style="color: #ffffff;text-align: right;font-size: 16px;">设备总功率 （kW）</td>
|
||||
</tr>
|
||||
<tr style="height: 45px;">
|
||||
<td id="sbglNum" style="color: #69f6f9;text-align: right;font-size: 30px;"></td>
|
||||
</tr>
|
||||
<tr style="height: 45px;">
|
||||
<td style="color: #ffffff;text-align: right;font-size: 16px;">投运设备 （万台）</td>
|
||||
</tr>
|
||||
<tr style="height: 45px;">
|
||||
<td id="sbtyNum" style="color: #69f6f9;text-align: right;font-size: 30px;"></td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
<div style="float:left;width:60%;height:100%;padding-top: 20px;">
|
||||
<div style="float: left;width: 100%;height:30px;text-align: center;line-height: 30px;color: #ffffff;font-size: 20px;">设备完好率</div>
|
||||
<div id="chart" style="float: left;width: 100%;height: 250px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="float: left;width: 100%; height: calc(20% - 35px);padding-left: 30px;padding-top: 10px;">
|
||||
<table id="sbZB" style="width: 100%;height: 105px;">
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div style="float: left;width: 100%; height:40%;padding-left: 10px;padding-top: 10px;">
|
||||
<div style="width: 100%;height: 30px;line-height: 30px;color: #ffffff;font-size: 24px;font-family: Source Han Sans CN, Source Han Sans CN-Medium;font-weight: 500;">
|
||||
主要设备运行情况
|
||||
</div>
|
||||
<div style="float: left;width: 100%;height: calc(100% - 30px);padding-top: 20px;">
|
||||
<div style="float: left;width:calc(33.3% - 1px);height:100%;">
|
||||
<div style="float: left;width: 100%;height:28px;line-height: 28px;font-size: 22px;font-family: MicrosoftYaHei;color: #69f6f9;text-align: center;">
|
||||
进水区
|
||||
</div>
|
||||
<div style="float: left;width: 100%;height:80px;text-align: center;padding-top: 10px;">
|
||||
<div style="float: left;width: 100%;height:28px;line-height: 28px;font-size: 20px;font-family: MicrosoftYaHei;color: #ffffff;">
|
||||
1#格栅水泵
|
||||
</div>
|
||||
<div id="gssb1" style="float: left;width: 100%;height:42px;line-height: 42px;font-size: 34px;;font-family: MicrosoftYaHei;color: #69F6F9;">
|
||||
|
||||
</div>
|
||||
<div style="float: left;width: 100%;height:28px;line-height: 28px;font-size: 20px;font-family: MicrosoftYaHei;color: #ffffff;">
|
||||
2#格栅水泵
|
||||
</div>
|
||||
<div id="gssb2" style="float: left;width: 100%;height:42px;line-height: 42px;font-size: 34px;;font-family: MicrosoftYaHei;color: #69F6F9;">
|
||||
|
||||
</div>
|
||||
<div style="float: left;width: 100%;height:28px;line-height: 28px;font-size: 20px;font-family: MicrosoftYaHei;color: #ffffff;">
|
||||
3#格栅水泵
|
||||
</div>
|
||||
<div id="gssb3" style="float: left;width: 100%;height:42px;line-height: 42px;font-size: 34px;;font-family: MicrosoftYaHei;color: #69F6F9;">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float: left;width:1px;height:100%;padding-top:50px;padding-bottom:50px;">
|
||||
<div style="float: left;width:1px;height:100%;background-color:#83A3AA;"></div>
|
||||
</div>
|
||||
<div style="float: left;width: 33.3%;height:100%;">
|
||||
<div style="float: left;width: 100%;height:28px;line-height: 28px;font-size: 22px;font-family: MicrosoftYaHei;color: #69f6f9;text-align: center;">
|
||||
处理区
|
||||
</div>
|
||||
<div style="float: left;width: 100%;height:80px;text-align: center;padding-top: 10px;">
|
||||
<div style="float: left;width: 100%;height:28px;line-height: 28px;font-size: 20px;font-family: MicrosoftYaHei;color: #ffffff;">
|
||||
鼓风机
|
||||
</div>
|
||||
<div id="gfj" style="float: left;width: 100%;height:42px;line-height: 42px;font-size: 34px;;font-family: MicrosoftYaHei;color: #69F6F9;">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float: left;width:1px;height:100%;padding-top:50px;padding-bottom:50px;">
|
||||
<div style="float: left;width:1px;height:100%;background-color:#83A3AA;"></div>
|
||||
</div>
|
||||
<div style="float: left;width:calc(33.3% - 1px);;height:100%;">
|
||||
<div style="float: left;width: 100%;height:28px;line-height: 28px;font-size: 22px;font-family: MicrosoftYaHei;color: #69f6f9;text-align: center;">
|
||||
出水区
|
||||
</div>
|
||||
<div style="float: left;width: 100%;height:80px;text-align: center;padding-top: 10px;">
|
||||
<div style="float: left;width: 100%;height:28px;line-height: 28px;font-size: 20px;font-family: MicrosoftYaHei;color: #ffffff;">
|
||||
脱水机
|
||||
</div>
|
||||
<div id="tsj" style="float: left;width: 100%;height:42px;line-height: 42px;font-size: 34px;;font-family: MicrosoftYaHei;color: #69F6F9;">
|
||||
|
||||
</div>
|
||||
<div style="float: left;width: 100%;height:28px;line-height: 28px;font-size: 20px;font-family: MicrosoftYaHei;color: #ffffff;">
|
||||
出水泵
|
||||
</div>
|
||||
<div id="csb" style="float: left;width: 100%;height:42px;line-height: 42px;font-size: 34px;;font-family: MicrosoftYaHei;color: #69F6F9;">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
333
WebRoot/jsp/visual/modules/bigScreen_equipmentCondition6.jsp
Normal file
333
WebRoot/jsp/visual/modules/bigScreen_equipmentCondition6.jsp
Normal file
@ -0,0 +1,333 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<%@page import="com.sipai.entity.visual.JspElement"%>
|
||||
<%request.setAttribute("Type_GetValue", JspElement.Type_GetValue); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_GetHourHistory); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_Get7dayHistory); %>
|
||||
<%request.setAttribute("Type_GetModbus", JspElement.Type_GetModbus); %>
|
||||
<%request.setAttribute("Type_GetHttp", JspElement.Type_GetHttp); %>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<title></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<script type="text/javascript">
|
||||
|
||||
/* 请求数据 */
|
||||
function getValue() {
|
||||
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
|
||||
// console.log(data);
|
||||
if(data!=''){
|
||||
var totalJSSBNum="";var usingJSSBNum="";
|
||||
var totalJSSSNum="";var usingJSSSNum="";
|
||||
var totalSZYBNum="";var usingSZYBNum="";
|
||||
var totalZKSBNum="";var usingZKSBNum="";
|
||||
|
||||
var jssbRemark="";var jsssRemark="";
|
||||
var szybRemark="";var zksbRemark="";
|
||||
|
||||
for(var i=0;i<data.length;i++){
|
||||
var fordata=numOutput(data[i].valueUrl);
|
||||
if(data[i].elementCode=="totalJSSBNum"){
|
||||
$("#totalJSSBNum").text("/"+fordata);
|
||||
totalJSSBNum=data[i].valueUrl;
|
||||
}else if(data[i].elementCode=="usingJSSBNum"){
|
||||
$("#usingJSSBNum").text(fordata);
|
||||
usingJSSBNum=data[i].valueUrl;
|
||||
}else if(data[i].elementCode=="totalJSSSNum"){
|
||||
$("#totalJSSSNum").text("/"+fordata);
|
||||
totalJSSSNum=data[i].valueUrl;
|
||||
}else if(data[i].elementCode=="usingJSSSNum"){
|
||||
$("#usingJSSSNum").text(fordata);
|
||||
usingJSSSNum=data[i].valueUrl;
|
||||
}else if(data[i].elementCode=="totalSZYBNum"){
|
||||
$("#totalSZYBNum").text("/"+fordata);
|
||||
totalSZYBNum=data[i].valueUrl;
|
||||
}else if(data[i].elementCode=="usingSZYBNum"){
|
||||
$("#usingSZYBNum").text(fordata);
|
||||
usingSZYBNum=data[i].valueUrl;
|
||||
}else if(data[i].elementCode=="totalZKSBNum"){
|
||||
$("#totalZKSBNum").text("/"+fordata);
|
||||
totalZKSBNum=data[i].valueUrl;
|
||||
}else if(data[i].elementCode=="usingZKSBNum"){
|
||||
$("#usingZKSBNum").text(fordata);
|
||||
usingZKSBNum=data[i].valueUrl;
|
||||
}else if(data[i].elementCode=="jssbRemark"){
|
||||
jssbRemark=data[i].valueUrl.replaceAll(",","<br>");
|
||||
// $('#jssbRemark').attr('title',jssbRemark);
|
||||
}else if(data[i].elementCode=="jsssRemark"){
|
||||
jsssRemark=data[i].valueUrl.replaceAll(",","<br>");
|
||||
// $('#jsssRemark').attr('title',jsssRemark);
|
||||
}else if(data[i].elementCode=="szybRemark"){
|
||||
szybRemark=data[i].valueUrl.replaceAll(",","<br>");
|
||||
// $('#szybRemark').attr('title',szybRemark);
|
||||
}else if(data[i].elementCode=="zksbRemark"){
|
||||
zksbRemark=data[i].valueUrl.replaceAll(",","<br>");
|
||||
// $('#zksbRemark').attr('title',zksbRemark);
|
||||
}
|
||||
}
|
||||
getchart('jssbChart',(Number(usingJSSBNum)/Number(totalJSSBNum)*100).toFixed(1),'','#36FFF9',jssbRemark);
|
||||
getchart('jsssChart',(Number(usingJSSSNum)/Number(totalJSSSNum)*100).toFixed(1),'','#36FFF9',jsssRemark);
|
||||
getchart('szybChart',(Number(usingSZYBNum)/Number(totalSZYBNum)*100).toFixed(1),'','#36FFF9',szybRemark);
|
||||
getchart('zksbChart',(Number(usingZKSBNum)/Number(totalZKSBNum)*100).toFixed(1),'','#36FFF9',zksbRemark);
|
||||
|
||||
}
|
||||
}, 'json');
|
||||
}
|
||||
|
||||
function numOutput(num){
|
||||
var numpart=String(num).split(".");//将数字通过jq split用小数点分隔为数组对象
|
||||
numpart[0]=numpart[0].replace(new RegExp('(\\d)(?=(\\d{3})+$)','ig'),"$1,");
|
||||
//将数组对象第一个数据(整数部分)通过正则表达式每三位用逗号分隔
|
||||
return numpart.join(".");//把数组通过join方法用.进行拼接
|
||||
}
|
||||
|
||||
/* 定时器 */
|
||||
//setInterval(change, 60000); //每1分钟切换
|
||||
// setInterval(getValue, 3600000); //每一小时切换
|
||||
|
||||
/* 初始化 */
|
||||
$(function () {
|
||||
if('${param.backgroundColor}'=='transparent'){
|
||||
document.body.style.backgroundColor = '${param.backgroundColor}';
|
||||
}else{
|
||||
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
|
||||
}
|
||||
document.getElementById("main").style.width = document.documentElement.clientWidth + "px";
|
||||
document.getElementById("main").style.height = (document.documentElement.clientHeight) + "px";
|
||||
|
||||
document.getElementById("titleImage").src = ""+getRootPath()+"/images/大屏/大屏标题文字背景.png";
|
||||
|
||||
getValue();
|
||||
//console.log("height",document.body.scrollHeight);
|
||||
});
|
||||
|
||||
//获取url地址根目录 当前taomcat下路径
|
||||
function getRootPath(){
|
||||
var pathName = window.location.pathname.substring(1);
|
||||
// var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
|
||||
return window.location.protocol + '//' + window.location.host;
|
||||
}
|
||||
|
||||
function getchart(id,value,title,color,tooltip){
|
||||
var myChart = echarts.init(document.getElementById(id));
|
||||
var option = {
|
||||
title: {
|
||||
text: value,
|
||||
textStyle: {
|
||||
color: '#36FFF9',
|
||||
fontSize: 24
|
||||
},
|
||||
subtext: "%",
|
||||
subtextStyle: {
|
||||
color: '#36FFF9',
|
||||
fontSize: 14
|
||||
},
|
||||
itemGap: 6, // 主副标题距离
|
||||
left: 'center',
|
||||
top: '35%'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: function(param) //自定义弹出框的内容
|
||||
{
|
||||
// var lightTypeList = param.data.lightTypeList;
|
||||
// //拼接一个字符串
|
||||
// var res = param.data.name + '<br/>';
|
||||
// //循环遍历内容
|
||||
// for(var i = 0, length = lightTypeList.length; i < length; i++) {
|
||||
// var val = lightTypeList[i].lightTotal;
|
||||
// res += lightTypeList[i].lightName + '：' + val + '<br/>';
|
||||
// }
|
||||
return tooltip;
|
||||
}
|
||||
},
|
||||
angleAxis: {
|
||||
max: 100, // 满分
|
||||
clockwise: true, // 逆时针
|
||||
// 隐藏刻度线
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
radiusAxis: {
|
||||
type: 'category',
|
||||
// 隐藏刻度线
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
polar: {
|
||||
center: ['50%', '50%'],
|
||||
radius: '130%' //图形大小
|
||||
},
|
||||
series: [{
|
||||
type: 'bar',
|
||||
data: [{
|
||||
name: '百分比',
|
||||
value: value,
|
||||
itemStyle: {
|
||||
color: color
|
||||
},
|
||||
}],
|
||||
coordinateSystem: 'polar',
|
||||
roundCap: true,
|
||||
barWidth: 8,
|
||||
barGap: '-100%', // 两环重叠
|
||||
z: 2
|
||||
},{ // 灰色环
|
||||
type: 'bar',
|
||||
data: [{
|
||||
value: 100,
|
||||
itemStyle: {
|
||||
color: '#1D4F6D',
|
||||
shadowColor: 'rgba(0, 0, 0, 0.2)',
|
||||
shadowBlur: 2,
|
||||
shadowOffsetY: 2
|
||||
}
|
||||
}],
|
||||
coordinateSystem: 'polar',
|
||||
roundCap: true,
|
||||
barWidth: 14,
|
||||
barGap: '-130%', // 两环重叠
|
||||
z: 1
|
||||
}]
|
||||
};
|
||||
myChart.setOption(option, true);
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden;">
|
||||
<div id="main" style="height:100%;width:100%;padding-top:10px;padding-left:10px;padding-right:10px;">
|
||||
<div style="height:100%;width:100%;">
|
||||
<div style="float:left;width:100%;height:35px;margin-left: 20px;">
|
||||
<div style="float:left;width:194px;height:34px;">
|
||||
<div style="position:absolute;top:12px;left:50px;z-index:999;opacity: 1;font-size: 20px;font-family: Microsoft YaHei, Microsoft YaHei-Regular;margin-left:20px;">设备管理</div>
|
||||
<img id="titleImage" src="" style="z-index:998;position:relative;height:100%;width:100%;"/>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:calc((100% - 55px)*0.25);padding-top: 10px;">
|
||||
<div style="float:left;width:40%;height:100%;padding-left: 40px;padding-top: 45px;">
|
||||
<table>
|
||||
<tr>
|
||||
<td style="color: #ffffff;text-align: right;font-size: 16px;">净水设备</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id="usingJSSBNum" style="color: #69f6f9;text-align: right;font-size: 30px;"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id="totalJSSBNum" style="color: #69f6f9;text-align: right;font-size: 30px;"></td>
|
||||
</tr>
|
||||
<!-- <tr>
|
||||
<td style="color: #ffffff;text-align: right;font-size: 16px;">投运净水设备</td>
|
||||
</tr> -->
|
||||
|
||||
</table>
|
||||
</div>
|
||||
<div style="float:left;width:60%;height:100%;">
|
||||
<div id="jssbRemark" style="float: left;width: 100%;height:30px;text-align: center;line-height: 30px;color: #ffffff;font-size: 20px;cursor: pointer;">净水设备完好率</div>
|
||||
<div id="jssbChart" style="float: left;width: 100%;height: calc(100% - 30px);"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:calc((100% - 55px)*0.25);padding-top: 10px;">
|
||||
<div style="float:left;width:40%;height:100%;padding-left: 40px;padding-top: 45px;">
|
||||
<table>
|
||||
<tr>
|
||||
<td style="color: #ffffff;text-align: right;font-size: 16px;">净水设施</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id="usingJSSSNum" style="color: #69f6f9;text-align: right;font-size: 30px;"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id="totalJSSSNum" style="color: #69f6f9;text-align: right;font-size: 30px;"></td>
|
||||
</tr>
|
||||
<!-- <tr>
|
||||
<td style="color: #ffffff;text-align: right;font-size: 16px;">投运净水设施</td>
|
||||
</tr> -->
|
||||
</table>
|
||||
</div>
|
||||
<div style="float:left;width:60%;height:100%;">
|
||||
<div id="jsssRemark" style="float: left;width: 100%;height:30px;text-align: center;line-height: 30px;color: #ffffff;font-size: 20px;cursor: pointer;">净水设施完好率</div>
|
||||
<div id="jsssChart" style="float: left;width: 100%;height: calc(100% - 30px);"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:calc((100% - 55px)*0.25);padding-top: 10px;">
|
||||
<div style="float:left;width:40%;height:100%;padding-left: 40px;padding-top: 45px;">
|
||||
<table>
|
||||
<tr>
|
||||
<td style="color: #ffffff;text-align: right;font-size: 16px;">水质仪表</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id="usingSZYBNum" style="color: #69f6f9;text-align: right;font-size: 30px;"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id="totalSZYBNum" style="color: #69f6f9;text-align: right;font-size: 30px;"></td>
|
||||
</tr>
|
||||
<!-- <tr>
|
||||
<td style="color: #ffffff;text-align: right;font-size: 16px;">投运水质仪表</td>
|
||||
</tr> -->
|
||||
</table>
|
||||
</div>
|
||||
<div style="float:left;width:60%;height:100%;">
|
||||
<div id="szybRemark" style="float: left;width: 100%;height:30px;text-align: center;line-height: 30px;color: #ffffff;font-size: 20px;cursor: pointer;">水质仪表完好率</div>
|
||||
<div id="szybChart" style="float: left;width: 100%;height: calc(100% - 30px);"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:calc((100% - 55px)*0.25);padding-top: 10px;">
|
||||
<div style="float:left;width:40%;height:100%;padding-left: 40px;padding-top: 45px;">
|
||||
<table>
|
||||
<tr>
|
||||
<td style="color: #ffffff;text-align: right;font-size: 16px;">自控设备</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id="usingZKSBNum" style="color: #69f6f9;text-align: right;font-size: 30px;"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id="totalZKSBNum" style="color: #69f6f9;text-align: right;font-size: 30px;"></td>
|
||||
</tr>
|
||||
<!-- <tr>
|
||||
<td style="color: #ffffff;text-align: right;font-size: 16px;">投运自控设备</td>
|
||||
</tr> -->
|
||||
</table>
|
||||
</div>
|
||||
<div style="float:left;width:60%;height:100%;">
|
||||
<div id="zksbRemark" style="float: left;width: 100%;height:30px;text-align: center;line-height: 30px;color: #ffffff;font-size: 20px;cursor: pointer;">自控设备完好率</div>
|
||||
<div id="zksbChart" style="float: left;width: 100%;height: calc(100% - 30px);"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
238
WebRoot/jsp/visual/modules/bigScreen_equipmentCondition7.jsp
Normal file
238
WebRoot/jsp/visual/modules/bigScreen_equipmentCondition7.jsp
Normal file
@ -0,0 +1,238 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<%@page import="com.sipai.entity.visual.JspElement"%>
|
||||
<%request.setAttribute("Type_GetValue", JspElement.Type_GetValue); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_GetHourHistory); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_Get7dayHistory); %>
|
||||
<%request.setAttribute("Type_GetModbus", JspElement.Type_GetModbus); %>
|
||||
<%request.setAttribute("Type_GetHttp", JspElement.Type_GetHttp); %>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<title></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<script type="text/javascript">
|
||||
|
||||
/* 请求数据 */
|
||||
function getValue() {
|
||||
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
|
||||
// console.log(data);
|
||||
if(data!=''){
|
||||
for(var i=0;i<data.length;i++){
|
||||
var fordata=numOutput(data[i].valueUrl);
|
||||
if(data[i].elementCode=="totalEQNum"){
|
||||
$("#totalEQNum").text(fordata);
|
||||
}else if(data[i].elementCode=="EQPower"){
|
||||
$("#EQPower").text(fordata);
|
||||
}else if(data[i].elementCode=="usingEQNum"){
|
||||
$("#usingEQNum").text(fordata);
|
||||
}else if(data[i].elementCode=="bar"){
|
||||
getchart('EQChart',data[i].valueUrl,'','#36FFF9');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}, 'json');
|
||||
}
|
||||
|
||||
/* 定时器 */
|
||||
//setInterval(change, 60000); //每1分钟切换
|
||||
// setInterval(getValue, 3600000); //每一小时切换
|
||||
|
||||
/* 初始化 */
|
||||
$(function () {
|
||||
if('${param.backgroundColor}'=='transparent'){
|
||||
document.body.style.backgroundColor = '${param.backgroundColor}';
|
||||
}else{
|
||||
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
|
||||
}
|
||||
document.getElementById("main").style.width = document.documentElement.clientWidth + "px";
|
||||
document.getElementById("main").style.height = (document.documentElement.clientHeight) + "px";
|
||||
|
||||
document.getElementById("titleImage").src = ""+getRootPath()+"/images/大屏/js/标题logo2.png";
|
||||
|
||||
getValue();
|
||||
//console.log("height",document.body.scrollHeight);
|
||||
});
|
||||
|
||||
//获取url地址根目录 当前taomcat下路径
|
||||
function getRootPath(){
|
||||
var pathName = window.location.pathname.substring(1);
|
||||
// var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
|
||||
return window.location.protocol + '//' + window.location.host;
|
||||
}
|
||||
|
||||
function getchart(id,value,title,color){
|
||||
var myChart = echarts.init(document.getElementById(id));
|
||||
var option = {
|
||||
title: {
|
||||
text: value,
|
||||
textStyle: {
|
||||
color: '#36FFF9',
|
||||
fontSize: 42
|
||||
},
|
||||
subtext: "%",
|
||||
subtextStyle: {
|
||||
color: '#36FFF9',
|
||||
fontSize: 14
|
||||
},
|
||||
itemGap: 6, // 主副标题距离
|
||||
left: 'center',
|
||||
top: '35%'
|
||||
},
|
||||
// tooltip: {
|
||||
// trigger: 'item',
|
||||
// formatter: function(param) //自定义弹出框的内容
|
||||
// {
|
||||
// // var lightTypeList = param.data.lightTypeList;
|
||||
// // //拼接一个字符串
|
||||
// // var res = param.data.name + '<br/>';
|
||||
// // //循环遍历内容
|
||||
// // for(var i = 0, length = lightTypeList.length; i < length; i++) {
|
||||
// // var val = lightTypeList[i].lightTotal;
|
||||
// // res += lightTypeList[i].lightName + '：' + val + '<br/>';
|
||||
// // }
|
||||
// return tooltip;
|
||||
// }
|
||||
// },
|
||||
angleAxis: {
|
||||
max: 100, // 满分
|
||||
clockwise: true, // 逆时针
|
||||
// 隐藏刻度线
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
radiusAxis: {
|
||||
type: 'category',
|
||||
// 隐藏刻度线
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
polar: {
|
||||
center: ['50%', '50%'],
|
||||
radius: '130%' //图形大小
|
||||
},
|
||||
series: [{
|
||||
type: 'bar',
|
||||
data: [{
|
||||
name: '百分比',
|
||||
value: value,
|
||||
itemStyle: {
|
||||
color: color
|
||||
},
|
||||
}],
|
||||
coordinateSystem: 'polar',
|
||||
roundCap: true,
|
||||
barWidth: 8,
|
||||
barGap: '-100%', // 两环重叠
|
||||
z: 2
|
||||
},{ // 灰色环
|
||||
type: 'bar',
|
||||
data: [{
|
||||
value: 100,
|
||||
itemStyle: {
|
||||
color: '#1D4F6D',
|
||||
shadowColor: 'rgba(0, 0, 0, 0.2)',
|
||||
shadowBlur: 2,
|
||||
shadowOffsetY: 2
|
||||
}
|
||||
}],
|
||||
coordinateSystem: 'polar',
|
||||
roundCap: true,
|
||||
barWidth: 15,
|
||||
barGap: '-135%', // 两环重叠
|
||||
z: 1
|
||||
}]
|
||||
};
|
||||
myChart.setOption(option, true);
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden;">
|
||||
<div id="main" style="height:100%;width:100%;padding-top:20px;padding-left:10px;padding-right:10px;">
|
||||
<div style="height:100%;width:100%;">
|
||||
<div style="float:left;width:100%;height:35px;padding-left: 20px;">
|
||||
<div style="float:left;width:100%;height:34px;position:absolute;">
|
||||
<div style="position:absolute;top:-4px;left:50px;z-index:999;opacity: 1;font-size: 21px;color:#d9f6fb;font-family:Source Han Sans CN, Source Han Sans CN-Regular;text-shadow:1.5px 1.5px 0 #174749, 1.5px -1.5px 0 #174749, -1.5px -1.5px 0 #174749, -1.5px 1.5px 0 #174749, 1.5px 1px 0 #174749, 1.5px -1px 0 #174749, -1.5px -1px 0 #174749, -1.5px 1px 0 #174749, 1.5px 0px 0 #174749, 1.5px 0px 0 #174749, -1.5px 0px 0 #174749, -1.5px 0px 0 #174749,1px 1.5px 0 #174749, 1px -1.5px 0 #174749, -1px -1.5px 0 #174749, -1px 1.5px 0 #174749, 1px 1px 0 #174749, 1px -1px 0 #174749, -1px -1px 0 #174749, -1px 1px 0 #174749, 1px 0px 0 #174749, 1px 0px 0 #174749, -1px 0px 0 #174749, -1px 0px 0 #174749, 0px 1.5px 0 #174749, 0px -1.5px 0 #174749, 0px -1.5px 0 #174749, 0px 1.5px 0 #174749, 0px 1px 0 #174749, 0px -1px 0 #174749, 0px -1px 0 #174749, 0px 1px 0 #174749;">设备情况</div>
|
||||
<img id="titleImage" src="" style="z-index:998;position:relative;"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="float:left;width:100%;height:calc(100% - 35px);padding-top: 20px;">
|
||||
<div style="float:left;width:40%;height:100%;padding-left: 40px;padding-top: 5px;">
|
||||
<table>
|
||||
<tr>
|
||||
<td style="color: #ffffff;text-align: right;font-size: 16px;">设备总数</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id="totalEQNum" style="color: #69f6f9;text-align: right;font-size: 30px;">1200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="color: #ffffff;text-align: right;font-size: 16px;">设备总功率</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id="EQPower" style="color: #69f6f9;text-align: right;font-size: 30px;">2100</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="color: #ffffff;text-align: right;font-size: 16px;">投运设备</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id="usingEQNum" style="color: #69f6f9;text-align: right;font-size: 30px;">2100</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div style="float:left;width:60%;height:100%;">
|
||||
<div style="float: left;width: 100%;height:30px;text-align: center;line-height: 30px;color: #ffffff;font-size: 20px;cursor: pointer;">设备完好率</div>
|
||||
<div id="EQChart" style="float: left;width: 100%;height: calc(100% - 30px);"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <img id="tsjImage" src="" style="top:65px;left:40px;z-index:998;position:absolute;"/>
|
||||
|
||||
<div style="float:left;width:100%;height:calc(100% - 35px);padding-top:20px;">
|
||||
<table id="table" style="width:100%;height:100%;">
|
||||
|
||||
</table>
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
112
WebRoot/jsp/visual/modules/bigScreen_eventAlarm.jsp
Normal file
112
WebRoot/jsp/visual/modules/bigScreen_eventAlarm.jsp
Normal file
@ -0,0 +1,112 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<%@page import="com.sipai.entity.visual.JspElement"%>
|
||||
<%request.setAttribute("Type_GetValue", JspElement.Type_GetValue); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_GetHourHistory); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_Get7dayHistory); %>
|
||||
<%request.setAttribute("Type_GetModbus", JspElement.Type_GetModbus); %>
|
||||
<%request.setAttribute("Type_GetHttp", JspElement.Type_GetHttp); %>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<title></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<script type="text/javascript">
|
||||
|
||||
/* 请求数据 */
|
||||
function getValue() {
|
||||
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
|
||||
// console.log(data);
|
||||
var html="";
|
||||
html+="<tr style=\"font-size: 22px;color: #69f6f9;text-align:center;\">";
|
||||
html+="<td>类别</td>";
|
||||
html+="<td>内容</td>";
|
||||
html+="<td>发布时间</td>";
|
||||
html+="</tr>";
|
||||
|
||||
if(data!=''){
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: ext.contextPath+data[0].valueUrl,
|
||||
dataType: "json",
|
||||
async: false, // 同步
|
||||
success: function(datas){
|
||||
// console.log(datas);
|
||||
var num=datas.length;
|
||||
for(var i=0;i<num;i++){
|
||||
html+="<tr style=\"font-size: 22px;color: #ffffff;text-align:center;height:45px\">";
|
||||
html+="<td>"+datas[i].alarmlvl+"级报警</td>";
|
||||
html+="<td>"+datas[i].describe+"</td>";
|
||||
html+="<td>"+datas[i].alarmtime.substring(0,16)+"</td>";
|
||||
html+="</tr>";
|
||||
}
|
||||
// if(5-num>0){
|
||||
|
||||
// }
|
||||
}
|
||||
});
|
||||
}
|
||||
$('#table').html(html);
|
||||
}, 'json');
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 定时器 */
|
||||
setInterval(getValue, 300000); //每5分钟切换
|
||||
// setInterval(getValue, 3600000); //每一小时切换
|
||||
|
||||
/* 初始化 */
|
||||
$(function () {
|
||||
if('${param.backgroundColor}'=='transparent'){
|
||||
document.body.style.backgroundColor = '${param.backgroundColor}';
|
||||
}else{
|
||||
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
|
||||
}
|
||||
// document.getElementById("main").style.width = document.documentElement.clientWidth + "px";
|
||||
// document.getElementById("main").style.height = (document.documentElement.clientHeight) + "px";
|
||||
|
||||
document.getElementById("titleImage").src = ""+getRootPath()+"/images/大屏/大屏标题文字背景2.png";
|
||||
|
||||
getValue();
|
||||
//console.log("height",document.body.scrollHeight);
|
||||
});
|
||||
|
||||
//获取url地址根目录 当前taomcat下路径
|
||||
function getRootPath(){
|
||||
var pathName = window.location.pathname.substring(1);
|
||||
// var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
|
||||
return window.location.protocol + '//' + window.location.host;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden;">
|
||||
<div id="main" style="height:100%;width:100%;padding-top:10px;padding-left:10px;padding-right:10px;">
|
||||
<div style="height:100%;width:100%;">
|
||||
<div style="float:left;width:100%;height:57px;margin-left: 20px;">
|
||||
<div style="float:left;width:100%;height:34px;">
|
||||
<div style="position:absolute;top:24px;left:50px;z-index:999;opacity: 1;font-size: 20px;font-family: Microsoft YaHei, Microsoft YaHei-Regular;margin-left:55px;">事件告警</div>
|
||||
<img id="titleImage" src="" style="z-index:998;position:relative;"/>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:calc(100% - 57px);padding-left: 20px;">
|
||||
<table id="table" style="width: 100%;height: 100%;">
|
||||
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
124
WebRoot/jsp/visual/modules/bigScreen_groupOverview.jsp
Normal file
124
WebRoot/jsp/visual/modules/bigScreen_groupOverview.jsp
Normal file
@ -0,0 +1,124 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<%@page import="com.sipai.entity.visual.JspElement"%>
|
||||
<%request.setAttribute("Type_GetValue", JspElement.Type_GetValue); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_GetHourHistory); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_Get7dayHistory); %>
|
||||
<%request.setAttribute("Type_GetModbus", JspElement.Type_GetModbus); %>
|
||||
<%request.setAttribute("Type_GetHttp", JspElement.Type_GetHttp); %>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<title></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<script type="text/javascript">
|
||||
|
||||
/* 请求数据 */
|
||||
function getValue() {
|
||||
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
|
||||
// console.log(data);
|
||||
if(data!=''){
|
||||
|
||||
}
|
||||
}, 'json');
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 定时器 */
|
||||
//setInterval(change, 60000); //每1分钟切换
|
||||
// setInterval(getValue, 3600000); //每一小时切换
|
||||
|
||||
/* 初始化 */
|
||||
$(function () {
|
||||
if('${param.backgroundColor}'=='transparent'){
|
||||
document.body.style.backgroundColor = '${param.backgroundColor}';
|
||||
}else{
|
||||
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
|
||||
}
|
||||
document.getElementById("main").style.width = document.documentElement.clientWidth + "px";
|
||||
document.getElementById("main").style.height = (document.documentElement.clientHeight) + "px";
|
||||
|
||||
document.getElementById("titleImage").src = ""+getRootPath()+"/images/大屏/大屏标题文字背景.png";
|
||||
document.getElementById("waterImg").src = ""+getRootPath()+"/images/大屏/水量2.png";
|
||||
document.getElementById("areaImg").src = ""+getRootPath()+"/images/大屏/服务面积.png";
|
||||
document.getElementById("peopleImg").src = ""+getRootPath()+"/images/大屏/服务人口.png";
|
||||
|
||||
// getValue();
|
||||
//console.log("height",document.body.scrollHeight);
|
||||
});
|
||||
|
||||
//获取url地址根目录 当前taomcat下路径
|
||||
function getRootPath(){
|
||||
var pathName = window.location.pathname.substring(1);
|
||||
// var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
|
||||
return window.location.protocol + '//' + window.location.host;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden;">
|
||||
<div id="main" style="height:100%;width:100%;padding-top:10px;padding-left:10px;padding-right:10px;">
|
||||
<div style="height:100%;width:100%;">
|
||||
<div style="float:left;width:100%;height:35px;padding-left: 20px;">
|
||||
<div style="float:left;width:100%;height:34px;">
|
||||
<div style="position:absolute;top:12px;left:50px;z-index:999;opacity: 1;font-size: 20px;font-family: Microsoft YaHei, Microsoft YaHei-Regular;margin-left:38px;">公司概览</div>
|
||||
<img id="titleImage" src="" style="z-index:998;position:relative;"/>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:46px;margin-left: 20px;margin-top: 30px;">
|
||||
<div style="float:left;width:34px;height:46px;">
|
||||
<img id="waterImg" src="" style="z-index:999;position:relative;height:100%;width:100%;"/>
|
||||
</div>
|
||||
<div style="float:left;width:150px;height:46px;line-height: 46px;font-size: 20px;color: #2b9dd8;padding-left: 15px;">
|
||||
设计处理量
|
||||
</div>
|
||||
<div style="float:left;width:100px;height:46px;line-height: 46px;font-size: 40px;color: #69f6f9;padding-left: 15px;">
|
||||
11
|
||||
</div>
|
||||
<div style="float:left;width:80px;height:46px;line-height: 46px;font-size: 20px;color: #2b9dd8;padding-left: 10px;">
|
||||
万吨/天
|
||||
</div>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:50px;margin-left: 20px;margin-top: 30px;">
|
||||
<div style="float:left;width:50px;height:50px;">
|
||||
<img id="areaImg" src="" style="z-index:999;position:relative;height:100%;width:100%;"/>
|
||||
</div>
|
||||
<div style="float:left;width:120px;height:50px;color: #2b9dd8;padding-left: 15px;">
|
||||
<div style="float:left;width: 100%;height: 30px;font-size: 20px;line-height: 30px;">服务面积</div>
|
||||
<div style="float:left;width: 100%;height: 20px;font-size: 14px;line-height: 20px;">平方公里</div>
|
||||
</div>
|
||||
<div style="float:left;width:100px;height:50px;line-height: 50px;font-size: 40px;color: #69f6f9;">
|
||||
604
|
||||
</div>
|
||||
<div style="float:left;width:50px;height:50px;">
|
||||
<img id="peopleImg" src="" style="z-index:999;position:relative;height:100%;width:100%;"/>
|
||||
</div>
|
||||
<div style="float:left;width:120px;height:50px;color: #2b9dd8;padding-left: 15px;">
|
||||
<div style="float:left;width: 100%;height: 30px;font-size: 20px;line-height: 30px;">服务人口</div>
|
||||
<div style="float:left;width: 100%;height: 20px;font-size: 14px;line-height: 20px;">万人</div>
|
||||
</div>
|
||||
<div style="float:left;width:100px;height:50px;line-height: 50px;font-size: 40px;color: #69f6f9;">
|
||||
84.4
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="float:left;width:100%;padding-left: 20px;padding-top: 40px;color: #ffffff;line-height:40px;font-size: 20px;">
|
||||
上海城投城桥污水处理有限公司于2005年09月27日成立。公司经营范围包括：污水处理，环保设施领域内的技术服务，环保设备的销售等。
|
||||
<br>2020年公司旗下接受委托运营的污水处理厂包括：上海崇明城桥污水处理厂、上海崇明堡镇污水处理厂、上海崇明新河污水处理厂、上海崇明陈家镇污水处理厂、上海崇明长兴污水处理厂，规划总服务面积604.1Km2，总服务人口84.4万人，处理污水量11万m3/d。
|
||||
<br>公司自成立至今，不断吸取和借鉴国内外先进的经营和管理理念，努力实现公司业务、管理等方面自我超越！
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
175
WebRoot/jsp/visual/modules/bigScreen_imgForTH.jsp
Normal file
175
WebRoot/jsp/visual/modules/bigScreen_imgForTH.jsp
Normal file
@ -0,0 +1,175 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<%@page import="com.sipai.entity.visual.JspElement"%>
|
||||
<%request.setAttribute("Type_GetValue", JspElement.Type_GetValue); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_GetHourHistory); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_Get7dayHistory); %>
|
||||
<%request.setAttribute("Type_GetModbus", JspElement.Type_GetModbus); %>
|
||||
<%request.setAttribute("Type_GetHttp", JspElement.Type_GetHttp); %>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<title></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<!-- <script type="text/javascript" src="<%=request.getContextPath()%>/JS/tableScroll.js" charset="utf-8"></script> -->
|
||||
<style type="text/css">
|
||||
@keyframes dash {
|
||||
to {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.path {
|
||||
fill:none;
|
||||
stroke: #b1dfef;
|
||||
stroke-width:0.2;
|
||||
stroke-dasharray:1;
|
||||
stroke-dashoffset:16;
|
||||
animation: dash 5s linear infinite;
|
||||
}
|
||||
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
|
||||
/* 请求数据 */
|
||||
function getValue() {
|
||||
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
|
||||
if(data!=''){
|
||||
for(var i=0;i<data.length;i++){
|
||||
if(data[i].elementCode=="img"){
|
||||
document.getElementById("Image").src = ""+getRootPath()+""+data[i].valueUrl+"";
|
||||
}
|
||||
}
|
||||
}
|
||||
}, 'json');
|
||||
}
|
||||
|
||||
/* 定时器 */
|
||||
// setInterval(getValue, 300000); //每5分钟切换
|
||||
// setInterval(changeDiv, 8000); //每8秒切换
|
||||
// setInterval(getValue, 3600000); //每一小时切换
|
||||
|
||||
// var timeSt="0";
|
||||
/* 初始化 */
|
||||
$(function () {
|
||||
if('${param.backgroundColor}'=='transparent'){
|
||||
document.body.style.backgroundColor = '${param.backgroundColor}';
|
||||
}else{
|
||||
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
|
||||
}
|
||||
document.getElementById("main").style.width = document.documentElement.clientWidth + "px";
|
||||
document.getElementById("main").style.height = (document.documentElement.clientHeight) + "px";
|
||||
|
||||
getValue();
|
||||
//console.log("height",document.body.scrollHeight);
|
||||
});
|
||||
|
||||
//获取url地址根目录 当前taomcat下路径
|
||||
function getRootPath(){
|
||||
var pathName = window.location.pathname.substring(1);
|
||||
// var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
|
||||
return window.location.protocol + '//' + window.location.host;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden;">
|
||||
<div id="main" style="height:100%;width:100%;padding-left:10px;padding-right:10px;">
|
||||
<div style="float:left;width:100%;height:100%;margin-top: 10px;position:relative;">
|
||||
<svg viewBox="0 0 120 55" style="position: absolute;z-index:999;">
|
||||
<path d="M99.4,7.35 H91.5 V8" class="path" style="stroke-width:0.1;"/>
|
||||
<path d="M99.4,7.35 H90.8 V8" class="path" style="stroke-width:0.1;"/>
|
||||
<path d="M99.4,7.35 H90.2 V8" class="path" style="stroke-width:0.1;"/>
|
||||
<path d="M99.4,7.35 H89.6 V8" class="path" style="stroke-width:0.1;"/>
|
||||
<path d="M90.2,13 L90.2,14.2" class="path"/>
|
||||
<path d="M90.8,13 L90.95,14.2 H89.26 L88.13,7.42 H89.5" class="path"/>
|
||||
<path d="M96.7,7.3 L96.45,5.7 H95.5" class="path"/>
|
||||
<path d="M96.7,7.3 L96.1,3.9 H95" class="path"/>
|
||||
<path d="M99.4,7.65 H93.8" class="path"/>
|
||||
<path d="M91.9,13 L92.2,14.2" class="path"/>
|
||||
<path d="M91.4,13 L91.6,14.2 H100.1 L105,35.65 H101.5" class="path"/>
|
||||
<path d="M104,33.2 H101.2" class="path"/>
|
||||
<path d="M96.35,12.5 V13.3" class="path"/>
|
||||
<path d="M95.55,12.5 V13.3" class="path"/>
|
||||
<path d="M94.85,12.5 V13.3" class="path"/>
|
||||
<path d="M94.2,12.5 V13.3 H99 L100.75,21.3 H99.5" class="path"/>
|
||||
<path d="M99.4,21.3 L98.4,16.95 H97.55" class="path"/>
|
||||
<path d="M99.4,21.3 L98.9,19.3 H98.1" class="path"/>
|
||||
<path d="M99.4,21.3 L100.05,24.4 H99.2" class="path"/>
|
||||
<path d="M99.4,21.3 L100.57,26.75 H99.65" class="path"/>
|
||||
<path d="M108.15,46.55 L108.8,49.25 H104.7" class="path"/>
|
||||
<path d="M108.15,46.55 L108.9,49.9 H104.8" class="path"/>
|
||||
<path d="M97.2,48.7 H96 L96.15,49.8" class="path"/>
|
||||
<path d="M97.8,50.9 H96.4 L96.15,49.8 H95.45 L95.1,47.4 H106 L104.95,42.5 H103.9 L103.7,41.35 H102.8" class="path"/>
|
||||
<path d="M103.9,42.5 L104.2,44.14 H103.5" class="path"/>
|
||||
|
||||
|
||||
<path d="M79,3.36 H77.7 L78.8,13.8 H79.5" class="path"/>
|
||||
<path d="M79,5.1 H77.8" class="path"/>
|
||||
<path d="M78.3,7.3 H78.6" class="path"/>
|
||||
<path d="M79,10.85 H75.9 L76.1,13.2 H64.7 L64.75,17 H63.5" class="path"/>
|
||||
<!-- <path d="M64.5,17 H63.5" class="path"/> -->
|
||||
<path d="M54.5,17.1 H52.8 V16 H51.5" class="path"/>
|
||||
<path d="M54.5,19.1 H52.7 L52.6,21.2 H51.2" class="path"/>
|
||||
<path d="M39.3,18.12 H37.45 L37.5,17.1 H36.5" class="path"/>
|
||||
<path d="M36.3,16.2 H37.5 L38.05,12.58 H64.7 V11.8" class="path"/>
|
||||
<path d="M64.7,12.58 H69.8 V11.8" class="path"/>
|
||||
<path d="M66.8,2.7 V0.8" class="path"/>
|
||||
<path d="M39.3,18.12 H37.45 L36.1,28.1 H31.1 L31.2,27" class="path"/>
|
||||
<path d="M80.7,17 H78.35 L78.1,14.4 H67.1 V15.1" class="path"/>
|
||||
<path d="M76.7,14.4 V15.1" class="path"/>
|
||||
<path d="M80.7,19.1 H78.57 L78.35,17" class="path"/>
|
||||
<path d="M81.5,24.43 H79.15 L79.48,28.03 H67.6 V27" class="path"/>
|
||||
<path d="M81.5,26.41 H79.28" class="path"/>
|
||||
<path d="M77.89,28.03 V27" class="path"/>
|
||||
<path d="M82.4,32.57 H80.8 L80.45,29.2 H79" class="path"/>
|
||||
<path d="M82.4,34.99 H81.08 L81.3,37.56 H79.9" class="path"/>
|
||||
<path d="M83.41,40.85 H81.7 L81.35,37.99 H79.9" class="path"/>
|
||||
<path d="M83.41,44.16 H82.13 L82.35,47.2 H80.7" class="path"/>
|
||||
<path d="M71.5,42.85 H68.2 L67.95,37.48 H63.1 V38.3" class="path"/>
|
||||
<path d="M64.6,37.48 V38.3" class="path"/>
|
||||
<path d="M62.7,46.5 V48" class="path"/>
|
||||
<path d="M65.34,46.5 V48.1 H55.4 V47" class="path"/>
|
||||
<path d="M58.89,48 V38.32 H55.8" class="path"/>
|
||||
<path d="M71,33.6 H65.2 L64.95,26.15 H63.5" class="path"/>
|
||||
<path d="M67.3,21.32 H64.88 L64.95,24.15 H63.5" class="path"/>
|
||||
<path d="M67.3,21.32 H64.88 L64.8,18.92 H63.5" class="path"/>
|
||||
<path d="M54.5,23.74 H52.5 V21.7 H51.2" class="path"/>
|
||||
<path d="M54.3,26 H52.35 L52.3,27.75 H51" class="path"/>
|
||||
<path d="M48,42.5 H45.5 L45.78,37.5 H34 L33.7,39.5" class="path"/>
|
||||
<path d="M37.9,37.5 L37.7,39.5" class="path"/>
|
||||
<path d="M27.6,45.4 L27.4,47" class="path"/>
|
||||
<path d="M42.12,45.4 L41.95,47.05 H23.5 L24.7,40 H23.45" class="path"/>
|
||||
<path d="M23.7,44.28 H22.4" class="path"/>
|
||||
<path d="M15,42.68 H11.5" class="path"/>
|
||||
<path d="M39,24.5 H37.95 L37.3,29.55 H17.6 L18.2,26.7" class="path"/>
|
||||
<path d="M37.5,28.12 H36" class="path"/>
|
||||
<path d="M29.38,25.1 L29.6,23.5" class="path"/>
|
||||
<path d="M23.75,25.1 L24.05,23.5" class="path"/>
|
||||
<path d="M29.38,24.55 H27 L26.5,23.9" class="path"/>
|
||||
<path d="M23.9,24.55 H25.8 L26.46,23.9 L28.4,12.7 H26.5" class="path"/>
|
||||
<path d="M29.38,19.75 H28.8 L30.46,9.5 H28.79 L29.15,7" class="path"/>
|
||||
<path d="M27.2,11.1 H28.5 L29.15,7" class="path"/>
|
||||
<path d="M19.5,19.5 H18.5 L20.75,9.45 H24.65 L25.3,7" class="path"/>
|
||||
|
||||
<path d="M24.85,2.9 L25.3,0.8" class="path"/>
|
||||
<path d="M30.8,2.9 L31,1.8 H32 L32.1,0.8" class="path"/>
|
||||
|
||||
</svg>
|
||||
<!-- <div style="position: absolute;left:350px;top:103px;width: 20px;height: 2px;background-color: aquamarine;"></div> -->
|
||||
<img id="Image" src="" style="z-index:998;position:relative;height:100%;width:100%;"/>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
246
WebRoot/jsp/visual/modules/bigScreen_patrolInspection.jsp
Normal file
246
WebRoot/jsp/visual/modules/bigScreen_patrolInspection.jsp
Normal file
@ -0,0 +1,246 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<%@page import="com.sipai.entity.visual.JspElement"%>
|
||||
<%request.setAttribute("Type_GetValue", JspElement.Type_GetValue); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_GetHourHistory); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_Get7dayHistory); %>
|
||||
<%request.setAttribute("Type_GetModbus", JspElement.Type_GetModbus); %>
|
||||
<%request.setAttribute("Type_GetHttp", JspElement.Type_GetHttp); %>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<title></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<script type="text/javascript">
|
||||
|
||||
//获取url地址根目录 当前taomcat下路径
|
||||
function getRootPath(){
|
||||
var pathName = window.location.pathname.substring(1);
|
||||
// var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
|
||||
return window.location.protocol + '//' + window.location.host;
|
||||
}
|
||||
//获取url地址根目录 当前taomcat下路径
|
||||
function getRootPath2(){
|
||||
var pathName = window.location.pathname.substring(1);
|
||||
var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
|
||||
return window.location.protocol + '//' + window.location.host +"/"+webName;
|
||||
}
|
||||
|
||||
function numOutput(num){
|
||||
var numpart=String(num).split(".");//将数字通过jq split用小数点分隔为数组对象
|
||||
numpart[0]=numpart[0].replace(new RegExp('(\\d)(?=(\\d{3})+$)','ig'),"$1,");
|
||||
//将数组对象第一个数据(整数部分)通过正则表达式每三位用逗号分隔
|
||||
return numpart.join(".");//把数组通过join方法用.进行拼接
|
||||
}
|
||||
|
||||
/* 请求数据 */
|
||||
function getValue() {
|
||||
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
|
||||
// console.log(data);
|
||||
if(data!=''){
|
||||
for(var i=0;i<data.length;i++){
|
||||
if(data[i].elementCode=="patrolTaskNum"){
|
||||
$('#patrolTaskNum').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="functionPatrolCompleteNum"){
|
||||
$('#functionPatrolCompleteNum').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="functionPatrolTotalNum"){
|
||||
$('#functionPatrolTotalNum').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="eqPatrolCompleteNum"){
|
||||
$('#eqPatrolCompleteNum').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="eqPatrolTotalNum"){
|
||||
$('#eqPatrolTotalNum').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
|
||||
}else if(data[i].elementCode=="functionPatrolCompletionRate"){
|
||||
dochart('chart1',(data[i].visualCacheData.value).toFixed(0),'运行巡检完成率','#EFA103');
|
||||
}else if(data[i].elementCode=="eqPatrolCompletionRate"){
|
||||
dochart('chart2',(data[i].visualCacheData.value).toFixed(0),'设备巡检完成率','#1890FF');
|
||||
}
|
||||
}
|
||||
}
|
||||
}, 'json');
|
||||
}
|
||||
|
||||
function dochart(id,value,title,color){
|
||||
var myChart = echarts.init(document.getElementById(id));
|
||||
var option = {
|
||||
title: {
|
||||
text: value+"%",
|
||||
textStyle: {
|
||||
color: color,
|
||||
fontSize: 36
|
||||
},
|
||||
subtext: title,
|
||||
subtextStyle: {
|
||||
color: color,
|
||||
fontSize: 24
|
||||
},
|
||||
itemGap: 120, // 主副标题距离
|
||||
left: 'center',
|
||||
top: '35%'
|
||||
},
|
||||
angleAxis: {
|
||||
max: 100, // 满分
|
||||
clockwise: false, // 逆时针
|
||||
// 隐藏刻度线
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
radiusAxis: {
|
||||
type: 'category',
|
||||
// 隐藏刻度线
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
polar: {
|
||||
center: ['50%', '40%'],
|
||||
radius: '120%' //图形大小
|
||||
},
|
||||
series: [{
|
||||
type: 'bar',
|
||||
data: [{
|
||||
name: '百分比',
|
||||
value: value,
|
||||
itemStyle: {
|
||||
color: color
|
||||
},
|
||||
}],
|
||||
coordinateSystem: 'polar',
|
||||
roundCap: true,
|
||||
barWidth: 20,
|
||||
barGap: '-100%', // 两环重叠
|
||||
z: 2
|
||||
},{ // 灰色环
|
||||
type: 'bar',
|
||||
data: [{
|
||||
value: 100,
|
||||
itemStyle: {
|
||||
color: '#2B3F69',
|
||||
shadowColor: 'rgba(0, 0, 0, 0.2)',
|
||||
shadowBlur: 5,
|
||||
shadowOffsetY: 2
|
||||
}
|
||||
}],
|
||||
coordinateSystem: 'polar',
|
||||
roundCap: true,
|
||||
barWidth: 25,
|
||||
barGap: '-100%', // 两环重叠
|
||||
z: 1
|
||||
}]
|
||||
};
|
||||
myChart.setOption(option, true);
|
||||
}
|
||||
|
||||
/* 定时器 */
|
||||
//setInterval(change, 60000); //每1分钟切换
|
||||
setInterval(getValue, 3600000); //每一小时切换
|
||||
|
||||
|
||||
/* 初始化 */
|
||||
$(function () {
|
||||
if('${param.backgroundColor}'=='transparent'){
|
||||
document.body.style.backgroundColor = '${param.backgroundColor}';
|
||||
}else{
|
||||
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
|
||||
}
|
||||
document.getElementById("main").style.width = document.documentElement.clientWidth + "px";
|
||||
document.getElementById("main").style.height = (document.documentElement.clientHeight) + "px";
|
||||
|
||||
document.getElementById("backImage").src = ""+getRootPath()+"/images/大屏/巡检情况.png";
|
||||
|
||||
getValue();
|
||||
//console.log("height",document.body.scrollHeight);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden;">
|
||||
<div id="main" style="height:100%;width:100%;padding-left:30px;padding-right:30px;padding-bottom:30px;">
|
||||
<div style="height:100%;width:100%;background:#16314C;border-radius: 8px;">
|
||||
<div style="float:left;width:100%;height:80px;"><img id="backImage" src="" style="z-index:999;position:relative;height:100%;width: 25%;"/></div>
|
||||
<div style="float:left;width:40%;height:calc(100% - 80px);">
|
||||
<div style="float:left;width:100%;height:50%;padding-left:35px;padding-top:30px;">
|
||||
<table style="width: 185px;height:102px;background: linear-gradient(50deg,#427dfe 15%, #74d6ff 104%);border-radius: 18px;text-align: center;vertical-align: middle;">
|
||||
<tr height="70%">
|
||||
<td id="patrolTaskNum" width="100%" style="color: #ffffff;font-size:36px;"></td>
|
||||
</tr>
|
||||
<tr height="30%">
|
||||
<td width="100%" style="color: #ffffff;font-size:16px;vertical-align:top;">任务总数</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:50%;padding-left:35px;margin-top:-35px;">
|
||||
<table style="width:100%;height:100%;text-align: center;vertical-align: middle;">
|
||||
<tr height="15%">
|
||||
<td width="40%"></td>
|
||||
<td width="50%" style="position:relative;">
|
||||
<div style="position: absolute;top:30%;color: #82BDF3;font-size:24px;">
|
||||
<span id="functionPatrolCompleteNum"></span>
|
||||
<span>/</span>
|
||||
<span id="functionPatrolTotalNum"></span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr height="35%" style="background:#0C3C58;border-radius: 12px;">
|
||||
<td width="40%" style="color: #69F6F9;font-size:20px;border-radius: 12px 0px 0px 12px;">运行巡检任务数</td>
|
||||
<td width="50%" style="padding-right: 10px;border-radius: 0px 12px 12px 0px;">
|
||||
<div style="float: left;background-color:#69F6F9;width: 100%;height:25%;border-radius:8px 0px 0px 8px;"></div>
|
||||
<div style="float: left;background-color:#d8d8d8;width: 0%;height:25%;opacity: 0.44;border-radius:0px 8px 8px 0px;"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr height="15%">
|
||||
<td width="40%"></td>
|
||||
<td width="50%" style="position:relative;">
|
||||
<div style="position:absolute;top:30%;color: #82BDF3;font-size:24px;">
|
||||
<span id="eqPatrolCompleteNum"></span>
|
||||
<span>/</span>
|
||||
<span id="eqPatrolTotalNum"></span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr height="35%" style="background:#0C3C58;border-radius: 12px;">
|
||||
<td width="40%" style="color: #69F6F9;font-size:20px;border-radius: 12px 0px 0px 12px;">设备巡检任务数</td>
|
||||
<td width="50%" style="padding-right: 10px;border-radius: 0px 12px 12px 0px;">
|
||||
<div style="float: left;background-color:#69F6F9;width: 100%;height:25%;border-radius:8px 0px 0px 8px;"></div>
|
||||
<div style="float: left;background-color:#d8d8d8;width: 0%;height:25%;opacity: 0.44;border-radius:0px 8px 8px 0px;"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float:left;width:60%;height:calc(100% - 80px);">
|
||||
<div id="chart1" style="float:left;width:50%;height:100%;"></div>
|
||||
<div id="chart2" style="float:left;width:50%;height:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
218
WebRoot/jsp/visual/modules/bigScreen_patrolInspection2.jsp
Normal file
218
WebRoot/jsp/visual/modules/bigScreen_patrolInspection2.jsp
Normal file
@ -0,0 +1,218 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8" %>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject" %>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security" %>
|
||||
<%@page import="com.sipai.entity.visual.JspElement" %>
|
||||
<%request.setAttribute("Type_GetValue", JspElement.Type_GetValue); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_GetHourHistory); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_Get7dayHistory); %>
|
||||
<%request.setAttribute("Type_GetModbus", JspElement.Type_GetModbus); %>
|
||||
<%request.setAttribute("Type_GetHttp", JspElement.Type_GetHttp); %>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<title></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<script type="text/javascript">
|
||||
|
||||
/* 请求数据 */
|
||||
function getValue() {
|
||||
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', {planLayoutId: "${param.planLayoutId}"}, function (data) {
|
||||
// console.log(data);
|
||||
if (data != '') {
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
if (data[i].elementCode == "yxNum") {
|
||||
$('#yxNum').text(data[i].valueUrl);
|
||||
} else if (data[i].elementCode == "eqNum") {
|
||||
$('#eqNum').text(data[i].valueUrl);
|
||||
}else if (data[i].elementCode == "yxRate") {
|
||||
getchart('chart', data[i].valueUrl, '', '#36FFF9');
|
||||
} else if (data[i].elementCode == "eqRate") {
|
||||
getchart('chart2', data[i].valueUrl, '', '#36FFF9');
|
||||
}
|
||||
}
|
||||
}
|
||||
}, 'json');
|
||||
}
|
||||
|
||||
|
||||
/* 定时器 */
|
||||
//setInterval(change, 60000); //每1分钟切换
|
||||
// setInterval(getValue, 3600000); //每一小时切换
|
||||
|
||||
/* 初始化 */
|
||||
$(function () {
|
||||
if ('${param.backgroundColor}' == 'transparent') {
|
||||
document.body.style.backgroundColor = '${param.backgroundColor}';
|
||||
} else {
|
||||
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
|
||||
}
|
||||
// document.getElementById("main").style.width = document.documentElement.clientWidth + "px";
|
||||
// document.getElementById("main").style.height = (document.documentElement.clientHeight) + "px";
|
||||
|
||||
document.getElementById("titleImage").src = "" + getRootPath() + "/images/大屏/大屏标题文字背景.png";
|
||||
|
||||
getValue();
|
||||
//console.log("height",document.body.scrollHeight);
|
||||
});
|
||||
|
||||
//获取url地址根目录 当前taomcat下路径
|
||||
function getRootPath() {
|
||||
var pathName = window.location.pathname.substring(1);
|
||||
// var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
|
||||
return window.location.protocol + '//' + window.location.host;
|
||||
}
|
||||
|
||||
function getchart(id, value, title, color) {
|
||||
var myChart = echarts.init(document.getElementById(id));
|
||||
var option = {
|
||||
title: {
|
||||
text: value,
|
||||
textStyle: {
|
||||
color: '#36FFF9',
|
||||
fontSize: 50
|
||||
},
|
||||
subtext: "%",
|
||||
subtextStyle: {
|
||||
color: '#36FFF9',
|
||||
fontSize: 19
|
||||
},
|
||||
itemGap: 0, // 主副标题距离
|
||||
left: 'center',
|
||||
top: '35%'
|
||||
},
|
||||
angleAxis: {
|
||||
max: 100, // 满分
|
||||
clockwise: true, // 逆时针
|
||||
// 隐藏刻度线
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
radiusAxis: {
|
||||
type: 'category',
|
||||
// 隐藏刻度线
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
polar: {
|
||||
center: ['50%', '50%'],
|
||||
radius: '120%' //图形大小
|
||||
},
|
||||
series: [{
|
||||
type: 'bar',
|
||||
data: [{
|
||||
name: '百分比',
|
||||
value: value,
|
||||
itemStyle: {
|
||||
color: color
|
||||
},
|
||||
}],
|
||||
coordinateSystem: 'polar',
|
||||
roundCap: true,
|
||||
barWidth: 10,
|
||||
barGap: '-100%', // 两环重叠
|
||||
z: 2
|
||||
}, { // 灰色环
|
||||
type: 'bar',
|
||||
data: [{
|
||||
value: 100,
|
||||
itemStyle: {
|
||||
color: '#1D4F6D',
|
||||
shadowColor: 'rgba(0, 0, 0, 0.2)',
|
||||
shadowBlur: 2,
|
||||
shadowOffsetY: 2
|
||||
}
|
||||
}],
|
||||
coordinateSystem: 'polar',
|
||||
roundCap: true,
|
||||
barWidth: 12,
|
||||
barGap: '-100%', // 两环重叠
|
||||
z: 1
|
||||
}]
|
||||
};
|
||||
myChart.setOption(option, true);
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden;">
|
||||
<div id="main" style="height:100%;width:100%;padding-top:10px;padding-left:10px;padding-right:10px;">
|
||||
<div style="height:100%;width:100%;">
|
||||
<div style="float:left;width:100%;height:35px;margin-left: 20px;">
|
||||
<div style="float:left;width:194px;height:34px;">
|
||||
<div style="position:absolute;top:12px;left:50px;z-index:999;opacity: 1;font-size: 20px;font-family: Microsoft YaHei, Microsoft YaHei-Regular;margin-left:20px;">
|
||||
巡检管理
|
||||
</div>
|
||||
<img id="titleImage" src="" style="z-index:998;position:relative;height:100%;width:100%;"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="float:left;width:60%;height:230px;margin-top: 20px;">
|
||||
<div style="float: left;width: 100%;height:30px;text-align: center;line-height: 30px;color: #ffffff;font-size: 20px;">
|
||||
运行巡检完成率
|
||||
</div>
|
||||
<div id="chart" style="float: left;width: 100%;height: 200px;"></div>
|
||||
</div>
|
||||
<div style="float:left;width:40%;height:230px;margin-top: 20px;">
|
||||
<div style="float: left;width: 100%;height:30px;text-align: left;line-height: 30px;color: #ffffff;font-size: 20px;">
|
||||
运行工单数
|
||||
</div>
|
||||
<div id="yxNum" style="float: left;width: 100%;height:60px;text-align: left;line-height: 60px;color: #69f6f9;font-size: 34px;">
|
||||
</div>
|
||||
<div style="float: left;width: 100%;height:60px;position:relative;">
|
||||
<div style="position: absolute;width:103px;height:22px;background: #1d4f6d; border-radius: 10px;left:0px;top:0px"></div>
|
||||
<div style="position: absolute;width:80px;height:14px;background: #36fff9; border-radius: 6px;left:0px;top:0px;margin-top: 4px;margin-left: 3px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float:left;width:60%;height:230px;margin-top: 20px;">
|
||||
<div style="float: left;width: 100%;height:30px;text-align: center;line-height: 30px;color: #ffffff;font-size: 20px;">
|
||||
设备巡检完成率
|
||||
</div>
|
||||
<div id="chart2" style="float: left;width: 100%;height: 200px;"></div>
|
||||
</div>
|
||||
<div style="float:left;width:40%;height:230px;margin-top: 20px;">
|
||||
<div style="float: left;width: 100%;height:30px;text-align: left;line-height: 30px;color: #ffffff;font-size: 20px;">
|
||||
设备工单数
|
||||
</div>
|
||||
<div id="eqNum" style="float: left;width: 100%;height:60px;text-align: left;line-height: 60px;color: #69f6f9;font-size: 34px;">
|
||||
</div>
|
||||
<div style="float: left;width: 100%;height:60px;position:relative;">
|
||||
<div style="position: absolute;width:103px;height:22px;background: #1d4f6d; border-radius: 10px;left:0px;top:0px"></div>
|
||||
<div style="position: absolute;width:80px;height:14px;background: #36fff9; border-radius: 6px;left:0px;top:0px;margin-top: 4px;margin-left: 3px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
226
WebRoot/jsp/visual/modules/bigScreen_patrolInspection3.jsp
Normal file
226
WebRoot/jsp/visual/modules/bigScreen_patrolInspection3.jsp
Normal file
@ -0,0 +1,226 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<%@page import="com.sipai.entity.visual.JspElement"%>
|
||||
<%request.setAttribute("Type_GetValue", JspElement.Type_GetValue); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_GetHourHistory); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_Get7dayHistory); %>
|
||||
<%request.setAttribute("Type_GetModbus", JspElement.Type_GetModbus); %>
|
||||
<%request.setAttribute("Type_GetHttp", JspElement.Type_GetHttp); %>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<title></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<script type="text/javascript">
|
||||
|
||||
/* 请求数据 */
|
||||
function getValue() {
|
||||
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
|
||||
// console.log(data);
|
||||
if(data!=''){
|
||||
var yxTNum=0;
|
||||
var yxCNum=0;
|
||||
var sbTNum=0;
|
||||
var sbCNum=0;
|
||||
for(var i=0;i<data.length;i++){
|
||||
if(data[i].elementCode=="yxRate"){
|
||||
getchart('chart',data[i].valueUrl,'','#36FFF9');
|
||||
}else if(data[i].elementCode=="sbRate"){
|
||||
getchart('chart2',data[i].valueUrl,'','#36FFF9');
|
||||
}else if(data[i].elementCode=="yxTNum"){
|
||||
yxTNum=data[i].valueUrl;
|
||||
}else if(data[i].elementCode=="yxCNum"){
|
||||
yxCNum=data[i].valueUrl;
|
||||
}else if(data[i].elementCode=="sbTNum"){
|
||||
sbTNum=data[i].valueUrl;
|
||||
}else if(data[i].elementCode=="sbCNum"){
|
||||
sbCNum=data[i].valueUrl;
|
||||
}
|
||||
}
|
||||
|
||||
$('#yxNum').text(yxCNum+"/"+yxTNum);
|
||||
$('#sbNum').text(sbCNum+"/"+sbTNum);
|
||||
|
||||
var yxZB=(yxCNum*0.75)/yxTNum*100;
|
||||
$('#yxZB').css("width",yxZB+"%");
|
||||
var sbZB=(sbCNum*0.75)/sbTNum*100;
|
||||
$('#sbZB').css("width",sbZB+"%");
|
||||
|
||||
}
|
||||
}, 'json');
|
||||
}
|
||||
|
||||
/* 定时器 */
|
||||
//setInterval(change, 60000); //每1分钟切换
|
||||
// setInterval(getValue, 3600000); //每一小时切换
|
||||
|
||||
/* 初始化 */
|
||||
$(function () {
|
||||
if('${param.backgroundColor}'=='transparent'){
|
||||
document.body.style.backgroundColor = '${param.backgroundColor}';
|
||||
}else{
|
||||
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
|
||||
}
|
||||
// document.getElementById("main").style.width = document.documentElement.clientWidth + "px";
|
||||
// document.getElementById("main").style.height = (document.documentElement.clientHeight) + "px";
|
||||
|
||||
document.getElementById("titleImage").src = ""+getRootPath()+"/images/大屏/大屏标题文字背景.png";
|
||||
|
||||
getValue();
|
||||
//console.log("height",document.body.scrollHeight);
|
||||
});
|
||||
|
||||
//获取url地址根目录 当前taomcat下路径
|
||||
function getRootPath(){
|
||||
var pathName = window.location.pathname.substring(1);
|
||||
// var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
|
||||
return window.location.protocol + '//' + window.location.host;
|
||||
}
|
||||
|
||||
function getchart(id,value,title,color){
|
||||
var myChart = echarts.init(document.getElementById(id));
|
||||
var option = {
|
||||
title: {
|
||||
text: value,
|
||||
textStyle: {
|
||||
color: '#36FFF9',
|
||||
fontSize: 30
|
||||
},
|
||||
subtext: "%",
|
||||
subtextStyle: {
|
||||
color: '#36FFF9',
|
||||
fontSize: 16
|
||||
},
|
||||
itemGap: 0, // 主副标题距离
|
||||
left: 'center',
|
||||
top: '40%'
|
||||
},
|
||||
angleAxis: {
|
||||
max: 100, // 满分
|
||||
clockwise: true, // 逆时针
|
||||
// 隐藏刻度线
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
radiusAxis: {
|
||||
type: 'category',
|
||||
// 隐藏刻度线
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
polar: {
|
||||
center: ['50%', '50%'],
|
||||
radius: '120%' //图形大小
|
||||
},
|
||||
series: [{
|
||||
type: 'bar',
|
||||
data: [{
|
||||
name: '百分比',
|
||||
value: value,
|
||||
itemStyle: {
|
||||
color: color
|
||||
},
|
||||
}],
|
||||
coordinateSystem: 'polar',
|
||||
roundCap: true,
|
||||
barWidth: 12,
|
||||
barGap: '-100%', // 两环重叠
|
||||
z: 2
|
||||
},{ // 灰色环
|
||||
type: 'bar',
|
||||
data: [{
|
||||
value: 100,
|
||||
itemStyle: {
|
||||
color: '#1D4F6D',
|
||||
shadowColor: 'rgba(0, 0, 0, 0.2)',
|
||||
shadowBlur: 2,
|
||||
shadowOffsetY: 2
|
||||
}
|
||||
}],
|
||||
coordinateSystem: 'polar',
|
||||
roundCap: true,
|
||||
barWidth: 22,
|
||||
barGap: '-135%', // 两环重叠
|
||||
z: 1
|
||||
}]
|
||||
};
|
||||
myChart.setOption(option, true);
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden;">
|
||||
<div id="main" style="height:100%;width:100%;padding-top:10px;padding-left:10px;padding-right:10px;">
|
||||
<div style="height:100%;width:100%;">
|
||||
<div style="float:left;width:100%;height:35px;margin-left: 20px;">
|
||||
<div style="float:left;width:100%;height:34px;">
|
||||
<div style="position:absolute;top:12px;left:50px;z-index:999;opacity: 1;font-size: 20px;font-family: Microsoft YaHei, Microsoft YaHei-Regular;margin-left:38px;">巡检管理</div>
|
||||
<img id="titleImage" src="" style="z-index:998;position:relative;"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="float:left;width:60%;height:calc((100% - 35px)*0.5);padding-top: 20px;">
|
||||
<div style="float: left;width: 100%;height:30px;text-align: center;line-height: 30px;color: #ffffff;font-size: 20px;">运行巡检完成率</div>
|
||||
<div id="chart" style="float: left;width: 100%;height: 200px;"></div>
|
||||
</div>
|
||||
<div style="float:left;width:40%;height:calc((100% - 35px)*0.5);padding-top: 20px;">
|
||||
<div style="float: left;width: 100%;height:30px;text-align: left;line-height: 30px;color: #ffffff;font-size: 20px;">运行工单数</div>
|
||||
<div id="yxNum" style="float: left;width: 100%;height:60px;text-align: left;line-height: 60px;color: #69f6f9;font-size: 34px;"></div>
|
||||
<div style="float: left;width: 100%;height:60px;position:relative;">
|
||||
<div style="position: absolute;width:75%;height:22px;background: #1d4f6d; border-radius: 10px;left:0px;top:0px"></div>
|
||||
<div id="yxZB" style="position: absolute;width:75%;height:14px; left:0px;top:0px;margin-top: 4px;padding-left: 3px;padding-right: 3px;">
|
||||
<div style="float: left;width:100%;height:100%;background: #36fff9;border-radius: 6px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float:left;width:60%;height:calc((100% - 35px)*0.5);padding-top: 20px;">
|
||||
<div style="float: left;width: 100%;height:30px;text-align: center;line-height: 30px;color: #ffffff;font-size: 20px;">设备巡检完成率</div>
|
||||
<div id="chart2" style="float: left;width: 100%;height: 200px;"></div>
|
||||
</div>
|
||||
<div style="float:left;width:40%;height:calc((100% - 35px)*0.5);padding-top: 20px;">
|
||||
<div style="float: left;width: 100%;height:30px;text-align: left;line-height: 30px;color: #ffffff;font-size: 20px;">设备工单数</div>
|
||||
<div id="sbNum" style="float: left;width: 100%;height:60px;text-align: left;line-height: 60px;color: #69f6f9;font-size: 34px;"></div>
|
||||
<div style="float: left;width: 100%;height:60px;position:relative;">
|
||||
<div style="position: absolute;width:75%;height:22px;background: #1d4f6d; border-radius: 10px;left:0px;top:0px"></div>
|
||||
<div id="sbZB" style="position: absolute;width:75%;height:14px; left:0px;top:0px;margin-top: 4px;padding-left: 3px;padding-right: 3px;">
|
||||
<div style="float: left;width:100%;height:100%;background: #36fff9;border-radius: 6px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
360
WebRoot/jsp/visual/modules/bigScreen_patrolInspection4.jsp
Normal file
360
WebRoot/jsp/visual/modules/bigScreen_patrolInspection4.jsp
Normal file
@ -0,0 +1,360 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<%@page import="com.sipai.entity.visual.JspElement"%>
|
||||
<%request.setAttribute("Type_GetValue", JspElement.Type_GetValue); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_GetHourHistory); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_Get7dayHistory); %>
|
||||
<%request.setAttribute("Type_GetModbus", JspElement.Type_GetModbus); %>
|
||||
<%request.setAttribute("Type_GetHttp", JspElement.Type_GetHttp); %>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<title></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<script type="text/javascript">
|
||||
|
||||
/* 请求数据 */
|
||||
function getValue() {
|
||||
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
|
||||
// console.log(data);
|
||||
if(data!=''){
|
||||
for(var i=0;i<data.length;i++){
|
||||
// if(data[i].elementCode=="yxRate"){
|
||||
// getchart('chart',data[i].valueUrl,'','#36FFF9');
|
||||
// }else if(data[i].elementCode=="sbRate"){
|
||||
// getchart('chart2',data[i].valueUrl,'','#36FFF9');
|
||||
// }else if(data[i].elementCode=="yxTNum"){
|
||||
// yxTNum=data[i].valueUrl;
|
||||
// }else if(data[i].elementCode=="yxCNum"){
|
||||
// yxCNum=data[i].valueUrl;
|
||||
// }else if(data[i].elementCode=="sbTNum"){
|
||||
// sbTNum=data[i].valueUrl;
|
||||
// }else if(data[i].elementCode=="sbCNum"){
|
||||
// sbCNum=data[i].valueUrl;
|
||||
// }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
getChart1('chart1',95,'%','#36FFF9');
|
||||
|
||||
var chart2seriesData=[];
|
||||
chart2seriesData.push({
|
||||
value:60,
|
||||
name:'白班'
|
||||
})
|
||||
chart2seriesData.push({
|
||||
value:40,
|
||||
name:'夜班'
|
||||
})
|
||||
getChart2('chart2','100',chart2seriesData);
|
||||
|
||||
var chart3dataAxis = ['甲班', '乙班', '丁班', '丙班'];
|
||||
var chart3seriesData = [220, 182, 191, 234];
|
||||
getChart3('chart3',chart3dataAxis,chart3seriesData);
|
||||
|
||||
}, 'json');
|
||||
}
|
||||
|
||||
/* 定时器 */
|
||||
//setInterval(change, 60000); //每1分钟切换
|
||||
// setInterval(getValue, 3600000); //每一小时切换
|
||||
|
||||
/* 初始化 */
|
||||
$(function () {
|
||||
if('${param.backgroundColor}'=='transparent'){
|
||||
document.body.style.backgroundColor = '${param.backgroundColor}';
|
||||
}else{
|
||||
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
|
||||
}
|
||||
// document.getElementById("main").style.width = document.documentElement.clientWidth + "px";
|
||||
// document.getElementById("main").style.height = (document.documentElement.clientHeight) + "px";
|
||||
|
||||
document.getElementById("titleImage").src = ""+getRootPath()+"/images/大屏/js/标题logo1.png";
|
||||
|
||||
getValue();
|
||||
//console.log("height",document.body.scrollHeight);
|
||||
});
|
||||
|
||||
//获取url地址根目录 当前taomcat下路径
|
||||
function getRootPath(){
|
||||
var pathName = window.location.pathname.substring(1);
|
||||
// var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
|
||||
return window.location.protocol + '//' + window.location.host;
|
||||
}
|
||||
|
||||
function getChart1(id,value,unit,color){
|
||||
var myChart = echarts.init(document.getElementById(id));
|
||||
var option = {
|
||||
title: {
|
||||
text: ['{a|'+value+'}','{b| '+unit+'}'].join(''),
|
||||
x: '36%',
|
||||
y: '60%',
|
||||
textStyle: {
|
||||
rich: {
|
||||
a: {
|
||||
color: color,
|
||||
fontSize: '54',
|
||||
},
|
||||
b: {
|
||||
color: color,
|
||||
fontSize: '25',
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
angleAxis: {
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
min: 0,
|
||||
max: 200,
|
||||
boundaryGap: ['0', '100'],
|
||||
startAngle: 180
|
||||
},
|
||||
radiusAxis: {
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
data: ['a'],
|
||||
z: 10
|
||||
},
|
||||
polar: {
|
||||
radius: '230%',
|
||||
center: ['50%', '85%'],
|
||||
},
|
||||
series: [{
|
||||
type: 'bar',
|
||||
data: [value],
|
||||
coordinateSystem: 'polar',
|
||||
barMaxWidth: 18,
|
||||
z: 2,
|
||||
// name: '抢修项目',
|
||||
roundCap: true,
|
||||
color: color,
|
||||
barGap: '-100%',
|
||||
},
|
||||
{
|
||||
type: 'bar',
|
||||
data: [100],
|
||||
z: 0,
|
||||
silent: true,
|
||||
coordinateSystem: 'polar',
|
||||
barMaxWidth: 30,
|
||||
// name: 'C',
|
||||
roundCap: true,
|
||||
color: '#1D4F6D',
|
||||
barGap: '-135%',
|
||||
}
|
||||
],
|
||||
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
|
||||
};
|
||||
myChart.setOption(option, true);
|
||||
}
|
||||
|
||||
function getChart2(id,totalNum,seriesData){
|
||||
var myChart = echarts.init(document.getElementById(id));
|
||||
var option = {
|
||||
color:['#36E3FF','#828FFF','#9FE080'],
|
||||
title: {
|
||||
text: ['{a|完成数}','{b|'+totalNum+'}'].join('\n\n'),
|
||||
left: 'center',
|
||||
top: 'center',
|
||||
textStyle: {
|
||||
rich: {
|
||||
a: {
|
||||
fontSize: '18',
|
||||
color:'#fff'
|
||||
},
|
||||
b: {
|
||||
fontSize: '54',
|
||||
color:'#fff'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['60%', '75%'],
|
||||
center: ['50%', '50%'],
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#0a0b17',
|
||||
borderWidth: 2,
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
color:'#fff'
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
length2:2
|
||||
},
|
||||
data: seriesData
|
||||
}
|
||||
]
|
||||
}
|
||||
myChart.setOption(option, true);
|
||||
}
|
||||
|
||||
function getChart3(id,dataAxis,seriesData){
|
||||
var myChart = echarts.init(document.getElementById(id));
|
||||
var option = {
|
||||
xAxis: {
|
||||
data: dataAxis,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
z: 10
|
||||
},
|
||||
yAxis: {
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
showBackground: true,
|
||||
color:'#7CF8FD',
|
||||
barWidth:20,
|
||||
itemStyle: {
|
||||
borderRadius:5
|
||||
},
|
||||
// emphasis: {
|
||||
// itemStyle: {
|
||||
// color: new echarts.graphic.LinearGradient(
|
||||
// 0, 0, 0, 1,
|
||||
// [
|
||||
// {offset: 0, color: '#2378f7'},
|
||||
// {offset: 0.7, color: '#2378f7'},
|
||||
// {offset: 1, color: '#83bff6'}
|
||||
// ]
|
||||
// )
|
||||
// }
|
||||
// },
|
||||
data: seriesData
|
||||
}
|
||||
]
|
||||
}
|
||||
myChart.setOption(option, true);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden;">
|
||||
<div id="main" style="height:100%;width:100%;padding-top:10px;padding-left:10px;padding-right:10px;">
|
||||
<div style="height:100%;width:100%;">
|
||||
<div style="float:left;width:100%;height:35px;padding-left: 20px;">
|
||||
<div style="float:left;width:100%;height:34px;position:absolute;">
|
||||
<div style="position:absolute;top:-4px;left:50px;z-index:999;opacity: 1;font-size: 21px;color:#d9f6fb;font-family:Source Han Sans CN, Source Han Sans CN-Regular;text-shadow:1.5px 1.5px 0 #174749, 1.5px -1.5px 0 #174749, -1.5px -1.5px 0 #174749, -1.5px 1.5px 0 #174749, 1.5px 1px 0 #174749, 1.5px -1px 0 #174749, -1.5px -1px 0 #174749, -1.5px 1px 0 #174749, 1.5px 0px 0 #174749, 1.5px 0px 0 #174749, -1.5px 0px 0 #174749, -1.5px 0px 0 #174749,1px 1.5px 0 #174749, 1px -1.5px 0 #174749, -1px -1.5px 0 #174749, -1px 1.5px 0 #174749, 1px 1px 0 #174749, 1px -1px 0 #174749, -1px -1px 0 #174749, -1px 1px 0 #174749, 1px 0px 0 #174749, 1px 0px 0 #174749, -1px 0px 0 #174749, -1px 0px 0 #174749, 0px 1.5px 0 #174749, 0px -1.5px 0 #174749, 0px -1.5px 0 #174749, 0px 1.5px 0 #174749, 0px 1px 0 #174749, 0px -1px 0 #174749, 0px -1px 0 #174749, 0px 1px 0 #174749;">巡检情况</div>
|
||||
<img id="titleImage" src="" style="z-index:998;position:relative;"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="float:left;width:33.3%;height:calc(100% - 35px);padding-left: 20px;">
|
||||
<div style="float:left;width:100%;height:50px;text-align:center;font-size: 25px;font-family: Microsoft YaHei, Microsoft YaHei-Regular;color: #ffffff;line-height: 30px;padding-top:20px;">
|
||||
任务完成率
|
||||
</div>
|
||||
|
||||
<div id="chart1" style="float:left;width:100%;height:240px;">
|
||||
|
||||
</div>
|
||||
|
||||
<div style="float:left;width:100%;height:80px;text-align:center;font-family: Microsoft YaHei, Microsoft YaHei-Regular;padding-top:10px;">
|
||||
<div style="float:left;width:100%;height:50%;">
|
||||
<div style="float:left;width:50px;height:100%;font-size: 16px;color: #1CBEC5;line-height:40px;">
|
||||
完成数
|
||||
</div>
|
||||
<div style="float:left;width:calc(100% - 200px);height:100%;color: #ffffff;font-size: 26px;font-family: Source Han Sans CN, Source Han Sans CN-Medium;">
|
||||
200
|
||||
</div>
|
||||
<div style="float:left;width:150px;height:100%;font-size: 16px;color: #1CBEC5;line-height:40px;">
|
||||
常规180/临时20
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="float:left;width:100%;height:50%;">
|
||||
<div style="float:left;width:50px;height:100%;font-size: 16px;color: #1CBEC5;line-height:40px;">
|
||||
总数
|
||||
</div>
|
||||
<div style="float:left;width:calc(100% - 200px);height:100%;color: #ffffff;font-size: 26px;font-family: Source Han Sans CN, Source Han Sans CN-Medium;">
|
||||
200
|
||||
</div>
|
||||
<div style="float:left;width:150px;height:100%;font-size: 16px;color: #1CBEC5;line-height:40px;">
|
||||
常规180/临时20
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="float:left;width:33.3%;height:calc(100% - 35px);padding-left: 20px;">
|
||||
<div style="float:left;width:100%;height:50px;text-align:center;font-size: 25px;font-family: Microsoft YaHei, Microsoft YaHei-Regular;color: #ffffff;line-height: 30px;padding-top:20px;">
|
||||
班组巡检统计
|
||||
</div>
|
||||
|
||||
<div id="chart2" style="float:left;width:100%;height:300px;">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="float:left;width:33.3%;height:calc(100% - 35px);padding-left: 20px;">
|
||||
<div id="chart3" style="float:left;width:100%;height:420px;">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
77
WebRoot/jsp/visual/modules/bigScreen_pictureShow.jsp
Normal file
77
WebRoot/jsp/visual/modules/bigScreen_pictureShow.jsp
Normal file
@ -0,0 +1,77 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<%@page import="com.sipai.entity.visual.JspElement"%>
|
||||
<%request.setAttribute("Type_GetValue", JspElement.Type_GetValue); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_GetHourHistory); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_Get7dayHistory); %>
|
||||
<%request.setAttribute("Type_GetModbus", JspElement.Type_GetModbus); %>
|
||||
<%request.setAttribute("Type_GetHttp", JspElement.Type_GetHttp); %>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<title></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<script type="text/javascript">
|
||||
|
||||
/* 请求数据 */
|
||||
function getValue() {
|
||||
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
|
||||
// console.log(data);
|
||||
if(data!=''){
|
||||
for(var i=0;i<data.length;i++){
|
||||
if(data[i].elementCode=="img"){
|
||||
var url=data[i].valueUrl;
|
||||
document.getElementById("Image").src = ""+getRootPath()+""+url+"";
|
||||
// $('#Image').css("background","url("+getRootPath()+""+url+") no-repeat 0px 0px");
|
||||
// $('#Image').css("background-size","contain");
|
||||
}
|
||||
}
|
||||
}
|
||||
}, 'json');
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 定时器 */
|
||||
//setInterval(change, 60000); //每1分钟切换
|
||||
// setInterval(getValue, 3600000); //每一小时切换
|
||||
|
||||
/* 初始化 */
|
||||
$(function () {
|
||||
if('${param.backgroundColor}'=='transparent'){
|
||||
document.body.style.backgroundColor = '${param.backgroundColor}';
|
||||
}else{
|
||||
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
|
||||
}
|
||||
document.getElementById("main").style.width = document.documentElement.clientWidth + "px";
|
||||
document.getElementById("main").style.height = (document.documentElement.clientHeight) + "px";
|
||||
|
||||
getValue();
|
||||
//console.log("height",document.body.scrollHeight);
|
||||
});
|
||||
|
||||
//获取url地址根目录 当前taomcat下路径
|
||||
function getRootPath(){
|
||||
var pathName = window.location.pathname.substring(1);
|
||||
// var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
|
||||
return window.location.protocol + '//' + window.location.host;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden;">
|
||||
<div id="main" style="height:100%;width:100%;margin-top: 10px;">
|
||||
<img id="Image" src="" style="z-index:998;position:relative;width:100%;height:100%"/>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
1468
WebRoot/jsp/visual/modules/bigScreen_pipelineStatus.jsp
Normal file
1468
WebRoot/jsp/visual/modules/bigScreen_pipelineStatus.jsp
Normal file
File diff suppressed because it is too large
Load Diff
198
WebRoot/jsp/visual/modules/bigScreen_processData.jsp
Normal file
198
WebRoot/jsp/visual/modules/bigScreen_processData.jsp
Normal file
@ -0,0 +1,198 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<%@page import="com.sipai.entity.visual.JspElement"%>
|
||||
<%request.setAttribute("Type_GetValue", JspElement.Type_GetValue); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_GetHourHistory); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_Get7dayHistory); %>
|
||||
<%request.setAttribute("Type_GetModbus", JspElement.Type_GetModbus); %>
|
||||
<%request.setAttribute("Type_GetHttp", JspElement.Type_GetHttp); %>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<title></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<script type="text/javascript">
|
||||
|
||||
/* 请求数据 */
|
||||
function getValue() {
|
||||
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
|
||||
// console.log(data);
|
||||
if(data!=''){
|
||||
var table1Html1="";
|
||||
var table2Html1="";
|
||||
|
||||
var table1Html2="";
|
||||
var table2Html2="";
|
||||
var table3Html2="";
|
||||
var table4Html2="";
|
||||
|
||||
for(var i=0;i<data.length;i++){
|
||||
if(data[i].elementCode=="DO"){
|
||||
if(data[i].getValueType=="getText"){
|
||||
table1Html1+="<td style=\"color: #ffffff;\">"+numOutput(data[i].valueUrl)+"</td>";
|
||||
}else if(data[i].getValueType=="getValue"){
|
||||
table1Html1+="<td style=\"color: #ffffff;\">"+numOutput(data[i].mPoint.parmvalue)+"</td>";
|
||||
}
|
||||
}else if(data[i].elementCode=="MLSS"){
|
||||
if(data[i].getValueType=="getText"){
|
||||
table2Html1+="<td style=\"color: #ffffff;\">"+numOutput(data[i].valueUrl)+"</td>";
|
||||
}else{
|
||||
table2Html1+="<td style=\"color: #ffffff;\">"+numOutput(data[i].mPoint.parmvalue)+"</td>";
|
||||
}
|
||||
}else if(data[i].elementCode=="PAC"){
|
||||
if(data[i].getValueType=="getText"){
|
||||
table1Html2+="<td style=\"color: #ffffff;\">"+numOutput(data[i].valueUrl)+"</td>";
|
||||
}else{
|
||||
table1Html2+="<td style=\"color: #ffffff;\">"+numOutput(data[i].mPoint.parmvalue)+"</td>";
|
||||
}
|
||||
}else if(data[i].elementCode=="PAM"){
|
||||
if(data[i].getValueType=="getText"){
|
||||
table2Html2+="<td style=\"color: #ffffff;\">"+numOutput(data[i].valueUrl)+"</td>";
|
||||
}else{
|
||||
table2Html2+="<td style=\"color: #ffffff;\">"+numOutput(data[i].mPoint.parmvalue)+"</td>";
|
||||
}
|
||||
}else if(data[i].elementCode=="含氯杀菌剂"){
|
||||
if(data[i].getValueType=="getText"){
|
||||
table3Html2+="<td style=\"color: #ffffff;\">"+numOutput(data[i].valueUrl)+"</td>";
|
||||
}else{
|
||||
table3Html2+="<td style=\"color: #ffffff;\">"+numOutput(data[i].mPoint.parmvalue)+"</td>";
|
||||
}
|
||||
}else if(data[i].elementCode=="脱水药剂"){
|
||||
if(data[i].getValueType=="getText"){
|
||||
table4Html2+="<td style=\"color: #ffffff;\">"+numOutput(data[i].valueUrl)+"</td>";
|
||||
}else{
|
||||
table4Html2+="<td style=\"color: #ffffff;\">"+numOutput(data[i].mPoint.parmvalue)+"</td>";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
var tableHtml1="";
|
||||
tableHtml1+="<tr style=\"font-size: 16px;color: #dbeeff;text-align: center;height:30px;\">";
|
||||
tableHtml1+="<td style=\"width:40px;\"></td>";
|
||||
tableHtml1+="<td style=\"width:128px;\">1#生反池</td>";
|
||||
tableHtml1+="<td style=\"width:128px;\">2#生反池</td>";
|
||||
tableHtml1+="</tr>";
|
||||
tableHtml1+="<tr style=\"font-size: 16px;text-align: center;height:30px;\">";
|
||||
tableHtml1+="<td style=\"color: #1CBEC5;\">DO\</td>";
|
||||
tableHtml1+=table1Html1;
|
||||
tableHtml1+="</tr>";
|
||||
tableHtml1+="<tr style=\"font-size: 16px;text-align: center;height:30px;\">";
|
||||
tableHtml1+="<td style=\"color: #1CBEC5;\">MLSS\</td>";
|
||||
tableHtml1+=table2Html1;
|
||||
tableHtml1+="</tr>";
|
||||
tableHtml1+="<tr style=\"font-size: 16px;color: #1CBEC5;text-align: center;height:30px;\">";
|
||||
tableHtml1+="<td >\</td>";
|
||||
tableHtml1+="<td >\</td>";
|
||||
tableHtml1+="</tr>";
|
||||
tableHtml1+="<tr style=\"font-size: 16px;color: #1CBEC5;text-align: center;height:30px;\">";
|
||||
tableHtml1+="<td >\</td>";
|
||||
tableHtml1+="<td >\</td>";
|
||||
tableHtml1+="</tr>";
|
||||
tableHtml1+="<tr style=\"font-size: 16px;color: #1CBEC5;text-align: center;height:30px;\">";
|
||||
tableHtml1+="<td >\</td>";
|
||||
tableHtml1+="<td >\</td>";
|
||||
tableHtml1+="</tr>";
|
||||
$('#table1').html(tableHtml1);
|
||||
|
||||
|
||||
var tableHtml2="";
|
||||
tableHtml2+="<tr style=\"font-size: 16px;color: #dbeeff;text-align: center;height:30px;\">";
|
||||
tableHtml2+="<td style=\"width:60px;\"></td>";
|
||||
tableHtml2+="<td style=\"width:128px;\">当前投加量</td>";
|
||||
tableHtml2+="<td style=\"width:128px;\">平均投加量</td>";
|
||||
tableHtml2+="</tr>";
|
||||
tableHtml2+="<tr style=\"font-size: 16px;color: #1CBEC5;text-align: center;height:30px;\">";
|
||||
tableHtml2+="<td >PAC\</td>";
|
||||
tableHtml2+=table1Html2;
|
||||
tableHtml2+="</tr>";
|
||||
tableHtml2+="<tr style=\"font-size: 16px;color: #1CBEC5;text-align: center;height:30px;\">";
|
||||
tableHtml2+="<td >PAM\</td>";
|
||||
tableHtml2+=table2Html2;
|
||||
tableHtml2+="</tr>";
|
||||
tableHtml2+="<tr style=\"font-size: 16px;color: #1CBEC5;text-align: center;height:30px;\">";
|
||||
tableHtml2+="<td >含氯杀菌剂\</td>";
|
||||
tableHtml2+=table3Html2;
|
||||
tableHtml2+="</tr>";
|
||||
tableHtml2+="<tr style=\"font-size: 16px;color: #1CBEC5;text-align: center;height:30px;\">";
|
||||
tableHtml2+="<td >脱水药剂\</td>";
|
||||
tableHtml2+=table4Html2;
|
||||
tableHtml2+="</tr>";
|
||||
tableHtml2+="<tr style=\"font-size: 16px;color: #1CBEC5;text-align: center;height:30px;\">";
|
||||
tableHtml2+="<td >\</td>";
|
||||
tableHtml2+="<td >\</td>";
|
||||
tableHtml2+="</tr>";
|
||||
$('#table2').html(tableHtml2);
|
||||
}, 'json');
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 定时器 */
|
||||
setInterval(getValue, 300000); //每5分钟切换
|
||||
// setInterval(getValue, 3600000); //每一小时切换
|
||||
|
||||
/* 初始化 */
|
||||
$(function () {
|
||||
if('${param.backgroundColor}'=='transparent'){
|
||||
document.body.style.backgroundColor = '${param.backgroundColor}';
|
||||
}else{
|
||||
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
|
||||
}
|
||||
document.getElementById("main").style.width = document.documentElement.clientWidth + "px";
|
||||
document.getElementById("main").style.height = (document.documentElement.clientHeight) + "px";
|
||||
|
||||
document.getElementById("titleImage").src = ""+getRootPath()+"/images/大屏/js/标题logo1.png";
|
||||
|
||||
|
||||
getValue();
|
||||
//console.log("height",document.body.scrollHeight);
|
||||
});
|
||||
|
||||
//获取url地址根目录 当前taomcat下路径
|
||||
function getRootPath(){
|
||||
var pathName = window.location.pathname.substring(1);
|
||||
// var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
|
||||
return window.location.protocol + '//' + window.location.host;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden;">
|
||||
<div id="main" style="height:100%;width:100%;padding-top:20px;padding-left:10px;padding-right:10px;">
|
||||
<div style="height:100%;width:100%;">
|
||||
<div style="float:left;width:100%;height:35px;padding-left: 20px;">
|
||||
<div style="float:left;width:100%;height:34px;position:absolute;">
|
||||
<div style="position:absolute;top:-4px;left:50px;z-index:999;opacity: 1;font-size: 21px;color:#d9f6fb;font-family:Source Han Sans CN, Source Han Sans CN-Regular;text-shadow:1.5px 1.5px 0 #174749, 1.5px -1.5px 0 #174749, -1.5px -1.5px 0 #174749, -1.5px 1.5px 0 #174749, 1.5px 1px 0 #174749, 1.5px -1px 0 #174749, -1.5px -1px 0 #174749, -1.5px 1px 0 #174749, 1.5px 0px 0 #174749, 1.5px 0px 0 #174749, -1.5px 0px 0 #174749, -1.5px 0px 0 #174749,1px 1.5px 0 #174749, 1px -1.5px 0 #174749, -1px -1.5px 0 #174749, -1px 1.5px 0 #174749, 1px 1px 0 #174749, 1px -1px 0 #174749, -1px -1px 0 #174749, -1px 1px 0 #174749, 1px 0px 0 #174749, 1px 0px 0 #174749, -1px 0px 0 #174749, -1px 0px 0 #174749, 0px 1.5px 0 #174749, 0px -1.5px 0 #174749, 0px -1.5px 0 #174749, 0px 1.5px 0 #174749, 0px 1px 0 #174749, 0px -1px 0 #174749, 0px -1px 0 #174749, 0px 1px 0 #174749;">运行数据</div>
|
||||
<img id="titleImage" src="" style="z-index:998;position:relative;"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="float:left;width:100%;height:calc(100% - 35px);padding-left: 20px;padding-top: 50px;padding-bottom: 20px;">
|
||||
<div style="float:left;width:40%;height:100%;border-right:1px solid #DCDCDC;">
|
||||
<table id="table1" style="width:100%;height:100%;">
|
||||
|
||||
</table>
|
||||
</div>
|
||||
<div style="float:left;width:60%;height:100%;border-right:1px solid #DCDCDC;padding-left:5px;">
|
||||
<table id="table2" style="width:100%;height:100%;">
|
||||
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
106
WebRoot/jsp/visual/modules/bigScreen_processDrawing.jsp
Normal file
106
WebRoot/jsp/visual/modules/bigScreen_processDrawing.jsp
Normal file
@ -0,0 +1,106 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<%@page import="com.sipai.entity.visual.JspElement"%>
|
||||
<%request.setAttribute("Type_GetValue", JspElement.Type_GetValue); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_GetHourHistory); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_Get7dayHistory); %>
|
||||
<%request.setAttribute("Type_GetModbus", JspElement.Type_GetModbus); %>
|
||||
<%request.setAttribute("Type_GetHttp", JspElement.Type_GetHttp); %>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<title></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<script type="text/javascript">
|
||||
|
||||
//获取url地址根目录 当前taomcat下路径
|
||||
function getRootPath(){
|
||||
var pathName = window.location.pathname.substring(1);
|
||||
// var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
|
||||
return window.location.protocol + '//' + window.location.host;
|
||||
}
|
||||
//获取url地址根目录 当前taomcat下路径
|
||||
function getRootPath2(){
|
||||
var pathName = window.location.pathname.substring(1);
|
||||
var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
|
||||
return window.location.protocol + '//' + window.location.host +"/"+webName;
|
||||
}
|
||||
|
||||
var mychart="";
|
||||
/* 请求数据 */
|
||||
function getValue() {
|
||||
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
|
||||
if(data!=null&&data.length>0){
|
||||
var texthtml="";
|
||||
for(var i=0;i<data.length;i++){
|
||||
if(data[i].elementCode=="img"){
|
||||
var url=data[i].valueUrl;
|
||||
$('#backImage').css("background","url("+getRootPath()+""+url+") no-repeat");
|
||||
$('#backImage').css("background-size","contain");
|
||||
// document.getElementById("backImage").src = ""+getRootPath()+""+url+"";
|
||||
}
|
||||
// else if(data[i].elementCode=="text"){
|
||||
// var color="#00D8FF";
|
||||
// var unit="";
|
||||
// var pv;
|
||||
// if(i==1){
|
||||
// color="#00D8FF";
|
||||
// unit="万吨";
|
||||
// pv=(data[i].mPoint.parmvalue/10000).toFixed(1)
|
||||
// }else if(i==2){
|
||||
// color="#FF9429";
|
||||
// unit="t";
|
||||
// pv=data[i].mPoint.parmvalue;
|
||||
// }
|
||||
// texthtml+="<div style='float: left;width: 100%;height: 50%;'>";
|
||||
// texthtml+="<div style='float: left;width: 100%;height: 50%;font-size:24px;font-family: Helvetica;text-align: center;color: #ffffff;line-height:80px;'>"+data[i].name+"</div>";
|
||||
// texthtml+="<div style='float: left;width: 100%;height: 50%;font-size:26px;font-family: Helvetica;text-align: center;color:"+color+";line-height:45px;'>"+pv+" "+unit+"</div>";
|
||||
// texthtml+="</div>";
|
||||
// }
|
||||
}
|
||||
$('#text').html(texthtml);
|
||||
}
|
||||
}, 'json');
|
||||
}
|
||||
|
||||
/* 定时器 */
|
||||
//setInterval(change, 60000); //每1分钟切换
|
||||
setInterval(getValue, 3600000); //每一小时切换
|
||||
|
||||
/* 初始化 */
|
||||
$(function () {
|
||||
if('${param.backgroundColor}'=='transparent'){
|
||||
document.body.style.backgroundColor = '${param.backgroundColor}';
|
||||
}else{
|
||||
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
|
||||
}
|
||||
document.getElementById("main").style.width = document.documentElement.clientWidth + "px";
|
||||
document.getElementById("main").style.height = (document.documentElement.clientHeight-15) + "px";
|
||||
|
||||
getValue();
|
||||
//console.log("height",document.body.scrollHeight);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden">
|
||||
<div style="height:100%;width:100%;">
|
||||
<div id="main" style="height:100%;width:100%;padding:0px;background:rgba(19,32,85,0.27);border-radius: 8px;">
|
||||
<div id="backImage" style='float:left;width:100%;height:100%;'></div>
|
||||
<!-- <div id="text" style='position: absolute;width: 220px;height: 250px;left: 20px;
|
||||
top: 20px;background:rgba(43,102,169,0.5);border-radius: 24px;'>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
67
WebRoot/jsp/visual/modules/bigScreen_processDrawing2.jsp
Normal file
67
WebRoot/jsp/visual/modules/bigScreen_processDrawing2.jsp
Normal file
@ -0,0 +1,67 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<%@page import="com.sipai.entity.visual.JspElement"%>
|
||||
<%request.setAttribute("Type_GetValue", JspElement.Type_GetValue); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_GetHourHistory); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_Get7dayHistory); %>
|
||||
<%request.setAttribute("Type_GetModbus", JspElement.Type_GetModbus); %>
|
||||
<%request.setAttribute("Type_GetHttp", JspElement.Type_GetHttp); %>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<title></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<script type="text/javascript">
|
||||
|
||||
/* 请求数据 */
|
||||
function getbigScreen_processDrawing2Value() {
|
||||
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
|
||||
if(data!=''){
|
||||
for(var i=0;i<data.length;i++){
|
||||
if(data[i].elementCode=="img"){
|
||||
var url=data[i].valueUrl;
|
||||
$('#bigScreen_processDrawing2backImage').css("background","url("+getRootPath()+""+url+") no-repeat 0px 0px");
|
||||
$('#bigScreen_processDrawing2backImage').css("background-size","cover");
|
||||
}
|
||||
}
|
||||
}
|
||||
}, 'json');
|
||||
}
|
||||
|
||||
/* 定时器 */
|
||||
//setInterval(change, 60000); //每1分钟切换
|
||||
// setInterval(getValue, 3600000); //每一小时切换
|
||||
|
||||
/* 初始化 */
|
||||
$(function () {
|
||||
if('${param.backgroundColor}'=='transparent'){
|
||||
document.body.style.backgroundColor = '${param.backgroundColor}';
|
||||
}else{
|
||||
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
|
||||
}
|
||||
// document.getElementById("main").style.width = document.documentElement.clientWidth + "px";
|
||||
// document.getElementById("main").style.height = (document.documentElement.clientHeight) + "px";
|
||||
|
||||
getbigScreen_processDrawing2Value();
|
||||
//console.log("height",document.body.scrollHeight);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden">
|
||||
<div id="bigScreen_processDrawing2main" style="height:100%;width:100%;padding-top:10px;">
|
||||
<div style="height:100%;width:100%;background:#16314c;border-radius: 8px;">
|
||||
<div id="bigScreen_processDrawing2backImage" style='float:left;width:100%;height:100%;'></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
170
WebRoot/jsp/visual/modules/bigScreen_processDrawing3.jsp
Normal file
170
WebRoot/jsp/visual/modules/bigScreen_processDrawing3.jsp
Normal file
@ -0,0 +1,170 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<%@page import="com.sipai.entity.visual.JspElement"%>
|
||||
<%request.setAttribute("Type_GetValue", JspElement.Type_GetValue); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_GetHourHistory); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_Get7dayHistory); %>
|
||||
<%request.setAttribute("Type_GetModbus", JspElement.Type_GetModbus); %>
|
||||
<%request.setAttribute("Type_GetHttp", JspElement.Type_GetHttp); %>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<title></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<script type="text/javascript">
|
||||
|
||||
/* 请求数据 */
|
||||
function getValue() {
|
||||
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
|
||||
if(data!=''){
|
||||
var table1Num=0;
|
||||
var table1Html = "";
|
||||
var table2Num=0;
|
||||
var table2Html = "";
|
||||
for(var i=0;i<data.length;i++){
|
||||
if(data[i].elementCode=="img"){
|
||||
document.getElementById("Image3").src = ""+getRootPath()+""+data[i].valueUrl+"";
|
||||
}else if(data[i].elementCode=="table1"){
|
||||
var td = "<td style='width: 13%;color: #dbeeff;font-size: 16px;'>"+data[i].name+"</td>";
|
||||
var td2 = "<td style='width: 20.3%;color: #69f6f9;font-size: 16px;'>"+data[i].mPoint.parmvalue+" "+data[i].mPoint.unit+"</td>";
|
||||
// if(table1Num%3==0){
|
||||
// table1Html+="<tr>";
|
||||
// table1Html+=td;
|
||||
// table1Html+=td2;
|
||||
// }else if(table1Num%3==2){
|
||||
// table1Html+=td;
|
||||
// table1Html+=td2;
|
||||
// table1Html+="</tr>";
|
||||
// }else{
|
||||
// table1Html+=td;
|
||||
// table1Html+=td2;
|
||||
// }
|
||||
if(table1Num%2==0){
|
||||
table1Html+="<tr>";
|
||||
table1Html+=td;
|
||||
table1Html+=td2;
|
||||
}else if(table1Num%2==1){
|
||||
table1Html+=td;
|
||||
table1Html+=td2;
|
||||
table1Html+="</tr>";
|
||||
}
|
||||
|
||||
|
||||
table1Num++;
|
||||
}else if(data[i].elementCode=="table2"){
|
||||
var td = "<td style='width: 13%;color: #dbeeff;font-size: 16px;'>"+data[i].name+"</td>";
|
||||
var td2 = "<td style='width: 20.3%;color: #69f6f9;font-size: 16px;'>"+data[i].mPoint.parmvalue+" "+data[i].mPoint.unit+"</td>";
|
||||
// if(table2Num%3==0){
|
||||
// table2Html+="<tr>";
|
||||
// table2Html+=td;
|
||||
// table2Html+=td2;
|
||||
// }else if(table2Num%3==2){
|
||||
// table2Html+=td;
|
||||
// table2Html+=td2;
|
||||
// table2Html+="</tr>";
|
||||
// }else{
|
||||
// table2Html+=td;
|
||||
// table2Html+=td2;
|
||||
// }
|
||||
if(table2Num%2==0){
|
||||
table2Html+="<tr>";
|
||||
table2Html+=td;
|
||||
table2Html+=td2;
|
||||
}else if(table2Num%2==1){
|
||||
table2Html+=td;
|
||||
table2Html+=td2;
|
||||
table2Html+="</tr>";
|
||||
}
|
||||
|
||||
table2Num++;
|
||||
}
|
||||
}
|
||||
$("#table1").html(table1Html);
|
||||
$("#table2").html(table2Html);
|
||||
}
|
||||
}, 'json');
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 定时器 */
|
||||
setInterval(getValue, 300000); //每5分钟切换
|
||||
// setInterval(getValue, 3600000); //每一小时切换
|
||||
|
||||
/* 初始化 */
|
||||
$(function () {
|
||||
if('${param.backgroundColor}'=='transparent'){
|
||||
document.body.style.backgroundColor = '${param.backgroundColor}';
|
||||
}else{
|
||||
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
|
||||
}
|
||||
document.getElementById("main").style.width = document.documentElement.clientWidth + "px";
|
||||
document.getElementById("main").style.height = (document.documentElement.clientHeight) + "px";
|
||||
|
||||
document.getElementById("Image1").src = ""+getRootPath()+"/images/大屏/原水水质.png";
|
||||
document.getElementById("Image2").src = ""+getRootPath()+"/images/大屏/进水水质.png";
|
||||
// document.getElementById("Image3").src = ""+getRootPath()+"/images/大屏/岳麓大屏1工艺图.png";
|
||||
|
||||
getValue();
|
||||
//console.log("height",document.body.scrollHeight);
|
||||
});
|
||||
|
||||
//获取url地址根目录 当前taomcat下路径
|
||||
function getRootPath(){
|
||||
var pathName = window.location.pathname.substring(1);
|
||||
// var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
|
||||
return window.location.protocol + '//' + window.location.host;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden;">
|
||||
<div id="main" style="height:100%;width:100%;padding-top:30px;padding-left:10px;padding-right:10px;">
|
||||
<div style="height:100%;width:100%;">
|
||||
<div style="float:left;width:100%;height:92px;background: #023354;border-radius: 10px;">
|
||||
<div style="float:left;width:80px;height:100%;">
|
||||
<div style="float:left;width:80px;height:60px;padding-left: 18px;padding-right: 18px;padding-top: 19px;">
|
||||
<img id="Image1" src="" style="z-index:998;position:relative;height:100%;width:100%;"/>
|
||||
</div>
|
||||
<div style="float:left;width:80px;height:32px;padding-top:5px;text-align: center;color: #dbeeff;font-size: 16px;">
|
||||
原水水质
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="float:left;width:calc((100% - 160px)*0.5);height:100%;">
|
||||
<table id="table1" style="width: 100%;height: 100%;">
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div style="float:left;width:80px;height:100%;">
|
||||
<div style="float:left;width:80px;height:60px;padding-left: 18px;padding-right: 18px;padding-top: 19px;">
|
||||
<img id="Image2" src="" style="z-index:998;position:relative;height:100%;width:100%;"/>
|
||||
</div>
|
||||
<div style="float:left;width:80px;height:32px;padding-top:5px;text-align: center;color: #dbeeff;font-size: 16px;">
|
||||
出水水质
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="float:left;width:calc((100% - 160px)*0.5);height:100%;">
|
||||
<table id="table2" style="width: 100%;height: 100%;">
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:430px;margin-top: 20px;">
|
||||
<img id="Image3" src="" style="z-index:998;position:relative;height:100%;width:100%;"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
175
WebRoot/jsp/visual/modules/bigScreen_processDrawing4.jsp
Normal file
175
WebRoot/jsp/visual/modules/bigScreen_processDrawing4.jsp
Normal file
@ -0,0 +1,175 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<%@page import="com.sipai.entity.visual.JspElement"%>
|
||||
<%request.setAttribute("Type_GetValue", JspElement.Type_GetValue); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_GetHourHistory); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_Get7dayHistory); %>
|
||||
<%request.setAttribute("Type_GetModbus", JspElement.Type_GetModbus); %>
|
||||
<%request.setAttribute("Type_GetHttp", JspElement.Type_GetHttp); %>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<title></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<script type="text/javascript">
|
||||
|
||||
/* 请求数据 */
|
||||
function getValue() {
|
||||
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
|
||||
if(data!=''){
|
||||
var table1Html="";
|
||||
var table2Html="";
|
||||
for(var i=0;i<data.length;i++){
|
||||
if(data[i].elementCode=="img"){
|
||||
document.getElementById("Image3").src = ""+getRootPath()+""+data[i].valueUrl+"";
|
||||
}else if(data[i].elementCode=="table1"){
|
||||
if(data[i].getValueType=="getText"){
|
||||
table1Html+="<td >"+data[i].valueUrl+"</td>";
|
||||
}else if(data[i].getValueType=="getValue"){
|
||||
table1Html+="<td >"+data[i].mPoint.parmvalue+"</td>";
|
||||
}
|
||||
}else if(data[i].elementCode=="table2"){
|
||||
if(data[i].getValueType=="getText"){
|
||||
table2Html+="<td >"+data[i].valueUrl+"</td>";
|
||||
}else{
|
||||
table2Html+="<td >"+data[i].mPoint.parmvalue+"</td>";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var tableHtml="";
|
||||
tableHtml+="<tr style=\"font-size: 16px;color: #dbeeff;text-align: center;\">";
|
||||
tableHtml+="<td style=\"width:40px;\"></td>";
|
||||
tableHtml+="<td style=\"width:128px;\">瞬时流量(m3/h)</td>";
|
||||
tableHtml+="<td style=\"width:128px;\">昨日累计(m3)</td>";
|
||||
tableHtml+="<td style=\"width:128px;\">今日累计(m3)</td>";
|
||||
tableHtml+="<td style=\"width:128px;\">COD(m3/h)</td>";
|
||||
tableHtml+="<td style=\"width:128px;\">PH</td>";
|
||||
tableHtml+="<td style=\"width:128px;\">氨氮(mg/l)</td>";
|
||||
tableHtml+="<td style=\"width:128px;\">TN(mg/l)</td>";
|
||||
tableHtml+="<td style=\"width:128px;\">TP(mg/l)</td>";
|
||||
tableHtml+="</tr>";
|
||||
tableHtml+="<tr style=\"font-size: 16px;color: #b584ff;text-align: center;\">";
|
||||
tableHtml+="<td >进水</td>";
|
||||
tableHtml+=table1Html;
|
||||
tableHtml+="</tr>";
|
||||
tableHtml+="<tr style=\"font-size: 16px;color: #69F6F9;text-align: center;\">";
|
||||
tableHtml+="<td >出水</td>";
|
||||
tableHtml+=table2Html;
|
||||
tableHtml+="</tr>";
|
||||
$('#table').html(tableHtml);
|
||||
// <tr style="font-size: 16px;color: #dbeeff;text-align: center;">
|
||||
// <td style="width:40px;"></td>
|
||||
// <td style="width:128px;">瞬时流量(m3/h)</td>
|
||||
// <td style="width:128px;">昨日累计(m3)</td>
|
||||
// <td style="width:128px;">今日累计(m3)</td>
|
||||
// <td style="width:128px;">COD(mg/l)</td>
|
||||
// <td style="width:128px;">PH</td>
|
||||
// <td style="width:128px;">氨氮(mg/l)</td>
|
||||
// <td style="width:128px;">TN(mg/l)</td>
|
||||
// <td style="width:128px;">TP(mg/l)</td>
|
||||
// </tr>
|
||||
// <tr style="font-size: 16px;color: #b584ff;text-align: center;">
|
||||
// <td >进水</td>
|
||||
// </tr>
|
||||
// <tr style="font-size: 16px;color: #69F6F9;text-align: center;">
|
||||
// <td >出水</td>
|
||||
// </tr>
|
||||
|
||||
}
|
||||
}, 'json');
|
||||
}
|
||||
|
||||
function numOutput(num){
|
||||
var numpart=String(num).split(".");//将数字通过jq split用小数点分隔为数组对象
|
||||
numpart[0]=numpart[0].replace(new RegExp('(\\d)(?=(\\d{3})+$)','ig'),"$1,");
|
||||
//将数组对象第一个数据(整数部分)通过正则表达式每三位用逗号分隔
|
||||
return numpart.join(".");//把数组通过join方法用.进行拼接
|
||||
}
|
||||
|
||||
/* 定时器 */
|
||||
setInterval(getValue, 300000); //每5分钟切换
|
||||
// setInterval(getValue, 3600000); //每一小时切换
|
||||
|
||||
/* 初始化 */
|
||||
$(function () {
|
||||
if('${param.backgroundColor}'=='transparent'){
|
||||
document.body.style.backgroundColor = '${param.backgroundColor}';
|
||||
}else{
|
||||
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
|
||||
}
|
||||
document.getElementById("main").style.width = document.documentElement.clientWidth + "px";
|
||||
document.getElementById("main").style.height = (document.documentElement.clientHeight) + "px";
|
||||
|
||||
document.getElementById("Image").src = ""+getRootPath()+"/images/大屏/水质logo.png";
|
||||
|
||||
getValue();
|
||||
//console.log("height",document.body.scrollHeight);
|
||||
});
|
||||
|
||||
//获取url地址根目录 当前taomcat下路径
|
||||
function getRootPath(){
|
||||
var pathName = window.location.pathname.substring(1);
|
||||
// var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
|
||||
return window.location.protocol + '//' + window.location.host;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden;">
|
||||
<div id="main" style="height:100%;width:100%;padding-top:30px;padding-left:10px;padding-right:10px;">
|
||||
<div style="height:100%;width:100%;">
|
||||
<div style="float:left;width:100%;height:92px;background: #023354;border-radius: 10px;">
|
||||
<!-- <div style="float:left;width:80px;height:100%;">
|
||||
<div style="float:left;width:80px;height:60px;padding-left: 18px;padding-right: 18px;padding-top: 19px;">
|
||||
<img id="Image1" src="" style="z-index:998;position:relative;height:100%;width:100%;"/>
|
||||
</div>
|
||||
<div style="float:left;width:80px;height:32px;padding-top:5px;text-align: center;color: #dbeeff;font-size: 16px;">
|
||||
原水水质
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="float:left;width:calc((100% - 160px)*0.5);height:100%;">
|
||||
<table id="table1" style="width: 100%;height: 100%;">
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div style="float:left;width:80px;height:100%;">
|
||||
<div style="float:left;width:80px;height:60px;padding-left: 18px;padding-right: 18px;padding-top: 19px;">
|
||||
<img id="Image2" src="" style="z-index:998;position:relative;height:100%;width:100%;"/>
|
||||
</div>
|
||||
<div style="float:left;width:80px;height:32px;padding-top:5px;text-align: center;color: #dbeeff;font-size: 16px;">
|
||||
出水水质
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="float:left;width:calc((100% - 160px)*0.5);height:100%;">
|
||||
<table id="table2" style="width: 100%;height: 100%;">
|
||||
</table>
|
||||
</div> -->
|
||||
<div style="float:left;width:100px;height:100%;padding-left: 18px;padding-right: 18px;padding-top: 19px;">
|
||||
<img id="Image" src="" style="z-index:998;position:relative;"/>
|
||||
</div>
|
||||
<div style="float:left;width:calc(100% - 100px);height:100%;">
|
||||
<table id="table" style="width:100%;height:100%;">
|
||||
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:500px;margin-top: 10px;">
|
||||
<img id="Image3" src="" style="z-index:998;position:relative;width:100%;height:100%"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
367
WebRoot/jsp/visual/modules/bigScreen_processDrawing5.jsp
Normal file
367
WebRoot/jsp/visual/modules/bigScreen_processDrawing5.jsp
Normal file
@ -0,0 +1,367 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<%@page import="com.sipai.entity.visual.JspElement"%>
|
||||
<%request.setAttribute("Type_GetValue", JspElement.Type_GetValue); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_GetHourHistory); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_Get7dayHistory); %>
|
||||
<%request.setAttribute("Type_GetModbus", JspElement.Type_GetModbus); %>
|
||||
<%request.setAttribute("Type_GetHttp", JspElement.Type_GetHttp); %>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<title></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<!-- <script type="text/javascript" src="<%=request.getContextPath()%>/JS/tableScroll.js" charset="utf-8"></script> -->
|
||||
<style type="text/css">
|
||||
@keyframes dash {
|
||||
to {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
|
||||
/* 请求数据 */
|
||||
function getValue() {
|
||||
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
|
||||
if(data!=''){
|
||||
var table01Num = 0;
|
||||
var table01Html = "";
|
||||
table01Html+="<thead style='display:none'><tr><th>名称</th><th>内容</th><th>单位</th></tr></thead>";
|
||||
|
||||
var table02Num = 0;
|
||||
var table02Html = "";
|
||||
table02Html+="<thead style='display:none'><tr><th>名称</th><th>内容</th><th>单位</th></tr></thead>";
|
||||
|
||||
var table11Num = 0;
|
||||
var table11Html = "";
|
||||
table11Html+="<thead style='display:none'><tr><th>名称</th><th>内容</th><th>单位</th></tr></thead>";
|
||||
table11Html+="<tr style='height:23px;'>";
|
||||
table11Html+="</tr>";
|
||||
|
||||
var table31Html = "";
|
||||
table31Html+="<thead ><tr style='width:100%;height:23px;color: #dbeeff;'></th><th style='text-align:center;' colspan='3'>3 A</th></tr></thead>";
|
||||
|
||||
var table32Html = "";
|
||||
table32Html+="<thead ><tr style='width:100%;height:23px;color: #dbeeff;'></th><th style='text-align:center;' colspan='3'>3 B</th></tr></thead>";
|
||||
|
||||
var table33Num = 0;
|
||||
var table33Html = "";
|
||||
table33Html+="<thead style='display:none'><tr><th>名称</th><th>内容</th><th>单位</th></tr></thead>";
|
||||
table33Html+="<tr style='height:23px;'></tr>";
|
||||
|
||||
var table41Num = 0;
|
||||
var table41Html = "";
|
||||
table41Html+="<thead style='display:none'><tr><th>名称</th><th>内容</th><th>单位</th></tr></thead>";
|
||||
|
||||
for(var i=0;i<data.length;i++){
|
||||
|
||||
var value=0;
|
||||
if(data[i].visualCacheData!=null){
|
||||
value=data[i].visualCacheData.value;
|
||||
}
|
||||
var unit="";
|
||||
if(data[i].mPoint!=null){
|
||||
unit=data[i].mPoint.unit;
|
||||
}
|
||||
value=value.toFixed(2);
|
||||
value=numOutput(value);
|
||||
|
||||
var td = "<td style='width: 35%;color: #dbeeff;font-size: 14px;'>"+data[i].name+"</td>";
|
||||
var td2 = "<td style='width: 45%;color: #69f6f9;font-size: 14px;text-align:right;padding-right:5px;'>"+value+"</td>";
|
||||
var td3 = "<td style='width: 20%;color: #69f6f9;font-size: 14px;padding-right:5px;'>"+unit+"</td>";
|
||||
|
||||
if(data[i].elementCode=="table0-1"){
|
||||
table01Html+="<tr style='height:21px;'>";
|
||||
table01Html+=td;
|
||||
table01Html+=td2;
|
||||
table01Html+=td3;
|
||||
table01Html+="</tr>";
|
||||
table01Num++;
|
||||
}else if(data[i].elementCode=="table0-2"){
|
||||
table02Html+="<tr style='height:21px;'>";
|
||||
table02Html+=td;
|
||||
table02Html+=td2;
|
||||
table02Html+=td3;
|
||||
table02Html+="</tr>";
|
||||
table02Num++;
|
||||
}else if(data[i].elementCode=="table1-1"){
|
||||
table11Html+="<tr style='height:23px;'>";
|
||||
table11Html+=td;
|
||||
table11Html+=td2;
|
||||
table11Html+=td3;
|
||||
table11Html+="</tr>";
|
||||
table11Num++;
|
||||
}else if(data[i].elementCode=="table3-1"){
|
||||
table31Html+="<tr style='height:23px;'>";
|
||||
table31Html+=td;
|
||||
table31Html+=td2;
|
||||
table31Html+=td3;
|
||||
table31Html+="</tr>";
|
||||
}else if(data[i].elementCode=="table3-2"){
|
||||
table32Html+="<tr style='height:23px;'>";
|
||||
table32Html+=td;
|
||||
table32Html+=td2;
|
||||
table32Html+=td3;
|
||||
table32Html+="</tr>";
|
||||
}else if(data[i].elementCode=="table3-3"){
|
||||
table33Html+="<tr style='height:23px;'>";
|
||||
table33Html+=td;
|
||||
table33Html+=td2;
|
||||
table33Html+=td3;
|
||||
table33Html+="</tr>";
|
||||
table33Num++;
|
||||
}else if(data[i].elementCode=="table4-1"){
|
||||
table41Html+="<tr style='height:21px;'>";
|
||||
table41Html+=td;
|
||||
table41Html+=td2;
|
||||
table41Html+=td3;
|
||||
table41Html+="</tr>";
|
||||
table41Num++;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
if(table01Num<4){
|
||||
for(var n=0;n<(4-table01Num);n++){
|
||||
table01Html+="<tr style='height:23px;'>";
|
||||
table01Html+="</tr>";
|
||||
}
|
||||
}
|
||||
$("#table0-1").html(table01Html);
|
||||
|
||||
if(table02Num<4){
|
||||
for(var n=0;n<(4-table02Num);n++){
|
||||
table02Html+="<tr style='height:23px;'>";
|
||||
table02Html+="</tr>";
|
||||
}
|
||||
}
|
||||
$("#table0-2").html(table02Html);
|
||||
|
||||
if(table11Num<3){
|
||||
for(var n=0;n<(3-table11Num);n++){
|
||||
table11Html+="<tr style='height:23px;'>";
|
||||
table11Html+="</tr>";
|
||||
}
|
||||
}
|
||||
$("#table1-1").html(table11Html);
|
||||
|
||||
|
||||
$("#table3-1").html(table31Html);
|
||||
$("#table3-2").html(table32Html);
|
||||
|
||||
if(table33Num<3){
|
||||
for(var n=0;n<(3-table33Num);n++){
|
||||
table33Html+="<tr style='height:23px;'>";
|
||||
table33Html+="</tr>";
|
||||
}
|
||||
}
|
||||
$("#table3-3").html(table33Html);
|
||||
|
||||
|
||||
if(table41Num<4){
|
||||
for(var n=0;n<(4-table41Num);n++){
|
||||
table41Html+="<tr style='height:23px;'>";
|
||||
table41Html+="</tr>";
|
||||
}
|
||||
}
|
||||
$("#table4-1").html(table41Html);
|
||||
|
||||
// if(timeSt=="0"){
|
||||
// // tableScroll('table1-1',150,40,4);
|
||||
// // tableScroll('table1-2',150,40,4);
|
||||
// // tableScroll('table2-1',130,40,4);
|
||||
// // tableScroll('table2-2',130,40,4);
|
||||
// // tableScroll('table2-3',150,40,4);
|
||||
// // tableScroll('table3-1',150,40,4);
|
||||
// }
|
||||
|
||||
}
|
||||
// timeSt="1";
|
||||
}, 'json');
|
||||
|
||||
}
|
||||
|
||||
// function changeDiv(){
|
||||
// if (changeDivId == 'div31' ){
|
||||
// $('#div31').css('opacity','0');
|
||||
// setTimeout(
|
||||
// function()
|
||||
// {
|
||||
// $('#div31').css('display','none');
|
||||
// $('#div32').css('opacity','0');
|
||||
// $('#div32').css('display','block');
|
||||
|
||||
// setTimeout(
|
||||
// function()
|
||||
// {
|
||||
// $('#div32').css('opacity','1');
|
||||
// }, 100);
|
||||
// changeDivId="div32";
|
||||
|
||||
// }, 2000);
|
||||
|
||||
// }else{
|
||||
// $('#div32').css('opacity','0');
|
||||
// setTimeout(
|
||||
// function()
|
||||
// {
|
||||
// $('#div32').css('display','none');
|
||||
// $('#div31').css('opacity','0');
|
||||
// $('#div31').css('display','block');
|
||||
|
||||
// setTimeout(
|
||||
// function()
|
||||
// {
|
||||
// $('#div31').css('opacity','1');
|
||||
// }, 100);
|
||||
// changeDivId="div31";
|
||||
|
||||
// }, 2000);
|
||||
|
||||
// }
|
||||
// }
|
||||
|
||||
var changeDivId="div31";
|
||||
/* 定时器 */
|
||||
setInterval(getValue, 300000); //每5分钟切换
|
||||
// setInterval(changeDiv, 8000); //每8秒切换
|
||||
// setInterval(getValue, 3600000); //每一小时切换
|
||||
|
||||
// var timeSt="0";
|
||||
/* 初始化 */
|
||||
$(function () {
|
||||
if('${param.backgroundColor}'=='transparent'){
|
||||
document.body.style.backgroundColor = '${param.backgroundColor}';
|
||||
}else{
|
||||
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
|
||||
}
|
||||
document.getElementById("main").style.width = document.documentElement.clientWidth + "px";
|
||||
document.getElementById("main").style.height = (document.documentElement.clientHeight) + "px";
|
||||
|
||||
document.getElementById("Image1").src = ""+getRootPath()+"/images/大屏/原水水质.png";
|
||||
document.getElementById("Image2").src = ""+getRootPath()+"/images/大屏/进水水质.png";
|
||||
// document.getElementById("Image3").src = ""+getRootPath()+"/images/大屏/岳麓大屏1工艺图.png";
|
||||
|
||||
getValue();
|
||||
//console.log("height",document.body.scrollHeight);
|
||||
});
|
||||
|
||||
//获取url地址根目录 当前taomcat下路径
|
||||
function getRootPath(){
|
||||
var pathName = window.location.pathname.substring(1);
|
||||
// var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
|
||||
return window.location.protocol + '//' + window.location.host;
|
||||
}
|
||||
|
||||
function numOutput(num){
|
||||
var numpart=String(num).split(".");//将数字通过jq split用小数点分隔为数组对象
|
||||
numpart[0]=numpart[0].replace(new RegExp('(\\d)(?=(\\d{3})+$)','ig'),"$1,");
|
||||
//将数组对象第一个数据(整数部分)通过正则表达式每三位用逗号分隔
|
||||
return numpart.join(".");//把数组通过join方法用.进行拼接
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden;">
|
||||
<div id="main" style="height:100%;width:100%;padding-top:10px;padding-left:10px;padding-right:10px;">
|
||||
<div style="height:100%;width:100%;padding-left: 10px;padding-right: 30px;">
|
||||
<div style="float:left;width:100%;height:92px;background: #094873;border-radius: 10px;">
|
||||
<div style="float:left;width:70px;height:100%;background: #023354;border-radius:10px 0px 0px 10px;">
|
||||
<div style="float:left;width:100%;height:60px;padding-left: 13px;padding-right: 13px;padding-top: 19px;">
|
||||
<img id="Image1" src="" style="z-index:998;position:relative;height:100%;width:100%;"/>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:32px;padding-top:5px;text-align: center;color: #dbeeff;font-size: 14px;">
|
||||
原水
|
||||
</div>
|
||||
</div>
|
||||
<div style="float:left;width:calc((100% - 140px - 66px)*0.27);height:100%;background: #023354;border-radius:0px 10px 10px 0px;padding-top: 5px;padding-bottom: 5px;">
|
||||
<div style="float:left;width:50%;height:100%;padding-left: 10px;padding-right: 5px;">
|
||||
<table id="table0-1" style="width: 100%;height: 100%;"></table>
|
||||
</div>
|
||||
<div style="float:left;width:50%;height:100%;padding-left: 10px;padding-right: 5px;">
|
||||
<table id="table0-2" style="width: 100%;height: 100%;"></table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="float:left;width:70px;height:100%;">
|
||||
<div style="float:left;width:100%;height:60px;padding-left: 13px;padding-right: 13px;padding-top: 19px;">
|
||||
<img id="Image2" src="" style="z-index:998;position:relative;height:100%;width:100%;"/>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:32px;padding-top:5px;text-align: center;color: #dbeeff;font-size: 14px;">
|
||||
出水
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="float:left;width:22px;height:100%;background: rgba(193,217,238,0.53);padding-left: 4px;padding-top: 10px;">
|
||||
<div style="float:left;width: 14px;
|
||||
height: 62px;
|
||||
opacity: 1;
|
||||
font-size: 14px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN-Regular;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
color: #c1d9ee;
|
||||
line-height: 24px;">1系统</div>
|
||||
</div>
|
||||
|
||||
<div style="float:left;width:calc((100% - 140px - 66px)*0.146);height:100%;padding-left: 15px;padding-right: 15px;">
|
||||
<table id="table1-1" style="width: 100%;height: 100%;"></table>
|
||||
</div>
|
||||
|
||||
<div style="float:left;width:22px;height:100%;background: rgba(193,217,238,0.53);padding-left: 4px;padding-top: 10px;">
|
||||
<div style="float:left;width: 14px;
|
||||
height: 62px;
|
||||
opacity: 1;
|
||||
font-size: 14px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN-Regular;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
color: #c1d9ee;
|
||||
line-height: 24px;">3系统</div>
|
||||
</div>
|
||||
|
||||
<div id="div31" style="float:left;width:calc((100% - 140px - 66px)*0.146);height:100%;padding-left: 15px;padding-right: 15px;display:block;transition-duration:2s;opacity: 1;border-right: 1px solid #C1D9EE;">
|
||||
<table id="table3-1" style="width: 100%;height: 100%;"></table>
|
||||
</div>
|
||||
|
||||
<div id="div32" style="float:left;width:calc((100% - 140px - 66px)*0.146);height:100%;padding-left: 15px;padding-right: 15px;display:block;transition-duration:2s;opacity: 1;border-right: 1px solid #C1D9EE;">
|
||||
<table id="table3-2" style="width: 100%;height: 100%;"></table>
|
||||
</div>
|
||||
|
||||
<div style="float:left;width:calc((100% - 140px - 66px)*0.146);height:100%;padding-left: 15px;padding-right: 15px;">
|
||||
<table id="table3-3" style="width: 100%;height: 100%;"></table>
|
||||
</div>
|
||||
|
||||
<div style="float:left;width:22px;height:100%;background: rgba(193,217,238,0.53);padding-left: 4px;padding-top: 10px;">
|
||||
<div style="float:left;width: 14px;
|
||||
height: 62px;
|
||||
opacity: 1;
|
||||
font-size: 14px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN-Regular;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
color: #c1d9ee;
|
||||
line-height: 24px;">4系统</div>
|
||||
</div>
|
||||
|
||||
<div style="float:left;width:calc((100% - 140px - 66px)*0.146);height:100%;padding-left: 15px;padding-right: 15px;padding-top: 5px;padding-bottom: 5px;">
|
||||
<table id="table4-1" style="width: 100%;height: 100%;"></table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
118
WebRoot/jsp/visual/modules/bigScreen_processDrawing6.jsp
Normal file
118
WebRoot/jsp/visual/modules/bigScreen_processDrawing6.jsp
Normal file
@ -0,0 +1,118 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<%@page import="com.sipai.entity.visual.JspElement"%>
|
||||
<%request.setAttribute("Type_GetValue", JspElement.Type_GetValue); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_GetHourHistory); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_Get7dayHistory); %>
|
||||
<%request.setAttribute("Type_GetModbus", JspElement.Type_GetModbus); %>
|
||||
<%request.setAttribute("Type_GetHttp", JspElement.Type_GetHttp); %>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<title></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<script type="text/javascript">
|
||||
|
||||
/* 请求数据 */
|
||||
function getValue() {
|
||||
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
|
||||
if(data!=''){
|
||||
var table1Html="";
|
||||
var table2Html="";
|
||||
for(var i=0;i<data.length;i++){
|
||||
if(data[i].elementCode=="img"){
|
||||
document.getElementById("Image").src = ""+getRootPath()+""+data[i].valueUrl+"";
|
||||
}else if(data[i].elementCode=="in"){
|
||||
if(data[i].getValueType=="getText"){
|
||||
table1Html+="<td style=\"color: #ffffff;\">"+numOutput(data[i].valueUrl)+"</td>";
|
||||
}else if(data[i].getValueType=="getValue"){
|
||||
table1Html+="<td style=\"color: #ffffff;\">"+numOutput(data[i].mPoint.parmvalue)+"</td>";
|
||||
}
|
||||
}else if(data[i].elementCode=="out"){
|
||||
if(data[i].getValueType=="getText"){
|
||||
table2Html+="<td style=\"color: #ffffff;\">"+numOutput(data[i].valueUrl)+"</td>";
|
||||
}else{
|
||||
table2Html+="<td style=\"color: #ffffff;\">"+numOutput(data[i].mPoint.parmvalue)+"</td>";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
var tableHtml="";
|
||||
tableHtml+="<tr style=\"font-size: 18px;color: #dbeeff;text-align: center;\">";
|
||||
tableHtml+="<td style=\"width:40px;\">水质</td>";
|
||||
tableHtml+="<td style=\"width:128px;\">COD</td>";
|
||||
tableHtml+="<td style=\"width:128px;\">NH3_N</td>";
|
||||
tableHtml+="<td style=\"width:128px;\">pH</td>";
|
||||
tableHtml+="<td style=\"width:128px;\">TP(m3/h)</td>";
|
||||
tableHtml+="<td style=\"width:128px;\">TN</td>";
|
||||
tableHtml+="<td style=\"width:128px;\">瞬时流量</td>";
|
||||
tableHtml+="<td style=\"width:128px;\">今日累计</td>";
|
||||
tableHtml+="<td style=\"width:128px;\">昨日累计</td>";
|
||||
tableHtml+="</tr>";
|
||||
tableHtml+="<tr style=\"font-size: 18px;text-align: center;\">";
|
||||
tableHtml+="<td style=\"color: #1CBEC5;\">进\</td>";
|
||||
tableHtml+=table1Html;
|
||||
tableHtml+="</tr>";
|
||||
tableHtml+="<tr style=\"font-size: 18px;color: #1CBEC5;text-align: center;\">";
|
||||
tableHtml+="<td style=\"color: #1CBEC5;\">出\</td>";
|
||||
tableHtml+=table2Html;
|
||||
tableHtml+="</tr>";
|
||||
$('#table').html(tableHtml);
|
||||
}, 'json');
|
||||
}
|
||||
|
||||
/* 定时器 */
|
||||
setInterval(getValue, 300000); //每5分钟切换
|
||||
// setInterval(getValue, 3600000); //每一小时切换
|
||||
|
||||
/* 初始化 */
|
||||
$(function () {
|
||||
if('${param.backgroundColor}'=='transparent'){
|
||||
document.body.style.backgroundColor = '${param.backgroundColor}';
|
||||
}else{
|
||||
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
|
||||
}
|
||||
document.getElementById("main").style.width = document.documentElement.clientWidth + "px";
|
||||
document.getElementById("main").style.height = (document.documentElement.clientHeight) + "px";
|
||||
|
||||
getValue();
|
||||
//console.log("height",document.body.scrollHeight);
|
||||
});
|
||||
|
||||
//获取url地址根目录 当前taomcat下路径
|
||||
function getRootPath(){
|
||||
var pathName = window.location.pathname.substring(1);
|
||||
// var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
|
||||
return window.location.protocol + '//' + window.location.host;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden;">
|
||||
<div id="main" style="height:100%;width:100%;padding-top:30px;padding-left:10px;padding-right:10px;">
|
||||
<div style="height:100%;width:100%;">
|
||||
<div style="float:left;width:100%;height:120px;">
|
||||
<div style="float:left;width:100%;height:100%;">
|
||||
<table id="table" style="width:100%;height:100%;">
|
||||
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:calc(100% - 120px);margin-top: 10px;">
|
||||
<img id="Image" src="" style="z-index:998;position:relative;width:100%;height:100%;"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
248
WebRoot/jsp/visual/modules/bigScreen_processParameters.jsp
Normal file
248
WebRoot/jsp/visual/modules/bigScreen_processParameters.jsp
Normal file
@ -0,0 +1,248 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<%@page import="com.sipai.entity.visual.JspElement"%>
|
||||
<%request.setAttribute("Type_GetValue", JspElement.Type_GetValue); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_GetHourHistory); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_Get7dayHistory); %>
|
||||
<%request.setAttribute("Type_GetModbus", JspElement.Type_GetModbus); %>
|
||||
<%request.setAttribute("Type_GetHttp", JspElement.Type_GetHttp); %>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<title></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<script type="text/javascript">
|
||||
|
||||
//获取url地址根目录 当前taomcat下路径
|
||||
function getRootPath(){
|
||||
var pathName = window.location.pathname.substring(1);
|
||||
// var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
|
||||
return window.location.protocol + '//' + window.location.host;
|
||||
}
|
||||
|
||||
function getLocalTime(nS) {
|
||||
return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
|
||||
}
|
||||
|
||||
var color=[
|
||||
"#2ec7c9",
|
||||
"#b6a2de",
|
||||
"#5ab1ef",
|
||||
"#ffb980",
|
||||
"#d87a80",
|
||||
"#8d98b3",
|
||||
"#e5cf0d",
|
||||
"#97b552",
|
||||
"#95706d",
|
||||
"#dc69aa",
|
||||
"#07a2a4",
|
||||
"#9a7fd1",
|
||||
"#588dd5",
|
||||
"#f5994e",
|
||||
"#c05050",
|
||||
"#59678c",
|
||||
"#c9ab00",
|
||||
"#7eb00a",
|
||||
"#6f5553",
|
||||
"#c14089"
|
||||
];
|
||||
var mychart="";
|
||||
/* 请求数据 */
|
||||
function getValue() {
|
||||
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
|
||||
// console.log(data);
|
||||
if(data!=null&&data.length>0){
|
||||
var series=[];
|
||||
var legenddata=[];
|
||||
var seriesData=[];
|
||||
var linenum=0;
|
||||
for(var i=0;i<data.length;i++){
|
||||
if(data[i].elementCode=="line"){
|
||||
seriesData.push(data[i].mPointHistory);
|
||||
legenddata.push(data[i].name);
|
||||
series.push({
|
||||
// data:data[i].mPointHistory,
|
||||
symbol:'none',
|
||||
name:data[i].name,
|
||||
type:'line'
|
||||
|
||||
});
|
||||
linenum++;
|
||||
}
|
||||
}
|
||||
|
||||
mychart=echarts.init(document.getElementById('chart'));
|
||||
var option = {
|
||||
color:color,
|
||||
animation:false,
|
||||
legend: {
|
||||
data: legenddata,
|
||||
left:'10%',
|
||||
// padding:[
|
||||
// 15, // 上
|
||||
// 15, // 右
|
||||
// 15, // 下
|
||||
// 15 // 左
|
||||
// ],
|
||||
textStyle:{
|
||||
color:'#FFFFFF'
|
||||
}
|
||||
},
|
||||
grid:{
|
||||
left: '4%', // 与容器左侧的距离
|
||||
// right: '1%', // 与容器右侧的距离
|
||||
top: '15%', // 与容器顶部的距离
|
||||
bottom: '5%', // 与容器底部的距离
|
||||
containLabel:true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'time',
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#FFFFFF' //更改坐标轴文字颜色
|
||||
},
|
||||
// formatter:function(val){
|
||||
// var timestring=String(val).substring(0,11);
|
||||
// console.log(getLocalTime(timestring));
|
||||
// // console.log(getLocalTime(val.substring(0,11)));
|
||||
// return getLocalTime(timestring);
|
||||
// }
|
||||
},
|
||||
axisLine:{
|
||||
show:false,
|
||||
lineStyle:{
|
||||
color:'#FFFFFF' //更改坐标轴颜色
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false//是否显示分隔线。默认数值轴显示，类目轴不显示。
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type : 'value',
|
||||
name : false,
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#FFFFFF' //更改坐标轴文字颜色
|
||||
}
|
||||
},
|
||||
axisLine:{
|
||||
show:false,
|
||||
lineStyle:{
|
||||
color:'#FFFFFF' //更改坐标轴颜色
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: true,//是否显示分隔线。默认数值轴显示，类目轴不显示。
|
||||
lineStyle:{
|
||||
color:'#262952',
|
||||
type:'dashed'
|
||||
}
|
||||
},
|
||||
scale:true//设置成 true 后坐标刻度不会强制包含零刻度。
|
||||
},
|
||||
series: series
|
||||
};
|
||||
// console.log(option);
|
||||
mychart.setOption(option,true);
|
||||
|
||||
appendDataToChart(seriesData);
|
||||
|
||||
var textnum=data.length-linenum;
|
||||
var textHtml="";
|
||||
var unit="";
|
||||
var ctextnum=0;
|
||||
for(var m=0;m<data.length;m++){
|
||||
if(data[m].elementCode!="line"){
|
||||
if(ctextnum==0){
|
||||
unit="";
|
||||
}else if(ctextnum==1){
|
||||
unit="%";
|
||||
}else if(ctextnum==2){
|
||||
unit="%";
|
||||
}
|
||||
textHtml+="<div style='float:left;width:100%;height: calc((100vh - 60px - 15px)/"+textnum+");'>";
|
||||
textHtml+="<div style='float:left;width:100%;height: calc((100vh - 60px - 15px)/"+textnum+"/2);line-height: calc((100vh - 60px - 15px)/"+textnum+"/2);font-size: 20px;font-family: Helvetica;text-align: center;color: #ffffff;'>"+data[m].name+"</div>";
|
||||
textHtml+="<div style='float:left;width:100%;height: calc((100vh - 60px - 15px)/"+textnum+"/2);line-height: calc((100vh - 60px - 15px)/"+textnum+"/2);font-size: 24px;font-family: Helvetica;text-align: center;color: #69F6F9;'>"+(data[m].mPoint.parmvalue).toFixed(1)+""+unit+"</div>";
|
||||
// textHtml+="";
|
||||
textHtml+="</div>";
|
||||
ctextnum++;
|
||||
}
|
||||
}
|
||||
$('#text').html(textHtml);
|
||||
|
||||
}
|
||||
}, 'json');
|
||||
}
|
||||
|
||||
function appendDataToChart(seriesData){
|
||||
if(seriesData!=null&&seriesData.length>0){
|
||||
for(var i=0;i<seriesData.length;i++){
|
||||
var data=[];
|
||||
for(var j=0;j<seriesData[i].length;j++){
|
||||
var datas=[];
|
||||
datas.push(seriesData[i][j].measuredt);
|
||||
datas.push(seriesData[i][j].parmvalue);
|
||||
data.push(datas);
|
||||
}
|
||||
mychart.appendData({
|
||||
seriesIndex:i,
|
||||
data:data
|
||||
});
|
||||
mychart.resize();
|
||||
// console.log(data);
|
||||
}
|
||||
}
|
||||
// console.log(seriesData);
|
||||
}
|
||||
|
||||
/* 定时器 */
|
||||
//setInterval(change, 60000); //每1分钟切换
|
||||
setInterval(getValue, 3600000); //每一小时切换
|
||||
|
||||
/* 初始化 */
|
||||
$(function () {
|
||||
if('${param.backgroundColor}'=='transparent'){
|
||||
document.body.style.backgroundColor = '${param.backgroundColor}';
|
||||
}else{
|
||||
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
|
||||
}
|
||||
document.getElementById("main").style.width = document.documentElement.clientWidth + "px";
|
||||
document.getElementById("main").style.height = (document.documentElement.clientHeight-15) + "px";
|
||||
|
||||
document.getElementById("backImage").src = ""+getRootPath()+"/images/大屏/工艺参数.png";
|
||||
|
||||
getValue();
|
||||
//console.log("height",document.body.scrollHeight);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden">
|
||||
<div style="height:100%;width:100%;padding-top:15px;">
|
||||
<div id="main" style="height:100%;width:100%;background:rgba(19,32,85,0.27);border-radius: 8px;">
|
||||
<div style='float:left;width:50%;height:60px;'><img id="backImage" src="" style="z-index:-1;position:relative;height:100%;width: 100%;"/></div>
|
||||
<div id="chart" style="float:left;width:70%;height: calc(100vh - 60px - 15px);"></div>
|
||||
<div id="text" style="float:left;width:30%;height: calc(100vh - 60px - 15px);"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
84
WebRoot/jsp/visual/modules/bigScreen_productionData.jsp
Normal file
84
WebRoot/jsp/visual/modules/bigScreen_productionData.jsp
Normal file
@ -0,0 +1,84 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<%@page import="com.sipai.entity.visual.JspElement"%>
|
||||
<%request.setAttribute("Type_GetValue", JspElement.Type_GetValue); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_GetHourHistory); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_Get7dayHistory); %>
|
||||
<%request.setAttribute("Type_GetModbus", JspElement.Type_GetModbus); %>
|
||||
<%request.setAttribute("Type_GetHttp", JspElement.Type_GetHttp); %>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<title></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<script type="text/javascript">
|
||||
|
||||
/* 请求数据 */
|
||||
function getbigScreen_productionDataValue() {
|
||||
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
|
||||
if(data!=''){
|
||||
// console.log(data);
|
||||
var html="";
|
||||
for(var i=0;i<data.length;i++){
|
||||
if(i<16){
|
||||
var topStyle="";
|
||||
if(i==6||i==11){
|
||||
topStyle="border-top:1px solid #BDF9FF;";
|
||||
}
|
||||
var pv=0;
|
||||
if(data[i].mPoint!=null){
|
||||
pv=data[i].mPoint.parmvalue;
|
||||
}
|
||||
html+="<div style='float:left;width:100%;height:calc(100%/16);'>";
|
||||
html+="<div onclick=\"showHis('"+data[i].valueUrl+"','"+data[i].unitId+"');\" title='"+data[i].name+"' style='cursor: pointer;float:left;width:60%;height:100%;line-height:calc(300%);color: #6998c3;overflow:hidden;text-overflow: ellipsis;white-space:nowrap;"+topStyle+"'>"+data[i].name+"</div>";
|
||||
html+="<div onclick=\"showHis('"+data[i].valueUrl+"','"+data[i].unitId+"');\" title='"+pv+"' style='cursor: pointer;float:left;width:40%;height:100%;line-height:calc(300%);text-align:right;color: #ffffff;overflow:hidden;text-overflow: ellipsis;white-space:nowrap;"+topStyle+"'>"+numOutput(pv)+"</div>";
|
||||
html+="</div>";
|
||||
}
|
||||
}
|
||||
$('#bigScreen_productionDatabackImagedata').html(html);
|
||||
}
|
||||
}, 'json');
|
||||
}
|
||||
|
||||
/* 定时器 */
|
||||
//setInterval(change, 60000); //每1分钟切换
|
||||
setInterval(getbigScreen_productionDataValue, 300000); //每5分钟切换
|
||||
|
||||
/* 初始化 */
|
||||
$(function () {
|
||||
if('${param.backgroundColor}'=='transparent'){
|
||||
document.body.style.backgroundColor = '${param.backgroundColor}';
|
||||
}else{
|
||||
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
|
||||
}
|
||||
// document.getElementById("main").style.width = document.documentElement.clientWidth + "px";
|
||||
// document.getElementById("main").style.height = (document.documentElement.clientHeight) + "px";
|
||||
|
||||
document.getElementById("bigScreen_productionDatabackImage").src = ""+getRootPath()+"/images/大屏/生产数据.png";
|
||||
|
||||
getbigScreen_productionDataValue();
|
||||
//console.log("height",document.body.scrollHeight);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden">
|
||||
<div id="bigScreen_productionDatamain" style="height:100%;width:100%;padding-top:10px;padding-left:10px;padding-right:10px;">
|
||||
<div style="height:100%;width:100%;background:#16314c;border-radius: 8px;">
|
||||
<div style="float: left;width: 100%;height:40px;">
|
||||
<div style="float: left;width:22px;height:24px;line-height:40px;text-align:center;margin-left: 20px;"><img id="bigScreen_productionDatabackImage" src="" style="z-index:999;position:relative;height:100%;width:100%;"/></div>
|
||||
<div style="float: left;height:40px;line-height:40px;text-align:left;padding-left: 25px;font-size: 20px;color: #8ac2f6;font-family: SimHei;">生产数据</div>
|
||||
</div>
|
||||
<div id="bigScreen_productionDatabackImagedata" style="float: left;width: 100%;height:calc(100% - 40px);padding-left:10px;padding-right:10px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
211
WebRoot/jsp/visual/modules/bigScreen_productionLoad.jsp
Normal file
211
WebRoot/jsp/visual/modules/bigScreen_productionLoad.jsp
Normal file
@ -0,0 +1,211 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<%@page import="com.sipai.entity.visual.JspElement"%>
|
||||
<%request.setAttribute("Type_GetValue", JspElement.Type_GetValue); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_GetHourHistory); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_Get7dayHistory); %>
|
||||
<%request.setAttribute("Type_GetModbus", JspElement.Type_GetModbus); %>
|
||||
<%request.setAttribute("Type_GetHttp", JspElement.Type_GetHttp); %>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<title></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<script type="text/javascript">
|
||||
|
||||
/* 请求数据 */
|
||||
function getValue() {
|
||||
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
|
||||
// console.log(data);
|
||||
if(data!=''){
|
||||
var todayWater="";
|
||||
for(var i=0;i<data.length;i++){
|
||||
if(data[i].elementCode=="todayWater"){
|
||||
if(data[i].mPointHistory.length>0){
|
||||
if(data[i].mPointHistory[0]!=null){
|
||||
$("#todayWater").text(((data[i].mPointHistory[0].parmvalue)/10000).toFixed(2));
|
||||
todayWater=data[i].mPointHistory[0].parmvalue;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
getchart('chart',(Number(todayWater)/(1000000/24)*100).toFixed(1),'','#36FFF9');
|
||||
|
||||
}
|
||||
}, 'json');
|
||||
}
|
||||
|
||||
function numOutput(num){
|
||||
var numpart=String(num).split(".");//将数字通过jq split用小数点分隔为数组对象
|
||||
numpart[0]=numpart[0].replace(new RegExp('(\\d)(?=(\\d{3})+$)','ig'),"$1,");
|
||||
//将数组对象第一个数据(整数部分)通过正则表达式每三位用逗号分隔
|
||||
return numpart.join(".");//把数组通过join方法用.进行拼接
|
||||
}
|
||||
|
||||
/* 定时器 */
|
||||
//setInterval(change, 60000); //每1分钟切换
|
||||
setInterval(getValue, 3600000); //每一小时切换
|
||||
|
||||
/* 初始化 */
|
||||
$(function () {
|
||||
if('${param.backgroundColor}'=='transparent'){
|
||||
document.body.style.backgroundColor = '${param.backgroundColor}';
|
||||
}else{
|
||||
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
|
||||
}
|
||||
document.getElementById("main").style.width = document.documentElement.clientWidth + "px";
|
||||
document.getElementById("main").style.height = (document.documentElement.clientHeight) + "px";
|
||||
|
||||
document.getElementById("titleImage").src = ""+getRootPath()+"/images/大屏/大屏标题文字背景.png";
|
||||
|
||||
getValue();
|
||||
//console.log("height",document.body.scrollHeight);
|
||||
});
|
||||
|
||||
//获取url地址根目录 当前taomcat下路径
|
||||
function getRootPath(){
|
||||
var pathName = window.location.pathname.substring(1);
|
||||
// var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
|
||||
return window.location.protocol + '//' + window.location.host;
|
||||
}
|
||||
|
||||
function getchart(id,value,title,color){
|
||||
var myChart = echarts.init(document.getElementById(id));
|
||||
var option = {
|
||||
title: {
|
||||
text: value,
|
||||
textStyle: {
|
||||
color: '#36FFF9',
|
||||
fontSize: 20
|
||||
},
|
||||
subtext: "%",
|
||||
subtextStyle: {
|
||||
color: '#36FFF9',
|
||||
fontSize: 14
|
||||
},
|
||||
itemGap: 4, // 主副标题距离
|
||||
left: 'center',
|
||||
top: '35%'
|
||||
},
|
||||
angleAxis: {
|
||||
max: 100, // 满分
|
||||
clockwise: true, // 逆时针
|
||||
// 隐藏刻度线
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
radiusAxis: {
|
||||
type: 'category',
|
||||
// 隐藏刻度线
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
polar: {
|
||||
center: ['50%', '50%'],
|
||||
radius: '130%' //图形大小
|
||||
},
|
||||
series: [{
|
||||
type: 'bar',
|
||||
data: [{
|
||||
name: '百分比',
|
||||
value: value,
|
||||
itemStyle: {
|
||||
color: color
|
||||
},
|
||||
}],
|
||||
coordinateSystem: 'polar',
|
||||
roundCap: true,
|
||||
barWidth: 8,
|
||||
barGap: '-100%', // 两环重叠
|
||||
z: 2
|
||||
},{ // 灰色环
|
||||
type: 'bar',
|
||||
data: [{
|
||||
value: 100,
|
||||
itemStyle: {
|
||||
color: '#1D4F6D',
|
||||
shadowColor: 'rgba(0, 0, 0, 0.2)',
|
||||
shadowBlur: 2,
|
||||
shadowOffsetY: 2
|
||||
}
|
||||
}],
|
||||
coordinateSystem: 'polar',
|
||||
roundCap: true,
|
||||
barWidth: 14,
|
||||
barGap: '-130%', // 两环重叠
|
||||
z: 1
|
||||
}]
|
||||
};
|
||||
myChart.setOption(option, true);
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden;">
|
||||
<div id="main" style="height:100%;width:100%;padding-top:10px;padding-left:10px;padding-right:10px;">
|
||||
<div style="height:100%;width:100%;">
|
||||
<div style="float:left;width:100%;height:35px;margin-left: 20px;">
|
||||
<div style="float:left;width:194px;height:34px;">
|
||||
<div style="position:absolute;top:12px;left:50px;z-index:999;opacity: 1;font-size: 20px;font-family: Microsoft YaHei, Microsoft YaHei-Regular;margin-left:20px;">运行管理</div>
|
||||
<img id="titleImage" src="" style="z-index:998;position:relative;height:100%;width:100%;"/>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float:left;width:100%;height:calc(100% - 35px);padding-top: 10px;">
|
||||
<div style="float:left;width:40%;height:100%;padding-left: 40px;padding-top: 45px;">
|
||||
<table>
|
||||
<tr>
|
||||
<td style="color: #ffffff;text-align: right;font-size: 16px;" colspan="2">制水量</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id="todayWater" style="color: #69f6f9;text-align: left;font-size: 18px;"></td>
|
||||
<td style="color: #69f6f9;text-align: right;font-size: 14px;">万m3/h</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="color: #69f6f9;text-align: left;font-size: 18px;">100</td>
|
||||
<td style="color: #69f6f9;text-align: right;font-size: 14px;">万m3/天</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div style="float:left;width:60%;height:100%;">
|
||||
<div style="float: left;width: 100%;height:30px;text-align: center;line-height: 30px;color: #ffffff;font-size: 20px;">生产负荷</div>
|
||||
<div id="chart" style="float: left;width: 100%;height: calc(100% - 30px);"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
110
WebRoot/jsp/visual/modules/bigScreen_projectOverview.jsp
Normal file
110
WebRoot/jsp/visual/modules/bigScreen_projectOverview.jsp
Normal file
@ -0,0 +1,110 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
<%@page import="com.sipai.entity.visual.JspElement"%>
|
||||
<%request.setAttribute("Type_GetValue", JspElement.Type_GetValue); %>
|
||||
<%request.setAttribute("Type_GetHourHistory", JspElement.Type_GetHourHistory); %>
|
||||
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_Get7dayHistory); %>
|
||||
<%request.setAttribute("Type_GetModbus", JspElement.Type_GetModbus); %>
|
||||
<%request.setAttribute("Type_GetHttp", JspElement.Type_GetHttp); %>
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<title></title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<script type="text/javascript">
|
||||
|
||||
//获取url地址根目录 当前taomcat下路径
|
||||
function getRootPath(){
|
||||
var pathName = window.location.pathname.substring(1);
|
||||
// var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
|
||||
return window.location.protocol + '//' + window.location.host;
|
||||
}
|
||||
|
||||
/* 请求数据 */
|
||||
function getValue() {
|
||||
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
|
||||
// console.log(data);
|
||||
var html="";
|
||||
html+="<div style='float:left;width:50%;height:60px;'><img id='backImage' src='"+getRootPath()+"/images/大屏/项目概览.png' style='z-index:-1;positon:relative;height:100%;width:100%;'/></div>";
|
||||
html+="<div style='float:left;width:100%;height: calc((100vh - 60px - 15px)/3);padding:10px;'>";
|
||||
html+="<div style='float:left;width:50%;height:100%;padding-left:30px;'>";
|
||||
html+="<div style='float:left;width:20%;height:100%;'><img src='"+getRootPath()+"/images/大屏/日期.png' style='z-index:-1;positon:relative;height:90%;'/></div>";
|
||||
html+="<div style='float:left;width:80%;height:50%;font-size: 22px;font-family: Helvetica;text-align: left;color: #ffffff;line-height:calc((100vh - 60px - 60px)/3/2);padding-left:15px;'>"+data[0].name+"</div>";
|
||||
html+="<div style='float:left;width:80%;height:50%;'>";
|
||||
html+="<div style='float:left;height:100%;font-size: 24px;font-family: Helvetica;text-align: left;color: #69f6f9;line-height:calc((100vh - 60px - 60px)/3/2);padding-left:15px;'>"+data[0].valueUrl+" 年</div>";
|
||||
html+="</div>";
|
||||
html+="</div>";
|
||||
html+="<div style='float:left;width:50%;height:100%;padding-left:30px;'>";
|
||||
html+="<div style='float:left;width:20%;height:100%;'><img src='"+getRootPath()+"/images/大屏/运营.png' style='z-index:-1;positon:relative;height:90%;'/></div>";
|
||||
html+="<div style='float:left;width:80%;height:50%;font-size: 22px;font-family: Helvetica;text-align: left;color: #ffffff;line-height:calc((100vh - 60px - 60px)/3/2);padding-left:15px;'>"+data[1].name+"</div>";
|
||||
html+="<div style='float:left;width:80%;height:50%;font-size: 24px;font-family: Helvetica;text-align: left;color: #69f6f9;line-height:calc((100vh - 60px - 60px)/3/2);padding-left:15px;'>"+data[1].valueUrl+"</div>";
|
||||
html+="</div>";
|
||||
html+="</div>";
|
||||
html+="<div style='float:left;width:100%;height: calc((100vh - 60px - 15px)/3);padding:10px;'>";
|
||||
html+="<div style='float:left;width:50%;height:100%;padding-left:30px;'>";
|
||||
html+="<div style='float:left;width:20%;height:100%;'><img src='"+getRootPath()+"/images/大屏/水.png' style='z-index:-1;positon:relative;height:90%;'/></div>";
|
||||
html+="<div style='float:left;width:80%;height:50%;font-size: 22px;font-family: Helvetica;text-align: left;color: #ffffff;line-height:calc((100vh - 60px - 60px)/3/2);padding-left:15px;'>"+data[2].name+"</div>";
|
||||
html+="<div style='float:left;width:80%;height:50%;'>";
|
||||
html+="<div style='float:left;height:100%;font-size: 24px;font-family: Helvetica;text-align: left;color: #69f6f9;line-height:calc((100vh - 60px - 60px)/3/2);padding-left:15px;'>"+data[2].valueUrl+" 万吨/日</div>";
|
||||
html+="</div>";
|
||||
html+="</div>";
|
||||
html+="<div style='float:left;width:50%;height:100%;padding-left:30px;'>";
|
||||
html+="<div style='float:left;width:20%;height:100%;'><img src='"+getRootPath()+"/images/大屏/占地面积.png' style='z-index:-1;positon:relative;height:90%;'/></div>";
|
||||
html+="<div style='float:left;width:80%;height:50%;font-size: 22px;font-family: Helvetica;text-align: left;color: #ffffff;line-height:calc((100vh - 60px - 60px)/3/2);padding-left:15px;'>"+data[3].name+"</div>";
|
||||
html+="<div style='float:left;width:80%;height:50%;'>";
|
||||
html+="<div style='float:left;height:100%;font-size: 24px;font-family: Helvetica;text-align: left;color: #69f6f9;line-height:calc((100vh - 60px - 60px)/3/2);padding-left:15px;'>"+data[3].valueUrl+" 公顷</div>";
|
||||
html+="</div>";
|
||||
html+="</div>";
|
||||
html+="</div>";
|
||||
html+="<div style='float:left;width:100%;height: calc((100vh - 60px - 15px)/3);padding:10px;'>";
|
||||
html+="<div style='float:left;width:50%;height:100%;padding-left:30px;'>";
|
||||
html+="<div style='float:left;width:20%;height:100%;'><img src='"+getRootPath()+"/images/大屏/工艺包.png' style='z-index:-1;positon:relative;height:90%;'/></div>";
|
||||
html+="<div style='float:left;width:80%;height:50%;font-size: 22px;font-family: Helvetica;text-align: left;color: #ffffff;line-height:calc((100vh - 60px - 60px)/3/2);padding-left:15px;'>"+data[4].name+"</div>";
|
||||
html+="<div style='float:left;width:80%;height:50%;font-size: 24px;font-family: Helvetica;text-align: left;color: #69f6f9;line-height:calc((100vh - 60px - 60px)/3/2);padding-left:15px;'>"+data[4].valueUrl+"</div>";
|
||||
html+="</div>";
|
||||
html+="<div style='float:left;width:50%;height:100%;padding-left:30px;'>";
|
||||
html+="<div style='float:left;width:20%;height:100%;'><img src='"+getRootPath()+"/images/大屏/行业排放标准.png' style='z-index:-1;positon:relative;height:90%;'/></div>";
|
||||
html+="<div style='float:left;width:80%;height:50%;font-size: 22px;font-family: Helvetica;text-align: left;color: #ffffff;line-height:calc((100vh - 60px - 60px)/3/2);padding-left:15px;'>"+data[5].name+"</div>";
|
||||
html+="<div style='float:left;width:80%;height:50%;font-size: 24px;font-family: Helvetica;text-align: left;color: #69f6f9;line-height:calc((100vh - 60px - 60px)/3/2);padding-left:15px;'>"+data[5].valueUrl+"</div>";
|
||||
html+="</div>";
|
||||
html+="</div>"
|
||||
$('#main').html(html);
|
||||
}, 'json');
|
||||
}
|
||||
|
||||
/* 定时器 */
|
||||
//setInterval(change, 60000); //每1分钟切换
|
||||
setInterval(getValue, 3600000); //每一小时切换
|
||||
|
||||
/* 初始化 */
|
||||
$(function () {
|
||||
if('${param.backgroundColor}'=='transparent'){
|
||||
document.body.style.backgroundColor = '${param.backgroundColor}';
|
||||
}else{
|
||||
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
|
||||
}
|
||||
document.getElementById("main").style.width = document.documentElement.clientWidth + "px";
|
||||
document.getElementById("main").style.height = (document.documentElement.clientHeight-15) + "px";
|
||||
getValue();
|
||||
//console.log("height",document.body.scrollHeight);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden;padding-top:15px;">
|
||||
<div style="height:100%;width:100%;">
|
||||
<div id="main" style="height:100%;width:100%;background:rgba(19,32,85,0.27);border-radius: 8px;">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user