comprehensive-analysis.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438
  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.areaTile = vm.userRole.name;
  136. var now = new Date();
  137. if(now.getMonth() >= 6){
  138. vm.chooseYear = now.getFullYear();
  139. }else{
  140. vm.chooseYear = now.getFullYear() - 1;
  141. }
  142. vm.startDate = getStartDate(vm.chooseYear);
  143. vm.endDate = getEndDate(vm.chooseYear);
  144. }
  145. function initReqParams(vm){
  146. //增量(咨询量3、随访量4、健康教育5、代预约量27),到达量(绑定微信21、绑定设备20)
  147. var url2 = "statistics/interval",
  148. url3 = "statistics/lowlevel_total";
  149. if(vm.index == '20' || vm.index == '21'){
  150. url2 = "statistics/interval_total";
  151. url3 = "statistics/lowlevel_all";
  152. }else if(vm.index == '3'){
  153. url3 = "statistics/lowlevel_total_mesh";
  154. }else if(vm.index == '5'){
  155. url3 = '/statistics/article_lowlevel_total';
  156. }
  157. reqParam = [{
  158. url: url2,
  159. data:{
  160. index: vm.index == '5' ? '5,83' : vm.index,
  161. level: vm.level,
  162. area: vm.area,
  163. startDate: vm.startDate,
  164. endDate: vm.endDate,
  165. interval: vm.selectedDateType
  166. }
  167. },{
  168. url: url3,
  169. data: {
  170. index: (vm.index == '3') ? "3,22" : vm.index,
  171. level: vm.level,
  172. area: vm.area,
  173. sort: 1,
  174. year: vm.chooseYear
  175. }
  176. },{
  177. //如果是微信绑定,则增加置顶展示当面层级的总绑定率及已缴费 未缴费居民数.只针对微信绑定时使用
  178. url: '/statistics/getLevelTotalSingle',
  179. data: {
  180. date: vm.endDate,
  181. level: vm.level,
  182. area: vm.area
  183. }
  184. }];
  185. if(vm.index == '20' || vm.index == '21'){
  186. reqParam[1].data.date = vm.endDate;
  187. }else{
  188. reqParam[1].data.endDate = vm.endDate;
  189. }
  190. if(vm.lowLevel){
  191. reqParam[1].data.lowLevel = vm.lowLevel;
  192. }
  193. return reqParam;
  194. }
  195. function getTopReqParams(index1, vm){
  196. var url = "statistics/total",
  197. data = {
  198. index: index1 == '5' ? '5,83' : index1,
  199. level: vm.level,
  200. area: vm.area,
  201. year: vm.chooseYear,
  202. endDate: vm.endDate,
  203. startDate: vm.startDate
  204. };
  205. if(index1 == '20' || index1 == '21'){
  206. url = "statistics/index_all";
  207. }
  208. if(index1 == '5'){
  209. url = "/statistics/article_total";
  210. }
  211. return {
  212. url: url,
  213. data: data
  214. };
  215. }
  216. function getTopTagDatas(vm){
  217. var reqs = [],
  218. indexs = ['3', '4', '5', '27', '21', '20'];
  219. for(i=0; i<indexs.length; i++){
  220. var item = getTopReqParams(indexs[i], vm);
  221. reqs.push(httpRequest.get(item.url, {data: item.data}));
  222. }
  223. Promise.all(reqs).then(function(ress){
  224. for(i=0; i<ress.length; i++){
  225. var res = ress[i];
  226. if(res.status == 200){
  227. for(key in res.data){
  228. vm.topDatas[key] = res.data[key];
  229. }
  230. }else{
  231. console.log(res.msg);
  232. }
  233. }
  234. })
  235. }
  236. function loadData(loadArr, vm){
  237. if(loadArr.indexOf(0) > -1){
  238. getTopTagDatas(vm);
  239. }
  240. //获取其他请求的参数
  241. var reqParams = initReqParams(vm),
  242. reqPromise = [],
  243. newArr = []; //记录非顶部请求的请求数组
  244. for(i=0; i<loadArr.length; i++){
  245. if(loadArr[i] == 0){
  246. // do nothing
  247. }else{
  248. var j = loadArr[i] - 1;
  249. var param = reqParams[j];
  250. reqPromise.push(httpRequest.get(param.url, {data: param.data}));
  251. newArr.push(loadArr[i]);
  252. }
  253. }
  254. if(vm.index == 21){ //微信绑定的数据需要再请求一个数据
  255. reqPromise.push(httpRequest.get(reqParams[2].url, {data: reqParams[2].data}))
  256. newArr.push(3);
  257. }
  258. if(reqPromise.length > 0){
  259. Promise.all(reqPromise).then(function(ress){
  260. var res2, res3, res4;
  261. for(var i=0; i<newArr.length; i++){
  262. var j = newArr[i] + 1;
  263. if(j == 2){
  264. res2 = ress[i];
  265. }
  266. if(j == 3){
  267. res3 = ress[i];
  268. }
  269. //微信绑定时,多获取一个请求数据
  270. if(j == 4){
  271. res4 = ress[i];
  272. }
  273. }
  274. if(res2){
  275. if(res2.status == 200){
  276. handleSecondPanelData(res2.data, vm);
  277. if(vm.index == '5'){
  278. var arr = [{
  279. name: '健康文章',
  280. value: vm.topDatas.index_83
  281. },{
  282. name: '健康指导',
  283. value: vm.topDatas.index_5
  284. }];
  285. debugger
  286. drawPieChart('pieChart', arr, ['#ffc800', '#17b3ec']);
  287. }
  288. }else{
  289. console.log(res2.msg);
  290. }
  291. }
  292. if(res3){
  293. if(res3.status == 200){
  294. listHandle(res3.data, vm);
  295. }else{
  296. console.log(res3.msg);
  297. }
  298. }
  299. if(res4){
  300. if(res4.status == 200){
  301. handleWXBindData(res4.data, vm);
  302. }else{
  303. console.log(res4.msg);
  304. }
  305. }
  306. })
  307. }
  308. }
  309. function handleSecondPanelData(data, vm){
  310. var xDatas = [],
  311. yDatas = [],
  312. names = [],
  313. colors = ['#12b7f5', '#cd67fd'],
  314. labels = {'3': '咨询量新增趋势', '4': '随访量新增趋势', '5': '推送量新增趋势', '20': '绑定设备新增趋势', '21': '绑定微信新增趋势', '27': '代预约量新增趋势'}
  315. index_names = {'index_3': '咨询量', 'index_4': '随访量', 'index_5': '健康指导','index_27':'代预约量','index_21': '绑定微信','index_20': '绑定设备', 'index_83': "健康文章"};
  316. for(var p in data){
  317. names.push(index_names[p]);
  318. if(p == 'index_21' || p == 'index_20'){
  319. var xData = _.map(data[p].data, function(o){
  320. return o.range;
  321. });
  322. var yData = _.map(data[p].data, function(o){
  323. return o.amount;
  324. });
  325. }else{
  326. var xData = _.map(data[p], function(o){
  327. return o.range;
  328. });
  329. var yData = _.map(data[p], function(o){
  330. return o.amount;
  331. });
  332. }
  333. xDatas.push(xData);
  334. yDatas.push(yData);
  335. }
  336. EventBus.$emit("draw-line-chart", {
  337. panelName : labels[vm.index],
  338. quotaNames : names,
  339. xData : xDatas[0],
  340. yDatas : yDatas,
  341. colors : colors
  342. });
  343. }
  344. function listHandle(data, vm){
  345. for(i in data){
  346. var list = data[i];
  347. var topArr = [];
  348. if(vm.index == "21"){
  349. topArr = soreRank(getKeyValueArr(list, 'bindRate'));
  350. }else{
  351. topArr = soreRank(getKeyValueArr(list, 'amount'));
  352. }
  353. var arr = _.map(list, function(o, index){
  354. var cols = [o.name];
  355. if(vm.index == '3'){
  356. var amount = o.amount.split(","); // 咨询量, 未回复咨询量
  357. cols.push(amount[0]);
  358. cols.push(amount[1]);
  359. }else if(vm.index == '21'){
  360. cols.push(o.bindRate + '%');
  361. cols.push(o.weChatAmount1);
  362. cols.push(o.weChatAmount0);
  363. }else{
  364. cols.push(o.amount);
  365. if(vm.index == '5'){
  366. cols.push(o.readNum);
  367. cols.push(o.readRate);
  368. }
  369. }
  370. return {
  371. rank: topArr[index],
  372. code: o.code,
  373. name: o.name,
  374. cols: cols
  375. }
  376. });
  377. var headers = {
  378. '3': ["排名", "咨询量", "未回复"],
  379. '4': ["排名", "随访量"],
  380. '5': ["排名", "总推送量", "阅读量", "阅读率"],
  381. '20': ["排名", "绑定设备"],
  382. '21': ["排名", "绑定率", "已缴费", "未缴费"],
  383. "27": ["排名", "代预约量"]
  384. };
  385. EventBus.$emit("render-area-data",{
  386. level: vm.level,
  387. area: vm.area,
  388. lowLevel: vm.lowLevel,
  389. headers: headers[vm.index],
  390. rows: arr
  391. });
  392. }
  393. }
  394. function handleWXBindData(data, vm){
  395. switch(vm.level){
  396. case 4:
  397. vm.wxTotal.label = "全市概况";
  398. break;
  399. case 3:
  400. vm.wxTotal.label = "全区概况";
  401. break;
  402. case 2:
  403. vm.wxTotal.label = "全社区概况";
  404. break;
  405. }
  406. vm.wxTotal.rate = (data.bindRate || 0) + "%";
  407. vm.wxTotal.amount1 = data.weChatAmount1;
  408. vm.wxTotal.amount2 = data.weChatAmount0;
  409. var arr = [{
  410. name: '已缴费人数',
  411. value: data.weChatAmount1
  412. },{
  413. name: '未缴费人数',
  414. value: data.weChatAmount0
  415. }];
  416. drawPieChart('pieChart2', arr, ['#17b3ec', '#909090']);
  417. }