520 lines
17 KiB
Plaintext
520 lines
17 KiB
Plaintext
<%@page import="com.sipai.entity.work.ScadaPic_Txt"%>
|
||
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
|
||
<%@page import="java.util.Date" %>
|
||
<%@page import="java.text.SimpleDateFormat" %>
|
||
<%@ page import="com.sipai.tools.SessionManager"%>
|
||
<%
|
||
SessionManager sessionManager = new SessionManager();
|
||
%>
|
||
<% request.setAttribute("Flag_Txt", ScadaPic_Txt.Flag_Txt);%>
|
||
<% request.setAttribute("Flag_MPoint", ScadaPic_Txt.Flag_MPoint);%>
|
||
<% request.setAttribute("Flag_EM", ScadaPic_Txt.Flag_EM);%>
|
||
<!DOCTYPE HTML>
|
||
<html>
|
||
<head>
|
||
<title></title>
|
||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||
|
||
<script type="text/javascript">
|
||
|
||
|
||
//为保存布局
|
||
function setdata() {
|
||
var obj = document.getElementsByTagName("DIV");
|
||
for(var i=0;i<obj.length;i++){
|
||
//console.info(obj[i].className.indexOf("easyui-draggable"));
|
||
if(obj[i].className.indexOf("easyui-draggable")>=0){
|
||
console.info(obj[i].style.width);
|
||
$.post(ext.contextPath + '/work/scadaPic/updateLayout.do', {type:obj[i].getAttribute("type"), id:obj[i].id , posx:obj[i].style.left , posy:obj[i].style.top,
|
||
containerWidth:obj[i].parentNode.style.width,containerHeight:obj[i].parentNode.style.height,
|
||
width:obj[i].style.width,height:obj[i].style.height}, function(data) {
|
||
if(data.res!=1){
|
||
top.$.messager.alert('提示','更新失败','info');
|
||
}
|
||
},'json');
|
||
}
|
||
}
|
||
}
|
||
|
||
function addmp(){
|
||
var width= $("#img").width();
|
||
var height= $("#img").height();
|
||
var workshopid = $("#workshopid").combobox('getValue');
|
||
var dialog = parent.ext.modalDialog({
|
||
iframeId:'iframeadd',
|
||
title : '添加测量点',
|
||
width:700,
|
||
height:550,
|
||
url : ext.contextPath + '/work/scadaPic/addMPoint.do?containerwidth='+width+'&containerheight='+height+"&pid="+workshopid,
|
||
buttons : [ {
|
||
text : '保存',
|
||
handler : function() {
|
||
dialog.find('iframe').get(0).contentWindow.dosave(dialog);
|
||
}
|
||
} ],
|
||
onDestroy:function(){
|
||
showMPoint();
|
||
}
|
||
});
|
||
}
|
||
function addequ(){
|
||
var width= $("#img").width();
|
||
var height= $("#img").height();
|
||
var workshopid = $("#workshopid").combobox('getValue');
|
||
var dialog = parent.ext.modalDialog({
|
||
iframeId:'iframeadd',
|
||
title : '添加设备',
|
||
width:600,
|
||
height:400,
|
||
url : ext.contextPath + '/work/scadaPic/addEM.do?containerwidth='+width+'&containerheight='+height+"&pid="+workshopid,
|
||
buttons : [ {
|
||
text : '保存',
|
||
handler : function() {
|
||
dialog.find('iframe').get(0).contentWindow.dosave(dialog);
|
||
}
|
||
} ],
|
||
onDestroy:function(){
|
||
showEM();
|
||
}
|
||
});
|
||
}
|
||
|
||
function addtext(){
|
||
var width= $("#img").width();
|
||
var height= $("#img").height();
|
||
var workshopid = $("#workshopid").combobox('getValue');
|
||
var dialog = parent.ext.modalDialog({
|
||
iframeId:'iframeadd',
|
||
title : '添加文本',
|
||
url : ext.contextPath + '/work/scadaPic/addTxt.do?containerwidth='+width+'&containerheight='+height+"&pid="+workshopid,
|
||
buttons : [ {
|
||
text : '保存',
|
||
handler : function() {
|
||
dialog.find('iframe').get(0).contentWindow.dosave(dialog);
|
||
}
|
||
} ],
|
||
onDestroy:function(){
|
||
showTxt();
|
||
}
|
||
});
|
||
}
|
||
|
||
|
||
</script>
|
||
</head>
|
||
<body class="easyui-layout" data-options="fit:true,border:false">
|
||
<input type="hidden" name="clientWidth" value="${clientWidth}">
|
||
<input type="hidden" name="picid" value="${clientWidth}">
|
||
<div id="toolbar" style="display: none;" data-options="region:'north',border:false">
|
||
<table >
|
||
<tr >
|
||
<th>车间</th>
|
||
<td ><input id="workshopid" name="workshopid" class="easyui-combobox" data-options="required:true,validType:'isBlank'" style="width: 180px;"/></td>
|
||
<td width="80">
|
||
<a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true"
|
||
onclick="addmp();" >测量点</a>
|
||
</td>
|
||
<td width="70">
|
||
<a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true"
|
||
onclick="addequ();">设备</a>
|
||
</td>
|
||
<!-- <td width="70">
|
||
<a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true"
|
||
onclick="addsyb();">标识</a>
|
||
</td> -->
|
||
<td width="70">
|
||
<a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true"
|
||
onclick="addtext();">文本</a>
|
||
</td>
|
||
<td width="100">
|
||
<a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true"
|
||
onclick="setdata();">保存布局</a>
|
||
|
||
</td>
|
||
<%-- <c:if test="${cu.empid!='emp01'}">
|
||
<td width="100">
|
||
<a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true"
|
||
onclick="returndata();">恢复布局</a>
|
||
</td>
|
||
</c:if> --%>
|
||
<!-- <td width="120">
|
||
<a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true"
|
||
onclick="setpicdata();">设为默认图</a>
|
||
</td> -->
|
||
<td style="vertical-align: middle">
|
||
<div id="result">
|
||
</div>
|
||
</td>
|
||
<td>
|
||
|
||
</td>
|
||
<td align="right" style="padding-left:10px;padding-right:10px">
|
||
</td>
|
||
<td width="5">
|
||
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div >
|
||
<div id ="content" data-options="region:'center',fit:true,border:false" >
|
||
|
||
</div>
|
||
<div id="mTxt" class="easyui-menu" data-options="onClick:txtMenuHandler" style="width:120px;">
|
||
<div data-options="name:'delete',iconCls:'icon-remove'">删除</div>
|
||
</div>
|
||
<div id="mPoint" class="easyui-menu" data-options="onClick:mPointMenuHandler" style="width:120px;">
|
||
<div data-options="name:'delete',iconCls:'icon-remove'">删除</div>
|
||
<div data-options="name:'edit',iconCls:'ext-icon-cog_edit'">编辑</div>
|
||
<div data-options="name:'help',iconCls:'icon-help'">属性</div>
|
||
</div>
|
||
<div id="mEM" class="easyui-menu" data-options="onClick:mEMMenuHandler" style="width:120px;">
|
||
<div data-options="name:'delete',iconCls:'icon-remove'">删除</div>
|
||
<div data-options="name:'help',iconCls:'icon-help'">属性</div>
|
||
</div>
|
||
<script>
|
||
var contentdiv=$("#content");
|
||
$(function(){
|
||
window.onresize = changesize;
|
||
$("#workshopid").combobox({
|
||
url : ext.contextPath + '/work/workshop/getlist4Combo.do',
|
||
valueField : 'id',
|
||
textField : 'name',
|
||
method:'get',
|
||
panelHeight:'auto',
|
||
onSelect: function () {
|
||
contentdiv.empty();
|
||
|
||
var son='<img id="img" ondragstart="return false" style="width:100%;height:98%;cursor:default;"></img>'
|
||
contentdiv.append(son);
|
||
var workshopid = $("#workshopid").combobox('getValue');
|
||
var dates = $("#workshopid").combobox('getData');
|
||
|
||
for (var i=0;i< dates.length;i++) {
|
||
//console.info(dates[i].id)
|
||
if (dates[i].id == workshopid) {
|
||
var abspath=dates[i].commonFile.abspath;
|
||
abspath=abspath.substring(abspath.indexOf("webapps")+8);
|
||
//abspath.replace("//","/");
|
||
//alert(abspath)
|
||
$("#img").attr("src","../../../"+abspath);
|
||
showTxt();
|
||
showMPoint();
|
||
showEM();
|
||
}
|
||
}
|
||
|
||
}
|
||
});
|
||
MpPics =JSON.parse(getMpPic());
|
||
|
||
});
|
||
//清除原先点
|
||
function clearItem(type) {
|
||
|
||
var obj = document.getElementsByTagName("DIV");
|
||
//循环逆序删除
|
||
for(var i=obj.length-1;i>0;i--){
|
||
//console.info(obj[i].className.indexOf("easyui-draggable"));
|
||
//console.info(obj[i].getAttribute("type"));
|
||
if(obj[i].className.indexOf("easyui-draggable")>=0 && obj[i].getAttribute("type")==type){
|
||
//console.info(obj[i]);
|
||
obj[i].remove();
|
||
}
|
||
}
|
||
//console.log(obj.length)
|
||
}
|
||
var firstOnResizeFire = true;//谷歌浏览器onresize事件会执行2次，这里加个标志位控制
|
||
var containerWidth = 0;
|
||
var containerHeight = 0;
|
||
var selectid=""; //记录右键时，指向的对象
|
||
function changesize(){
|
||
if (firstOnResizeFire) {
|
||
firstOnResizeFire = false;
|
||
adjuest();
|
||
//0.5秒之后将标志位重置（Chrome的window.onresize默认执行两次）
|
||
setTimeout(function() {
|
||
firstOnResizeFire = true;
|
||
}, 500);
|
||
}
|
||
|
||
}
|
||
function adjuest(){
|
||
var obj = contentdiv.find("div");
|
||
var width =document.body.clientWidth;//onresize方法测试时，只有body的clientwidth是改变后的值
|
||
var height =document.body.clientHeight// $("#content").height();
|
||
for(var i=0;i<obj.length;i++){
|
||
if(obj[i].className.indexOf("easyui-draggable")>=0){
|
||
|
||
var jobj=$("#"+obj[i].id);
|
||
//console.info("新对象",jobj.position().left);
|
||
var left=width*jobj.position().left/containerWidth;
|
||
var top=height*jobj.position().top/containerHeight;
|
||
//console.info("新左距离",left);
|
||
jobj.css("left",left);
|
||
jobj.css("top",top);
|
||
//console.info("文本的左距离",jobj.position().left);
|
||
//console.info("容器的宽度",width);
|
||
//console.info("body的宽度",);
|
||
|
||
}
|
||
if(obj[i].className.indexOf("easyui-resizable")>=0){
|
||
|
||
var jobj=$("#"+obj[i].id);
|
||
//console.info("新对象",jobj.width());
|
||
var w=width*jobj.width()/containerWidth;
|
||
var h=height*jobj.height()/containerHeight;
|
||
//console.info("新左距离",left);
|
||
jobj.css("width",w);
|
||
jobj.css("height",h);
|
||
//console.info("文本的左距离",jobj.position().left);
|
||
//console.info("容器的宽度",width);
|
||
//console.info("body的宽度",);
|
||
|
||
}
|
||
}
|
||
//
|
||
containerWidth =width;
|
||
containerHeight=height;
|
||
}
|
||
function showTxt(){
|
||
var workshopid = $("#workshopid").combobox('getValue');
|
||
$.post(ext.contextPath + "/work/scadaPic/getTxtList.do", {pid:workshopid}, function(data) {
|
||
clearItem("${Flag_Txt}");
|
||
//console.info(data)
|
||
if (data.length>0) {
|
||
for(i=0 ;i<data.length;i++){
|
||
var item= data[i];
|
||
containerWidth = contentdiv.width();
|
||
containerHeight = contentdiv.height();
|
||
|
||
var left=containerWidth*item.posx/item.containerwidth;
|
||
var top=containerHeight*item.posy/item.containerheight;
|
||
var son= '<div class="easyui-draggable" style="background-color:green;width:100px;height:20px;position:absolute;top:'+top+'px;left:'+left+'px;" id="'+item.id+'" type="${Flag_Txt}">'+
|
||
'<table id="title" style="font-size:12px" >'+
|
||
'<tr align="center">'+
|
||
'<td ><span style="color:white;font-size:'+item.fsize+'">'+
|
||
item.content+
|
||
'</span></td>'+
|
||
'</tr>'+
|
||
'</table>'+
|
||
'</div>';
|
||
|
||
//console.info(son)
|
||
contentdiv.append(son);
|
||
|
||
$('#'+item.id).bind('contextmenu',function(e){
|
||
selectid=this.id;
|
||
e.preventDefault();
|
||
$('#mTxt').menu('show', {
|
||
left: e.pageX,
|
||
top: e.pageY
|
||
});
|
||
});
|
||
$('#'+item.id).draggable()
|
||
}
|
||
|
||
}
|
||
},'json');
|
||
}
|
||
function txtMenuHandler(item){
|
||
switch(item.name){
|
||
case'delete':
|
||
$.post(ext.contextPath + "/work/scadaPic/deleteTxt.do", {id:selectid}, function(data) {
|
||
if(data==1){
|
||
parent.$.messager.alert('提示','删除成功','info',function(){
|
||
$('#'+selectid).remove();
|
||
});
|
||
}else{
|
||
parent.$.messager.alert('提示','删除失败','info');
|
||
}
|
||
});
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
|
||
}
|
||
var MpPics;
|
||
function showMPoint(){
|
||
var workshopid = $("#workshopid").combobox('getValue');
|
||
$.post(ext.contextPath + "/work/scadaPic/getMPointList.do", {pid:workshopid}, function(data) {
|
||
console.info(data)
|
||
clearItem("${Flag_MPoint}");
|
||
if (data.length>0) {
|
||
for(i=0 ;i<data.length;i++){
|
||
var item= data[i];
|
||
containerWidth = contentdiv.width();
|
||
containerHeight = contentdiv.height();
|
||
|
||
var left=containerWidth*item.posx/item.containerwidth;
|
||
var top=containerHeight*item.posy/item.containerheight;
|
||
var son="";
|
||
//console.log((item.mPoint.exp))
|
||
if(item.expressionflag!=null && item.expressionflag ){
|
||
var path;
|
||
if(item.mPoint==null || item.mPoint.exp ==null || item.mPoint.exp==""){
|
||
path="";
|
||
}else{
|
||
path= MpPics[parseInt(item.mPoint.exp)].path;
|
||
}
|
||
son= '<div class="easyui-draggable" style="width:40px;height:40px;position:absolute;top:'+top+'px;left:'+left+'px;" id="'+item.id+'" type="${Flag_MPoint}">'+
|
||
'<img src=../../'+path+' style="width:20px;height:20px;" ></img>'+
|
||
'</div>';
|
||
}else{
|
||
var value ="";
|
||
if(item.mPoint!=null){
|
||
value=item.mPoint.parmvalue
|
||
}
|
||
son= '<div class="easyui-draggable" style="background-color:blue;width:150px;height:40px;position:absolute;top:'+top+'px;left:'+left+'px;" id="'+item.id+'" type="${Flag_MPoint}">'+
|
||
'<table id="title" style="font-size:12px" >'+
|
||
'<tr align="center">'+
|
||
'<td ><span style="color:white;font-size:'+item.fsize+'">'+
|
||
item.txt+
|
||
'</span></td>'+
|
||
'</tr>'+
|
||
'<tr align="center">'+
|
||
'<td ><span style="color:white;font-size:'+item.fsize+'">'+
|
||
value+
|
||
'</span></td>'+
|
||
'</tr>'+
|
||
'</table>'+
|
||
'</div>';
|
||
}
|
||
|
||
|
||
//console.info(son)
|
||
contentdiv.append(son);
|
||
$('#'+item.id).bind('contextmenu',function(e){
|
||
selectid=this.id;
|
||
e.preventDefault();
|
||
$('#mPoint').menu('show', {
|
||
left: e.pageX,
|
||
top: e.pageY
|
||
});
|
||
});
|
||
$('#'+item.id).draggable()
|
||
}
|
||
|
||
}
|
||
},'json');
|
||
}
|
||
function mPointMenuHandler(item){
|
||
switch(item.name){
|
||
case'delete':
|
||
$.post(ext.contextPath + "/work/scadaPic/deleteMPoint.do", {id:selectid}, function(data) {
|
||
if(data==1){
|
||
parent.$.messager.alert('提示','删除成功','info',function(){
|
||
$('#'+selectid).remove();
|
||
});
|
||
}else{
|
||
parent.$.messager.alert('提示','删除失败','info');
|
||
}
|
||
});
|
||
break;
|
||
case'edit':
|
||
var dialog = parent.ext.modalDialog({
|
||
iframeId:'iframeadd',
|
||
title : '编辑测量点',
|
||
width:700,
|
||
height:550,
|
||
url : ext.contextPath + '/work/scadaPic/editMPoint.do?id='+selectid,
|
||
buttons : [ {
|
||
text : '保存',
|
||
handler : function() {
|
||
dialog.find('iframe').get(0).contentWindow.dosave(dialog);
|
||
}
|
||
} ],
|
||
onDestroy:function(){
|
||
showMPoint();
|
||
}
|
||
});
|
||
break;
|
||
case'help':
|
||
var dialog = parent.ext.modalDialog({
|
||
iframeId:'iframeadd',
|
||
title : '测量点信息',
|
||
width:700,
|
||
height:550,
|
||
url : ext.contextPath + '/work/scadaPic/showMPoint.do?id='+selectid,
|
||
buttons : [ {
|
||
text : '关闭',
|
||
handler : function() {
|
||
dialog.dialog('destroy');
|
||
}
|
||
} ]
|
||
});
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
|
||
}
|
||
function showEM(){
|
||
var workshopid = $("#workshopid").combobox('getValue');
|
||
$.post(ext.contextPath + "/work/scadaPic/getEMList.do", {pid:workshopid}, function(data) {
|
||
//console.info(data)
|
||
clearItem("${Flag_EM}");
|
||
if (data.length>0) {
|
||
for(i=0 ;i<data.length;i++){
|
||
var item= data[i];
|
||
containerWidth = contentdiv.width();
|
||
containerHeight = contentdiv.height();
|
||
|
||
var left=containerWidth*item.posx/item.containerwidth;
|
||
var top=containerHeight*item.posy/item.containerheight;
|
||
var w=containerWidth*item.width/item.containerwidth;
|
||
var h=containerHeight*item.height/item.containerheight;
|
||
var equipmentname="未查询到设备信息";
|
||
if(item.equipmentCard!=null){
|
||
equipmentname=item.equipmentCard.equipmentname;
|
||
}
|
||
var son= '<div class="easyui-draggable easyui-resizable" style="border:1px solid yellow;width:'+w+'px;height:'+h+'px;position:absolute;top:'+top+'px;left:'+left+'px;" id="'+item.id+'" type="${Flag_EM}">'+
|
||
'<table id="title" style="font-size:12px" >'+
|
||
'<tr align="center">'+
|
||
'<td ><span style="color:white;font-size:'+item.fsize+'">'+
|
||
equipmentname+
|
||
'</span></td>'+
|
||
'</tr>'+
|
||
'</table>'+
|
||
'</div>';
|
||
|
||
//console.info(son)
|
||
contentdiv.append(son);
|
||
|
||
$('#'+item.id).bind('contextmenu',function(e){
|
||
selectid=this.id;
|
||
e.preventDefault();
|
||
$('#mEM').menu('show', {
|
||
left: e.pageX,
|
||
top: e.pageY
|
||
});
|
||
});
|
||
$('#'+item.id).draggable()
|
||
$('#'+item.id).resizable()
|
||
}
|
||
|
||
}
|
||
},'json');
|
||
}
|
||
function mEMMenuHandler(item){
|
||
switch(item.name){
|
||
case'delete':
|
||
$.post(ext.contextPath + "/work/scadaPic/deleteEM.do", {id:selectid}, function(data) {
|
||
if(data==1){
|
||
parent.$.messager.alert('提示','删除成功','info',function(){
|
||
$('#'+selectid).remove();
|
||
});
|
||
}else{
|
||
parent.$.messager.alert('提示','删除失败','info');
|
||
}
|
||
});
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|