xuqiantongji-new.js 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706
  1. var self,
  2. initLevel,
  3. type,
  4. level,
  5. area,
  6. title,
  7. startDate = '',
  8. endDate = '',
  9. lowLevel,
  10. lowCode = '',
  11. dateType = 1, //折线图坐标值1-日,2-周,3-月
  12. areaType; //标记底部区域选中的tab的值, 4 - 各区, 3 - 社区, 2 - 团队
  13. var userRole;
  14. var CITY_CODE = "350200";//默认厦门市
  15. var reqParam = []; //请求参数
  16. var reqList = []; //请求的链接数据,根据这些信息后退的时候使用
  17. var initTabOffsetTop = 0; //初始化时,底部tab距离顶部的位置
  18. var getOnlineReqParam; //获取线上续签数据的请求参数
  19. //定义年份
  20. var chooseYear;
  21. var now = new Date();
  22. if(now.getMonth() >= 6){
  23. chooseYear = now.getFullYear();
  24. }else{
  25. chooseYear = now.getFullYear() - 1;
  26. }
  27. mui.plusReady(function(){
  28. var self = plus.webview.currentWebview();
  29. userRole = plus!=null ? JSON.parse(plus.storage.getItem("selectedRole")) : {};
  30. initLevel = userRole.code == CITY_CODE ? 4 : userRole.code.length==6 ? 3 : 2;
  31. level = initLevel;
  32. area = userRole.code;
  33. title = userRole.name;
  34. startDate = getStartDate();
  35. endDate = getEndDate();
  36. //初始默认选中的时间和类型
  37. $(".choose-label").text("所有居民");
  38. $("#areaTitle").text(title);
  39. //控制底部各区等tab的显示
  40. showTabs();
  41. initReqParams(); //现获得页面请求的接口参数
  42. //记录返回链接信息
  43. reqList.push({
  44. level: level,
  45. lowLevel: lowLevel,
  46. area: area,
  47. title: title,
  48. lowCode: lowCode,
  49. req: reqParam
  50. });
  51. loadData([0,1,2]); //现获得页面请求的接口参数
  52. getOnlineInfo();
  53. initTabOffsetTop = $(".area-tab-panel").offset().top;
  54. initScroller();
  55. shaixuanInit(self);
  56. bindEvents();
  57. });
  58. //获得页面请求的接口参数
  59. function initReqParams(){
  60. var topIndex = {"4": "29", "3": "44", "2": "43"}, //顶部区域对应的level : index
  61. bottomIndex = {"4": "44", "3": "43", "2": "42"}; //与选中的当前底部区域tab的值有关 areaType
  62. if(lowCode && lowCode != "0"){
  63. var topIndex = {"4": "51", "3": "54", "2": "53"}, //顶部区域对应的level : index
  64. bottomIndex = {"4": "54", "3": "53", "2": "52"}; //与选中的当前底部区域tab的值有关 areaType
  65. }
  66. var index = topIndex[level],
  67. bIndex = bottomIndex[areaType];
  68. reqParam = [{
  69. url: "/statistics/getRenewPercentAndChangePercent",
  70. reqType: 'get',
  71. data: {level:level, code:area, year: chooseYear, index: index, lowCode: lowCode}
  72. },{
  73. url: "/statistics/interval_total",
  74. reqType: 'get',
  75. data: {level: level, area: area, startDate: startDate, endDate: endDate, interval: dateType, index: index, lowCode: lowCode}
  76. },{
  77. url: "/statistics/lowlevel_all_sign_renew",
  78. reqType: 'post',
  79. data: {sort: 1, date: endDate, level: level, index: bIndex, area: area, lowCode: lowCode}
  80. }];
  81. getOnlineReqParam = {
  82. level:level,
  83. code:area,
  84. year: chooseYear,
  85. index: index,
  86. lowCode: lowCode
  87. }
  88. if(lowLevel){
  89. reqParam[2].data.lowLevel = lowLevel;
  90. }
  91. }
  92. /*
  93. * 加载页面数据
  94. * @param loadArr array 记录需要请求的区域0-顶部,1-中间,2-底部
  95. */
  96. function loadData(loadArr){
  97. plus.nativeUI.showWaiting();
  98. getJieZhiTime();
  99. var reqPromise = [];
  100. for(var i=0; i<loadArr.length; i++){
  101. var j = loadArr[i];
  102. reqPromise.push(reqParam[j]);
  103. }
  104. getReqPromises(reqPromise, true).then(function(ress){
  105. var res1, res2, res3;
  106. for(var i=0; i<loadArr.length; i++){
  107. var j = loadArr[i] + 1;
  108. if(j == 1){
  109. res1 = ress[i];
  110. }
  111. if(j == 2){
  112. res2 = ress[i];
  113. }
  114. if(j == 3){
  115. res3 = ress[i];
  116. }
  117. }
  118. if(res1 && res1.status == 200){
  119. handleTopData(res1.data);
  120. }
  121. if(res2 && res2.status == 200){
  122. handleSecondPanelData(res2.data);
  123. }
  124. if(res3){
  125. if(res3.status == 200){
  126. listHandle(res3.data);
  127. }else{
  128. $("#listTable").empty();
  129. mui.toast(res3.msg);
  130. }
  131. }
  132. plus.nativeUI.closeWaiting();
  133. });
  134. }
  135. /**
  136. * 获得线上签约数据
  137. */
  138. function getOnlineInfo(){
  139. var url = "/statistics/getRenewPercentOnline";
  140. sendGet(url, getOnlineReqParam, null, function(res){
  141. if(res.status == 200){
  142. $("#onlineV1").text(res.data.thisYearRenewOnline);
  143. $("#totalV").text(" / "+ res.data.thisYearRenew);
  144. }else{
  145. mui.toast(res.msg);
  146. }
  147. }, true);
  148. }
  149. /*
  150. * 加载数据截止时间
  151. */
  152. function getJieZhiTime(){
  153. sendPost("/statistics/time",null,function(res){
  154. },function(res){
  155. if(res.status=="200"){
  156. var date = (res.data && res.data.substring(11,16)) || "";
  157. $(".jiezhi-time").html("("+date+")");
  158. }
  159. });
  160. }
  161. /*
  162. * 处理顶部水球图数据
  163. */
  164. function handleTopData(res){
  165. //绘制水球图
  166. $('#xuqianlv').waterbubble({
  167. txt: res.renewRange,
  168. data: parseFloat(res.renewRange)/100,
  169. waterColor: '#12B7F5',
  170. lineWidth:2,
  171. radius: 40,
  172. textColor: 'rgba(0, 0, 0, 1)',
  173. font: '14px arial'
  174. });
  175. $(".p-xuqianlv").html("<span class='c-12b7f5'>"+res.thisYearRenew+"</span>/"+res.yesterYearSign);
  176. $('#zhuanqianlv').waterbubble({
  177. txt: res.switchRange,
  178. data: parseFloat(res.switchRange)/100,
  179. waterColor: '#4ECD70',
  180. lineWidth:2,
  181. radius: 40,
  182. textColor: 'rgba(0, 0, 0, 1)',
  183. font: '14px arial'
  184. });
  185. $(".p-zhuanqianlv").html("<span class='c-4ecd70'>"+res.thisYearSwithch+"</span>/"+res.thisYearRenew);
  186. }
  187. /*
  188. * 处理中间折线图数据
  189. */
  190. function handleSecondPanelData(data){
  191. for(var p in data){
  192. var xData = _.map(data[p].data, function(o){
  193. return o.range;
  194. });
  195. var yData = _.map(data[p].data, function(o){
  196. return o.amount;
  197. });
  198. var lastIndex = yData.length % 10;
  199. if(yData.length >10 ){
  200. var dataZoom_end = 100-(9/yData.length)*100;
  201. }else{
  202. var dataZoom_end = 0;
  203. }
  204. //初始给定第一版页面中时间区间
  205. if(dateType == 3){
  206. var d1 = xData[yData.length - lastIndex],
  207. d2 = xData[yData.length -1];
  208. $("#startValue").text(d1.substr(0,4)+"年"+d1.substr(5,2)+"月");
  209. $("#endValue").text(d2.substr(0,4)+"年"+d2.substr(5,2)+"月");
  210. }else{
  211. $("#startValue").text(xData[yData.length - lastIndex]);
  212. $("#endValue").text(xData[yData.length -1]);
  213. }
  214. var lineCharts = echarts.init(document.getElementById('lineChart'));
  215. var options = {
  216. tooltip: {
  217. trigger: 'axis'
  218. },
  219. legend: {
  220. top: 'bottom',
  221. data:['总续签人数']
  222. },
  223. grid: {
  224. left: '10px',
  225. right: '10px',
  226. bottom: '30px',
  227. top: '10px',
  228. containLabel: true
  229. },
  230. xAxis: {
  231. type: 'category',
  232. boundaryGap: false,
  233. data: xData,
  234. axisLabel: {
  235. interval:0,//横轴信息全部显示
  236. formatter: function (value, index) {
  237. if(dateType == 1 || dateType == 2){
  238. if(index == 0){
  239. $("#startValue").text(value);
  240. return value.substr(5,2)+"月"+value.substr(8,2);
  241. }else{
  242. if(index == 10){
  243. $("#endValue").text(value);
  244. }
  245. return value.substr(8,2);
  246. }
  247. }else if(dateType == 3){
  248. var val = value.substr(5,2)+"月"
  249. if(index == 0){
  250. $("#startValue").text(value.substr(0,4)+"年"+val);
  251. }else{
  252. if(index == 9){
  253. $("#endValue").text(value.substr(0,4)+"年"+val);
  254. }
  255. }
  256. return val;
  257. }
  258. }
  259. }
  260. },
  261. yAxis: {
  262. type: 'value',
  263. axisPointer: {
  264. snap: true
  265. },
  266. scale: true,
  267. minInterval: 1,
  268. boundaryGap: ['10%', '30%']
  269. },
  270. dataZoom: [{//给x轴设置滚动条
  271. show: false,
  272. start: dataZoom_end,
  273. end: 100,
  274. type: 'slider',
  275. zoomLock: true,
  276. },{ //下面这个属性是内容区域配置
  277. start: dataZoom_end,
  278. end: 100,
  279. type: 'inside',
  280. zoomLock: true,
  281. }],
  282. series: [{
  283. name: '总续签人数',
  284. type: 'line',
  285. smooth: true,
  286. data: yData,
  287. lineStyle:{
  288. normal: {
  289. color: '#12b7f5'
  290. }
  291. },
  292. itemStyle:{
  293. normal: {
  294. color: '#12b7f5'
  295. }
  296. }
  297. }]
  298. };
  299. lineCharts.setOption(options);
  300. }
  301. }
  302. /*
  303. * 处理底部区域数据
  304. */
  305. function listHandle(res){
  306. for(var k in res){
  307. var list = res[k];
  308. var topArr = soreRank(amountArr(list));
  309. list = _.map(list, function(o, index){
  310. o.top = topArr[index];
  311. o.rate = parseFloat(o.rate).toFixed(2);
  312. o.targetRate = parseFloat(o.targetRate).toFixed(2);
  313. return o;
  314. })
  315. var html = template("data-list", {list: list, level: level, lowLevel: lowLevel});
  316. $("#listTable").empty().append(html);
  317. }
  318. }
  319. /*
  320. * 控制底部各区等tab的显示,根据level来控制
  321. */
  322. function showTabs(){
  323. $(".area-tab").removeClass("active");
  324. switch(level){
  325. case 4:
  326. $(".area-tab").show();
  327. $(".area-tab").eq(0).addClass("active");
  328. areaType = "4";
  329. break;
  330. case 3:
  331. $(".area-tab").eq(0).hide();
  332. $(".area-tab").eq(1).show();
  333. $(".area-tab").eq(1).addClass("active");
  334. areaType = "3";
  335. break;
  336. case 2:
  337. $(".area-tab").eq(0).hide();
  338. $(".area-tab").eq(1).hide();
  339. $(".area-tab").eq(2).addClass("active");
  340. areaType = "2";
  341. break;
  342. }
  343. }
  344. /*
  345. * 初始化scroller
  346. */
  347. function initScroller(){
  348. //阻尼系数
  349. var deceleration = mui.os.ios?0.003:0.0009;
  350. mui('.mui-scroll-wrapper').scroll({
  351. bounce: false,
  352. indicators: true, //是否显示滚动条
  353. deceleration:deceleration
  354. });
  355. mui('.mui-scroll-wrapper').pullRefresh({
  356. down: {
  357. callback: function() {
  358. var self = this;
  359. setTimeout(function() {
  360. initReqParams();
  361. loadData([0,1,2]);
  362. getOnlineInfo();
  363. self.endPulldownToRefresh();
  364. }, 1000);
  365. }
  366. }
  367. });
  368. }
  369. /**
  370. * 初始化筛选事件
  371. */
  372. function shaixuanInit(main){
  373. var shaixuan = plus.webview.getWebviewById('xq-shaixuan.html');
  374. if(!shaixuan){
  375. shaixuan = mui.createWindow({
  376. id: 'xq-shaixuan.html',
  377. url: 'xq-shaixuan.html',
  378. styles: {
  379. top: 0,
  380. bottom: 0,
  381. left: '20%',
  382. width: '80%',
  383. scorllIndicator: "none"
  384. },
  385. show:{
  386. aniShow: "slide-in-right",
  387. duration: "400"
  388. },
  389. extras:{
  390. showType: 1
  391. }
  392. });
  393. }
  394. window.addEventListener("hideShaiXuan",function(){
  395. console.log("hideShaiXuan");
  396. main.setStyle({mask:"none"});
  397. shaixuan.hide();
  398. }, false);
  399. window.addEventListener("showShaiXuan", function() {
  400. shaixuan.show();
  401. main.setStyle({mask:"rgba(0,0,0,0.5)"});
  402. main.addEventListener("maskClick",function(){
  403. main.setStyle({mask:"none"});
  404. shaixuan.hide();
  405. }, false);
  406. });
  407. }
  408. function bindEvents(){
  409. //签约率点击跳转去线上签约进展页面
  410. $("#onlineInfo").on('tap', function(){
  411. openWebview("xuqiantongji-online.html",{
  412. level: level,
  413. title: title,
  414. area: area,
  415. lowCode: lowCode,
  416. labelName: $(".choose-label").text()
  417. })
  418. });
  419. //转签率点击了进入续签分析页面
  420. $("#zhuanqianlv").on("tap", function(){
  421. if(!lowCode || lowCode=='0'){
  422. mui.openWindow({
  423. url: "renew-analysis.html",
  424. id: "renew-analysis.html",
  425. extras:{
  426. level: level,
  427. code: area,
  428. title: title
  429. }
  430. });
  431. }
  432. });
  433. //说明信息相关事件
  434. $("#closeBtn").on("tap", function(){
  435. $(".information").hide();
  436. });
  437. $(".info-icon").on("tap", function(){
  438. $(".information").show();
  439. });
  440. //左滑筛选区域的数据
  441. $('.header-link').on("tap", function(){
  442. var self = plus.webview.currentWebview();
  443. mui.fire(self, "showShaiXuan");
  444. });
  445. //日、周、月按钮切换
  446. $(".date-tag").on("tap",function(){
  447. dateType = $(this).attr("data-type");
  448. $(".date-tag").removeClass("active");
  449. $(this).addClass("active");
  450. initReqParams();
  451. loadData([1]); //只加载中间区域的数据
  452. });
  453. //底部各区等区域的tab切换
  454. $(".area-tab").on('tap', function(){
  455. var $this = $(this),
  456. type = $this.attr("data-val"); //4 - 各区, 3 - 社区, 2 - 团队
  457. areaType = type;
  458. if($this.hasClass("active")){
  459. return false;
  460. }
  461. $(".area-tab").removeClass("active");
  462. $this.addClass("active");
  463. if(type == "4"){
  464. lowLevel = 0;
  465. }else if(type == "3"){
  466. lowLevel = 2;
  467. }else{
  468. lowLevel = 1;
  469. }
  470. initReqParams();
  471. loadData([2]);
  472. });
  473. //底部每条记录的点击事件
  474. $("#listTable").on('tap', ".data-row", function(){
  475. var $this = $(this),
  476. name = $this.attr("data-name"),
  477. code = $this.attr("data-code"),
  478. $selectTab = $(".area-tab.active");
  479. if($selectTab.attr("data-val") == "2"){ //获得团队信息,弹框显示数据
  480. showTeamInfo(code);
  481. return false;
  482. }
  483. title = name;
  484. area = code;
  485. var newlevel = level - 1;
  486. //如果是市级管理员,先点击“社区”tab后再往下看下一级的数据,需要将level再-1
  487. if(newlevel == 3 && lowLevel == 2){
  488. newlevel -- ;
  489. }
  490. lowLevel = '';
  491. level = newlevel;
  492. $("#areaTitle").text(title);
  493. //判断当前tab的位置
  494. var top = $(".area-tab-panel").offset().top;
  495. if(top < 0){
  496. mui(".mui-scroll-wrapper").scroll().scrollTo(0, -(parseInt(initTabOffsetTop)/2), 500);
  497. }
  498. showTabs();
  499. initReqParams();
  500. //记录返回链接信息
  501. reqList.push({
  502. level: level,
  503. lowLevel: lowLevel,
  504. area: area,
  505. title: title,
  506. lowCode: lowCode,
  507. req: reqParam
  508. });
  509. loadData([0,1,2]);
  510. getOnlineInfo();
  511. });
  512. //弹出遮罩
  513. $(".icon-remark").on("click", function(e) {
  514. $(".modal-overlay").addClass("modal-overlay-visible");
  515. setTimeout(function(){
  516. $(".modal-content").show();
  517. },50)
  518. });
  519. $(".div-close,.modal-overlay").on("click",function(){
  520. $(".modal-overlay").removeClass("modal-overlay-visible");
  521. $(".modal-content").hide();
  522. });
  523. //添加页面监听
  524. window.addEventListener("refresh", function(e){
  525. lowCode = e.detail.lowCode;
  526. var name = e.detail.name;
  527. //重置变量值
  528. level = initLevel;
  529. area = userRole.code;
  530. title = userRole.name;
  531. lowLevel = "";
  532. startDate = getStartDate();
  533. endDate = getEndDate();
  534. $("#areaTitle").text(title);
  535. $(".choose-label").text(name);
  536. showTabs();
  537. initReqParams();
  538. //清空请求数组
  539. reqList.splice(0, reqList.length);
  540. //记录返回链接信息
  541. reqList.push({
  542. level: level,
  543. lowLevel: lowLevel,
  544. area: area,
  545. title: title,
  546. lowCode: lowCode,
  547. req: reqParam
  548. });
  549. loadData([0,1,2]);
  550. getOnlineInfo();
  551. });
  552. }
  553. /*
  554. * 获得团队信息
  555. */
  556. function showTeamInfo(teamId){
  557. var url = "/doctor/admin-teams/teams/info",
  558. params = {
  559. teamId: teamId
  560. };
  561. plus.nativeUI.showWaiting();
  562. sendGet(url, params, null, function(res){
  563. if(res.status == 200){
  564. var data = res.data;
  565. data.memberLength = data.members.length;
  566. var html = template("teamInfo", data);
  567. $("#teamInfoBox").empty().append(html);
  568. $(".modal-overlay").addClass("modal-overlay-visible");
  569. setTimeout(function(){
  570. $(".modal-content").show();
  571. },50)
  572. }else{
  573. mui.toast(res.msg);
  574. }
  575. plus.nativeUI.closeWaiting();
  576. }, true);
  577. }
  578. function getStartDate(){
  579. return chooseYear+'-07-01';
  580. }
  581. //获取结束时间
  582. function getEndDate(){
  583. var nowdate = new Date();
  584. var year = nowdate.getFullYear();
  585. var month = nowdate.getMonth() + 1;
  586. var day = nowdate.getDate();
  587. var endDate = new Date((parseInt(chooseYear)+1) + '-06-30');
  588. var now = new Date();
  589. if(now <= endDate){
  590. return now.format("yyyy-MM-dd");
  591. }else{
  592. return (parseInt(chooseYear)+1) + '-06-30';
  593. }
  594. }
  595. //续签量数据集合
  596. function amountArr(list){
  597. var amountArr = [];
  598. for(var k in list){
  599. amountArr.push(list[k].renewNum);
  600. }
  601. return amountArr;
  602. }
  603. //排名方法
  604. function soreRank(arr){
  605. var temp = [];
  606. var lis = [];
  607. for(var i=0;i<arr.length;i++){
  608. lis.push(arr[i]);
  609. }
  610. lis = _.uniq(lis);
  611. for(var i=0;i<arr.length;i++){
  612. temp[i] = lis.indexOf(arr[i])+1;
  613. }
  614. return temp;
  615. }
  616. //返回事件
  617. var old_back = mui.back;
  618. mui.back = function(){
  619. if(reqList.length == 1){
  620. old_back();
  621. }
  622. else{
  623. var preInfo = reqList[reqList.length - 1];
  624. if(preInfo.level == level && preInfo.lowLevel == lowLevel){
  625. reqList.pop();
  626. var info = reqList[reqList.length - 1];
  627. }else{
  628. info = preInfo;
  629. }
  630. level = info.level;
  631. area = info.area;
  632. title = info.title;
  633. lowLevel = info.lowLevel;
  634. sumType = info.sumType;
  635. tagCode = info.tagCode;
  636. $("#areaTitle").html(title);
  637. showTabs();
  638. initReqParams();
  639. loadData([0,1,2]);
  640. getOnlineInfo();
  641. }
  642. }