<php>function _get_system_widget($name){</php> <switch name="name"> <case value="MainContributors"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">技术支持</h3> </div> <div class="panel-body home-info"> <ul class="list-inline"> <li>银河百荣科技</li> </ul> </div> </div> </case> </switch> <php>}</php> <include file="public@header"/> <style> .home-info li em { float: left; width: 120px; font-style: normal; font-weight: bold; } .home-info ul { padding: 0; margin: 0; } .panel { margin-bottom: 0; } .grid-sizer { width: 10%; } .grid-item { margin-bottom: 5px; padding: 5px; } .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { padding-left: 5px; padding-right: 5px; float: none; } </style> <hook name="admin_before_head_end"/> </head> <body> <div class="wrap"> <if condition="!extension_loaded('fileinfo')"> <div class="grid-item col-md-12"> <div class="alert alert-danger alert-dismissible fade in" role="alert" style="margin-bottom: 0;"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> <strong>提示!</strong> php_fileinfo扩展没有开启,无法正常上传文件! </div> </div> </if> <div class="home-grid"> <!-- width of .grid-sizer used for columnWidth --> <div class="grid-sizer"></div> <foreach name="dashboard_widgets" item="vo"> <if condition="$vo.is_system"> <div class="grid-item col-md-12" data-system="1" data-widget="{$vo.name}"> <div class="dashboard-box">{:_get_system_widget($vo.name)}</div> </div> <else/> <present name="dashboard_widget_plugins[$vo['name']]"> <div class="grid-item col-md-{$dashboard_widget_plugins[$vo['name']]['width']}" data-system="0" data-widget="{$vo.name}"> <div class="dashboard-box">{$dashboard_widget_plugins[$vo.name]['view']}</div> </div> </present> </if> </foreach> </div> </div> <script src="__STATIC__/js/admin.js"></script> <php> $lang_set=defined('LANG_SET')?LANG_SET:''; $BRONET_VERSION=defined('BRONET_VERSION')?BRONET_VERSION:''; </php> <script> Wind.css('dragula'); Wind.use('masonry', 'imagesloaded', 'dragula', function () { var $homeGrid = $('.home-grid').masonry({ // set itemSelector so .grid-sizer is not used in layout itemSelector: '.grid-item', // use element for option columnWidth: '.grid-sizer', percentPosition: true, horizontalOrder: false, transitionDuration: 0 }); $homeGrid.masonry('on', 'layoutComplete', function (event, laidOutItems) { }); $homeGrid.masonry(); var containers = []; $('.home-grid .grid-item').each(function () { containers.push(this); }); dragula(containers, { isContainer: function (el) { return false; // only elements in drake.containers will be taken into account }, moves: function (el, source, handle, sibling) { return true; // elements are always draggable by default }, accepts: function (el, target, source, sibling) { return true; // elements can be dropped in any of the `containers` by default }, invalid: function (el, handle) { return false; // don't prevent any drags from initiating by default }, direction: 'vertical', // Y axis is considered when determining where an element would be dropped copy: false, // elements are moved by default, not copied copySortSource: false, // elements in copy-source containers can be reordered revertOnSpill: false, // spilling will put the element back where it was dragged from, if this is true removeOnSpill: false, // spilling will `.remove` the element, if this is true mirrorContainer: document.body, // set the element that gets mirror elements appended ignoreInputTextSelection: true // allows users to select input text, see details below }).on('drop', function (el, target, source, sibling) { var $target = $(target); var targetClasses = $target.attr('class'); var targetDataWidget = $target.data('widget'); var targetDataSystem = $target.data('system'); var $source = $(source); var sourceClasses = $source.attr('class'); var sourceDataWidget = $source.data('widget'); var sourceDataSystem = $source.data('system'); $(source).append($(target).find('.dashboard-box').not('.gu-transit')); $(target).append(el); $target.attr('class', sourceClasses); $target.data('widget', sourceDataWidget); $target.data('system', sourceDataSystem); $source.attr('class', targetClasses); $source.data('widget', targetDataWidget); $source.data('system', targetDataSystem); $homeGrid.masonry(); _widgetSort(); }).on('shadow', function (el, container, source) { $homeGrid.masonry(); }); }); function _widgetSort() { var widgets = []; $('.home-grid .grid-item').each(function () { var $this = $(this); widgets.push({ name: $this.data('widget'), is_system: $this.data('system') }); }); $.ajax({ url: "{:url('main/dashboardWidget')}", type: 'post', dataType: 'json', data: {widgets: widgets}, success: function (data) { }, error: function () { }, complete: function () { } }); } </script> <hook name="admin_before_body_end"/> <script> $(document).ready(function() { //初始化切换 $(".animsition").animsition({ inClass : 'fade-in-right', outClass : 'fade-out', inDuration : 1500, outDuration : 800, linkElement : '.animsition-link', // e.g. linkElement : 'a:not([target="_blank"]):not([href^=#])' loading : true, loadingParentElement : 'body', //animsition wrapper element loadingClass : 'animsition-loading', unSupportCss : [ 'animation-duration', '-webkit-animation-duration', '-o-animation-duration' ], //"unSupportCss" option allows you to disable the "animsition" in case the css property in the array is not supported by your browser. //The default setting is to disable the "animsition" in a browser that does not support "animation-duration". overlay : false, overlayClass : 'animsition-overlay-slide', overlayParentElement : 'body' }); //虚拟数据 var date = ['2016/11/1','2016/11/2','2016/11/3','2016/11/4','2016/11/5','2016/11/6','2016/11/7','2016/11/8','2016/11/9','2016/11/10', '2016/11/11','2016/11/12','2016/11/13','2016/11/14','2016/11/15','2016/11/16','2016/11/17','2016/11/18' ,'2016/11/19','2016/11/20','2016/11/21','2016/11/22','2016/11/23','2016/11/24','2016/11/25','2016/11/26','2016/11/27' ,'2016/11/28','2016/11/29','2016/11/30']; function my_data(){ var data = []; for( var i =0; i<30; i++){ data.push(Math.round(Math.random() * (500 - 100) + 100)); }; return data; } var num = my_data(); var bl = '30%'; // 路径配置 require.config({ paths: { echarts: 'http://echarts.baidu.com/build/dist' } }); // 使用 require( [ 'echarts', 'echarts/chart/bar', 'echarts/chart/line', 'echarts/chart/pie'// 使用柱状图就加载bar模块,按需加载 ], function (ec) { // 基于准备好的dom,初始化echarts图表 var myChart = ec.init(document.getElementById('main1'),'macarons'); var myChart2 = ec.init(document.getElementById('main2'),'macarons'); var myChart3 = ec.init(document.getElementById('main3'),'macarons'); var myChart4 = ec.init(document.getElementById('main4'),'macarons'); var option = { backgroundColor:'white', title:{ text : '新老客户分析', y: '15' }, tooltip : { trigger: 'axis', formatter : function(data){ //console.log(data); var str = data[1].name ; str += '</br>新客户人数:' + data[1].value + ' 占比:' + bl; str += '</br>新客户销售额:' + data[1].value + ' 占比:' + bl; str += '</br>新客户成交笔数:' + data[1].value + ' 占比:' + bl; str += '</br>老客户人数:' + data[1].value + ' 占比:' + bl; str += '</br>老客户销售额:' + data[1].value + ' 占比:' + bl; str += '</br>老客户成交笔数:' + data[1].value + ' 占比:' + bl; return str; } }, legend: { selectedMode : false, data:['新客户','老客户'], y:'20' }, grid:{ y:'100' }, toolbox: { show : false, y:'20', feature : { mark : {show: false}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar']}, restore : {show: true}, saveAsImage : {show: true} } }, dataZoom : { show : true, realtime : true, y: 320, height: 20, start : 85, end : 100 }, calculable : true, xAxis : [ { type : 'category', boundaryGap : true, data : date } ], yAxis : [ { name : '人数', type : 'value' } ], series : [ { name:'新客户', type:'bar', //stack: '总量', barMaxWidth : 15, itemStyle:{ normal:{ borderWidth : 3 } }, data:my_data() }, { name:'老客户', type:'bar', //stack: '总量', barMaxWidth : 15, itemStyle:{ normal:{ borderWidth : 3 } }, data:my_data() }, ] }; var option2 = { title:{ text : '普通客户 忠诚客户 骨灰级客户分析', y: '15' }, backgroundColor:'white', tooltip : { trigger: 'axis', formatter : function(data){ var str = data[1].name ; str += '</br>普通客户人数:' + data[1].value + ' 占比:' + bl; str += '</br>普通客户销售额:' + data[1].value + ' 占比:' + bl; str += '</br>普通客户成交笔数:' + data[1].value + ' 占比:' + bl; str += '</br>忠诚客户人数:' + data[1].value + ' 占比:' + bl; str += '</br>忠诚客户销售额:' + data[1].value + ' 占比:' + bl; str += '</br>忠诚客户成交笔数:' + data[1].value + ' 占比:' + bl; str += '</br>骨灰级客户人数:' + data[1].value + ' 占比:' + bl; str += '</br>骨灰级客户销售额:' + data[1].value + ' 占比:' + bl; str += '</br>骨灰级客户成交笔数:' + data[1].value + ' 占比:' + bl; return str; } }, legend: { selectedMode : false, data:['普通客户','忠诚客户','骨灰级客户分析'], y:'20' }, grid:{ y:'100' }, toolbox: { show : false, y:'20', feature : { mark : {show: false}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar']}, restore : {show: true}, saveAsImage : {show: true} } }, dataZoom : { show : true, realtime : true, y: 320, height: 20, start : 70, end : 100 }, calculable : true, xAxis : [ { type : 'category', boundaryGap : true, data : date } ], yAxis : [ { name : '人数', type : 'value' } ], series : [ { name:'普通客户', type:'bar', //stack: '总量', barMaxWidth : 15, itemStyle:{ normal:{ borderWidth : 3 } }, data:my_data() }, { name:'忠诚客户', type:'bar', //stack: '总量', barMaxWidth : 15, itemStyle:{ normal:{ borderWidth : 3 } }, data:my_data() }, { name:'骨灰级客户分析', type:'bar', //stack: '总量', barMaxWidth : 15, itemStyle:{ normal:{ borderWidth : 3 } }, data:my_data() } ] }; var option3 = { backgroundColor:'white', title:{ text : '各级别会员分析', y: '15' }, tooltip : { trigger: 'axis', formatter : function(data){ var str = data[1].name ; str += '</br>准会员人数:' + data[1].value + ' 占比:' + bl; str += '</br>准会员销售额:' + data[1].value + ' 占比:' + bl; str += '</br>准会员成交笔数:' + data[1].value + ' 占比:' + bl; str += '</br>普通会员人数:' + data[1].value + ' 占比:' + bl; str += '</br>普通会员销售额:' + data[1].value + ' 占比:' + bl; str += '</br>普通会员成交笔数:' + data[1].value + ' 占比:' + bl; str += '</br>高级会员人数:' + data[1].value + ' 占比:' + bl; str += '</br>高级会员销售额:' + data[1].value + ' 占比:' + bl; str += '</br>高级会员成交笔数:' + data[1].value + ' 占比:' + bl; str += '</br>VIP会员人数:' + data[1].value + ' 占比:' + bl; str += '</br>VIP会员销售额:' + data[1].value + ' 占比:' + bl; str += '</br>VIP会员成交笔数:' + data[1].value + ' 占比:' + bl; str += '</br>超级VIP会员人数:' + data[1].value + ' 占比:' + bl; str += '</br>超级VIP会员销售额:' + data[1].value + ' 占比:' + bl; str += '</br>超级VIP会员成交笔数:' + data[1].value + ' 占比:' + bl; return str; } }, legend: { selectedMode : false, data:['准会员','普通会员','高级会员','VIP会员','超级VIP会员'], y:'20' }, grid:{ y:'100' }, toolbox: { show : false, y:'20', feature : { mark : {show: false}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar']}, restore : {show: true}, saveAsImage : {show: true} } }, dataZoom : { show : true, realtime : true, y: 320, height: 20, start : 70, end : 100 }, calculable : true, xAxis : [ { type : 'category', boundaryGap : true, data : date } ], yAxis : [ { name : '人数', type : 'value' } ], series : [ { name:'准会员', type:'bar', //stack: '总量', barMaxWidth : 15, itemStyle:{ normal:{ borderWidth : 3 } }, data:my_data() }, { name:'普通会员', type:'bar', //stack: '总量', barMaxWidth : 15, itemStyle:{ normal:{ borderWidth : 3 } }, data:my_data() }, { name:'高级会员', type:'bar', //stack: '总量', barMaxWidth : 15, itemStyle:{ normal:{ borderWidth : 3 } }, data:my_data() }, { name:'VIP会员', type:'bar', //stack: '总量', barMaxWidth : 15, itemStyle:{ normal:{ borderWidth : 3 } }, data:my_data() }, { name:'超级VIP会员', type:'bar', //stack: '总量', barMaxWidth : 15, itemStyle:{ normal:{ borderWidth : 3 } }, data:my_data() } ] }; var option4 = { title:{ text : '昨日订单来源分析', y: '15' }, backgroundColor:'white', tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient : 'vertical', x : 'right', y : 'center', data:['PC端','移动端','微信'] }, toolbox: { show : false, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : { show: true, type: ['pie', 'funnel'], option: { funnel: { x: '25%', width: '50%', funnelAlign: 'center', max: 1548 } } }, restore : {show: true}, saveAsImage : {show: true} } }, calculable : false, series : [ { name:'客户来源', type:'pie', center:['40%','55%'], radius : ['40%', '52%'], itemStyle : { normal : { label : { show : false }, labelLine : { show : false } }, emphasis : { label : { show : true, position : 'center', textStyle : { fontSize : '30', fontWeight : 'bold' } } } }, data:[ {value:335, name:'PC端'}, {value:310, name:'移动端'}, {value:234, name:'微信'} ] } ] }; //var ecConfig = require('echarts/config'); // 为echarts对象加载数据 myChart.setOption(option); myChart2.setOption(option4); myChart3.setOption(option3); myChart4.setOption(option2); /*myChart3.on(ecConfig.EVENT.LEGEND_SELECTED, function(param){ if(param.type == 'legendSelected'){ return; } });*/ } ); /* // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main1'),'macarons'); var myChart2 = echarts.init(document.getElementById('main2'),'macarons'); var myChart3 = echarts.init(document.getElementById('main3'),'macarons'); var option = { backgroundColor:'white', tooltip : { trigger: 'axis' }, legend: { data:['转化人数'], y:'20' }, grid:{ y:'100' }, toolbox: { show : true, y:'20', feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']}, restore : {show: true}, saveAsImage : {show: true} } }, dataZoom: [{ type: 'inside', start: 90, end: 100 }, { start: 90, end: 100, handleSize: '80%', handleStyle: { color: '#fff', shadowBlur: 3, shadowColor: 'rgba(0, 0, 0, 0.6)', shadowOffsetX: 2, shadowOffsetY: 2 } }], calculable : true, xAxis : [ { type : 'category', boundaryGap : false, data : date } ], yAxis : [ { type : 'value' } ], series : [ { name:'转化人数', type:'line', stack: '总量', barMaxWidth : 30, itemStyle:{ normal:{ borderWidth : 5 } }, data:my_data() }, ] }; var option2 = { backgroundColor:'white', tooltip : { trigger: 'axis' }, legend: { data:['付款总额'], y:'20' }, grid:{ y:'100' }, toolbox: { show : true, y:'20', feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']}, restore : {show: true}, saveAsImage : {show: true} } }, dataZoom: [{ type: 'inside', start: 90, end: 100 }, { start: 90, end: 100, handleSize: '80%', handleStyle: { color: '#fff', shadowBlur: 3, shadowColor: 'rgba(0, 0, 0, 0.6)', shadowOffsetX: 2, shadowOffsetY: 2 } }], calculable : true, xAxis : [ { type : 'category', boundaryGap : false, data : date } ], yAxis : [ { type : 'value' } ], series : [ { name:'付款总额', type:'line', stack: '总量', barMaxWidth : 30, itemStyle:{ normal:{ borderWidth : 5 } }, data:my_data() }, ] }; var option3 = { backgroundColor:'white', tooltip : { trigger: 'axis', formatter: '{b}</br>{a}:{c}</br>占比:' + bl }, legend: { data:['人数','占比'], y:'20' }, grid:{ y:'100' }, toolbox: { show : true, y:'20', feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']}, restore : {show: true}, saveAsImage : {show: true} } }, dataZoom: [{ type: 'inside', start: 90, end: 100 }, { start: 90, end: 100, handleSize: '80%', handleStyle: { color: '#fff', shadowBlur: 3, shadowColor: 'rgba(0, 0, 0, 0.6)', shadowOffsetX: 2, shadowOffsetY: 2 } }], calculable : true, xAxis : [ { type : 'category', boundaryGap : false, data : date } ], yAxis : [ { type : 'value' } ], series : [ { name:'人数', type:'line', stack: '总量', barMaxWidth : 30, itemStyle:{ normal:{ borderWidth : 5 } }, data:num }, { name:'占比', type:'line', stack: '占比', barMaxWidth : 30, show : false, itemStyle:{ normal:{ borderWidth : 5, //color :'#32dadd' } }, data:num }, ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); myChart2.setOption(option2); myChart3.setOption(option3);*/ }); </script> </body> </html>