overview.blade.php 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
  1. @extends('admin/layout')
  2. @section('content')
  3. <style>
  4. .qwe-boxs {
  5. display: block;
  6. max-width: 800px;
  7. margin: auto;
  8. }
  9. .no-margins {
  10. text-align: right !important;
  11. font-size: 16px !important;
  12. line-height: 26px;
  13. }
  14. .ibox-title {
  15. padding: 10px 15px 7px;
  16. min-height: 40px;
  17. border-width: 1px 0px 0px;
  18. }
  19. .ibox-title h5 {
  20. margin: 0 !important;
  21. line-height: 26px;
  22. }
  23. .ibox.ons {
  24. margin: 0;
  25. }
  26. .xm-titles {
  27. display: block;
  28. width: 100%;
  29. background: #2a94e0;
  30. font-size: 18px;
  31. text-align: center;
  32. line-height: normal;
  33. padding: 10px;
  34. color: #fff;
  35. }
  36. </style>
  37. <body class="gray-bg">
  38. <div class="wrapper wrapper-content">
  39. <div class="row">
  40. <div class="qwe-boxs">
  41. <div class="col-sm-6">
  42. <div>
  43. <input type="text" id="monthRange" class="form-control" placeholder="请筛选月份范围">
  44. </div>
  45. <div class="xm-titles">
  46. 项目情况汇总
  47. </div>
  48. <div class="row">
  49. <div class="col-sm-12">
  50. <div class="ibox ons float-e-margins">
  51. <div class="ibox-title">
  52. {{-- <span class="label label-success pull-right">当月</span> --}}
  53. <h5>销售签单</h5>
  54. <h1 class="no-margins" id="nowMonthOrder">{{$nowMonthOrder}}</h1>
  55. </div>
  56. </div>
  57. </div>
  58. <div class="col-sm-12">
  59. <div class="ibox ons float-e-margins">
  60. <div class="ibox-title">
  61. {{-- <span class="label label-success pull-right">当月</span> --}}
  62. <h5>已下单项目</h5>
  63. <h1 class="no-margins" id="nowMonthAssign">{{$nowMonthAssign}}</h1>
  64. </div>
  65. </div>
  66. </div>
  67. <div class="col-sm-12">
  68. <div class="ibox ons float-e-margins">
  69. <div class="ibox-title">
  70. {{-- <span class="label label-info pull-right">当月</span> --}}
  71. <h5>上线项目</h5>
  72. <h1 class="no-margins" id="nowMonthOnline">{{$nowMonthOnline}}</h1>
  73. </div>
  74. </div>
  75. </div>
  76. <div class="col-sm-12">
  77. <div class="ibox ons float-e-margins">
  78. <div class="ibox-title">
  79. {{-- <span class="label label-primary pull-right">当月</span> --}}
  80. <h5>达标项目</h5>
  81. <h1 class="no-margins" id="nowMonthReach">{{$nowMonthReach}}</h1>
  82. </div>
  83. </div>
  84. </div>
  85. <div class="col-sm-12">
  86. <div class="ibox ons float-e-margins">
  87. <div class="ibox-title">
  88. {{-- <span class="label label-danger pull-right">当月</span> --}}
  89. <h5>上线消耗</h5>
  90. <h1 class="no-margins" id="onlineConsume">{{$onlineConsume}}</h1>
  91. </div>
  92. </div>
  93. </div>
  94. <div class="col-sm-12">
  95. <div class="ibox float-e-margins">
  96. <div class="ibox-title">
  97. {{-- <span class="label label-danger pull-right">当月</span> --}}
  98. <h5>达标消耗</h5>
  99. <h1 class="no-margins" id="reachConsume">{{$reachConsume}}</h1>
  100. </div>
  101. </div>
  102. </div>
  103. </div>
  104. <div class="xm-titles" style="margin-top: -50px">
  105. 2020 续费情况
  106. </div>
  107. <div class="row">
  108. <div class="col-sm-12">
  109. <div class="ibox ons float-e-margins">
  110. <div class="ibox-title">
  111. {{-- <span class="label label-success pull-right">{{date('Y')}}年</span> --}}
  112. <h5>续费项目</h5>
  113. <h1 class="no-margins">{{$yearRenewal}} | {{$yearExpired+$yearRenewal}}</h1>
  114. </div>
  115. </div>
  116. </div>
  117. <div class="col-sm-12">
  118. <div class="ibox ons float-e-margins">
  119. <div class="ibox-title">
  120. {{-- <span class="label label-info pull-right">{{date('Y')}}年</span> --}}
  121. <h5>续费率</h5>
  122. <h1 class="no-margins">{{$renewalConsume}}</h1>
  123. </div>
  124. </div>
  125. </div>
  126. </div>
  127. <div class="xm-titles">
  128. 消耗趋势-最近3个月
  129. </div>
  130. <div class="row">
  131. <div class="col-sm-12">
  132. <div class="ibox ons float-e-margins">
  133. <div class="ibox-title">
  134. {{-- <span class="label label-primary pull-right">最近3个月</span> --}}
  135. <h5>上线消耗</h5>
  136. <h1 class="no-margins">{{$totalOnlineConsume}} <span
  137. style="margin-left: 10px">{{implode(' | ',$threeHistoryOnline)}}</span></h1>
  138. </div>
  139. </div>
  140. </div>
  141. <div class="col-sm-12">
  142. <div class="ibox ons float-e-margins">
  143. <div class="ibox-title">
  144. {{-- <span class="label label-danger pull-right">最近3个月</span> --}}
  145. <h5>达标消耗</h5>
  146. <h1 class="no-margins">{{$totalReachConsume}} <span
  147. style="margin-left: 10px">{{implode(' | ',$threeHistoryReach)}}</span></h1>
  148. </div>
  149. </div>
  150. </div>
  151. </div>
  152. </div>
  153. <div class="col-sm-6">
  154. <div class="xm-titles">
  155. 项目情况汇总
  156. </div>
  157. <div class="row">
  158. <div class="col-sm-12">
  159. <div class="ibox ons float-e-margins">
  160. <div class="ibox-title">
  161. {{-- <span class="label label-success pull-right">总</span> --}}
  162. <h5>项目总数</h5>
  163. <h1 class="no-margins">{{$totalSite}}</h1>
  164. </div>
  165. </div>
  166. </div>
  167. <div class="col-sm-12">
  168. <div class="ibox ons float-e-margins">
  169. <div class="ibox-title">
  170. {{-- <span class="label label-success pull-right">总</span> --}}
  171. <h5>未下单</h5>
  172. <h1 class="no-margins">{{$noOrderCount}}</h1>
  173. </div>
  174. </div>
  175. </div>
  176. @foreach($statusResult as $item)
  177. <div class="col-sm-12">
  178. <div class="ibox ons float-e-margins">
  179. <div class="ibox-title">
  180. {{-- <span class="label label-info pull-right">总</span> --}}
  181. <h5>{{$item['title']}}</h5>
  182. <h1 class="no-margins">{{$item['count']}}</h1>
  183. </div>
  184. </div>
  185. </div>
  186. @endforeach
  187. </div>
  188. </div>
  189. </div>
  190. </div>
  191. </div>
  192. </body>
  193. @endsection
  194. @section('footer')
  195. <script src="{{asset('js/plugins/layDate-v5.0.9/laydate/laydate.js')}}"></script>
  196. <script>
  197. laydate.render({
  198. elem: '#monthRange'
  199. , type: 'month'
  200. // , format: 'yyyy-MM'
  201. , range: true
  202. , done: function (value, date, endDate) {
  203. console.log(value.split(" - "));
  204. console.log(value); //得到日期生成的值,如:2017-08-18
  205. console.log(date); //得到日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
  206. console.log(endDate); //得结束的日期时间对象,开启范围选择(range: true)才会返回。对象成员同上。
  207. // $("#monthRange").text(value);
  208. tips.ajax({
  209. url: "/admin/analyze/index/overview-ajax?monthRange="+value,
  210. success: function (res) {
  211. var dataRes =res.data;
  212. console.log(dataRes);
  213. $("#nowMonthOrder").text(dataRes.nowMonthOrder);
  214. $("#nowMonthAssign").text(dataRes.nowMonthAssign);
  215. $("#nowMonthOnline").text(dataRes.nowMonthOnline);
  216. $("#nowMonthReach").text(dataRes.nowMonthReach);
  217. $("#onlineConsume").text(dataRes.onlineConsume);
  218. $("#reachConsume").text(dataRes.reachConsume);
  219. }
  220. })
  221. }
  222. });
  223. </script>
  224. @endsection