renew-progress.js 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398
  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: false,
  11. //请求页面所需参数
  12. level: '',
  13. area: '',
  14. areaTitle: '',
  15. index: '3',
  16. selectedDateType: 1, //折线图坐标值1-日,2-周,3-月
  17. endDate: '',
  18. startDate: '',
  19. lowLevel: '',
  20. lowCode: '',
  21. chooseYear: '',
  22. userRole: '',
  23. analysisName: "所有居民",
  24. renewRange: {
  25. renewRangeText: "",
  26. renewRange: "",
  27. renewAmount: "",
  28. renewRateAll: ""
  29. },
  30. switchRange: {
  31. switchRangeText: "",
  32. switchRange: "",
  33. switchAmount: "",
  34. switchRateAll: ""
  35. },
  36. contentHtml: ""
  37. },
  38. components: {
  39. vuedals: Vuedals.Component
  40. },
  41. methods: {
  42. getNewLineData: function(arg) {
  43. this.selectedDateType = arg.dateType;
  44. loadData([1], this);
  45. },
  46. getAreaData: function(arg) {
  47. //如果level改变,则需要重新加载整个页面的数据,否则只需加载底部区域数据
  48. if(arg.level == this.level) {
  49. this.lowLevel = arg.lowLevel;
  50. loadData([2], this);
  51. } else {
  52. this.level = arg.level;
  53. this.lowLevel = arg.lowLevel;
  54. this.area = arg.area;
  55. this.areaTitle = arg.areaTitle;
  56. loadData([0, 1, 2], this);
  57. }
  58. EventBus.$emit('update-area-name', {
  59. areaName: this.areaTitle
  60. });
  61. //存储请求所带的参数
  62. reqList.push({
  63. level: this.level,
  64. area: this.area,
  65. areaTitle: this.areaTitle,
  66. index: this.index,
  67. endDate: this.endDate,
  68. startDate: this.startDate,
  69. lowLevel: this.lowLevel,
  70. lowCode: this.lowCode,
  71. })
  72. }
  73. },
  74. mounted: function() {
  75. //初始化数据
  76. initData(this);
  77. //获得顶部各tab的值
  78. loadData([0, 1, 2], this); //参数组数表示请求的区域为上中下
  79. //存储请求所带的参数
  80. reqList.push({
  81. level: this.level,
  82. area: this.area,
  83. areaTitle: this.areaTitle,
  84. index: this.index,
  85. endDate: this.endDate,
  86. startDate: this.startDate,
  87. lowLevel: this.lowLevel,
  88. lowCode: this.lowCode,
  89. });
  90. //设置监听器, 监听折线图日期变化
  91. var vm = this;
  92. //监听后退按钮的操作
  93. EventBus.$on("back-click", function(arg) {
  94. EventBus.$emit('update-statistics-time', {}); //更新统计时间
  95. if(reqList.length == 1) {
  96. history.go(-1);
  97. } else {
  98. var preInfo = reqList.pop();
  99. var info = reqList[reqList.length - 1];
  100. vm.level = info.level;
  101. vm.area = info.area;
  102. vm.areaTitle = info.areaTitle;
  103. vm.lowLevel = info.lowLevel;
  104. vm.index = info.index;
  105. vm.lowCode = info.lowCode;
  106. loadData([0, 1, 2], vm);
  107. }
  108. });
  109. //监听页面刷新
  110. EventBus.$on("refresh-click", function(arg) {
  111. EventBus.$emit('update-statistics-time', {}); //更新统计时间
  112. loadData([0, 1, 2], vm);
  113. });
  114. //弹出筛选框
  115. EventBus.$on('filter-click', function(arg) {
  116. //弹框显示筛选条件
  117. Vuedals.Bus.$emit('new', {
  118. title: '条件筛选',
  119. onClose: function(data) {
  120. vm.lowCode = data.lowCode;
  121. vm.contentHtml = data.contentHtml;
  122. //请求参数重置,页面类型重新开始
  123. vm.level = vm.userRole.code == '350200' ? 4 : vm.userRole.code.length == 6 ? 3 : 2;
  124. vm.area = vm.userRole.code;
  125. vm.areaTitle = vm.userRole.name;
  126. EventBus.$emit('update-area-name', {
  127. areaName: vm.areaTitle
  128. });
  129. vm.selectedDateType = 1;
  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. index: vm.index,
  139. endDate: vm.endDate,
  140. startDate: vm.startDate,
  141. lowLevel: vm.lowLevel,
  142. lowCode: vm.lowCode,
  143. analysisType: vm.analysisType
  144. });
  145. EventBus.$emit('update-dimension-name', {
  146. dimensionVal: data.name
  147. }); //更新维度名称
  148. EventBus.$emit('update-statistics-time', {}); //更新统计时间
  149. },
  150. component: 'renew-progress-filter',
  151. props: {
  152. contentHtml: vm.contentHtml
  153. }
  154. });
  155. });
  156. }
  157. })
  158. function initData(vm) {
  159. //获得缓存中缓存的角色权限
  160. var userRole = window.localStorage.getItem("selectedRole");
  161. if(!userRole) {
  162. return false;
  163. }
  164. vm.userRole = JSON.parse(userRole);
  165. vm.level = vm.userRole.code == '350200' ? 4 : vm.userRole.code.length == 6 ? 3 : 2;
  166. vm.area = vm.userRole.code;
  167. vm.areaTitle = vm.userRole.name;
  168. var now = new Date();
  169. if(now.getMonth() >= 6) {
  170. vm.chooseYear = now.getFullYear();
  171. } else {
  172. vm.chooseYear = now.getFullYear() - 1;
  173. }
  174. vm.startDate = getStartDate(vm.chooseYear);
  175. vm.endDate = getEndDate(vm.chooseYear);
  176. //更新头部信息
  177. EventBus.$emit('update-all-prompt-info', {
  178. areaName: vm.areaTitle,
  179. selectDate: "",
  180. dimensionVal: vm.analysisName
  181. });
  182. }
  183. function initReqParams(vm) {
  184. var topIndex = {
  185. "4": "29",
  186. "3": "44",
  187. "2": "43"
  188. }, //顶部区域对应的level : index
  189. bottomIndex = {
  190. "4": "44",
  191. "3": "43",
  192. "2": "42"
  193. }; //与选中的当前底部区域tab的值有关 areaType
  194. if(vm.lowCode && vm.lowCode != "0") {
  195. var topIndex = {
  196. "4": "51",
  197. "3": "54",
  198. "2": "53"
  199. }, //顶部区域对应的level : index
  200. bottomIndex = {
  201. "4": "54",
  202. "3": "53",
  203. "2": "52"
  204. }; //与选中的当前底部区域tab的值有关 areaType
  205. }
  206. var areaType = vm.lowLevel==2 ? "3" : vm.lowLevel==1?"2":vm.level;
  207. var index = topIndex[vm.level],
  208. bIndex = bottomIndex[areaType];
  209. reqParam = [{
  210. url: "/statistics/getRenewPercentAndChangePercent",
  211. reqType: 'get',
  212. data: {
  213. level: vm.level,
  214. code: vm.area,
  215. year: vm.chooseYear,
  216. index: index,
  217. lowCode: vm.lowCode
  218. }
  219. }, {
  220. url: "/statistics/interval_total",
  221. reqType: 'get',
  222. data: {
  223. level: vm.level,
  224. area: vm.area,
  225. startDate: vm.startDate,
  226. endDate: vm.endDate,
  227. interval: vm.selectedDateType,
  228. index: index,
  229. lowCode: vm.lowCode
  230. }
  231. }, {
  232. url: "/statistics/lowlevel_all_sign_renew",
  233. reqType: 'post',
  234. data: {
  235. sort: 1,
  236. date: vm.endDate,
  237. level: vm.level,
  238. index: bIndex,
  239. area: vm.area,
  240. lowCode: vm.lowCode
  241. }
  242. }];
  243. if(vm.lowLevel) {
  244. reqParam[2].data.lowLevel = vm.lowLevel;
  245. }
  246. return reqParam;
  247. }
  248. function getTopTagDatas(data, vm) {
  249. vm.renewRange.renewRangeText = data.renewRange;
  250. vm.renewRange.renewRange = parseFloat(data.renewRange) / 100;
  251. vm.renewRange.renewAmount = data.thisYearRenew;
  252. vm.renewRange.renewRateAll = data.yesterYearSign;
  253. vm.switchRange.switchRangeText = data.switchRange;
  254. vm.switchRange.switchRange = parseFloat(data.switchRange) / 100;
  255. vm.switchRange.switchAmount = data.thisYearSwithch;
  256. vm.switchRange.switchRateAll = data.thisYearRenew;
  257. var renewArr = [{
  258. name: '续签量',
  259. value: vm.renewRange.renewAmount
  260. }, {
  261. name: '续签总量',
  262. value: vm.renewRange.renewRateAll
  263. }];
  264. var switchArr = [{
  265. name: '转签量',
  266. value: vm.switchRange.switchAmount
  267. }, {
  268. name: '转签总量',
  269. value: vm.switchRange.switchRateAll
  270. }];
  271. var renewChart = drawPieChart('renewMain', renewArr, ['#12b7f5', '#ebebf5']); //续签率
  272. var switchChart = drawPieChart('switchMain', switchArr, ['#12b7f5', '#ebebf5']); //转签率
  273. window.onresize = function() {
  274. renewChart.resize();
  275. switchChart.resize();
  276. window.lineCharts.resize(); //日周月折线图
  277. }
  278. }
  279. function loadData(loadArr, vm) {
  280. //获取其他请求的参数
  281. var reqParams = initReqParams(vm),
  282. reqPromise = [],
  283. newArr = []; //记录非顶部请求的请求数组
  284. for(i = 0; i < loadArr.length; i++) {
  285. var j = loadArr[i];
  286. var param = reqParams[j];
  287. reqPromise.push(httpRequest.get(param.url, {
  288. data: param.data
  289. }));
  290. newArr.push(loadArr[i]);
  291. }
  292. if(reqPromise.length > 0) {
  293. Promise.all(reqPromise).then(function(ress) {
  294. var res1, res2, res3;
  295. for(var i = 0; i < loadArr.length; i++) {
  296. var j = loadArr[i] + 1;
  297. if(j == 1) {
  298. res1 = ress[i];
  299. }
  300. if(j == 2) {
  301. res2 = ress[i];
  302. }
  303. if(j == 3) {
  304. res3 = ress[i];
  305. }
  306. }
  307. if(res1 && res1.status == 200) {
  308. getTopTagDatas(res1.data, vm);
  309. }
  310. if(res2 && res2.status == 200) {
  311. handleSecondPanelData(res2.data, vm);
  312. }
  313. if(res3) {
  314. if(res3.status == 200) {
  315. listHandle(res3.data, vm);
  316. } else {
  317. console.log(res3.msg);
  318. }
  319. }
  320. })
  321. }
  322. }
  323. function handleSecondPanelData(data, vm) {
  324. var xDatas = [],
  325. yDatas = [],
  326. names = [],
  327. colors = ['#12b7f5'];
  328. for(var p in data) {
  329. names.push("总续签人数");
  330. var xData = _.map(data[p].data, function(o) {
  331. return o.range;
  332. });
  333. var yData = _.map(data[p].data, function(o) {
  334. return o.amount;
  335. });
  336. xDatas.push(xData);
  337. yDatas.push(yData);
  338. }
  339. EventBus.$emit("draw-line-chart", {
  340. panelName: "续签趋势",
  341. quotaNames: names,
  342. xData: xDatas[0],
  343. yDatas: yDatas,
  344. colors: colors
  345. });
  346. }
  347. function listHandle(data, vm) {
  348. for(i in data) {
  349. var list = data[i];
  350. var topArr = [];
  351. topArr = soreRank(getKeyValueArr(list, 'renewNum'));
  352. var arr = _.map(list, function(o, index) {
  353. var cols = [o.name];
  354. cols.push(o.rate);
  355. cols.push(o.renewNum);
  356. cols.push(o.signNum);
  357. return {
  358. rank: topArr[index],
  359. code: o.code,
  360. name: o.name,
  361. cols: cols
  362. }
  363. });
  364. var headers = ["排名", "续签率", "续签量", "去年签约量"];
  365. EventBus.$emit("render-area-data", {
  366. level: vm.level,
  367. area: vm.area,
  368. lowLevel: vm.lowLevel,
  369. headers: headers,
  370. rows: arr
  371. });
  372. }
  373. }