agent_data_analysis.html 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562
  1. {extend name="public/layout" /} {block name="title"}新增训练计划{/block} {block name="body"}
  2. <style type="text/css">
  3. html,
  4. body {
  5. display: block;
  6. min-width: 1100px;
  7. }
  8. body::-webkit-scrollbar {
  9. /*滚动条整体样式*/
  10. width: 4px;
  11. /*高宽分别对应横竖滚动条的尺寸*/
  12. height: 1px;
  13. }
  14. body::-webkit-scrollbar-thumb {
  15. /*滚动条里面小方块*/
  16. border-radius: 10px;
  17. box-shadow: inset 0 0 5px rgba(97, 184, 179, 0.1);
  18. background: #78b4b4;
  19. }
  20. body::-webkit-scrollbar-track {
  21. /*滚动条里面轨道*/
  22. box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
  23. border-radius: 10px;
  24. background: #ededed;
  25. }
  26. .layui-table thead tr,
  27. .layui-table-header {
  28. background-color: #D8E6F1 !important;
  29. }
  30. .layui-fluid {
  31. display: block;
  32. box-shadow: 0 0 4px 0 #B6CADE;
  33. border-radius: 5px;
  34. margin: 15px;
  35. background-color: #ffffff;
  36. }
  37. .layui-form-label {
  38. width: auto;
  39. }
  40. .layui-card .layui-tab-brief .layui-tab-title li.layui-this {
  41. color: #249EFB;
  42. }
  43. .layui-tab-brief>.layui-tab-more li.layui-this:after, .layui-tab-brief>.layui-tab-title .layui-this:after {
  44. border: none;
  45. }
  46. .layui-card .layui-tab-brief .layui-tab-title .layui-this:after {
  47. width: 50px;
  48. height: 4px;
  49. background-color: #249EFB;
  50. top: 37px;
  51. left: 50%;
  52. transform: translateX(-50%);
  53. }
  54. .layui-tab-title li {
  55. margin: 0px 5px;
  56. }
  57. .layui-btn-xs,
  58. .layui-btn-xs:hover {
  59. border: 1px solid #249EFB;
  60. background-color: #fff;
  61. color: #249EFB;
  62. padding: 0px 10px;
  63. }
  64. .layui-btn-danger,
  65. .layui-btn-danger:hover {
  66. color: #FF5722;
  67. background-color: #fff;
  68. border: 1px solid #FF5722;
  69. padding: 0px 10px;
  70. }
  71. .layui-btn-primary {
  72. color: #249EFB;
  73. border: 1px solid #249EFB;
  74. }
  75. .layui-btn-primary:hover {
  76. color: #fff;
  77. }
  78. .layui-form-item .layui-inline {
  79. margin-bottom: 0px;
  80. margin-right: 0px !important;
  81. }
  82. .row {
  83. display: flex;
  84. }
  85. .layui-btn {
  86. background-color: #fff;
  87. color: #555;
  88. border: 1px solid #c9c9c9
  89. }
  90. .layui-btn:hover {
  91. background-color: #fff;
  92. color: #555;
  93. border: 1px solid #249efb;
  94. }
  95. .layui-btn-primary,
  96. .sBtn {
  97. background-color: #249efb;
  98. color: #fff;
  99. border: 1px solid #249efb;
  100. }
  101. .layui-btn-primary:hover {
  102. background-color: #249efb;
  103. color: #fff;
  104. border: 1px solid #249efb;
  105. }
  106. .ml10 {
  107. margin-left: 10px;
  108. }
  109. .line-middle {
  110. width: 10px;
  111. height: 100%;
  112. margin: 0px 10px;
  113. }
  114. .line {
  115. width: 10px;
  116. height: 2px;
  117. background-color: #999999;
  118. }
  119. </style>
  120. <body>
  121. <div class="layui-fluid">
  122. <div class="layui-card">
  123. <div class="layui-tab layui-tab-brief">
  124. <ul class="layui-tab-title">
  125. <li class="layui-this switchTab" data-index="1">
  126. 到访排行榜
  127. </li>
  128. <li class="switchTab" data-index="2">
  129. 定金排行榜
  130. </li>
  131. <li class="switchTab" data-index="3">
  132. 合同排行榜
  133. </li>
  134. </ul>
  135. </div>
  136. <div class="layui-form layui-card-header layuiadmin-card-header-auto" style="line-height: 0px;">
  137. <div class="layui-form-item">
  138. <div style="float: left;display: flex;align-items: center;">
  139. <div class="layui-inline row ml10" id="timeBtn">
  140. <input type="button" class="layui-btn" value="今日" />
  141. <input type="button" class="layui-btn" value="3天" />
  142. <input type="button" class="layui-btn" value="7天" />
  143. <input type="button" class="layui-btn" value="1个月" />
  144. </div>
  145. <div class="layui-inline ml10">
  146. <!-- 注意:这一层元素并不是必须的 -->
  147. <input type="text" class="layui-input" id="sDate" autocomplete="off" name="start_date" placeholder="选择开始日期">
  148. </div>
  149. <div class="line-middle">
  150. <div class="line"></div>
  151. </div>
  152. <div class="layui-inline">
  153. <!-- 注意:这一层元素并不是必须的 -->
  154. <input type="text" class="layui-input" id="eDate" autocomplete="off" name="end_date" placeholder="选择结束日期">
  155. </div>
  156. </div>
  157. <!-- <div style="float:left;" class="flexRow"> -->
  158. <!-- 去掉装修推荐官身份 -->
  159. <!-- <div class="layui-inline">
  160. <div class="layui-input-inline">
  161. <select name="broker" lay-filter="slt" class="broker">
  162. <option value="">全部装修推荐官</option>
  163. <option value="1">普通推荐官</option>
  164. <option value="2">网红推荐官</option>
  165. </select>
  166. </div>
  167. </div> -->
  168. <div class="layui-inline" style="margin-left: 10px;">
  169. <button class="layui-btn layuiadmin-btn-useradmin searchBtn submitbtn" style="background-color: #249EFB !important;color: #fff;border: none;" lay-submit lay-filter="search">
  170. <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
  171. </button>
  172. </div>
  173. <!-- </div> -->
  174. </div>
  175. </div>
  176. <div class="layui-card-body">
  177. <table lay-filter="dataAnalysis" id="dataAnalysis"></table>
  178. </div>
  179. </div>
  180. </div>
  181. </body>
  182. {/block} {block name="js"}
  183. <script type="text/html" id="table-train-action">
  184. <a class="layui-btn layui-btn-xs" lay-event="train-nuclear">积分核销</a>
  185. </script>
  186. <script type="text/html" id="show">
  187. <input type="checkbox" name="show" value="{{d.id}}" lay-skin="switch" lay-filter="show" {{ d.show == 1 ? 'checked' : '' }} id="clickshow">
  188. </script>
  189. <script type="text/html" id="employee_name">
  190. {{# if(d.employee){ }}
  191. <span>{{d.employee.name}}</span>
  192. {{# }else{ }}
  193. <span style="color: #cccccc;">无</span>
  194. {{# } }}
  195. </script>
  196. <script type="text/html" id="daodiannumtpl">
  197. <a href="javascript:void(0)" lay-event="visitNumber" style="color:blue;">
  198. {{# if(d.ph){ }}
  199. <span>{{d.ph}}</span>
  200. {{# }else{ }}
  201. <span style="color: #cccccc;">0</span>
  202. {{# } }}
  203. </a>
  204. </script>
  205. <script type="text/html" id="jiaodingnumtpl">
  206. <a href="javascript:void(0)" lay-event="makeupNumber" style="color:blue;">
  207. {{# if(d.ph){ }}
  208. <span>{{d.ph}}</span>
  209. {{# }else{ }}
  210. <span style="color: #cccccc;">0</span>
  211. {{# } }}</a>
  212. </script>
  213. <script type="text/html" id="qiandannumtpl">
  214. <a href="javascript:void(0)" lay-event="numberSigns" style="color:blue;">
  215. {{# if(d.ph){ }}
  216. <span>{{d.ph}}</span>
  217. {{# }else{ }}
  218. <span style="color: #cccccc;">0</span>
  219. {{# } }}</a>
  220. </script>
  221. <script type="text/html" id="agenttype">
  222. <span>{{d.agenttype.type_name}}</span>
  223. </script>
  224. <script>
  225. layui.config({
  226. base: '__LAYUI__/',
  227. urlbase: '/sys'
  228. }).extend({
  229. index: 'lib/index'
  230. }).use(['index', 'table', 'layedit', 'element','laydate'], function () {
  231. var $ = layui.$,
  232. table = layui.table,
  233. element = layui.element,
  234. laydate = layui.laydate,
  235. form = layui.form;
  236. var field = {};
  237. //日期范围
  238. laydate.render({
  239. elem: '#sDate',
  240. trigger: 'click'//呼出事件改成click
  241. });
  242. laydate.render({
  243. elem: '#eDate',
  244. trigger: 'click'//呼出事件改成click
  245. });
  246. form.on('submit(search)', function (data) {
  247. var broker = $('.broker').val();
  248. var sDate = $('#sDate').val();
  249. var eDate = $('#eDate').val();
  250. field['agent_type'] = broker;
  251. field['start_date'] = sDate;
  252. field['end_date'] = eDate;
  253. //执行重载
  254. table.reload('dataAnalysis', {
  255. where: field
  256. , page: { curr: 1 }
  257. });
  258. });
  259. switchTabs('1');//默认选中
  260. // tab切换
  261. $('.switchTab').click((e) => {
  262. let type = e.target.dataset.index;
  263. switchTabs(type);
  264. })
  265. function switchTabs (type) {
  266. if (type == 1) {
  267. //列表
  268. table.render({
  269. elem: '#dataAnalysis',
  270. autoSort: false,
  271. url: "{:url('agents/agent_data_analysis')}?type="+type,
  272. cols: [
  273. [{
  274. type: 'numbers',
  275. field: 'id',
  276. width: 80,
  277. title: '排名',
  278. sort: true
  279. }, {
  280. field: 'ph',
  281. title: '到访人数',
  282. templet: '#daodiannumtpl'
  283. }, {
  284. field: 'agent_name',
  285. title: '装修推荐官',
  286. }, {
  287. title: '装企人员',
  288. field: 'agent_employee_name',
  289. templet: '#employee_name'
  290. }, {
  291. title: '时间',
  292. field: 'addtime',
  293. }]
  294. ],
  295. page: true,
  296. limit: 30,
  297. height: 'full-200',
  298. text: '对不起,加载出现异常!'
  299. });
  300. } else if (type == 2) {
  301. let root_id = '{$employee.root_id}';
  302. let title = '定金人数';
  303. //列表
  304. table.render({
  305. elem: '#dataAnalysis',
  306. autoSort: false,
  307. url: "{:url('agents/agent_data_analysis')}?type="+type,
  308. cols: [
  309. [{
  310. type: 'numbers',
  311. field: 'id',
  312. width: 80,
  313. title: '排名',
  314. sort: true
  315. }, {
  316. field: 'ph',
  317. title: title,
  318. templet: '#jiaodingnumtpl'
  319. }, {
  320. field: 'agent_name',
  321. title: '装修推荐官',
  322. }, {
  323. title: '装企人员',
  324. field: 'agent_employee_name',
  325. templet: '#employee_name'
  326. }, {
  327. title: '时间',
  328. field: 'addtime',
  329. }]
  330. ],
  331. page: true,
  332. limit: 30,
  333. height: 'full-200',
  334. text: '对不起,加载出现异常!'
  335. });
  336. } else {
  337. //列表
  338. let root_id = '{$employee.root_id}';
  339. let title = '合同人数';
  340. table.render({
  341. elem: '#dataAnalysis',
  342. autoSort: false,
  343. url: "{:url('agents/agent_data_analysis')}?type="+type,
  344. cols: [
  345. [{
  346. type: 'numbers',
  347. field: 'id',
  348. width: 80,
  349. title: '排名',
  350. sort: true
  351. }, {
  352. field: 'ph',
  353. title:title,
  354. templet: '#qiandannumtpl'
  355. }, {
  356. field: 'agent_name',
  357. title: '装修推荐官',
  358. }, {
  359. title: '装企人员',
  360. field: 'agent_employee_name',
  361. templet: '#employee_name'
  362. }, {
  363. title: '时间',
  364. field: 'addtime',
  365. }]
  366. ],
  367. page: true,
  368. limit: 30,
  369. height: 'full-200',
  370. text: '对不起,加载出现异常!'
  371. });
  372. }
  373. }
  374. //处理日期选中
  375. function setYMD(time) {
  376. let dateTime = new Date(time);
  377. let year = dateTime.getFullYear();
  378. let Month = dateTime.getMonth() + 1;
  379. let days = dateTime.getDate();
  380. return `${year}-${Month > 9 ? Month : '0' + Month}-${days > 9 ? days : '0' + days}`;
  381. }
  382. var dateArr = {};
  383. var today = new Date().getTime();
  384. var oneTime = 24 * 60 * 60 * 1000;
  385. var threeDay1 = today - 3 * oneTime;
  386. var sevenDay1 = today - 6 * oneTime;
  387. var oneMonth = today - 30 * oneTime;
  388. dateArr = {
  389. nowS: setYMD(today),
  390. nowE: setYMD(today),
  391. threeDayS: setYMD(threeDay1),
  392. threeDayE: setYMD(today),
  393. sevenDayS: setYMD(sevenDay1),
  394. sevenDayE: setYMD(today),
  395. oneMonthS: setYMD(oneMonth),
  396. oneMonthE: setYMD(today),
  397. }
  398. $('#timeBtn').on('click', function (e) {
  399. if (!!(e.target.localName != 'input')) return;
  400. let o = document.querySelector('#timeBtn').children;
  401. if (e.target.classList.contains('layui-btn-primary') == true) {
  402. for (var i = 0; i < o.length; i++) {
  403. o[i].className = 'layui-btn';
  404. }
  405. $('#sDate').val('');
  406. $('#eDate').val('');
  407. return;
  408. } else {
  409. for (var i = 0; i < o.length; i++) {
  410. o[i].className = 'layui-btn';
  411. }
  412. e.target.className = 'layui-btn layui-btn-primary';
  413. if (!!(e.target.className.indexOf('layui-btn-primary') > 0)) {
  414. if (e.target.value == '今日') {
  415. $('#sDate').val(dateArr.nowS);
  416. $('#eDate').val(dateArr.nowE);
  417. } else if (e.target.value == '3天') {
  418. $('#sDate').val(dateArr.threeDayS);
  419. $('#eDate').val(dateArr.threeDayE);
  420. } else if (e.target.value == '7天') {
  421. $('#sDate').val(dateArr.sevenDayS);
  422. $('#eDate').val(dateArr.sevenDayE);
  423. } else {
  424. $('#sDate').val(dateArr.oneMonthS);
  425. $('#eDate').val(dateArr.oneMonthE);
  426. }
  427. }
  428. }
  429. })
  430. //监听列表
  431. table.on('tool(dataAnalysis)', function(obj) {
  432. console.log(obj);
  433. //return false;
  434. switch(obj.event) {
  435. case 'train-nuclear':
  436. layer.open({
  437. type: 2,
  438. title: ['积分核销', 'color:#333333;background-color:#D8E6F1;'],
  439. content: "{:url('agents/integral_nuclear')}?agentid="+obj.data.id,
  440. resize: false,
  441. area: ['80%', '80%'],
  442. // btn: ['确定', '取消'],
  443. yes: function (index, layero) {
  444. //点击确认触发 iframe 内容中的按钮提交
  445. // var submit = layero.find('iframe').contents().find("#talkskill-submit");
  446. // submit.click();
  447. }
  448. });
  449. break;
  450. case 'client':
  451. layer.open({
  452. type: 2,
  453. title: ['客户总览', 'color:#333333;background-color:#D8E6F1;'],
  454. content: "{:url('agents/agent_customer_list')}?agentid="+obj.data.id,
  455. resize: false,
  456. area: ['80%', '80%'],
  457. // btn: ['确定', '取消'],
  458. yes: function (index, layero) {
  459. //点击确认触发 iframe 内容中的按钮提交
  460. // var submit = layero.find('iframe').contents().find("#talkskill-submit");
  461. // submit.click();
  462. }
  463. });
  464. break;
  465. case 'visitNumber':
  466. //debugger
  467. layer.open({
  468. type: 2,
  469. title: ['到访人数', 'color:#333333;background-color:#D8E6F1;'],
  470. content: "{:url('agents/agent_kehu_list')}?agentid="+obj.data.id+'&type=1',
  471. resize: false,
  472. area: ['80%', '80%'],
  473. // btn: ['确定', '取消'],
  474. yes: function (index, layero) {
  475. //点击确认触发 iframe 内容中的按钮提交
  476. // var submit = layero.find('iframe').contents().find("#talkskill-submit");
  477. // submit.click();
  478. }
  479. });
  480. break;
  481. case 'makeupNumber':
  482. layer.open({
  483. type: 2,
  484. title: ['交定人数', 'color:#333333;background-color:#D8E6F1;'],
  485. content: "{:url('agents/agent_kehu_list')}?agentid="+obj.data.id+'&type=2',
  486. resize: false,
  487. area: ['80%', '80%'],
  488. // btn: ['确定', '取消'],
  489. yes: function (index, layero) {
  490. //点击确认触发 iframe 内容中的按钮提交
  491. // var submit = layero.find('iframe').contents().find("#talkskill-submit");
  492. // submit.click();
  493. }
  494. });
  495. break;
  496. case 'numberSigns':
  497. layer.open({
  498. type: 2,
  499. title: ['定金人数', 'color:#333333;background-color:#D8E6F1;'],
  500. content: "{:url('agents/agent_kehu_list')}?agentid="+obj.data.id+'&type=3',
  501. resize: false,
  502. area: ['80%', '80%'],
  503. // btn: ['确定', '取消'],
  504. yes: function (index, layero) {
  505. //点击确认触发 iframe 内容中的按钮提交
  506. // var submit = layero.find('iframe').contents().find("#talkskill-submit");
  507. // submit.click();
  508. }
  509. });
  510. break;
  511. }
  512. });
  513. //监听列表
  514. // table.on('tool(dataAnalysis)', function (obj) {
  515. // switch (obj.event) {
  516. // case 'train-nuclear':
  517. // layer.open({
  518. // type: 2,
  519. // title: ['积分核销', 'color:#333333;background-color:#D8E6F1;'],
  520. // content: "{:url('agent/integral_nuclear')}",
  521. // resize: false,
  522. // area: ['80%', '80%'],
  523. // // btn: ['确定', '取消'],
  524. // yes: function (index, layero) {
  525. // //点击确认触发 iframe 内容中的按钮提交
  526. // // var submit = layero.find('iframe').contents().find("#talkskill-submit");
  527. // // submit.click();
  528. // }
  529. // });
  530. // break;
  531. // }
  532. // });
  533. });
  534. </script>
  535. {/block}