resident-analysis.js 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315
  1. Vue.component('resident-analysis', {
  2. template: '<div>\
  3. <div class="div-qingkuang-left">\
  4. <div class="div-header-block">\
  5. <div class="div-analysis-title">缴费情况</div>\
  6. </div>\
  7. <div class="c-position-r height-140">\
  8. <div class="div-right-info">\
  9. <div class="y-amount c-f16">{{yiJiaoFeiData}}</div>\
  10. <div class="y-rate c-f14 mt5">{{yiJiaoFeiPer}}</div>\
  11. <div class="y-title c-f12 mt10">已缴费人数</div>\
  12. </div>\
  13. <div class="div-left-info">\
  14. <div class="y-amount c-f16">{{weiJiaoFeiData}}</div>\
  15. <div class="y-rate c-f14 mt5">{{weiJiaoFeiPer}}</div>\
  16. <div class="y-title c-f12 mt10">未缴费人数</div>\
  17. </div>\
  18. <div id="jiaoFeiChart" class="height-140"></div>\
  19. </div>\
  20. </div>\
  21. <div class="div-qingkuang-right">\
  22. <div class="div-header-block">\
  23. <div class="div-analysis-title">健康分布</div>\
  24. </div>\
  25. <div class="c-position-r height-140">\
  26. <div id="healthChart" class="height-140"></div>\
  27. <div class="ui-col-1 ui-grid ui-grid-vertical">\
  28. <div id="jkCatalogs">\
  29. <div class="ui-col-1">\
  30. <span class="span-frame cb-12b7f5"></span>\
  31. <span class="c-f14 c-12b7f5">{{jianKangRQPer}}</span>\
  32. <span class="c-f12 c-909090">(健康人群)</span>\
  33. </div>\
  34. <div class="ui-col-1">\
  35. <span class="span-frame cb-fb5dab"></span>\
  36. <span class="c-f14 c-fb5dab">{{huanBingRQPer}}</span>\
  37. <span class="c-f12 c-909090">(患病人群)</span>\
  38. </div>\
  39. <div class="ui-col-1">\
  40. <span class="span-frame cb-cd67fd"></span>\
  41. <span class="c-f14 c-cd67fd">{{gaoWeiRQPer}}</span>\
  42. <span class="c-f12 c-666">(高危人群)</span>\
  43. </div>\
  44. <div class="ui-col-1">\
  45. <span class="span-frame cb-ffc800"></span>\
  46. <span class="c-f14 c-ffc800">{{huiFuQiRQPer}}</span>\
  47. <span class="c-f12 c-666">(恢复期人群)</span>\
  48. </div>\
  49. <div class="ui-col-1">\
  50. <span class="span-frame cb-61eb41"></span>\
  51. <span class="c-f14 c-61eb41">{{weiBiaoZRQPer}}</span>\
  52. <span class="c-f12 c-666">(未标注)</span>\
  53. </div>\
  54. </div>\
  55. </div>\
  56. </div>\
  57. </div>\
  58. <div class="div-qingkuang-left">\
  59. <div class="div-header-block">\
  60. <div class="div-analysis-title">服务分布比例</div>\
  61. </div>\
  62. <div id="serviceChart" class="height-140"></div>\
  63. </div>\
  64. <div class="div-qingkuang-right">\
  65. <div class="div-header-block">\
  66. <div class="div-analysis-title">性别情况</div>\
  67. </div>\
  68. <div class="c-position-r height-140">\
  69. <div class="div-right-info">\
  70. <div class="y-amount c-f16">{{maleData}}</div>\
  71. <div class="y-rate c-f14 mt5">{{malePer}}</div>\
  72. <div class="y-title c-f12 mt10">男性</div>\
  73. </div>\
  74. <div class="div-left-info">\
  75. <div class="y-amount c-f16 c-fb5dab">{{femaleData}}</div>\
  76. <div class="y-rate c-f14 mt5 c-fb5dab">{{femalePer}}</div>\
  77. <div class="y-title c-f12 mt10 c-fb5dab">女性</div>\
  78. </div>\
  79. <div id="sexChart" class="height-140"></div>\
  80. </div>\
  81. </div>\
  82. <div class="div-service-kuang">\
  83. <div class="div-header-block">\
  84. <div class="div-analysis-title">年龄分布</div>\
  85. </div>\
  86. <div id="ageChart" class="height-140"></div>\
  87. </div>\
  88. </div>',
  89. props: [],
  90. data: function() {
  91. return {
  92. yiJiaoFeiData:"",
  93. yiJiaoFeiPer:"",
  94. weiJiaoFeiData:"",
  95. weiJiaoFeiPer:"",
  96. jianKangRQPer:"",
  97. huanBingRQPer:"",
  98. gaoWeiRQPer:"",
  99. huiFuQiRQPer:"",
  100. weiBiaoZRQPer:"",
  101. maleData:"",
  102. malePer:"",
  103. femaleData:"",
  104. femalePer:"",
  105. chooseYear:"",//选择年份值
  106. curLevel:null,//当前level值
  107. curCode:null,//当前选中区域的code值
  108. curName:null,//当前选中区域名称值
  109. endDate:null,
  110. userRole:null,
  111. roleLevel:null,
  112. }
  113. },
  114. mounted: function() {
  115. var vm = this;
  116. var now = new Date();
  117. if(now.getMonth() >= 6){
  118. vm.chooseYear = now.getFullYear();
  119. }else{
  120. vm.chooseYear = now.getFullYear() - 1;
  121. }
  122. vm.userRole = JSON.parse(window.localStorage.getItem("selectedRole"));
  123. vm.roleLevel = vm.userRole.code == '350200' ? 4 : vm.userRole.code.length==6 ? 3 : 2;
  124. vm.endDate = getEndDate(vm.chooseYear);
  125. vm.curLevel = vm.roleLevel;
  126. vm.curCode = vm.userRole.code;
  127. vm.curName = vm.userRole.name;
  128. //初始化数据
  129. initData(vm);
  130. //刷新数据
  131. EventBus.$on('refresh-click', function(arg) {
  132. initData(vm);
  133. });
  134. //弹出筛选框
  135. EventBus.$on('filter-click', function(arg) {
  136. //弹框显示筛选条件
  137. Vuedals.Bus.$emit('new', {
  138. title: '条件筛选',
  139. onClose:function(data){
  140. vm.chooseYear = data.year;
  141. vm.curName = data.name;
  142. vm.curCode = data.areaCode;
  143. vm.curLevel = data.level;
  144. vm.endDate = getEndDate(vm.chooseYear);
  145. initData(vm);//刷新数据
  146. },
  147. component: 'resident-analysis-filter',
  148. props: {
  149. curLevel: vm.roleLevel,
  150. curCode: vm.userRole.code,
  151. curName: vm.userRole.name
  152. }
  153. });
  154. });
  155. },
  156. methods: {
  157. }
  158. })
  159. //请求接口数据
  160. function initData(vm) {
  161. var url = "/statistics/leveltwo_increment";
  162. EventBus.$emit('update-area-name', {areaName:vm.curName});//更新区域名称
  163. EventBus.$emit('update-statistics-time', {});//更新统计时间
  164. EventBus.$emit('update-statistics-year', {selectDate:vm.chooseYear+"年"});//更新统计年份
  165. var reqUrl = [{
  166. url: url,
  167. reqType: 'get',
  168. data: {
  169. endDate:vm.endDate,
  170. area:vm.curCode,
  171. level:vm.curLevel,
  172. index:16,
  173. }
  174. },
  175. {
  176. url: url,
  177. reqType: 'get',
  178. data: {
  179. endDate:vm.endDate,
  180. area:vm.curCode,
  181. level:vm.curLevel,
  182. index:15,
  183. }
  184. },
  185. {
  186. url: url,
  187. reqType: 'get',
  188. data: {
  189. endDate:vm.endDate,
  190. area:vm.curCode,
  191. level:vm.curLevel,
  192. index:vm.chooseYear==2016?7:36,
  193. }
  194. },
  195. {
  196. url: url,
  197. reqType: 'get',
  198. data: {
  199. endDate:vm.endDate,
  200. area:vm.curCode,
  201. level:vm.curLevel,
  202. index:6,
  203. }
  204. },
  205. {
  206. url: url,
  207. reqType: 'get',
  208. data: {
  209. endDate:vm.endDate,
  210. area:vm.curCode,
  211. level:vm.curLevel,
  212. index:8,
  213. }
  214. }
  215. ];
  216. httpRequest.getReqPromises(reqUrl).then(function(datas) {
  217. var jiaoFeiArr = datas[0],
  218. healthArr = datas[1],
  219. serviceArr = datas[2],
  220. sexArr = datas[3],
  221. ageArr = datas[4];
  222. //缴费情况处理
  223. if(jiaoFeiArr.status == "200") {
  224. var data = jiaoFeiArr.data.index_16;
  225. var yiJiaoFeiData = "";
  226. var weiJiaoFeiData = "";
  227. if(data && data.length == 1 && data[0].code == 0) { //未缴费率为100%的情况,后台没有返回已缴费的数据
  228. vm.yiJiaoFeiData = "0";
  229. vm.yiJiaoFeiPer = "0.00%";
  230. }
  231. $.each(data, function(i, v) {
  232. if(v.code == 0 || v.code == 1) {
  233. if(v.code == 1) {
  234. yiJiaoFeiData = v.amount;
  235. v.rate = parseFloat(v.rate).toFixed(2);
  236. vm.yiJiaoFeiData = v.amount;
  237. vm.yiJiaoFeiPer = v.rate + "%";
  238. } else {
  239. weiJiaoFeiData = v.amount;
  240. v.rate = parseFloat(v.rate).toFixed(2);
  241. vm.weiJiaoFeiData = v.amount;
  242. vm.weiJiaoFeiPer = v.rate + "%";
  243. }
  244. }
  245. })
  246. jiaoFeiData(yiJiaoFeiData,weiJiaoFeiData);
  247. }
  248. //健康分布处理
  249. if(healthArr.status == "200") {
  250. var data = healthArr.data.index_15;
  251. var wbzdata = data[0].amount;
  252. var jkrqdata = data[1].amount;
  253. var hbrqdata = data[2].amount;
  254. var gwrqdata = data[3].amount;
  255. var hfqrqdata = data[4].amount;
  256. vm.weiBiaoZRQPer = parseFloat(data[0].rate).toFixed(2);
  257. vm.jianKangRQPer = parseFloat(data[1].rate).toFixed(2);
  258. vm.huanBingRQPer = parseFloat(data[2].rate).toFixed(2);
  259. vm.gaoWeiRQPer = parseFloat(data[3].rate).toFixed(2);
  260. vm.huiFuQiRQPer = parseFloat(data[4].rate).toFixed(2);
  261. healthData(jkrqdata,hbrqdata,gwrqdata,hfqrqdata,wbzdata);
  262. }
  263. //服务分布处理
  264. if(serviceArr.status=="200"){
  265. var data=serviceArr.data["index_"+(vm.chooseYear==2016?7:36)];
  266. var amountArr = [];
  267. $.each(data, function(i, v) {
  268. amountArr.push(v.amount);
  269. })
  270. serviceData(amountArr);
  271. }
  272. //性别情况处理
  273. if(sexArr.status=="200"){
  274. var data = sexArr.data.index_6;
  275. var femaleData,maleData;
  276. $.each(data, function(i, v) {
  277. if(v.code=="1"){//女
  278. femaleData = v.amount;
  279. vm.femaleData = v.amount;
  280. vm.femalePer = parseFloat(v.rate).toFixed(2)+"%";
  281. }else{//男
  282. maleData = v.amount;
  283. vm.maleData = v.amount;
  284. vm.malePer = parseFloat(v.rate).toFixed(2)+"%";
  285. }
  286. })
  287. sexData(femaleData,maleData);
  288. }
  289. //年龄分布处理
  290. if(ageArr.status=="200"){
  291. var data=ageArr.data.index_8;
  292. var amountArr = [];
  293. $.each(data, function(i, v) {
  294. amountArr.push(v.amount);
  295. })
  296. ageData(amountArr);
  297. }
  298. })
  299. }