物联网平台 +Web 组态
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

/*注释
* 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){
}
};