var DashboardICT = function () {
var chartObjs;
var plotsSelected;
var plotControlCallbacks = {};
var plotControlHtmlFrags = {};
var wall;
var addDroppableItem = function () {
$(".plotsWrapper").droppable({
accept: ".draggableItems",
drop: function (event, ui) {
//var dropLocation = $( ".plotsWrapper" );
var plotTypeId = $(ui.draggable).attr("id");
if ($("#" + chartObjs[plotTypeId].placeholderId).length > 0) {
alert("Plot already exits!");
return;
}
addDraggablePortlet(plotTypeId);
}
});
}
var addDraggablePortlet = function (plotTypeId) {
var portletId = chartObjs[plotTypeId].typeId;
var portletLabel = chartObjs[plotTypeId].plotLabel;
var placeholderId = chartObjs[plotTypeId].placeholderId;
var plotCallback = eval(chartObjs[plotTypeId].plotCallbackName);
var plotSize = "size11";
if (chartObjs[plotTypeId].plotSize) {
plotSize = chartObjs[plotTypeId].plotSize;
}
var faceboxDivIndex = $("a[rel=facebox]").length + 1;
var portletHtml = '
' +
'
' + portletLabel + '
' +
'
' +
'
' +
'' +
'' +
'
';
if (chartObjs[plotTypeId].plotControlCallback) {
portletHtml = '' +
'
' + portletLabel + '
' +
'
' +
plotControlHtmlFrags[plotTypeId] +
'
' +
'' +
'' +
'
';
}
//插入图例
wall.prepend(portletHtml);
wall.refresh($(".plotsWrapper").width(), $(".plotsWrapper").height());
//添加图例控制回调
if (chartObjs[plotTypeId].plotControlCallback) {
plotControlCallbacks[plotTypeId](plotCallback, placeholderId);
}
plotCallback(placeholderId);
var args = [placeholderId];
$.facebox.flotRedrawCallbackObjs[placeholderId] = {
callback: plotCallback,
arguments: args
}
$.facebox.settings.closeImage = '/web/newict/framework/thirdparty/facebox/closelabel.png';
$.facebox.settings.loadingImage = '/web/newict/framework/thirdparty/facebox/loading.gif';
//$('a[rel*=facebox]').facebox();
//addDroppableItem();
//调整放大后的宽度
var portlet = $("#" + portletId + ".portlet");
/*if($(portlet).parent().hasClass("col-md-6")){
$("a > div", portlet).addClass("flot-placeholder-wrapper-portlet-wide");
}else{
$("a > div", portlet).removeClass("flot-placeholder-wrapper-portlet-wide");
}*/
if (plotSize == "size21") {
$("div[flot_id=" + placeholderId + "]").addClass("flot-placeholder-wrapper-portlet-wide");
} else {
$("div[flot_id=" + placeholderId + "]").removeClass("flot-placeholder-wrapper-portlet-wide");
}
}
return {
init: function () {
$.ajax({
async: false,
"type": "GET",
url: "/web/newict/framework/thirdparty/dashboard/DashboardConfig.json",
dataType: "json",
"success": function (res, textStatus, jqXHR) {
var plotItemsSelectionDiv = $(".plotItemsSelectionWrapper");
//初始化左边的图列类型列表
chartObjs = res.chartTypes;
var chartSelectHtml = "";
for (var chartObj in chartObjs) {
chartSelectHtml =
'' +
'
![](' + chartObjs[chartObj].imageURL + ')
' +
'
';
$(plotItemsSelectionDiv).append(chartSelectHtml);
}
//初始化已选图例
plotsSelected = res.initPlots;
},
"error": function () {
alert("Config file load error!");
}
});
//组件放大显示插件
$.facebox.settings.closeImage = '../facebox/closelabel.png';
$.facebox.settings.loadingImage = '../facebox/loading.gif';
//$('a[rel*=facebox]').facebox();
//Portlet
$(".draggableItems").draggable({
//containment:"body",
revert: false,
appendTo: "div.plotsWrapper",
scroll: false,
zIndex: 9999,
helper: "clone",
opacity: 0.75
});
$("#deleteIcon").droppable({
accept: ".portlet",
drop: function () {
if ($("#deleteIcon .top").hasClass("deleteIconHidden")) {
//$( "#droppableItem" ).removeClass("droppedOver");
var portletRemoveId = $(".ui-sortable-helper").attr("id");
if (portletRemoveId != "droppable") {
$("#" + portletRemoveId).remove();
}
}
},
tolerance: "touch",
over: function (event, ui) {
//$( "#droppableItem" ).addClass("droppedOver");
}
});
addDroppableItem();
$(".sidebar-toggler").click(function () {
$("#cf5 img.top").toggleClass("scale");
$("#cf5 img.bottom").toggleClass("rotate");
$(".plotsWrapper").toggleClass("dashboardExpand", 500, "linear");
$(".plotItemsSelectionWrapper").toggleClass("sideBarClose", 500, "linear");
setTimeout(function () {
wall.refresh($(".plotsWrapper").width(), $(".plotsWrapper").height());
setTimeout(function () {
var charts = $.facebox.charts;
for (var chart in charts) {
charts[chart].resize();
}
}, 700);
}, 700);
});
$('.plotItemsSelectionWrapper').slimScroll({
position: 'right',
width: '177px',
height: '610px',
color: 'rgb(100, 150, 240)',
railColor: '#fff',
railOpacity: 0.3
});
$('.slimScrollDiv').css({
'float': 'left',
'margin-right': '-100%',
'margin-top': '10px'
});
$("#deleteIcon").click(function () {
if ($("#deleteIcon .bottom").hasClass("deleteIconHidden")) {
$("#deleteIcon .top").addClass("deleteIconHidden", 500);
$("#deleteIcon .bottom").removeClass("deleteIconHidden", 500);
//添加删除小图标
$(".removeflot").addClass("removeIcon");
$(".removeflot.removeIcon").click(function () {
var placeholderId = $(".flot-placeholder", $(this).parent()).attr("id");
if ($.facebox.intervals[placeholderId]) {
clearInterval($.facebox.intervals[placeholderId]);
}
$(this).parent().remove();
});
} else {
$("#deleteIcon .top").removeClass("deleteIconHidden", 500);
$("#deleteIcon .bottom").addClass("deleteIconHidden", 500);
//去掉删除小图标
$(".removeflot.removeIcon").removeClass("removeIcon");
}
});
//自由拖拽
wall = new freewall("#freeDraggable");
wall.reset({
draggable: true,
selector: '.portlet',
animate: true,
/*cellW: function(width) {
var cellWidth = width / 9;
return cellWidth + 10;
},*/
cellW: 140,
cellH: 125,
/* cellW: 140,
cellH: 125, */
delay: 50,
fixSize: false,
gutterY: 5,
gutterX: 5,
onResize: function () {
//wall.fitWidth();
wall.refresh($(".plotsWrapper").width(), $(".plotsWrapper").height());
//wall.refresh();
/* var callbackObjs = $.facebox.flotRedrawCallbackObjs;
for(var callbackObj in callbackObjs){
callbackObjs[callbackObj].callback.apply(null, callbackObjs[callbackObj].arguments);
} */
setTimeout(function () {
//wall.refresh($( ".plotsWrapper" ).width(), $( ".plotsWrapper" ).height());
var charts = $.facebox.charts;
for (var chart in charts) {
charts[chart].resize();
}
}, 700);
},
onBlockMove: function () {
//wall.fitWidth();
wall.refresh($(".plotsWrapper").width(), $(".plotsWrapper").height());
$(window).trigger("resize");
//console.log(this);
}
});
//wall.fitWidth();
wall.refresh($(".plotsWrapper").width(), $(".plotsWrapper").height());
//wall.fitHeight();
//wall.fitZone($( ".plotsWrapper" ).width(), $( ".plotsWrapper" ).height());
$(window).trigger("resize");
//初始化已选图例
for (var i = 0; i < plotsSelected.length; i++) {
addDraggablePortlet(plotsSelected[i]);
}
setTimeout(function () {
var charts = $.facebox.charts;
for (var chart in charts) {
charts[chart].resize();
}
}, 700);
},
saveSelectedPlots: function () {
var placeholders = [];
var plots = $(".flot-placeholder");
$.each(plots, function (index, plot) {
placeholders.push($(plot).attr('id'));
});
plotsSelected = [];
for (var chartObj in chartObjs) {
if (jQuery.inArray(chartObjs[chartObj].placeholderId, placeholders) > -1) {
plotsSelected.push(chartObj);
}
}
return plotsSelected;
},
addPlotControlCallbacks: function (plotId, callback) {
plotControlCallbacks[plotId] = callback;
},
addPlotControlHtmlFrags: function (plotId, htmlFrag) {
plotControlHtmlFrags[plotId] = htmlFrag;
}
}
}();