comprehensive-analysis.js 13 KB

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