index.blade.php 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330
  1. @extends('admin/site/side_layout')
  2. @section('header_extend')
  3. @endsection
  4. @section('right')
  5. <link href="{{asset('css/plugins/switchery/switchery.css')}}" rel="stylesheet">
  6. <style>
  7. .btn-primary, .btn-info {
  8. background: #009688 !important;
  9. border-color: #009688 !important;
  10. }
  11. </style>
  12. <body class="gray-bg">
  13. <div class="wrapper wrapper-content animated fadeInRight">
  14. <div class="row">
  15. <div class="col-sm-12">
  16. <div class="ibox float-e-margins">
  17. <div class="ibox-content">
  18. <div class="row">
  19. <div class="col-sm-6">
  20. <div class="ibox float-e-margins">
  21. <div class="ibox-title">
  22. <h5>百千约访流量</h5>
  23. </div>
  24. <div class="ibox-content">
  25. <div id="bqFlow" style="width: 100%;height: 300px;"></div>
  26. </div>
  27. </div>
  28. </div>
  29. <div class="col-sm-6">
  30. <div class="ibox float-e-margins">
  31. <div class="ibox-title">
  32. <h5>百千约访后台询盘</h5>
  33. </div>
  34. <div class="ibox-content">
  35. <div id="bqInquiry" style="width: 100%;height: 300px;"></div>
  36. </div>
  37. </div>
  38. </div>
  39. </div>
  40. <div class="table-responsive">
  41. <table id="table" class="table table-condensed" data-mobile-responsive="true"></table>
  42. </div>
  43. </div>
  44. </div>
  45. <div class="ibox-content">
  46. <form method="get" class="form-horizontal" id="form">
  47. <div class="col-sm-6">
  48. <div class="ibox float-e-margins">
  49. <div class="ibox-title">
  50. <h5>百千约访客户询盘</h5>
  51. </div>
  52. <div class="ibox-content">
  53. <div id="clientInquiry" style="width: 100%;height: 300px;"></div>
  54. </div>
  55. </div>
  56. </div>
  57. <div class="form-group">
  58. @foreach($clientInquireDate as $item)
  59. <label class="col-sm-2 control-label" for="nickname"><span
  60. class="red">* </span>自定义客户询盘时间{{$item['date']}}:</label>
  61. <div class="col-sm-2">
  62. <input type="text" class="form-control" id="{{$item['date']??''}}"
  63. name="{{$item['date']??''}}" autocomplete="off"
  64. value="{{$item['clientInquire']??''}}">
  65. </div>
  66. @endforeach
  67. </div>
  68. <div class="form-group">
  69. <div class="col-sm-4 col-sm-offset-2">
  70. <button class="btn btn-primary" type="button" onclick="utils.saveFlow()"
  71. id="save">
  72. 保存
  73. </button>
  74. <button class="btn btn-white" type="button" id="cancel">取消</button>
  75. </div>
  76. </div>
  77. </form>
  78. </div>
  79. </div>
  80. </div>
  81. </div>
  82. <input type="hidden" value="{{$siteId}}" id="siteId">
  83. </body>
  84. @endsection
  85. @section('footer_extend')
  86. <script src="{{asset('js/plugins/layDate-v5.0.9/laydate/laydate.js')}}"></script>
  87. <script src="{{asset('js/plugins/echarts/echarts.min.js')}}"></script>
  88. <script src="{{asset('js/plugins/wonderland/wonderland.js?v=1.3')}}"></script>
  89. <script>
  90. var utils = {
  91. saveFlow: function () {
  92. var ajaxConfig = {
  93. url: '/admin/bqTraffic/save/{{$siteId}}',
  94. type: 'post',
  95. data: $('#form').serialize(),
  96. success: function () {
  97. layer.msg('操作成功', {
  98. icon: 1,
  99. time: 1500 //2秒关闭(如果不配置,默认是3秒)
  100. }, function () {
  101. window.location.reload()
  102. });
  103. }
  104. };
  105. tips.ajax(ajaxConfig);
  106. }
  107. };
  108. //流量
  109. var config = {};
  110. config.url = '/admin/bqTraffic/sites/{{$siteId}}';
  111. config.pageSize = 300;
  112. config.showColumns = true;
  113. config.paginationDetailHAlign = 'right';
  114. config.columns = [ //字段
  115. {title: '公司', field: 'cn_title', align: 'center', width: '200px'},
  116. {title: '网站', field: 'domain', align: 'center', width: '240px'},
  117. {title: '下单时间', field: 'order_at', align: 'center', width: '120px'},
  118. {title: '上线时间', field: 'online_at', align: 'center', width: '120px'},
  119. {title: '约访时间', field: 'bq_at', align: 'center', width: '120px'},
  120. {title: '百千客户评分', field: 'bq_score', align: 'center', width: '120px'},
  121. {title: '月流量300 - 时长', field: 'duration_300', align: 'center', width: '120px'},
  122. {title: '月流量500 - 时长', field: 'duration_500', align: 'center', width: '120px'},
  123. {title: '月流量1000 - 时长', field: 'duration_1000', align: 'center', width: '120px'},
  124. {title: '月流量1500 - 时长', field: 'duration_1500', align: 'center', width: '120px'},
  125. {title: '月流量2000 - 时长', field: 'duration_2000', align: 'center', width: '120px'},
  126. {title: '月流量', field: 'traffic', align: 'center', width: '160px', sortable: true},
  127. {title: '询盘总数', field: 'inquire', align: 'center', width: '160px'},
  128. ];
  129. tips.bootstrapTable(config);
  130. //流量
  131. var bqFlowChart = echarts.init(document.getElementById('bqFlow'),'wonderland');
  132. var bqFlowXAxis = JSON.parse('{!!json_encode($trafficList['xAxis'])!!}');
  133. var bqFlowYAix = JSON.parse('{!!json_encode($trafficList['yAxis'])!!}');
  134. var bqFlowOption = {
  135. tooltip: {
  136. trigger: 'axis',
  137. axisPointer: {
  138. type: 'cross',
  139. crossStyle: {
  140. color: '#999'
  141. }
  142. }
  143. },
  144. toolbox: {
  145. feature: {
  146. dataView: {show: true, readOnly: false},
  147. magicType: {show: true, type: ['bar', 'pie']},
  148. restore: {show: true},
  149. saveAsImage: {show: true}
  150. }
  151. },
  152. legend: {
  153. data: ['流量']
  154. },
  155. xAxis: [
  156. {
  157. type: 'category',
  158. data: bqFlowXAxis,
  159. axisPointer: {
  160. type: 'shadow'
  161. },
  162. splitLine: {
  163. show: false
  164. }
  165. }
  166. ],
  167. yAxis: [
  168. {
  169. type: 'value',
  170. name: '',
  171. min: 0,
  172. axisLabel: {
  173. formatter: '{value}'
  174. },
  175. axisLine: {
  176. show: false //隐藏Y轴
  177. }
  178. }
  179. ],
  180. series: [
  181. {
  182. name: '流量',
  183. // type: 'line',
  184. type: 'bar',
  185. data: bqFlowYAix
  186. }
  187. ]
  188. };
  189. bqFlowChart.setOption(bqFlowOption);
  190. //询盘
  191. var bqInquiryChart = echarts.init(document.getElementById('bqInquiry'),'wonderland');
  192. var bqInquiryXAxis = JSON.parse('{!!json_encode($inquireList['xAxis'])!!}');
  193. var bqInquiryYAix = JSON.parse('{!!json_encode($inquireList['yAxis'])!!}');
  194. var bqInquiryOption = {
  195. tooltip: {
  196. trigger: 'axis',
  197. axisPointer: {
  198. type: 'cross',
  199. crossStyle: {
  200. color: '#999'
  201. }
  202. }
  203. },
  204. toolbox: {
  205. feature: {
  206. dataView: {show: true, readOnly: false},
  207. magicType: {show: true, type: ['bar', 'pie']},
  208. restore: {show: true},
  209. saveAsImage: {show: true}
  210. }
  211. },
  212. legend: {
  213. data: ['后台询盘']
  214. },
  215. xAxis: [
  216. {
  217. type: 'category',
  218. data: bqInquiryXAxis,
  219. axisPointer: {
  220. type: 'shadow'
  221. },
  222. splitLine: {
  223. show: false
  224. }
  225. }
  226. ],
  227. yAxis: [
  228. {
  229. type: 'value',
  230. name: '',
  231. min: 0,
  232. axisLabel: {
  233. formatter: '{value}'
  234. },
  235. axisLine: {
  236. show: false //隐藏Y轴
  237. }
  238. }
  239. ],
  240. series: [
  241. {
  242. name: '后台询盘',
  243. // type: 'line',
  244. type: 'bar',
  245. data: bqInquiryYAix
  246. }
  247. ]
  248. };
  249. bqInquiryChart.setOption(bqInquiryOption);
  250. //询盘
  251. var clientInquiryChart = echarts.init(document.getElementById('clientInquiry'),'wonderland');
  252. var clientInquiryXAxis = JSON.parse('{!!json_encode($clientInquireList['xAxis'])!!}');
  253. var clientInquiryYAix = JSON.parse('{!!json_encode($clientInquireList['yAxis'])!!}');
  254. var clientInquiryOption = {
  255. tooltip: {
  256. trigger: 'axis',
  257. axisPointer: {
  258. type: 'cross',
  259. crossStyle: {
  260. color: '#999'
  261. }
  262. }
  263. },
  264. toolbox: {
  265. feature: {
  266. dataView: {show: true, readOnly: false},
  267. magicType: {show: true, type: ['bar', 'pie']},
  268. restore: {show: true},
  269. saveAsImage: {show: true}
  270. }
  271. },
  272. legend: {
  273. data: ['客户询盘']
  274. },
  275. xAxis: [
  276. {
  277. type: 'category',
  278. data: clientInquiryXAxis,
  279. axisPointer: {
  280. type: 'shadow'
  281. },
  282. splitLine: {
  283. show: false
  284. }
  285. }
  286. ],
  287. yAxis: [
  288. {
  289. type: 'value',
  290. name: '',
  291. min: 0,
  292. axisLabel: {
  293. formatter: '{value}'
  294. },
  295. axisLine: {
  296. show: false //隐藏Y轴
  297. }
  298. }
  299. ],
  300. series: [
  301. {
  302. name: '客户询盘',
  303. // type: 'line',
  304. type: 'bar',
  305. data: clientInquiryYAix
  306. }
  307. ]
  308. };
  309. clientInquiryChart.setOption(clientInquiryOption);
  310. </script>
  311. @endsection