You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1351 lines
34 KiB
1351 lines
34 KiB
/*注释
|
|
* nid=0 普通文本
|
|
* cid :
|
|
* 5 超链接
|
|
* 6 时间
|
|
* nid=1 动态数据 （绑定数值的）
|
|
* cid:
|
|
* 7 动态状态值
|
|
* 11 下发配置值
|
|
* nid=2 图片
|
|
* cid:
|
|
* 8 svg 格式，可缩放
|
|
* 9 svg 直线
|
|
* nid=3 富文本
|
|
* nid=4 视频
|
|
* nid=5 图表，折线图，曲线图...管道图
|
|
* cid:
|
|
* 1 折线图
|
|
* 2 柱形图
|
|
* 3 仪表盘
|
|
* 4 液位图
|
|
* nid=6 地图
|
|
* nid=7 临时组合框
|
|
* nid=8 状态
|
|
* nid=9 控制
|
|
*
|
|
* nid=10 管道图
|
|
* cid = 10
|
|
*
|
|
* nid=11 设备在离线
|
|
*
|
|
* */
|
|
var navPage = ".edit-container"; //画布
|
|
// 组态方法类
|
|
var cfg = {
|
|
zIndexT: 0 , //元素层级
|
|
current_edit_obj: '', // 当前操作对象
|
|
clone_obj: '',
|
|
init: function(){
|
|
this.elementDrag(".ele-node-info" , ".edit-container");
|
|
this.elementDragCopyInfo(".edit-container");
|
|
// 画布拖动初始化
|
|
$(".edit-container").draggable({
|
|
opacity:1,
|
|
scroll:true,
|
|
scrollSensitivity:0,
|
|
handle:"#canvas_droppable",
|
|
scrollSpeed:0,
|
|
addClasses:false
|
|
});
|
|
},
|
|
elementDrag: function(obj,selector){
|
|
// 拖拽效果
|
|
$(obj).draggable({
|
|
// stop: eleDragCopyStop,
|
|
//handles:" n, e, s, w, ne, se, sw, nw "
|
|
helper:"clone",
|
|
appendTo:"body",
|
|
helper:"clone",
|
|
scroll:false,
|
|
addClass:false,
|
|
revert: false,
|
|
cursor:"move",
|
|
zIndex:1000,
|
|
scope: selector // 编辑区域
|
|
});
|
|
},
|
|
getRotate: function(matrix){
|
|
//转换成角度
|
|
var aa=Math.round(180*Math.asin(matrix[0])/ Math.PI);
|
|
var bb=Math.round(180*Math.acos(matrix[1])/ Math.PI);
|
|
var cc=Math.round(180*Math.asin(matrix[2])/ Math.PI);
|
|
var dd=Math.round(180*Math.acos(matrix[3])/ Math.PI);
|
|
var deg=0;
|
|
if(aa==bb||-aa==bb){
|
|
deg=dd;
|
|
}else if(-aa+bb==180){
|
|
deg=180+cc;
|
|
}else if(aa+bb==180){
|
|
deg=360-cc||360-dd;
|
|
}
|
|
return deg>=360?0:deg;
|
|
|
|
},
|
|
elementDragCopyInfo :function(selector){
|
|
$(selector).droppable({
|
|
activeClass: "ui-state-default",
|
|
hoverClass: "ui-state-hover",
|
|
scroll:false,
|
|
cursor:"move",
|
|
scope: selector ,
|
|
containment:"body",
|
|
drop:function(event, ui)
|
|
{
|
|
//克隆并放置元素
|
|
// var nodeType = ui.helper.attr("nodeType");
|
|
var cl = ui.helper.find(".canvas").clone();//克隆元素
|
|
var nid = cl.attr("nid");//节点类型
|
|
var cid = cl.attr("cid") ; // 子类型
|
|
//定位
|
|
var x1 = $(selector).offset().top;
|
|
var x2 = ui.offset.top;
|
|
var x = x2 - x1;//上偏移
|
|
var y1 = $(selector).offset().left;
|
|
var y2 = ui.offset.left;
|
|
var y = y2 - y1;//左偏移
|
|
var w = "80px";
|
|
var h = "30px";
|
|
//配置元素默认属性
|
|
switch (nid) {
|
|
case "0"://普通文本
|
|
if( cid == 6){
|
|
w="180px;"
|
|
}
|
|
break;
|
|
case "1":// 数据文本
|
|
w = "60px";
|
|
h = "25px";
|
|
break;
|
|
case "2": //图片
|
|
w = "100px";
|
|
h = "100px";
|
|
break;
|
|
case "3"://富文本
|
|
w = "200px";
|
|
h = "200px";
|
|
break;
|
|
case "4"://视频
|
|
w = "300px";
|
|
h = "180px";
|
|
break;
|
|
case "5"://图表
|
|
w = "400px";
|
|
h = "200px";
|
|
break;
|
|
case "6"://地图
|
|
w = "320px";
|
|
h = "160px";
|
|
break;
|
|
case "9":
|
|
w = "70px";
|
|
h = "30px";
|
|
break ;
|
|
case "8":
|
|
w = "40px";
|
|
h = "40px";
|
|
break ;
|
|
case "10":
|
|
w = "300px";
|
|
h = "30px";
|
|
}
|
|
// 对于一些自定义大小，需要按照自定义大小进行设置
|
|
var w_val = cl.attr("w") ;
|
|
if( w_val != null && w_val != '' ){
|
|
w = cl.attr("w") ;
|
|
h = cl.attr("h") ;
|
|
}
|
|
//将元素放入编辑区 ,并进行初始化
|
|
var add = cl.appendTo($(this));
|
|
cfg.generateNewNode(add,{"width":w,
|
|
"height":h,
|
|
"top":x,
|
|
"left":y});
|
|
//拖出来后 初始化
|
|
var id = add.attr("id");
|
|
|
|
//添加元素后回调
|
|
cfg.current_edit_obj = add;
|
|
switch (nid) {
|
|
case "0":
|
|
if(cid == 6){
|
|
cl.find("span").html(timeStamp2String(new Date()) );
|
|
}
|
|
break ;
|
|
case "2":
|
|
break ;
|
|
case "3":
|
|
add.removeClass("high-txt");
|
|
break ;
|
|
case "4": //视频
|
|
var obj_id = "video_"+(cfg.zIndexT-1);
|
|
cl.find(".node_video").attr("id",obj_id);
|
|
break;
|
|
case "5": //图表
|
|
initTemplateCharts(add);
|
|
break;
|
|
case "6": //地图
|
|
initTemplateMap(id);
|
|
break;
|
|
case "8":
|
|
case "9":
|
|
initControllerPart(add);
|
|
break ;
|
|
case "10": //图表
|
|
initSensorPipelineChart(0);
|
|
break ;
|
|
case "11": // 设备在离线
|
|
break ;
|
|
}
|
|
}
|
|
})
|
|
},
|
|
generateNewNode:function(obj,style){
|
|
//新节点 添加属性 更新全局变量
|
|
obj.attr("id","node"+ this.zIndexT); //用于标识唯一
|
|
style['z-index'] = this.zIndexT;
|
|
obj.css(style);
|
|
this.zIndexT++; //层级+1
|
|
},
|
|
enterEditStatus:function(obj){
|
|
// 进入编辑状态
|
|
this.current_edit_obj = obj;
|
|
//元素是画布
|
|
if(obj.hasClass("edit-container")){
|
|
app.editType = -1;
|
|
} else {
|
|
//素材
|
|
this.activeCommonNode(obj);
|
|
this.updateEditDate(obj);
|
|
}
|
|
},
|
|
activeCommonNode:function(obj){
|
|
//关闭其他的编辑状态
|
|
this.removeNodeEvent($(".activeDrag"));
|
|
//这3个初始化方法要一起用例如没有旋转 拖动会有bug
|
|
obj.draggable({//拖动
|
|
stop: cfg.draggableStopUpdate,
|
|
});
|
|
if(!this.isGroup(obj)){//临时组合框没有旋转和缩放
|
|
obj.resizable({//拉伸
|
|
stop: cfg.resizableStopUpdate,
|
|
handles:" n, e, s, w, ne, se, sw, nw "
|
|
});
|
|
obj.transformable( {
|
|
rotatable:true,
|
|
skewable:false,
|
|
scalable:false,
|
|
});
|
|
}
|
|
$(obj).addClass("activeDrag");
|
|
},
|
|
draggableStopUpdate:function(e,ui){
|
|
//拖动停止 更新数据
|
|
var u=$(this).getTransform();
|
|
var o=$(this).tOffset();
|
|
var edit = $(".edit-container").offset(); //编辑区
|
|
$("#node_x").val(o.top-edit.left);
|
|
$("#node_y").val(o.left-edit.top);
|
|
},
|
|
resizableStopUpdate: function(e,ui){
|
|
//拉伸停止 更新数据,变动大小
|
|
//如果是图表外层div改变大小 图表也要跟着变
|
|
var cl = cfg.current_edit_obj ;
|
|
var nid = cl.attr("nid") ;
|
|
var cid = cl.attr("cid") ;
|
|
|
|
if(nid == 2 && cid == 8){
|
|
// svg图片
|
|
var x = 0 ; //(cl.width()/2- cl.attr("w").substring(0,2) /2 ) / (cl.width()/cl.attr("w").substring(0,2) ) ;
|
|
cl.find("svg").css("transform","scale("+ cl.width()/cl.attr("w").substring(0,2) +","+cl.width()/cl.attr("w").substring(0,2)+") translate("+x+"px,"+x+"px)");
|
|
cl.find("svg").css("position","relative");
|
|
cl.find("svg").css("transform-origin","0 0");
|
|
cl.find("svg").css("margin-left" ,"0");
|
|
|
|
}else if(cid == 9){
|
|
cl.find("svg").attr("width",cl.width() ) ;
|
|
cl.find("line").attr("x2" ,cl.width() );
|
|
}
|
|
changeChartSize(cfg.current_edit_obj);
|
|
},
|
|
removeNodeEvent: function(obj){
|
|
// 清除元素事件
|
|
if(obj.length>0){
|
|
obj.draggable('destroy');
|
|
if(!this.isGroup(obj)){//临时组合框没有旋转和缩放
|
|
obj.resizable('destroy');
|
|
obj.transformable('destroy');
|
|
}
|
|
$(".activeDrag").removeClass("activeDrag");
|
|
}
|
|
$(".textEditActive").removeClass("textEditActive");
|
|
},
|
|
getTranslate:function(node,sty){
|
|
// 获取缩放信息
|
|
var translates=document.defaultView.getComputedStyle(node,null).transform.substring(7);
|
|
var result = translates.match(/\(([^)]*)\)/);
|
|
var matrix=result?result[1].split(','):translates.split(',');
|
|
if(sty=="x" || sty==undefined){
|
|
return matrix.length>6?parseFloat(matrix[12]):parseFloat(matrix[4]);
|
|
}else if(sty=="y"){
|
|
return matrix.length>6?parseFloat(matrix[13]):parseFloat(matrix[5]);
|
|
}else if(sty=="z"){
|
|
return matrix.length>6?parseFloat(matrix[14]):0;
|
|
}else if(sty=="rotate"){
|
|
return matrix.length>6? this.getRotate([parseFloat(matrix[0]),parseFloat(matrix[1]),parseFloat(matrix[4]),parseFloat(matrix[5])]):this.getRotate(matrix);
|
|
}
|
|
},
|
|
isGroup($obj){ //是否是组合
|
|
if($obj.hasClass("tempGroup")){
|
|
return true;
|
|
}
|
|
return false;
|
|
},
|
|
inGroup($obj){ //是否在组合内
|
|
if($obj.parent().parent().hasClass("tempGroup")){
|
|
return true;
|
|
}
|
|
return false;
|
|
},
|
|
updateEditDate: function(obj){ // 编辑元素时，信息回显，更新元素的属性到操作栏上，判断素材类型
|
|
var nid = obj.attr("nid"); // 元素种类
|
|
app.cid = obj.attr("cid"); // 子类型
|
|
var id = obj.attr("id");
|
|
app.nid = nid ;
|
|
// 类型
|
|
app.editType = nid ;
|
|
switch (nid) {
|
|
case '0'://普通文本
|
|
var text = obj.find(".canvas_text").text();
|
|
app.edit_text = text.trim() ;
|
|
app.jty = parseInt(gdv( obj.attr("jty"),1 ) );
|
|
app.jurl = obj.attr("jurl");
|
|
app.visual_select_code = obj.attr("code");
|
|
break;
|
|
case '3'://富文本
|
|
cfg.initRichText(obj);
|
|
$(".text_toolbar_item").hide();
|
|
$(".text_toolbar_item[tag='"+id+"']").css("display","flex");
|
|
break;
|
|
case '5':
|
|
app.chartMax = obj.attr("max") ;
|
|
break ;
|
|
case '8':
|
|
case '9':
|
|
app.dattribute = gdv( eval('('+ obj.attr('cmd') +')') , [] );
|
|
break ;
|
|
case '10':
|
|
//获取流动速度
|
|
var myChart = getEchartObj();
|
|
option = myChart.getOption();
|
|
var speed = option.series[0].effect.constantSpeed;
|
|
app.rotate_speed = speed;
|
|
$("#rotate_speed").slider({
|
|
value:speed
|
|
});
|
|
break ;
|
|
default:
|
|
|
|
break;
|
|
}
|
|
//数据
|
|
var node_id = gdv(obj.attr("node_id"),"");
|
|
var sensor_id = gdv(obj.attr("sensor_id"),"");
|
|
var cid = gdv(obj.attr("cid"),"");
|
|
var video_id = gdv(obj.attr("video_id"),"") ;
|
|
if(node_id != ''){
|
|
app.node_id =parseInt( node_id);
|
|
}else{
|
|
app.node_id = '';
|
|
}
|
|
if( sensor_id != '' ){
|
|
app.sensor_id = parseInt( sensor_id) ;
|
|
}else{
|
|
app.sensor_id = '' ;
|
|
}
|
|
app.cid = parseInt(cid);
|
|
if(video_id != ''){
|
|
app.video_id =parseInt( video_id);
|
|
}else{
|
|
app.video_id = '' ;
|
|
}
|
|
|
|
if( nid == '1' || nid == '5' || nid == '6' || nid == '8' || nid == '9' || nid == '10' ){
|
|
if( nid != '6' ){
|
|
app.initSensorList( app.sensor_id );
|
|
}
|
|
}
|
|
|
|
// 文本样式初始化
|
|
app.fontSize = $(cfg.current_edit_obj).css("font-size");
|
|
app.lineHeight = '' ;
|
|
app.fontFamily = '' ;
|
|
app.textalign = $(cfg.current_edit_obj).css("text-align")=='start'?'':$(cfg.current_edit_obj).css("text-align") ;
|
|
|
|
//css
|
|
var top = $(cfg.current_edit_obj).css("top");
|
|
var left = $(cfg.current_edit_obj).css("left");
|
|
var width = $(cfg.current_edit_obj).css("width");
|
|
var height = $(cfg.current_edit_obj).css("height");
|
|
var bcolor = $(cfg.current_edit_obj).css("background-color");
|
|
var transform = this.getTranslate($(cfg.current_edit_obj)[0],"rotate");
|
|
//旋转角度
|
|
if(transform !=null && transform !='none'){
|
|
app.rotate = transform ;
|
|
} else {
|
|
app.rotate = 0 ;
|
|
}
|
|
app.rotateChange();
|
|
// x,y,w,h
|
|
app.canswidth= parseFloat(width);
|
|
app.cansheight = parseFloat(height) ;
|
|
app.canvensx = parseFloat(left) ;
|
|
app.canvensy = parseFloat(top) ;
|
|
|
|
if(bcolor != 'rgba(0, 0, 0, 0)'){
|
|
$("#backcolor").spectrum("set", bcolor);
|
|
}else{
|
|
$("#backcolor").spectrum("set", "transparent");
|
|
}
|
|
},
|
|
initRichText :function(obj){
|
|
var id = obj.attr("id");
|
|
var nid = obj.attr("nid");
|
|
//富文本 且 没有经过初始化
|
|
if(nid=="3" && $('.text_toolbar_item[tag="'+id+'"]').length==0){
|
|
$(".text_toolbar").append("<div class='text_toolbar_item' tag='"+id+"'></div>");
|
|
var E = window.wangEditor;
|
|
// 两个参数也可以传入 elem 对象，class 选择器
|
|
var editor = new E('.text_toolbar_item[tag="'+id+'"]', "#"+id) ;
|
|
// 配置菜单
|
|
editor.customConfig.menus = [
|
|
'head',
|
|
'bold',
|
|
'italic',
|
|
'underline',
|
|
'strikeThrough',
|
|
'link',
|
|
'foreColor',
|
|
'backColor',
|
|
'justify',
|
|
'list',
|
|
'undo',
|
|
'redo'
|
|
];
|
|
if( $("#"+id +" .w-e-text").length > 0 ){
|
|
var content = $("#"+id +" .w-e-text").html() ;
|
|
$("#"+id).empty();
|
|
$("#"+id).append(content) ;
|
|
}
|
|
editor.create();
|
|
editor.$textElem.attr('contenteditable', false);
|
|
//对z-index特殊处理
|
|
var $menu_arr = $('.text_toolbar_item[tag="'+id+'"]').children(".w-e-menu");
|
|
$menu_arr.eq(0).css("z-index","100007");
|
|
$menu_arr.eq(2).css("z-index","100006");
|
|
$menu_arr.eq(3).css("z-index","100005");
|
|
$menu_arr.eq(7).css("z-index","100004");
|
|
$menu_arr.eq(8).css("z-index","100003");
|
|
$menu_arr.eq(10).css("z-index","100002");
|
|
$menu_arr.eq(11).css("z-index","100001");
|
|
}
|
|
},
|
|
hideDraggableEvent: function(obj){
|
|
if(obj.length>0){
|
|
obj.draggable('disable');
|
|
}
|
|
},
|
|
//菜单拖拽事件 给新元素添加事件
|
|
activeMenuNode(obj){
|
|
obj.draggable({//拖动
|
|
//stop: initCharts,
|
|
//handles:" n, e, s, w, ne, se, sw, nw "
|
|
helper:"clone",//克隆
|
|
appendTo:"body",
|
|
helper:"clone",
|
|
scroll:false,
|
|
addClass:false,
|
|
revert: false,
|
|
cursor:"move",
|
|
zIndex:9999,
|
|
scope:".edit-container",
|
|
});
|
|
|
|
},
|
|
//删除组合
|
|
groupDel(){
|
|
if($(".edit-container").find(".tempGroup").length != 0){
|
|
var GroupTop = $(".tempGroup").css("top").replace(/[a-z]/g,"");
|
|
var GroupLeft = $(".tempGroup").css("left").replace(/[a-z]/g,"");
|
|
$(".tempGroup > .canvas-con > .resiz_canvas").unwrap().unwrap();
|
|
$(".Equal").removeClass("Equal");
|
|
$(navPage+"> .resiz_canvas").each(function()
|
|
{
|
|
var thisTop = $(this).css("top").replace(/[a-z]/g,"");
|
|
var thisLeft = $(this).css("left").replace(/[a-z]/g,"");
|
|
var top = Number(thisTop) + Number(GroupTop);
|
|
var left = Number(thisLeft) + Number(GroupLeft);
|
|
$(this).css({"top":top,"left":left});
|
|
|
|
$(this).removeClass("resiz_canvas");
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 颜色选择器 */
|
|
function initColorSelect(selectot, move,show){
|
|
$(selectot).spectrum({
|
|
allowEmpty:true,
|
|
color:"transparent",
|
|
showInput: true,
|
|
containerClassName: "full-spectrum",
|
|
showInitial: true,
|
|
showPalette: true,
|
|
showSelectionPalette: true,
|
|
showAlpha: true,
|
|
maxPaletteSize: 10,
|
|
preferredFormat: "hex",
|
|
cancelText: "关闭",
|
|
chooseText: "确定",
|
|
palette: [
|
|
["#000","#444","#666","#999","#ccc","#eee","#f3f3f3","#fff"],
|
|
["#f00","#f90","#ff0","#0f0","#0ff","#00f","#90f","#f0f"],
|
|
["#f4cccc","#fce5cd","#fff2cc","#d9ead3","#d0e0e3","#cfe2f3","#d9d2e9","#ead1dc"],
|
|
["#ea9999","#f9cb9c","#ffe599","#b6d7a8","#a2c4c9","#9fc5e8","#b4a7d6","#d5a6bd"],
|
|
["#e06666","#f6b26b","#ffd966","#93c47d","#76a5af","#6fa8dc","#8e7cc3","#c27ba0"],
|
|
["#c00","#e69138","#f1c232","#6aa84f","#45818e","#3d85c6","#674ea7","#a64d79"],
|
|
["#900","#b45f06","#bf9000","#38761d","#134f5c","#0b5394","#351c75","#741b47"],
|
|
["#600","#783f04","#7f6000","#274e13","#0c343d","#073763","#20124d","#4c1130"]
|
|
],
|
|
move: function (color) {
|
|
if( move !=null){
|
|
move(color);
|
|
}
|
|
},
|
|
show: function (color) {
|
|
if(show !=null){
|
|
show(color);
|
|
}
|
|
},
|
|
beforeShow: function () {
|
|
|
|
},
|
|
});
|
|
};
|
|
|
|
function initImgUpload(id){
|
|
//上传模板
|
|
UploadInit( baseurl + '/service/upload.json' , {category:"img"} ,function(file,data){
|
|
if(data.status==2){
|
|
var url = "/res"+data.data;
|
|
saveImg(url);
|
|
setTimeout(function(){
|
|
cfg.activeMenuNode($("#upload_img_"+ app.uploadImgCount));
|
|
}, 1000);
|
|
}
|
|
}, id ,id,"110px", "35px") ;
|
|
}
|
|
|
|
/**
|
|
* 上传背景图
|
|
* @param url
|
|
* @returns
|
|
*/
|
|
function initBgImgUpload(id){
|
|
//上传模板
|
|
UploadInit( baseurl + '/service/upload.json' , {category:"img"} ,function(file,data){
|
|
if(data.status==2){
|
|
var url = "/res"+data.data;
|
|
// 上传成功
|
|
// $(".edit-container").attr("bgurl",url) ;
|
|
// $(".edit-container").parent().css("background","url("+ url +") no-repeat ") ;
|
|
// $(".edit-container").parent().css("background-position","center top") ;
|
|
$(".edit-container").css("background-image","url("+ url +")") ;
|
|
$(".edit-container").css("background-position","0% 0%") ;
|
|
$(".edit-container").css("background-size","100% 100%") ;
|
|
$(".edit-container").css("background-repeat","initial") ;
|
|
$(".edit-container").css("background-attachment","initial") ;
|
|
$(".edit-container").css("background-origin","initial") ;
|
|
}
|
|
}, id ,id,"110px", "35px") ;
|
|
}
|
|
|
|
|
|
function saveImg(url){
|
|
var data = {
|
|
name:'上传图片',
|
|
dis_img:url,
|
|
moudle_type:'1'
|
|
}
|
|
commonAjax("POST",baseurl+"/service/moudle/visual", data,function(e){
|
|
if(e.status == 2){
|
|
app.uploadImgCount = e.data.id ;
|
|
app.addUploadImg(url,e.data.id);
|
|
|
|
app.$message({
|
|
message: '成功',
|
|
type:'success'
|
|
});
|
|
}else{
|
|
app.$message.error(e.statusMsg);
|
|
}
|
|
});
|
|
}
|
|
/**
|
|
* @Func 文件上傳功能，目前只支持單個
|
|
* @param imgUrl domain
|
|
* @param user_id 用戶id
|
|
* @param func 成功之後的回調
|
|
* @Param id 文件选择id
|
|
*/
|
|
function UploadInit(imgFindUrl, userInfo ,func,id,domId,thumbnailWidth, thumbnailHeight,accept,acceptconfig){
|
|
var $ = jQuery,
|
|
state = 'pending',
|
|
uploader;
|
|
// 增加类型修改，可以传入类型
|
|
if(accept == undefined){
|
|
acceptconfig = "" ;
|
|
}else{
|
|
acceptconfig = getVal( acceptconfig, { // 默认值兼容之前
|
|
title: 'Images',
|
|
extensions: 'gif,jpg,jpeg,bmp,png,pdf',
|
|
mimeTypes: 'image/jpg,image/jpeg,image/png'
|
|
});
|
|
}
|
|
|
|
uploader = WebUploader.create({
|
|
// 自动上传
|
|
auto: true,
|
|
// 不压缩image
|
|
resize: false,
|
|
//不压缩图片
|
|
compress:false,
|
|
// swf文件路径
|
|
swf: baseurl + '/lib/webUploader/Uploader.swf',
|
|
// 文件接收服务端。
|
|
server: imgFindUrl,
|
|
// 选择文件的按钮。可选。
|
|
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
|
|
pick: '#'+id ,
|
|
duplicate: true ,
|
|
fileSingleSizeLimit: 5*1024*1024,
|
|
// 只允许选择文件，可选。
|
|
accept:acceptconfig
|
|
});
|
|
|
|
uploader.on("error",function (type){
|
|
if (type=="Q_TYPE_DENIED"){
|
|
if(typeof(layer)!="undefined"){
|
|
showTip("请上传正确的文件格式");
|
|
}else{
|
|
alert("请上传正确的文件格式");
|
|
}
|
|
}else if(type=="F_EXCEED_SIZE"){
|
|
if(typeof(layer)!="undefined"){
|
|
showTip("文件大小不能超过5M");
|
|
}else{
|
|
alert("文件大小不能超过5M");
|
|
}
|
|
}
|
|
});
|
|
// 当有文件添加进来的时候
|
|
uploader.on('fileQueued', function(file) {
|
|
$("#"+domId).css("width","0%");
|
|
$("#"+domId).attr("ids","");
|
|
$("#"+domId).css("display","inherit");
|
|
uploader.options.formData= gdv(userInfo , {}) ;
|
|
uploader.makeThumb( file, function( error, src ) {
|
|
$("#back_"+domId).css("background","url("+src+")");
|
|
|
|
}, thumbnailWidth, thumbnailHeight );
|
|
});
|
|
// 文件上传过程中创建进度条实时显示。
|
|
uploader.on('uploadProgress', function(file, percentage) {
|
|
$("#all_"+domId).text(parseInt(percentage*100)+"%");
|
|
$("#"+domId).css("width",parseInt(100-percentage*100)+"%");
|
|
});
|
|
uploader.on('uploadSuccess', func);
|
|
uploader.on('uploadError', function(file) {
|
|
console.log("文件上传出错");
|
|
});
|
|
uploader.on('uploadComplete', function(file) {
|
|
});
|
|
uploader.on('all', function(type) {
|
|
});
|
|
};
|
|
//------------------------------------------------------------------------------------------
|
|
// 组件模块化(初始化图片)
|
|
function initControllerPart(obj){
|
|
var cmd = gdv( eval('('+ obj.attr('cmd') +')') , [] );
|
|
var cmdValue = gdv( obj.attr('val') , 0 ) ;
|
|
for( var i=0; i < cmd.length ; i++ ){
|
|
if( cmdValue >= cmd[i].min && ( (cmd[i].min == cmd[i].max && cmdValue == cmd[i].max ) || cmdValue < cmd[i].max )){
|
|
obj.find("img").attr("src" , cmd[i].src );
|
|
break ;
|
|
}
|
|
}
|
|
}
|
|
|
|
//初始模板图表
|
|
function initTemplateCharts(obj){
|
|
//如果是液位图则不使用默认折线图
|
|
var cid = obj.attr("cid");
|
|
cfg.current_edit_obj = obj;
|
|
|
|
// 液位图
|
|
if(cid==4){
|
|
initSensorLiquidChart();
|
|
return;
|
|
}
|
|
//默认折线图
|
|
var chart = obj.find(".chartStyle");
|
|
chart.attr("id",obj.attr("id")+"_chart")
|
|
// var myChart = echarts.init(chart[0], null, {renderer: 'svg'}); // svg方式
|
|
var myChart = echarts.init(chart[0]);
|
|
option = {
|
|
xAxis: {
|
|
type: 'category',
|
|
data: ['2020/06/01', '2020/06/02','2020/06/03','2020/06/04','2020/06/05']
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
grid: {
|
|
left: '10%',
|
|
right: '2%',
|
|
bottom: '10%',
|
|
top: '15%'
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: [{
|
|
data: [820, 932, 901, 934, 1290],
|
|
type: 'line'
|
|
}]
|
|
};
|
|
myChart.setOption(option,true);
|
|
chart.attr("option",JSON.stringify(option));
|
|
app.chartMap[obj.attr("id")] = myChart;
|
|
}
|
|
|
|
//初始化传感器折线图
|
|
function initSensorLineChart(){
|
|
var current_edit_obj = cfg.current_edit_obj;
|
|
var chart = getEchartObj();
|
|
var x_data = ['2020/06/01', '2020/06/02','2020/06/03','2020/06/04','2020/06/05'];
|
|
var y_data = [820, 932, 901, 934, 1290];
|
|
option = {
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: x_data
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
grid: {
|
|
left: '10%',
|
|
right: '2%',
|
|
bottom: '10%',
|
|
top: '15%'
|
|
},
|
|
series: [{
|
|
data: y_data,
|
|
type: 'line'
|
|
}]
|
|
};
|
|
setChartOption(chart,option);
|
|
|
|
}
|
|
//初始化传感器柱形图
|
|
function initSensorBarChart(){
|
|
var current_edit_obj = cfg.current_edit_obj;
|
|
var chart = getEchartObj();
|
|
var x_data = ['2020/06/01', '2020/06/02','2020/06/03','2020/06/04','2020/06/05'];
|
|
var y_data = [820, 932, 901, 934, 1290];
|
|
option = {
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: true ,
|
|
data:x_data
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
grid: {
|
|
left: '10%',
|
|
right: '2%',
|
|
bottom: '10%',
|
|
top: '15%'
|
|
},
|
|
series: [{
|
|
data: y_data,
|
|
type: 'bar',
|
|
barWidth: 30
|
|
}]
|
|
};
|
|
setChartOption(chart,option);
|
|
}
|
|
//初始化传感器仪表盘
|
|
function initSensorDashChart(){
|
|
var current_edit_obj = cfg.current_edit_obj;
|
|
var chart = getEchartObj();
|
|
option = {
|
|
series:[{
|
|
name: "name",
|
|
type: 'gauge',
|
|
radius : "98%",
|
|
axisLine : {
|
|
lineStyle : {
|
|
width : 20
|
|
}
|
|
},
|
|
splitLine : {
|
|
length : 20
|
|
},
|
|
detail: {formatter: '{value}'},
|
|
data: [{ value: 20, name: '传感器'}]
|
|
}
|
|
]
|
|
} ;
|
|
setChartOption(chart,option) ;
|
|
}
|
|
//初始化传感器液位图
|
|
function initSensorLiquidChart(){
|
|
var current_edit_obj = cfg.current_edit_obj;
|
|
var chart = getEchartObj();
|
|
var xn = 500;
|
|
var max = 1000;
|
|
var bai = 0.5;
|
|
var siz = 20;
|
|
option = {
|
|
series: [{
|
|
type:'liquidFill',
|
|
name:'设备',
|
|
data:[{
|
|
name:'传感器',
|
|
value:bai
|
|
}],
|
|
direction:'right',//波浪方向或者静止
|
|
shape:'container',
|
|
//color:['rgba(43, 110, 204, 0.7)'],//水球颜色
|
|
center:['50%', '50%'], //水球位置
|
|
amplitude:8,//波浪幅度
|
|
outline://外边
|
|
{
|
|
show:false
|
|
},
|
|
label:{
|
|
formatter:function(param){
|
|
return param.seriesName + '\n'
|
|
+ param.name + '\n'
|
|
+ max +'单位/'+ xn +'单位('+param.value*100+'%)';
|
|
},
|
|
fontSize:siz,
|
|
},
|
|
backgroundStyle://内图背景色边
|
|
{
|
|
color:'rgba(0, 0, 0, 0)',
|
|
},
|
|
itemStyle: {
|
|
opacity: 0.95,
|
|
shadowBlur: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0)'
|
|
},
|
|
}]
|
|
};
|
|
//使用刚指定的配置项和数据显示图表。
|
|
setChartOption(chart,option) ;
|
|
setInterval(function()
|
|
{
|
|
xn = (Math.random().toFixed(1))*1000;
|
|
bai = xn/max;
|
|
chart.setOption(
|
|
{
|
|
series:[
|
|
{
|
|
data:[{name:'传感器',value:bai}]
|
|
}]
|
|
});
|
|
},2000)
|
|
}
|
|
|
|
//管道图
|
|
function initSensorPipelineChart(type){
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var current_edit_obj = cfg.current_edit_obj;
|
|
var myChart = getEchartObj();
|
|
if(type==null || type=='0'){ //初始化
|
|
app.speed_dir = 'r'; //默认向右
|
|
//重新计算流动所需要的数据
|
|
var result = calcPipelineParam();
|
|
var th = result.th;
|
|
var tz = result.tz;
|
|
var tw = result.tw;
|
|
var fd = result.fd;
|
|
var xw = result.xw;
|
|
var co = result.co;
|
|
option = {
|
|
grid:{
|
|
top:0,
|
|
left:0,
|
|
right:0,
|
|
bottom:'50%'
|
|
},
|
|
xAxis:{
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
show: false
|
|
},
|
|
max:xw,
|
|
min: 0
|
|
},
|
|
yAxis:{
|
|
silent: true,
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
show: false
|
|
},
|
|
max:xw,
|
|
min: 0
|
|
},
|
|
series:[{
|
|
coordinateSystem: 'cartesian2d',
|
|
type: 'lines',
|
|
polyline: true,
|
|
zlevel: 1,
|
|
effect:
|
|
{
|
|
show: true,
|
|
constantSpeed:60,
|
|
delay:0,
|
|
symbolSize: [tz,tw],
|
|
symbol: 'image://'+baseurl+'/page/visual/image/gd2.png',
|
|
trailLength:0.5,
|
|
loop: true,
|
|
},
|
|
lineStyle:{
|
|
normal: {
|
|
width:th,
|
|
color:{
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [{
|
|
offset: 0,
|
|
color: '#6d7b92' // 0% 处的颜色
|
|
}, {
|
|
offset: 0.5,
|
|
color: '#f4f8fa' // 100% 处的颜色
|
|
}, {
|
|
offset: 1,
|
|
color: '#6d7b92' // 100% 处的颜色
|
|
}],
|
|
globalCoord: false // 缺省为 false
|
|
},
|
|
opacity: 1,
|
|
curveness: 0,
|
|
type: 'solid',
|
|
}
|
|
},
|
|
data:co
|
|
}]
|
|
};
|
|
//使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
setChartOption(myChart,option) ;
|
|
|
|
} else if(type=="1"){ //重置图表大小和液体个数
|
|
var w = current_edit_obj.width();
|
|
var h = current_edit_obj.height();
|
|
if(h >= 1 && w >= 1){
|
|
//重新计算流动所需要的数据
|
|
var result = calcPipelineParam();
|
|
var th = result.th;
|
|
var tz = result.tz;
|
|
var tw = result.tw;
|
|
var fd = result.fd;
|
|
var xw = result.xw;;
|
|
var co = result.co;
|
|
var reset_option = {
|
|
xAxis:{
|
|
max:xw,
|
|
min: 0
|
|
},
|
|
yAxis:{
|
|
max:xw,
|
|
min: 0
|
|
},
|
|
series:[{
|
|
effect:{
|
|
symbolSize: [tz,tw]
|
|
},
|
|
lineStyle:{
|
|
normal:{
|
|
width: th
|
|
}
|
|
},
|
|
data:co
|
|
}]
|
|
};
|
|
myChart.setOption(reset_option,false);
|
|
myChart.resize();
|
|
|
|
option = mergePipilineChartOpetion(reset_option);
|
|
option.series.data = co;
|
|
|
|
option = myChart.getOption();
|
|
saveChartOption(option);
|
|
}
|
|
}
|
|
}
|
|
|
|
//合并管道图参数
|
|
function mergePipilineChartOpetion(new_option){
|
|
var current_edit_obj = cfg.current_edit_obj;
|
|
option = JSON.parse(current_edit_obj.children(".chartStyle").attr("option"));
|
|
$.extend(option, new_option);
|
|
option.coordinateSystem = 'cartesian2d';
|
|
option.type = 'lines';
|
|
option.polyline = true;
|
|
option.zlevel = 1;
|
|
return option;
|
|
}
|
|
//修改管道图速度和方向
|
|
function resetPipelineChartSpeedAndDir(speed,dir){
|
|
if(speed==null){
|
|
speed = app.rotate_speed
|
|
}
|
|
if(speed == 0){
|
|
speed = 0 ;
|
|
}
|
|
if(dir==null){
|
|
dir = app.speed_dir
|
|
}
|
|
var current_edit_obj = cfg.current_edit_obj;
|
|
var myChart = getEchartObj();
|
|
//重新计算流动所需要的数据
|
|
var result = calcPipelineParam(dir);
|
|
var th = result.th;
|
|
var tz = result.tz;
|
|
var tw = result.tw;
|
|
var fd = result.fd;
|
|
var xw = result.xw;;
|
|
var co = result.co;
|
|
//
|
|
var reset_option = {
|
|
series:[{
|
|
effect:{
|
|
constantSpeed:speed
|
|
},
|
|
data:co
|
|
}]
|
|
};
|
|
myChart.setOption(reset_option,false);
|
|
|
|
option = mergePipilineChartOpetion(reset_option);
|
|
option.series.data = co;
|
|
|
|
option = myChart.getOption();
|
|
saveChartOption(option);
|
|
}
|
|
|
|
/**
|
|
* 计算管道内液体流动的方向
|
|
* @param dir
|
|
* @returns
|
|
*/
|
|
function calcPipelineParam(dir){
|
|
var current_edit_obj = cfg.current_edit_obj;
|
|
var speed_dir = app.speed_dir;//流动方向
|
|
if(dir==null){
|
|
dir = app.speed_dir ;
|
|
}
|
|
var w = parseFloat(current_edit_obj[0].style.width);
|
|
var h = parseFloat(current_edit_obj[0].style.height);
|
|
var th = parseInt(h*0.8);
|
|
var tz = parseInt(h*0.6);
|
|
var tw = parseInt(tz * 3.5);
|
|
var fd = parseInt(w/(tw*1.4));
|
|
var xw;
|
|
var co = [];
|
|
if(fd == 0){
|
|
tw = parseInt(w*0.8);
|
|
tz = parseInt(tw/3.5);
|
|
if(dir=='r'){
|
|
co.push({coords:[[0, 0],[w, 0]]});
|
|
} else {
|
|
co.push({coords:[[w, 0],[0, 0]]});
|
|
}
|
|
xw = w;
|
|
}else{
|
|
var num = parseInt(w/fd);
|
|
xw = num*fd;
|
|
for(var a=0;a<fd;a++)
|
|
{
|
|
if(dir=='r'){
|
|
co.push({coords:[[(num*a)-1, 0],[num*(a+1), 0]]});
|
|
} else {
|
|
co.push({coords:[[num*(a+1), 0],[(num*a)-1, 0]]});
|
|
}
|
|
}
|
|
}
|
|
var result = {
|
|
tz:tz,
|
|
tw:tw,
|
|
xw:xw,
|
|
co:co,
|
|
th:th,
|
|
fd:fd
|
|
};
|
|
return result;
|
|
}
|
|
|
|
function setChartOption(chart,option){
|
|
chart.setOption(option,true);
|
|
saveChartOption(option);
|
|
}
|
|
function saveChartOption(option){
|
|
cfg.current_edit_obj.children(".chartStyle").attr("option",JSON.stringify(option));
|
|
}
|
|
//获取echarts对象
|
|
function getEchartObj(){
|
|
var current_edit_obj = cfg.current_edit_obj;
|
|
var chart = app.chartMap[current_edit_obj.attr("id")];
|
|
if(chart == null){
|
|
var $chartHtml = current_edit_obj.children(".chartStyle");
|
|
$chartHtml.html("");
|
|
chart = echarts.init($chartHtml[0]);
|
|
// chart = echarts.init($chartHtml[0], null, {renderer: 'svg'});
|
|
app.chartMap[current_edit_obj.attr("id")] = chart;
|
|
}
|
|
return chart
|
|
}
|
|
//初始化模板地图
|
|
function initTemplateMap(id){
|
|
// 这边退出
|
|
return ;
|
|
}
|
|
/**
|
|
* 选择框变动的时候，请求数据
|
|
* @param id
|
|
* @returns
|
|
*/
|
|
function resetNodeData(id,type){
|
|
var current_edit_obj = cfg.current_edit_obj;
|
|
var nid = current_edit_obj.attr("nid");
|
|
var cid = current_edit_obj.attr("cid");
|
|
var node_id = current_edit_obj.attr("id");
|
|
if(nid=="1" ){
|
|
// 动态数据类
|
|
} else if(nid=="4"){ //视频
|
|
getAjax(baseurl+'/service/video?id='+id,function(e){
|
|
if(e.status==2){
|
|
var data=e.data;
|
|
current_edit_obj.find("source").attr("src",data.rtmp_url_common);
|
|
}
|
|
});
|
|
} else if(nid=="5"){
|
|
if(cid == "1"){ //折线图
|
|
initSensorLineChart();
|
|
} else if(cid == "2"){ //柱形图
|
|
initSensorBarChart();
|
|
} else if(cid == "3"){ //仪表盘
|
|
initSensorDashChart();
|
|
} else if(cid == "4"){ //液位图
|
|
initSensorLiquidChart();
|
|
}
|
|
} else if(nid=="6"){ //地图
|
|
return ;
|
|
}
|
|
}
|
|
|
|
function initVideo(id){
|
|
var player = new EZUIPlayer(id);
|
|
player.on('error', function(){
|
|
console.log('error');
|
|
});
|
|
player.on('play', function(){
|
|
console.log('play');
|
|
});
|
|
player.on('pause', function(){
|
|
console.log('pause');
|
|
});
|
|
}
|
|
|
|
//如果是图表外层div改变大小 图表也要跟着变
|
|
function changeChartSize(obj){
|
|
var nid = obj.attr("nid");
|
|
//var current_edit_obj = cfg.current_edit_obj;
|
|
if(nid == "5"){
|
|
var myChart = getEchartObj();
|
|
myChart.resize();
|
|
} else if(nid == "10"){
|
|
// 重新初始化 管道图
|
|
initSensorPipelineChart(1);
|
|
}
|
|
}
|
|
//第一次进入的时候重新初始化chart对象 取标签中的option属性重新初始化
|
|
function reinitChartObj(){
|
|
var chartMap = app.chartMap;
|
|
$(".chartStyle").each(function(){
|
|
var id = $(this).parent().attr("id");
|
|
if(id!=null){
|
|
var json = $(this).attr("option");
|
|
var myChart = echarts.init($(this)[0]);
|
|
myChart.setOption(JSON.parse(json),true);
|
|
app.chartMap[id] = myChart;
|
|
}
|
|
})
|
|
}
|
|
|
|
// 形成xy线
|
|
//function initLine(){
|
|
// debugger
|
|
// var ox = document.createElement('div');
|
|
// var oy = document.createElement('div');
|
|
// ox.style.width = '100%';
|
|
// ox.style.height = '1px';
|
|
// ox.style.backgroundColor = '#ddd';
|
|
// ox.style.position = 'fixed';
|
|
// ox.style.left = 0;
|
|
// $(navPage).append(ox);
|
|
// oy.style.height = '100%';
|
|
// oy.style.width = '1px';
|
|
// oy.style.backgroundColor = '#ddd';
|
|
// oy.style.position = 'fixed';
|
|
// oy.style.top = 0;
|
|
// $(navPage).append(oy);
|
|
// $(navPage).mousemove(function(e){
|
|
// var e = e || event;
|
|
// var x = e.pageX;
|
|
// var y = e.pageY;
|
|
// ox.style.top = y + 'px';
|
|
// oy.style.left = x + 'px';
|
|
// }) ;
|
|
//}
|
|
|
|
|
|
/**
|
|
* 获取默认值
|
|
* @param value
|
|
* @param default_val
|
|
* @returns
|
|
*/
|
|
function gdv(value,default_val){
|
|
if(value!=undefined && value+''!="" && value!='undefined'){
|
|
return value ;
|
|
}else{
|
|
if(default_val != undefined)
|
|
return default_val ;
|
|
return "";
|
|
}
|
|
};
|
|
|
|
/**
|
|
* 返回值判断
|
|
*/
|
|
var isOk= isOK ;
|
|
function isOK(e){
|
|
if(e.status == 2 ){
|
|
return true ;
|
|
}else{
|
|
return false ;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* ajax请求
|
|
* @param url
|
|
* @param sucessCallBack
|
|
* @param errorCallBack
|
|
* @returns
|
|
*/
|
|
function getAjax(url, sucessCallBack, errorCallBack) {
|
|
if(typeof(ucode)=="undefined"){
|
|
ucode='';
|
|
}
|
|
$.ajax({
|
|
type : "GET",
|
|
url : url,
|
|
contentType : "application/json",
|
|
dataType : "json",
|
|
async : true,
|
|
headers : {
|
|
'USER-KEY' :ucode
|
|
},
|
|
success : function(data){
|
|
sucessCallBack(data);
|
|
},
|
|
error : errorCallBack
|
|
})
|
|
};
|
|
|
|
var doAjaxPostData = commonAjax;
|
|
function commonAjax(method,url, data,sucessCallBack, errorCallBack) {
|
|
var config = {
|
|
type : method ,
|
|
url : url,
|
|
contentType : "application/json",
|
|
dataType : "json",
|
|
async : true,
|
|
success : function(data){
|
|
if(data.status == 20000){
|
|
return;
|
|
}else{
|
|
sucessCallBack(data);
|
|
}
|
|
},
|
|
error : errorCallBack
|
|
};
|
|
if(typeof(ucode) != "undefined"){
|
|
config.headers={ 'USER-KEY' :ucode };
|
|
}
|
|
if(method.toUpperCase() != 'GET' && method.toUpperCase() != 'DELETE' ){
|
|
config.data = JSON.stringify(data);
|
|
}
|
|
$.ajax(config)
|
|
};
|
|
|
|
function tip(content,time,func){
|
|
if(content == undefined){
|
|
content = "error";
|
|
}
|
|
try{
|
|
if( time==null || time == '' )
|
|
time = 1200 ;
|
|
if( func==null )
|
|
layer.msg(content,{time:time});
|
|
else{
|
|
layer.msg(content,{time:time},function(){
|
|
func();
|
|
});
|
|
}
|
|
}catch(e){
|
|
}
|
|
};
|