prescription-analysis.js 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595
  1. var reqList = [];
  2. var agePie,
  3. ageBar;
  4. Vue.use(Vuedals.default);
  5. new Vue({
  6. el: "#main",
  7. data: {
  8. //页面请求参数
  9. level: '',
  10. area: '',
  11. areaTitle: '',
  12. userRole: {},
  13. lowLevel: '3', //市级对应lowLevel为3,逐级递减
  14. dateType: 1, //折线图坐标值1-日,2-周,3-月
  15. startDate: "",
  16. endDate: "",
  17. sDate: "", //折线图中自定义的时间
  18. eDate: "", //折线图中自定义的时间
  19. tagCode: 1, //顶部各个tag标签对应的值
  20. sumType: 1, //记录从筛选页面选择的统计维度 1-订单统计,2-费用统计,3-配送统计,4-年龄统计
  21. sumTypeName: "订单统计",
  22. disease: "", //疾病类型
  23. diseaseName: "全部",
  24. chooseYear: '',
  25. dateValue: [],
  26. orderTagDatas: {
  27. total: 0,
  28. finishCount: 0,
  29. patientCancelCount: 0,
  30. noReviewedCount: 0,
  31. processingCount: 0,
  32. payOuttimeCount: 0
  33. },
  34. paymentData: {
  35. sum: 0,
  36. avg: 0
  37. },
  38. expressData: {
  39. self: 0,
  40. doctor: 0,
  41. delivery: 0
  42. },
  43. ageDatas: [
  44. {name: "0~6岁", color: "#ff5442", value: 0},
  45. {name: "7~18岁", color: "#ffc800", value: 0},
  46. {name: "19~30岁", color: "#4ce428", value: 0},
  47. {name: "31~50岁", color: "#24bbfa", value: 0},
  48. {name: "51~64岁", color: "#fb5dab", value: 0},
  49. {name: "65岁以上", color: "#9b5ffd", value: 0}]
  50. },
  51. components: {
  52. vuedals: Vuedals.Component
  53. },
  54. mounted: function(){
  55. //初始化数据
  56. initData(this);
  57. //获得顶部各tab的值
  58. loadData([0,1,2], this); //参数组数表示请求的区域为上中下
  59. //存储请求所带的参数
  60. reqList.push({
  61. level: this.level,
  62. area: this.area,
  63. areaTitle: this.areaTitle,
  64. endDate: this.endDate,
  65. startDate: this.startDate,
  66. lowLevel: this.lowLevel,
  67. tagCode: this.tagCode,
  68. sumType: this.sumType,
  69. disease: this.disease,
  70. dateType: this.dateType
  71. });
  72. //设置监听器, 监听折线图日期变化
  73. var vm = this;
  74. //监听后退按钮的操作
  75. EventBus.$on("back-click", function(arg){
  76. EventBus.$emit('update-statistics-time', {}); //更新统计时间
  77. if(reqList.length == 1){
  78. history.go(-1);
  79. }
  80. else{
  81. var preInfo = reqList.pop();
  82. var info = reqList[reqList.length - 1];
  83. vm.level = info.level;
  84. vm.area = info.area;
  85. vm.areaTitle = info.areaTitle;
  86. vm.lowLevel = info.lowLevel;
  87. vm.tagCode = info.tagCode;
  88. vm.sumType = info.sumType;
  89. vm.disease = info.disease;
  90. vm.dateType = info.dateType;
  91. loadData([0,1,2], vm);
  92. EventBus.$emit('update-area-name', {areaName: vm.areaTitle});
  93. }
  94. });
  95. //监听页面刷新
  96. EventBus.$on("refresh-click", function(arg){
  97. loadData([0,1,2], vm);
  98. });
  99. //弹出筛选框
  100. EventBus.$on('filter-click', function(arg) {
  101. //弹框显示筛选条件
  102. Vuedals.Bus.$emit('new', {
  103. title: '条件筛选',
  104. onClose:function(data){
  105. vm.sumType = data.sumType;
  106. vm.sumTypeName = data.sumTypeName;
  107. vm.disease = data.disease;
  108. vm.diseaseName = data.diseaseName;
  109. var newYear = false;
  110. if(vm.chooseYear != data.chooseYear){
  111. newYear = true;
  112. }
  113. vm.chooseYear = data.chooseYear;
  114. vm.startDate = getStartDate(vm.chooseYear);
  115. vm.endDate = getEndDate(vm.chooseYear)
  116. if(newYear){
  117. vm.dateValue = [vm.startDate, vm.endDate];
  118. }
  119. vm.sDate = vm.dateValue[0];
  120. vm.eDate = vm.dateValue[1];
  121. //将参数职位初始值
  122. vm.level = vm.userRole.code == '350200' ? 4 : vm.userRole.code.length == 6 ? 3 : 2;
  123. vm.lowLevel = vm.level - 1;
  124. vm.area = vm.userRole.code;
  125. vm.areaTitle = vm.userRole.name;
  126. vm.dateType = 1;
  127. vm.tagCode = 1;
  128. EventBus.$emit('update-area-name', {areaName: vm.areaTitle});
  129. //然后清空请求列表数组
  130. reqList.splice(0, reqList.length);
  131. loadData([0, 1, 2], vm);//刷新数据
  132. //存储请求所带的参数
  133. reqList.push({
  134. level: vm.level,
  135. area: vm.area,
  136. areaTitle: vm.areaTitle,
  137. endDate: vm.endDate,
  138. startDate: vm.startDate,
  139. lowLevel: vm.lowLevel,
  140. tagCode: vm.tagCode,
  141. sumType: vm.sumType,
  142. disease: vm.disease,
  143. dateType: vm.dateType
  144. });
  145. EventBus.$emit('update-statistics-year',{selectDate: vm.chooseYear} );//显示统计维度的名称
  146. EventBus.$emit('update-dimension-name', {dimensionVal: vm.sumTypeName});//显示疾病类型的名称
  147. EventBus.$emit('update-dimension2-name', {dimensionVal2: vm.diseaseName});//显示疾病类型的名称
  148. EventBus.$emit('update-statistics-time', {});//更新统计时间
  149. },
  150. component: 'prescription-filter',
  151. props: {
  152. sumType: vm.sumType,
  153. disease: vm.disease,
  154. chooseYear: vm.chooseYear
  155. }
  156. });
  157. });
  158. $("#main").removeClass("c-hide");
  159. window.onresize = function() {
  160. if(agePie){
  161. agePie.resize();
  162. }
  163. if(ageBar){
  164. ageBar.resize();
  165. }
  166. if(window.lineCharts){
  167. window.lineCharts.resize(); //日周月折线图
  168. }
  169. if(window.barCharts){
  170. window.barCharts.resize(); //日周月折线图
  171. }
  172. }
  173. },
  174. methods: {
  175. changeTagCode: function(val){
  176. this.tagCode = val;
  177. if(this.sumType == 2){
  178. //费用统计只查看人均费用的变化趋势
  179. loadData([2], this);
  180. }else{
  181. loadData([1,2], this);
  182. }
  183. //存储请求所带的参数
  184. reqList.push({
  185. level: this.level,
  186. area: this.area,
  187. areaTitle: this.areaTitle,
  188. endDate: this.endDate,
  189. startDate: this.startDate,
  190. lowLevel: this.lowLevel,
  191. tagCode: this.tagCode,
  192. sumType: this.sumType,
  193. disease: this.disease,
  194. dateType: this.dateType
  195. })
  196. },
  197. getBarData: function(arg){
  198. this.dateType = arg.dateType || this.dateType;
  199. var dateValue = arg.dateValue;
  200. if(dateValue){
  201. this.dateValue = arg.dateValue;
  202. this.sDate = dateValue[0];
  203. this.eDate = dateValue[1];
  204. }
  205. loadData([1], this);
  206. },
  207. getPaymentLineData: function(arg){
  208. this.dateType = arg.dateType;
  209. loadData([1], this);
  210. },
  211. getBottomAreaData: function(arg){
  212. //如果level改变,则需要重新加载整个页面的数据,否则只需加载底部区域数据
  213. if(arg.level == this.level){
  214. this.lowLevel = arg.lowLevel || 3;
  215. loadData([2], this);
  216. }else{
  217. this.level = arg.level;
  218. //长处方这边level改了lowLevel也需要跟着一起变
  219. this.lowLevel = arg.level - 1;
  220. this.area = arg.area;
  221. this.areaTitle = arg.areaTitle;
  222. loadData([0,1,2], this);
  223. }
  224. EventBus.$emit('update-area-name', {areaName: this.areaTitle});
  225. //存储请求所带的参数
  226. reqList.push({
  227. level: this.level,
  228. area: this.area,
  229. areaTitle: this.areaTitle,
  230. endDate: this.endDate,
  231. startDate: this.startDate,
  232. lowLevel: this.lowLevel,
  233. tagCode: this.tagCode,
  234. sumType: this.sumType,
  235. disease: this.disease,
  236. dateType: this.dateType
  237. })
  238. },
  239. exportData: function(){
  240. var sheet = XLSX.utils.table_to_sheet($('#listTable')[0]);
  241. var disease = this.diseaseName == "全部" ? "" : this.diseaseName,
  242. areaName = this.area == "350200" ? "厦门市" : this.areaTitle,
  243. fileName = areaName + disease;
  244. switch(this.sumType){
  245. case 1:
  246. var names = ["续方总量", "已完成", "居民取消", "审核未通过", "进行中", "其他原因取消"];
  247. fileName += names[this.tagCode - 1];
  248. if(this.tagCode > 1){
  249. fileName += "订单";
  250. }
  251. break;
  252. case 2:
  253. var names = ["费用总计", "人均费用"];
  254. fileName += "续方"+names[this.tagCode -1];
  255. break;
  256. case 3:
  257. var names = ["居民自取", "物流配送", "健管师配送"];
  258. fileName += names[this.tagCode - 1] + "订单";
  259. break;
  260. case 4:
  261. fileName += "续方人数";
  262. break;
  263. default:
  264. fileName += "续方情况";
  265. break;
  266. }
  267. openDownloadDialog(sheet2blob(sheet), fileName+'.xlsx');
  268. }
  269. }
  270. });
  271. function initData(vm){
  272. //获得缓存中缓存的角色权限
  273. var userRole = window.sessionStorage.getItem("selectedRole");
  274. if(!userRole){
  275. return false;
  276. }
  277. vm.userRole = JSON.parse(userRole);
  278. vm.level = vm.userRole.code == '350200' ? 4 : vm.userRole.code.length == 6 ? 3 : 2;
  279. vm.lowLevel = vm.level - 1;
  280. vm.area = vm.userRole.code;
  281. vm.areaTitle = vm.userRole.name;
  282. var now = new Date(),
  283. year = now.getFullYear();
  284. if(now.getMonth() < 6){
  285. vm.chooseYear = year - 1;
  286. }else {
  287. vm.chooseYear = year;
  288. }
  289. vm.startDate = vm.sDate = getStartDate(vm.chooseYear);
  290. vm.endDate = vm.eDate = getEndDate(vm.chooseYear);
  291. vm.dateValue = [vm.sDate, vm.eDate];
  292. EventBus.$emit('update-area-name', {areaName: vm.areaTitle});
  293. var now = new Date();
  294. vm.endDate = now.format("yyyy-MM-dd");
  295. EventBus.$emit('update-statistics-year',{selectDate: vm.chooseYear} );
  296. EventBus.$emit('update-dimension-name', {dimensionVal: vm.sumTypeName});//显示统计维度的名称
  297. EventBus.$emit('update-dimension2-name', {dimensionVal2: vm.diseaseName});//显示疾病类型的名称
  298. }
  299. function initReqParams(vm){
  300. //sumType: 1-订单统计,2-费用统计,3-配送统计,4-年龄统计
  301. var reqParam = [];
  302. switch(vm.sumType){
  303. case 1:
  304. //tagCode: 1.总量,2.已完成,3.居民取消,4.审核不通过,5.进行中,6.其他原因取消
  305. reqParam = [{
  306. url: "/statistics/getPrescriptionCount",
  307. data: {level: vm.level, area: vm.area, disease: vm.disease, year: vm.chooseYear}
  308. },{
  309. url: "/statistics/getPrescriptionTotalHistogram",
  310. data: {level: vm.level, area: vm.area, disease: vm.disease, type: vm.tagCode, interval: vm.dateType, year: vm.chooseYear, startTime: vm.sDate, endTime: vm.eDate}
  311. },{
  312. url: "/statistics/getPrescriptionTotalLowLevel",
  313. data: {level: vm.level, lowlevel: vm.lowLevel, area: vm.area, disease: vm.disease, type: vm.tagCode, year: vm.chooseYear, startTime: vm.startDate, endTime: vm.endDate}
  314. }];
  315. break;
  316. case 2:
  317. //dateType: 折线图坐标值1-日,2-周,3-月
  318. //tagCode: 1.总量,2.平均值
  319. // vm.startDate = getBeforeMonthStartDate(3, vm.dateType);
  320. reqParam = [{
  321. url: "/statistics/getPrescriptionCost",
  322. data: {level: vm.level, area: vm.area, disease: vm.disease, year: vm.chooseYear}
  323. },{
  324. url: "/statistics/getPrescriptionCostAvgLine",
  325. data: {level: vm.level, area: vm.area, disease: vm.disease, type: vm.dateType, year: vm.chooseYear, startDate: vm.startDate, endDate: vm.endDate}
  326. },{
  327. url: "/statistics/getPrescriptionCostLowLevel",
  328. data: {level: vm.level, lowlevel: vm.lowLevel, area: vm.area, disease: vm.disease, type: vm.tagCode, year: vm.chooseYear, startTime: vm.startDate, endTime: vm.endDate}
  329. }];
  330. break;
  331. case 3:
  332. //tagCode: 1.自取,2.快递配送,3.健管师配送
  333. reqParam = [{
  334. url: "/statistics/getPrescriptionDispatchingTotal",
  335. data: {level: vm.level, area: vm.area, disease: vm.disease, year: vm.chooseYear}
  336. },{
  337. url: "/statistics/getPrescriptionDispatchingHistogram",
  338. data: {level: vm.level, area: vm.area, disease: vm.disease, type: vm.tagCode, interval: vm.dateType, year: vm.chooseYear, startTime: vm.sDate, endTime: vm.eDate}
  339. },{
  340. url: "/statistics/getPrescriptionDispatchingLowLevel",
  341. data: {level: vm.level, lowlevel: vm.lowLevel, area: vm.area, disease: vm.disease, type: vm.tagCode, year: vm.chooseYear, startTime: vm.startDate, endTime: vm.endDate}
  342. }];
  343. break;
  344. case 4:
  345. reqParam = [{
  346. url: "/statistics/getPrescriptionAgeTotal",
  347. data: {level: vm.level, area: vm.area, disease: vm.disease, year: vm.chooseYear}
  348. },{
  349. url: "/statistics/getPrescriptionAgeHistogram",
  350. data: {level: vm.level, area: vm.area, disease: vm.disease, year: vm.chooseYear, startTime: vm.startDate, endTime: vm.endDate}
  351. },{
  352. url: "/statistics/getPrescriptionAgeLowLevel",
  353. data: {level: vm.level, lowlevel: vm.lowLevel, area: vm.area, disease: vm.disease, year: vm.chooseYear, startTime: vm.startDate, endTime: vm.endDate}
  354. }];
  355. break;
  356. default:
  357. reqParam = [];
  358. break;
  359. };
  360. return reqParam;
  361. }
  362. function loadData(loadArr, vm){
  363. //获取其他请求的参数
  364. var reqParams = initReqParams(vm),
  365. reqPromise = [];
  366. for(i=0; i<loadArr.length; i++){
  367. var j = loadArr[i];
  368. var param = reqParams[j];
  369. reqPromise.push(httpRequest.get(param.url, {data: param.data}));
  370. }
  371. if(reqPromise.length > 0){
  372. Promise.all(reqPromise).then(function(ress){
  373. var res1, res2, res2;
  374. for(var i=0; i<loadArr.length; i++){
  375. var j = loadArr[i] + 1;
  376. if(j == 1){
  377. res1 = ress[i];
  378. }
  379. if(j == 2){
  380. res2 = ress[i];
  381. }
  382. if(j == 3){
  383. res3 = ress[i];
  384. }
  385. }
  386. if(res1){
  387. if(res1.status == 200){
  388. handleTopPanelData(res1.data, vm);
  389. }else{
  390. console.log(res1.msg);
  391. }
  392. }
  393. if(res2){
  394. if(res2.status == 200){
  395. handleSecondPanelData(res2.data, vm);
  396. }else{
  397. console.log(res2.msg);
  398. }
  399. }
  400. if(res3){
  401. if(res3.status == 200){
  402. listHandle(res3.data, vm);
  403. }else{
  404. console.log(res3.msg);
  405. }
  406. }
  407. })
  408. }
  409. }
  410. function handleTopPanelData(data, vm){
  411. switch(vm.sumType){
  412. case 1:
  413. vm.orderTagDatas = {
  414. total: data.total,
  415. finishCount: data.finishCount,
  416. patientCancelCount: data.patientCancelCount,
  417. noReviewedCount: data.noReviewedCount,
  418. processingCount: data.processingCount,
  419. payOuttimeCount: data.payOuttimeCount
  420. };
  421. break;
  422. case 2:
  423. vm.paymentData = {
  424. sum: data.sum,
  425. avg: data.avg
  426. }
  427. break;
  428. case 3:
  429. vm.expressData = {
  430. self: data.seltTotal,
  431. doctor: data.doctorTotal,
  432. delivery: data.deliveryTotal
  433. }
  434. break;
  435. case 4:
  436. var len = vm.ageDatas.length,
  437. color = ['#ff5442', '#ffc800 ','#4ce428', '#24bbfa','#fb5dab', "#9b5ffd"],
  438. objName = ['0age', '7age', '19age', '31age', '51age', '65age'],
  439. arr = [];
  440. for(i=0; i<len; i++){
  441. vm.ageDatas[i].value = data[objName[i]];
  442. }
  443. //绘制饼图
  444. agePie = drawPieChart("agePie", vm.ageDatas, color);
  445. }
  446. }
  447. function handleSecondPanelData(data, vm){
  448. switch(vm.sumType){
  449. case 1:
  450. case 3:
  451. var color = "#17b3ec",
  452. xAxisData = [],
  453. seriesData = [];
  454. for(i=0; i<data.length; i++){
  455. var item = data[i];
  456. xAxisData.push(item.date);
  457. seriesData.push(item.count);
  458. }
  459. var names,panelName;
  460. if(vm.sumType == 1){
  461. names = ["续方总量", "已完成", "居民取消", "审核未通过", "进行中", "其他原因取消"];
  462. panelName = "续方订单趋势";
  463. }else if(vm.sumType == 3){
  464. panelName = "订单配送趋势";
  465. names = ["居民自取", "物流配送", "健管师配送"];
  466. }
  467. // EventBus.$emit("draw-bar-chart", {
  468. // panelName: "近半年统计",
  469. // xData: xAxisData,
  470. // yData: seriesData,
  471. // quotaName: names[vm.tagCode - 1],
  472. // color: color,
  473. // unit: "笔",
  474. // selectedDateType: vm.dateType
  475. // });
  476. EventBus.$emit("draw-line-chart", {
  477. panelName : panelName,
  478. quotaNames : ["订单数"],
  479. xData : xAxisData,
  480. yDatas : [seriesData],
  481. colors : [color],
  482. unit: "笔",
  483. selectedDateType: vm.dateType,
  484. dateValue: vm.dateValue,
  485. chooseYear: vm.chooseYear
  486. });
  487. break;
  488. case 2:
  489. var yDatas = [],
  490. colors = ['#12b7f5'];
  491. var xData = _.map(data, function(o){
  492. return o.date;
  493. });
  494. var yData = _.map(data, function(o){
  495. return o.avg;
  496. });
  497. yDatas.push(yData);
  498. EventBus.$emit("draw-line-chart", {
  499. panelName : "人均费用趋势",
  500. quotaNames : ["人均费用"],
  501. xData : xData,
  502. yDatas : yDatas,
  503. colors : colors,
  504. unit: "元",
  505. selectedDateType: vm.dateType
  506. });
  507. break;
  508. case 4:
  509. var color = "#17b3ec",
  510. xAxisData = ['0~6岁', '7~18岁', '19~30岁', '31~50岁', '51~64岁', '65岁以上'],
  511. fieldName = ['0ageRate', '7ageRate', '19ageRate', '31ageRate', '51ageRate', '65ageRate']
  512. seriesData = [];
  513. for(i=0; i<6; i++){
  514. seriesData.push(data[fieldName[i]]);
  515. }
  516. ageBar = drawBarChart("ageBar", xAxisData, seriesData, color, "人均使用次数");
  517. break;
  518. }
  519. }
  520. function listHandle(data, vm){
  521. var list = data;
  522. var topArr = soreRank(getKeyValueArr(list, 'val'));
  523. var arr = _.map(list, function(o, index){
  524. var cols = [o.name, o.val];
  525. return {
  526. rank: topArr[index],
  527. code: o.code,
  528. name: o.name,
  529. cols: cols
  530. }
  531. });
  532. var headers = {
  533. '1': ["排名", "续方总量", "已完成", "居民取消", "审核未通过", "进行中", "其他原因取消"],
  534. '2': ["排名", "费用总计", "人均费用"],
  535. '3': ["排名", "居民自取", "物流配送", "健管师配送"],
  536. '4': ["排名", "总人数"]
  537. };
  538. EventBus.$emit("render-area-data",{
  539. level: vm.level,
  540. area: vm.area,
  541. lowLevel: vm.lowLevel,
  542. headers:["排名", headers[vm.sumType][vm.tagCode]],
  543. rows: arr
  544. });
  545. }
  546. /*
  547. * months : 月份差距(例如months=3,则获取今天往前数3个月的那天的值)
  548. */
  549. function getBeforeMonthStartDate(months,type){
  550. //type: 折线图坐标值1-日,2-周,3-月
  551. //从1号开始算每个月开始的时间
  552. var sDate = new Date(),
  553. now = new Date();
  554. sDate.setMonth(now.getMonth() - months + 1);// 包含本月算一个月
  555. var sDateStr = sDate.format("yyyy-MM-dd");
  556. var startDate = "";
  557. if(type == '3'){
  558. startDate = sDateStr.substr(0,8)+"01";
  559. }else{
  560. startDate = sDateStr;
  561. }
  562. return startDate;
  563. }