prescription-analysis.js 22 KB

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