comprehensive-analysis.js 13 KB

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