var __es = null; // Step:3 为模块加载器配置echarts的路径,从当前页面链接到echarts.js,定义所需图表路径 require.config({ paths : { echarts : __ctx + '/js/echarts/' } }); // Step:4 动态加载echarts然后在回调函数中开始使用,注意保持按需加载结构定义图表路径 require([ 'echarts', 'echarts/chart/bar',// 柱形图(纵向),堆积柱形图,条形图(横向),堆积条形图 'echarts/chart/chord',// 和弦图。常用于展现关系数据,外层为圆环图,可体现数据占比关系,内层为各个扇形间相互连接的弦,可体现关系数据 'echarts/chart/eventRiver',// 事件河流图。常用于展示具有时间属性的多个事件,以及事件随时间的演化。 'echarts/chart/force',// 力导布局图。常用于展现复杂关系网络聚类布局。 'echarts/chart/funnel',// 漏斗图。用于展现数据经过筛选、过滤等流程处理后发生的数据变化,常见于BI类系统。 'echarts/chart/gauge',// 仪表盘。用于展现关键指标数据,常见于BI类系统。 'echarts/chart/k',// K线图,蜡烛图。常用于展现股票交易数据。 'echarts/chart/line', // 折线图,堆积折线图,区域图,堆积区域图。 'echarts/chart/map',// 地图。内置世界地图、中国及中国34个省市自治区地图数据、可通过标准GeoJson扩展地图类型。支持svg扩展类地图应用,如室内地图、运动场、物件构造等。 'echarts/chart/pie',// 饼图,圆环图。饼图支持两种(半径、面积)南丁格尔玫瑰图模式。 'echarts/chart/radar',// 雷达图,填充雷达图。高维度数据展现的常用图表。 'echarts/chart/scatter' // 散点图,气泡图。散点图至少需要横纵两个数据,更高维度数据加入时可以映射为颜色或大小,当映射到大小时则为气泡图 ], function(ec) { __es = ec new Plugin(); }); /** * 定时器容器,每个定时器只启动一次。 */ var intervalObj={}; /** * 图表控件显示问题,图表控件只初始化一次。 */ var widgetContainer={}; /******************************************************************************* * * 系统首页布局js * *
 *  
 * 作者:hugh zhuang
 * 邮箱:zhuangxh@jee-soft.cn
 * 日期:2015-01-8-上午11:10:52
 * 版权:广州宏天软件有限公司版权所有
 * 
* ******************************************************************************/ var isInit__ = false, defaults = { templateAliasKey : "template-alias",// 模版别名 templateParams : "template-params",// 模版参数 defHeight : 320 // 默认高度 }, me; function Plugin( options) { this.settings = $.extend({}, defaults, options); this._defaults = defaults; this.init(); } Plugin.prototype = { init : function() { me = this; me.initUI(); me.parser(); }, initUIEvent : function(el) { this.handleSlimScrolls(el); this.handleInfobox(el); this.handlePieChar(el); this.handleSparkline(el); }, initUI : function() { // 处理顶部的按钮 $(document).on('click','.widget-header a[data-action]',function(ev) { ev.preventDefault(); var $this = $(this), $box = $this .closest('.widget-box'); if ($box.length == 0) return; var $action = $this.data('action'); if ($action == 'collapse') {// 展开 var event_name = $box.hasClass('collapsed') ? 'show': 'hide'; me.toggle(event_name, $this, $box); } else if ($action == 'close') {// 关闭 me.close($box); } else if ($action == 'reload') {// 刷新 $this.blur(); me.reload($this); } else if ($action == 'fullscreen') {// 全屏 me.fullscreen($box, $this); } else if ($action == 'more') {// 更多 me.more($this); } else if ($action == 'first') {// 首页 me.firstPage($box); } else if ($action == 'prev') {// 上一页 me.prevPage($box); } else if ($action == 'next') {// 下一页 me.nextPage($box); } else if ($action == 'last') {//最后一页 me.lastPage($box); } else if ($action == 'pageSize') {// 分页大小 me.pageSize($box, $this); } else{// 数据扩扩展 if($this.attr("data-ext") && !me.isEmpty($action)) me.getParamsExt($box, $this,$action); } }); //处理tab $(document).on('click','a[data-toggle="tab"]',function (e) { e.preventDefault(); var $this = $(this), $box = $this.closest('.widget-box'), templateParams = me._defaults.templateParams, params = $box.attr(templateParams), alias = $this.attr("data-alias"), dataParam = $this.attr("data-param"); params = eval("(" + params + ")"); params[dataParam] = alias; //分页的处理 if(!me.isEmpty(params.currentPage)) params.currentPage = 1; $box.attr(templateParams, JSON.stringify(params)); //打开那个tab $(this).tab('show'); }); }, getParamsExt:function($box,$this,$action){ var params = me.getTemplateParams($box); if (!params) return; var templateParams = me._defaults.templateParams, params = $box.attr(templateParams) val = $this.attr("data-value"); params = eval("(" + params + ")"); params[$action] = val; $box.attr(templateParams, JSON.stringify(params)); me.blockUI($box); window.setTimeout(function() { me.parserTemplate($box); }, 100); }, /** * 获取模版参数 */ getTemplateParams : function($box) { var templateParams = me._defaults.templateParams, params = $box.attr(templateParams); if (!params) { alert("请配置参数。"); return; } else { return eval("(" + params + ")"); } }, firstPage : function($box) { var params = me.getTemplateParams($box); if (!params) return; me.handerPage($box, 1); }, prevPage : function($box) { var params = me.getTemplateParams($box); if (!params) return; var currentPage = params.currentPage; if (currentPage <= 1) return; me.handerPage($box, currentPage - 1); }, nextPage : function($box) { var params = me.getTemplateParams($box); if (!params) return; var currentPage = params.currentPage, totalPage = params.totalPage; if (currentPage >= totalPage) return; me.handerPage($box, currentPage + 1); }, lastPage : function($box) { var params = me.getTemplateParams($box); if (!params) return; me.handerPage($box, params.totalPage); }, pageSize : function($box, $this) { var params = me.getTemplateParams($box); if (!params) return; me.handerPage($box, 1, $this.html()); }, handerPage : function($box, currentPage, pageSize) { var templateParams = me._defaults.templateParams, params = $box .attr(templateParams); params = eval("(" + params + ")"); params.currentPage = currentPage; if (pageSize) params.pageSize = pageSize; $box.attr(templateParams, JSON.stringify(params)); me.blockUI($box); window.setTimeout(function() { me.parserTemplate($box); }, 100); }, /** * 处理收起、展开 */ toggle : function(type, button, $box) { var $body = $box.find('.widget-body').eq(0), $icon = null, event_name = typeof type !== 'undefined' ? type: ($box.hasClass('collapsed') ? 'show' : 'hide'), event_complete_name = event_name == 'show' ? 'shown': 'hidden'; if (typeof button === 'undefined') { button = $box.find('> .widget-header a[data-action=collapse]') .eq(0); if (button.length == 0) button = null; } var $match, $icon_down = null, $icon_up = null, expandSpeed = 250, collapseSpeed = 200; if (button) { $icon = button.find(".ht-icon").eq(0); if (($icon_down = $icon.attr('data-icon-show'))) { $icon_up = $icon.attr('data-icon-hide') } else if ($match = $icon.attr('class').match( /fa\-(.*)\-(up|down)/)) { $icon_down = 'fa-' + $match[1] + '-down'; $icon_up = 'fa-' + $match[1] + '-up'; } expandSpeed = button.attr('data-expand-speed') ? button .attr('data-expand-speed') : expandSpeed; collapseSpeed = button.attr('data-collapse-speed') ? button .attr('data-collapse-speed') : collapseSpeed; } if (event_name == 'show') { if ($icon) $icon.removeClass($icon_down).addClass($icon_up); $body.hide(); $box.removeClass('collapsed'); $body.slideDown(expandSpeed); } else { if ($icon) $icon.removeClass($icon_up).addClass($icon_down); $body.slideUp(collapseSpeed, function() { $box.addClass('collapsed') $box.trigger(event_complete_name + '.ht.widget') }); } }, /** * 处理刷新 */ reload : function($this) { var el = $this.parents(".widget-box"); me.blockUI(el); var alias = el.parent().find("[" + me._defaults.templateAliasKey + "]"); if (alias.length > 0) { me.parserTemplate(el); } else { me.unblockUI(el); } }, /** * 处理更多 */ more : function($this) { var url = $this.attr('data-url'); me.addTab(url); }, /** * 关闭 */ close : function($box) { var closeSpeed = 300; $box.fadeOut(closeSpeed, function() { $box.parent().remove(); }); }, /** * 全屏 */ fullscreen : function($box, $this) { var $icon = $this.find(".ht-icon").eq(0), $icon_expand = null, $icon_compress = null if (($icon_expand = $icon.attr('data-icon1'))) { $icon_compress = $icon.attr('data-icon2') } else { $icon_expand = 'fa-expand'; $icon_compress = 'fa-compress'; } if (!$box.hasClass('fullscreen')) { $icon.removeClass($icon_expand).addClass($icon_compress); $box.addClass('fullscreen'); } else { $icon.addClass($icon_expand).removeClass($icon_compress); $box.removeClass('fullscreen'); } }, addTab : function(url) { if (!url || url == "") return; var url2 = url.split("?")[0]; $.post(__ctx + "/platform/console/getResourceNode.ht?columnUrl=" + url2, function(data) { if (data == null | data == "") { alert("更多路径配置有误", '提示信息'); } else { me.addToTab(url, data.resName, data.resId, data.icon); } }); }, // 添加到tab或者刷新 addToTab : function(url, txt, id, icon) { me.getParent().tab.addTabItem({ url : __ctx + url, text : txt, tabid : id, icon : __ctx + icon }); }, // 找到最顶层窗口 getParent : function(w) { var win = w ? w : window; if (win.parent != win) // 找到最顶层窗口 return this.getParent(win.parent); return win; }, isEmpty : function(v, allowBlank) { return v === null || v === undefined || (!allowBlank ? v === '' : false); }, blockUI : function(el, loaderOnTop) { var html = '
加载中...
'; jQuery(el).block({ message : html, css : { top : '10%', border : '0', padding : '0', backgroundColor : 'none' }, overlayCSS : { backgroundColor : '#fff', opacity : 0.1, cursor : 'wait' } }); }, // wrapper function to un-block element(finish loading) unblockUI : function(el) { jQuery(el).unblock({ onUnblock : function() { jQuery(el).removeAttr("style"); } }); }, /** * 走马灯效果 */ handleCarousel : function(conf) { if (!jQuery().carouFredSel) return; var div = conf.div, data = conf.data ? conf.data : [], height = conf.height ? conf.height : me._defaults.defHeight, carouFredSel = $('.widget-list', div); if (carouFredSel.length <= 0) return; // Basic carousel, no options carouFredSel.each(function() { var self = $(this), direction = self .attr("data-direction") ? self .attr("data-direction") : 'up', // 滚动方向 left 、right、down、up duration = self.attr("data-duration") ? self.attr("data-duration") : 500, // 持续时间 easing = self.attr("data-easing") ? self.attr("data-easing") : 'swing', // 展示效果swing(摆动)、linear、 cubic、quadratic pauseOnHover = self.attr("data-pauseOnHover") ? self.attr("data-pauseOnHover") : true;// 是否鼠标停止 self.carouFredSel({ direction : direction, height : height - 20, scroll : { easing : easing, duration : duration, pauseOnHover : pauseOnHover } }); }); }, /** * 处理幻灯片效果 */ handleLayerslider : function(conf) { if (!jQuery().layerSlider) return; var div = conf.div, data = conf.data ? conf.data : [], height = conf.height ? conf.height : me._defaults.defHeight, layerslider = $( '.widget-layerslider', div); if (layerslider.length <= 0) return; layerslider.each(function() { var self = $(this), width = self.width() > 0 ? self.width() : me._defaults.defHeight, skinsPath = self.attr("data-skins-path") ?self.attr("data-skins-path"): (__ctx + '/styles/common/css/slider-layer-slider/skins/'), skin = self.attr("data-skin") ? self.attr("data-skin"): 'fullwidth', thumbnailNavigation = self.attr("data-thumbnailNavigation") ? self .attr("data-thumbnailNavigation") : 'hover', hoverPrevNext = self.attr("data-hoverPrevNext") ? self.attr("data-hoverPrevNext") : false, responsive = self.attr("data-responsive") ? self.attr("data-responsive") : false, responsiveUnder = self.attr("data-responsiveUnder") ? self.attr("data-responsiveUnder") : width, layersContainer = self.attr("data-layersContainer") ? self.attr("data-layersContainer"): width; self.layerSlider({ skinsPath : skinsPath, skin : skin, thumbnailNavigation : thumbnailNavigation, hoverPrevNext : hoverPrevNext, responsive : responsive, responsiveUnder : responsiveUnder, layersContainer : layersContainer }); }); }, /** * 处理列表数据滚动 */ handleSlimScrolls : function(el) { if (!jQuery().slimScroll) return; $('.widget-scroller', el).each(function() { var self = $(this), height = self.attr("data-height"); self.slimScroll({size : '7px', color : '#a1b2bd', height : height ? height : (me._defaults.defHeight + 'px'), alwaysVisible : (self .attr("data-always-visible") == "1" ? true : false), railVisible : (self .attr("data-rail-visible") == "1" ? true : false), railOpacity : 0.1, disableFadeOut : true }); }); }, /** * 消息盒子 */ handleInfobox : function(el) { $('.infobox[data-url]', el).unbind("click").bind("click", function() { var self = $(this), url = self.attr("data-url"); me.addTab(url); }); }, /** * 处理饼图 */ handlePieChar : function(el) { if (!jQuery().easyPieChart) return; $('.easy-pie-chart.percentage', el).each(function() { var self = $(this), $box = self.closest('.infobox'), barColor = self.data('color')|| (!$box.hasClass('infobox-dark') ? $box.css('color'): 'rgba(255,255,255,0.95)'), trackColor = barColor == 'rgba(255,255,255,0.95)' ? 'rgba(255,255,255,0.25)': '#E2E2E2', size = parseInt(self.data('size')) || 50; self.easyPieChart({ barColor : barColor, trackColor : trackColor, scaleColor : false, lineCap : 'butt', lineWidth : parseInt(size / 10), animate : /msie\s*(8|7|6)/ .test(navigator.userAgent .toLowerCase()) ? false : 1000, size : size }); }); }, /** * 处理信息盒子的图表 */ handleSparkline : function(el) { if (!jQuery().sparkline) return; $('.sparkline', el).each(function() { var self = $(this), $box = self .closest('.infobox'), barColor = !$box.hasClass('infobox-dark') ? $box .css('color') : '#FFF', type = self.attr("data-type") ? $(this).attr("data-type") : 'bar'; $(this).sparkline('html', { tagValuesAttribute : 'data-values', type : type, barColor : barColor, chartRangeMin : $(this).data('min') || 0 }); }); }, /** * 处理日历 */ handleCalendar : function(conf) { if (!jQuery().fullCalendar) return; var div = conf.div, data = conf.data ? conf.data : [], height = conf.height ? conf.height : me._defaults.defHeight, calendar = $('.widget-calendar', div); if (calendar.length <= 0) return; calendar.fullCalendar({ header : { left : 'prev,next today', center : 'title', right : 'month,agendaWeek,agendaDay' }, height : height, selectable : true, selectHelper : true, editable : true, eventLimit : true, // 更多 views : { month : { eventLimit : 5, eventLimitClick : 'day' }, agendaWeek : { eventLimit : 5 }, agendaDay : { eventLimit : 5 } }, eventClick : function(calEvent, jsEvent, view) { if (calEvent.eventClick) { calEvent.eventClick.call(this, calEvent, jsEvent, view); } }, events : data }); }, /** * 处理图表 */ handleChart : function(conf) { var alias=conf.alias; var div = conf.div, data = conf.data, height = conf.height ? conf.height : me._defaults.defHeight, chartBody = div .find(".widget-chart");// 对图表布局class标签写死 // 如果没有自己解析图表 if (me.isEmpty(chartBody)) return; var w = chartBody.width() > 0 ? chartBody.width() : me._defaults.defHeight, h = chartBody.height() > 0 ? chartBody .height() : height; chartBody.width(w); chartBody.height(h); try { var myChart=null; if(!widgetContainer[alias]){ myChart = __es.init(chartBody[0]); widgetContainer[alias]=myChart; } else{ myChart=widgetContainer[alias]; } myChart.setOption(data); } catch (e) { } }, /** * 刷新页面 */ refreshPage : function(alias,el, delaytime) { if(intervalObj[alias]) return; intervalObj[alias]=true; //定时操作 window.setInterval(function() { me.blockUI(el); me.parserTemplate(el); }, delaytime); }, /** * 解析模版 */ parserTemplate : function(el) { var self = $(el); var alias = self.attr(me._defaults.templateAliasKey); var params = self.attr(me._defaults.templateParams); var divObj = $("
"); me.blockUI(el); if (!alias) { me.unblockUI(el); return; } var url=__ctx + "/platform/system/sysIndexColumn/getData.ht"; var params={ params : params ? params : '', alias : alias }; $.ajax({ type : "POST", context:self, url : url, data : params, success : function(data) { var obj=$(this); me.unblockUI(obj[0]); if (me.isEmpty(data)) return; var rtn = eval('(' + data + ')'); var templateHtml = rtn.html; // 栏目类型 var type = rtn.type; // 是否刷新 var isRefresh = rtn.isRefresh; // 刷新时间 var refreshTime = rtn.refreshTime; var delayTime = refreshTime ? refreshTime: 5; // 展示效果。1、默认效果,走马灯 var show = rtn.show; var height = rtn.height;// 高度 // 有儿子就有bug TODO 暂时在它的父类添加div这样解决 // 判断div的父类是否有元素 var parent = obj.parent(); if (parent.hasClass('parent-template-class')) { divObj = parent; } else { divObj.addClass("parent-template-class"); obj.after(divObj); } var wigetObj=$(templateHtml); //内存引起的问题,是因为图表组件引起的,图表组件不能在每次刷新的时候执行init方法。 //可以使用缓存的方法将图表组件缓存起来。 if(type == 1){ //第一次加载的时候处理,其他的情况下就不进行处理了。 if(!widgetContainer[alias]){ obj.remove(); obj=null; divObj.append(wigetObj);// 把当前页替换成模版的页面 } } else{ obj.remove(); obj=null; divObj.append(wigetObj);// 把当前页替换成模版的页面 } if (type == 1) {// 图表方式 me.handleChart({ alias:alias, div : wigetObj, data : rtn.option, height : height }); } else if (type == 2) {// 日历方式 me.handleCalendar({ div : wigetObj, data : rtn.option, height : height }); } else { // 默认方式 if (show != 1) me.initUIEvent(wigetObj); } // 0、是默认;1、是走马灯、2、是幻灯片 if (show && show == 1) {// 1、是走马灯 me.handleCarousel({ div : wigetObj, data : rtn.option, height : height }); } else if (show && show == 2) {// 2、 幻灯片 me.handleLayerslider({ div : wigetObj, data : rtn.option, height : height }); } // 处理刷新 页面关闭或者隐藏 if (isRefresh && isRefresh == 1){ me.refreshPage(alias, wigetObj, delayTime * 1000); } }, error : function(data) { me.unblockUI(this); } }); }, parser : function() { var indexPageTemplate = $('.index-page').find("[" + me._defaults.templateAliasKey + "]"); if(indexPageTemplate.length==0) return; indexPageTemplate.each(function(i, n) { me.parserTemplate(n); }); } };