resident-analysis-filter.js 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
  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. reqPromise = [],
  49. reqUrl = "";
  50. if(vm.curLevel == 4){//市管
  51. reqUrl = "/area/"+this.curCode+"/towns";
  52. }else if(vm.curLevel == 3){//区管
  53. reqUrl = "/hospitals/"+this.curCode+"/community_hospitals";
  54. }else{//社区管
  55. reqUrl = "/doctor/admin-teams/teams/"+this.curCode;
  56. }
  57. reqPromise.push(httpRequest.get(reqUrl, {data: {}}));
  58. Promise.all(reqPromise).then(function(datas) {
  59. if(datas[0].status==200){
  60. vm.pingData(datas[0].data || [])
  61. }
  62. });
  63. },
  64. yearClick:function(){
  65. $(event.target.closest("div")).addClass('active').siblings().removeClass('active')
  66. },
  67. divBtnClick:function(){
  68. var vm = this;
  69. if(event.target.nodeName === 'A') {
  70. vm.curCode = $(event.target.closest("div")).attr("data-id");
  71. var item = $(event.target.closest(".div-item"));
  72. var dataLevel = item.attr("data-level");
  73. if(dataLevel == 4) {
  74. $(".div-content .div-item[data-level='4'] .div-btn").removeClass("active");
  75. item.next().remove();
  76. item.next().remove();
  77. vm.curLevel = 4;
  78. }
  79. if(dataLevel == 3) {
  80. $(".div-content .div-item[data-level='3'] .div-btn").removeClass("active");
  81. item.next().remove();
  82. vm.curLevel = 3;
  83. }
  84. if(dataLevel == 2) {
  85. $(".div-content .div-item[data-level='2'] .div-btn").removeClass("active");
  86. vm.curLevel = 2;
  87. }
  88. $(event.target.closest(".div-btn")).addClass("active");
  89. if(vm.curCode != "" && dataLevel != 2) {
  90. vm.resultCode = vm.curCode;
  91. } else {
  92. vm.resultCode = vm.curCode;
  93. }
  94. if(vm.curCode) {
  95. vm.curName = $(event.target.closest(".div-btn")).find("a").html();
  96. } else {
  97. vm.curName = item.find(".div-title").html();
  98. }
  99. vm.selectLevel = vm.curCode ? dataLevel - 1 : dataLevel;
  100. if(dataLevel == 2) {
  101. return false;
  102. }
  103. vm.curLevel--;
  104. if(vm.curCode) {
  105. vm.requestData();
  106. }
  107. }
  108. },
  109. resetClick:function(){
  110. var vm = this;
  111. vm.resultCode = "";
  112. vm.selectLevel = vm.roleLevel;
  113. var userRole = JSON.parse(window.localStorage.getItem("selectedRole"));
  114. vm.curName = vm.selectLevel==4?userRole.name.substring(0,3):userRole.name;
  115. $("#signYear").find(".c-33").removeClass("active");
  116. $("#signYear").find(".c-33").eq(0).addClass("active");
  117. $(".div-content .div-item").find(".div-btn").removeClass("active");
  118. $(".div-content .div-item").eq(0).find(".div-btn").eq(0).addClass("active");
  119. $(".div-content .div-item").eq(1).remove();
  120. $(".div-content .div-item").eq(1).remove();
  121. },
  122. confirmClick:function(){
  123. var vm = this;
  124. debugger
  125. console.log("area:"+vm.resultCode)
  126. console.log("name:"+vm.curName)
  127. console.log("level:"+vm.selectLevel)
  128. console.log("year:"+$("#signYear .c-33.active").attr("data-val"))
  129. //触发刷新
  130. this.$emit('vuedals:close', {
  131. areaCode: vm.resultCode==""?vm.curCode:vm.resultCode,
  132. name: vm.curName,
  133. level: vm.selectLevel,
  134. year: $("#signYear .c-33.active").attr("data-val"),
  135. filterHtml:$(".div-content").html(),
  136. yearHtml:$("#signYear").html()
  137. });
  138. },
  139. pingData:function(list){
  140. var vm = this;
  141. var resultData = "";
  142. var activeClass = "";
  143. if(vm.curLevel == 4){//市管
  144. list.unshift({"code":"","name":"厦门全市"});
  145. vm.curName = vm.curName.substring(0,3);
  146. }else if(vm.curLevel == 3){//区管
  147. list.unshift({"code":"","name":"全区"});
  148. }else{//社区管
  149. list.unshift({"id":"","name":"全社区"});
  150. }
  151. if(list.length>0){
  152. var labelName = '<div class="div-item" data-level="'+vm.curLevel+'">'+
  153. '<div class="div-title">'+vm.curName+'</div>';
  154. var xzResult = [];//每三条分成一组
  155. var xzContent = '';
  156. for(var i=0,len=list.length;i<len;i+=3){//形状列表切割
  157. xzResult.push(list.slice(i,i+3));
  158. }
  159. for(var x in xzResult){
  160. var item = xzResult[x];
  161. if(x==0){
  162. activeClass = "active";
  163. }else{
  164. activeClass = "";
  165. }
  166. if(item.length==1){//只有一条数据
  167. var id = item[0].code;
  168. if(vm.curLevel=="2") {
  169. id = item[0].id;
  170. }
  171. var name = vm.curLevel==3 && id1?item[0].name.substring(3,item[0].name.length):item[0].name;
  172. xzContent+='<div class="mt20 div-group-btn c-row ml40">'+
  173. '<div class="div-btn c-33 '+activeClass+'" data-id="'+id+'" @click="">'+
  174. '<a href="#" class="f-fs14">'+name+'</a>'+
  175. '</div>'+
  176. '</div>';
  177. }
  178. if(item.length==2){
  179. var id1 = item[0].code;
  180. var id2 = item[1].code;
  181. if(vm.curLevel=="2") {
  182. id1 = item[0].id;
  183. id2 = item[1].id;
  184. }
  185. var name1 = vm.curLevel==3 && id1?item[0].name.substring(3,item[0].name.length):item[0].name;
  186. var name2 = vm.curLevel==3 && id2?item[1].name.substring(3,item[1].name.length):item[1].name;
  187. xzContent+= '<div class="mt20 div-group-btn c-row ml40">'+
  188. '<div class="div-btn c-33 '+activeClass+'" data-id="'+id1+'">'+
  189. '<a href="#" class="f-fs14">'+name1+'</a>'+
  190. '</div>'+
  191. '<div class="div-btn c-33 " data-id="'+id2+'" data-level="'+item[1].level+'">'+
  192. '<a href="#" class="f-fs14">'+name2+'</a>'+
  193. '</div>'+
  194. '</div>';
  195. }
  196. if(item.length==3){
  197. var id1 = item[0].code;
  198. var id2 = item[1].code;
  199. var id3 = item[2].code;
  200. if(vm.curLevel=="2") {
  201. id1 = vm.curCode;
  202. id2 = item[1].id;
  203. id3 = item[2].id;
  204. }
  205. var name1 = vm.curLevel==3 && id1?item[0].name.substring(3,item[0].name.length):item[0].name;
  206. var name2 = vm.curLevel==3 && id2?item[1].name.substring(3,item[1].name.length):item[1].name;
  207. var name3 = vm.curLevel==3 && id3?item[2].name.substring(3,item[2].name.length):item[2].name;
  208. xzContent+='<div class="mt20 div-group-btn c-row ml40">'+
  209. '<div class="div-btn c-33 '+activeClass+'" data-id="'+id1+'">'+
  210. '<a href="#" class="f-fs14">'+name1+'</a>'+
  211. '</div>'+
  212. '<div class="div-btn c-33 " data-id="'+id2+'">'+
  213. '<a href="#" class="f-fs14">'+name2+'</a>'+
  214. '</div>'+
  215. '<div class="div-btn c-33 " data-id="'+id3+'">'+
  216. '<a href="#" class="f-fs14">'+name3+'</a>'+
  217. '</div>'+
  218. '</div>';
  219. }
  220. }
  221. resultData += labelName+xzContent+'</div>';
  222. }
  223. $(".div-content").append(resultData);
  224. }
  225. },
  226. mounted: function(){
  227. this.roleLevel = this.curLevel;
  228. this.selectLevel = this.curLevel;
  229. this.resultCode = this.curCode;
  230. if(!(this.filterHtml && this.yearHtml)){
  231. this.formatYearData();
  232. this.requestData();
  233. }
  234. }
  235. });
  236. })()