first commit

This commit is contained in:
2026-01-16 14:13:44 +08:00
commit 903ff8d495
34603 changed files with 8585054 additions and 0 deletions

View File

@ -0,0 +1,424 @@
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<!-- 引用页头及CSS页-->
<jsp:include page="/jsp/inc.jsp"></jsp:include>
<!-- 引入daterangepicker-->
<link rel="stylesheet" href="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.css"/>
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/moment.min.js" charset="utf-8"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.js" charset="utf-8"></script>
<style type="text/css">
.W120 .th-inner {
width:150px !important;
}
</style>
<script type="text/javascript">
var sdt = '';
var edt = '';
function initDate1() {
//定义locale汉化插件
sdt = moment().subtract(7, 'days').format('YYYY-MM-DD HH:mm');
// edt = moment().subtract(0, 'days').format('YYYY-MM-DD HH:mm');
var locale = {
"format": 'YYYY-MM-DD HH:mm',
"applyLabel": "确定",
"cancelLabel": "取消",
"weekLabel": "W",
"daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"],
"monthNames": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
"firstDay": 1
};
$('#sdt').daterangepicker({
"timePicker": true,
"timePicker24Hour": true,
"linkedCalendars": false,
"singleDatePicker":true,
"autoUpdateInput": false,
"timePickerIncrement": 10,
"locale": locale
}, function(start) {
sdt = start.format(this.locale.format);
if(!this.startDate){
this.element.val('');
}else{
this.element.val(this.startDate.format(this.locale.format));
}
});
$('#sdt').val(sdt);
};
function initDate2() {
//定义locale汉化插件
edt = moment().subtract(0, 'days').format('YYYY-MM-DD HH:mm');
var locale = {
"format": 'YYYY-MM-DD HH:mm',
"applyLabel": "确定",
"cancelLabel": "取消",
"weekLabel": "W",
"daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"],
"monthNames": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
"firstDay": 1
};
$('#edt').daterangepicker({
"timePicker": true,
"timePicker24Hour": true,
"linkedCalendars": false,
"singleDatePicker":true,
"autoUpdateInput": false,
"timePickerIncrement": 10,
"locale": locale
}, function(start) {
edt = start.format(this.locale.format);
if(!this.startDate){
this.element.val('');
}else{
this.element.val(this.startDate.format(this.locale.format));
}
});
$('#edt').val(edt);
};
var mpids="";
var showWidth="";
$(function() {
initDate1();
initDate2();
showWidth=$(window).width();
mpids="${param.mpids}";
getMpointJson();
})
var mpcodestr="";
var mpnamestr="";
var mpunitstr="";
var unitIdstr="";
var expstr="";
function getMpointJson(){
$.post(ext.contextPath +"/data/getMPointJson.do",{checkedIds:mpids},function(data){
var ArrayDatas = eval("(" + data + ")");
for (var i=0;i<ArrayDatas.length;i++){
mpcodestr+=ArrayDatas[i].mpointcode+",";//测量点code
mpnamestr+=ArrayDatas[i].parmname+",";//测量点名称
mpunitstr+=ArrayDatas[i].unit+",";//测量点单位
unitIdstr+=ArrayDatas[i].bizid+",";//厂
expstr+=ArrayDatas[i].exp+",";//计算方式
}
getEcharts();
getHistoryList();
});
}
var mychart="";
var option=[];
var color=[
"#2ec7c9",
"#b6a2de",
"#5ab1ef",
"#ffb980",
"#d87a80",
"#8d98b3",
"#e5cf0d",
"#97b552",
"#95706d",
"#dc69aa",
"#07a2a4",
"#9a7fd1",
"#588dd5",
"#f5994e",
"#c05050",
"#59678c",
"#c9ab00",
"#7eb00a",
"#6f5553",
"#c14089"
];
function getEcharts(){
var series=[];
var yAxis=[];
var legenddata=[];
var mpcodedata=[];
mpcodedata=(mpcodestr.substring(0,mpcodestr.length-1)).split(",");
var mpnamedata=[]
mpnamedata=(mpnamestr.substring(0,mpnamestr.length-1)).split(",");
var unitIdname=[];
unitIdname=(unitIdstr.substring(0,unitIdstr.length-1)).split(",");
var expname=[];
expname=(expstr.substring(0,expstr.length-1)).split(",");
if(mpnamedata.length>0){
for(var i=0;i<mpnamedata.length;i++){
if(expname[i]!="-"){
legenddata.push(mpnamedata[i]);
}else{
legenddata.push(mpnamedata[i]+":"+mpcodedata[i]);
}
}
}
for(var i=0;i<legenddata.length;i++){
series.push({
data:'',
symbol:'none',
name:legenddata[i],
type:'line',
lineStyle:{
width:2
},
markPoint:{
data:''
},
markLine:{
data:''
}
})
}
yAxis.push({
type : 'value',
name : false,
splitLine: {
show: false//是否显示分隔线。默认数值轴显示,类目轴不显示。
},
scale:true//设置成 true 后坐标刻度不会强制包含零刻度。
});
mychart=echarts.init(document.getElementById('chart'));
option = {
color:color,
animation:false,
// tooltip: {
// trigger: 'axis',
// axisPointer: {
// type: 'cross'
// }
// },
legend: {
type:'scroll',
// right: 50,
data: legenddata,
left: 'center',
padding: [
5, // 上
100, // 右
0, // 下
0, // 左
]
},
grid:{
left: '4%', // 与容器左侧的距离
right: '4%', // 与容器右侧的距离
top: '5%', // 与容器顶部的距离
//bottom: '5%', // 与容器底部的距离
containLabel:true
},
xAxis: {
type: 'time'
},
yAxis: yAxis,
series: series,
tooltip: {
trigger: 'axis',
formatter: function (params, ticket, callback) {
var htmlStr = '';
for(var i=0;i<params.length;i++){
var param = params[i];
// console.log(param);
var xName = param.name;//x轴的名称
var seriesName = param.seriesName;//图例名称
var xvalue = param.value[0];//x轴值
var yvalue = param.value[1];//y轴值
var color = param.color;//图例颜色
htmlStr +='<div>';
htmlStr += xvalue + '<br/>' ;
htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:'+color+';"></span>';
htmlStr += seriesName+':'+ yvalue + '';
htmlStr += '</div>';
}
return htmlStr;
}
// alwaysShowContent:true,
},
dataZoom: [{
type: 'inside',
start: 0,
end: 20
}, {
start: 0,
end: 20,
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleSize: '60%',
handleStyle: {
color: '#fff',
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 2,
shadowOffsetY: 2
}
}]
};
// console.log(option);
mychart.setOption(option,true);
mpcodedata.forEach(function (item, index) {
if(item!=''){
appendDataToChart(item,index,unitIdname[index],expname[index],mpnamedata[index]);
}
});
}
var alarmdata=[];
function appendDataToChart(id,index,unitIdname,exp,mpname){
$.post(ext.contextPath +"/work/mpoint/getMpointJsonFormpids.do",{unitId:unitIdname,mpids:id,func:exp,mpname:mpname,sdt:sdt,edt:edt},function(data){
var datas=eval('(' + data + ')');
// console.log(datas);
alarmdata.push({
maxlimit:datas[0].maxlimit,
minlimit:datas[0].minlimit
});
var edatas=datas[0].data;
//为全局赋值
option.series[index].data=edatas;
// console.log(option.series[index]);
//后端构造对应数据
mychart.appendData({
seriesIndex:index,
data:edatas
});
//刷新
mychart.resize();
});
}
var tablecolors = ['#c12e34', '#e6b600', '#0098d9','#2b821d','#005eaa', '#339ca8', '#cda819','#32a487','#f3a43b','#60c0dd','#d7504b','#c6e579','#f4e001'];
function getHistoryList(){
var namearr = mpnamestr.substring(0, mpnamestr.length-1);
namearr = namearr.split(",");
var length = namearr.length;
var mpoint = [];
var checkobx={};
checkobx.checkbox = true;
//mpoint.push(checkobx);
var measuredt={};
measuredt.class='W120',
measuredt.field='measuredt';
measuredt.title='时间';
measuredt.align='center';
measuredt.valign='middle';
measuredt.width=140;
mpoint.push(measuredt);
for(var i=0;i<namearr.length;i++){
var color=tablecolors[i%namearr.length];
var parmvalue={};
parmvalue.field = 'paramvalue'+i;
parmvalue.title=namearr[i];
parmvalue.align='center';
parmvalue.valign='middle';
// parmvalue.width=(showWidth-170)/namearr.length;
var css1 = {};
css1.color = color;
var cellstyle = {};
cellstyle.css=css1;
parmvalue.cellStyle=cellstyle,
mpoint.push(parmvalue);
}
$("#table").bootstrapTable({ // 对应table标签的id
url: ext.contextPath + '/work/mpoint/getDiffUnitHistoryList.do', // 获取表格数据的url
cache: false, // 设置为 false 禁用 AJAX 数据缓存, 默认为true
striped: true, //表格显示条纹默认为false
pagination: true, // 在表格底部显示分页组件默认false
pageList: [10, 20,50], // 设置页面可以显示的数据条数
pageSize: 10, // 页面数据条数
pageNumber: 1, // 首页页码
sidePagination: 'server', // 设置为服务器端分页
cardView:false,
queryParams: function (params) { // 请求服务器数据时发送的参数可以在这里添加额外的查询参数返回false则终止请求
return {
rows: params.limit, // 每页要显示的数据条数
page: params.offset/params.limit+1, // 每页显示数据的开始页码
sort: params.sort, // 要排序的字段
order: params.order,
ids : mpids,
sdt: sdt,
edt: edt
}
},
sortName: 'measuredt', // 要排序的字段
sortOrder: 'asc', // 排序规则
columns: mpoint,
onLoadSuccess: function(){ //加载成功时执行
adjustBootstrapTableView("table");
docardView();
},
onLoadError: function(){ //加载失败时执行
console.info("加载数据失败");
}
})
}
function dosearch(){
mpcodestr="";
mpnamestr="";
mpunitstr="";
getMpointJson();
$("#table").bootstrapTable('refresh');
}
function docardView(){
$('#table').bootstrapTable('toggleView');
}
</script>
<body onload="initMenu()" class="hold-transition ${cu.themeclass} sidebar-mini">
<input id="mpids" name="mpids" type="hidden" style="width: 500px;" value=""/>
<div class="box box-solid" id="box-echart" >
<div class="box-header with-border">
<h3 class="box-title">曲线绘制</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-default" style="height:30px;line-height: 30px;padding: 0px;padding-left: 5px;padding-right: 5px;" onclick="dosearch();" ><i class="fa fa-search"></i> 查询</button>
<!-- <button type="button" class="btn btn-default" style="height:30px;line-height: 30px;padding: 0px;padding-left: 5px;padding-right: 5px;" onclick="dochange();" ><i class="fa fa-search"></i> 切换</button> -->
</div>
</div>
<div class="box-body ">
<div style="height:30px;width:100%;" >
<div style="float:left;width: 100%;height: 30px;margin-bottom: 5px;">
<div style="float:left;padding-right:5px;font-weight: 600;line-height: 30px;width: 40%;text-align: right;">
起始时间
</div>
<div style="float:left;padding-left:5px;width: 150px;">
<input class="form-control date-picker" id="sdt" name="sdt" autocomplete="off" type="text" placeholder="点击选择" style="background-color:#FFFFFF;height: 30px;border-radius: 8px;" value="${param.sdt}"/>
</div>
</div>
<div style="float:left;width: 100%;height: 30px;">
<div style="float:left;padding-right:5px;font-weight: 600;line-height: 30px;width: 40%;text-align: right;">
结束时间
</div>
<div style="float:left;padding-left:5px;width: 150px;">
<input class="form-control date-picker" id="edt" name="edt" autocomplete="off" type="text" placeholder="点击选择" style="background-color:#FFFFFF;height: 30px;border-radius: 8px;" value="${param.edt}"/>
</div>
</div>
</div>
<br>
<div id="ctablehartDiv" style="padding:0px;overflow:hidden;height:350px;width:100%;" >
<div id="chart" style="height: 100%;width:100%;"></div>
</div>
<div id="tableDiv" style="padding-top:10px;height:430px;width:100%;" >
<table id="table" ></table>
</div>
</div>
</div>
</body>

View File

@ -0,0 +1,160 @@
<%@ 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"%>
<jsp:include page="/jsp/inc.jsp"></jsp:include>
<script type="text/javascript" src="<%=request.getContextPath()%>/node_modules/Recorder-master/recorder.mp3.min.js"
charset="utf-8"></script>
<html>
<body>
<input type="button" onclick="startRec()" value="录音转文字" width="50px">
<input type="button" onclick="timeIng()" value="实时识别" width="50px">
<input type="button" onclick="speckText('测试11111')" value="语音播报" width="50px">
</body>
</html>
<script>
function speckText(str){
let to_speak = window.speechSynthesis;
to_speak = new SpeechSynthesisUtterance(str);
window.speechSynthesis.speak(to_speak);
}
var rec;
var flag2 = 0;
var websocket = null;
function timeIng(){
flag2 += 1;
if (flag2 % 2 == 1) {
console.log(12);
if ('WebSocket' in window) {
// 创建websocket对象
websocket = new WebSocket('wss://vop.baidu.com/realtime_asr?sn=aaa-bbb-ccc-ddd');
// var userName = "语音识别";
// websocket = new WebSocket(ext.basePath.replace("http", "ws") + "/chat/baiDuAipSpeechMessage");
registerEvent();
} else {
alert('当前浏览器不支持websocket')
}
function registerEvent() {
websocket.onopen = function (event) {
console.log("WebSocket message received:", event);
}
websocket.onmessage = function (event) {
console.log("WebSocket message received:", event);
};
websocket.onclose = function (event) {
websocket.close();
};
//连接发生错误的回调方法
websocket.onerror = function () {
// $("#Putin").attr('disabled', 'disabled');
websocket.close();
};
}
}
if (flag2 % 2 == 0) {
console.log("websocket关闭");
websocket.close();
}
}
var flag = 0;
function startRec() {
flag += 1;
if (flag % 2 == 1) {
rec = Recorder({ type: "mp3", sampleRate: 16000, bitRate: 16, numChannels: 1 });//使用默认配置mp3格式
//打开麦克风授权获得相关资源
rec.open(function () {
//开始录音
rec.start();
}, function (msg, isUserNotAllow) {
//用户拒绝了权限或浏览器不支持
alert((isUserNotAllow ? "用户拒绝了权限," : "") + "无法录音:" + msg);
});
}
if (flag % 2 == 0) {
//停止录音得到了录音文件blob二进制对象想干嘛就干嘛
rec.stop(function (blob, duration) {
var api=ext.contextPath +"/data/baiDuAipSpeech/save.do";
var reader=new FileReader();
reader.onloadend=function(){
$.ajax({
url:api, //上传接口地址
type:"POST",
dateType:'json',
data:{
type:blob.type, //告诉后端这个录音是什么格式的可能前后端都固定的mp3可以不用写
upfile_b64:(/.+;\s*base64\s*,\s*(.+)$/i.exec(reader.result)||[])[1] //录音文件内容后端进行base64解码成二进制
},
success:function(data){
console.log(data);
// console.log("上传成功",v);
rec.close();
},
error:function(s){
console.error("上传失败",s);
rec.close();
}
});
};
reader.readAsDataURL(blob);
}, function (msg) {
alert("录音失败:" + msg);
rec.close();
});
}
};
function uploadRec() {
//停止录音得到了录音文件blob二进制对象想干嘛就干嘛
rec.stop(function (blob, duration) {
/*
blob文件对象可以用FileReader读取出内容
或者用FormData上传本例直接上传二进制文件
对于普通application/x-www-form-urlencoded表单上传
请参考github里面的例子
*/
var form = new FormData();
form.append("upfile", blob, "recorder.mp3"); //和普通form表单并无二致后端接收到 upfile参数的文件文件名为recorder.mp3
//直接用ajax上传
var xhr = new XMLHttpRequest();
xhr.open("POST", "");//放后端语音处理程序的地址
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
alert(xhr.status == 200 ? "上传成功" : "测试请先打开浏览器控制台然后重新录音在network选项卡里面就能看到上传请求数据和格式了");
document.getElementById("keyword").value = xhr.responseText;
}
}
xhr.send(form);
}, function (msg) {
alert("录音失败:" + msg);
});
};
function playRec() {
//停止录音得到了录音文件blob二进制对象想干嘛就干嘛
rec.stop(function (blob, duration) {
var audio = document.createElement("audio");
audio.controls = true;
document.body.appendChild(audio);
//非常简单的就能拿到blob音频url
audio.src = URL.createObjectURL(blob);
audio.play();
}, function (msg) {
alert("录音失败:" + msg);
});
};
</script>

View File

@ -0,0 +1,183 @@
<%@ 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.data.DataCurve" %>
<% request.setAttribute("Type_group", DataCurve.Type_group);%>
<% request.setAttribute("Type_sys", DataCurve.Type_sys);%>
<% request.setAttribute("Type_user", DataCurve.Type_user);%>
<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 + "/data/saveCurve.do", $("#subForm").serialize(), function (result) {
var data = $.parseJSON(result);
if (data.code == 1) {
initTreeView();
// showAlert('s','保存成功');
} else {
showAlert('d', data.msg);
}
});
}
}
$("#subForm").bootstrapValidator({
live: 'disabled',//验证时机enabled是内容有变化就验证默认disabled和submitted是提交再验证
fields: {
name: {
validators: {
notEmpty: {
message: '名称不能为空'
}
}
},
// _pname: {
// validators: {
// notEmpty: {
// message: '上级菜单不能为空'
// }
// }
// },
morder: {
validators: {
notEmpty: {
message: '顺序不能为空'
},
regexp: {
regexp: /^[0-9]*$/,
message: '顺序必须为数字'
}
}
}
}
});
$(function () {
});
function changeType() {
let type = $('#type').val();
console.log(type)
if (type == '${Type_group}') {
$('#sysShow').css('display', 'none');
} else if (type == '${Type_sys}') {
$('#sysShow').css('display', 'block');
}
}
</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="subForm">
<input id="id" name="id" type="hidden" value="${curve.id}"/>
<input id="unitId" name="unitId" type="hidden" value="${param.unitId}"/>
<!-- 界面提醒div强制id为alertDiv -->
<div id="alertDiv"></div>
<div id="menu4SelectDiv"></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="name" name="name" placeholder="名称"
value="${curve.name }">
</div>
<label class="col-sm-2 control-label">上级名称</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="pname" name="pname" placeholder="上级菜单"
onclick="showMenu4SelectFun();"
<c:if test="${!empty pname}">value="${pname}" </c:if>
<c:if test="${empty pname}">value="-1"</c:if> readonly>
<input id="pid" name="pid" type="hidden" value="${param.pid}"/>
</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="morder" name="morder" placeholder="顺序"
value="${curve.morder}">
</div>
<label class="col-sm-2 control-label">类型</label>
<div class="col-sm-4">
<select id="type" name="type" class="form-control select2" onchange="changeType();">
<option value="${Type_group}">分组</option>
<option value="${Type_sys}">系统曲线</option>
<!-- <option value="${Type_user}" >用户曲线</option> -->
</select>
</div>
</div>
<div id="sysShow" style="display: none;">
<div class="form-group">
<label class="col-sm-2 control-label">曲线类型</label>
<div class="col-sm-4">
<select id="curvetype" name="curvetype" class="select2"
style="height: 34px;padding: 0px 10px;border-color: #d2d6de;">
<option value="0" selected>折线图</option>
<option value="1">柱状图</option>
<option value="2">散点图</option>
</select>
</div>
<label class="col-sm-2 control-label">轴类型</label>
<div class="col-sm-4">
<select id="axistype" name="axistype" class="select2"
style="height: 34px;padding: 0px 10px;border-color: #d2d6de;">
<option value="1" selected>单Y轴</option>
<option value="0">多Y轴</option>
<option value="2">多表</option>
</select>
</div>
</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="remark" name="remark" value="${curve.remark}">
</div>
</div>
</form>
</div>
</div>
<!-- <div class="box box-solid" id="box">
<div class="box-header with-border">
<h3 class="box-title">测量点配置</h3>
<div class="box-tools pull-right">
</div>
</div>
<div class="box-body ">
<div >
<div id="alertDiv_power"></div>
<div class="btn-group" style="width: 220px;padding-bottom:10px;">
<button type="button" class="btn btn-default" onclick="addPowerFun();"><i class="fa fa-plus"></i> 新增</button>
<button type="button" class="btn btn-default" onclick="saveDefault();"><i class="fa fa-plus-square"></i> 默认</button>
</div>
<div id="powerDiv"></div>
<div id="menu4SelectDiv_func"></div>
<br>
<table id="table"></table>
</div>
</div>
</div> -->

View File

@ -0,0 +1,399 @@
<%@ 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.data.DataCurve" %>
<% request.setAttribute("Type_group", DataCurve.Type_group);%>
<% request.setAttribute("Type_sys", DataCurve.Type_sys);%>
<% request.setAttribute("Type_user", DataCurve.Type_user);%>
<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 unitId = '${param.unitId}'
var showMenu4SelectFun = function () {
$.post(ext.contextPath + '/data/showMenu4Select.do', {
formId: "subForm",
hiddenId: "pid",
textId: "pname",
ownId: '${curve.id}'
}, function (data) {
$("#menu4SelectDiv").html(data);
openModal("menu4SelectModal")
});
};
function doFAsave() {
$.post(ext.contextPath + "/data/updateCurve.do", $("#subForm").serialize(), function (result) {
var data = $.parseJSON(result);
if (data.code == 1) {
initTreeView();
//showAlert('s','保存成功');
} else {
showAlert('d', data.msg);
}
});
}
function dodel() {
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 + '/data/deleteCurve.do', $("#subForm").serialize(), function (result) {
// var data= $.parseJSON(result);
if (result.code == 1) {
initTreeView();
} else {
showAlert('d', result.msg);
}
}, 'json');
}
});
}
function delMpointFun(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 + '/data/deleteMPoint.do', {id: id}, function (data) {
if (data.code == 1) {
$("#table").bootstrapTable('refresh');
} else {
showAlert('d', '删除失败', 'alertDiv');
}
}, 'json');
}
});
}
//多删
var delMpointFuns = function () {
var checkedItems = $("#table").bootstrapTable('getSelections');
var datas = "";
$.each(checkedItems, function (index, item) {
datas += item.id + ",";
});
if (datas == "") {
showAlert('d', '请先选择记录', 'mainAlertdiv');
} else {
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 + '/data/deleteMPoints.do', {ids: datas}, function (data) {
if (data > 0) {
$("#table").bootstrapTable('refresh');
} else {
showAlert('d', '删除失败', 'mainAlertdiv');
}
});
}
});
}
};
var addMpointFun = function () {
$.post(ext.contextPath + '/data/addMPoint.do', {pid: '${curve.id}'}, function (data) {
$("#subDiv").html(data);
openModal('subModal');
//ComponentsDateTimePickers.init();
});
};
var addMpointFuns = function (pid) {
$.post(ext.contextPath + '/data/showlistForSelects.do', {pid: '${curve.id}'}, function (data) {
$("#mpSubDiv").html(data);
openModal('mpSubModal');
});
};
var editMpointFun = function (id) {
$.post(ext.contextPath + '/data/editMPoint.do', {unitId: unitId, id: id, pid: '${curve.id}'}, function (data) {
$("#subDiv").html(data);
openModal('subModal');
//ComponentsDateTimePickers.init();
});
};
function addProgrammeFun() {
$.post(ext.contextPath + '/data/addSYSCurve.do', {unitId: unitId, pid: '${curve.id}'}, function (data) {
$("#subDiv").html(data);
openModal('programmeSubModal');
});
}
$(function () {
$("#table").bootstrapTable({ // 对应table标签的id
url: ext.contextPath + '/data/getMPointList.do', // 获取表格数据的url
cache: false, // 设置为 false 禁用 AJAX 数据缓存, 默认为true
striped: true, //表格显示条纹默认为false
pagination: true, // 在表格底部显示分页组件默认false
pageList: [10, 20, 50], // 设置页面可以显示的数据条数
pageSize: 50, // 页面数据条数
pageNumber: 1, // 首页页码
paginationDetailHAlign: ' hidden',//去除分页的显示
sidePagination: 'server', // 设置为服务器端分页
queryParams: function (params) { // 请求服务器数据时发送的参数可以在这里添加额外的查询参数返回false则终止请求
return {
rows: params.limit, // 每页要显示的数据条数
page: params.offset / params.limit + 1, // 每页显示数据的开始页码
sort: params.sort, // 要排序的字段
order: params.order, // 排序规则
id: '${curve.id}',
unitId: unitId
}
},
sortName: 'morder', // 要排序的字段
sortOrder: 'asc', // 排序规则
columns: [
{
checkbox: true, // 显示一个勾选框
},
{
field: 'mPoint', // 返回json数据中的name
title: '测量点编号', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle', // 上下居中
formatter: function (value, row, index) {
return value == null ? '' : value.mpointcode;
},
}, {
field: 'mPoint', // 返回json数据中的name
title: '测量点名称', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle', // 上下居中
formatter: function (value, row, index) {
return value == null ? '' : value.parmname;
},
}, {
field: 'morder', // 返回json数据中的name
title: '顺序', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle', // 上下居中
}, {
title: "操作",
align: 'center',
valign: 'middle',
width: 100, // 定义列的宽度单位为像素px
formatter: function (value, row, index) {
return '<div class="btn-group"><button class="btn btn-default btn-sm" onclick="editMpointFun(\'' + row.id + '\')"><i class="fa fa-edit"></i></button>' +
'<button class="btn btn-default btn-sm" onclick="delMpointFun(\'' + row.id + '\')"><i class="fa fa-trash-o"></i></button></div>';
}
}
],
onLoadSuccess: function () { //加载成功时执行
$(".bs-checkbox").css({'text-align': 'center', 'vertical-align': 'middle'})
},
onLoadError: function () { //加载失败时执行
console.info("加载数据失败");
}, onReorderRow: function (newData) {
//这里的newData是整个表格数据数组形式
// console.log("data",newData); //调试用代码
var ids = "";
for (let index = 0; index < newData.length; index++) {
const element = newData[index];
ids += element.id + ",";
}
$.post(ext.contextPath + '/data/docurveMpointsort.do', {ids: ids},//将整张表数据 不能分页
function (data) {
if (data == 1) {
$("#table").bootstrapTable('refresh');
} else {
showAlert('d', '数据错误', 'mainAlertdiv');
}
});
}
})
$("#table").tableDnD();
});
</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="doFAsave()" class="btn btn-box-tool" data-toggle="tooltip" title="保存"><i
class="glyphicon glyphicon-floppy-disk"></i></a>
<a onclick="dodel()" class="btn btn-box-tool" data-toggle="tooltip" title="删除"><i
class="glyphicon glyphicon-trash"></i></a>
<c:if test="${curve.type==Type_group}">
<a onclick="addProgrammeFun()" style="cursor: pointer;" class="fa fa-cloud-download"
data-toggle="tooltip" title="系统曲线"></a>
</c:if>
</div>
</div>
<!-- /.box-header -->
<div class="box-body ">
<form class="form-horizontal " id="subForm">
<input id="id" name="id" type="hidden" value="${curve.id}"/>
<!-- 界面提醒div强制id为alertDiv -->
<div id="alertDiv"></div>
<div id="menu4SelectDiv"></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="name" name="name" placeholder="名称"
value="${curve.name }">
</div>
<label class="col-sm-2 control-label">上级名称</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="pname" name="pname" placeholder="上级菜单"
onclick="showMenu4SelectFun();"
<c:if test="${curve.pid=='-1'}">value="-1" </c:if>
<c:if test="${curve.pid!='-1'}">value="${curve.pname}"</c:if> readonly>
<input id="pid" name="pid" type="hidden" value="${curve.pid}"/>
</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="morder" name="morder" placeholder="顺序"
value="${curve.morder}">
</div>
<label class="col-sm-2 control-label">类型</label>
<div class="col-sm-4">
<select id="type" name="type" class="form-control select2">
<option value="${Type_group}" <c:if test="${curve.type==Type_group }">selected</c:if>>分组
</option>
<option value="${Type_sys}" <c:if test="${curve.type==Type_sys }">selected</c:if>>系统曲线</option>
<!-- <option value="${Type_user}" <c:if test="${curve.type==Type_user }">selected</c:if>>用户曲线</option> -->
</select>
</div>
</div>
<c:if test="${curve.type!=Type_group}">
<div class="form-group">
<label class="col-sm-2 control-label">曲线类型</label>
<div class="col-sm-4">
<select id="curvetype" name="curvetype" class="select2"
style="height: 34px;padding: 0px 10px;border-color: #d2d6de;">
<option value="0" <c:if test="${curve.curvetype==0 }">selected</c:if>>折线图</option>
<option value="1" <c:if test="${curve.curvetype==1 }">selected</c:if>>柱状图</option>
<option value="2" <c:if test="${curve.curvetype==2 }">selected</c:if>>散点图</option>
</select>
</div>
<label class="col-sm-2 control-label">轴类型</label>
<div class="col-sm-4">
<select id="axistype" name="axistype" class="select2"
style="height: 34px;padding: 0px 10px;border-color: #d2d6de;">
<option value="1" <c:if test="${curve.axistype==1 }">selected</c:if>>单Y轴</option>
<option value="0" <c:if test="${curve.axistype==0 }">selected</c:if>>多Y轴</option>
<option value="2" <c:if test="${curve.axistype==2 }">selected</c:if>>多表</option>
</select>
</div>
</div>
</c:if>
<div class="form-group">
<label class="col-sm-2 control-label">备注</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="remark" name="remark" value="${curve.remark}">
</div>
</div>
</form>
</div>
</div>
<div class="box box-solid">
<div class="box-header with-border">
<h3 class="box-title">测量点配置</h3>
<div class="box-tools pull-right">
</div>
</div>
<div class="box-body ">
<div>
<div id="alertDiv_power"></div>
<div class="btn-group" style="width: 280px;padding-bottom:10px;">
<c:if test="${curve.type!=Type_group}">
<%-- <button type="button" class="btn btn-default" onclick="addMpointFun();"><i class="fa fa-plus"></i>--%>
<%-- 新增--%>
<%-- </button>--%>
<button type="button" class="btn btn-default" style="margin-left: 10px;" onclick="addMpointFuns();">
<i class="fa fa-plus"></i>新增
</button>
<button type="button" class="btn btn-default" style="margin-left: 10px;" onclick="delMpointFuns();">
<i class="fa fa-trash-o"></i>删除
</button>
</c:if>
<!-- <button type="button" class="btn btn-default" onclick="saveDefault();"><i class="fa fa-plus-square"></i> 默认</button> -->
</div>
<div id="powerDiv"></div>
<div id="menu4SelectDiv_func"></div>
<br>
<table id="table" data-use-row-attr-func="true" data-reorderable-rows="true"></table>
</div>
</div>
</div>

View File

@ -0,0 +1,354 @@
<%@ 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" %>
<script type="text/javascript">
$(function () {
$("#table_Detail").bootstrapTable({ // 对应table标签的id
url: ext.contextPath + '/data/getCurveProgrammeMpList.do', // 获取表格数据的url
cache: false, // 设置为 false 禁用 AJAX 数据缓存, 默认为true
striped: true, //表格显示条纹默认为false
pagination: true, // 在表格底部显示分页组件默认false
pageList: [10, 20, 50], // 设置页面可以显示的数据条数
pageSize: 5, // 页面数据条数
pageNumber: 1, // 首页页码
paginationDetailHAlign: ' hidden',//去除分页的显示
sidePagination: 'server', // 设置为服务器端分页
queryParams: function (params) { // 请求服务器数据时发送的参数可以在这里添加额外的查询参数返回false则终止请求
return {
rows: params.limit, // 每页要显示的数据条数
page: params.offset / params.limit + 1, // 每页显示数据的开始页码
sort: params.sort, // 要排序的字段
order: params.order,
pid: '${curve.id}'
}
},
onClickRow: function (row) {//单击行事件,执行查看功能
//viewFun(row.id);
},
columns: [
{
checkbox: true // 显示一个勾选框
// formatter: stateFormatter
},
{
field: 'mpointId', // 返回json数据中的name
title: '测量点', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle', // 上下居中
},{
field: 'mPoint', // 返回json数据中的name
title: '名称', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle', // 上下居中
formatter: function (value, row, index) {
return row.mPoint.parmname;
}
}, {
title: "操作",
align: 'center',
valign: 'middle',
width: '120', // 定义列的宽度单位为像素px
formatter: function (value, row, index) {
var buts = '';
buts += '<button class="btn btn-default btn-sm" title="编辑" onclick="doPersonMPDEdit(\'' + row.id + '\')"><i class="fa fa-edit"></i><span class="hidden-md hidden-lg"> 编辑</span></button>';
buts += '<button class="btn btn-default btn-sm" title="删除" onclick="doPersonMPDDel(\'' + row.id + '\')"><i class="fa 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("table_Detail");
},
onLoadError: function () { //加载失败时执行
console.info("加载数据失败");
}
});
})
var doPersonMPDEdit = function (id) {
event.stopPropagation();
$.post(ext.contextPath + '/data/editMPoint2.do', {unitId: hiddenUnitId, id: id}, function (data) {
$("#subDetailDiv").html(data);
openModal('subModal_CurveMp');
});
};
function doPersonMPDDel(id) {
event.stopPropagation();
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 + '/data/deleteMPoint.do', {id: id}, function (data) {
if (data.code == 1) {
$("#table_Detail").bootstrapTable('refresh');
initProgrammeTreeView();
} else {
showAlert('d', '删除失败', 'alertDiv');
}
}, 'json');
}
});
}
<%--function addDetailFun() {--%>
<%-- $.post(ext.contextPath + '/data/showlistForSelects.do', {pid: '${curve.id}'}, function (data) {--%>
<%-- $("#mpSubDiv").html(data);--%>
<%-- openModal('mpSubModal');--%>
<%-- });--%>
<%--}--%>
function doupdate() {
$("#curve_Edit2_subForm").bootstrapValidator('validate');//提交验证
if ($("#curve_Edit2_subForm").data('bootstrapValidator').isValid()) {//获取验证结果,如果成功,执行下面代码
$.post(ext.contextPath + "/data/updateCurve.do", $("#curve_Edit2_subForm").serialize(), function (result) {
// var data= $.parseJSON(result);
if (result.code == 1) {
closeModal('personSubModal');
// $("#box").show();
initProgrammeTreeView();
// $("#table").bootstrapTable('refresh');
} else {
showAlert('d', result.res);
}
}, 'json');
}
}
$("#curve_Edit2_subForm").bootstrapValidator({
live: 'disabled',//验证时机enabled是内容有变化就验证默认disabled和submitted是提交再验证
fields: {
name: {
validators: {
notEmpty: {
message: '名称不能为空'
}
}
},
}
});
function changeToSysCurve() {
let id = $('#id').val();
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 + "/data/changeToSysCurve.do", {id: id}, function (result) {
if (result.code == 1) {
closeModal('personSubModal');
// $("#box").show();
initProgrammeTreeView();
// $("#table").bootstrapTable('refresh');
} else {
showAlert('d', result.res);
}
}, 'json');
}
});
}
function select_edit2_mp_mpids() {
$.post(ext.contextPath + '/work/mpoint/mpointList4LayerES.do', {
// mpids: mpids,
mpids: '',
fucname: 'do_edit2_mp_select'
}, function (data) {
$("#mpSelectDiv").html(data);
openModal('subModalMpoint');
});
}
function do_edit2_mp_select() {
var checkedItem = $("#table_mpoint").bootstrapTable('getAllSelections');
if (checkedItem != null && checkedItem != "") {
// console.log(checkedItem);
var mpointids = "";
for (var i = 0; i < checkedItem.length; i++) {
mpointids += checkedItem[i].id + ",";
}
$.post(ext.contextPath + '/data/saveMPoints.do', {
companyId: unitId,
mpointids: mpointids,
pid: '${curve.id}'
}, function (resp) {
//console.info(checkedItem.id)
$("#table_Detail").bootstrapTable('refresh');
initProgrammeTreeView();
// $("#table").bootstrapTable('refresh');
closeModal('subModalMpoint');
}, 'json');
} else {
showAlert('d', '尚未选择测量点!', 'mpoint_mainAlertdiv');
}
}
var detail_edit2_mpDetailsFun = function() {
var checkedItems = $("#table_Detail").bootstrapTable('getSelections');
var datas="";
$.each(checkedItems, function(index, item){
datas+=item.id+",";
});
if(datas==""){
showAlert('d','请先选择记录','mainAlertdiv');
}else{
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 + '/data/deleteMPoints.do', {ids:datas} , function(data) {
if(data>0){
$("#table_Detail").bootstrapTable('refresh');
initProgrammeTreeView();
}else{
showAlert('d','删除失败','mainAlertdiv');
}
});
}
},'json');
}
};
</script>
<div class="modal fade" id="personSubModal">
<div class="modal-dialog modal-md" style="width: 900px;">
<div class="modal-content" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">编辑个人方案</h4>
</div>
<!-- 界面提醒div强制id为alertDiv -->
<div id="alertDiv"></div>
<div class="modal-body">
<!-- 新增界面formid强制为curve_Edit2_subForm -->
<form class="form-horizontal" id="curve_Edit2_subForm">
<input type="hidden" class="form-control" id="id" name="id" value="${curve.id}">
<div class="form-group">
<label class="col-sm-2 control-label">名称</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="name" name="name" value="${curve.name}">
</div>
<label class="col-sm-2 control-label">顺序</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="morder" name="morder" value="${curve.morder}">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">曲线类型</label>
<div class="col-sm-4">
<select id="curvetype" name="curvetype" class="select2"
style="height: 34px;padding: 0px 10px;border-color: #d2d6de;">
<option value="0" <c:if test="${curve.curvetype==0 }">selected</c:if>>折线图</option>
<option value="1" <c:if test="${curve.curvetype==1 }">selected</c:if>>柱状图</option>
<option value="2" <c:if test="${curve.curvetype==2 }">selected</c:if>>散点图</option>
</select>
</div>
<label class="col-sm-2 control-label">轴类型</label>
<div class="col-sm-4">
<select id="axistype" name="axistype" class="select2"
style="height: 34px;padding: 0px 10px;border-color: #d2d6de;">
<option value="1" <c:if test="${curve.axistype==1 }">selected</c:if>>单Y轴</option>
<option value="0" <c:if test="${curve.axistype==0 }">selected</c:if>>多Y轴</option>
<option value="2" <c:if test="${curve.axistype==2 }">selected</c:if>>多表</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">备注</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="remark" name="remark" value="${curve.remark}">
</div>
</div>
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">方案点</h3>
<div class="box-tools pull-right">
<a onclick="select_edit2_mp_mpids()" class="btn btn-box-tool" data-toggle="tooltip"
title="新增"><i class="fa fa-plus"></i></a>
<a onclick="detail_edit2_mpDetailsFun()" class="btn btn-box-tool" data-toggle="tooltip"
title="删除"><i class="fa fa-minus"></i></a>
</div>
<div class="box-body" style="padding-top: 10px;">
<table id="table_Detail" ></table>
</div>
</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="changeToSysCurve()">转为系统方案</button>
<button type="button" class="btn btn-primary" onclick="doupdate()" id="btn_save">保存</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>

View File

@ -0,0 +1,23 @@
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@page import="com.sipai.entity.data.DataCurve"%>
<% request.setAttribute("Type_group", DataCurve.Type_group);%>
<% request.setAttribute("Type_sys", DataCurve.Type_sys);%>
<% request.setAttribute("Type_user", DataCurve.Type_user);%>
<!-- 引用页头及CSS页-->
<jsp:include page="/jsp/inc.jsp"></jsp:include>
<script type="text/javascript">
$(function() {
var viewHeight='${param.viewHeight}';
console.log(viewHeight);
$('#fullChart').css('height',viewHeight+'px');
// var option='${param.option}';
// console.log(fullchart);
// var fullchart = echarts.init(document.getElementById('fullChart'));
// fullchart.setOption(option,true);
});
</script>
<div class="box box-primary" >
<div id="fullChart" ></div>
</div>

View 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"%>
<!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" src="<%=request.getContextPath()%>/plugins/bootstrap-table/jquery.tablednd.js"
charset="utf-8"></script>
<script type="text/javascript"
src="<%=request.getContextPath()%>/plugins/bootstrap-table/extensions/reorder-rows/bootstrap-table-reorder-rows.js"
charset="utf-8"></script>
<link rel="stylesheet"
href="<%=request.getContextPath()%>/plugins/bootstrap-table/extensions/reorder-rows/bootstrap-table-reorder-rows.css"/>
<script type="text/javascript">
var unitId='';
var addFun = function() {
var node=$('#tree').treeview('getSelected');
var pid="";
if(node!=null && node.length>0){
pid=node[0].id;
}else{
pid="-1";
}
$.post(ext.contextPath + '/data/showCurveAdd.do', {unitId:unitId,pid:pid} , function(data) {
$("#menuBox").html(data);
});
};
var editFun = function(id) {
$.post(ext.contextPath + '/data/showCurveEdit.do', {unitId:unitId,id:id} , function(data) {
$("#menuBox").html(data);
});
};
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 + '/work/group/delete.do', {id : id}, function(data) {
if(data==1){
$("#table").bootstrapTable('refresh');
}else{
showAlert('d','删除失败','mainAlertdiv');
}
});
}
});
};
var deletesFun = function() {
var checkedItems = $("#table").bootstrapTable('getSelections');
var datas="";
$.each(checkedItems, function(index, item){
datas+=item.id+",";
});
if(datas==""){
showAlert('d','请先选择记录','mainAlertdiv');
}else{
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 + '/work/group/deletes.do', {ids:datas} , function(data) {
if(data>0){
$("#table").bootstrapTable('refresh');
}else{
showAlert('d','删除失败','mainAlertdiv');
}
});
}
});
}
};
var initTreeView = function() {
$.post(ext.contextPath + '/data/getCurvesJson2.do', {unitId:unitId} , function(data) {
//console.info(data)
$('#tree').treeview({data: data
});
$('#tree').on('nodeSelected', function(event, data) {
editFun(data.id);
//var node=$('#tree').treeview('getSelected');
});
},'json');
$("#menuBox").html("");
};
$(function() {
unitId=unitId;
var urlUnitId = "${param.urlUnitId}";//通过路径地址传参,直接显示该测量点
if (urlUnitId != '' && urlUnitId.length > 0) {
unitId = urlUnitId;
}
initTreeView();
});
</script>
</head>
<body onload="initMenu()" class="hold-transition ${cu.themeclass} sidebar-mini">
<div class="wrapper">
<!-- 引用top -->
<%-- <jsp:include page="/jsp/top.jsp"></jsp:include> --%>
<!-- 菜单栏 -->
<%-- <jsp:include page="/jsp/left.jsp"></jsp:include> --%>
<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="mpSubDiv"></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:550px;overflow:auto;"></div>
</div>
<!-- /.box-body -->
</div>
</div>
<div class="col-md-9" id="menuBox">
</div>
</div>
</section>
<!-- /.content -->
</div>
<%-- <jsp:include page="/jsp/bottom.jsp"></jsp:include> --%>
<%-- <jsp:include page="/jsp/side.jsp"></jsp:include> --%>
</div>
</body>
</html>

View File

@ -0,0 +1,903 @@
<%@ 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.data.DataCurve" %>
<%request.setAttribute("Type_mp", DataCurve.Type_mp); %>
<%request.setAttribute("Type_sys", DataCurve.Type_sys); %>
<%request.setAttribute("Type_user", DataCurve.Type_user); %>
<%@page import="com.sipai.tools.CommString" %>
<%request.setAttribute("UNIT_TYPE_COMPANY", CommString.UNIT_TYPE_COMPANY); %>
<%request.setAttribute("UNIT_TYPE_BIZ", CommString.UNIT_TYPE_BIZ); %>
<%@page import="com.sipai.entity.scada.MPoint" %>
<%request.setAttribute("Flag_Type_KPI", MPoint.Flag_Type_KPI);%>
<%request.setAttribute("Flag_Type_Hand", MPoint.Flag_Type_Hand);%>
<%request.setAttribute("Flag_Type_Data", MPoint.Flag_Type_Data);%>
<%request.setAttribute("Flag_Type_Model", MPoint.Flag_Type_Model);%>
<!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>
<!-- 引入daterangepicker-->
<link rel="stylesheet" href="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.css"/>
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/moment.min.js"
charset="utf-8"></script>
<script type="text/javascript"
src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.js"
charset="utf-8"></script>
<link rel="stylesheet"
href="<%=request.getContextPath()%>/node_modules/bootstrap-multiple-select/css/multiple-select.css"/>
<script type="text/javascript"
src="<%=request.getContextPath()%>/node_modules/bootstrap-multiple-select/js/multiple-select.js"
charset="utf-8"></script>
<link rel="stylesheet"
href="<%=request.getContextPath()%>/node_modules/bootstrap-treeview-1.2.0/dist/bootstrap-treeview.min.css"></link>
<script type="text/javascript"
src="<%=request.getContextPath()%>/node_modules/bootstrap-treeview-1.2.0/dist/bootstrap-treeview.min.js"
charset="utf-8"></script>
<style type="text/css">
.helpTitle {
/*border-bottom: 1px dotted #666;*/
color: #333;
cursor: help;
}
.helpTitle:hover {
color: #000000;
background-color: #ffffff;
}
.helpTitle-content {
position: absolute;
white-space: pre;
/*top: 10px;*/
/*left: 850px;*/
border: 1px solid #000000;
padding: 5px;
background-color: #ffffff;
color: #000;
/*border-radius: 5px;*/
font-size: 12px;
z-index: 9999;
display: none;
}
</style>
<script type="text/javascript">
let nodeIds = [];
var showProgrammeCurveView = function () {
var id = $('#curve_id').val();
var oldreservationtime1 = $('#reservationtime1').val();
var oldmpids = "";
// var oldmpids = $('#mpids').val();
$.post(ext.contextPath + '/data/showCurveView.do', {
unitId: hiddenUnitId,
programmeId: id,
oldmpids: oldmpids,
oldreservationtime1: oldreservationtime1
}, function (data) {
$("#menuBox").html(data);
});
};
var showMPCurveView = function (mpid, bizid) {
if (bizid == '') {
bizid = hiddenUnitId;
}
var oldmpids = $('#mpids').val();
var oldreservationtime1 = $('#reservationtime1').val();
$.post(ext.contextPath + '/data/showCurveView.do', {
unitId: bizid,
mpid: mpid,
oldmpids: oldmpids,
oldreservationtime1: oldreservationtime1
}, function (data) {
$("#menuBox").html(data);
});
};
let lastProgrammeTree_OpenPoint_nodeId = "";
var initProgrammeTreeView = function () {
$.post(ext.contextPath + '/data/getCurveProgrammeJson.do', {
unitId: hiddenUnitId,
search_name: $('#mpsearch_Program_name').val()
}, function (data) {
// console.info(data)
let programmeTreeView_nodeId = [];
// getNodeId_list(programmeTreeView_nodeId, data);
// console.log(programmeTreeView_nodeId)
// for (let i = 0; i < data.length; i++) {
// data[i].tags=["<span class='fa fa-close pull-right' style='padding-top:2px;' title='删除' onclick='doPersonPDel(\"1\");'></span><span class='fa fa-edit pull-right' style='padding-top:2px;' title='修改' onclick='doPersonPEdit(\"1\");'></span>"];
// }
$('#curveProgramTree').treeview({
data: data,
levels: 2,
showTags: true
});
// 打开最后记录的节点
if (lastProgrammeTree_OpenPoint_nodeId != "") {
$('#curveProgramTree').treeview('expandNode', [lastProgrammeTree_OpenPoint_nodeId, {silent: true}]);
}
$('#curveProgramTree').on('nodeSelected', function (event, data) {
if (data.type == '${Type_mp}') {
// showMPCurveView(data.mpid.replace('GRMp', ''), data.bizid);
} else if (data.type == '${Type_sys}' || data.type == '${Type_user}') {
$("#curve_id").val(data.id.replace('GRProgramme', ''));
// 清楚自定义选点的选中状态
for (let i = 0; i < nodeIds.length; i++) {
$('#singleBizDiv').treeview('toggleNodeSelected', [nodeIds[i].nodeId, {silent: true}]);
nodeIds.splice(i, 1);
break;
}
// $("#curve_id").val(data.id);
showProgrammeCurveView();
}
});
$('#curveProgramTree').on('nodeExpanded', function (event, data) {
lastProgrammeTree_OpenPoint_nodeId = data.nodeId;
});
// $("#curveProgramTree li").each(function () {
// // console.log($(this));
// let data_nodeid = $(this).attr("data-nodeid");
// if (programmeTreeView_nodeId[data_nodeid].indexOf('GR') > 0) {
// if (programmeTreeView_nodeId[data_nodeid].indexOf('GRProgramme') > 0) {
// $(this).append("<span class='fa fa-close pull-right' style='padding-top:2px;' title='删除' onclick='doPersonPDel(\"" + programmeTreeView_nodeId[data_nodeid].replace('GRProgramme', '') + "\");'></span>");
// $(this).append("<span class='fa fa-edit pull-right' style='padding-top:2px;' title='修改' onclick='doPersonPEdit(\"" + programmeTreeView_nodeId[data_nodeid].replace('GRProgramme', '') + "\");'></span>");
// } else if (programmeTreeView_nodeId[data_nodeid].indexOf('GRMp') > 0) {
// $(this).append("<span class='fa fa-close pull-right' style='padding-top:2px;' title='删除' onclick='doPersonMPDel(\"" + programmeTreeView_nodeId[data_nodeid].replace('GRMp', '') + "\");'></span>");
// $(this).append("<span class='fa fa-edit pull-right' style='padding-top:2px;' title='修改' onclick='doPersonMPEdit(\"" + programmeTreeView_nodeId[data_nodeid].replace('GRMp', '') + "\");'></span>");}
// }
// // var id = $(this).attr("id");
// // var levelLength = $(this).attr("data-nodeid").split(".").length - 1;
// // if (id.indexOf('GR') > 0) {
// // if (levelLength == 2) {
// // id = id.replace('GRProgramme', '');
// // $(this).append("<span class='fa fa-close pull-right' style='padding-top:2px;' title='删除' onclick='doPersonPDel(\"" + id + "\");'></span>");
// // $(this).append("<span class='fa fa-edit pull-right' style='padding-top:2px;' title='修改' onclick='doPersonPEdit(\"" + id + "\");'></span>");
// // } else if (levelLength = 3) {
// // id = id.replace('GRMp', '');
// // $(this).append("<span class='fa fa-close pull-right' style='padding-top:2px;' title='删除' onclick='doPersonMPDel(\"" + id + "\");'></span>");
// // $(this).append("<span class='fa fa-edit pull-right' style='padding-top:2px;' title='修改' onclick='doPersonMPEdit(\"" + id + "\");'></span>");
// // }
// // }
//
// });
// if(data.length>0&&urlUnitId==''){
// showfirstView(data[0]);
// }
}, 'json');
}
// programmeTreeView_nodeId
function getNodeId_list(programmeTreeView_nodeId, tree) {
for (let i = 0; i < tree.length; i++) {
let treeData = tree[i];
programmeTreeView_nodeId.push(treeData.id)
if (treeData.nodes != null) {
getNodeId_list(programmeTreeView_nodeId, treeData.nodes)
}
}
}
// var initProgrammeTreePersonView = function() {
// $.post(ext.contextPath + '/data/getPersonCurvesJson.do', {unitId:hiddenUnitId} , function(data) {
// // console.info(data);
// $('#curveProgramTree').treeview({
// data: data,
// levels: 1
// });
// $('#curveProgramTree').on('nodeSelected', function(event, data) {
// if(data.type=='${Type_mp}'){
// showMPCurveView(data.mpid);
// }else if(data.type=='${Type_sys}'||data.type=='${Type_user}'){
// $("#curve_id").val(data.id);
// showProgrammeCurveView();
// }
// });
// },'json');
// }
function showfirstView(data) {
if (data.type == '4') {
$("#curve_id").val(data.id);
showProgrammeCurveView();
} else {
if (data.nodes.length > 0) {
showfirstView(data.nodes[0]);
}
}
}
function doPersonPEdit(id) {
event.stopPropagation();
$.post(ext.contextPath + '/data/showCurveEdit2.do', {unitId: hiddenUnitId, id: id}, function (data) {
$("#subDiv").html(data);
openModal('personSubModal');
});
}
var doPersonMPEdit = function (id) {
event.stopPropagation();
$.post(ext.contextPath + '/data/editMPoint2.do', {unitId: hiddenUnitId, id: id}, function (data) {
$("#subDiv").html(data);
openModal('subModal_CurveMp');
});
};
function doPersonMPDel(id) {
event.stopPropagation();
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 + '/data/deleteMPoint.do', {id: id}, function (data) {
if (data.code == 1) {
initProgrammeTreeView();
} else {
showAlert('d', '删除失败', 'alertDiv');
}
}, 'json');
}
});
}
function doPersonPDel(id) {
event.stopPropagation();
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 + '/data/deleteCurve2.do', {id: id}, function (data) {
if (data.code == 1) {
initProgrammeTreeView();
} else {
showAlert('d', result.msg);
}
}, 'json');
}
});
}
// $("#curve_tree").on("click", function (e) {
// event.stopPropagation();
// });
// //点击空白隐藏树
// $(document).click(function (e) {
// var divTree = $('#curve_tree'); // 设置目标区域
// if (!divTree.is(e.target) && divTree.has(e.target).length === 0) {
// divTree.hide()
// }
// });
//初始化测量点类型选择框
var refreshTypeSelect = function () {
var select = $("#sourceType").select2({
data: null,
placeholder: '请选择',//默认文字提示
allowClear: false,//允许清空
escapeMarkup: function (markup) {
return markup;
}, // 自定义格式化防止xss注入
language: "zh-CN",
minimumInputLength: 0,
minimumResultsForSearch: 10,//数据超过十个启用搜索框
});
select.val('-1').trigger("change");
};
var initMpListView = function () {
$.post(ext.contextPath + '/user/getUnitFromID.do', {id: hiddenUnitId}, function (data) {
if (data[0].type == '${UNIT_TYPE_COMPANY}') {
$('#mptableTop').css('display', 'block');
$('#singleBizDivTop').css('display', 'none');
$('#mptable').bootstrapTable('destroy');
$("#mptable").bootstrapTable({ // 对应table标签的id
url: ext.contextPath + '/work/mpoint/getCurvelist.do', // 获取表格数据的url
cache: false, // 设置为 false 禁用 AJAX 数据缓存, 默认为true
striped: true, //表格显示条纹默认为false
pagination: true, // 在表格底部显示分页组件默认false
pageList: [15], // 设置页面可以显示的数据条数
pageSize: 15, // 页面数据条数
pageNumber: 1, // 首页页码
sidePagination: "client", //分页方式client客户端分页server服务端分页*
paginationDetailHAlign: 'right',
queryParams: function (params) { // 请求服务器数据时发送的参数可以在这里添加额外的查询参数返回false则终止请求
return {
search_name: $('#mpsearch_name').val(),
pSectionId: $('#processSection').val(),
signalType: signalType,
sourceType: sourceType,
companyId: hiddenUnitId,
active: '启用'
}
},
columns: [
{
field: 'parmname', // 返回json数据中的name
title: '测量点名称', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle' // 上下居中
}, {
field: 'bizname', // 返回json数据中的name
title: '所属厂', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle' // 上下居中
}
],
onLoadSuccess: function () { //加载成功时执行
adjustBootstrapTableView("mptable");
},
onLoadError: function () { //加载失败时执行
console.info("加载数据失败");
},
onClickRow: function (row) {
showMPCurveView(row.id, row.bizid);
}
});
} else if (data[0].type == '${UNIT_TYPE_BIZ}') {
$('#singleBizDivTop').css('display', 'block');
$('#mptableTop').css('display', 'none');
$.post(ext.contextPath + '/work/mpoint/getTreeFomProcessSection.do', {
unitId: data[0].id,
mpsearchname: $('#mpsearch_name').val(),
signalType: signalType,
sourceType: sourceType,
pSectionId: $('#processSection').val()
}, function (data) {
if ($('#mpsearch_name').val() != '') {
$('#singleBizDiv').treeview({
data: data,
levels: 2,
multiSelect: true
});
} else {
$('#singleBizDiv').treeview({
data: data,
levels: 1,
multiSelect: true
});
}
// $('#singleBizDiv').treeview('disableAll', { silent: true });
// $('#singleBizDiv').treeview('disableNode', [ 1, { silent: true } ]);
// $('#tree').treeview('toggleNodeChecked', [ nodeId, { silent: true } ]);
$('#singleBizDiv').on('nodeSelected', function (event, data) {
// console.log(data);
if (data.type == "l1") { //判断该节点是否被禁用
// console.log("禁用")
data.Selected = false;
// return false; //防止该节点被选中
} else {
nodeIds.push({
nodeId: data.nodeId,
mpid: data.id
})
showMPCurveView(data.id, data.bizid);
}
});
$('#singleBizDiv').on('nodeUnselected', function (event, data) {
// console.log(data);
let unckNodeId = data.nodeId;
if (data.type != 'l1') {
// nodeIds = nodeIds.replace(unckNodeId+",");
for (let i = 0; i < nodeIds.length; i++) {
if (unckNodeId == nodeIds[i].nodeId) {
nodeIds.splice(i, 1);
break;
}
}
var check = data.id + ":" + data.bizid + ",";
var oldmpids = $('#mpids').val();
var newmpids = oldmpids.replace(check, "");
hmpids = newmpids;
$('#mpids').val(newmpids);
$('#deleteDatadrop').hide();
if (hmpids == "") {
hmpids = "";
mychart = "";
option = [];
$('#mpids').val("");
$("#chart").html("");
} else {
dosearch();
}
}
});
}, 'json');
}
}, 'json');
};
var hiddenUnitId = "";
var urlUnitId = "${param.urlUnitId}";//通过路径地址传参,直接显示该测量点
var windowghight = $(window).height() - 35;
$(function () {
$("#company").hide();
var chooseunitId = "";
if (urlUnitId != '' && urlUnitId.length > 0) {
chooseunitId = urlUnitId;
hiddenUnitId = urlUnitId;
showMPCurveView("${param.urlMpid}", urlUnitId);
} else {
chooseunitId = unitId;
let firstIn = 'true';
if ('${param.urlMpid}' != null && '${param.urlMpid}' != '' && '${param.urlMpid}'.length > 0) {
firstIn = 'false';
} else {
$.post(ext.contextPath + '/data/showCurveView.do?firstIn=' + firstIn, {
unitId: hiddenUnitId
}, function (data) {
$("#menuBox").html(data);
});
}
}
// initMpListView();
$('#leftBox').attr("style", "height:" + windowghight + "px;overflow-x:visible;padding:0px;");
$('#menuBox').attr("style", "height:" + windowghight + "px;");
refreshTypeSelect();
//简易公司combotree
$.post(ext.contextPath + '/user/getUnitForTreeFromTop.do', {unitId: chooseunitId}, function (data) {
var bizType = "";
if (data.length == 1 && !data[0].hasOwnProperty("nodes")) {
//当登陆者的pid以下没有子节点时显示单独一个span
$("#hiddenUnitId").val(data[0].id);
$("#companyselect").hide();
$("#company").show();
$("#company").text("公 司:" + data[0].text);
hiddenUnitId = data[0].id;
bizType = data[0].type;
initProgrammeTreeView();
initMpListView();
//initFun();
} else if ((data.length == 1 && data.nodes != "") || data.length > 1) {
//第一次加载时赋值
$("#company").hide();
$("#hiddenUnitId").val(data[0].id);
$("#cname_input").val(data[0].text);
hiddenUnitId = data[0].id;
bizType = data[0].type;
initProgrammeTreeView();
initMpListView();
//initFun();
//$table.bootstrapTable('refresh');//异步加载重新刷新,待修改
$('#companytree').treeview({
data: data,
showBorder: false,
levels: 3,
});
$('#companytree').on('nodeSelected', function (event, data) {
$("#hiddenUnitId").val(data.id);
$("#cname_input").val(data.text);
document.getElementById('ul_tree').style.display = "none";
hiddenUnitId = data.id;
initProgrammeTreeView();
initMpListView();
//initFun();
});
} else {
//待完善
}
$.post(ext.contextPath + "/user/processSection/getProcessSection4Select.do", {companyId: hiddenUnitId}, function (data) {
$("#processSection").empty();
var selelct_ = $("#processSection").select2({
data: data,
cache: false,
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;
} // 函数用于呈现当前的选择
});
$(".select2-selection--single").css({'height': '30px', 'paddingTop': '4px'})
selelct_.val('').trigger("change");
selelct_.on("change", function (e) {
// $("#mptable").bootstrapTable('refresh');
initMpListView();
});
}, 'json');
}, '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()
}
})
getTitleContent("单击点位绘制曲线", "helpTitle_id_1");
getTitleContent("单击方案绘制曲线", "helpTitle_id_2");
});
function getTitleContent(title, id) {
// 给需要提示的元素绑定鼠标悬浮事件
$('#' + id).hover(function (e) {
// 鼠标悬浮时显示提示内容
// var title = $(this).attr('title');
// var title = "";
$(this).attr('data-title', title);
$(this).removeAttr('title');
$('<div class="helpTitle-content"></div>').text(title).appendTo('body').fadeIn();
let mouseX = e.pageX + 15;
let mouseY = e.pageY;
$('.helpTitle-content').css('top', mouseY + 'px');
$('.helpTitle-content').css('left', mouseX + 'px');
}, function () {
// 鼠标移出时隐藏提示内容
$(this).attr('title', $(this).attr('data-title'));
$('.helpTitle-content').remove();
});
}
var signalType = "-1";
var sourceType = "-1";
function changeSignalType(obj) {
var value = $(obj).val();
signalType = value;
initMpListView();
}
function changeSourceType(obj) {
var value = $(obj).val();
sourceType = value;
initMpListView();
}
function doHiddenDiv() {
// var sh=$('#searchHiddenDiv').css("display");
$("#searchHiddenDiv").slideToggle("slow");
// $("#searchHiddenDiv").slideDown();
// if(sh=="none"){
// $('#searchHiddenDiv').css("display","block");
// }else{
// $('#searchHiddenDiv').css("display","none");
// }
}
</script>
<style type="text/css">
.table tbody tr td {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* .pagination-detail{
display: none;
} */
.pull-right.pagination-detail {
display: none;
}
</style>
</head>
<body onload="initMenu()" class="hold-transition ${cu.themeclass} sidebar-mini" style="overflow: hidden;">
<div class="wrapper">
<!-- 引用top -->
<%-- <jsp:include page="/jsp/top.jsp"></jsp:include> --%>
<!-- 菜单栏 -->
<%-- <jsp:include page="/jsp/left.jsp"></jsp:include> --%>
<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="subDetailDiv"></div>
<div id="mpSubDiv"></div>
<div id="mpSelectDiv"></div>
<div id="fileInputDiv"></div>
<div id="leftBox" class="col-md-3">
<div class="box box-solid" style="height:100%;margin-bottom:0px;overflow: auto;overflow-x: hidden;">
<div class="form-group form-inline" style="padding-top:5px;padding-left:5px;margin-bottom: 0px;">
<!-- <div class="form-group " style="margin-bottom:10px;"> -->
<input id="hiddenUnitId" name="hiddenUnitId" type="hidden"/>
<input id="curve_id" name="curve_id" type="hidden"/>
<!-- </div> -->
<label class="form-label" id="company"
style="margin-left:39px;border: none;background: transparent;"></label>
<ul id="companyselect" style="list-style-type:none;padding-left:0px;width:300px;">
<li class="dropdown" style="width:300px;">
<!-- Menu toggle button -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
style="width:300px;"
onclick="document.getElementById('ul_tree').style.display = 'block';">
<div class="input-group">
<span class="input-group-addon"
style="height:31px;color:#000000;border-top-left-radius: 4px;border-bottom-left-radius: 4px;font-weight:bold">公司:</span>
<input class="form-control " id="cname_input" name="cname_input"
style="height:31px;width: 218px;border-top-right-radius: 4px;border-bottom-right-radius: 4px;"
readonly/>
</div><!-- /input-group -->
</a>
<ul id="ul_tree" class="dropdown-menu" data-stopPropagation="true">
<li class="header">
<div id="companytree" style="width: 275px;overflow:auto;"></div>
</li>
</ul>
</li>
</ul>
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#tab1" data-toggle="tab"
index="0" aria-expanded="true">测量点清单</a></li>
<li class=""><a href="#tab2" data-toggle="tab" index="1"
aria-expanded="true">曲线方案</a></li>
</ul>
<div class="tab-content no-padding">
<div class="chart tab-pane active" id="tab1"
style="position: relative; padding:5px;">
<div class="box-header with-border">
<ul style="list-style-type:none;padding-left:0px;margin-bottom:5px;">
<!-- Menu toggle button -->
<div class="form-group pull-left form-inline" style="float: left;width: 100%;">
<div class="input-group input-group-sm " style="float: left;width: 180px;">
<input type="text" id="mpsearch_name" name="mpsearch_name"
class="form-control pull-right" placeholder="点位查询">
<div class="input-group-btn">
<button class="btn btn-default" onclick="initMpListView();"><i
class="fa fa-search"></i></button>
</div>
</div>
<div id="helpTitle_id_1" class="helpTitle"
style="float: left;width: 18px;height: 18px;margin-left: 10px;margin-top: 8px;">
<i class="fa fa-question-circle" aria-hidden="true"></i>
</div>
<i class="fa fa-arrows-alt pull-right"
style="line-height:35px;cursor: pointer;"
onclick="doHiddenDiv();"></i>
</div>
<div id="searchHiddenDiv" style="display: none;width: 100%;">
<div class="form-group pull-left form-inline"
style="float: left;width: 100%;margin-top: 5px;">
<label class="col-sm-2 control-label"
style="line-height: 30px;padding: 0px;">信号类型</label>
<div class="col-sm-4 control-label">
<select id="signalType" name="signalType"
class="form-control select2"
style="padding: 0px;width: 60px;height: 30px;border-radius:4px;border:1px solid #aaa;"
onchange="changeSignalType(this);">
<option value="-1">全部</option>
<option value="AI">AI</option>
<option value="DI">DI</option>
</select>
</div>
<label class="col-sm-2 control-label"
style="line-height: 30px;padding: 0px;">采集类型</label>
<div class="col-sm-4 control-label">
<select id="sourceType" name="sourceType"
class="form-control select2"
style="padding: 0px;width: 120px;height: 30px;border-radius:4px;border:1px solid #aaa;"
onchange="changeSourceType(this);">
<option value="-1">全部</option>
<option value="${Flag_Type_Data}">自控采集点</option>
<option value="${Flag_Type_Hand}">手动录入点</option>
<option value="${Flag_Type_KPI}">KPI计算点</option>
<option value="${Flag_Type_Model}">模型预测点</option>
</select>
</div>
</div>
<div class="form-group pull-left form-inline"
style="float: left;width: 100%;margin-top: 5px;">
<label class="col-sm-2 control-label"
style="line-height: 30px;padding: 0px;">工艺段</label>
<div class="col-sm-10 control-label">
<select class="form-control select2 " id="processSection"
name="processSection"
style="padding: 0px;width:250px;height:30px;"></select>
</div>
</div>
</div>
</ul>
<!-- <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 id="mptableTop" class="box-body no-padding" style="display: none;">
<table id="mptable" class="table table-bordered distable"
style="table-layout:fixed;"></table>
</div>
<div id="singleBizDivTop" class="box-body no-padding" style="display: none;">
<div id="singleBizDiv"
style="float: left;width: 100%;height: 100%;overflow:auto;"></div>
</div>
</div>
<div class=" tab-pane" id="tab2"
style="position: relative; padding:5px;overflow:hidden">
<div class="box-header with-border">
<ul style="list-style-type:none;padding-left:0px;margin-bottom:5px;">
<!-- Menu toggle button -->
<div class="form-group pull-left form-inline" style="float: left;width: 100%;">
<div class="input-group input-group-sm " style="float: left;width: 180px;">
<input type="text" id="mpsearch_Program_name"
name="mpsearch_Program_name"
class="form-control pull-right" placeholder="方案查询">
<div class="input-group-btn">
<button class="btn btn-default" onclick="initProgrammeTreeView();">
<i
class="fa fa-search"></i></button>
</div>
</div>
<div id="helpTitle_id_2" class="helpTitle"
style="float: left;width: 18px;height: 18px;margin-left: 10px;margin-top: 8px;">
<i class="fa fa-question-circle" aria-hidden="true"></i>
</div>
</div>
</ul>
<!-- <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 id="curveProgramTree" style="height:100%;overflow:auto;"></div>
</div>
</div>
<!-- <ul id="curveselect" style="list-style-type:none;padding-left:0px;width:200px;margin-bottom: 0px;">
<li class="dropdown" style="width:200px;">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" style="width:200px;"
onclick="document.getElementById('curve_tree').style.display = 'block';">
<div class="input-group">
<span class="input-group-addon"
style="height:31px;color:#000000;border-top-left-radius: 4px;border-bottom-left-radius: 4px;font-weight:bold">曲线方案:</span>
<input class="form-control " id="curve_input" name="curve_input"
style="height:31px;width: 190px;border-top-right-radius: 4px;border-bottom-right-radius: 4px;cursor:pointer;"
readonly />
</div>
</a>
<ul id="curve_tree" class="dropdown-menu" data-stopPropagation="true" style="border-color:#ccc;">
<li class="header">
<div id="curvetree" style="width: 275px;height:400px;overflow-y:scroll;overflow-x:hidden;"></div>
</li>
</ul>
</li>
</ul> -->
<!-- -->
</div>
<!-- <div class="box-body no-padding" >
</div> -->
<!-- /.box-body -->
</div>
<!-- <div class="box box-solid" style="height:60%;margin-bottom:0px;overflow: auto;overflow-x: hidden;">
</div> -->
</div>
<div class="col-md-9" id="menuBox" style="height: 100%;">
</div>
</section>
<!-- /.content -->
</div>
<%-- <jsp:include page="/jsp/bottom.jsp"></jsp:include> --%>
<%-- <jsp:include page="/jsp/side.jsp"></jsp:include> --%>
</div>
</body>
</html>

View File

@ -0,0 +1,724 @@
<%@ 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 beginTimeStore1 = '';
var endTimeStore1 = '';
var colors = ['#00c200', '#d14a61', '#675bba', '#5793f3'];
function initDate1() {
//定义locale汉化插件
beginTimeStore1 = moment().subtract(1, 'hours').format('YYYY-MM-DD HH:mm');;
endTimeStore1 = moment().format('YYYY-MM-DD HH:mm');
/* if(${param.sdt!=''}){
beginTimeStore1='2018-08-09';
}
if(${param.edt!=''}){
endTimeStore1='2018-08-10';
} */
var locale = {
"format": 'YYYY-MM-DD HH:mm',
"separator": " ~ ",
"applyLabel": "确定",
"cancelLabel": "取消",
"fromLabel": "起始时间",
"toLabel": "结束时间'",
"customRangeLabel": "自定义",
"weekLabel": "W",
"daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"],
"monthNames": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
"firstDay": 1
};
$('#reservationtime1').daterangepicker({
"timePicker": true,
"timePicker24Hour": true,
"linkedCalendars": false,
"autoUpdateInput": false,
"timePickerIncrement": 10,
"locale": locale,
//汉化按钮部分
ranges: {
'1小时': [moment().subtract(1, 'hours'), moment()],
'8小时': [moment().subtract(8, 'hours'), moment()],
'24小时': [moment().subtract(24, 'hours'), moment()],
},
startDate: beginTimeStore1,
endDate: endTimeStore1
}, function (start, end, label) {
beginTimeStore1 = start.format(this.locale.format);
endTimeStore1 = end.format(this.locale.format);
if (!this.startDate) {
this.element.val('');
} else {
this.element.val(this.startDate.format(this.locale.format) + this.locale.separator + this.endDate.format(this.locale.format));
}
});
$('#reservationtime1').val(beginTimeStore1 + locale.separator + endTimeStore1);
//展示测量点曲线
getMpointJson();
};
var companyId = "";
/* var editFun = function(id) {
$.post(ext.contextPath + '/data/showCurveView.do', {companyId:companyId,id:id} , function(data) {
$("#menuBox").html(data);
});
};
var initTreeView = function() {
$.post(ext.contextPath + '/data/getCurvesJson.do', {ng:''} , function(data) {
//console.info(data)
$('#tree').treeview({data: data
});
$('#tree').on('nodeSelected', function(event, data) {
editFun(data.id);
//var node=$('#tree').treeview('getSelected');
});
},'json');
$("#menuBox").html("");
}; */
var mpcodestr = "";
var mpnamestr = "";
var mpunitstr = "";
var optionArr = new Array();
var colors = ['#00c200', '#d14a61', '#675bba', '#5793f3'];
function getMpointJson() {
$.post(ext.contextPath + "/data/energyAnalysis/getMPointJson.do", { companyId: companyId, key: "${param.key}" }, function (data) {
//var rows = data.rows;
var ArrayDatas = eval("(" + data + ")").rows;
var mpcode = [];
for (var i = 0; i < ArrayDatas.length; i++) {
mpcode.push(ArrayDatas[i].mPoint.mpointcode);
mpcodestr += ArrayDatas[i].mPoint.mpointcode + ",";//测量点code
mpnamestr += ArrayDatas[i].mPoint.parmname + ",";//测量点名称
mpunitstr += ArrayDatas[i].mPoint.unit + ",";//测量点单位
}
console.log(mpcodestr);
getHistoryList(mpcodestr, mpnamestr);
getHistoryJsons(mpcodestr, mpnamestr, mpunitstr);
});
//console.log(idArr.length);
};
function getHistoryJsons(ids, names, units) {
console.log(ids);
console.log(names);
console.log(units);
$.post(ext.contextPath + "/work/mpoint/getHistory.do", { bizId: companyId, ids: ids, sdt: beginTimeStore1, edt: endTimeStore1 }, function (data) {
var ArrayDatas = eval("(" + data + ")");
console.log(ArrayDatas);
var measuredt = [];
var res = ArrayDatas[0];
for (var i = 0; i < res.length; i++) {
measuredt.push(res[i].measuredt.substring(0, 16));
}
var parmvalue = [];
var mpnamestr = names.substring(0, names.length - 1);
mpnamestr = mpnamestr.split(",");
var mpunitstr = units.substring(0, units.length - 1);
mpunitstr = mpunitstr.split(",");
var offset = 60;
var yaAxis = [];
var series = [];
for (var i = 0; i < mpnamestr.length; i++) {
var xobj = {};
xobj.type = 'value';
xobj.name = mpnamestr[i];
if (i == 0) {
xobj.position = 'left';
xobj.offset = 0;
} else {
xobj.position = 'right';
xobj.offset = offset * (i - 1);
}
var axisLine = {};
var lineStyle = {};
var length = mpnamestr.length - 1;
lineStyle.color = colors[i % colors.length];
axisLine.lineStyle = lineStyle;
xobj.axisLine = axisLine;
var axisLabel = {};
axisLabel.formatter = '{value}' + mpunitstr[i];
xobj.axisLabel = axisLabel;
xobj.min = function (value) {
return value.min;
}
yaAxis.push(xobj);
var yobj = {};
yobj.type = 'line';
yobj.name = mpnamestr[i];
yobj.yAxisIndex = i;
var data = [];
for (var j = 0; j < measuredt.length; j++) {
var resy = ArrayDatas[i];
data.push(resy[j].parmvalue);
}
yobj.data = data;
var markPoint = {};
var str = '{"data": [{"type": "max", "name": "最大值", "itemStyle": {"color": "red"}},{"type": "min", "name": "最小值", "itemStyle": {"color": "green"}}]}';
yobj.markPoint = JSON.parse(str);
str = '{"data": [{"type": "average", "name": "平均值"}]}';
yobj.markLine = JSON.parse(str);
series.push(yobj);
};
var option = {
color: colors,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
grid: {
right: '10%'
},
toolbox: {
feature: {
dataView: { show: false, readOnly: false },
restore: { show: false },
saveAsImage: { show: false }
}
},
legend: {
data: mpnamestr
},
xAxis: [
{
type: 'category',
axisTick: {
alignWithLabel: true
},
data: measuredt,
axisLabel: {
//interval: 1000,//横坐标间隔
rotate: 340,//横坐标倾斜角度
//倾斜度 -90 至 90 默认为0  
// margin: 2,
/* textStyle: {
fontWeight: "bolder",
color: "#000000"
} */
},
}
],
yAxis: yaAxis,
series: series
};
var chart = document.getElementById("chart");
var number = mpnamestr.length;
console.log(offset);
//chart.style.width = $("#chartdiv").width()+offset*number+300+'px';
//chart.style.height = 250+'px';
$("#chart").height($("#chartdiv").height() - 50);
$("#chart").width($("#chartdiv").width());
//$("#chart").width(700);
var chartData = echarts.init(chart);
//setTimeout(function(){
chartData.setOption(option);
/* 水球图 */
var bottleChart = echarts.init(document.getElementById('bottlediv'));
optionv = {
/*graphic: {
elements: [{
type: 'text',
style: {
text: "NaOH",
font: "18px Microsoft YaHei",
fill: "#4169B1",
},
left: 'center',
top: 'bottom'
}]
},*/
series: [{
type: 'liquidFill',
data: [{
value: 0.5,
direction: 'left',
itemStyle: {
normal: {
color: '#FFCB65'
}
}
}],
radius: '90%',
outline: {
show: false
},
backgroundStyle: {
borderColor: '#156ACF',
borderWidth: 1,
shadowColor: 'rgba(0, 0, 0, 0.4)',
shadowBlur: 20
},
shape: bucketPath,
label: {
normal: {
textStyle: {
fontSize: 40,
color: '#D94854'
}
}
}
}]
};
bottleChart.setOption(optionv);
/* 后加1#投加 */
var backChart1 = echarts.init(document.getElementById('backChart1'));
optionBack1 = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#283b56'
}
}
},
title: [{
x: "left",
text: '1#',
textStyle: {
fontWeight: 'normal',
fontSize: 20,
},
}],
grid: {
left: '10%',
right: '10%',
bottom: '10%',
top: '10%',
},
legend: {
left: 'center',
itemGap: 100,
textStyle: {
fontSize: 20
},
data: ['出厂余氯', '余氯高限','投加比例']
},
dataZoom: {
show: false,
start: 0,
end: 100
},
xAxis: [
{
type: 'category',
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: [{
type: 'value',
scale: true,
//max: 1200,
min: 0,
boundaryGap: [0.2, 0.2]
},
{
type: 'value',
scale: true,
splitLine: {
show: false,
},
//max: 30,
min: 0,
boundaryGap: [0.2, 0.2]
}
],
series: [
{
name: '出厂余氯',
type: 'line',
itemStyle: {
color: '#E7AC28',
borderWidth: 1,
},
lineStyle: {
width: 3,
},
data: (function () {
var res = [];
var len = 24;
while (len--) {
res.push(Math.round(Math.random() * 1000));
}
return res;
})()
},
{
name: '余氯高限',
type: 'line',
itemStyle: {
color: '#75BC63',
borderWidth: 1,
},
lineStyle: {
width: 3,
},
data: [1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100]
}, {
name: '投加比例',
type: 'line',
xAxisIndex: 1,
yAxisIndex: 1,
itemStyle: {
color: '#D12FD6',
borderWidth: 1,
},
lineStyle: {
width: 3,
},
data: (function () {
var res = [];
var len = 0;
while (len < 24) {
res.push((Math.random() * 10 + 5).toFixed(1) - 0);
len++;
}
return res;
})()
}
]
};
backChart1.setOption(optionBack1);
/* 后加2#投加 */
var backChart2 = echarts.init(document.getElementById('backChart2'));
optionBack2 = {
title: [{
x: "left",
text: '2#',
textStyle: {
fontWeight: 'normal',
fontSize: 20,
},
}],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#283b56'
}
}
},
grid: {
left: '10%',
right: '10%',
bottom: '10%',
top: '10%',
},
legend: {
left: 'center',
itemGap: 100,
textStyle: {
fontSize: 20
},
data: ['出厂余氯', '余氯高限','投加比例']
},
dataZoom: {
show: false,
start: 0,
end: 100
},
xAxis: [
{
type: 'category',
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: [{
type: 'value',
scale: true,
//max: 1200,
min: 0,
boundaryGap: [0.2, 0.2]
},
{
type: 'value',
scale: true,
splitLine: {
show: false
},
//max: 30,
min: 0,
boundaryGap: [0.2, 0.2]
}
],
series: [
{
name: '出厂余氯',
type: 'line',
itemStyle: {
color: '#E7AC28',
borderWidth: 1,
},
lineStyle: {
width: 3,
},
data: (function () {
var res = [];
var len = 24;
while (len--) {
res.push(Math.round(Math.random() * 1000));
}
return res;
})()
},
{
name: '余氯高限',
type: 'line',
itemStyle: {
color: '#75BC63',
borderWidth: 1,
},
lineStyle: {
width: 3,
},
data: [1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100]
}, {
name: '投加比例',
type: 'line',
xAxisIndex: 1,
yAxisIndex: 1,
itemStyle: {
color: '#D12FD6',
borderWidth: 1,
},
lineStyle: {
width: 3,
},
data: (function () {
var res = [];
var len = 0;
while (len < 24) {
res.push((Math.random() * 10 + 5).toFixed(1) - 0);
len++;
}
return res;
})()
}
]
};
backChart2.setOption(optionBack2);
});
}
function getHistoryList(ids, names) {
var idarr = ids.substring(0, ids.length - 1);
idarr = idarr.split(",");
var namearr = names.substring(0, names.length - 1);
namearr = namearr.split(",");
console.log(idarr);
var length = idarr.length;
var mpoint = [];
var checkobx = {};
checkobx.checkbox = true;
//mpoint.push(checkobx);
var measuredt = {};
measuredt.field = 'measuredt';
measuredt.title = '时间';
measuredt.align = 'center';
measuredt.valign = 'middle';
measuredt.width = 150;
mpoint.push(measuredt);
for (var i = 0; i < idarr.length; i++) {
var color = colors[i % idarr.length];
var parmvalue = {};
parmvalue.field = 'paramvalue' + i;
parmvalue.title = namearr[i];
parmvalue.align = 'center';
parmvalue.valign = 'middle';
//parmvalue.width=60;
var css1 = {};
css1.color = color;
var cellstyle = {};
cellstyle.css = css1;
parmvalue.cellStyle = cellstyle,
mpoint.push(parmvalue);
};
};
function dosearch() {
mpcodestr = "";
mpnamestr = "";
mpunitstr = "";
optionArr = new Array();
getMpointJson();
}
$(function () {
$.post(ext.contextPath + "/user/getSearchBizsByUserId4Select.do", {}, function (data) {
if (data.length == 1) {
//选择厂区为一个厂时隐藏选择框
$("#search_code").css("display", "none");
$("#company").text(data[0].text);
companyId = data[0].id;
} else {
$("#company").css("display", "none");
var selelct = $("#search_code").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; } // 函数用于呈现当前的选择
});
$(".select2-selection--single").css({ 'height': '30px', 'paddingTop': '4px' })
selelct.val('').trigger("change");
//refreshSelect();
selelct.on("change", function (e) {
companyId = $(this).val();
});
}
initDate1();
}, 'json');
//initTreeView();
});
</script>
</head>
<body onload="initMenu()" class="hold-transition ${cu.themeclass} sidebar-mini">
<div class="wrapper">
<!-- 引用top -->
<%--<jsp:include page="/jsp/side.jsp"></jsp:include> --%>
<!-- 菜单栏 -->
<jsp:include page="/jsp/left.jsp"></jsp:include>
<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="mpSubDiv"></div>
<div class="form-group">
<label class="form-label" id="companylabel">水厂:</label>
<label class="form-label" id="company"
style="width:180px;border: none;background: transparent;"></label>
<select class="form-control select2 " id="search_code" name="search_code"
style="width: 220px;"></select>
</div>
<div class="input-group pull-right input-group-sm">
<input type="text" class="form-control pull-left" id="reservationtime1" style="width:225px">
<div class="input-group-btn pull-left">
<button type="button" class="btn btn-default" onclick="dosearch();"><i class="fa fa-search"></i>
查询</button>
</div>
</div>
<div class="col-sm-3 col-md-3 col-lg-3 col-xl-3">
<br />
<div id="bottlediv" style="height:200px;width:200px;margin:auto;"></div>
<div style="text-align: center">
<span style="font-size: 28px;color: #FFCB65;">加氯系统储液罐</span>
</div>
<br />
<table style="width:100%;height:100%;">
<tr>
<td align="left"><img src="<%=request.getContextPath()%>/IMG/time.png" width="70px"
height="70px" /></td>
<td>
<span style="font-size:28px;color:#2C4975;display: block;">氯储备可用</span>
<span style="font-size:28px;color:#2C4975;display: block;">时间(h)</span>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<span id="clTime" style="font-size:50px;">20小时</span>
</td>
</tr>
</table>
</div>
<div class="col-sm-9 col-md-9 col-lg-9 col-xl-9" style="padding:0px;overflow:hidden;overflow-y:hidden"
id="chartdiv">
<span style="font-size:35px;font-weight: bold">前加:</span>
<div id="chart" style="height:400px;"></div>
</div>
<div class="col-sm-3 col-md-3 col-lg-3 col-xl-3"></div>
<div class="col-sm-9 col-md-9 col-lg-9 col-xl-9" style="padding:0px;overflow:hidden;overflow-y:hidden"
id="chartdiv">
<span style="font-size:35px;font-weight: bold">后加:</span>
<div id="backChart1" style="height:300px;"></div>
<br />
<div id="backChart2" style="height:300px;"></div>
</div>
</section>
<!-- /.content -->
</div>
<%-- <jsp:include page="/jsp/bottom.jsp"></jsp:include> --%>
<jsp:include page="/jsp/side.jsp"></jsp:include>
</div>
</body>
<!-- echarts-->
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/echarts/echarts.4.1.0.min.js"
charset="utf-8"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/echarts/echarts-liquidfill.js"
charset="utf-8"></script>
<!-- 引入daterangepicker-->
<link rel="stylesheet" href="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.css" />
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/moment.min.js"
charset="utf-8"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.js"
charset="utf-8"></script>
</html>

View File

@ -0,0 +1,374 @@
<%@ 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 beginTimeStore1 = '';
var endTimeStore1 = '';
var colors = ['#00c200', '#d14a61', '#675bba','#5793f3'];
function initDate1() {
//定义locale汉化插件
beginTimeStore1 = moment().subtract(1, 'hours').format('YYYY-MM-DD HH:mm');;
endTimeStore1 = moment().format('YYYY-MM-DD HH:mm');
/* if(${param.sdt!=''}){
beginTimeStore1='2018-08-09';
}
if(${param.edt!=''}){
endTimeStore1='2018-08-10';
} */
var locale = {
"format": 'YYYY-MM-DD HH:mm',
"separator": " ~ ",
"applyLabel": "确定",
"cancelLabel": "取消",
"fromLabel": "起始时间",
"toLabel": "结束时间'",
"customRangeLabel": "自定义",
"weekLabel": "W",
"daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"],
"monthNames": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
"firstDay": 1
};
$('#reservationtime1').daterangepicker({
"timePicker": true,
"timePicker24Hour": true,
"linkedCalendars": false,
"autoUpdateInput": false,
"timePickerIncrement": 10,
"locale": locale,
//汉化按钮部分
ranges: {
'1小时': [moment().subtract(1, 'hours'), moment()],
'8小时': [moment().subtract(8, 'hours'), moment()],
'24小时': [moment().subtract(24, 'hours'), moment()],
},
startDate: beginTimeStore1,
endDate: endTimeStore1
}, function(start, end, label) {
beginTimeStore1 = start.format(this.locale.format);
endTimeStore1 = end.format(this.locale.format);
if(!this.startDate){
this.element.val('');
}else{
this.element.val(this.startDate.format(this.locale.format) + this.locale.separator + this.endDate.format(this.locale.format));
}
});
$('#reservationtime1').val(beginTimeStore1 + locale.separator + endTimeStore1);
//展示测量点曲线
getMpointJson();
};
var companyId="";
/* var editFun = function(id) {
$.post(ext.contextPath + '/data/showCurveView.do', {companyId:companyId,id:id} , function(data) {
$("#menuBox").html(data);
});
};
var initTreeView = function() {
$.post(ext.contextPath + '/data/getCurvesJson.do', {ng:''} , function(data) {
//console.info(data)
$('#tree').treeview({data: data
});
$('#tree').on('nodeSelected', function(event, data) {
editFun(data.id);
//var node=$('#tree').treeview('getSelected');
});
},'json');
$("#menuBox").html("");
}; */
var mpcodestr="";
var mpnamestr="";
var mpunitstr="";
var optionArr= new Array();
var colors = ['#00c200', '#d14a61', '#675bba','#5793f3'];
function getMpointJson(){
$.post(ext.contextPath +"/data/energyAnalysis/getMPointJson.do",{companyId:companyId,key:"${param.key}"},function(data){
//var rows = data.rows;
var ArrayDatas = eval("(" + data + ")").rows;
var mpcode = [];
for (var i=0;i<ArrayDatas.length;i++){
mpcode.push(ArrayDatas[i].mPoint.mpointcode);
mpcodestr+=ArrayDatas[i].mPoint.mpointcode+",";//测量点code
mpnamestr+=ArrayDatas[i].mPoint.parmname+",";//测量点名称
mpunitstr+=ArrayDatas[i].mPoint.unit+",";//测量点单位
}
console.log(mpcodestr);
getHistoryList(mpcodestr,mpnamestr);
getHistoryJsons(mpcodestr,mpnamestr,mpunitstr);
});
//console.log(idArr.length);
};
function getHistoryJsons(ids,names,units){
console.log(ids);
console.log(names);
console.log(units);
$.post(ext.contextPath +"/work/mpoint/getHistory.do",{bizId:companyId,ids:ids,sdt:beginTimeStore1,edt:endTimeStore1},function(data){
var ArrayDatas = eval("(" + data + ")");
console.log(ArrayDatas);
var measuredt = [];
var res = ArrayDatas[0];
for(var i=0;i<res.length;i++){
measuredt.push(res[i].measuredt.substring(0,16));
}
var parmvalue = [];
var mpnamestr = names.substring(0, names.length-1);
mpnamestr = mpnamestr.split(",");
var mpunitstr = units.substring(0, units.length-1);
mpunitstr = mpunitstr.split(",");
var offset=60;
var yaAxis=[];
var series=[];
for(var i=0;i<mpnamestr.length;i++){
var xobj = {};
xobj.type='value';
xobj.name=mpnamestr[i];
if(i==0){
xobj.position='left';
xobj.offset=0;
}else{
xobj.position='right';
xobj.offset=offset*(i-1);
}
var axisLine={};
var lineStyle={};
var length=mpnamestr.length-1;
lineStyle.color=colors[i%colors.length];
axisLine.lineStyle=lineStyle;
xobj.axisLine=axisLine;
var axisLabel={};
axisLabel.formatter='{value}'+mpunitstr[i];
xobj.axisLabel=axisLabel;
xobj.min= function(value){
return value.min;
}
yaAxis.push(xobj);
var yobj = {};
yobj.type='line';
yobj.name=mpnamestr[i];
yobj.yAxisIndex=i;
var data =[];
for(var j=0;j<measuredt.length;j++){
var resy = ArrayDatas[i];
data.push(resy[j].parmvalue);
}
yobj.data=data;
var markPoint={};
var str ='{"data": [{"type": "max", "name": "最大值", "itemStyle": {"color": "red"}},{"type": "min", "name": "最小值", "itemStyle": {"color": "green"}}]}';
yobj.markPoint=JSON.parse(str);
str ='{"data": [{"type": "average", "name": "平均值"}]}';
yobj.markLine=JSON.parse(str);
series.push(yobj);
};
var option = {
color: colors,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
grid: {
right: '20%'
},
toolbox: {
feature: {
dataView: {show: false, readOnly: false},
restore: {show: false},
saveAsImage: {show: false}
}
},
legend: {
data:mpnamestr
},
xAxis: [
{
type: 'category',
axisTick: {
alignWithLabel: true
},
data: measuredt,
axisLabel: {
                    //interval: 1000,//横坐标间隔
                    rotate: 340,//横坐标倾斜角度
                    //倾斜度 -90 至 90 默认为0  
                   // margin: 2,
                   /* textStyle: {
                        fontWeight: "bolder",
                        color: "#000000"
                    } */
                },
}
],
yAxis:yaAxis,
series:series
};
var chart = document.getElementById("chart");
var number=mpnamestr.length;
console.log(offset);
//chart.style.width = $("#chartdiv").width()+offset*number+300+'px';
//chart.style.height = 250+'px';
$("#chart").height($("#chartdiv").height()-50);
$("#chart").width($("#chartdiv").width());
//$("#chart").width(700);
var chartData = echarts.init(chart);
//setTimeout(function(){
chartData.setOption(option);
});
}
function getHistoryList(ids,names){
var idarr = ids.substring(0, ids.length-1);
idarr = idarr.split(",");
var namearr = names.substring(0, names.length-1);
namearr = namearr.split(",");
console.log(idarr);
var length = idarr.length;
var mpoint = [];
var checkobx={};
checkobx.checkbox = true;
//mpoint.push(checkobx);
var measuredt={};
measuredt.field='measuredt';
measuredt.title='时间';
measuredt.align='center';
measuredt.valign='middle';
measuredt.width=150;
mpoint.push(measuredt);
for(var i=0;i<idarr.length;i++){
var color=colors[i%idarr.length];
var parmvalue={};
parmvalue.field = 'paramvalue'+i;
parmvalue.title=namearr[i];
parmvalue.align='center';
parmvalue.valign='middle';
//parmvalue.width=60;
var css1 = {};
css1.color = color;
var cellstyle = {};
cellstyle.css=css1;
parmvalue.cellStyle=cellstyle,
mpoint.push(parmvalue);
};
};
function dosearch(){
mpcodestr="";
mpnamestr="";
mpunitstr="";
optionArr= new Array();
getMpointJson();
}
$(function() {
$.post(ext.contextPath + "/user/getSearchBizsByUserId4Select.do", {}, function(data) {
if(data.length == 1){
//选择厂区为一个厂时隐藏选择框
$("#search_code").css("display", "none");
$("#company").text(data[0].text);
companyId=data[0].id;
}else{
$("#company").css("display", "none");
var selelct=$("#search_code").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;} // 函数用于呈现当前的选择
});
$(".select2-selection--single").css({'height':'30px','paddingTop':'4px'})
selelct.val('').trigger("change");
//refreshSelect();
selelct.on("change",function(e){
companyId= $(this).val();
});
}
initDate1();
},'json');
//initTreeView();
});
</script>
</head>
<body onload="initMenu()" class="hold-transition ${cu.themeclass} sidebar-mini">
<div class="wrapper">
<!-- 引用top -->
<%-- <jsp:include page="/jsp/top.jsp"></jsp:include> --%>
<!-- 菜单栏 -->
<%-- <jsp:include page="/jsp/left.jsp"></jsp:include> --%>
<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="mpSubDiv"></div>
<div class="form-group">
<label class="form-label" id="companylabel">水厂:</label>
<label class="form-label" id="company" style="width:180px;border: none;background: transparent;" ></label>
<select class="form-control select2 " id="search_code" name ="search_code" style="width: 220px;"></select>
</div>
<div class="input-group pull-right input-group-sm" >
<input type="text" class="form-control pull-left" id="reservationtime1" style="width:225px">
<div class="input-group-btn pull-left">
<button type="button" class="btn btn-default" onclick="dosearch();" ><i class="fa fa-search"></i> 查询</button>
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-12" style="height:450px;padding:0px;overflow:hidden;overflow-y:hidden" id="chartdiv">
<div id="chart" style=""></div>
</div>
</section>
<!-- /.content -->
</div>
<%-- <jsp:include page="/jsp/bottom.jsp"></jsp:include> --%>
<%-- <jsp:include page="/jsp/side.jsp"></jsp:include> --%>
</div>
</body>
<!-- echarts-->
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/echarts/echarts.js" charset="utf-8"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/echarts/macarons.js" charset="utf-8"></script>
<!-- 引入daterangepicker-->
<link rel="stylesheet" href="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.css"/>
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/moment.min.js" charset="utf-8"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.js" charset="utf-8"></script>
</html>

View File

@ -0,0 +1,373 @@
<%@ 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 beginTimeStore1 = '';
var endTimeStore1 = '';
var colors = ['#00c200', '#d14a61', '#675bba','#5793f3'];
function initDate1() {
//定义locale汉化插件
beginTimeStore1 = moment().subtract(7, 'days').format('YYYY-MM-DD HH:mm');;
endTimeStore1 = moment().format('YYYY-MM-DD HH:mm');
/* if(${param.sdt!=''}){
beginTimeStore1='2018-08-09';
}
if(${param.edt!=''}){
endTimeStore1='2018-08-10';
} */
var locale = {
"format": 'YYYY-MM-DD HH:mm',
"separator": " ~ ",
"applyLabel": "确定",
"cancelLabel": "取消",
"fromLabel": "起始时间",
"toLabel": "结束时间'",
"customRangeLabel": "自定义",
"weekLabel": "W",
"daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"],
"monthNames": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
"firstDay": 1
};
$('#reservationtime1').daterangepicker({
"timePicker": true,
"timePicker24Hour": true,
"linkedCalendars": false,
"autoUpdateInput": false,
"timePickerIncrement": 10,
"locale": locale,
//汉化按钮部分
ranges: {
'7天': [moment().subtract(7, 'days'), moment()],
'30天': [moment().subtract(30, 'days'), moment()],
},
startDate: beginTimeStore1,
endDate: endTimeStore1
}, function(start, end, label) {
beginTimeStore1 = start.format(this.locale.format);
endTimeStore1 = end.format(this.locale.format);
if(!this.startDate){
this.element.val('');
}else{
this.element.val(this.startDate.format(this.locale.format) + this.locale.separator + this.endDate.format(this.locale.format));
}
});
$('#reservationtime1').val(beginTimeStore1 + locale.separator + endTimeStore1);
//展示测量点曲线
getMpointJson();
};
var companyId="";
/* var editFun = function(id) {
$.post(ext.contextPath + '/data/showCurveView.do', {companyId:companyId,id:id} , function(data) {
$("#menuBox").html(data);
});
};
var initTreeView = function() {
$.post(ext.contextPath + '/data/getCurvesJson.do', {ng:''} , function(data) {
//console.info(data)
$('#tree').treeview({data: data
});
$('#tree').on('nodeSelected', function(event, data) {
editFun(data.id);
//var node=$('#tree').treeview('getSelected');
});
},'json');
$("#menuBox").html("");
}; */
var mpcodestr="";
var mpnamestr="";
var mpunitstr="";
var optionArr= new Array();
var colors = ['#00c200', '#d14a61', '#675bba','#5793f3'];
function getMpointJson(){
$.post(ext.contextPath +"/data/energyAnalysis/getMPointJson.do",{companyId:companyId,key:"${param.key}"},function(data){
//var rows = data.rows;
var ArrayDatas = eval("(" + data + ")").rows;
var mpcode = [];
for (var i=0;i<ArrayDatas.length;i++){
mpcode.push(ArrayDatas[i].mPoint.mpointcode);
mpcodestr+=ArrayDatas[i].mPoint.mpointcode+",";//测量点code
mpnamestr+=ArrayDatas[i].mPoint.parmname+",";//测量点名称
mpunitstr+=ArrayDatas[i].mPoint.unit+",";//测量点单位
}
console.log(mpcodestr);
getHistoryList(mpcodestr,mpnamestr);
getHistoryJsons(mpcodestr,mpnamestr,mpunitstr);
});
//console.log(idArr.length);
};
function getHistoryJsons(ids,names,units){
console.log(ids);
console.log(names);
console.log(units);
$.post(ext.contextPath +"/work/mpoint/getHistory.do",{bizId:companyId,ids:ids,sdt:beginTimeStore1,edt:endTimeStore1},function(data){
var ArrayDatas = eval("(" + data + ")");
console.log(ArrayDatas);
var measuredt = [];
var res = ArrayDatas[0];
for(var i=0;i<res.length;i++){
measuredt.push(res[i].measuredt.substring(0,16));
}
var parmvalue = [];
var mpnamestr = names.substring(0, names.length-1);
mpnamestr = mpnamestr.split(",");
var mpunitstr = units.substring(0, units.length-1);
mpunitstr = mpunitstr.split(",");
var offset=60;
var yaAxis=[];
var series=[];
for(var i=0;i<mpnamestr.length;i++){
var xobj = {};
xobj.type='value';
xobj.name=mpnamestr[i];
if(i==0){
xobj.position='left';
xobj.offset=0;
}else{
xobj.position='right';
xobj.offset=offset*(i-1);
}
var axisLine={};
var lineStyle={};
var length=mpnamestr.length-1;
lineStyle.color=colors[i%colors.length];
axisLine.lineStyle=lineStyle;
xobj.axisLine=axisLine;
var axisLabel={};
axisLabel.formatter='{value}'+mpunitstr[i];
xobj.axisLabel=axisLabel;
xobj.min= function(value){
return value.min;
}
yaAxis.push(xobj);
var yobj = {};
yobj.type='line';
yobj.name=mpnamestr[i];
yobj.yAxisIndex=i;
var data =[];
for(var j=0;j<measuredt.length;j++){
var resy = ArrayDatas[i];
data.push(resy[j].parmvalue);
}
yobj.data=data;
var markPoint={};
/* var str ='{"data": [{"type": "max", "name": "最大值", "itemStyle": {"color": "red"}},{"type": "min", "name": "最小值", "itemStyle": {"color": "green"}}]}';
yobj.markPoint=JSON.parse(str);
str ='{"data": [{"type": "average", "name": "平均值"}]}';
yobj.markLine=JSON.parse(str); */
series.push(yobj);
};
var option = {
color: colors,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
grid: {
right: '20%'
},
toolbox: {
feature: {
dataView: {show: false, readOnly: false},
restore: {show: false},
saveAsImage: {show: false}
}
},
legend: {
data:mpnamestr
},
xAxis: [
{
type: 'category',
axisTick: {
alignWithLabel: true
},
data: measuredt,
axisLabel: {
                    //interval: 1000,//横坐标间隔
                    rotate: 340,//横坐标倾斜角度
                    //倾斜度 -90 至 90 默认为0  
                   // margin: 2,
                   /* textStyle: {
                        fontWeight: "bolder",
                        color: "#000000"
                    } */
                },
}
],
yAxis:yaAxis,
series:series
};
var chart = document.getElementById("chart");
var number=mpnamestr.length;
console.log(offset);
//chart.style.width = $("#chartdiv").width()+offset*number+300+'px';
//chart.style.height = 250+'px';
$("#chart").height($("#chartdiv").height()-50);
$("#chart").width($("#chartdiv").width());
//$("#chart").width(700);
var chartData = echarts.init(chart);
//setTimeout(function(){
chartData.setOption(option);
});
}
function getHistoryList(ids,names){
var idarr = ids.substring(0, ids.length-1);
idarr = idarr.split(",");
var namearr = names.substring(0, names.length-1);
namearr = namearr.split(",");
console.log(idarr);
var length = idarr.length;
var mpoint = [];
var checkobx={};
checkobx.checkbox = true;
//mpoint.push(checkobx);
var measuredt={};
measuredt.field='measuredt';
measuredt.title='时间';
measuredt.align='center';
measuredt.valign='middle';
measuredt.width=150;
mpoint.push(measuredt);
for(var i=0;i<idarr.length;i++){
var color=colors[i%idarr.length];
var parmvalue={};
parmvalue.field = 'paramvalue'+i;
parmvalue.title=namearr[i];
parmvalue.align='center';
parmvalue.valign='middle';
//parmvalue.width=60;
var css1 = {};
css1.color = color;
var cellstyle = {};
cellstyle.css=css1;
parmvalue.cellStyle=cellstyle,
mpoint.push(parmvalue);
};
};
function dosearch(){
mpcodestr="";
mpnamestr="";
mpunitstr="";
optionArr= new Array();
getMpointJson();
}
$(function() {
$.post(ext.contextPath + "/user/getSearchBizsByUserId4Select.do", {}, function(data) {
if(data.length == 1){
//选择厂区为一个厂时隐藏选择框
$("#search_code").css("display", "none");
$("#company").text(data[0].text);
companyId=data[0].id;
}else{
$("#company").css("display", "none");
var selelct=$("#search_code").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;} // 函数用于呈现当前的选择
});
$(".select2-selection--single").css({'height':'30px','paddingTop':'4px'})
selelct.val('').trigger("change");
//refreshSelect();
selelct.on("change",function(e){
companyId= $(this).val();
});
}
initDate1();
},'json');
//initTreeView();
});
</script>
</head>
<body onload="initMenu()" class="hold-transition ${cu.themeclass} sidebar-mini">
<div class="wrapper">
<!-- 引用top -->
<%-- <jsp:include page="/jsp/top.jsp"></jsp:include> --%>
<!-- 菜单栏 -->
<%-- <jsp:include page="/jsp/left.jsp"></jsp:include> --%>
<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="mpSubDiv"></div>
<div class="form-group">
<label class="form-label" id="companylabel">水厂:</label>
<label class="form-label" id="company" style="width:180px;border: none;background: transparent;" ></label>
<select class="form-control select2 " id="search_code" name ="search_code" style="width: 220px;"></select>
</div>
<div class="input-group pull-right input-group-sm" >
<input type="text" class="form-control pull-left" id="reservationtime1" style="width:225px">
<div class="input-group-btn pull-left">
<button type="button" class="btn btn-default" onclick="dosearch();" ><i class="fa fa-search"></i> 查询</button>
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-12" style="height:450px;padding:0px;overflow:hidden;overflow-y:hidden" id="chartdiv">
<div id="chart" style=""></div>
</div>
</section>
<!-- /.content -->
</div>
<%-- <jsp:include page="/jsp/bottom.jsp"></jsp:include> --%>
<%-- <jsp:include page="/jsp/side.jsp"></jsp:include> --%>
</div>
</body>
<!-- echarts-->
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/echarts/echarts.js" charset="utf-8"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/echarts/macarons.js" charset="utf-8"></script>
<!-- 引入daterangepicker-->
<link rel="stylesheet" href="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.css"/>
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/moment.min.js" charset="utf-8"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.js" charset="utf-8"></script>
</html>

View File

@ -0,0 +1,419 @@
<%@ 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 beginTimeStore1 = '';
var endTimeStore1 = '';
function initDate1() {
//定义locale汉化插件
beginTimeStore1 = moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm');;
endTimeStore1 = moment().format('YYYY-MM-DD HH:mm');
/* if(${param.sdt!=''}){
beginTimeStore1='2018-08-09';
}
if(${param.edt!=''}){
endTimeStore1='2018-08-10';
} */
var locale = {
"format": 'YYYY-MM-DD HH:mm',
"separator": " ~ ",
"applyLabel": "确定",
"cancelLabel": "取消",
"fromLabel": "起始时间",
"toLabel": "结束时间'",
"customRangeLabel": "自定义",
"weekLabel": "W",
"daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"],
"monthNames": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
"firstDay": 1
};
$('#reservationtime1').daterangepicker({
"timePicker": true,
"timePicker24Hour": true,
"linkedCalendars": false,
"autoUpdateInput": false,
"timePickerIncrement": 10,
"locale": locale,
//汉化按钮部分
ranges: {
'1天': [moment().subtract(1, 'days'), moment()],
'1月': [moment().subtract(1, 'months'), moment()],
'1年': [moment().subtract(1, 'years'), moment()],
},
startDate: beginTimeStore1,
endDate: endTimeStore1
}, function(start, end, label) {
beginTimeStore1 = start.format(this.locale.format);
endTimeStore1 = end.format(this.locale.format);
if(!this.startDate){
this.element.val('');
}else{
this.element.val(this.startDate.format(this.locale.format) + this.locale.separator + this.endDate.format(this.locale.format));
}
});
$('#reservationtime1').val(beginTimeStore1 + locale.separator + endTimeStore1);
//展示测量点曲线
getMpointJson();
};
var companyId="";
/* var editFun = function(id) {
$.post(ext.contextPath + '/data/showCurveView.do', {companyId:companyId,id:id} , function(data) {
$("#menuBox").html(data);
});
};
var initTreeView = function() {
$.post(ext.contextPath + '/data/getCurvesJson.do', {ng:''} , function(data) {
//console.info(data)
$('#tree').treeview({data: data
});
$('#tree').on('nodeSelected', function(event, data) {
editFun(data.id);
//var node=$('#tree').treeview('getSelected');
});
},'json');
$("#menuBox").html("");
}; */
var mpcodestr="";
var mpnamestr="";
var mpunitstr="";
var optionArr= new Array();
var colors = ['#00c200', '#d14a61', '#675bba','#5793f3'];
function getMpointJson(){
$.post(ext.contextPath +"/data/energyAnalysis/getMPointJson.do",{companyId:companyId,key:"${param.key}"},function(data){
//var rows = data.rows;
var ArrayDatas = eval("(" + data + ")").rows;
var mpcode = [];
for (var i=0;i<ArrayDatas.length;i++){
mpcode.push(ArrayDatas[i].mPoint.mpointcode);
mpcodestr+=ArrayDatas[i].mPoint.mpointcode+",";//测量点code
mpnamestr+=ArrayDatas[i].mPoint.parmname+",";//测量点名称
mpunitstr+=ArrayDatas[i].mPoint.unit+",";//测量点单位
}
console.log(mpcodestr);
//getHistoryList(mpcodestr,mpnamestr);
getHistoryJsons(mpcodestr,mpnamestr,mpunitstr);
});
//console.log(idArr.length);
};
function getHistoryJsons(ids,names,units){
console.log(ids);
console.log(names);
console.log(units);
$.post(ext.contextPath +"/work/mpoint/getHistory.do",{bizId:companyId,ids:ids,sdt:beginTimeStore1,edt:endTimeStore1},function(data){
var ArrayDatas = eval("(" + data + ")");
console.log(ArrayDatas);
var measuredt = [];
var res = ArrayDatas[0];
for(var i=0;i<res.length;i++){
measuredt.push(res[i].measuredt.substring(0,16));
}
var parmvalue = [];
var mpnamestr = names.substring(0, names.length-1);
mpnamestr = mpnamestr.split(",");
var mpunitstr = units.substring(0, units.length-1);
mpunitstr = mpunitstr.split(",");
var offset=60;
var yaAxis=[];
var series=[];
for(var i=0;i<mpnamestr.length;i++){
var xobj = {};
xobj.type='value';
xobj.name=mpnamestr[i];
if(i==0){
xobj.position='left';
xobj.offset=0;
}else{
xobj.position='right';
xobj.offset=offset*(i-1);
}
var axisLine={};
var lineStyle={};
var length=mpnamestr.length-1;
/* lineStyle.color=colors[i%colors.length];
axisLine.lineStyle=lineStyle; */
xobj.axisLine=axisLine;
var axisLabel={};
axisLabel.formatter='{value}'+mpunitstr[i];
xobj.axisLabel=axisLabel;
xobj.min= function(value){
return value.min;
}
yaAxis.push(xobj);
var yobj = {};
yobj.type='line';
yobj.name=mpnamestr[i];
//yobj.yAxisIndex=i;
var data =[];
for(var j=0;j<measuredt.length;j++){
var resy = ArrayDatas[i];
data.push(resy[j].parmvalue);
};
yobj.stack='总量';
yobj.areaStyle={};
yobj.data=data;
var markPoint={};
/* var str ='{"data": [{"type": "max", "name": "最大值", "itemStyle": {"color": "red"}},{"type": "min", "name": "最小值", "itemStyle": {"color": "green"}}]}';
yobj.markPoint=JSON.parse(str);
str ='{"data": [{"type": "average", "name": "平均值"}]}';
yobj.markLine=JSON.parse(str); */
series.push(yobj);
console.log("series",series)
};
var option = {
//color: colors,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
grid: {
right: '20%'
},
toolbox: {
feature: {
dataView: {show: false, readOnly: false},
restore: {show: false},
saveAsImage: {show: false}
}
},
legend: {
data:mpnamestr
},
/* xAxis: [
{
type: 'category',
axisTick: {
alignWithLabel: true
},
data: measuredt,
axisLabel: {
                    //interval: 1000,//横坐标间隔
                    rotate: 340,//横坐标倾斜角度
                },
}
],
yAxis:yaAxis, */
xAxis : [
{
type : 'category',
boundaryGap : false,
data : measuredt
}
],
yAxis : [
{
type : 'value'
}
],
series:series
};
var chart = document.getElementById("chart");
var number=mpnamestr.length;
console.log(offset);
//chart.style.width = $("#chartdiv").width()+offset*number+300+'px';
//chart.style.height = 250+'px';
$("#chart").height($("#chartdiv").height()-50);
$("#chart").width($("#chartdiv").width());
//$("#chart").width(700);
var chartData = echarts.init(chart);
//setTimeout(function(){
chartData.setOption(option);
});
}
function getHistoryList(ids,names){
var idarr = ids.substring(0, ids.length-1);
idarr = idarr.split(",");
var namearr = names.substring(0, names.length-1);
namearr = namearr.split(",");
console.log(idarr);
var length = idarr.length;
var mpoint = [];
var checkobx={};
checkobx.checkbox = true;
//mpoint.push(checkobx);
var measuredt={};
measuredt.field='measuredt';
measuredt.title='时间';
measuredt.align='center';
measuredt.valign='middle';
measuredt.width=150;
mpoint.push(measuredt);
for(var i=0;i<idarr.length;i++){
//var color=colors[i%idarr.length];
var parmvalue={};
parmvalue.field = 'paramvalue'+i;
parmvalue.title=namearr[i];
parmvalue.align='center';
parmvalue.valign='middle';
//parmvalue.width=60;
/* var css1 = {};
css1.color = color;
var cellstyle = {};
cellstyle.css=css1;
parmvalue.cellStyle=cellstyle,*/
mpoint.push(parmvalue);
};
};
function dosearch(){
mpcodestr="";
mpnamestr="";
mpunitstr="";
optionArr= new Array();
getMpointJson();
}
$(function() {
$.post(ext.contextPath + "/user/getSearchBizsByUserId4Select.do", {}, function(data) {
if(data.length == 1){
//选择厂区为一个厂时隐藏选择框
$("#search_code").css("display", "none");
$("#company").text(data[0].text);
companyId=data[0].id;
}else{
$("#company").css("display", "none");
var selelct=$("#search_code").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;} // 函数用于呈现当前的选择
});
$(".select2-selection--single").css({'height':'30px','paddingTop':'4px'})
selelct.val('').trigger("change");
//refreshSelect();
selelct.on("change",function(e){
companyId= $(this).val();
});
}
$.post(ext.contextPath + "/user/processSection/getProcessSectionType4Select.do", {companyId:companyId}, function(data) {
$("#processSectionTypeId").empty();
var selelct_ =$("#processSectionTypeId").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("processSectionTypeId");
selelct_.val('').trigger("change");
},'json');
$.post(ext.contextPath + "/user/processSection/getProcessSection4Select.do", {companyId:companyId}, function(data) {
$("#processSectionId").empty();
var selelct_ =$("#processSectionId").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");
selelct_.val('').trigger("change");
},'json');
initDate1();
},'json');
});
</script>
</head>
<body onload="initMenu()" class="hold-transition ${cu.themeclass} sidebar-mini">
<div class="wrapper">
<!-- 引用top -->
<%-- <jsp:include page="/jsp/top.jsp"></jsp:include> --%>
<!-- 菜单栏 -->
<%-- <jsp:include page="/jsp/left.jsp"></jsp:include> --%>
<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="mpSubDiv"></div>
<div class="form-group">
<label class="form-label" id="companylabel">水厂:</label>
<label class="form-label" id="company" style="width:180px;border: none;background: transparent;" ></label>
<select class="form-control select2 " id="search_code" name ="search_code" style="width: 220px;"></select>
</div>
<div class="form-group pull-right form-inline" >
<label class="form-label " >工艺类型:</label>
<select id ="processSectionTypeId" name="processSectionTypeId" class="form-control select2 " style="width: 120px;"></select>
<label class="form-label " >工艺段:</label>
<select id ="processSectionId" name="processSectionId" class="form-control select2 " style="width: 120px;"></select>
<div class="input-group input-group-sm">
<input type="text" class="form-control pull-left" id="reservationtime1" style="width:225px">
<div class="input-group-btn pull-left">
<button type="button" class="btn btn-default" onclick="dosearch();" ><i class="fa fa-search"></i> 查询</button>
</div>
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-12" style="height:450px;padding:0px;overflow:hidden;overflow-y:hidden" id="chartdiv">
<div id="chart" style=""></div>
</div>
</section>
<!-- /.content -->
</div>
<%-- <jsp:include page="/jsp/bottom.jsp"></jsp:include> --%>
<%-- <jsp:include page="/jsp/side.jsp"></jsp:include> --%>
</div>
</body>
<!-- echarts-->
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/echarts/echarts.js" charset="utf-8"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/echarts/macarons.js" charset="utf-8"></script>
<!-- 引入daterangepicker-->
<link rel="stylesheet" href="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.css"/>
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/moment.min.js" charset="utf-8"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.js" charset="utf-8"></script>
</html>

View File

@ -0,0 +1,458 @@
<%@ 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 beginTimeStore1 = '';
var endTimeStore1 = '';
var colors = ['#00c200', '#d14a61', '#675bba', '#5793f3'];
function initDate1() {
//定义locale汉化插件
beginTimeStore1 = moment().subtract(1, 'hours').format('YYYY-MM-DD HH:mm');;
endTimeStore1 = moment().format('YYYY-MM-DD HH:mm');
/* if(${param.sdt!=''}){
beginTimeStore1='2018-08-09';
}
if(${param.edt!=''}){
endTimeStore1='2018-08-10';
} */
var locale = {
"format": 'YYYY-MM-DD HH:mm',
"separator": " ~ ",
"applyLabel": "确定",
"cancelLabel": "取消",
"fromLabel": "起始时间",
"toLabel": "结束时间'",
"customRangeLabel": "自定义",
"weekLabel": "W",
"daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"],
"monthNames": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
"firstDay": 1
};
$('#reservationtime1').daterangepicker({
"timePicker": true,
"timePicker24Hour": true,
"linkedCalendars": false,
"autoUpdateInput": false,
"timePickerIncrement": 10,
"locale": locale,
//汉化按钮部分
ranges: {
'1小时': [moment().subtract(1, 'hours'), moment()],
'8小时': [moment().subtract(8, 'hours'), moment()],
'24小时': [moment().subtract(24, 'hours'), moment()],
},
startDate: beginTimeStore1,
endDate: endTimeStore1
}, function (start, end, label) {
beginTimeStore1 = start.format(this.locale.format);
endTimeStore1 = end.format(this.locale.format);
if (!this.startDate) {
this.element.val('');
} else {
this.element.val(this.startDate.format(this.locale.format) + this.locale.separator + this.endDate.format(this.locale.format));
}
});
$('#reservationtime1').val(beginTimeStore1 + locale.separator + endTimeStore1);
//展示测量点曲线
getMpointJson();
};
var companyId = "";
/* var editFun = function(id) {
$.post(ext.contextPath + '/data/showCurveView.do', {companyId:companyId,id:id} , function(data) {
$("#menuBox").html(data);
});
};
var initTreeView = function() {
$.post(ext.contextPath + '/data/getCurvesJson.do', {ng:''} , function(data) {
//console.info(data)
$('#tree').treeview({data: data
});
$('#tree').on('nodeSelected', function(event, data) {
editFun(data.id);
//var node=$('#tree').treeview('getSelected');
});
},'json');
$("#menuBox").html("");
}; */
var mpcodestr = "";
var mpnamestr = "";
var mpunitstr = "";
var optionArr = new Array();
var colors = ['#00c200', '#d14a61', '#675bba', '#5793f3'];
function getMpointJson() {
$.post(ext.contextPath + "/data/energyAnalysis/getMPointJson.do", { companyId: companyId, key: "${param.key}" }, function (data) {
//var rows = data.rows;
var ArrayDatas = eval("(" + data + ")").rows;
var mpcode = [];
for (var i = 0; i < ArrayDatas.length; i++) {
mpcode.push(ArrayDatas[i].mPoint.mpointcode);
mpcodestr += ArrayDatas[i].mPoint.mpointcode + ",";//测量点code
mpnamestr += ArrayDatas[i].mPoint.parmname + ",";//测量点名称
mpunitstr += ArrayDatas[i].mPoint.unit + ",";//测量点单位
}
console.log(mpcodestr);
getHistoryList(mpcodestr, mpnamestr);
getHistoryJsons(mpcodestr, mpnamestr, mpunitstr);
});
//console.log(idArr.length);
};
function getHistoryJsons(ids, names, units) {
console.log(ids);
console.log(names);
console.log(units);
$.post(ext.contextPath + "/work/mpoint/getHistory.do", { bizId: companyId, ids: ids, sdt: beginTimeStore1, edt: endTimeStore1 }, function (data) {
var ArrayDatas = eval("(" + data + ")");
console.log(ArrayDatas);
var measuredt = [];
var res = ArrayDatas[0];
for (var i = 0; i < res.length; i++) {
measuredt.push(res[i].measuredt.substring(0, 16));
}
var parmvalue = [];
var mpnamestr = names.substring(0, names.length - 1);
mpnamestr = mpnamestr.split(",");
var mpunitstr = units.substring(0, units.length - 1);
mpunitstr = mpunitstr.split(",");
var offset = 60;
var yaAxis = [];
var series = [];
for (var i = 0; i < mpnamestr.length; i++) {
var xobj = {};
xobj.type = 'value';
xobj.name = mpnamestr[i];
if (i == 0) {
xobj.position = 'left';
xobj.offset = 0;
} else {
xobj.position = 'right';
xobj.offset = offset * (i - 1);
}
var axisLine = {};
var lineStyle = {};
var length = mpnamestr.length - 1;
lineStyle.color = colors[i % colors.length];
axisLine.lineStyle = lineStyle;
xobj.axisLine = axisLine;
var axisLabel = {};
axisLabel.formatter = '{value}' + mpunitstr[i];
xobj.axisLabel = axisLabel;
xobj.min = function (value) {
return value.min;
}
yaAxis.push(xobj);
var yobj = {};
yobj.type = 'line';
yobj.name = mpnamestr[i];
yobj.yAxisIndex = i;
var data = [];
for (var j = 0; j < measuredt.length; j++) {
var resy = ArrayDatas[i];
data.push(resy[j].parmvalue);
}
yobj.data = data;
var markPoint = {};
var str = '{"data": [{"type": "max", "name": "最大值", "itemStyle": {"color": "red"}},{"type": "min", "name": "最小值", "itemStyle": {"color": "green"}}]}';
yobj.markPoint = JSON.parse(str);
str = '{"data": [{"type": "average", "name": "平均值"}]}';
yobj.markLine = JSON.parse(str);
series.push(yobj);
};
var option = {
color: colors,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
grid: {
right: '20%'
},
toolbox: {
feature: {
dataView: { show: false, readOnly: false },
restore: { show: false },
saveAsImage: { show: false }
}
},
legend: {
data: mpnamestr
},
xAxis: [
{
type: 'category',
axisTick: {
alignWithLabel: true
},
data: measuredt,
axisLabel: {
//interval: 1000,//横坐标间隔
rotate: 340,//横坐标倾斜角度
//倾斜度 -90 至 90 默认为0  
// margin: 2,
/* textStyle: {
fontWeight: "bolder",
color: "#000000"
} */
},
}
],
yAxis: yaAxis,
series: series
};
var chart = document.getElementById("chart");
var number = mpnamestr.length;
console.log(offset);
//chart.style.width = $("#chartdiv").width()+offset*number+300+'px';
//chart.style.height = 250+'px';
$("#chart").height($("#chartdiv").height() - 50);
$("#chart").width($("#chartdiv").width());
//$("#chart").width(700);
var chartData = echarts.init(chart);
//setTimeout(function(){
chartData.setOption(option);
var bottleChart = echarts.init(document.getElementById('bottlediv'));
optionv = {
/*graphic: {
elements: [{
type: 'text',
style: {
text: "NaOH",
font: "18px Microsoft YaHei",
fill: "#4169B1",
},
left: 'center',
top: 'bottom'
}]
},*/
series: [{
type: 'liquidFill',
data: [{
value: 0.5,
direction: 'left',
itemStyle: {
normal: {
color: '#FFCB65'
}
}
}],
radius: '90%',
outline: {
show: false
},
backgroundStyle: {
borderColor: '#156ACF',
borderWidth: 1,
shadowColor: 'rgba(0, 0, 0, 0.4)',
shadowBlur: 20
},
shape: bucketPath,
label: {
normal: {
textStyle: {
fontSize: 40,
color: '#D94854'
}
}
}
}]
};
bottleChart.setOption(optionv);
});
}
function getHistoryList(ids, names) {
var idarr = ids.substring(0, ids.length - 1);
idarr = idarr.split(",");
var namearr = names.substring(0, names.length - 1);
namearr = namearr.split(",");
console.log(idarr);
var length = idarr.length;
var mpoint = [];
var checkobx = {};
checkobx.checkbox = true;
//mpoint.push(checkobx);
var measuredt = {};
measuredt.field = 'measuredt';
measuredt.title = '时间';
measuredt.align = 'center';
measuredt.valign = 'middle';
measuredt.width = 150;
mpoint.push(measuredt);
for (var i = 0; i < idarr.length; i++) {
var color = colors[i % idarr.length];
var parmvalue = {};
parmvalue.field = 'paramvalue' + i;
parmvalue.title = namearr[i];
parmvalue.align = 'center';
parmvalue.valign = 'middle';
//parmvalue.width=60;
var css1 = {};
css1.color = color;
var cellstyle = {};
cellstyle.css = css1;
parmvalue.cellStyle = cellstyle,
mpoint.push(parmvalue);
};
};
function dosearch() {
mpcodestr = "";
mpnamestr = "";
mpunitstr = "";
optionArr = new Array();
getMpointJson();
}
$(function () {
$.post(ext.contextPath + "/user/getSearchBizsByUserId4Select.do", {}, function (data) {
if (data.length == 1) {
//选择厂区为一个厂时隐藏选择框
$("#search_code").css("display", "none");
$("#company").text(data[0].text);
companyId = data[0].id;
} else {
$("#company").css("display", "none");
var selelct = $("#search_code").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; } // 函数用于呈现当前的选择
});
$(".select2-selection--single").css({ 'height': '30px', 'paddingTop': '4px' })
selelct.val('').trigger("change");
//refreshSelect();
selelct.on("change", function (e) {
companyId = $(this).val();
});
}
initDate1();
}, 'json');
//initTreeView();
});
</script>
</head>
<body onload="initMenu()" class="hold-transition ${cu.themeclass} sidebar-mini">
<div class="wrapper">
<!-- 引用top -->
<%--<jsp:include page="/jsp/side.jsp"></jsp:include> --%>
<!-- 菜单栏 -->
<jsp:include page="/jsp/left.jsp"></jsp:include>
<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="mpSubDiv"></div>
<div class="form-group">
<label class="form-label" id="companylabel">水厂:</label>
<label class="form-label" id="company"
style="width:180px;border: none;background: transparent;"></label>
<select class="form-control select2 " id="search_code" name="search_code"
style="width: 220px;"></select>
</div>
<div class="input-group pull-right input-group-sm">
<input type="text" class="form-control pull-left" id="reservationtime1" style="width:225px">
<div class="input-group-btn pull-left">
<button type="button" class="btn btn-default" onclick="dosearch();"><i class="fa fa-search"></i>
查询</button>
</div>
</div>
<div class="col-sm-3 col-md-3 col-lg-3 col-xl-3">
<br />
<div id="bottlediv" style="height:200px;width:200px;margin:auto;"></div>
<div style="text-align: center">
<span style="font-size: 28px;color: #FFCB65;">加矾系统储液罐</span>
</div>
<br />
<table style="width:100%;height:100%;">
<tr>
<td align="left"><img src="<%=request.getContextPath()%>/IMG/time.png" width="70px"
height="70px" /></td>
<td>
<span style="font-size:28px;color:#2C4975;display: block;">矾储备可用</span>
<span style="font-size:28px;color:#2C4975;display: block;">时间(h)</span>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<span id="clTime" style="font-size:50px;">20小时</span>
</td>
</tr>
</table>
</div>
<div class="col-sm-9 col-md-9 col-lg-9 col-xl-9"
style="height:450px;padding:0px;overflow:hidden;overflow-y:hidden" id="chartdiv">
<div id="chart" style=""></div>
</div>
</section>
<!-- /.content -->
</div>
<%-- <jsp:include page="/jsp/bottom.jsp"></jsp:include> --%>
<jsp:include page="/jsp/side.jsp"></jsp:include>
</div>
</body>
<!-- echarts-->
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/echarts/echarts.4.1.0.min.js"
charset="utf-8"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/echarts/echarts-liquidfill.js"
charset="utf-8"></script>
<!-- 引入daterangepicker-->
<link rel="stylesheet" href="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.css" />
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/moment.min.js"
charset="utf-8"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.js"
charset="utf-8"></script>
</html>

View File

@ -0,0 +1,548 @@
<%@ 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 beginTimeStore1 = '';
var endTimeStore1 = '';
var colors = ['#00c200', '#d14a61', '#675bba', '#5793f3'];
function initDate1() {
//定义locale汉化插件
beginTimeStore1 = moment().subtract(1, 'hours').format('YYYY-MM-DD HH:mm');;
endTimeStore1 = moment().format('YYYY-MM-DD HH:mm');
/* if(${param.sdt!=''}){
beginTimeStore1='2018-08-09';
}
if(${param.edt!=''}){
endTimeStore1='2018-08-10';
} */
var locale = {
"format": 'YYYY-MM-DD HH:mm',
"separator": " ~ ",
"applyLabel": "确定",
"cancelLabel": "取消",
"fromLabel": "起始时间",
"toLabel": "结束时间'",
"customRangeLabel": "自定义",
"weekLabel": "W",
"daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"],
"monthNames": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
"firstDay": 1
};
$('#reservationtime1').daterangepicker({
"timePicker": true,
"timePicker24Hour": true,
"linkedCalendars": false,
"autoUpdateInput": false,
"timePickerIncrement": 10,
"locale": locale,
//汉化按钮部分
ranges: {
'1小时': [moment().subtract(1, 'hours'), moment()],
'8小时': [moment().subtract(8, 'hours'), moment()],
'24小时': [moment().subtract(24, 'hours'), moment()],
},
startDate: beginTimeStore1,
endDate: endTimeStore1
}, function (start, end, label) {
beginTimeStore1 = start.format(this.locale.format);
endTimeStore1 = end.format(this.locale.format);
if (!this.startDate) {
this.element.val('');
} else {
this.element.val(this.startDate.format(this.locale.format) + this.locale.separator + this.endDate.format(this.locale.format));
}
});
$('#reservationtime1').val(beginTimeStore1 + locale.separator + endTimeStore1);
//展示测量点曲线
getMpointJson();
};
var companyId = "";
/* var editFun = function(id) {
$.post(ext.contextPath + '/data/showCurveView.do', {companyId:companyId,id:id} , function(data) {
$("#menuBox").html(data);
});
};
var initTreeView = function() {
$.post(ext.contextPath + '/data/getCurvesJson.do', {ng:''} , function(data) {
//console.info(data)
$('#tree').treeview({data: data
});
$('#tree').on('nodeSelected', function(event, data) {
editFun(data.id);
//var node=$('#tree').treeview('getSelected');
});
},'json');
$("#menuBox").html("");
}; */
var mpcodestr = "";
var mpnamestr = "";
var mpunitstr = "";
var optionArr = new Array();
var colors = ['#00c200', '#d14a61', '#675bba', '#5793f3'];
function getMpointJson() {
$.post(ext.contextPath + "/data/energyAnalysis/getMPointJson.do", { companyId: companyId, key: "${param.key}" }, function (data) {
//var rows = data.rows;
var ArrayDatas = eval("(" + data + ")").rows;
var mpcode = [];
for (var i = 0; i < ArrayDatas.length; i++) {
mpcode.push(ArrayDatas[i].mPoint.mpointcode);
mpcodestr += ArrayDatas[i].mPoint.mpointcode + ",";//测量点code
mpnamestr += ArrayDatas[i].mPoint.parmname + ",";//测量点名称
mpunitstr += ArrayDatas[i].mPoint.unit + ",";//测量点单位
}
console.log(mpcodestr);
getHistoryList(mpcodestr, mpnamestr);
getHistoryJsons(mpcodestr, mpnamestr, mpunitstr);
});
//console.log(idArr.length);
};
function getHistoryJsons(ids, names, units) {
console.log(ids);
console.log(names);
console.log(units);
$.post(ext.contextPath + "/work/mpoint/getHistory.do", { bizId: companyId, ids: ids, sdt: beginTimeStore1, edt: endTimeStore1 }, function (data) {
var ArrayDatas = eval("(" + data + ")");
console.log(ArrayDatas);
var measuredt = [];
var res = ArrayDatas[0];
for (var i = 0; i < res.length; i++) {
measuredt.push(res[i].measuredt.substring(0, 16));
}
var parmvalue = [];
var mpnamestr = names.substring(0, names.length - 1);
mpnamestr = mpnamestr.split(",");
var mpunitstr = units.substring(0, units.length - 1);
mpunitstr = mpunitstr.split(",");
var offset = 60;
var yaAxis = [];
var series = [];
for (var i = 0; i < mpnamestr.length; i++) {
var xobj = {};
xobj.type = 'value';
xobj.name = mpnamestr[i];
if (i == 0) {
xobj.position = 'left';
xobj.offset = 0;
} else {
xobj.position = 'right';
xobj.offset = offset * (i - 1);
}
var axisLine = {};
var lineStyle = {};
var length = mpnamestr.length - 1;
lineStyle.color = colors[i % colors.length];
axisLine.lineStyle = lineStyle;
xobj.axisLine = axisLine;
var axisLabel = {};
axisLabel.formatter = '{value}' + mpunitstr[i];
xobj.axisLabel = axisLabel;
xobj.min = function (value) {
return value.min;
}
yaAxis.push(xobj);
var yobj = {};
yobj.type = 'line';
yobj.name = mpnamestr[i];
yobj.yAxisIndex = i;
var data = [];
for (var j = 0; j < measuredt.length; j++) {
var resy = ArrayDatas[i];
data.push(resy[j].parmvalue);
}
yobj.data = data;
var markPoint = {};
var str = '{"data": [{"type": "max", "name": "最大值", "itemStyle": {"color": "red"}},{"type": "min", "name": "最小值", "itemStyle": {"color": "green"}}]}';
yobj.markPoint = JSON.parse(str);
str = '{"data": [{"type": "average", "name": "平均值"}]}';
yobj.markLine = JSON.parse(str);
series.push(yobj);
};
var option = {
color: colors,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
grid: {
right: '10%'
},
toolbox: {
feature: {
dataView: { show: false, readOnly: false },
restore: { show: false },
saveAsImage: { show: false }
}
},
legend: {
data: mpnamestr
},
xAxis: [
{
type: 'category',
axisTick: {
alignWithLabel: true
},
data: measuredt,
axisLabel: {
//interval: 1000,//横坐标间隔
rotate: 340,//横坐标倾斜角度
//倾斜度 -90 至 90 默认为0  
// margin: 2,
/* textStyle: {
fontWeight: "bolder",
color: "#000000"
} */
},
}
],
yAxis: yaAxis,
series: series
};
var number = mpnamestr.length;
console.log(offset);
//chart.style.width = $("#chartdiv").width()+offset*number+300+'px';
//chart.style.height = 250+'px';
//$("#chart").height($("#chartdiv").height() - 50);
//$("#chart").width($("#chartdiv").width());
//$("#chart").width(700);
//setTimeout(function(){
optionv = {
/*graphic: {
elements: [{
type: 'text',
style: {
text: "NaOH",
font: "18px Microsoft YaHei",
fill: "#4169B1",
},
left: 'center',
top: 'bottom'
}]
},*/
series: [{
type: 'liquidFill',
data: [{
value: 0.5,
direction: 'left',
itemStyle: {
normal: {
color: '#FFCB65'
}
}
}],
radius: '90%',
outline: {
show: false
},
backgroundStyle: {
borderColor: '#156ACF',
borderWidth: 1,
shadowColor: 'rgba(0, 0, 0, 0.4)',
shadowBlur: 20
},
shape: bucketPath,
label: {
normal: {
textStyle: {
fontSize: 40,
color: '#D94854'
}
}
}
}]
};
//NaOH
var NaOH_BChart = echarts.init(document.getElementById('NaOHBottle'));
NaOH_BChart.setOption(optionv);
var NaOH_LChart = echarts.init(document.getElementById('NaOHLine'));
NaOH_LChart.setOption(option);
//HCl
var HCl_BChart = echarts.init(document.getElementById('HClBottle'));
HCl_BChart.setOption(optionv);
var HCL_LChart = echarts.init(document.getElementById('HClLine'));
HCL_LChart.setOption(option);
//Na2S2O3
var Na2S2O3_BChart = echarts.init(document.getElementById('Na2S2O3Bottle'));
Na2S2O3_BChart.setOption(optionv);
var Na2S2O3_LChart = echarts.init(document.getElementById('Na2S2O3Line'));
Na2S2O3_LChart.setOption(option);
//H2O2
var H2O2_BChart = echarts.init(document.getElementById('H2O2Bottle'));
H2O2_BChart.setOption(optionv);
var H2O2_LChart = echarts.init(document.getElementById('H2O2Line'));
H2O2_LChart.setOption(option);
//KMnO4
var KMnO4_BChart = echarts.init(document.getElementById('KMnO4Bottle'));
KMnO4_BChart.setOption(optionv);
var KMnO4_LChart = echarts.init(document.getElementById('KMnO4Line'));
KMnO4_LChart.setOption(option);
//CaO
var CaO_BChart = echarts.init(document.getElementById('CaOBottle'));
CaO_BChart.setOption(optionv);
var CaO_LChart = echarts.init(document.getElementById('CaOLine'));
CaO_LChart.setOption(option);
});
}
function getHistoryList(ids, names) {
var idarr = ids.substring(0, ids.length - 1);
idarr = idarr.split(",");
var namearr = names.substring(0, names.length - 1);
namearr = namearr.split(",");
console.log(idarr);
var length = idarr.length;
var mpoint = [];
var checkobx = {};
checkobx.checkbox = true;
//mpoint.push(checkobx);
var measuredt = {};
measuredt.field = 'measuredt';
measuredt.title = '时间';
measuredt.align = 'center';
measuredt.valign = 'middle';
measuredt.width = 150;
mpoint.push(measuredt);
for (var i = 0; i < idarr.length; i++) {
var color = colors[i % idarr.length];
var parmvalue = {};
parmvalue.field = 'paramvalue' + i;
parmvalue.title = namearr[i];
parmvalue.align = 'center';
parmvalue.valign = 'middle';
//parmvalue.width=60;
var css1 = {};
css1.color = color;
var cellstyle = {};
cellstyle.css = css1;
parmvalue.cellStyle = cellstyle,
mpoint.push(parmvalue);
};
};
function dosearch() {
mpcodestr = "";
mpnamestr = "";
mpunitstr = "";
optionArr = new Array();
getMpointJson();
}
$(function () {
$.post(ext.contextPath + "/user/getSearchBizsByUserId4Select.do", {}, function (data) {
if (data.length == 1) {
//选择厂区为一个厂时隐藏选择框
$("#search_code").css("display", "none");
$("#company").text(data[0].text);
companyId = data[0].id;
} else {
$("#company").css("display", "none");
var selelct = $("#search_code").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; } // 函数用于呈现当前的选择
});
$(".select2-selection--single").css({ 'height': '30px', 'paddingTop': '4px' })
selelct.val('').trigger("change");
//refreshSelect();
selelct.on("change", function (e) {
companyId = $(this).val();
});
}
initDate1();
}, 'json');
//initTreeView();
});
</script>
</head>
<body onload="initMenu()" class="hold-transition ${cu.themeclass} sidebar-mini">
<div class="wrapper">
<!-- 引用top -->
<%--<jsp:include page="/jsp/side.jsp"></jsp:include> --%>
<!-- 菜单栏 -->
<jsp:include page="/jsp/left.jsp"></jsp:include>
<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="mpSubDiv"></div>
<div class="form-group">
<label class="form-label" id="companylabel">水厂:</label>
<label class="form-label" id="company"
style="width:180px;border: none;background: transparent;"></label>
<select class="form-control select2 " id="search_code" name="search_code"
style="width: 220px;"></select>
</div>
<div class="input-group pull-right input-group-sm">
<input type="text" class="form-control pull-left" id="reservationtime1" style="width:225px">
<div class="input-group-btn pull-left">
<button type="button" class="btn btn-default" onclick="dosearch();"><i class="fa fa-search"></i>
查询</button>
</div>
</div>
<!-- NaOH -->
<div class="row">
<div class="col-sm-3 col-md-3 col-lg-3 col-xl-3" style="margin-top: 70px">
<div id="NaOHBottle" style="height:220px;width:220px;margin:auto;"></div>
<div style="text-align: center">
<span style="font-size: 28px;color: #FFCB65;">NaOH储液罐</span>
</div>
</div>
<div class="col-sm-9 col-md-9 col-lg-9 col-xl-9"
style="padding:0px;overflow:hidden;overflow-y:hidden" id="chartdiv">
<div id="NaOHLine" style="height:350px;"></div>
</div>
</div>
<!-- HCl -->
<div class="row">
<div class="col-sm-3 col-md-3 col-lg-3 col-xl-3" style="margin-top: 40px">
<div id="HClBottle" style="height:220px;width:220px;margin:auto;"></div>
<div style="text-align: center">
<span style="font-size: 28px;color: #FFCB65;">HCl储液罐</span>
</div>
</div>
<div class="col-sm-9 col-md-9 col-lg-9 col-xl-9"
style="padding:0px;overflow:hidden;overflow-y:hidden" id="chartdiv">
<div id="HClLine" style="height:350px;"></div>
</div>
</div>
<!-- Na2S2O3 -->
<div class="row">
<div class="col-sm-3 col-md-3 col-lg-3 col-xl-3" style="margin-top: 40px">
<div id="Na2S2O3Bottle" style="height:220px;width:220px;margin:auto;"></div>
<div style="text-align: center">
<span style="font-size: 28px;color: #FFCB65;">Na<SUB>2</SUB>S<SUB>2</SUB>O<SUB>3</SUB>储液罐</span>
</div>
</div>
<div class="col-sm-9 col-md-9 col-lg-9 col-xl-9"
style="padding:0px;overflow:hidden;overflow-y:hidden" id="chartdiv">
<div id="Na2S2O3Line" style="height:350px;"></div>
</div>
</div>
<!-- H2O2 -->
<div class="row">
<div class="col-sm-3 col-md-3 col-lg-3 col-xl-3" style="margin-top: 40px">
<div id="H2O2Bottle" style="height:220px;width:220px;margin:auto;"></div>
<div style="text-align: center">
<span style="font-size: 28px;color: #FFCB65;">双氧水储液罐</span>
</div>
</div>
<div class="col-sm-9 col-md-9 col-lg-9 col-xl-9"
style="padding:0px;overflow:hidden;overflow-y:hidden" id="chartdiv">
<div id="H2O2Line" style="height:350px;"></div>
</div>
</div>
<!-- KMnO4 -->
<div class="row">
<div class="col-sm-3 col-md-3 col-lg-3 col-xl-3" style="margin-top: 40px">
<div id="KMnO4Bottle" style="height:220px;width:220px;margin:auto;"></div>
<div style="text-align: center">
<span style="font-size: 28px;color: #FFCB65;">高锰酸钾储液罐</span>
</div>
</div>
<div class="col-sm-9 col-md-9 col-lg-9 col-xl-9"
style="padding:0px;overflow:hidden;overflow-y:hidden" id="chartdiv">
<div id="KMnO4Line" style="height:350px;"></div>
</div>
</div>
<!-- 石灰 -->
<div class="row">
<div class="col-sm-3 col-md-3 col-lg-3 col-xl-3" style="margin-top: 40px">
<div id="CaOBottle" style="height:220px;width:220px;margin:auto;"></div>
<div style="text-align: center">
<span style="font-size: 28px;color: #FFCB65;">石灰储液罐</span>
</div>
</div>
<div class="col-sm-9 col-md-9 col-lg-9 col-xl-9"
style="padding:0px;overflow:hidden;overflow-y:hidden" id="chartdiv">
<div id="CaOLine" style="height:350px;"></div>
</div>
</div>
</section>
<!-- /.content -->
</div>
<%-- <jsp:include page="/jsp/bottom.jsp"></jsp:include> --%>
<jsp:include page="/jsp/side.jsp"></jsp:include>
</div>
</body>
<!-- echarts-->
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/echarts/echarts.4.1.0.min.js"
charset="utf-8"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/echarts/echarts-liquidfill.js"
charset="utf-8"></script>
<!-- 引入daterangepicker-->
<link rel="stylesheet" href="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.css" />
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/moment.min.js"
charset="utf-8"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.js"
charset="utf-8"></script>
</html>

View File

@ -0,0 +1,657 @@
<%@ 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 beginTimeStore1 = '';
var endTimeStore1 = '';
function initDate1() {
//定义locale汉化插件
beginTimeStore1 = moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm');;
endTimeStore1 = moment().format('YYYY-MM-DD HH:mm');
/* if(${param.sdt!=''}){
beginTimeStore1='2018-08-09';
}
if(${param.edt!=''}){
endTimeStore1='2018-08-10';
} */
var locale = {
"format": 'YYYY-MM-DD HH:mm',
"separator": " ~ ",
"applyLabel": "确定",
"cancelLabel": "取消",
"fromLabel": "起始时间",
"toLabel": "结束时间'",
"customRangeLabel": "自定义",
"weekLabel": "W",
"daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"],
"monthNames": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
"firstDay": 1
};
$('#reservationtime1').daterangepicker({
"timePicker": true,
"timePicker24Hour": true,
"linkedCalendars": false,
"autoUpdateInput": false,
"timePickerIncrement": 10,
"locale": locale,
//汉化按钮部分
ranges: {
'1天': [moment().subtract(1, 'days'), moment()],
'1月': [moment().subtract(1, 'months'), moment()],
'1年': [moment().subtract(1, 'years'), moment()],
},
startDate: beginTimeStore1,
endDate: endTimeStore1
}, function(start, end, label) {
beginTimeStore1 = start.format(this.locale.format);
endTimeStore1 = end.format(this.locale.format);
if(!this.startDate){
this.element.val('');
}else{
this.element.val(this.startDate.format(this.locale.format) + this.locale.separator + this.endDate.format(this.locale.format));
}
});
$('#reservationtime1').val(beginTimeStore1 + locale.separator + endTimeStore1);
//展示测量点曲线
getMpointJson();
};
var companyId="";
var data = [["2000-06-05",116],["2000-06-06",129],["2000-06-07",135],["2000-06-08",86],["2000-06-09",73],["2000-06-10",85],["2000-06-11",73],["2000-06-12",68],["2000-06-13",92],["2000-06-14",130],["2000-06-15",245],["2000-06-16",139],["2000-06-17",115],["2000-06-18",111],["2000-06-19",309],["2000-06-20",206],["2000-06-21",137],["2000-06-22",128],["2000-06-23",85],["2000-06-24",94],["2000-06-25",71],["2000-06-26",106],["2000-06-27",84],["2000-06-28",93],["2000-06-29",85],["2000-06-30",73],["2000-07-01",83],["2000-07-02",125],["2000-07-03",107],["2000-07-04",82],["2000-07-05",44],["2000-07-06",72],["2000-07-07",106],["2000-07-08",107],["2000-07-09",66],["2000-07-10",91],["2000-07-11",92],["2000-07-12",113],["2000-07-13",107],["2000-07-14",131],["2000-07-15",111],["2000-07-16",64],["2000-07-17",69],["2000-07-18",88],["2000-07-19",77],["2000-07-20",83],["2000-07-21",111],["2000-07-22",57],["2000-07-23",55],["2000-07-24",60]];
var dateList = data.map(function (item) {
return item[0];
});
var valueList = data.map(function (item) {
return item[1];
});
var mpcodestr="";
var mpnamestr="";
var mpunitstr="";
var optionArr= new Array();
var colors = ['#00c200', '#d14a61', '#675bba','#5793f3'];
function getMpointJson(){
var key="${param.key}";
$.post(ext.contextPath +"/data/energyAnalysis/getMPointJsons.do",{companyId:companyId,key:key},function(data){
var keyArray= key.split(',');
$.each(data,function(index,item){
mpcodestr="";
mpnamestr="";
mpunitstr="";
var ArrayDatas = item;
var mpcode = [];
for (var i=0;i<ArrayDatas.length;i++){
mpcode.push(ArrayDatas[i].mPoint.mpointcode);
mpcodestr+=ArrayDatas[i].mPoint.mpointcode+",";//测量点code
mpnamestr+=ArrayDatas[i].mPoint.parmname+",";//测量点名称
mpunitstr+=ArrayDatas[i].mPoint.unit+",";//测量点单位
}
if(index==0){
getHistoryJsons4Area(keyArray[index],mpcodestr,mpnamestr,mpunitstr);
}else{
getHistoryJsons(keyArray[index],mpcodestr,mpnamestr,mpunitstr);
}
})
},'json');
//console.log(idArr.length);
};
var myChart;
function getHistoryJsons4Area(title,ids,names,units){
/* console.log(ids);
console.log(names);
console.log(units); */
$.post(ext.contextPath +"/work/mpoint/getHistory.do",{bizId:companyId,ids:ids,sdt:beginTimeStore1,edt:endTimeStore1},function(data){
var ArrayDatas = eval("(" + data + ")");
console.log(ArrayDatas);
var measuredt = [];
var res = ArrayDatas[0];
for(var i=0;i<res.length;i++){
measuredt.push(res[i].measuredt.substring(0,16));
}
var parmvalue = [];
var mpnamestr = names.substring(0, names.length-1);
mpnamestr = mpnamestr.split(",");
var mpunitstr = units.substring(0, units.length-1);
mpunitstr = mpunitstr.split(",");
var offset=60;
var yaAxis=[];
var series=[];
for(var i=0;i<mpnamestr.length;i++){
var xobj = {};
xobj.type='value';
xobj.name=mpnamestr[i];
if(i==0){
xobj.position='left';
xobj.offset=0;
}else{
xobj.position='right';
xobj.offset=offset*(i-1);
}
var axisLine={};
var lineStyle={};
var length=mpnamestr.length-1;
/* lineStyle.color=colors[i%colors.length];
axisLine.lineStyle=lineStyle; */
xobj.axisLine=axisLine;
var axisLabel={};
axisLabel.formatter='{value}'+mpunitstr[i];
xobj.axisLabel=axisLabel;
xobj.min= function(value){
return value.min;
}
yaAxis.push(xobj);
var yobj = {};
yobj.type='line';
yobj.name=mpnamestr[i];
//yobj.yAxisIndex=i;
var data =[];
for(var j=0;j<measuredt.length;j++){
var resy = ArrayDatas[i];
data.push(resy[j].parmvalue);
};
yobj.stack='总量';
yobj.areaStyle={};
yobj.data=data;
var markPoint={};
series.push(yobj);
console.log("series",series)
};
var option = {
title: {
text: title,
x: 'left'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
/* grid: {
right: '20%'
}, */
toolbox: {
feature: {
dataView: {show: false, readOnly: false},
restore: {show: false},
saveAsImage: {show: false}
}
},
legend: {
data:mpnamestr
},
xAxis : [
{
type: 'category',
axisTick: {
alignWithLabel: true
},
data: measuredt,
axisLabel: {
                    //interval: 1000,//横坐标间隔
                    rotate: 340,//横坐标倾斜角度
                },
}
],
yAxis : [
{
type : 'value'
}
],
series:series
};
var number=mpnamestr.length;
//chart.style.width = $("#chartdiv").width()+offset*number+300+'px';
//chart.style.height = 250+'px';
$("#chart").height($("#chartdiv").height()-50);
$("#chart").width($("#chartdiv").width());
//$("#chart").width(700);
var arr=[];
$.each(ArrayDatas,function(index,item){
console.log("mpnamestr",mpnamestr[index])
var point =item[0];
var value =point==null? 0:point.parmvalue;
var name =mpnamestr[index];
var arrItem={};
arrItem.name = name;
arrItem.value=value;
arr.push(arrItem)
})
var echartsPie =intialPie('chartPie',arr);
if(myChart!=null){
myChart.clear();
myChart.dispose();
}
myChart = echarts.init(document.getElementById("chart"));
myChart.on('updateAxisPointer', function (event) {
var xAxisInfo = event.axesInfo[0];
if (xAxisInfo) {
//console.log("event",event);
var dataIndex= event.dataIndex;
var arr=[];
$.each(ArrayDatas,function(index,item){
console.log("mpnamestr",mpnamestr[index])
var point =item[dataIndex];
var value =point==null? 0:point.parmvalue;
var name =mpnamestr[index];
var arrItem={};
arrItem.name = name;
arrItem.value=value;
arr.push(arrItem)
})
var dimension = xAxisInfo.value + 1;
echartsPie.setOption({
series: {
type:'pie',
radius : '55%',//饼图的半径大小
center: ['50%', '40%'],//饼图的位置
label: {
normal: {
show: true,
formatter: '{b}: {c}'
}
},
data:arr
}
});
}
});
myChart.setOption(option);
});
}
function intialPie(id,value){
var echartsPie;
var json = data;
var legend = [];
$.each(data,function(index,value){
legend.push(value.name)
});
var date = new Date();
var option = {
/* title: {
text: '处理中运维数',
x: 'center'
}, */
tooltip : {
trigger: 'item',
formatter: "{b} : {c} 次"
},
legend: {
orient : 'vertical',
x : 'left',
data:legend
},
calculable : true,
series : [
{
type:'pie',
radius : '55%',//饼图的半径大小
center: ['50%', '40%'],//饼图的位置
label: {
normal: {
show: true,
formatter: '{b}: {c}'
}
},
data:value
}
],
//color: ['#00c0ef','#00a65a','#f39c12','#3c8dbc','#dd4b39']
};
echartsPie = echarts.init(document.getElementById(id));
echartsPie.setOption(option);
return echartsPie;
}
var myChart1;
function getHistoryJsons(title,ids,names,units){
/* console.log(ids);
console.log(names);
console.log(units); */
$.post(ext.contextPath +"/work/mpoint/getHistory.do",{bizId:companyId,ids:ids,sdt:beginTimeStore1,edt:endTimeStore1},function(data){
var ArrayDatas = eval("(" + data + ")");
console.log(ArrayDatas);
var measuredt = [];
var res = ArrayDatas[0];
for(var i=0;i<res.length;i++){
measuredt.push(res[i].measuredt.substring(0,16));
}
var parmvalue = [];
var mpnamestr = names.substring(0, names.length-1);
mpnamestr = mpnamestr.split(",");
var mpunitstr = units.substring(0, units.length-1);
mpunitstr = mpunitstr.split(",");
var offset=60;
var yaAxis=[];
var series=[];
for(var i=0;i<mpnamestr.length;i++){
var xobj = {};
xobj.type='value';
xobj.name=mpnamestr[i];
if(i==0){
xobj.position='left';
xobj.offset=0;
}else{
xobj.position='right';
xobj.offset=offset*(i-1);
}
var axisLine={};
var lineStyle={};
var length=mpnamestr.length-1;
/* lineStyle.color=colors[i%colors.length];
axisLine.lineStyle=lineStyle; */
xobj.axisLine=axisLine;
var axisLabel={};
axisLabel.formatter='{value}'+mpunitstr[i];
xobj.axisLabel=axisLabel;
xobj.min= function(value){
return value.min;
}
yaAxis.push(xobj);
var yobj = {};
yobj.type='line';
yobj.name=mpnamestr[i];
//yobj.yAxisIndex=i;
var data =[];
for(var j=0;j<measuredt.length;j++){
var resy = ArrayDatas[i];
data.push(resy[j].parmvalue);
};
yobj.data=data;
var markPoint={};
/* var str ='{"data": [{"type": "max", "name": "最大值", "itemStyle": {"color": "red"}},{"type": "min", "name": "最小值", "itemStyle": {"color": "green"}}]}';
yobj.markPoint=JSON.parse(str);
str ='{"data": [{"type": "average", "name": "平均值"}]}';
yobj.markLine=JSON.parse(str); */
series.push(yobj);
console.log("series",series)
};
var option = {
title: {
text: title,
x: 'left'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
/* grid: {
right: '20%'
}, */
toolbox: {
feature: {
dataView: {show: false, readOnly: false},
restore: {show: false},
saveAsImage: {show: false}
}
},
legend: {
data:mpnamestr
},
/* xAxis: [
{
type: 'category',
axisTick: {
alignWithLabel: true
},
data: measuredt,
axisLabel: {
                    //interval: 1000,//横坐标间隔
                    rotate: 340,//横坐标倾斜角度
                },
}
],
yAxis:yaAxis, */
xAxis : [
{
type : 'category',
boundaryGap : false,
data : measuredt
}
],
yAxis : [
{
type : 'value'
}
],
series:series
};
var chart = document.getElementById("chart1");
var number=mpnamestr.length;
console.log(offset);
//chart.style.width = $("#chartdiv").width()+offset*number+300+'px';
//chart.style.height = 250+'px';
$("#chart1").height($("#chartdiv1").height()-50);
$("#chart1").width($("#chartdiv1").width());
var arr=[];
$.each(ArrayDatas,function(index,item){
console.log("mpnamestr",mpnamestr[index])
var point =item[0];
var value =point==null? 0:point.parmvalue;
var name =mpnamestr[index];
var arrItem={};
arrItem.name = name;
arrItem.value=value;
arr.push(arrItem)
})
var echartsPie =intialPie("chartPie1",arr);
if(myChart1!=null){
myChart1.clear();
myChart1.dispose();
}
myChart1 = echarts.init(document.getElementById("chart1"));
myChart1.on('updateAxisPointer', function (event) {
var xAxisInfo = event.axesInfo[0];
if (xAxisInfo) {
//console.log("event",event);
var dataIndex= event.dataIndex;
var arr=[];
$.each(ArrayDatas,function(index,item){
console.log("mpnamestr",mpnamestr[index])
var point =item[dataIndex];
var value =point==null? 0:point.parmvalue;
var name =mpnamestr[index];
var arrItem={};
arrItem.name = name;
arrItem.value=value;
arr.push(arrItem)
})
var dimension = xAxisInfo.value + 1;
echartsPie.setOption({
series: {
type:'pie',
radius : '55%',//饼图的半径大小
center: ['50%', '40%'],//饼图的位置
label: {
normal: {
show: true,
formatter: '{b}: {c}'
}
},
data:arr
}
});
}
});
myChart1.setOption(option);
});
}
function getHistoryList(ids,names){
var idarr = ids.substring(0, ids.length-1);
idarr = idarr.split(",");
var namearr = names.substring(0, names.length-1);
namearr = namearr.split(",");
console.log(idarr);
var length = idarr.length;
var mpoint = [];
var checkobx={};
checkobx.checkbox = true;
//mpoint.push(checkobx);
var measuredt={};
measuredt.field='measuredt';
measuredt.title='时间';
measuredt.align='center';
measuredt.valign='middle';
measuredt.width=150;
mpoint.push(measuredt);
for(var i=0;i<idarr.length;i++){
//var color=colors[i%idarr.length];
var parmvalue={};
parmvalue.field = 'paramvalue'+i;
parmvalue.title=namearr[i];
parmvalue.align='center';
parmvalue.valign='middle';
//parmvalue.width=60;
/* var css1 = {};
css1.color = color;
var cellstyle = {};
cellstyle.css=css1;
parmvalue.cellStyle=cellstyle,*/
mpoint.push(parmvalue);
};
};
function dosearch(){
mpcodestr="";
mpnamestr="";
mpunitstr="";
optionArr= new Array();
getMpointJson();
}
$(function() {
$.post(ext.contextPath + "/user/getSearchBizsByUserId4Select.do", {}, function(data) {
if(data.length == 1){
//选择厂区为一个厂时隐藏选择框
$("#search_code").css("display", "none");
$("#company").text(data[0].text);
companyId=data[0].id;
}else{
$("#company").css("display", "none");
var selelct=$("#search_code").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;} // 函数用于呈现当前的选择
});
$(".select2-selection--single").css({'height':'30px','paddingTop':'4px'})
selelct.val('').trigger("change");
//refreshSelect();
selelct.on("change",function(e){
companyId= $(this).val();
});
}
initDate1();
},'json');
});
</script>
</head>
<body onload="initMenu()" class="hold-transition ${cu.themeclass} sidebar-mini">
<div class="wrapper">
<!-- 引用top -->
<%-- <jsp:include page="/jsp/top.jsp"></jsp:include> --%>
<!-- 菜单栏 -->
<%-- <jsp:include page="/jsp/left.jsp"></jsp:include> --%>
<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="mpSubDiv"></div>
<div class="form-group">
<label class="form-label" id="companylabel">水厂:</label>
<label class="form-label" id="company" style="width:180px;border: none;background: transparent;" ></label>
<select class="form-control select2 " id="search_code" name ="search_code" style="width: 220px;"></select>
</div>
<div class="form-group pull-right form-inline" >
<div class="input-group input-group-sm">
<input type="text" class="form-control pull-left" id="reservationtime1" style="width:225px">
<div class="input-group-btn pull-left">
<button type="button" class="btn btn-default" onclick="dosearch();" ><i class="fa fa-search"></i> 查询</button>
</div>
</div>
</div>
<div class="col-sm-12 col-md-9 col-lg-9 col-xl-9" style="height:350px;padding:0px;overflow:hidden;overflow-y:hidden" id="chartdiv">
<div id="chart" style=""></div>
</div>
<div class="col-sm-12 col-md-3 col-lg-3 col-xl-3" style="height:350px;padding:0px;overflow:hidden;overflow-y:hidden" >
<div id="chartPie" style="height:350px;"></div>
</div>
<div class="col-sm-12 col-md-9 col-lg-9 col-xl-9" style="height:350px;padding:0px;overflow:hidden;overflow-y:hidden" id="chartdiv1">
<div id="chart1" style=""></div>
</div>
<div class="col-sm-12 col-md-3 col-lg-3 col-xl-3" style="height:350px;padding:0px;overflow:hidden;overflow-y:hidden" >
<div id="chartPie1" style="height:350px;"></div>
</div>
</section>
<!-- /.content -->
</div>
<%-- <jsp:include page="/jsp/bottom.jsp"></jsp:include> --%>
<%-- <jsp:include page="/jsp/side.jsp"></jsp:include> --%>
</div>
</body>
<!-- echarts-->
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/echarts/echarts.js" charset="utf-8"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/echarts/macarons.js" charset="utf-8"></script>
<!-- 引入daterangepicker-->
<link rel="stylesheet" href="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.css"/>
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/moment.min.js" charset="utf-8"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.js" charset="utf-8"></script>
</html>

View File

@ -0,0 +1,43 @@
<%@ page language="java" pageEncoding="UTF-8"%>
<script type="text/javascript">
var selectMenu = function() {
alert('${param.hiddenId}'+'${param.textId}');
}
$(function() {
$.post(ext.contextPath + '/data/getMenusJson.do', {ng:'',unitId:unitId,ownId:'${param.ownId}'} , function(data) {
// console.info(data);
if(data.length>0){
$('#menu_select_tree').treeview({
data: data,
});
$('#menu_select_tree').on('nodeSelected', function(event, data) {
$('#${param.formId} #${param.hiddenId}' ).val(data.id);
$('#${param.formId} #${param.textId}').val(data.text);
closeModal("menu4SelectModal")
});
}
},'json');
});
</script>
<div class="modal fade" id="menu4SelectModal">
<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">&times;</span></button>
<h4 class="modal-title">选择菜单</h4>
</div>
<div class="modal-body">
<div id="menu_select_tree" style="height:430px;overflow:auto;width:100%"></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="selectMenu()">保存</button> -->
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>

View File

@ -0,0 +1,248 @@
<%@ page language="java" pageEncoding="UTF-8"%>
<!-- 引入daterangepicker-->
<link rel="stylesheet" href="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.css"/>
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/moment.min.js" charset="utf-8"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.js" charset="utf-8"></script>
<script type="text/javascript">
var beginTimeStore1 = '${param.sdt}';
var endTimeStore1 = '${param.edt}';
function initDate() {
//定义locale汉化插件
if(beginTimeStore1==''){
beginTimeStore1 = moment().subtract(7, 'days').format('YYYY-MM-DD HH:mm');
}
if(endTimeStore1==''){
endTimeStore1 = moment().subtract(0, 'days').format('YYYY-MM-DD HH:mm');
}
var locale = {
"format": 'YYYY-MM-DD HH:mm',
"separator": " ~ ",
"applyLabel": "确定",
"cancelLabel": "取消",
"fromLabel": "起始时间",
"toLabel": "结束时间'",
"customRangeLabel": "自定义",
"weekLabel": "W",
"daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"],
"monthNames": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
"firstDay": 1
};
$('#reservationtime').daterangepicker({
"timePicker": true,
"timePicker24Hour": true,
"linkedCalendars": false,
"autoUpdateInput": false,
"timePickerIncrement": 10,
"locale": locale,
//汉化按钮部分
ranges: {
// '今日': [moment(), moment().subtract(-1, 'days')],
'昨日': [moment().subtract(1, 'days'), moment()],
'最近7日': [moment().subtract(6, 'days'), moment().subtract(-1, 'days')],
'本月': [moment().startOf('month'), moment().endOf('month').subtract(-1, 'days')],
'上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month').subtract(-1, 'days')]
},
startDate: beginTimeStore1,
endDate: endTimeStore1
}, function(start, end, label) {
beginTimeStore1 = start.format(this.locale.format);
endTimeStore1 = end.format(this.locale.format);
if(!this.startDate){
this.element.val('');
}else{
this.element.val(this.startDate.format(this.locale.format) + this.locale.separator + this.endDate.format(this.locale.format));
}
});
$('#reservationtime').val(beginTimeStore1 + locale.separator + endTimeStore1);
};
var color=[
"#2ec7c9",
"#b6a2de",
"#5ab1ef",
"#ffb980",
"#d87a80",
"#8d98b3",
"#e5cf0d",
"#97b552",
"#95706d",
"#dc69aa",
"#07a2a4",
"#9a7fd1",
"#588dd5",
"#f5994e",
"#c05050",
"#59678c",
"#c9ab00",
"#7eb00a",
"#6f5553",
"#c14089"
];
function getEcharts(){
<%--var cunitId="";--%>
<%--if('${param.unitId}'!=''){--%>
<%-- cunitId='${param.unitId}';--%>
<%--}else{--%>
<%-- cunitId=unitId;--%>
<%--}--%>
document.getElementById("chart").removeAttribute("_echarts_instance_");
var myChart = echarts.init(document.getElementById("chart"));
myChart.showLoading({
text: '数据正在加载...',
textStyle: { fontSize : 30 , color: '#444' },
effectOption: {backgroundColor: 'rgba(0, 0, 0, 0)'},
zlevel: 0
});
$.post(ext.contextPath + '/data/getDetailData.do', {mpcode:"${param.mpcode}",sdt:beginTimeStore1,edt:endTimeStore1} , function(result) {
// console.log(result);
var series=[];
var yAxis=[];
var legenddata=[];
for(var i=0;i<result.length;i++){
series.push({
data:result[i].data,
symbol:'none',
name:result[i].name,
type:'line',
lineStyle:{
width:2
},
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
})
legenddata.push(result[i].name);
}
yAxis.push({
type : 'value',
name : false,
splitLine: {
show: false//是否显示分隔线。默认数值轴显示,类目轴不显示。
},
scale:true//设置成 true 后坐标刻度不会强制包含零刻度。
});
var option = {
color:color,
animation:false,
legend: {
data: legenddata,
left: 'center'
},
grid:{
left: '4%', // 与容器左侧的距离
right: '4%', // 与容器右侧的距离
top: '8%', // 与容器顶部的距离
//bottom: '5%', // 与容器底部的距离
containLabel:true
},
toolbox: {
feature: {
saveAsImage: {show: true}
}
},
xAxis: {
type: 'time'
},
yAxis: yAxis,
series: series,
tooltip: {
trigger: 'axis',
formatter: function (params, ticket, callback) {
var htmlStr = '';
for(var i=0;i<params.length;i++){
var param = params[i];
// console.log(param);
var xName = param.name;//x轴的名称
var seriesName = param.seriesName;//图例名称
var xvalue = param.value[0];//x轴值
var yvalue = param.value[1];//y轴值
var remarkvalue = param.value[2];//备注轴值
var color = param.color;//图例颜色
var dataIndex=param.dataIndex;
var seriesIndex=param.seriesIndex;
htmlStr +='<div>';
htmlStr += xvalue + '<br/>' ;
htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:'+color+';"></span>';
htmlStr += seriesName+':'+ yvalue + '';
htmlStr += '</div>';
}
return htmlStr;
}
// alwaysShowContent:true,
},
dataZoom: [{
type: 'inside',
start: 0,
end: 100
}, {
start: 0,
end: 100,
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleSize: '60%',
handleStyle: {
color: '#fff',
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 2,
shadowOffsetY: 2
}
}]
};
myChart.setOption(option,true);
myChart.hideLoading();
},'json');
}
$(function() {
var windowhight=$(window).height();
var windowwidth=$(window).width();
$('#chart').attr("style","height:"+(windowhight-200)+"px;width:"+(windowwidth-100)+"px;padding-top:35px;");
initDate();
getEcharts();
});
function doCurveSearch(){
getEcharts();
}
</script>
<div class="modal fade" id="curveModal">
<div style="padding: 20px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title">历史曲线</h4>
</div>
<div class="modal-body">
<div class="input-group pull-left input-group-sm" >
<input type="text" class="form-control pull-left" id="reservationtime" style="width:230px" >
<div class="input-group-btn pull-left">
<button type="button" class="btn btn-default" onclick="doCurveSearch();" ><i class="fa fa-search"></i> 查询</button>
</div>
</div>
<div id="chart" style="float: left;"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>

View File

@ -0,0 +1,258 @@
<%@ 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>
<!-- 引入daterangepicker-->
<jsp:include page="/jsp/inc.jsp"></jsp:include>
<!-- echarts-->
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/echarts/echarts.js" charset="utf-8"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/echarts/macarons.js" charset="utf-8"></script>
<!-- 引入daterangepicker-->
<link rel="stylesheet" href="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.css"/>
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/moment.min.js" charset="utf-8"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.js" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
var windowhight=$(window).height();
var windowwidth=$(window).width();
$('#chart').attr("style","height:"+(windowhight-150)+"px;width:"+(windowwidth-100)+"px;");
initDate();
getEcharts();
});
// 注册消息事件监听,接受父元素给的数据
window.addEventListener('message', (e) => {
console.log(123);
}, false);
function doCurveSearch(){
getEcharts();
}
var beginTimeStore1 = '';
var endTimeStore1 = '';
function initDate() {
//定义locale汉化插件
beginTimeStore1 = moment().subtract(7, 'days').format('YYYY-MM-DD HH:mm');
endTimeStore1 = moment().subtract(0, 'days').format('YYYY-MM-DD HH:mm');
var locale = {
"format": 'YYYY-MM-DD HH:mm',
"separator": " ~ ",
"applyLabel": "确定",
"cancelLabel": "取消",
"fromLabel": "起始时间",
"toLabel": "结束时间'",
"customRangeLabel": "自定义",
"weekLabel": "W",
"daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"],
"monthNames": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
"firstDay": 1
};
$('#reservationtime').daterangepicker({
"timePicker": true,
"timePicker24Hour": true,
"linkedCalendars": false,
"autoUpdateInput": false,
"timePickerIncrement": 10,
"locale": locale,
//汉化按钮部分
ranges: {
// '今日': [moment(), moment().subtract(-1, 'days')],
'昨日': [moment().subtract(1, 'days'), moment()],
'最近7日': [moment().subtract(6, 'days'), moment().subtract(-1, 'days')],
'本月': [moment().startOf('month'), moment().endOf('month').subtract(-1, 'days')],
'上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month').subtract(-1, 'days')]
},
startDate: beginTimeStore1,
endDate: endTimeStore1
}, function(start, end, label) {
beginTimeStore1 = start.format(this.locale.format);
endTimeStore1 = end.format(this.locale.format);
if(!this.startDate){
this.element.val('');
}else{
this.element.val(this.startDate.format(this.locale.format) + this.locale.separator + this.endDate.format(this.locale.format));
}
});
$('#reservationtime').val(beginTimeStore1 + locale.separator + endTimeStore1);
};
var color=[
"#66c0dd",
"#42cc81",
"#e6d187",
"#3e94e3",
"#ea7e53",
"#eedd78",
"#73a373",
"#73b9bc",
"#7289ab",
"#91ca8c",
"#f49f42"
];
function getEcharts(){
var cunitId="";
if('${param.unitId}'!=''){
cunitId='${param.unitId}';
}else{
cunitId=unitId;
}
$.post(ext.contextPath + '/data/getDetailData.do', {mpcode:"${param.mpcode}",unitId:cunitId,sdt:beginTimeStore1,edt:endTimeStore1} , function(result) {
// console.log(result);
var series=[];
var yAxis=[];
var legenddata=[];
for(var i=0;i<result.length;i++){
series.push({
data:result[i].data,
symbol:'none',
name:result[i].name,
type:'line',
lineStyle:{
width:2
},
// areaStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
// offset: 0,
// color: 'rgba(58,77,233,0.8)'
// }, {
// offset: 1,
// color: 'rgba(46,199,201,0.3)'
// }])
// },
// ,
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
})
legenddata.push(result[i].name);
}
yAxis.push({
type : 'value',
name : false,
splitLine: {
show: false//是否显示分隔线。默认数值轴显示,类目轴不显示。
},
axisLine:{
lineStyle:{
color:'#ffffff',
width:1,//这里是为了突出显示加上的
}
},
scale:true//设置成 true 后坐标刻度不会强制包含零刻度。
});
var myChart = echarts.init(document.getElementById("chart"));
var option = {
color:color,
animation:false,
legend: {
data: legenddata,
left: 'center',
textStyle:{//图例文字的样式
color:color
}
},
grid:{
left: '4%', // 与容器左侧的距离
right: '4%', // 与容器右侧的距离
top: '8%', // 与容器顶部的距离
bottom: '2%', // 与容器底部的距离
containLabel:true
},
// toolbox: {
// feature: {
// saveAsImage: {show: true}
// }
// },
xAxis: {
type: 'time',
axisLine:{
lineStyle:{
color:'#ffffff',
width:1,//这里是为了突出显示加上的
}
}
},
yAxis: yAxis,
series: series,
tooltip: {
trigger: 'axis',
formatter: function (params, ticket, callback) {
var htmlStr = '';
for(var i=0;i<params.length;i++){
var param = params[i];
// console.log(param);
var xName = param.name;//x轴的名称
var seriesName = param.seriesName;//图例名称
var xvalue = param.value[0];//x轴值
var yvalue = param.value[1];//y轴值
var remarkvalue = param.value[2];//备注轴值
var color = param.color;//图例颜色
var dataIndex=param.dataIndex;
var seriesIndex=param.seriesIndex;
htmlStr +='<div>';
htmlStr += xvalue + '<br/>' ;
htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:'+color+';"></span>';
htmlStr += seriesName+':'+ yvalue + '';
htmlStr += '</div>';
}
return htmlStr;
}
// alwaysShowContent:true,
}
};
// console.log(option);
myChart.setOption(option,true);
},'json');
}
</script>
</head>
<body onload="initMenu()" class="hold-transition ${cu.themeclass} sidebar-mini">
<div class="wrapper">
<div class="content-wrapper" style="background-color:rgba(6,17,56,1);">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1 id ="head_title"></h1>
</section>
<!-- Main content -->
<section class="content container-fluid">
<div id="mainAlertdiv"></div>
<div id="subDiv"></div>
<div id="mpSubDiv"></div>
<div class="input-group pull-left input-group-sm" >
<input type="text" class="form-control pull-left" id="reservationtime" style="width:230px;background-color:rgba(6,17,56,1);color: #ffffff;" >
<div class="input-group-btn pull-left">
<button type="button" class="btn btn-default" onclick="doCurveSearch();" style="background-color:rgba(6,17,56,1);color: #ffffff;"><i class="fa fa-search"></i> 查询</button>
</div>
</div>
<div id="chart"></div>
</section>
<!-- /.content -->
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,102 @@
<%@ page language="java" pageEncoding="UTF-8" %>
<!-- 文件上传-->
<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>
<script type="text/javascript">
var masterId = '${masterId}';
var tbName = '${tbName}'; //数据表
var nameSpace = '${nameSpace}';//保存文件夹
var filelist = new Array();
//初始化fileinput控件第一次初始化
function initFileInput(ctrlName, uploadUrl) {
var control = $('#' + ctrlName);
control.fileinput({
language: 'zh', //设置语言
uploadUrl: uploadUrl, //上传的地址
uploadAsync: true,
allowedFileExtensions: ['jpg', 'png', 'gif', 'pdf', 'doc', 'xls', 'docx', 'ppt', 'pptx', 'xlsx', 'txt'],//接收的文件后缀
showUpload: false, //是否显示上传按钮
showRemove: true,
showCaption: false,//是否显示标题
showClose: 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,
previewFileIconSettings: {
'doc': '<i class="fa fa-file-word-o" style="color:#3c8dbc;margin-left:-100px"></i>',
'docx': '<i class="fa fa-file-word-o" style="color:#3c8dbc;margin-left:-100px"></i>',
'xls': '<i class="fa fa-file-excel-o" style="color:#00a65a ;margin-left:-100px"></i>',
'xlsx': '<i class="fa fa-file-excel-o" style="color:#00a65a ;margin-left:-100px"></i>',
'pptx': '<i class="fa fa-file-powerpoint-o" style="color:#f39c12;margin-left:-100px "></i>',
'ppt': '<i class="fa fa-file-powerpoint-o" style="color:#f39c12;margin-left:-100px "></i>',
//'jpg': '<i class="fa fa-file-image-o" style="color:#00a65a "></i>',
'pdf': '<i class="fa fa-file-pdf-o" style="color:#dd4b39 ;margin-left:-100px"></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: ''
},
});
control.on("filebatchselected", function (event, data, previewId, index) {
$(this).fileinput("upload");
});
//导入文件上传完成之后的事件
control.on("fileuploaded", function (event, data, previewId, index) {
if (data.response.suc) {
//fileTable
// $('#fileInputModal').modal('hide')
// $("#fileTable").bootstrapTable('refresh');
}
});
}
$(function () {
// initFileInput("filelist",ext.contextPath+ "/base/inputFile.do");
initFileInput("filelist", ext.contextPath + "/base/updateFile.do");
})
</script>
<div class="modal fade" id="fileInputModal">
<div class="modal-dialog" style="height: 500px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">上传</h4>
</div>
<div class="modal-body">
<!-- 新增界面formid强制为subForm -->
<form class="form-horizontal" id="fileInputModalForm" style="padding:10px">
<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>
</div>
</div>
</div>
</div>

View File

@ -0,0 +1,186 @@
<%@ page language="java" pageEncoding="UTF-8" %>
<%@page import="com.sipai.entity.maintenance.Abnormity" %>
<%request.setAttribute("Type_Run", Abnormity.Type_Run); %>
<%request.setAttribute("Type_Equipment", Abnormity.Type_Equipment); %>
<%request.setAttribute("Type_Facilities", Abnormity.Type_Facilities); %>
<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 masterId = '${masterId}';
var tbName = '${tbName}'; //数据表
var nameSpace = '${nameSpace}';//保存文件夹
var bucketName = '${nameSpace}';
// var previews = new Array();
// var previewConfigs = new Array();
$(function () {
//加载文件
<%--getFileListMinioPic('fileViewId', 'edit', '${id}', previews, previewConfigs);--%>
$("#fileTable").bootstrapTable({ // 对应table标签的id
url: ext.contextPath + '/base/getInputFileList_minio2.do', // 获取表格数据的url
cache: false, // 设置为 false 禁用 AJAX 数据缓存, 默认为true
striped: true, //表格显示条纹默认为false
pagination: true, // 在表格底部显示分页组件默认false
pageList: [10, 15, 20], // 设置页面可以显示的数据条数
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, // 排序规则
masterId: masterId,
tbName: tbName,
bucketName: bucketName
}
},
sortName: 'insdt', // 要排序的字段
sortOrder: 'desc', // 排序规则
columns: [
{
field: 'filename', // 返回json数据中的name
title: '文件名称', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle',
width: '30%'
},
{
field: 'user.caption', // 返回json数据中的name
title: '上传人', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle',
width: '20%'
},
{
field: 'insdt', // 返回json数据中的name
title: '上传时间', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle',
width: '20%',
formatter: function (value, row, index) {
if (row.insdt != null && row.insdt != '') {
return row.insdt.substring(0, 19);
}
}
},
{
field: 'insdt', // 返回json数据中的name
title: '文件大小', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle',
width: '20%',
formatter: function (value, row, index) {
if (row.size != null && row.size != '') {
return row.size / 1000 + 'kb';
}
}
},
{
title: "操作",
align: 'center',
valign: 'middle',
width: '220',
formatter: function (value, row, index) {
var buts = '';
buts += '<button type="button" class="btn btn-default btn-sm" title="下载" onclick="fileDownload(\'' + row.id + '\')"><i class="fa fa-download"></i><span class="hidden-md hidden-lg">下载</span></button>';
buts += '<button type="button" class="btn btn-default btn-sm" title="删除" onclick="delFileFun(\'' + row.id + '\')"><i class="fa 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("fileTable");
},
onLoadError: function () { //加载失败时执行
console.info("加载数据失败");
}
})
});
//下载文件
var fileDownload = function (id) {
// window.open(ext.contextPath + "/base/downloadFile.do?key=" + id + "&tbName=" + tbName);
window.open(ext.contextPath + "/data/downloadCurveFile4minio.do?id=" + id);
};
var delFileFun = function (id) {
stopBubbleDefaultEvent();
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 + '/document/dodeleteFile.do', {id: id, tbName: tbName}, function (data) {
if (data == 1) {
$("#fileTable").bootstrapTable('refresh');
} else {
showAlert('d', '删除失败', 'mainAlertdiv');
}
});
}
});
};
</script>
<div class="modal fade" id="fileInputModal">
<div class="modal-dialog" style="height: 500px;width: 600px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">附件查看</h4>
</div>
<div class="modal-body">
<!-- 新增界面formid强制为subForm -->
<form class="form-horizontal" id="subForm">
<!-- 界面提醒div强制id为alertDiv -->
<div id="alertDiv"></div>
<table id="fileTable"></table>
<%-- <div class="form-group" style="margin:8px;">--%>
<%-- <input type="file" name="abnormityFileId" id="abnormityFileId" multiple--%>
<%-- class="file-loading"/>--%>
<%-- </div>--%>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>

View File

@ -0,0 +1,531 @@
<%@ 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" %>
<!-- 文件上传-->
<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>
<%--文件上传 minio--%>
<script type="text/javascript" src="<%=request.getContextPath()%>/JS/commonFile.js" charset="utf-8"></script>
<script type="text/javascript">
let nowMpid = "";
let nowUnitId = "";
let inSdt = "${param.sdt}";
let inEdt = "${param.edt}";
let firstIn = 0;
let top_remarkMps;
$(function () {
let iHeight = $(window).height() * 0.8;
$('#viewShow').css('height', iHeight);
<%--console.log('${param.sdt}');--%>
<%--console.log('${param.edt}');--%>
let remarkMpidsContent = '${param.remarkMpidsContent}'; // 测量点:厂id:测量点名称
let remarkMps = (remarkMpidsContent.substring(0, remarkMpidsContent.length - 1)).split(",");
// console.log(remarkMps);
top_remarkMps = remarkMps;
let mpids = "";
for (let i = 0; i < remarkMps.length; i++) {
let content = remarkMps[i].split(":");
mpids += content[0] + ",";
if (i == 0) {
getTab(content[0], content[1], content[2], "block");
} else {
getTab(content[0], content[1], content[2], "none");
}
}
$.post(ext.contextPath + "/work/mpoint/getMpointSelectTree.do", {
mpids: mpids
}, function (data) {
var selecttype = $("#mpidsSelect").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;
} // 函数用于呈现当前的选择
});
selecttype.on("change", function (e) {
// let mySelect = document.getElementById("mpidsSelect");
// let index = mySelect.selectedIndex;
// console.log(data)
// $('#dataTab').html("");
// console.log($(this).val());
if (Number(firstIn) > 0) {
for (let i = 0; i < remarkMps.length; i++) {
let content = remarkMps[i].split(":");
// console.log(content[0])
if (content[0] == $(this).val()) {
$("#" + content[0] + "_dataTabDiv").css("display", "block");
$("#" + content[0] + "_contentRemarkDiv").css("display", "block");
$("#" + content[0] + "_hisDataDiv").css("display", "block");
} else {
$("#" + content[0] + "_dataTabDiv").css("display", "none");
$("#" + content[0] + "_contentRemarkDiv").css("display", "none");
$("#" + content[0] + "_hisDataDiv").css("display", "none");
}
}
}
});
if (data.length > 0) {
selecttype.val(data[0].id).trigger("change");//设置选中
} else {
selecttype.val('').trigger("change");//设置选中
}
}, 'json');
// let contents = remarkMps[0];
// let content = contents.split(":");
// getTab(content[0], content[1], content[2]);
});
function getTab(mpid, unitId, mpname, st) {
$.post(ext.contextPath + "/work/mpoint/getMpointJsonFormpids.do", {
unitId: unitId,
mpids: mpid,
func: "",
mpname: mpname,
sdt: '${param.sdt}',
edt: '${param.edt}'
// dataAaccuracy: dataAaccuracy
}, function (data) {
var datas = eval('(' + data + ')');
// console.log(datas)
let html = "";
if (st == 'block') {
html += "<div id='" + mpid + "_dataTabDiv' style='float: left;width: 100%;height: 100%;display: block;'>";
} else {
html += "<div id='" + mpid + "_dataTabDiv' style='float: left;width: 100%;height: 100%;display: none;'>";
}
html += "<table id='" + mpid + "_dataTab' style='width: 100%;table-layout:fixed;text-align: center;overflow: auto;' border='2' cellspacing='0'>";
html += "<tbody style='width: 100%;'>";
html += "<tr style='width: 100%;height: 45px;'>";
html += "<td style='width: 60%;'>日期</td>";
html += "<td style='width: 40%;'>值</td>";
html += "</tr>";
html += "</tbody>";
for (let i = 0; i < datas[0].data.length; i++) {
let showContenet = datas[0].data[i];
if (i == 0 || i == (datas[0].data.length - 1)) {
html += "<tr id='" + mpid + "_" + (i + 1) + "' style='width: 100%;height: 30px;cursor: pointer;background:rgba(191,219,255,1);' onclick=\"tdClick(this,'" + mpid + "');\">";
} else {
html += "<tr id='" + mpid + "_" + (i + 1) + "' style='width: 100%;height: 30px;cursor: pointer;background:rgba(191,219,255,0.5);' onclick=\"tdClick(this,'" + mpid + "');\">";
}
html += "<td style='white-space: nowrap;overflow: hidden;text-overflow: ellipsis;'>" + getLocalTime2(showContenet[0] / 1000).substring(0, 19) + "</td>";
html += "<td style='white-space: nowrap;overflow: hidden;text-overflow: ellipsis;'>" + showContenet[1] + "</td>";
html += "</tr>";
}
html += "</table>";
html += "</div>";
$('#dataDiv').append(html);
let html2 = "";
if (st == 'block') {
html2 += "<div id='" + mpid + "_contentRemarkDiv' style='float: left;width: 100%;display: block;'>";
} else {
html2 += "<div id='" + mpid + "_contentRemarkDiv' style='float: left;width: 100%;display: none;'>";
}
html2 += "<div style='width:100%;float:left;margin-top: 0px;'>";
html2 += "<div style='width:50%;float:left;'>";
html2 += "<div class='input-group' style='margin-left: 10px;'>";
html2 += "<span class='input-group-addon' style='height:31px;color:#000000;border-top-left-radius: 4px;border-bottom-left-radius: 4px;font-weight:bold'>起始时间:</span>";
html2 += "<input type='hidden' id='" + mpid + "_remarkSdtHidden' readonly />";
html2 += "<input class='form-control ' id='" + mpid + "_remarkSdt' name='remarkSdt' value='${param.sdt}' readonly style='height:31px;width: 190px;border-top-right-radius: 4px;border-bottom-right-radius: 4px;cursor:pointer;' />";
html2 += "</div>";
html2 += "</div>";
html2 += "<div style='width:50%;float:left;'>";
html2 += "<div class='input-group' style='margin-left: 10px;'>";
html2 += "<span class='input-group-addon' style='height:31px;color:#000000;border-top-left-radius: 4px;border-bottom-left-radius: 4px;font-weight:bold'>结束时间:</span>";
html2 += "<input type='hidden' id='" + mpid + "_remarkEdtHidden' readonly />";
html2 += "<input class='form-control ' id='" + mpid + "_remarkEdt' name='remarkEdt' value='${param.edt}' readonly style='height:31px;width: 190px;border-top-right-radius: 4px;border-bottom-right-radius: 4px;cursor:pointer;'/>";
html2 += "</div>";
html2 += "</div>";
html2 += " <div style='width:100%;float:left;margin-top: 20px;'>";
html2 += "<div class='form-group' style='height:100px;'>";
html2 += "<label class='col-sm-2 control-label' style='line-height: 100px;vertical-align:middle;'>拐点备注</label>";
html2 += "<div class='col-sm-10'>";
html2 += "<textarea class='form-control' style='height: 100px;' id='" + mpid + "_remarkContent' name='remarkContent' placeholder='备注...'></textarea>";
html2 += "</div>";
html2 += "</div>";
html2 += "</div>";
html2 += "</div>";
$('#contentRemark').append(html2);
// hisData
let html3 = "";
if (st == 'block') {
html3 += "<div id='" + mpid + "_hisDataDiv' style='float: left;width: 100%;height: 100%;display: block;'>";
} else {
html3 += "<div id='" + mpid + "_hisDataDiv' style='float: left;width: 100%;height: 100%;display: none;'>";
}
html3 += "<table id='" + mpid + "_hisDataTab' >";
html3 += "</table>";
html3 += "</div>";
$('#hisData').append(html3);
$("#" + mpid + "_hisDataTab").bootstrapTable({ // 对应table标签的id
url: ext.contextPath + '/data/getHisRemarkTab.do', // 获取表格数据的url
cache: false, // 设置为 false 禁用 AJAX 数据缓存, 默认为true
striped: true, //表格显示条纹默认为false
pagination: true, // 在表格底部显示分页组件默认false
pageList: [15], // 设置页面可以显示的数据条数
pageSize: 15, // 页面数据条数
pageNumber: 1, // 首页页码
paginationDetailHAlign: ' hidden',//去除分页的显示
sidePagination: "client", //分页方式client客户端分页server服务端分页*
queryParams: function (params) { // 请求服务器数据时发送的参数可以在这里添加额外的查询参数返回false则终止请求
return {
sdt: inSdt,
edt: inEdt,
mpid: mpid + ":" + unitId
}
},
columns: [
{
field: 'sdt', // 返回json数据中的name
title: '开始时间', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle', // 上下居中
width: '160px',
formatter: function (value, row, index) {
return value.substring(0, 19);
}
}, {
field: 'edt', // 返回json数据中的name
title: '结束时间', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle', // 上下居中
width: '160px',
formatter: function (value, row, index) {
return value.substring(0, 19);
}
}, {
field: 'content', // 返回json数据中的name
title: '备注内容', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle' // 上下居中
}, {
title: "操作",
align: 'center',
valign: 'middle',
width: 120, // 定义列的宽度单位为像素px
formatter: function (value, row, index) {
var buts = "";
buts += '<button type="button" class="btn btn-default btn-sm" title="附件查看" onclick="fileViewFun(\'' + row.id + '\')"><i class="fa fa-eye"></i><span class="hidden-md hidden-lg">附件查看</span></button>';
buts += '<button type="button" class="btn btn-default btn-sm" title="附件上传" onclick="fileOpenFun(\'' + row.id + '\')"><i class="fa fa-cloud-upload"></i><span class="hidden-md hidden-lg">附件上传</span></button>';
buts += '<button type="button" class="btn btn-default btn-sm" title="删除" onclick="deleteCurveRemark(\'' + row.id + '\',\'' + row.mpointId + '\')"><i class="fa 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(mpid + "_hisDataTab");
},
onLoadError: function () { //加载失败时执行
console.info("加载数据失败");
}
});
});
firstIn = 1;
}
// let firstNum = 0;
// let endNum = 0;
function tdClick(object, mpid) {
if ($("#" + mpid + "_remarkSdt").val() != '' && $("#" + mpid + "_remarkEdt").val() != '') {
showAlert('d', '请先重置选择时间');
} else {
event.stopPropagation();
let time = $(object).text().substring(0, 16);
// console.log(time);
if ($("#" + mpid + "_remarkSdt").val() == '' && $("#" + mpid + "_remarkEdt").val() == '') {
$("#" + mpid + "_remarkSdt").val(time);
$(object).css("background", "rgba(191,219,255,1)");
$("#" + mpid + "_remarkSdtHidden").val($(object).attr("id").replace(mpid + "_", ""));
} else if ($("#" + mpid + "_remarkSdt").val() != '' && $("#" + mpid + "_remarkEdt").val() == '') {
$("#" + mpid + "_remarkEdt").val(time);
$(object).css("background", "rgba(191,219,255,1)");
$("#" + mpid + "_remarkEdtHidden").val($(object).attr("id").replace(mpid + "_", ""));
$("#" + mpid + "_dataTab tbody").find("tr").each(function () {
if ($(this).attr("id") != null && $(this).attr("id") != '') {
let nowNum = $(this).attr("id").replace(mpid + "_", "");
if (Number(nowNum) > Number($("#" + mpid + "_remarkSdtHidden").val()) && Number(nowNum) < Number($("#" + mpid + "_remarkEdtHidden").val())) {
$(this).css("background", "rgba(191,219,255,0.5)");
}
}
});
}
}
}
function doRemarkRetime() {
let nowMpid = $("#mpidsSelect").val();
$('#' + nowMpid + '_remarkSdt').val('');
$('#' + nowMpid + '_remarkEdt').val('');
$("#" + nowMpid + "_remarkSdtHidden").val('');
$("#" + nowMpid + "_remarkEdtHidden").val('');
$("#" + nowMpid + "_dataTab tbody").find("tr").each(function () {
$(this).css("background", "#ffffff");
});
}
function doRemark() {
for (let i = 0; i < top_remarkMps.length; i++) {
let content = top_remarkMps[i].split(":");
if ($('#' + content[0] + '_remarkSdt').val() == '' || $('#' + content[0] + '_remarkEdt').val() == '') {
showAlert('d', content[2] + '未选择时间');
return;
} else {
if ($('#' + content[0] + '_remarkContent').val() == '') {
showAlert('d', content[2] + '未填写备注内容');
return;
} else {
// console.log(123)
}
}
}
for (let i = 0; i < top_remarkMps.length; i++) {
let content = top_remarkMps[i].split(":");
$.post(ext.contextPath + "/data/saveCurveRemark.do", {
sdt: $('#' + content[0] + '_remarkSdt').val().substring(0, 16),
edt: $('#' + content[0] + '_remarkEdt').val().substring(0, 16),
content: $('#' + content[0] + '_remarkContent').val(),
mpids: content[0] + ":" + content[1]
}, function (data) {
if (data.code == 1) {
closeModal("curveRemarkSubModal");
$('#showRemarkPoint').val('0');
// $("#" + content[0] + "_hisDataTab").bootstrapTable('refresh');
dosearch();
} else if (data.code == 0) {
showAlert('d', '保存失败');
} else {
showAlert('d', data.msg);
}
}, 'json');
}
}
function deleteCurveRemark(id, mpointId) {
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) {
let mpid = mpointId.split(":");
$.post(ext.contextPath + '/data/deleteCurveRemark2.do', {id: id}, function (data) {
if (data == "1") {
$('#showRemarkPoint').val('0');
$("#" + mpid[0] + "_hisDataTab").bootstrapTable('refresh');
dosearch();
} else {
showAlert('d', '删除失败');
}
}, 'json');
}
});
}
function doRemarkSame() {
let nowMpid = $("#mpidsSelect").val();
for (let i = 0; i < top_remarkMps.length; i++) {
let content = top_remarkMps[i].split(":");
if (content[0] != nowMpid) {
$('#' + content[0] + '_remarkContent').val($('#' + nowMpid + '_remarkContent').val())
}
}
}
function fileOpenFun(id) {
$.post(ext.contextPath + '/data/curveRemarkFileUp.do', {
masterId: id,
tbName: 'TB_Data_Curve_Remark_File',
nameSpace: 'curve'
}, function (data) {
$("#fileInputDiv").html(data);
openModal('fileInputModal');
});
}
function fileViewFun(id) {
$.post(ext.contextPath + '/data/curveRemarkFileView.do', {
masterId: id,
tbName: 'TB_Data_Curve_Remark_File',
nameSpace: 'curve'
}, function (data) {
$("#fileInputDiv").html(data);
openModal('fileInputModal');
});
}
function closeRemark() {
// $('#showRemarkPoint').val('0');
closeModal('curveRemarkSubModal');
}
</script>
<div class="modal fade" id="curveRemarkSubModal">
<div class="modal-dialog modal-md" style="width: 80%;">
<div class="modal-content">
<div class="modal-header">
<%-- <button type="button" class="close" data-dismiss="modal" aria-label="Close">--%>
<%-- <span aria-hidden="true">&times;</span></button>--%>
<h4 class="modal-title">曲线备注</h4>
</div>
<!-- 界面提醒div强制id为alertDiv -->
<div id="alertDiv"></div>
<div id="viewShow" class="modal-body">
<div style="width: 100%;height: calc(100% - 45px);">
<div id="left" style="width: 40%;height: 100%;float: left;overflow: auto;">
<div style="float: left;width: 100%;height: 45px;">
<div class="form-group">
<div style="float: left;width: 45px;line-height: 28px;">点位:</div>
<div style="float: left;width: 180px;">
<select class="form-control select2 " id="mpidsSelect" name="mpidsSelect"
style="width: 170px;"></select>
</div>
</div>
</div>
<div id="dataDiv" style="float: left;width: 100%;height: calc(100% - 45px);"></div>
</div>
<div id="right" style="width: 60%;height: 100%;float: left;padding-left: 10px;">
<div id="contentRemark" style="float: left;width: 100%;height: 180px;">
<%-- <div style="width:100%;float:left;margin-top: 0px;">--%>
<%-- <div style="width:50%;float:left;">--%>
<%-- <div class="input-group" style="margin-left: 10px;">--%>
<%-- <span class="input-group-addon"--%>
<%-- style="height:31px;color:#000000;border-top-left-radius: 4px;border-bottom-left-radius: 4px;font-weight:bold">起始时间:</span>--%>
<%-- <input class="form-control " id="remarkSdt" name="remarkSdt"--%>
<%-- value="${param.sdt}"--%>
<%-- readonly--%>
<%-- style="height:31px;width: 190px;border-top-right-radius: 4px;border-bottom-right-radius: 4px;cursor:pointer;"--%>
<%-- />--%>
<%-- </div>--%>
<%-- </div>--%>
<%-- <div style="width:50%;float:left;">--%>
<%-- <div class="input-group" style="margin-left: 10px;">--%>
<%-- <span class="input-group-addon"--%>
<%-- style="height:31px;color:#000000;border-top-left-radius: 4px;border-bottom-left-radius: 4px;font-weight:bold">结束时间:</span>--%>
<%-- <input class="form-control " id="remarkEdt" name="remarkEdt"--%>
<%-- value="${param.edt}"--%>
<%-- readonly--%>
<%-- style="height:31px;width: 190px;border-top-right-radius: 4px;border-bottom-right-radius: 4px;cursor:pointer;"--%>
<%-- />--%>
<%-- </div>--%>
<%-- </div>--%>
<%-- </div>--%>
<%-- <div style="width:100%;float:left;margin-top: 20px;">--%>
<%-- <div class="form-group" style="height:100px;">--%>
<%-- <label class="col-sm-2 control-label"--%>
<%-- style="line-height: 100px;vertical-align:middle;">拐点备注</label>--%>
<%-- <div class="col-sm-10">--%>
<%-- <textarea class="form-control"--%>
<%-- style="height: 100px;" id="remarkContent"--%>
<%-- name="remarkContent"--%>
<%-- placeholder="备注..."></textarea>--%>
<%-- </div>--%>
<%-- </div>--%>
<%-- </div>--%>
</div>
<%-- <div style="width:100%;float:left;height: 35px;padding-left: 15px;">--%>
<%-- <button type="button" class="btn btn-default" onclick="fileinput();"><i--%>
<%-- class="fa fa-upload"></i>--%>
<%-- 附件上传--%>
<%-- </button>--%>
<%-- </div>--%>
<div style="width:100%;float:left;height: 30px;">
<%-- <div class="pull-right"--%>
<%-- style="width:50px;height:25px;border-radius: 4px;background: #3c8dbc;margin-right: 10px;">--%>
<%-- <div style="text-align:center;line-height:25px;font-size:12px;color:#ffffff;font-weight:700;font-family: MicrosoftYaHei, MicrosoftYaHei-Bold;cursor: pointer;"--%>
<%-- onclick="deleteCurveRemark();">删除--%>
<%-- </div>--%>
<%-- </div>--%>
<div class="pull-right"
style="width:50px;height:25px;border-radius: 4px;background: #3c8dbc;margin-right: 10px;">
<div style="text-align:center;line-height:25px;font-size:12px;color:#ffffff;font-weight:700;font-family: MicrosoftYaHei, MicrosoftYaHei-Bold;cursor: pointer;"
onclick="doRemark();">确认
</div>
</div>
<div class="pull-right"
style="width:50px;height:25px;border-radius: 4px;background: #3c8dbc;margin-right: 10px;">
<div style="text-align:center;line-height:25px;font-size:12px;color:#ffffff;font-weight:700;font-family: MicrosoftYaHei, MicrosoftYaHei-Bold;cursor: pointer;"
onclick="doRemarkRetime();">重置
</div>
</div>
<div class="pull-right"
style="width:60px;height:25px;border-radius: 4px;background: #3c8dbc;margin-right: 10px;">
<div style="text-align:center;line-height:25px;font-size:12px;color:#ffffff;font-weight:700;font-family: MicrosoftYaHei, MicrosoftYaHei-Bold;cursor: pointer;"
onclick="doRemarkSame();">备注同步
</div>
</div>
</div>
<div style="width:100%;float:left;height:calc(100% - 210px);">
<div class="box-header with-border">
<h3 class="box-title">备注列表</h3>
</div>
<div id="hisData" class="box-body" style="height:calc(100% - 40px);overflow: auto;">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-right" data-dismiss="modal"
onclick="closeRemark();">关闭
</button>
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>

View File

@ -0,0 +1,94 @@
<%@ 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"%>
<script type="text/javascript">
var unitId = '${param.unitId}';
var pid='${param.pid}';
$(function() {
$("#programmeTable").bootstrapTable({ // 对应table标签的id
url: ext.contextPath + '/data/getMPointProgrammeList.do', // 获取表格数据的url
cache: false, // 设置为 false 禁用 AJAX 数据缓存, 默认为true
striped: true, //表格显示条纹默认为false
pagination: true, // 在表格底部显示分页组件默认false
pageList: [5, 10,15], // 设置页面可以显示的数据条数
pageSize: 5, // 页面数据条数
pageNumber: 1, // 首页页码
sidePagination: 'server', // 设置为服务器端分页
// singleSelect:true,
queryParams: function (params) { // 请求服务器数据时发送的参数可以在这里添加额外的查询参数返回false则终止请求
return {
rows: params.limit, // 每页要显示的数据条数
page: params.offset/params.limit+1, // 每页显示数据的开始页码
sort: params.sort, // 要排序的字段
order: params.order, // 排序规则
unitId:unitId
}
},
sortName: 'morder', // 要排序的字段
sortOrder: 'asc', // 排序规则
columns: [
{
checkbox: true // 显示一个勾选框
},
{
field: 'name', // 返回json数据中的name
title: '方案名称', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle' // 上下居中
}
],
onLoadSuccess: function(){ //加载成功时执行
$(".bs-checkbox").css({'text-align':'center','vertical-align':'middle'})
},
onLoadError: function(){ //加载失败时执行
console.info("加载数据失败");
}
})
});
function doProgrammeSave(){
var checkedItems = $("#programmeTable").bootstrapTable('getSelections');
var datas="";
$.each(checkedItems, function(index, item){
datas+=item.id+",";
});
$.post(ext.contextPath + "/data/importMPointProgramme.do", {unitId:unitId,pid:pid,ids:datas}, function(result) {
var data= $.parseJSON(result);
if (data == 1) {
closeModal('programmeSubModal');
initTreeView();
//showAlert('s','保存成功');
}else{
showAlert('d',data);
}
});
}
</script>
<div class="modal fade" id="programmeSubModal">
<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">&times;</span></button>
<h4 class="modal-title">系统曲线方案</h4>
</div>
<!-- 界面提醒div强制id为alertDiv -->
<div id="alertDiv"></div>
<div class="modal-body">
<table id="programmeTable"></table>
</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="doProgrammeSave()" id="btn_save">导入</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,91 @@
<%@ 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 doConditionSave() {
$("#conditionsubForm").bootstrapValidator('validate');//提交验证
if ($("#conditionsubForm").data('bootstrapValidator').isValid()) {//获取验证结果,如果成功,执行下面代码
$.post(ext.contextPath + "/data/dataCleaningCondition/dosave.do", $("#conditionsubForm").serialize(), function (data) {
if (data.code == 1) {
showAlert('s', '保存成功');
closeModal('subConditionModal')
$("#conditionTable").bootstrapTable('refresh');
} else if (data.code == 0) {
showAlert('d', '保存失败');
} else {
showAlert('d', data.res);
}
}, 'json');
}
}
$("#conditionsubForm").bootstrapValidator({
live: 'disabled',//验证时机enabled是内容有变化就验证默认disabled和submitted是提交再验证
fields: {
jsvalue: {
validators: {
notEmpty: {
message: '比较数值不能为空'
}
}
}
}
});
$(function () {
$("#jstype").select2({minimumResultsForSearch: 10}).val(">").trigger("change");
});
</script>
<div class="modal fade" id="subConditionModal">
<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">&times;</span></button>
<h4 class="modal-title">新增条件</h4>
</div>
<div class="modal-body">
<!-- 新增界面formid强制为conditionsubForm -->
<form class="form-horizontal" id="conditionsubForm">
<!-- 界面提醒div强制id为alertDiv -->
<div id="alertDiv"></div>
<input type="hidden" class="form-control" id="pid" name="pid" value="${param.pid}">
<div class="form-group">
<label class="col-sm-2 control-label">*比较类型</label>
<div class="col-sm-4">
<select class="form-control select2" id="jstype"
name="jstype">
<option value=">" selected="selected">></option>
<option value=">=">>=</option>
<option value="=">=</option>
<option value="<"><</option>
<option value="<="><=</option>
</select>
</div>
<label class="col-sm-2 control-label">*比较数值</label>
<div class="col-sm-4">
<input class="form-control" type="text" id="jsvalue" name="jsvalue"
value="${dataCleaningCondition.jsvalue}">
</div>
</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="doConditionSave()" id="btn_save">保存</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>

View File

@ -0,0 +1,91 @@
<%@ 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 doConditionSave() {
$("#conditionsubForm").bootstrapValidator('validate');//提交验证
if ($("#conditionsubForm").data('bootstrapValidator').isValid()) {//获取验证结果,如果成功,执行下面代码
$.post(ext.contextPath + "/data/dataCleaningCondition/doupdate.do", $("#conditionsubForm").serialize(), function (data) {
if (data.code == 1) {
showAlert('s', '保存成功');
closeModal('subConditionModal')
$("#conditionTable").bootstrapTable('refresh');
} else if (data.code == 0) {
showAlert('d', '保存失败');
} else {
showAlert('d', data.res);
}
}, 'json');
}
}
$("#conditionsubForm").bootstrapValidator({
live: 'disabled',//验证时机enabled是内容有变化就验证默认disabled和submitted是提交再验证
fields: {
jsvalue: {
validators: {
notEmpty: {
message: '比较数值不能为空'
}
}
}
}
});
$(function () {
$("#jstype").select2({minimumResultsForSearch: 10}).val("${dataCleaningCondition.jstype}").trigger("change");
});
</script>
<div class="modal fade" id="subConditionModal">
<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">&times;</span></button>
<h4 class="modal-title">新增条件</h4>
</div>
<div class="modal-body">
<!-- 新增界面formid强制为conditionsubForm -->
<form class="form-horizontal" id="conditionsubForm">
<!-- 界面提醒div强制id为alertDiv -->
<div id="alertDiv"></div>
<input type="hidden" class="form-control" id="id" name="id" value="${dataCleaningCondition.id}">
<div class="form-group">
<label class="col-sm-2 control-label">*比较类型</label>
<div class="col-sm-4">
<select class="form-control select2" id="jstype"
name="jstype">
<option value=">" selected="selected">></option>
<option value=">=">>=</option>
<option value="=">=</option>
<option value="<"><</option>
<option value="<="><=</option>
</select>
</div>
<label class="col-sm-2 control-label">*比较数值</label>
<div class="col-sm-4">
<input class="form-control" type="text" id="jsvalue" name="jsvalue"
value="${dataCleaningCondition.jsvalue}">
</div>
</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="doConditionSave()" id="btn_save">保存</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>

View File

@ -0,0 +1,111 @@
<%@ 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.data.DataCleaningConfigure" %>
<%request.setAttribute("ReplaceType_previous", DataCleaningConfigure.ReplaceType_previous); %>
<%request.setAttribute("ReplaceType_avg", DataCleaningConfigure.ReplaceType_avg); %>
<%request.setAttribute("ReplaceType_none", DataCleaningConfigure.ReplaceType_none); %>
<%request.setAttribute("ReplaceType_max", DataCleaningConfigure.ReplaceType_previous); %>
<%request.setAttribute("ReplaceType_min", DataCleaningConfigure.ReplaceType_avg); %>
<%request.setAttribute("ReplaceType_same", DataCleaningConfigure.ReplaceType_none); %>
<!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">
</style>
<script type="text/javascript">
$(function () {
var selelct_replacetype = $("#replacetype").select2({
minimumResultsForSearch: 10
});
});
function dosave() {
$("#subForm").bootstrapValidator('validate');//提交验证
if ($("#subForm").data('bootstrapValidator').isValid()) {//获取验证结果,如果成功,执行下面代码
$.post(ext.contextPath + "/data/dataCleaningConfigure/dosave.do", $("#subForm").serialize(), function (data) {
if (data.code == 1) {
// showAlert('s', '保存成功');
self.location.reload();
} else if (data.code == 0) {
showAlert('d', '保存失败');
} else {
showAlert('d', data.res);
}
}, 'json');
}
}
</script>
</head>
<body onload="initMenu()" class="hold-transition ${cu.themeclass} sidebar-mini">
<div class="wrapper">
<!-- 引用top -->
<%-- <jsp:include page="/jsp/top.jsp"></jsp:include> --%>
<!-- 菜单栏 -->
<%-- <jsp:include page="/jsp/left.jsp"></jsp:include> --%>
<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 class="form-horizontal" id="subForm">
<!-- 界面提醒div强制id为alertDiv -->
<div id="alertDiv"></div>
<div class="form-group">
<label class="col-sm-2 control-label">*时间范围(天)</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="timerange" name="timerange" placeholder="时间范围" value="1"
readonly>
</div>
<label class="col-sm-2 control-label">*替换类型</label>
<div class="col-sm-3">
<select class="form-control select2" id="replacetype"
name="replacetype">
<option value="${ReplaceType_previous}" selected="selected">第一条</option>
<option value="${ReplaceType_avg}">均值</option>
<option value="${ReplaceType_none}">删除</option>
<option value="${ReplaceType_max}">最大值</option>
<option value="${ReplaceType_min}">最小值</option>
<option value="${ReplaceType_same}">去除相同数据</option>
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="dosave()" id="btn_save">保存</button>
</div>
</section>
<!-- /.content -->
</div>
<%-- <jsp:include page="/jsp/bottom.jsp"></jsp:include> --%>
<%-- <jsp:include page="/jsp/side.jsp"></jsp:include> --%>
</div>
</body>
</html>

View File

@ -0,0 +1,111 @@
<%@ 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.data.DataCleaningConfigure" %>
<%request.setAttribute("ReplaceType_previous", DataCleaningConfigure.ReplaceType_previous); %>
<%request.setAttribute("ReplaceType_avg", DataCleaningConfigure.ReplaceType_avg); %>
<%request.setAttribute("ReplaceType_none", DataCleaningConfigure.ReplaceType_none); %>
<%request.setAttribute("ReplaceType_max", DataCleaningConfigure.ReplaceType_previous); %>
<%request.setAttribute("ReplaceType_min", DataCleaningConfigure.ReplaceType_avg); %>
<%request.setAttribute("ReplaceType_same", DataCleaningConfigure.ReplaceType_none); %>
<!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">
</style>
<script type="text/javascript">
$(function () {
$("#replacetype").select2({minimumResultsForSearch: 10}).val("${dataCleaningConfigure.replacetype}").trigger("change");
});
function dosave() {
$("#subForm").bootstrapValidator('validate');//提交验证
if ($("#subForm").data('bootstrapValidator').isValid()) {//获取验证结果,如果成功,执行下面代码
$.post(ext.contextPath + "/data/dataCleaningConfigure/doupdate.do", $("#subForm").serialize(), function (data) {
if (data.code == 1) {
// showAlert('s', '保存成功');
self.location.reload();
} else if (data.code == 0) {
showAlert('d', '保存失败');
} else {
showAlert('d', data.res);
}
}, 'json');
}
}
</script>
</head>
<body onload="initMenu()" class="hold-transition ${cu.themeclass} sidebar-mini">
<div class="wrapper">
<!-- 引用top -->
<%-- <jsp:include page="/jsp/top.jsp"></jsp:include> --%>
<!-- 菜单栏 -->
<%-- <jsp:include page="/jsp/left.jsp"></jsp:include> --%>
<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 class="form-horizontal" id="subForm">
<!-- 界面提醒div强制id为alertDiv -->
<div id="alertDiv"></div>
<input type="hidden" class="form-control" id="id" name="id" value="${dataCleaningConfigure.id}">
<div class="form-group">
<label class="col-sm-2 control-label">*时间范围(天)</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="timerange" name="timerange" placeholder="时间范围" value="${dataCleaningConfigure.timerange}"
readonly>
</div>
<label class="col-sm-2 control-label">*替换类型</label>
<div class="col-sm-3">
<select class="form-control select2" id="replacetype"
name="replacetype">
<option value="${ReplaceType_previous}" selected="selected">第一条</option>
<option value="${ReplaceType_avg}">均值</option>
<option value="${ReplaceType_none}">删除</option>
<option value="${ReplaceType_max}">最大值</option>
<option value="${ReplaceType_min}">最小值</option>
<option value="${ReplaceType_same}">去除相同数据</option>
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="dosave()" id="btn_save">保存</button>
</div>
</section>
<!-- /.content -->
</div>
<%-- <jsp:include page="/jsp/bottom.jsp"></jsp:include> --%>
<%-- <jsp:include page="/jsp/side.jsp"></jsp:include> --%>
</div>
</body>
</html>

View File

@ -0,0 +1,249 @@
<%@ 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.data.DataCleaningConfigure" %>
<%request.setAttribute("ReplaceType_previous", DataCleaningConfigure.ReplaceType_previous); %>
<%request.setAttribute("ReplaceType_avg", DataCleaningConfigure.ReplaceType_avg); %>
<%request.setAttribute("ReplaceType_none", DataCleaningConfigure.ReplaceType_none); %>
<!DOCTYPE html>
<!-- <html lang="zh-CN"> -->
<!-- BEGIN HEAD -->
<head>
<title><%= ServerObject.atttable.get("TOPTITLE")%>
</title>
<!-- 引用页头及CSS页-->
<jsp:include page="/jsp/inc.jsp"></jsp:include>
<!-- 引入daterangepicker-->
<link rel="stylesheet" href="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.css"/>
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/moment.min.js"
charset="utf-8"></script>
<script type="text/javascript"
src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.js"
charset="utf-8"></script>
<style type="text/css">
</style>
<script type="text/javascript">
var beginTimeStore1 = '';
var endTimeStore1 = '';
$(function () {
var locale = {
"format": 'YYYY-MM-DD',
"separator": " ~ ",
"applyLabel": "确定",
"cancelLabel": "取消",
"fromLabel": "起始时间",
"toLabel": "结束时间'",
"customRangeLabel": "自定义",
"weekLabel": "W",
"daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"],
"monthNames": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
"firstDay": 1
};
beginTimeStore1 = moment().subtract(7, 'days').format('YYYY-MM-DD');
endTimeStore1 = moment().subtract(0, 'days').format('YYYY-MM-DD');
$('#reservationtime1').val(beginTimeStore1 + locale.separator + endTimeStore1);
$('#reservationtime1').daterangepicker({
"timePicker": true,
"timePicker24Hour": true,
"linkedCalendars": false,
"autoUpdateInput": false,
"timePickerIncrement": 10,
"locale": locale,
//汉化按钮部分
ranges: {
// '今日': [moment(), moment().subtract(-1, 'days')],
'昨日': [moment().subtract(1, 'days'), moment()],
'最近7日': [moment().subtract(6, 'days'), moment().subtract(-1, 'days')],
'本月': [moment().startOf('month'), moment().endOf('month').subtract(-1, 'days')],
'上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month').subtract(-1, 'days')]
},
startDate: beginTimeStore1,
endDate: endTimeStore1
}, function (start, end, label) {
beginTimeStore1 = start.format(this.locale.format);
endTimeStore1 = end.format(this.locale.format);
if (!this.startDate) {
this.element.val('');
} else {
this.element.val(this.startDate.format(this.locale.format) + this.locale.separator + this.endDate.format(this.locale.format));
}
});
initFun();
});
var dosearch = function () {
$("#table").bootstrapTable('refresh');
};
var initFun = function () {
$("#table").bootstrapTable({ // 对应table标签的id
url: ext.contextPath + '/data/dataCleaningHistory/getList.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,
search_name: $('#search_name').val(),
unitId: unitId,
cleaningSdt:beginTimeStore1,
cleaningEdt:endTimeStore1
}
},
// onClickRow: function (row) {//单击行事件,执行查看功能
// viewFun(row.id);
// },
sortName: 'cleaningDt desc,MeasureDT ', // 要排序的字段
sortOrder: 'desc', // 排序规则
columns: [
{
checkbox: true, // 显示一个勾选框
}, {
field: 'mpid', // 返回json数据中的name
title: '测量点编号', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle'
}, {
field: 'parmvalue', // 返回json数据中的name
title: '原始值', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle'
}, {
field: 'measuredt', // 返回json数据中的name
title: '时间', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle',
formatter: function (value, row, index) {
return value.substring(0, 16);
}
}, {
field: 'replaceparmvalue', // 返回json数据中的name
title: '修改值', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle'
}, {
field: 'cleaningdt', // 返回json数据中的name
title: '清洗时间', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle',
formatter: function (value, row, index) {
return value.substring(0, 16);
}
}, {
field: 'type', // 返回json数据中的name
title: '清洗类型', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle',
formatter: function (value, row, index) {
if (value == '${ReplaceType_previous}') {
return "上一条";
} else if (value == '${ReplaceType_avg}') {
return "均值";
} else if (value == '${ReplaceType_none}') {
return "删除";
} else {
return "-";
}
}
},
// {
// title: "操作",
// align: 'center',
// valign: 'middle',
// width: 120, // 定义列的宽度单位为像素px
// formatter: function (value, row, index) {
// var buts = "";
//
// buts += '<button class="btn btn-default btn-sm" title="编辑" onclick="editFun(\'' + row.id + '\')"><i class="fa fa-edit"></i><span class="hidden-md hidden-lg"> 编辑</span></button>';
// buts += '<button class="btn btn-default btn-sm" title="删除" onclick="deleteFun(\'' + row.id + '\')"><i class="fa 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("table");
},
onLoadError: function () { //加载失败时执行
console.info("加载数据失败");
}
});
}
</script>
</head>
<body onload="initMenu()" class="hold-transition ${cu.themeclass} sidebar-mini">
<div class="wrapper">
<!-- 引用top -->
<%-- <jsp:include page="/jsp/top.jsp"></jsp:include> --%>
<!-- 菜单栏 -->
<%-- <jsp:include page="/jsp/left.jsp"></jsp:include> --%>
<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 class="form-group " style="height: 45px;">
<span style="float: left;line-height: 34px;font-weight: bold;">清洗时间:</span>
<input type="text" class="form-control pull-left" id="reservationtime1" style="width:190px;">
<div class="input-group-btn pull-left">
<button type="button" class="btn btn-default" onclick="dosearch();"><i class="fa fa-search"></i>
查询
</button>
</div>
</div>
<div>
<div class="form-group form-inline">
<%-- <div class="btn-group" style="width: 280px;padding-bottom:10px;">--%>
<%-- <button type="button" class="btn btn-default btn-sm" onclick="selectmpids();"><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>--%>
</div>
<table id="table"></table>
</div>
</section>
<!-- /.content -->
</div>
<%-- <jsp:include page="/jsp/bottom.jsp"></jsp:include> --%>
<%-- <jsp:include page="/jsp/side.jsp"></jsp:include> --%>
</div>
</body>
</html>

View File

@ -0,0 +1,321 @@
<%@ page language="java" pageEncoding="UTF-8" %>
<%@page import="com.sipai.entity.data.DataCleaningConfigure" %>
<%request.setAttribute("ReplaceType_previous", DataCleaningConfigure.ReplaceType_previous); %>
<%request.setAttribute("ReplaceType_avg", DataCleaningConfigure.ReplaceType_avg); %>
<%request.setAttribute("ReplaceType_none", DataCleaningConfigure.ReplaceType_none); %>
<%request.setAttribute("ReplaceType_max", DataCleaningConfigure.ReplaceType_previous); %>
<%request.setAttribute("ReplaceType_min", DataCleaningConfigure.ReplaceType_avg); %>
<%request.setAttribute("ReplaceType_same", DataCleaningConfigure.ReplaceType_none); %>
<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 () {
$("#replacetype").select2({minimumResultsForSearch: 10}).val("${dataCleaningPoint.replacetype}").trigger("change");
});
function doupdate() {
$("#subForm").bootstrapValidator('validate');//提交验证
if ($("#subForm").data('bootstrapValidator').isValid()) {//获取验证结果,如果成功,执行下面代码
$.post(ext.contextPath + "/data/dataCleaningPoint/doupdate.do", $("#subForm").serialize(), function (data) {
if (data.code == 1) {
showAlert('s', '保存成功');
closeModal('subModal')
$("#table").bootstrapTable('refresh');
} else if (data.code == 0) {
showAlert('d', '保存失败');
} else {
showAlert('d', data.msg);
}
}, 'json');
}
}
$("#subForm").bootstrapValidator({
live: 'disabled',//验证时机enabled是内容有变化就验证默认disabled和submitted是提交再验证
fields: {
name: {
validators: {
notEmpty: {
message: '名称不能为空'
}
}
},
typeid: {
validators: {
notEmpty: {
message: '服务器类型不能为空'
}
}
},
status: {
validators: {
notEmpty: {
message: '启用不能为空'
}
}
},
}
});
$(function () {
$("#conditionTable").bootstrapTable({ // 对应table标签的id
url: ext.contextPath + '/data/dataCleaningCondition/getList.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,
search_name: $('#search_name').val(),
pid: '${dataCleaningPoint.id}',
// pSectionId: $("#processSection").val(),
// statusSelect:$("#statusSelect").val(),
}
},
// onClickRow: function (row) {//单击行事件,执行查看功能
// viewFun(row.id);
// },
sortName: 'morder', // 要排序的字段
sortOrder: 'asc', // 排序规则
columns: [
{
checkbox: true, // 显示一个勾选框
}, {
field: 'jstype', // 返回json数据中的name
title: '比较类型', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle'
}, {
field: 'jsvalue', // 返回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" title="编辑" onclick="editConditionFun(\'' + row.id + '\')"><i class="fa fa-edit"></i><span class="hidden-md hidden-lg"> 编辑</span></button>';
buts += '<button class="btn btn-default btn-sm" title="删除" onclick="deleteConditionFun(\'' + row.id + '\')"><i class="fa 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("table");
},
onLoadError: function () { //加载失败时执行
console.info("加载数据失败");
}
});
})
function selectmpid() {
$.post(ext.contextPath + '/work/mpoint/mpointListSingle4LayerES.do', {
// mpids: mpids,
mpids: '',
fucname: 'ckmpidDone'
}, function (data) {
$("#mpSelectDiv").html(data);
openModal('subModalMpoint');
});
}
function ckmpidDone(data) {
data = JSON.parse(data);
$('#subForm #point').val(data[0].mpid);
closeModal('subModalMpoint');
}
var addConditionFun = function () {
$.post(ext.contextPath + '/data/dataCleaningCondition/doadd.do', {pid: '${dataCleaningPoint.id}'}, function (data) {
$("#subDetailDiv").html(data);
openModal('subConditionModal');
});
};
var editConditionFun = function (id) {
stopBubbleDefaultEvent();
$.post(ext.contextPath + '/data/dataCleaningCondition/doedit.do', {id: id}, function (data) {
$("#subDetailDiv").html(data);
openModal('subConditionModal');
});
};
var deleteConditionFun = 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 + '/data/dataCleaningCondition/dodelete.do', {id: id}, function (data) {
if (data.code == "1") {
$("#conditionTable").bootstrapTable('refresh');
} else {
showAlert('d', '删除失败', 'mainAlertdiv');
}
}, 'json');
}
});
};
var deletesConditionFun = function () {
var checkedItems = $("#conditionTable").bootstrapTable('getSelections');
var datas = "";
$.each(checkedItems, function (index, item) {
datas += item.id + ",";
});
if (datas == "") {
showAlert('d', '请先选择记录', 'mainAlertdiv');
} else {
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 + '/data/dataCleaningCondition/dodeletes.do', {ids: datas}, function (data) {
if (data.code > 0) {
$("#conditionTable").bootstrapTable('refresh');
} else {
showAlert('d', '删除失败', 'mainAlertdiv');
}
}, 'json');
}
});
}
};
</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">&times;</span></button>
<h4 class="modal-title">编辑清洗点</h4>
</div>
<div class="modal-body">
<!-- 新增界面formid强制为subForm -->
<form class="form-horizontal" id="subForm">
<!-- 界面提醒div强制id为alertDiv -->
<div id="alertDiv"></div>
<input type="hidden" class="form-control" id="id" name="id" value="${dataCleaningPoint.id}">
<div class="form-group">
<label class="col-sm-2 control-label">*测量点</label>
<div class="col-sm-4">
<input class="form-control" type="text" id="point" name="point"
value="${dataCleaningPoint.point}" onclick="selectmpid();">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">*时间范围(天)</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="timerange" name="timerange" placeholder="时间范围"
value="${dataCleaningPoint.timerange}"
readonly>
</div>
<label class="col-sm-2 control-label">*替换类型</label>
<div class="col-sm-3">
<select class="form-control select2" id="replacetype"
name="replacetype">
<option value="${ReplaceType_previous}" selected="selected">第一条</option>
<option value="${ReplaceType_avg}">均值</option>
<option value="${ReplaceType_none}">删除</option>
<option value="${ReplaceType_max}">最大值</option>
<option value="${ReplaceType_min}">最小值</option>
<option value="${ReplaceType_same}">去除相同数据</option>
</select>
</div>
</div>
</form>
</div>
<div class="box box-solid">
<div class="box-header with-border">
<h3 class="box-title">条件表</h3>
<div class="box-tools pull-right">
</div>
</div>
<div class="box-body ">
<div>
<div class="btn-group" style="width: 220px;padding-bottom:10px;">
<button type="button" class="btn btn-default btn-sm" onclick="addConditionFun();"><i
class="fa fa-plus"></i> 新增
</button>
<button type="button" class="btn btn-default btn-sm" onclick="deletesConditionFun();"><i
class="fa fa-trash-o"></i> 删除
</button>
</div>
<br>
<table id="conditionTable"></table>
</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="doupdate()" id="btn_save">保存</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>

View 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" %>
<!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">
</style>
<script type="text/javascript">
var addFun = function () {
$.post(ext.contextPath + '/data/dataCleaningPoint/doadd.do', {unitId: unitId}, function (data) {
$("#subDiv").html(data);
openModal('subModal');
});
};
var editFun = function (id) {
stopBubbleDefaultEvent();
$.post(ext.contextPath + '/data/dataCleaningPoint/doedit.do', {id: id}, function (data) {
$("#subDiv").html(data);
openModal('subModal');
});
};
var viewFun = function (id) {
$.post(ext.contextPath + '/data/dataCleaningPoint/doview.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 + '/data/dataCleaningPoint/dodelete.do', {id: id}, function (data) {
if (data.code == "1") {
$("#table").bootstrapTable('refresh');
} else {
showAlert('d', '删除失败', 'mainAlertdiv');
}
}, 'json');
}
});
};
var deletesFun = function () {
var checkedItems = $("#table").bootstrapTable('getSelections');
var datas = "";
$.each(checkedItems, function (index, item) {
datas += item.id + ",";
});
if (datas == "") {
showAlert('d', '请先选择记录', 'mainAlertdiv');
} else {
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 + '/data/dataCleaningPoint/dodeletes.do', {ids: datas}, function (data) {
if (data.code > 0) {
$("#table").bootstrapTable('refresh');
} else {
showAlert('d', '删除失败', 'mainAlertdiv');
}
}, 'json');
}
});
}
};
var dosearch = function () {
$("#table").bootstrapTable('refresh');
};
var initFun = function () {
$("#table").bootstrapTable({ // 对应table标签的id
url: ext.contextPath + '/data/dataCleaningPoint/getList.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,
search_name: $('#search_name').val(),
unitId: unitId,
// pSectionId: $("#processSection").val(),
// statusSelect:$("#statusSelect").val(),
}
},
// onClickRow: function (row) {//单击行事件,执行查看功能
// viewFun(row.id);
// },
sortName: 'point', // 要排序的字段
sortOrder: 'asc', // 排序规则
columns: [
{
checkbox: true, // 显示一个勾选框
}, {
field: 'point', // 返回json数据中的name
title: '测量点编号', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle'
}, {
field: 'pointName', // 返回json数据中的name
title: '测量点名称', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle'
}, {
field: 'insuserName', // 返回json数据中的name
title: '创建人', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle'
}, {
field: 'insdt', // 返回json数据中的name
title: '创建时间', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle',
formatter: function (value, row, index) {
return value.substring(0,16);
}
}, {
title: "操作",
align: 'center',
valign: 'middle',
width: 120, // 定义列的宽度单位为像素px
formatter: function (value, row, index) {
var buts = "";
buts += '<button class="btn btn-default btn-sm" title="编辑" onclick="editFun(\'' + row.id + '\')"><i class="fa fa-edit"></i><span class="hidden-md hidden-lg"> 编辑</span></button>';
buts += '<button class="btn btn-default btn-sm" title="删除" onclick="deleteFun(\'' + row.id + '\')"><i class="fa 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("table");
},
onLoadError: function () { //加载失败时执行
console.info("加载数据失败");
}
});
}
$(function () {
initFun();
});
function selectmpids() {
$.post(ext.contextPath + '/work/mpoint/mpointList4LayerES.do', {
// mpids: mpids,
mpids: '',
fucname: 'ckmpidDone'
}, function (data) {
$("#subDiv").html(data);
openModal('subModalMpoint');
});
}
function ckmpidDone(data) {
// console.log(data)
$.post(ext.contextPath + '/data/dataCleaningPoint/dosaves.do', {
mpids: data,
unitId: unitId
}, function (data) {
dosearch();
});
}
</script>
</head>
<body onload="initMenu()" class="hold-transition ${cu.themeclass} sidebar-mini">
<div class="wrapper">
<!-- 引用top -->
<%-- <jsp:include page="/jsp/top.jsp"></jsp:include> --%>
<!-- 菜单栏 -->
<%-- <jsp:include page="/jsp/left.jsp"></jsp:include> --%>
<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="subDetailDiv"></div>
<div id="mpSelectDiv"></div>
<div>
<div class="form-group " style="margin-bottom:10px;">
<%-- <input id="search_pid" name="search_pid" type="hidden" />--%>
<%-- <span id="companyName" style="height:31px;color:#000000;border-top-left-radius: 4px;border-bottom-left-radius: 4px;font-weight:bold"></span>--%>
</div>
<div class="form-group form-inline" style="padding:0;">
<div class="btn-group" style="width: 280px;padding-bottom:10px;">
<button type="button" class="btn btn-default btn-sm" onclick="selectmpids();"><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>
</div>
<table id="table"></table>
</div>
</section>
<!-- /.content -->
</div>
<%-- <jsp:include page="/jsp/bottom.jsp"></jsp:include> --%>
<%-- <jsp:include page="/jsp/side.jsp"></jsp:include> --%>
</div>
</body>
</html>

View 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"%>
<script type="text/javascript">
var addFun = function() {
var mpid= $("#mpid").val();
$.post(ext.contextPath + '/work/scadaPic/addMPointExpression.do', {formId:'addsubForm',hiddenId:'mpid',codeId:'mpid',textId:'txt',valueId :'value',mpid:$("#mpid").val()} , function(data) {
$("#expSubDiv").html(data);
openModal('expSubModal');
//ComponentsDateTimePickers.init();
});
};
var selectMPint = function(pid) {
$.post(ext.contextPath + '/work/mpoint/showlistForSelect.do', {formId:'addsubForm',hiddenId:'mpid',codeId:'mpcode',unitId:'unitId',textId:'txt',valueId :'value',mpid:$("#mpid").val()} , function(data) {
$("#mpSubDiv").html(data);
openModal('mpSubModal');
});
};
$(function() {
$("#box").hide();
showExpression();
})
$('#expressionflag').on("change",function(data){
if($('#expressionflag').val()=='1'){
if($("#mpid").val()==''){
showAlert('d','请选择测量点');
}else{
$("#box").show();
$("#table_express").bootstrapTable('refresh');
}
}else{
$("#box").hide();
}
});
var MpPics;
function showExpression(){
MpPics =JSON.parse(getMpPic());
//$('#grid').datagrid({url:ext.contextPath + '/work/scadaPic/getMPoint_ExpressionList.do?mpid='+mpid});
$table=$("#table_express").bootstrapTable({ // 对应table标签的id
url: ext.contextPath + '/work/scadaPic/getMPoint_ExpressionList.do', // 获取表格数据的url
cache: false, // 设置为 false 禁用 AJAX 数据缓存, 默认为true
striped : true,
rownumbers : true,
/* singleSelect: false,
ctrlSelect:true,
selectOnCheck: false,
checkOnSelect: false, */
idField : 'id',
queryParams: function (params) { // 请求服务器数据时发送的参数可以在这里添加额外的查询参数返回false则终止请求
return {
mpid: $("#mpid").val(),
}
},
//queryParamsType: "limit",
sortName: 'id', // 要排序的字段
sortOrder: 'desc', // 排序规则
/* showColumns: true,
showRefresh: true, */
idField : 'id',
columns : [ [
{checkbox:true },
{width : '160', title : '表达式', field : 'expression', sortable : true, halign:'center'},
{width : '100', title : '显示图标', field : 'expressionway', sortable : true, align:'center',formatter : function(value,row){
//console.log(MpPics[value].path)
var pic='<img src=../../'+MpPics[value].path+' style="width:20px;height:20px;" ></img>';
return pic;
}},
] ],
onLoadSuccess: function(){ //加载成功时执行
adjustBootstrapTableView("table_mpoint");
},
onLoadError: function(){ //加载失败时执行
console.info("加载数据失败");
}
})
}
var deletesFun = function() {
var checkedItems = $("#table_express").bootstrapTable('getSelections');
var datas="";
$.each(checkedItems, function(index, item){
datas+=item.id+",";
});
if(datas==""){
showAlert('d','请先选择要删除的表达式','alertDiv');
}else{
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 + '/work/scadaPic/deleteMPointExpression.do', {ids:datas} , function(data) {
if(data>0){
$("#table_express").bootstrapTable('refresh');
}else{
showAlert('d','删除失败','mainAlertdiv');
}
});
}
});
}
};
function doMpsave() {
$("#addsubForm").bootstrapValidator('validate');//提交验证
if ($("#addsubForm").data('bootstrapValidator').isValid()) {//获取验证结果,如果成功,执行下面代码
$.post(ext.contextPath + "/data/saveMPoint.do", $("#addsubForm").serialize(), function(data) {
if (data.code == 1) {
closeModal('subModal');
$("#box").show();
$("#table").bootstrapTable('refresh');
}else if(data.code == 0){
showAlert('d','保存失败');
}else{
showAlert('d',data.res);
}
},'json');
}
}
$("#addsubForm").bootstrapValidator({
live: 'disabled',//验证时机enabled是内容有变化就验证默认disabled和submitted是提交再验证
fields: {
mpid: {
validators: {
notEmpty: {
message: '测量点不能为空'
}
}
},
}
});
</script>
<div class="modal fade" id="subModal">
<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">&times;</span></button>
<h4 class="modal-title">添加测量点</h4>
</div>
<!-- 界面提醒div强制id为alertDiv -->
<div id="alertDiv"></div>
<div class="modal-body">
<!-- 新增界面formid强制为addsubForm -->
<form class="form-horizontal" id="addsubForm">
<div class="form-group">
<label class="col-sm-3 control-label">曲线组合</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="pname" placeholder="上级菜单" onclick="showMenu4SelectFun();" value="${pname}">
<input id="dataCurveId" name="dataCurveId" type="hidden" value="${param.pid}"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">测量点编号</label>
<div class="col-sm-7">
<input type="hidden" class="form-control" style="cursor: pointer" id="unitId" name="unitId" value="" >
<input type="hidden" class="form-control" style="cursor: pointer" id="mpcode" >
<input type="text" class="form-control" id="mpid" name ="mpointId" onclick="selectMPint('${param.pid}')" placeholder="单击选择" readonly>
</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="txt" >
</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="morder" name ="morder" 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="doMpsave()" >保存</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>

View File

@ -0,0 +1,99 @@
<%@ 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"%>
<script type="text/javascript">
var selectMPint = function(pid) {
$.post(ext.contextPath + '/work/mpoint/showlistForSelect.do', {formId:'subForm',hiddenId:'mpid',codeId:'mpcode',unitId:'unitId',textId:'txt',valueId :'value',mpid:$("#mpid").val()} , function(data) {
$("#mpSubDiv").html(data);
openModal('mpSubModal');
});
};
function doupdate() {
$("#subForm").bootstrapValidator('validate');//提交验证
if ($("#subForm").data('bootstrapValidator').isValid()) {//获取验证结果,如果成功,执行下面代码
$.post(ext.contextPath + "/data/updateMPoint.do", $("#subForm").serialize(), function(result) {
// var data= $.parseJSON(result);
if (result.code == 1) {
closeModal('subModal');
$("#box").show();
$("#table").bootstrapTable('refresh');
//$("#table").bootstrapTable('refresh');
}else{
showAlert('d',result.res);
}
},'json');
}
}
$("#subForm").bootstrapValidator({
live: 'disabled',//验证时机enabled是内容有变化就验证默认disabled和submitted是提交再验证
fields: {
mpid: {
validators: {
notEmpty: {
message: '测量点不能为空'
}
}
},
}
});
</script>
<div class="modal fade" id="subModal">
<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">&times;</span></button>
<h4 class="modal-title">编辑测量点</h4>
</div>
<!-- 界面提醒div强制id为alertDiv -->
<div id="alertDiv"></div>
<div class="modal-body">
<!-- 新增界面formid强制为subForm -->
<form class="form-horizontal" id="subForm">
<input type="hidden" class="form-control" id="id" name="id" value="${curveMpoint.id}">
<div class="form-group">
<label class="col-sm-3 control-label">曲线组合</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="pname" placeholder="上级菜单" value="${pname}">
<input id="dataCurveId" name="dataCurveId" type="hidden" value="${param.pid}"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">测量点编号</label>
<div class="col-sm-7">
<input type="hidden" class="form-control" style="cursor: pointer" id="unitId" name="unitId" value="${curveMpoint.unitId}" >
<input type="hidden" class="form-control" style="cursor: pointer" id="mpcode" >
<input type="text" class="form-control" id="mpid" name ="mpointId" onclick="selectMPint('${param.pid}')" placeholder="单击选择" readonly value="${curveMpoint.mpointId}">
</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="txt" value="${mpoint.parmname}">
</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="morder" name ="morder" value="${curveMpoint.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()" id="btn_save">保存</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>

View File

@ -0,0 +1,105 @@
<%@ 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" %>
<script type="text/javascript">
var selectMPint = function (pid) {
$.post(ext.contextPath + '/work/mpoint/showlistForSelect.do', {
formId: 'sub_MP_P_Edit_Form',
hiddenId: 'mpid',
codeId: 'mpcode',
unitId: 'unitId',
textId: 'txt',
valueId: 'value',
mpid: $("#mpid").val()
}, function (data) {
$("#mpSubDiv").html(data);
openModal('mpSubModal');
});
};
function doupdate() {
$("#sub_MP_P_Edit_Form").bootstrapValidator('validate');//提交验证
if ($("#sub_MP_P_Edit_Form").data('bootstrapValidator').isValid()) {//获取验证结果,如果成功,执行下面代码
$.post(ext.contextPath + "/data/updateMPoint.do", $("#sub_MP_P_Edit_Form").serialize(), function (result) {
// var data= $.parseJSON(result);
if (result.code == 1) {
closeModal('subModal_CurveMp');
// $("#box").show();
// initProgrammeTreePersonView();
$("#table_Detail").bootstrapTable('refresh');
initProgrammeTreeView();
// $("#table").bootstrapTable('refresh');
} else {
showAlert('d', result.res);
}
}, 'json');
}
}
$("#sub_MP_P_Edit_Form").bootstrapValidator({
live: 'disabled',//验证时机enabled是内容有变化就验证默认disabled和submitted是提交再验证
fields: {
mpid: {
validators: {
notEmpty: {
message: '测量点不能为空'
}
}
},
}
});
</script>
<div class="modal fade" id="subModal_CurveMp">
<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">&times;</span></button>
<h4 class="modal-title">编辑测量点</h4>
</div>
<!-- 界面提醒div强制id为alertDiv -->
<div id="alertDiv"></div>
<div class="modal-body">
<!-- 新增界面formid强制为subForm -->
<form class="form-horizontal" id="sub_MP_P_Edit_Form">
<input type="hidden" class="form-control" id="id" name="id" value="${curveMpoint.id}">
<div class="form-group">
<label class="col-sm-3 control-label">测量点编号</label>
<div class="col-sm-7">
<input type="hidden" class="form-control" style="cursor: pointer" id="unitId" name="unitId"
value="${curveMpoint.unitId}">
<input type="hidden" class="form-control" style="cursor: pointer" id="mpcode">
<input type="text" class="form-control" id="mpid" name="mpointId"
onclick="selectMPint('${param.pid}')" placeholder="单击选择" readonly
value="${curveMpoint.mpointId}">
</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="txt" value="${mpoint.parmname}" readonly>
</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="morder" name="morder"
value="${curveMpoint.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()" id="btn_save">保存</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>

View File

@ -0,0 +1,88 @@
<%@ 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 () {
var iWidth = $(window).width();
var iHeight = $(window).height();
$('#main').css('width', iWidth);
$('#main').css('height', iHeight);
let type = "${type}";
$.ajax({
type: 'GET',
url: ext.contextPath + "/data/healthDiagnosis/isNet.do?nowUrl=" + window.location.host,
async: false,
globle: false,
dataType: 'json',
error: function () {
return false;
},
success: function (data) {
let hostUrl = window.location.href;
if (hostUrl.substring(0, 5) == 'https') {
data.url = data.url.replace('ws', 'wss');
}
// console.log(data)
let url = data.url;
if (type == '001') {
url = "http://" + url + "/work/health-diagnosis-view";
} else if (type == '002') {
url = "http://" + url + "/work/mpoint/show-kpi-list?unitId=FS_SK11_C&userId=emp01&ng";
} else if (type == '003') {
url = "http://" + url + "/timeefficiency/scoring-library/scoring-library-list?type=W&signaltag=health&userId=emp01";
}
document.getElementById("main").src = url;
}
});
});
</script>
</head>
<body onload="initMenu()" class="hold-transition ${cu.themeclass} sidebar-mini">
<div class="wrapper">
<!-- 引用top -->
<%-- <jsp:include page="/jsp/top.jsp"></jsp:include> --%>
<!-- 菜单栏 -->
<%-- <jsp:include page="/jsp/left.jsp"></jsp:include> --%>
<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">
<iframe id="main" scrolling="auto" allowtransparency="yes" src=""
style="width: 100%;height: 100%;border:0px;padding:0px;margin:0px;"></iframe>
</section>
<!-- /.content -->
</div>
<%-- <jsp:include page="/jsp/bottom.jsp"></jsp:include> --%>
<%-- <jsp:include page="/jsp/side.jsp"></jsp:include> --%>
</div>
</body>
</html>

View File

@ -0,0 +1,346 @@
<%@ 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 companyId = '';
var signalType = "-1";
var dosearchMp = function () {
$("#table_mpoint").bootstrapTable('refresh');
};
function doselect(dialog, grid) {
var checkedItem = $("#table_mpoint").bootstrapTable('getAllSelections');
if (checkedItem != null && checkedItem != "") {
// console.log(checkedItem);
var mpointids = "";
for (var i = 0; i < checkedItem.length; i++) {
mpointids += checkedItem[i].id + ",";
}
$.post(ext.contextPath + '/data/saveMPoints.do', {
companyId: companyId,
mpointids: mpointids,
pid: '${param.pid}'
}, function (resp) {
//console.info(checkedItem.id)
$("#table_Detail").bootstrapTable('refresh');
initProgrammeTreeView();
$("#table").bootstrapTable('refresh');
closeModal('mpSubModal');
}, 'json');
} else {
showAlert('d', '尚未选择测量点!', 'mpoint_mainAlertdiv');
}
};
//显示已经勾选的数据
function stateFormatter(value, row, index) {
var flag = false;
if (row.id == '${mpid}') {
flag = true;
checkedItem = "";
}
if (flag)
return {
checked: true//设置选中
};
return value;
}
var $table;
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_name').val(),
search_mpointcode: $('#search_mpointcode').val(),
pSectionId: $('#processSection').val(),
companyId: companyId,
signalType: signalType
};
/* var status =$('#switchBtn').bootstrapSwitch('state')
if(status){
temp.checkedIds=getCheckedIds();
}
*/
return temp;
}
$(function () {
//简易公司combotree
$.post(ext.contextPath + '/user/getUnitForTreeFromTop.do', {unitId: unitId}, function (data) {
if (data.length == 1 && !data[0].hasOwnProperty("nodes")) {
//当登陆者的pid以下没有子节点时显示单独一个span
$("#search_code").val(data[0].id);
$("#companyselect").hide();
$("#company").text("公司: " + data[0].text);
companyId = data[0].id;
dosearchMp();
//initFun();
} else if ((data.length == 1 && data.nodes != "") || data.length > 1) {
//第一次加载时赋值
$("#search_code").val(data[0].id);
$("#cname_input").val(data[0].text);
companyId = data[0].id;
dosearchMp();
//initFun();
//$table.bootstrapTable('refresh');//异步加载重新刷新,待修改
$('#companytree').treeview({
data: data,
showBorder: false,
levels: 3,
});
$('#companytree').on('nodeSelected', function (event, data) {
$("#search_code").val(data.id);
$("#cname_input").val(data.text);
document.getElementById('ul_tree').style.display = "none";
companyId = data.id;
dosearchMp();
//initFun();
});
} else {
//待完善
}
$.post(ext.contextPath + "/user/processSection/getProcessSection4Select.do", {companyId: companyId}, function (data) {
$("#processSection").empty();
var selelct_ = $("#processSection").select2({
data: data,
cache: false,
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;
} // 函数用于呈现当前的选择
});
$(".select2-selection--single").css({'height': '30px', 'paddingTop': '4px'})
selelct_.val('').trigger("change");
selelct_.on("change", function (e) {
$("#table_mpoint").bootstrapTable('refresh');
});
}, 'json');
}, '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()
}
})
//initialSelectionIds();
//alert();
$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
}, {
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_mpoint .checked').removeClass("checked");
// obj.parent().addClass("checked");
// checkedItem = rows;
// }else{
// obj.parent().removeClass("checked");
// checkedItem = "";
// }
// });
});
function changeSignalType(obj) {
var value = $(obj).val();
signalType = value;
dosearchMp();
}
</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">&times;</span></button>
<h4 class="modal-title">选择测量点</h4>
</div>
<div class="modal-body">
<div id="mpoint_mainAlertdiv"></div>
<div id="menu4SelectDiv"></div>
<div id="modal-body">
<!-- <div class="form-group">
<label class="form-label" id="companylabel">水厂:</label>
<label class="form-label" id="company" style="width:180px;border: none;background: transparent;" ></label>
<select class="form-control select2 " id="search_code" name ="search_code" style="width: 220px;"></select>
</div> -->
<div class="form-group " style="margin-bottom:10px;">
<input id="search_code" name="search_code" type="hidden"/>
<span id="company"
style="height:31px;color:#000000;border-top-left-radius: 4px;border-bottom-left-radius: 4px;font-weight:bold"></span>
</div>
<ul id="companyselect" style="list-style-type:none;padding-left:0px;width:300px;">
<li class="dropdown" style="width:300px;">
<!-- Menu toggle button -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
style="width:300px;"
onclick="document.getElementById('ul_tree').style.display = 'block';">
<div class="input-group">
<span class="input-group-addon"
style="height:31px;color:#000000;border-top-left-radius: 4px;border-bottom-left-radius: 4px;font-weight:bold">公司:</span>
<input class="form-control " id="cname_input" name="cname_input"
style="height:31px;width: 220px;border-top-right-radius: 4px;border-bottom-right-radius: 4px;"
readonly/>
</div><!-- /input-group -->
</a>
<ul id="ul_tree" class="dropdown-menu" data-stopPropagation="true">
<li class="header">
<div id="companytree" style="width: 275px;overflow:auto;"></div>
</li>
</ul>
</li>
</ul>
<div class="form-group pull-right form-inline">
<div class="input-group input-group-sm " style="width: 150px;margin-left:30px">
<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="dosearchMp();"><i class="fa fa-search"></i>
</button>
</div>
</div>
<div class="input-group input-group-sm " style="width: 200px;">
<label class="col-sm-4 control-label" style="padding:0px 10px 0px 10px;line-height:40px;">工艺段</label>
<div class="col-sm-8 control-label" style="padding: 0px;line-height:40px;">
<select class="form-control select2 " id="processSection" name="processSection"
style="width: 120px;"></select>
</div>
</div>
<div class="input-group input-group-sm " style="width: 150px;">
<label class="col-sm-4 control-label" style="padding:0px 10px 0px 10px;line-height: 40px;">信号</label>
<div class="col-sm-8 control-label" style="padding: 0px;line-height:40px;">
<select id="signalType" name="signalType" class="form-control select2"
style="margin-top:5px;height: 30px;" onchange="changeSignalType(this);">
<option value="-1">全部</option>
<option value="AI">AI</option>
<option value="DI">DI</option>
</select>
</div>
</div>
<!-- <button type="button" class="btn btn-default" onclick="addFun();"><i class="fa fa-plus"></i> 重置</button> -->
</div>
<!-- <div class="form-group " style="padding:0;">
<label class="form-label">班组</label>
<select class="form-control select2 " id="search_code" name ="search_code" style="width: 220px;"></select>
<div class="form-group pull-right" >
<div class="input-group input-group-sm" style="width: 500px;">
<input type="text" id="search_pid" name="search_pid" class="form-control pull-right" style="width: 200px;" placeholder="所属车间">
<input type="text" id="search_name" name="search_name" class="form-control pull-right" style="width: 200px;margin-right:10px" placeholder="系统名称">
<div class="input-group-btn">
<button class="btn btn-default" onclick="dosearch();"><i class="fa fa-search"></i></button>
</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()">确定</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>

View File

@ -0,0 +1,471 @@
<%@ 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" %>
<%String contextPath = request.getContextPath();%>
<!DOCTYPE html>
<!-- <html lang="zh-CN"> -->
<!-- BEGIN HEAD -->
<head>
<title><%= ServerObject.atttable.get("TOPTITLE")%>
</title>
<!-- 引用页头及CSS页-->
<jsp:include page="/jsp/inc.jsp"></jsp:include>
<%-- mqtt依赖--%>
<script src="<%=request.getContextPath()%>/JS/mqtt/mqtt.min.js" type="text/javascript"></script>
<%-- mqtt事件--%>
<jsp:include page="/jsp/mqtt/alarm_mqtt.jsp"></jsp:include>
<style type="text/css">
</style>
<script type="text/javascript">
var client;
var regionID = '${param.regionID}';
var processsection = "";
$(function () {
let mqttStatus = '${mqttStatus}';
let mqttHostWeb = '${mqttHostWeb}';
getMqtt(mqttStatus, mqttHostWeb);
})
function getMqtt(mqttStatus, mqttHostWeb) {
try {
//初始化mqtt
if (mqttStatus == "0") {
let mqttId = "dataVisualData_hqfy_" + regionID + "_" + Math.random();
initialMqtt(mqttId, mqttHostWeb);
} else {
console.log('mq已关闭')
}
} catch (err) {
//处理错误
}
}
function initialMqtt(mqttId, mqttHostWeb) {
const options = {
clean: true,
// cleanSession : false,
// reconnect : true,
connectTimeout: 10000,
clientId: mqttId,
username: "admin",
password: 'public'
}
const connectUrl = mqttHostWeb;
client = mqtt.connect(connectUrl, options);
//当重新连接启动触发回调
client.on('reconnect', function () {
// console.log('正在重连.....');
});
//连接断开后触发的回调
client.on("close", function () {
console.log('客户端已断开连接.....');
});
//从broker接收到断开连接的数据包后发出。MQTT 5.0特性
client.on("disconnect", function (packet) {
console.log('从broker接收到断开连接的数据包.....' + packet);
});
//客户端脱机下线触发回调
client.on("offline", function () {
console.log('客户端脱机下线.....');
});
//当客户端无法连接或出现错误时触发回调
client.on("error", (error) => {
console.log('客户端出现错误.....' + error);
});
//当客户端发送任何数据包时发出。这包括published()包以及MQTT用于管理订阅和连接的包
client.on("packetsend", (packet) => {
// console.log('客户端已发出数据包:' + packet);
});
//当客户端接收到任何数据包时发出。这包括来自订阅主题的信息包以及MQTT用于管理订阅和连接的信息包
client.on("packetreceive", (packet) => {
// console.log('收到:' + packet);
});
//成功连接后触发的回调
client.on("connect", function (connack) {
// layer.msg('成功连接上mq服务器');
console.log('虹桥分页' + regionID + '成功连接上mqtt服务器');
//订阅某主题
/**
* client.subscribe(topic/topic array/topic object, [options], [callback])
* topic:一个string类型的topic或者一个topic数组,也可以是一个对象
* options
*/
let auto_mq_theme_in = ['dataVisualData_hqfy_' + regionID, 'dataVisualData_hqfy_alarm_' + regionID];
client.subscribe(auto_mq_theme_in, {qos: 2});
//每隔2秒发布一次数据
// setInterval(publish, 2000)
});
function publish() {
//发布数据
/**
* client.publish(topic,message,[options], [callback])
*
* message: Buffer or String
* options:{
* qos:0, //默认0
* retain:false, //默认false
* dup:false, //默认false
* properties:{}
* }
* callback:function (err){}
*/
const message = "h5 message " + Math.random() + new Date();
client.publish("testtopic/123", message, {qos: 2});
}
//当客户端接收到发布消息时触发回调
/**
* topic:收到的数据包的topic
* message:收到的数据包的负载playload
* packet:收到的数据包
*/
client.on('message', (topic, message, packet) => {
// console.log(message.getpay);
// console.log(topic)
if (topic == 'dataVisualData_hqfy_' + regionID) {
let json = JSON.parse(message.toString());
// console.log(json);
if (json.currentAlarmNum != null) {
$("#currentAlarmNum").text(json.currentAlarmNum);
}
if (json.todayAlarmNum != null) {
$("#todayAlarmNum").text(json.todayAlarmNum);
}
if (json.monthAlarmNum != null) {
$("#monthAlarmNum").text(json.monthAlarmNum);
}
if (json.now_people != null) {
$("#now_people").text(json.now_people);
}
if (json.today_in_people != null) {
$("#today_in_people").text(json.today_in_people);
}
if (json.AI_Camera != null) {
$("#AI_Camera").text(json.AI_Camera);
}
if (json.All_Camera != null) {
$("#All_Camera").text(json.All_Camera);
}
if (json.month_toBeExecuted != null) {
$("#month_toBeExecuted").text(json.month_toBeExecuted);
}
if (json.month_completed != null) {
$("#month_completed").text(json.month_completed);
}
processsection = json.processsection;
let table_people_Html = "";
if (json.table_people != null) {
for (let i = 0; i < json.table_people.length; i++) {
let content = json.table_people[i];
let stateStyle = "";
if (content.state == '区域内') {
stateStyle = "background-color:#00F6FF;color:#000000;";
}
table_people_Html += "<div style=\"float: left;width: 100%;height: 38px;line-height: 38px;text-align: center;color: #bfbfbf;padding-top: 1px;padding-bottom: 1px;" + stateStyle + "\">";
table_people_Html += "<div style=\"float: left;width: 20%;height: 100%;white-space:nowrap;text-overflow: ellipsis;overflow: hidden;\">" + content.personName + "</div>";
table_people_Html += "<div style=\"float: left;width: 20%;height: 100%;white-space:nowrap;text-overflow: ellipsis;overflow: hidden;\">" + content.jobText + "</div>";
table_people_Html += "<div style=\"float: left;width: 20%;height: 100%;white-space:nowrap;text-overflow: ellipsis;overflow: hidden;\">" + content.intime + "</div>";
table_people_Html += "<div style=\"float: left;width: 20%;height: 100%;white-space:nowrap;text-overflow: ellipsis;overflow: hidden;\">" + content.durationText + "</div>";
table_people_Html += "<div style=\"float: left;width: 20%;height: 100%;white-space:nowrap;text-overflow: ellipsis;overflow: hidden;\">" + content.state + "</div>";
table_people_Html += "</div>";
}
}
$('#table_people').html(table_people_Html);
let table_camera_Html = "";
if (json.table_camera != null) {
for (let i = 0; i < json.table_camera.length; i++) {
let content = json.table_camera[i];
table_camera_Html += "<div style=\"float: left;width: 100%;height: 38px;line-height: 38px;text-align: center;color: #bfbfbf;padding-top: 1px;padding-bottom: 1px;\">";
table_camera_Html += "<div style=\"float: left;width: 35%;height: 100%;white-space:nowrap;text-overflow: ellipsis;overflow: hidden;\">" + content.name + "</div>";
table_camera_Html += "<div style=\"float: left;width: 65%;height: 100%;white-space:nowrap;text-overflow: ellipsis;overflow: hidden;\">" + content.modelNames + "</div>";
table_camera_Html += "</div>";
}
}
$('#table_camera').html(table_camera_Html);
let table_task_Html = "";
if (json.table_task != null) {
for (let i = 0; i < json.table_task.length; i++) {
let content = json.table_task[i];
table_task_Html += "<div style=\"float: left;width: 100%;height: 38px;line-height: 38px;text-align: center;color: #bfbfbf;padding-top: 1px;padding-bottom: 1px;\">";
table_task_Html += "<div style=\"float: left;width: 30%;height: 100%;white-space:nowrap;text-overflow: ellipsis;overflow: hidden;\">" + content.name + "</div>";
table_task_Html += "<div style=\"float: left;width: 30%;height: 100%;white-space:nowrap;text-overflow: ellipsis;overflow: hidden;\">" + content.type + "</div>";
table_task_Html += "<div style=\"float: left;width: 15%;height: 100%;white-space:nowrap;text-overflow: ellipsis;overflow: hidden;\">" + content.status + "</div>";
table_task_Html += "<div style=\"float: left;width: 25%;height: 100%;white-space:nowrap;text-overflow: ellipsis;overflow: hidden;\">" + content.endTime + "</div>";
table_task_Html += "</div>";
}
}
$('#table_task').html(table_task_Html);
} else if (topic == 'dataVisualData_hqfy_alarm_' + regionID) {
let json = JSON.parse(message.toString());
// console.log(json);
if (json.A_AlarmNum != null) {
$("#A_AlarmNum").text(json.A_AlarmNum);
}
if (json.B_AlarmNum != null) {
$("#B_AlarmNum").text(json.B_AlarmNum);
}
if (json.C_AlarmNum != null) {
$("#C_AlarmNum").text(json.C_AlarmNum);
}
if (json.D_AlarmNum != null) {
$("#D_AlarmNum").text(json.D_AlarmNum);
}
let table_alarm_Html = "";
if (json.table_alarm != null) {
for (let i = 0; i < json.table_alarm.length; i++) {
let content = json.table_alarm[i];
table_alarm_Html += "<div style=\"float: left;width: 100%;height: 38px;line-height: 38px;text-align: center;color: #bfbfbf;padding-top: 1px;padding-bottom: 1px;\">";
table_alarm_Html += "<div style=\"float: left;width: 120px;height: 100%;\">" + content.time + "</div>";
table_alarm_Html += "<div title='" + content.content + "' style=\"float: left;width: calc(100% - 200px);height: 100%;white-space:nowrap;text-overflow: ellipsis;overflow: hidden;\">" + content.content + "</div>";
let levelColorStyle = "";
if (content.level == 'A') {
levelColorStyle = "background-color:#FF0000;color:#000000;";
} else if (content.level == 'B') {
levelColorStyle = "background-color:#FFC000;color:#000000;";
} else if (content.level == 'C') {
levelColorStyle = "background-color:#FFFF00;color:#000000;";
} else if (content.level == 'D') {
levelColorStyle = "background-color:#00B0F0;color:#000000;";
}
table_alarm_Html += "<div style=\"float: left;width: 80px;height: 100%;" + levelColorStyle + "\">" + content.level + "</div>";
table_alarm_Html += "</div>";
}
}
$('#table_alarm').html(table_alarm_Html);
}
});
//页面离开自动断开连接
$(window).bind("beforeunload", () => {
// console.log("客户端窗口关闭,断开连接");
client.disconnect();
})
}
function openTab(ID, name, url) {
if (ID == "HQ_Open_FY_1") {
url = url + "?selectId=" + regionID;
} else if (ID == "HQ_Open_FY_2") {
url = url + "?selectId=" + regionID;
} else if (ID == "HQ_Open_FY_3") {
url = url + "?selectId=" + processsection;
}
window.parent.parent.addTab("" + ID + "", "" + name + "", "" + url + "");
}
</script>
</head>
<body onload="initMenu()" class="hold-transition ${cu.themeclass} sidebar-mini">
<div id="main" style="background-color: #000000;width: 1920px;height: 410px;">
<div style="float:left;width: 5%;height: 100%;border-right: 2px solid #707070;padding: 20px 10px 20px 10px;">
<table style="width: 100%;height: 100%;text-align: center;">
<tr>
<td style="height: 13.3%;color:#FFFFFF;font-weight: 700;">当前报警</td>
</tr>
<tr>
<td id="currentAlarmNum" style="height: 20%;color:#00f6ff;font-size: 36px;font-weight: 700;"></td>
</tr>
<tr>
<td style="height: 13.3%;color:#FFFFFF;font-weight: 700;">今日报警</td>
</tr>
<tr>
<td id="todayAlarmNum" style="height: 20%;color:#00f6ff;font-size: 36px;font-weight: 700;"></td>
</tr>
<tr>
<td style="height: 13.3%;color:#FFFFFF;font-weight: 700;">本月报警</td>
</tr>
<tr>
<td id="monthAlarmNum" style="height: 20%;color:#00f6ff;font-size: 36px;font-weight: 700;"></td>
</tr>
</table>
</div>
<div style="float:left;width: 25%;height: 100%;border-right: 2px solid #707070;">
<div style="float: left;width: 100%;height: 30px;color:#FFFFFF;font-weight: 700;line-height: 40px;padding-left: 15px;">
当前风险数量
</div>
<div style="float: left;width: 100%;height: 100px;padding-left: 20px;padding-right: 20px;">
<table style="width: 100%;height: 100%;text-align: center;">
<tr style="height: 30%;color:#FFFFFF;font-weight: 700;">
<td style="">A类风险</td>
<td style="">B类风险</td>
<td style="">C类风险</td>
<td style="">D类风险</td>
</tr>
<tr style="height: 30%;color:#00f6ff;font-size: 36px;font-weight: 700;">
<td id="A_AlarmNum" style=""></td>
<td id="B_AlarmNum" style=""></td>
<td id="C_AlarmNum" style=""></td>
<td id="D_AlarmNum" style=""></td>
</tr>
</table>
</div>
<div style="float: left;width: 100%;height: 230px;padding-left: 20px;padding-right: 20px;">
<div style="float: left;width: 100%;height: 38px;line-height: 38px;font-weight: 700;text-align: center;color: #bfbfbf;border-bottom: 1px solid #707070;">
<div style="float: left;width: 120px;height: 100%;">
时间
</div>
<div style="float: left;width: calc(100% - 200px);height: 100%;">
报警内容
</div>
<div style="float: left;width: 80px;height: 100%;">
风险等级
</div>
</div>
<div id="table_alarm">
</div>
</div>
<div style="float: left;width: 100%;height: 40px;">
<div onclick="openTab('HQ_Open_FY_1','风险诊断记录','hqconfig/hqAlarmRecord/showList.do');"
style="float: right;cursor:pointer;width: 80px;height: 30px;margin-top: 5px;margin-right: 20px;background: #434343;border: 1px solid #707070;border-radius: 4px;text-align: center;line-height: 30px;color: #bfbfbf;">
查看详细
</div>
</div>
</div>
<div style="float:left;width: 25%;height: 100%;border-right: 2px solid #707070;">
<div style="float: left;width: 100%;height: 30px;color:#FFFFFF;font-weight: 700;line-height: 40px;padding-left: 15px;">
</div>
<div style="float: left;width: 100%;height: 100px;">
<table style="width: 100%;height: 100%;text-align: center;">
<tr style="height: 30%;color:#FFFFFF;font-weight: 700;">
<td style="">当前人员数</td>
<td style="">今日进入</td>
</tr>
<tr style="height: 30%;color:#00f6ff;font-size: 36px;font-weight: 700;">
<td id="now_people" style=""></td>
<td id="today_in_people" style=""></td>
</tr>
</table>
</div>
<div style="float: left;width: 100%;height: 230px;padding-left: 20px;padding-right: 20px;">
<div style="float: left;width: 100%;height: 38px;line-height: 38px;font-weight: 700;text-align: center;color: #bfbfbf;border-bottom: 1px solid #707070;">
<div style="float: left;width: 20%;height: 100%;">
姓名
</div>
<div style="float: left;width: 20%;height: 100%;">
部门
</div>
<div style="float: left;width: 20%;height: 100%;">
进入时间
</div>
<div style="float: left;width: 20%;height: 100%;">
逗留时长
</div>
<div style="float: left;width: 20%;height: 100%;">
当前状态
</div>
</div>
<div id="table_people"></div>
</div>
<div onclick="openTab('HQ_Open_FY_2','区域进入记录','hqconfig/enterRecord/showList.do');"
style="float: left;width: 100%;height: 40px;">
<div style="float: right;cursor:pointer;width: 80px;height: 30px;margin-top: 5px;margin-right: 20px;background: #434343;border: 1px solid #707070;border-radius: 4px;text-align: center;line-height: 30px;color: #bfbfbf;">
查看详细
</div>
</div>
</div>
<div style="float:left;width: 20%;height: 100%;border-right: 2px solid #707070;">
<div style="float: left;width: 100%;height: 30px;color:#FFFFFF;font-weight: 700;line-height: 40px;padding-left: 15px;">
</div>
<div style="float: left;width: 100%;height: 100px;">
<table style="width: 100%;height: 100%;text-align: center;">
<tr style="height: 30%;color:#FFFFFF;font-weight: 700;">
<td style="">AI摄像头</td>
<td style="">摄像头</td>
</tr>
<tr style="height: 30%;color:#00f6ff;font-size: 36px;font-weight: 700;">
<td id="AI_Camera" style=""></td>
<td id="All_Camera" style=""></td>
</tr>
</table>
</div>
<div style="float: left;width: 100%;height: 230px;padding-left: 20px;padding-right: 20px;">
<div style="float: left;width: 100%;height: 38px;line-height: 38px;font-weight: 700;text-align: center;color: #bfbfbf;border-bottom: 1px solid #707070;">
<div style="float: left;width: 35%;height: 100%;">
AI摄像头名称
</div>
<div style="float: left;width: 65%;height: 100%;">
算法名
</div>
</div>
<div id="table_camera"></div>
</div>
<div onclick="openTab('HQ_Open_FY_3','视频配置','work/camera/showList.do');"
style="float: left;width: 100%;height: 40px;">
<div style="float: right;cursor:pointer;width: 80px;height: 30px;margin-top: 5px;margin-right: 20px;background: #434343;border: 1px solid #707070;border-radius: 4px;text-align: center;line-height: 30px;color: #bfbfbf;">
查看详细
</div>
</div>
</div>
<div style="float:left;width: 25%;height: 100%;">
<div style="float: left;width: 100%;height: 30px;color:#FFFFFF;font-weight: 700;line-height: 40px;padding-left: 15px;">
</div>
<div style="float: left;width: 100%;height: 100px;">
<table style="width: 100%;height: 100%;text-align: center;">
<tr style="height: 30%;color:#FFFFFF;font-weight: 700;">
<td style="">本月待执行</td>
<td style="">本月已完成</td>
</tr>
<tr style="height: 30%;color:#00f6ff;font-size: 36px;font-weight: 700;">
<td id="month_toBeExecuted" style=""></td>
<td id="month_completed" style=""></td>
</tr>
</table>
</div>
<div style="float: left;width: 100%;height: 230px;padding-left: 20px;padding-right: 20px;">
<div style="float: left;width: 100%;height: 38px;line-height: 38px;font-weight: 700;text-align: center;color: #bfbfbf;border-bottom: 1px solid #707070;">
<div style="float: left;width: 30%;height: 100%;">
任务名称
</div>
<div style="float: left;width: 30%;height: 100%;">
任务类型
</div>
<div style="float: left;width: 15%;height: 100%;">
状态
</div>
<div style="float: left;width: 25%;height: 100%;">
截止时间
</div>
</div>
<div id="table_task"></div>
</div>
<div style="float: left;width: 100%;height: 40px;">
<div onclick="openTab('HQ_Open_FY_4','安全任务记录','timeEfficiency/patrolRecord/showList4Safe.do');"
style="float: right;cursor:pointer;width: 80px;height: 30px;margin-top: 5px;margin-right: 20px;background: #434343;border: 1px solid #707070;border-radius: 4px;text-align: center;line-height: 30px;color: #bfbfbf;">
查看详细
</div>
</div>
</div>
</div>
</body>
<!-- 引入daterangepicker-->
<link rel="stylesheet" href="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.css"/>
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/moment.min.js"
charset="utf-8"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.js"
charset="utf-8"></script>
</html>

View File

@ -0,0 +1,174 @@
<%@ page language="java" pageEncoding="UTF-8"%>
<%@page import="com.sipai.entity.maintenance.MaintenanceDetail"%>
<%request.setAttribute("Wait", MaintenanceDetail.Status_Wait); %>
<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').data('bootstrapValidator')
// .updateStatus('happenDate', 'NOT_VALIDATED',null)
// .validateField('happenDate');
// $('#subForm').data('bootstrapValidator')
// .updateStatus('accidentTypeName', 'NOT_VALIDATED',null)
// .validateField('accidentTypeName');
$("#subForm").bootstrapValidator('validate');//提交验证
if ($("#subForm").data('bootstrapValidator').isValid()) {//获取验证结果,如果成功,执行下面代码
$.post(ext.contextPath + "/xServer/xServer/dosave.do", $("#subForm").serialize(), function(data) {
if (data.code == 1){
showAlert('s','保存成功');
closeModal('subModal')
$("#table").bootstrapTable('refresh');
}else if(data.code == 0){
showAlert('d','保存失败');
}else{
showAlert('d',data.res);
}
},'json');
}
}
$("#subForm").bootstrapValidator({
live: 'disabled',//验证时机enabled是内容有变化就验证默认disabled和submitted是提交再验证
fields: {
name: {
validators: {
notEmpty: {
message: '名称不能为空'
}
}
},
typeid: {
validators: {
notEmpty: {
message: '服务器类型不能为空'
}
}
},
status: {
validators: {
notEmpty: {
message: '启用不能为空'
}
}
},
}
});
$(function(){
$("#flag").select2({ minimumResultsForSearch: 10 }).val("0").trigger("change");
$("#typeid").select2({ minimumResultsForSearch: 10 }).val("数据库").trigger("change");
$("#dbtype").select2({ minimumResultsForSearch: 10 }).val("MSSQL").trigger("change");
$("#status").select2({ minimumResultsForSearch: 10 }).val("启用").trigger("change");
});
</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">&times;</span></button>
<h4 class="modal-title">新增数据源管理</h4>
</div>
<div class="modal-body">
<!-- 新增界面formid强制为subForm -->
<form class="form-horizontal" id="subForm">
<!-- 界面提醒div强制id为alertDiv -->
<div id="alertDiv"></div>
<input type="hidden" class="form-control" id="id" name ="id" value ="${xServer.id}">
<input type="hidden" class="form-control" id="bizid" name ="bizid" value ="${param.unitId}">
<div class="form-group">
<label class="col-sm-2 control-label">*名称</label>
<div class="col-sm-4">
<input class="form-control" type="text" id="name" name ="name" value="${xServer.name}">
</div>
<label class="col-sm-2 control-label">*服务器类型</label>
<div class="col-sm-4">
<select id="typeid" name="typeid" class="form-control select2">
<option value="数据库">数据库</option>
<option value="OPC">OPC</option>
<option value="ModBus">ModBus</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">服务器地址</label>
<div class="col-sm-4">
<input class="form-control" type="text" id="ipaddress" name ="ipaddress" value="${xServer.ipaddress}">
</div>
<label class="col-sm-2 control-label">端口</label>
<div class="col-sm-4">
<input class="form-control" type="text" id="port" name ="port" value="${xServer.port}">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">用户名</label>
<div class="col-sm-4">
<input class="form-control" type="text" id="loginname" name ="loginname" value="${xServer.loginname}">
</div>
<label class="col-sm-2 control-label">密码</label>
<div class="col-sm-4">
<input class="form-control" type="text" id="password" name ="password" value="${xServer.password}">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">数据库名称</label>
<div class="col-sm-4">
<input class="form-control" type="text" id="dbname" name ="dbname" value="${xServer.dbname}">
</div>
<label class="col-sm-2 control-label">数据库类型</label>
<div class="col-sm-4">
<select id="dbtype" name="dbtype" class="form-control select2" style="width: 150px;">
<option value="MSSQL">MSSQL</option>
<option value="mongoDB">mongoDB</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">是否定时扫描连接</label>
<div class="col-sm-4">
<select id="flag" name="flag" class="form-control select2">
<option value="0">否</option>
<option value="1">是</option>
</select>
</div>
<label class="col-sm-2 control-label">定时扫描时间间隔分钟</label>
<div class="col-sm-4">
<input class="form-control" type="number" id="timespan" name ="timespan" value="${xServer.timespan}">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">启用状态</label>
<div class="col-sm-4">
<select id="status" name="status" class="form-control select2">
<option value="启用">启用</option>
<option value="禁用">禁用</option>
</select>
</div>
</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="dosave()" id="btn_save">保存</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>

View File

@ -0,0 +1,170 @@
<%@ 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() {
// $('#subForm').data('bootstrapValidator')
// .updateStatus('happenDate', 'NOT_VALIDATED',null)
// .validateField('happenDate');
// $('#subForm').data('bootstrapValidator')
// .updateStatus('accidentTypeName', 'NOT_VALIDATED',null)
// .validateField('accidentTypeName');
$("#subForm").bootstrapValidator('validate');//提交验证
if ($("#subForm").data('bootstrapValidator').isValid()) {//获取验证结果,如果成功,执行下面代码
$.post(ext.contextPath + "/xServer/xServer/doupdate.do", $("#subForm").serialize(), function(data) {
if (data.code == 1){
showAlert('s','保存成功');
closeModal('subModal')
$("#table").bootstrapTable('refresh');
}else if(data.code == 0){
showAlert('d','保存失败');
}else{
showAlert('d',data.msg);
}
},'json');
}
}
$("#subForm").bootstrapValidator({
live: 'disabled',//验证时机enabled是内容有变化就验证默认disabled和submitted是提交再验证
fields: {
name: {
validators: {
notEmpty: {
message: '名称不能为空'
}
}
},
typeid: {
validators: {
notEmpty: {
message: '服务器类型不能为空'
}
}
},
status: {
validators: {
notEmpty: {
message: '启用不能为空'
}
}
},
}
});
$(function(){
$("#flag").select2({ minimumResultsForSearch: 10 }).val("${xServer.flag}").trigger("change");
$("#typeid").select2({ minimumResultsForSearch: 10 }).val("${xServer.typeid}").trigger("change");
$("#dbtype").select2({ minimumResultsForSearch: 10 }).val("${xServer.dbtype}").trigger("change");
$("#status").select2({ minimumResultsForSearch: 10 }).val("${xServer.status}").trigger("change");
})
</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">&times;</span></button>
<h4 class="modal-title">编辑数据源管理</h4>
</div>
<div class="modal-body">
<!-- 新增界面formid强制为subForm -->
<form class="form-horizontal" id="subForm">
<!-- 界面提醒div强制id为alertDiv -->
<div id="alertDiv"></div>
<input type="hidden" class="form-control" id="id" name ="id" value ="${xServer.id}">
<input type="hidden" class="form-control" id="bizid" name ="bizid" value ="${xServer.bizid}">
<div class="form-group">
<label class="col-sm-2 control-label">*名称</label>
<div class="col-sm-4">
<input class="form-control" type="text" id="name" name ="name" value="${xServer.name}">
</div>
<label class="col-sm-2 control-label">*服务器类型</label>
<div class="col-sm-4">
<select id="typeid" name="typeid" class="form-control select2">
<option value="数据库">数据库</option>
<option value="OPC">OPC</option>
<option value="ModBus">ModBus</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">服务器地址</label>
<div class="col-sm-4">
<input class="form-control" type="text" id="ipaddress" name ="ipaddress" value="${xServer.ipaddress}">
</div>
<label class="col-sm-2 control-label">端口</label>
<div class="col-sm-4">
<input class="form-control" type="text" id="port" name ="port" value="${xServer.port}">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">用户名</label>
<div class="col-sm-4">
<input class="form-control" type="text" id="loginname" name ="loginname" value="${xServer.loginname}">
</div>
<label class="col-sm-2 control-label">密码</label>
<div class="col-sm-4">
<input class="form-control" type="text" id="password" name ="password" value="${xServer.password}">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">数据库名称</label>
<div class="col-sm-4">
<input class="form-control" type="text" id="dbname" name ="dbname" value="${xServer.dbname}">
</div>
<label class="col-sm-2 control-label">数据库类型</label>
<div class="col-sm-4">
<select id="dbtype" name="dbtype" class="form-control select2" style="width: 150px;">
<option value="MSSQL">MSSQL</option>
<option value="mongoDB">mongoDB</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">是否定时扫描连接</label>
<div class="col-sm-4">
<select id="flag" name="flag" class="form-control select2">
<option value="0">否</option>
<option value="1">是</option>
</select>
</div>
<label class="col-sm-2 control-label">定时扫描时间间隔分钟</label>
<div class="col-sm-4">
<input class="form-control" type="number" id="timespan" name ="timespan" value="${xServer.timespan}">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">启用状态</label>
<div class="col-sm-4">
<select id="status" name="status" class="form-control select2">
<option value="启用">启用</option>
<option value="禁用">禁用</option>
</select>
</div>
</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="doupdate()" id="btn_save">保存</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>

View File

@ -0,0 +1,294 @@
<%@page import="com.sipai.entity.maintenance.MaintenanceDetail"%>
<%@ 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"%>
<%String contextPath = request.getContextPath();%>
<%request.setAttribute("Finish", MaintenanceDetail.Status_Finish); %>
<%request.setAttribute("Start", MaintenanceDetail.Status_Start); %>
<%request.setAttribute("Wait", MaintenanceDetail.Status_Wait); %>
<!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">
.select2-container .select2-selection--single{
height:34px;
line-height: 34px;
}
.select2-selection__arrow{
margin-top:3px;
}
.table-hover>tbody>tr:hover {
cursor: pointer;
}
</style>
<!-- 文件上传-->
<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>
<script type="text/javascript">
var addFun = function() {
$.post(ext.contextPath + '/xServer/xServer/doadd.do', {unitId:unitId} , function(data) {
$("#subDiv").html(data);
openModal('subModal');
});
};
var editFun = function(id) {
stopBubbleDefaultEvent();
$.post(ext.contextPath + '/xServer/xServer/doedit.do', {id:id} , function(data) {
$("#subDiv").html(data);
openModal('subModal');
});
};
var viewFun = function(id) {
$.post(ext.contextPath + '/xServer/xServer/doview.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 + '/xServer/xServer/dodelete.do', {id : id}, function(data) {
if(data.code=="1"){
$("#table").bootstrapTable('refresh');
}else{
showAlert('d','删除失败','mainAlertdiv');
}
},'json');
}
});
};
var deletesFun = function() {
var checkedItems = $("#table").bootstrapTable('getSelections');
var datas="";
$.each(checkedItems, function(index, item){
datas+=item.id+",";
});
if(datas==""){
showAlert('d','请先选择记录','mainAlertdiv');
}else{
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 + '/xServer/xServer/dodeletes.do', {ids:datas} , function(data) {
if(data.code>0){
$("#table").bootstrapTable('refresh');
}else{
showAlert('d','删除失败','mainAlertdiv');
}
},'json');
}
});
}
};
var dosearch = function() {
$("#table").bootstrapTable('refresh');
};
var companyId = unitId;
$(function() {
companyId = unitId;
initFun();
});
var initFun = function(){
$("#table").bootstrapTable({ // 对应table标签的id
url: ext.contextPath + '/xServer/xServer/getList.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,
search_name: $('#search_name').val(),
unitId: unitId,
// pSectionId: $("#processSection").val(),
// statusSelect:$("#statusSelect").val(),
}
},
// onClickRow: function (row) {//单击行事件,执行查看功能
// viewFun(row.id);
// },
sortName: 'name', // 要排序的字段
sortOrder: 'asc', // 排序规则
columns: [
{
checkbox: true, // 显示一个勾选框
},{
field: 'name', // 返回json数据中的name
title: '名称', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle'
},{
field: 'company.name', // 返回json数据中的name
title: '所属厂区', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle'
},{
field: 'typeid', // 返回json数据中的name
title: '服务器类型', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle' // 上下居中
},{
field: 'ipaddress', // 返回json数据中的name
title: '服务器地址', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle' // 上下居中
},{
field: 'port', // 返回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" title="编辑" onclick="editFun(\'' + row.id + '\')"><i class="fa fa-edit"></i><span class="hidden-md hidden-lg"> 编辑</span></button>';
buts+='<button class="btn btn-default btn-sm" title="删除" onclick="deleteFun(\''+row.id+'\')"><i class="fa 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("table");
},
onLoadError: function(){ //加载失败时执行
console.info("加载数据失败");
}
});
}
</script>
</head>
<body onload="initMenu()" class="hold-transition ${cu.themeclass} sidebar-mini">
<div class="wrapper">
<!-- 引用top -->
<%-- <jsp:include page="/jsp/top.jsp"></jsp:include> --%>
<!-- 菜单栏 -->
<%-- <jsp:include page="/jsp/left.jsp"></jsp:include> --%>
<div class="content-wrapper">
<!-- Main content -->
<section class="content container-fluid">
<div id="mainAlertdiv"></div>
<div id="subDiv" style="width: 220px;height:10px;"></div>
<div id="subDivAbnorm"></div>
<div id="menu4SelectDiv"></div>
<div id="equ4SelectDiv"></div>
<div id="library4SelectDiv"></div>
<div id="problemTyp4SelectDiv"></div>
<div id="user4SelectDiv"></div>
<div id="fileInputDiv"></div>
<div >
<div class="form-group " style="margin-bottom:10px;">
<input id="search_pid" name="search_pid" type="hidden" />
<span id="companyName" style="height:31px;color:#000000;border-top-left-radius: 4px;border-bottom-left-radius: 4px;font-weight:bold"></span>
</div>
<div class="form-group form-inline" style="padding:0;">
<div class="btn-group" style="width: 280px;padding-bottom:10px;">
<!-- <security:authorize buttonUrl="maintenance/abnormity/add.do"> -->
<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>
<!--
<button type="button" class="btn btn-default btn-sm" title="异常中有设备的生成维修,没设备的生成缺陷" onclick="createDefectFun();"><i class="fa fa-send-o"></i>生成缺陷或维修单</button> -->
<!-- </security:authorize> -->
</div>
<!--
<div class="form-group pull-right form-inline" >
<div class="form-group">
<label class="form-label">工艺段:</label>
<select class="form-control select2 " id="processSection" name ="processSection" style="width: 160px;"></select>
<label class="form-label">状态:</label>
<select class="form-control select2 " id="statusSelect" name ="statusSelect" style="width: 160px;">
<option value= "${Wait}">待处理</option>
<option value= "${Start}">处理中</option>
<option value= "${Finish}">已完成</option>
</select>
</div>
<div class="form-group" >
<div class="input-group input-group-sm" style="width: 250px;">
<input type="text" id="search_name" name="search_name" class="form-control pull-right" style="height:34px;" placeholder="名称">
<div class="input-group-btn">
<button class="btn btn-default" style="height:34px;" onclick="dosearch();"><i class="fa fa-search"></i></button>
</div>
</div>
</div>
</div> -->
</div>
<table id="table"></table>
</div>
</section>
<!-- /.content -->
</div>
<%-- <jsp:include page="/jsp/bottom.jsp"></jsp:include> --%>
<%-- <jsp:include page="/jsp/side.jsp"></jsp:include> --%>
</div>
</body>
<!-- bootstrap switch -->
<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>
</html>