qianyuetongji-new.js 20 KB

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