resident-analysis-filter.js 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245
  1. (function(){
  2. Vue.component('resident-analysis-filter',{
  3. template: '<div style="height: 400px;overflow: auto;margin-bottom: 50px;">\
  4. <div class="mt10 ml10 filter-title">统计年份</div>\
  5. <div class="c-row mt20 ml40" id="signYear" v-html="yearHtml" @click="yearClick">\
  6. </div>\
  7. <div class="mt20 ml10 filter-title">统计维度</div>\
  8. <div class="div-content" @click="divBtnClick" v-html="filterHtml"></div>\
  9. <div id="footer">\
  10. <div class="c-row btn-wrap c-border-top fr">\
  11. <div class="div-foot-btn mr20" @click="resetClick">\
  12. <a href="#" class="c-666 f-fs16">重置</a>\
  13. </div>\
  14. <div class="div-foot-btn active" @click="confirmClick">\
  15. <a href="#" class="c-666 f-fs16">保存</a>\
  16. </div>\
  17. </div>\
  18. </div>\
  19. </div>',
  20. props:['curLevel','curCode','curName','yearHtml','filterHtml'],
  21. data: function(){
  22. return {
  23. selectLevel:"",
  24. resultCode:"",
  25. roleLevel:""
  26. }
  27. },
  28. methods: {
  29. formatYearData: function () {
  30. //显示年份最低是2016年
  31. var now = new Date(),
  32. year = now.getFullYear();
  33. var yearHtml = "";
  34. if(now.getMonth() >= 6){
  35. yearHtml += '<div class="c-33 active" data-val="'+year+'"><a>'+year+"</a></div>";
  36. }
  37. for(i=year-1; i>=2016; i--){
  38. if(i == (year-1) && now.getMonth() < 6){
  39. yearHtml += '<div class="c-33 active" data-val="'+i+'"><a>'+i+"</a></div>";
  40. }else{
  41. yearHtml += '<div class="c-33" data-val="'+i+'"><a>'+i+"</a></div>";
  42. }
  43. }
  44. this.yearHtml = yearHtml;
  45. },
  46. requestData:function(){
  47. var vm = this;
  48. var reqUrl = "";
  49. if(vm.curLevel == 4){//市管
  50. reqUrl = "/area/"+this.curCode+"/towns";
  51. }else if(vm.curLevel == 3){//区管
  52. reqUrl = "/hospitals/"+this.curCode+"/community_hospitals";
  53. }else{//社区管
  54. reqUrl = "/doctor/admin-teams/teams/"+this.curCode;
  55. }
  56. var reqUrl = [{
  57. url: reqUrl,
  58. reqType: 'get',
  59. data: {}
  60. }]
  61. httpRequest.getReqPromises(reqUrl).then(function(datas) {
  62. if(datas[0].status==200){
  63. vm.pingData(datas[0].data || [])
  64. }
  65. });
  66. },
  67. yearClick:function(){
  68. $(event.target.closest("div")).addClass('active').siblings().removeClass('active')
  69. },
  70. divBtnClick:function(){
  71. var vm = this;
  72. if(event.target.nodeName === 'A') {
  73. vm.curCode = $(event.target.closest("div")).attr("data-id");
  74. var item = $(event.target.closest(".div-item"));
  75. var dataLevel = item.attr("data-level");
  76. if(dataLevel == 4) {
  77. $(".div-content .div-item[data-level='4'] .div-btn").removeClass("active");
  78. item.next().remove();
  79. item.next().remove();
  80. vm.curLevel = 4;
  81. }
  82. if(dataLevel == 3) {
  83. $(".div-content .div-item[data-level='3'] .div-btn").removeClass("active");
  84. item.next().remove();
  85. vm.curLevel = 3;
  86. }
  87. if(dataLevel == 2) {
  88. $(".div-content .div-item[data-level='2'] .div-btn").removeClass("active");
  89. vm.curLevel = 2;
  90. }
  91. $(event.target.closest(".div-btn")).addClass("active");
  92. if(vm.curCode != "" && dataLevel != 2) {
  93. vm.resultCode = vm.curCode;
  94. } else {
  95. vm.resultCode = vm.curCode;
  96. }
  97. if(vm.curCode) {
  98. vm.curName = $(event.target.closest(".div-btn")).find("a").html();
  99. } else {
  100. vm.curName = item.find(".div-title").html();
  101. }
  102. vm.selectLevel = vm.curCode ? dataLevel - 1 : dataLevel;
  103. if(dataLevel == 2) {
  104. return false;
  105. }
  106. vm.curLevel--;
  107. if(vm.curCode) {
  108. vm.requestData();
  109. }
  110. }
  111. },
  112. resetClick:function(){
  113. var vm = this;
  114. vm.resultCode = "";
  115. vm.selectLevel = vm.roleLevel;
  116. var userRole = JSON.parse(window.localStorage.getItem("selectedRole"));
  117. vm.curName = vm.selectLevel==4?userRole.name.substring(0,3):userRole.name;
  118. $("#signYear").find(".c-33").removeClass("active");
  119. $("#signYear").find(".c-33").eq(0).addClass("active");
  120. $(".div-content .div-item").find(".div-btn").removeClass("active");
  121. $(".div-content .div-item").eq(0).find(".div-btn").eq(0).addClass("active");
  122. $(".div-content .div-item").eq(1).remove();
  123. $(".div-content .div-item").eq(1).remove();
  124. },
  125. confirmClick:function(){
  126. var vm = this;
  127. console.log("area:"+vm.resultCode)
  128. console.log("name:"+vm.curName)
  129. console.log("level:"+vm.selectLevel)
  130. console.log("year:"+$("#signYear .c-33.active").attr("data-val"))
  131. //触发刷新
  132. this.$emit('vuedals:close', {
  133. areaCode: vm.resultCode,
  134. name: vm.curName,
  135. level: vm.selectLevel,
  136. year: $("#signYear .c-33.active").attr("data-val"),
  137. filterHtml:$(".div-content").html(),
  138. yearHtml:$("#signYear").html()
  139. });
  140. },
  141. pingData:function(list){
  142. var vm = this;
  143. var resultData = "";
  144. var activeClass = "";
  145. if(vm.curLevel == 4){//市管
  146. list.unshift({"code":"","name":"厦门全市"});
  147. vm.curName = vm.curName.substring(0,3);
  148. }else if(vm.curLevel == 3){//区管
  149. list.unshift({"code":"","name":"全区"});
  150. }else{//社区管
  151. list.unshift({"id":"","name":"全社区"});
  152. }
  153. if(list.length>0){
  154. var labelName = '<div class="div-item" data-level="'+vm.curLevel+'">'+
  155. '<div class="div-title">'+vm.curName+'</div>';
  156. var xzResult = [];//每三条分成一组
  157. var xzContent = '';
  158. for(var i=0,len=list.length;i<len;i+=3){//形状列表切割
  159. xzResult.push(list.slice(i,i+3));
  160. }
  161. for(var x in xzResult){
  162. var item = xzResult[x];
  163. if(x==0){
  164. activeClass = "active";
  165. }else{
  166. activeClass = "";
  167. }
  168. if(item.length==1){//只有一条数据
  169. var id = item[0].code;
  170. if(vm.curLevel=="2") {
  171. id = item[0].id;
  172. }
  173. var name = vm.curLevel==3 && id1?item[0].name.substring(3,item[0].name.length):item[0].name;
  174. xzContent+='<div class="mt20 div-group-btn c-row ml40">'+
  175. '<div class="div-btn c-33 '+activeClass+'" data-id="'+id+'" @click="">'+
  176. '<a href="#" class="f-fs14">'+name+'</a>'+
  177. '</div>'+
  178. '</div>';
  179. }
  180. if(item.length==2){
  181. var id1 = item[0].code;
  182. var id2 = item[1].code;
  183. if(vm.curLevel=="2") {
  184. id1 = item[0].id;
  185. id2 = item[1].id;
  186. }
  187. var name1 = vm.curLevel==3 && id1?item[0].name.substring(3,item[0].name.length):item[0].name;
  188. var name2 = vm.curLevel==3 && id2?item[1].name.substring(3,item[1].name.length):item[1].name;
  189. xzContent+= '<div class="mt20 div-group-btn c-row ml40">'+
  190. '<div class="div-btn c-33 '+activeClass+'" data-id="'+id1+'">'+
  191. '<a href="#" class="f-fs14">'+name1+'</a>'+
  192. '</div>'+
  193. '<div class="div-btn c-33 " data-id="'+id2+'" data-level="'+item[1].level+'">'+
  194. '<a href="#" class="f-fs14">'+name2+'</a>'+
  195. '</div>'+
  196. '</div>';
  197. }
  198. if(item.length==3){
  199. var id1 = item[0].code;
  200. var id2 = item[1].code;
  201. var id3 = item[2].code;
  202. if(vm.curLevel=="2") {
  203. id1 = vm.curCode;
  204. id2 = item[1].id;
  205. id3 = item[2].id;
  206. }
  207. var name1 = vm.curLevel==3 && id1?item[0].name.substring(3,item[0].name.length):item[0].name;
  208. var name2 = vm.curLevel==3 && id2?item[1].name.substring(3,item[1].name.length):item[1].name;
  209. var name3 = vm.curLevel==3 && id3?item[2].name.substring(3,item[2].name.length):item[2].name;
  210. xzContent+='<div class="mt20 div-group-btn c-row ml40">'+
  211. '<div class="div-btn c-33 '+activeClass+'" data-id="'+id1+'">'+
  212. '<a href="#" class="f-fs14">'+name1+'</a>'+
  213. '</div>'+
  214. '<div class="div-btn c-33 " data-id="'+id2+'">'+
  215. '<a href="#" class="f-fs14">'+name2+'</a>'+
  216. '</div>'+
  217. '<div class="div-btn c-33 " data-id="'+id3+'">'+
  218. '<a href="#" class="f-fs14">'+name3+'</a>'+
  219. '</div>'+
  220. '</div>';
  221. }
  222. }
  223. resultData += labelName+xzContent+'</div>';
  224. }
  225. $(".div-content").append(resultData);
  226. }
  227. },
  228. mounted: function(){
  229. this.roleLevel = this.curLevel;
  230. this.selectLevel = this.curLevel;
  231. this.resultCode = this.curCode;
  232. if(!(this.filterHtml && this.yearHtml)){
  233. this.formatYearData();
  234. this.requestData();
  235. }
  236. }
  237. });
  238. })()