qianyuetongji-new.js 20 KB

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