comprehensive-analysis.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439
  1. var reqList = []; //记录请求的参数和url,用于后退时使用
  2. Vue.use(Vuedals.default);
  3. new Vue({
  4. el: "#main",
  5. data: {
  6. appname: "总体分析",
  7. isback: true,
  8. isrefresh: true,
  9. isfilter: true,
  10. isopen: true,
  11. //请求页面所需参数
  12. level: '',
  13. area: '',
  14. areaTitle: '',
  15. index: '3',
  16. selectedDateType: 1,
  17. endDate: '',
  18. startDate: '',
  19. lowLevel: '',
  20. chooseYear: '',
  21. userRole: '',
  22. //数据结果
  23. topDatas: {
  24. index_3: 0,
  25. index_4: 0,
  26. index_5: 0,
  27. index_83: 0,
  28. index_20: 0,
  29. index_21: 0,
  30. index_27: 0
  31. },
  32. //微信绑定统计数据
  33. wxTotal:{
  34. label: '',
  35. amount1: '', //已缴费人数
  36. amount2: '', //未缴费人数
  37. rate: ''//绑定率
  38. }
  39. },
  40. components: {
  41. vuedals: Vuedals.Component
  42. },
  43. methods: {
  44. changeTag: function(val){
  45. this.index = val;
  46. loadData([1,2], this);
  47. //存储请求所带的参数
  48. reqList.push({
  49. level: this.level,
  50. area: this.area,
  51. areaTitle: this.areaTitle,
  52. index: this.index,
  53. endDate: this.endDate,
  54. startDate: this.startDate,
  55. lowLevel: this.lowLevel
  56. })
  57. },
  58. getNewLineData: function(arg){
  59. this.selectedDateType = arg.dateType;
  60. loadData([1], this);
  61. },
  62. getAreaData: function(arg){
  63. //如果level改变,则需要重新加载整个页面的数据,否则只需加载底部区域数据
  64. if(arg.level == this.level){
  65. this.lowLevel = arg.lowLevel;
  66. loadData([2], this);
  67. }else{
  68. this.level = arg.level;
  69. this.lowLevel = arg.lowLevel;
  70. this.area = arg.area;
  71. this.areaTitle = arg.areaTitle;
  72. loadData([0,1,2], this);
  73. }
  74. EventBus.$emit('update-area-name', {areaName: this.areaTitle});
  75. //存储请求所带的参数
  76. reqList.push({
  77. level: this.level,
  78. area: this.area,
  79. areaTitle: this.areaTitle,
  80. index: this.index,
  81. endDate: this.endDate,
  82. startDate: this.startDate,
  83. lowLevel: this.lowLevel
  84. })
  85. }
  86. },
  87. mounted: function(){
  88. //初始化数据
  89. initData(this);
  90. //获得顶部各tab的值
  91. loadData([0,1,2], this); //参数组数表示请求的区域为上中下
  92. //存储请求所带的参数
  93. reqList.push({
  94. level: this.level,
  95. area: this.area,
  96. areaTitle: this.areaTitle,
  97. index: this.index,
  98. endDate: this.endDate,
  99. startDate: this.startDate,
  100. lowLevel: this.lowLevel
  101. });
  102. //设置监听器, 监听折线图日期变化
  103. var vm = this;
  104. //监听后退按钮的操作
  105. EventBus.$on("back-click", function(arg){
  106. if(reqList.length == 1){
  107. history.go(-1);
  108. }
  109. else{
  110. var preInfo = reqList.pop();
  111. var info = reqList[reqList.length - 1];
  112. vm.level = info.level;
  113. vm.area = info.area;
  114. vm.areaTitle = info.areaTitle;
  115. vm.lowLevel = info.lowLevel;
  116. vm.index = info.index;
  117. loadData([0,1,2], vm);
  118. }
  119. });
  120. //监听页面刷新
  121. EventBus.$on("refresh-click", function(arg){
  122. loadData([0,1,2], vm);
  123. });
  124. }
  125. })
  126. function initData(vm){
  127. //获得缓存中缓存的角色权限
  128. var userRole = window.localStorage.getItem("selectedRole");
  129. if(!userRole){
  130. return false;
  131. }
  132. vm.userRole = JSON.parse(userRole);
  133. vm.level = vm.userRole.code == '350200' ? 4 : vm.userRole.code.length == 6 ? 3 : 2;
  134. vm.area = vm.userRole.code;
  135. vm.areaTitle = vm.userRole.name;
  136. EventBus.$emit('update-area-name', {areaName: vm.areaTitle});
  137. var now = new Date();
  138. if(now.getMonth() >= 6){
  139. vm.chooseYear = now.getFullYear();
  140. }else{
  141. vm.chooseYear = now.getFullYear() - 1;
  142. }
  143. vm.startDate = getStartDate(vm.chooseYear);
  144. vm.endDate = getEndDate(vm.chooseYear);
  145. }
  146. function initReqParams(vm){
  147. //增量(咨询量3、随访量4、健康教育5、代预约量27),到达量(绑定微信21、绑定设备20)
  148. var url2 = "statistics/interval",
  149. url3 = "statistics/lowlevel_total";
  150. if(vm.index == '20' || vm.index == '21'){
  151. url2 = "statistics/interval_total";
  152. url3 = "statistics/lowlevel_all";
  153. }else if(vm.index == '3'){
  154. url3 = "statistics/lowlevel_total_mesh";
  155. }else if(vm.index == '5'){
  156. url3 = '/statistics/article_lowlevel_total';
  157. }
  158. reqParam = [{
  159. url: url2,
  160. data:{
  161. index: vm.index == '5' ? '5,83' : vm.index,
  162. level: vm.level,
  163. area: vm.area,
  164. startDate: vm.startDate,
  165. endDate: vm.endDate,
  166. interval: vm.selectedDateType
  167. }
  168. },{
  169. url: url3,
  170. data: {
  171. index: (vm.index == '3') ? "3,22" : vm.index,
  172. level: vm.level,
  173. area: vm.area,
  174. sort: 1,
  175. year: vm.chooseYear
  176. }
  177. },{
  178. //如果是微信绑定,则增加置顶展示当面层级的总绑定率及已缴费 未缴费居民数.只针对微信绑定时使用
  179. url: '/statistics/getLevelTotalSingle',
  180. data: {
  181. date: vm.endDate,
  182. level: vm.level,
  183. area: vm.area
  184. }
  185. }];
  186. if(vm.index == '20' || vm.index == '21'){
  187. reqParam[1].data.date = vm.endDate;
  188. }else{
  189. reqParam[1].data.endDate = vm.endDate;
  190. }
  191. if(vm.lowLevel){
  192. reqParam[1].data.lowLevel = vm.lowLevel;
  193. }
  194. return reqParam;
  195. }
  196. function getTopReqParams(index1, vm){
  197. var url = "statistics/total",
  198. data = {
  199. index: index1 == '5' ? '5,83' : index1,
  200. level: vm.level,
  201. area: vm.area,
  202. year: vm.chooseYear,
  203. endDate: vm.endDate,
  204. startDate: vm.startDate
  205. };
  206. if(index1 == '20' || index1 == '21'){
  207. url = "statistics/index_all";
  208. }
  209. if(index1 == '5'){
  210. url = "/statistics/article_total";
  211. }
  212. return {
  213. url: url,
  214. data: data
  215. };
  216. }
  217. function getTopTagDatas(vm){
  218. var reqs = [],
  219. indexs = ['3', '4', '5', '27', '21', '20'];
  220. for(i=0; i<indexs.length; i++){
  221. var item = getTopReqParams(indexs[i], vm);
  222. reqs.push(httpRequest.get(item.url, {data: item.data}));
  223. }
  224. Promise.all(reqs).then(function(ress){
  225. for(i=0; i<ress.length; i++){
  226. var res = ress[i];
  227. if(res.status == 200){
  228. for(key in res.data){
  229. vm.topDatas[key] = res.data[key];
  230. }
  231. }else{
  232. console.log(res.msg);
  233. }
  234. }
  235. })
  236. }
  237. function loadData(loadArr, vm){
  238. if(loadArr.indexOf(0) > -1){
  239. getTopTagDatas(vm);
  240. }
  241. //获取其他请求的参数
  242. var reqParams = initReqParams(vm),
  243. reqPromise = [],
  244. newArr = []; //记录非顶部请求的请求数组
  245. for(i=0; i<loadArr.length; i++){
  246. if(loadArr[i] == 0){
  247. // do nothing
  248. }else{
  249. var j = loadArr[i] - 1;
  250. var param = reqParams[j];
  251. reqPromise.push(httpRequest.get(param.url, {data: param.data}));
  252. newArr.push(loadArr[i]);
  253. }
  254. }
  255. if(vm.index == 21){ //微信绑定的数据需要再请求一个数据
  256. reqPromise.push(httpRequest.get(reqParams[2].url, {data: reqParams[2].data}))
  257. newArr.push(3);
  258. }
  259. if(reqPromise.length > 0){
  260. Promise.all(reqPromise).then(function(ress){
  261. var res2, res3, res4;
  262. for(var i=0; i<newArr.length; i++){
  263. var j = newArr[i] + 1;
  264. if(j == 2){
  265. res2 = ress[i];
  266. }
  267. if(j == 3){
  268. res3 = ress[i];
  269. }
  270. //微信绑定时,多获取一个请求数据
  271. if(j == 4){
  272. res4 = ress[i];
  273. }
  274. }
  275. if(res2){
  276. if(res2.status == 200){
  277. handleSecondPanelData(res2.data, vm);
  278. if(vm.index == '5'){
  279. var arr = [{
  280. name: '健康文章',
  281. value: vm.topDatas.index_83
  282. },{
  283. name: '健康指导',
  284. value: vm.topDatas.index_5
  285. }];
  286. debugger
  287. drawPieChart('pieChart', arr, ['#ffc800', '#17b3ec']);
  288. }
  289. }else{
  290. console.log(res2.msg);
  291. }
  292. }
  293. if(res3){
  294. if(res3.status == 200){
  295. listHandle(res3.data, vm);
  296. }else{
  297. console.log(res3.msg);
  298. }
  299. }
  300. if(res4){
  301. if(res4.status == 200){
  302. handleWXBindData(res4.data, vm);
  303. }else{
  304. console.log(res4.msg);
  305. }
  306. }
  307. })
  308. }
  309. }
  310. function handleSecondPanelData(data, vm){
  311. var xDatas = [],
  312. yDatas = [],
  313. names = [],
  314. colors = ['#12b7f5', '#cd67fd'],
  315. labels = {'3': '咨询量新增趋势', '4': '随访量新增趋势', '5': '推送量新增趋势', '20': '绑定设备新增趋势', '21': '绑定微信新增趋势', '27': '代预约量新增趋势'}
  316. index_names = {'index_3': '咨询量', 'index_4': '随访量', 'index_5': '健康指导','index_27':'代预约量','index_21': '绑定微信','index_20': '绑定设备', 'index_83': "健康文章"};
  317. for(var p in data){
  318. names.push(index_names[p]);
  319. if(p == 'index_21' || p == 'index_20'){
  320. var xData = _.map(data[p].data, function(o){
  321. return o.range;
  322. });
  323. var yData = _.map(data[p].data, function(o){
  324. return o.amount;
  325. });
  326. }else{
  327. var xData = _.map(data[p], function(o){
  328. return o.range;
  329. });
  330. var yData = _.map(data[p], function(o){
  331. return o.amount;
  332. });
  333. }
  334. xDatas.push(xData);
  335. yDatas.push(yData);
  336. }
  337. EventBus.$emit("draw-line-chart", {
  338. panelName : labels[vm.index],
  339. quotaNames : names,
  340. xData : xDatas[0],
  341. yDatas : yDatas,
  342. colors : colors
  343. });
  344. }
  345. function listHandle(data, vm){
  346. for(i in data){
  347. var list = data[i];
  348. var topArr = [];
  349. if(vm.index == "21"){
  350. topArr = soreRank(getKeyValueArr(list, 'bindRate'));
  351. }else{
  352. topArr = soreRank(getKeyValueArr(list, 'amount'));
  353. }
  354. var arr = _.map(list, function(o, index){
  355. var cols = [o.name];
  356. if(vm.index == '3'){
  357. var amount = o.amount.split(","); // 咨询量, 未回复咨询量
  358. cols.push(amount[0]);
  359. cols.push(amount[1]);
  360. }else if(vm.index == '21'){
  361. cols.push(o.bindRate + '%');
  362. cols.push(o.weChatAmount1);
  363. cols.push(o.weChatAmount0);
  364. }else{
  365. cols.push(o.amount);
  366. if(vm.index == '5'){
  367. cols.push(o.readNum);
  368. cols.push(o.readRate);
  369. }
  370. }
  371. return {
  372. rank: topArr[index],
  373. code: o.code,
  374. name: o.name,
  375. cols: cols
  376. }
  377. });
  378. var headers = {
  379. '3': ["排名", "咨询量", "未回复"],
  380. '4': ["排名", "随访量"],
  381. '5': ["排名", "总推送量", "阅读量", "阅读率"],
  382. '20': ["排名", "绑定设备"],
  383. '21': ["排名", "绑定率", "已缴费", "未缴费"],
  384. "27": ["排名", "代预约量"]
  385. };
  386. EventBus.$emit("render-area-data",{
  387. level: vm.level,
  388. area: vm.area,
  389. lowLevel: vm.lowLevel,
  390. headers: headers[vm.index],
  391. rows: arr
  392. });
  393. }
  394. }
  395. function handleWXBindData(data, vm){
  396. switch(vm.level){
  397. case 4:
  398. vm.wxTotal.label = "全市概况";
  399. break;
  400. case 3:
  401. vm.wxTotal.label = "全区概况";
  402. break;
  403. case 2:
  404. vm.wxTotal.label = "全社区概况";
  405. break;
  406. }
  407. vm.wxTotal.rate = (data.bindRate || 0) + "%";
  408. vm.wxTotal.amount1 = data.weChatAmount1;
  409. vm.wxTotal.amount2 = data.weChatAmount0;
  410. var arr = [{
  411. name: '已缴费人数',
  412. value: data.weChatAmount1
  413. },{
  414. name: '未缴费人数',
  415. value: data.weChatAmount0
  416. }];
  417. drawPieChart('pieChart2', arr, ['#17b3ec', '#909090']);
  418. }