console.html 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
  1. <div class="layui-fluid">
  2. <div class="layui-row layui-col-space15">
  3. <div class="layui-col-md12">
  4. <div class="layui-card">
  5. <div class="layui-card-header">数据统计</div>
  6. <div class="layui-card-body">
  7. <div class="layui-carousel layadmin-carousel layadmin-backlog">
  8. <div carousel-item>
  9. <ul class="layui-row layui-col-space10">
  10. <li class="layui-col-xs3">
  11. <a href="javascript:;" class="layadmin-backlog-body">
  12. <h3>今日新增用户</h3>
  13. <p><cite>{$tuserCount}</cite></p>
  14. </a>
  15. </li>
  16. <li class="layui-col-xs3">
  17. <a href="javascript:;" class="layadmin-backlog-body">
  18. <h3>昨日新增用户</h3>
  19. <p><cite>{$yuserCount}</cite></p>
  20. </a>
  21. </li>
  22. <li class="layui-col-xs3">
  23. <a href="javascript:;" class="layadmin-backlog-body">
  24. <h3>累计用户</h3>
  25. <p><cite>{$userCount}</cite></p>
  26. </a>
  27. </li>
  28. <li class="layui-col-xs3">
  29. <a href="javascript:;" class="layadmin-backlog-body">
  30. <h3>经纪人</h3>
  31. <p><cite>{$brolerCount}</cite></p>
  32. </a>
  33. </li>
  34. <li class="layui-col-xs3">
  35. <a href="javascript:;" class="layadmin-backlog-body">
  36. <h3>当前收入</h3>
  37. <p><cite>{$agent.money}</cite></p>
  38. </a>
  39. </li>
  40. <li class="layui-col-xs3">
  41. <a href="javascript:;" class="layadmin-backlog-body">
  42. <h3>总收入</h3>
  43. <p><cite>{$agent.money_total}</cite></p>
  44. </a>
  45. </li>
  46. </ul>
  47. </div>
  48. </div>
  49. </div>
  50. </div>
  51. </div>
  52. <div class="layui-col-md12">
  53. <div class="layui-card">
  54. <div class="layui-card-header">数据概览</div>
  55. <div class="layui-card-body">
  56. <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-dataview">
  57. <div carousel-item id="LAY-index-dataview">
  58. <div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
  59. </div>
  60. </div>
  61. </div>
  62. </div>
  63. </div>
  64. </div>
  65. </div>
  66. <script>
  67. layui.config({
  68. base: '/static/echoui/' //静态资源所在路径
  69. }).extend({
  70. index: 'lib/index' //主入口模块
  71. }).use(['index', 'admin', 'carousel', 'echarts'], function() {
  72. var $ = layui.$,
  73. admin = layui.admin,
  74. carousel = layui.carousel,
  75. element = layui.element,
  76. echarts = layui.echarts,
  77. device = layui.device();
  78. //轮播切换
  79. $('.layadmin-carousel').each(function() {
  80. var othis = $(this);
  81. carousel.render({
  82. elem: this,
  83. width: '100%',
  84. arrow: 'none',
  85. interval: othis.data('interval'),
  86. autoplay: othis.data('autoplay') === true,
  87. trigger: (device.ios || device.android) ? 'click' : 'hover',
  88. anim: othis.data('anim')
  89. });
  90. });
  91. element.render('progress');
  92. var echartsApp = [],
  93. options = [
  94. /*//最近一周报备趋势
  95. {
  96. title: {
  97. text: '最近一月报备趋势',
  98. x: 'center',
  99. textStyle: {
  100. fontSize: 14
  101. }
  102. },
  103. tooltip: { //提示框
  104. trigger: 'axis',
  105. formatter: "{b}<br>新增报备:{c}"
  106. },
  107. xAxis: [{ //X轴
  108. type: 'category',
  109. data: {$entrynamearr|raw|default="[]"}
  110. }],
  111. yAxis: [{ //Y轴
  112. type: 'value'
  113. }],
  114. series: [{ //内容
  115. type: 'line',
  116. data: {$entryvaluearr|raw|default="[]"}
  117. }]
  118. },
  119. //报备信息分布
  120. {
  121. title: {
  122. text: '报备信息分布',
  123. x: 'center',
  124. textStyle: {
  125. fontSize: 14
  126. }
  127. },
  128. tooltip: {
  129. trigger: 'item',
  130. formatter: "{a} <br/>{b} : {c} ({d}%)"
  131. },
  132. legend: {
  133. orient: 'vertical',
  134. x: 'left',
  135. data: {$entryfnamearr|raw|default="[]"}
  136. },
  137. series: [{
  138. name: '报备工厂',
  139. type: 'pie',
  140. radius: '55%',
  141. center: ['50%', '50%'],
  142. data: {$entryfvaluearr|raw|default="[]"}
  143. }]
  144. },*/
  145. //新增的用户量
  146. {
  147. title: {
  148. text: '最近一月新增的用户量',
  149. x: 'center',
  150. textStyle: {
  151. fontSize: 14
  152. }
  153. },
  154. tooltip: { //提示框
  155. trigger: 'axis',
  156. formatter: "{b}<br>新增用户:{c}"
  157. },
  158. xAxis: [{ //X轴
  159. type: 'category',
  160. data: {$usernamearr|raw|default="[]"}
  161. }],
  162. yAxis: [{ //Y轴
  163. type: 'value'
  164. }],
  165. series: [{ //内容
  166. type: 'line',
  167. data: {$uservaluearr|raw|default="[]"}
  168. }]
  169. }
  170. ],
  171. elemDataView = $('#LAY-index-dataview').children('div'),
  172. renderDataView = function(index) {
  173. echartsApp[index] = echarts.init(elemDataView[index], layui.echartsTheme);
  174. echartsApp[index].setOption(options[index]);
  175. //window.onresize = echartsApp[index].resize;
  176. admin.resize(function() {
  177. echartsApp[index].resize();
  178. });
  179. };
  180. //没找到DOM,终止执行
  181. if (!elemDataView[0]) return;
  182. renderDataView(0);
  183. //监听数据概览轮播
  184. var carouselIndex = 0;
  185. carousel.on('change(LAY-index-dataview)', function(obj) {
  186. renderDataView(carouselIndex = obj.index);
  187. });
  188. //监听侧边伸缩
  189. layui.admin.on('side', function() {
  190. setTimeout(function() {
  191. renderDataView(carouselIndex);
  192. }, 300);
  193. });
  194. //监听路由
  195. layui.admin.on('hash(tab)', function() {
  196. layui.router().path.join('') || renderDataView(carouselIndex);
  197. });
  198. });
  199. </script>