123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218 |
- <div class="layui-fluid">
- <div class="layui-row layui-col-space15">
- <div class="layui-col-md12">
- <div class="layui-card">
- <div class="layui-card-header">数据统计</div>
- <div class="layui-card-body">
- <div class="layui-carousel layadmin-carousel layadmin-backlog">
- <div carousel-item>
- <ul class="layui-row layui-col-space10">
- <li class="layui-col-xs3">
- <a href="javascript:;" class="layadmin-backlog-body">
- <h3>今日新增用户</h3>
- <p><cite>{$tuserCount}</cite></p>
- </a>
- </li>
- <li class="layui-col-xs3">
- <a href="javascript:;" class="layadmin-backlog-body">
- <h3>昨日新增用户</h3>
- <p><cite>{$yuserCount}</cite></p>
- </a>
- </li>
- <li class="layui-col-xs3">
- <a href="javascript:;" class="layadmin-backlog-body">
- <h3>累计用户</h3>
- <p><cite>{$userCount}</cite></p>
- </a>
- </li>
- <li class="layui-col-xs3">
- <a href="javascript:;" class="layadmin-backlog-body">
- <h3>经纪人</h3>
- <p><cite>{$brolerCount}</cite></p>
- </a>
- </li>
- <li class="layui-col-xs3">
- <a href="javascript:;" class="layadmin-backlog-body">
- <h3>当前收入</h3>
- <p><cite>{$agent.money}</cite></p>
- </a>
- </li>
- <li class="layui-col-xs3">
- <a href="javascript:;" class="layadmin-backlog-body">
- <h3>总收入</h3>
- <p><cite>{$agent.money_total}</cite></p>
- </a>
- </li>
- </ul>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="layui-col-md12">
- <div class="layui-card">
- <div class="layui-card-header">数据概览</div>
- <div class="layui-card-body">
- <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-dataview">
- <div carousel-item id="LAY-index-dataview">
- <div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <script>
- layui.config({
- base: '/static/echoui/' //静态资源所在路径
- }).extend({
- index: 'lib/index' //主入口模块
- }).use(['index', 'admin', 'carousel', 'echarts'], function() {
- var $ = layui.$,
- admin = layui.admin,
- carousel = layui.carousel,
- element = layui.element,
- echarts = layui.echarts,
- device = layui.device();
- //轮播切换
- $('.layadmin-carousel').each(function() {
- var othis = $(this);
- carousel.render({
- elem: this,
- width: '100%',
- arrow: 'none',
- interval: othis.data('interval'),
- autoplay: othis.data('autoplay') === true,
- trigger: (device.ios || device.android) ? 'click' : 'hover',
- anim: othis.data('anim')
- });
- });
- element.render('progress');
- var echartsApp = [],
- options = [
- /*//最近一周报备趋势
- {
- title: {
- text: '最近一月报备趋势',
- x: 'center',
- textStyle: {
- fontSize: 14
- }
- },
- tooltip: { //提示框
- trigger: 'axis',
- formatter: "{b}<br>新增报备:{c}"
- },
- xAxis: [{ //X轴
- type: 'category',
- data: {$entrynamearr|raw|default="[]"}
- }],
- yAxis: [{ //Y轴
- type: 'value'
- }],
- series: [{ //内容
- type: 'line',
- data: {$entryvaluearr|raw|default="[]"}
- }]
- },
- //报备信息分布
- {
- title: {
- text: '报备信息分布',
- x: 'center',
- textStyle: {
- fontSize: 14
- }
- },
- tooltip: {
- trigger: 'item',
- formatter: "{a} <br/>{b} : {c} ({d}%)"
- },
- legend: {
- orient: 'vertical',
- x: 'left',
- data: {$entryfnamearr|raw|default="[]"}
- },
- series: [{
- name: '报备工厂',
- type: 'pie',
- radius: '55%',
- center: ['50%', '50%'],
- data: {$entryfvaluearr|raw|default="[]"}
- }]
- },*/
- //新增的用户量
- {
- title: {
- text: '最近一月新增的用户量',
- x: 'center',
- textStyle: {
- fontSize: 14
- }
- },
- tooltip: { //提示框
- trigger: 'axis',
- formatter: "{b}<br>新增用户:{c}"
- },
- xAxis: [{ //X轴
- type: 'category',
- data: {$usernamearr|raw|default="[]"}
- }],
- yAxis: [{ //Y轴
- type: 'value'
- }],
- series: [{ //内容
- type: 'line',
- data: {$uservaluearr|raw|default="[]"}
- }]
- }
- ],
- elemDataView = $('#LAY-index-dataview').children('div'),
- renderDataView = function(index) {
- echartsApp[index] = echarts.init(elemDataView[index], layui.echartsTheme);
- echartsApp[index].setOption(options[index]);
- //window.onresize = echartsApp[index].resize;
- admin.resize(function() {
- echartsApp[index].resize();
- });
- };
- //没找到DOM,终止执行
- if (!elemDataView[0]) return;
- renderDataView(0);
- //监听数据概览轮播
- var carouselIndex = 0;
- carousel.on('change(LAY-index-dataview)', function(obj) {
- renderDataView(carouselIndex = obj.index);
- });
- //监听侧边伸缩
- layui.admin.on('side', function() {
- setTimeout(function() {
- renderDataView(carouselIndex);
- }, 300);
- });
- //监听路由
- layui.admin.on('hash(tab)', function() {
- layui.router().path.join('') || renderDataView(carouselIndex);
- });
- });
- </script>
|