var reqList = []; //记录请求的参数和url,用于后退时使用 Vue.use(Vuedals.default); new Vue({ el: "#main", data: { appname: "退改签", isback: true, isrefresh: true, isfilter: false, isopen: false, //请求页面所需参数 level: '', area: '', areaTitle: '', index: '9', selectedDateType: 1, //折线图坐标值1-日,2-周,3-月 endDate: '', startDate: '', lowLevel: '', chooseYear: '', userRole: '', //数据结果 topDatas: { index_2: 0, index_9: 0, index_10: 0 }, isloading:false, //加载中 }, components: { vuedals: Vuedals.Component }, methods: { changeTag: function(val) { this.index = val; loadData([1, 2], this); //存储请求所带的参数 reqList.push({ level: this.level, area: this.area, areaTitle: this.areaTitle, index: this.index, date:this.endDate, endDate: this.endDate, startDate: this.startDate, lowLevel: this.lowLevel }) }, getNewLineData: function(arg) { this.selectedDateType = arg.dateType; loadData([1], this); }, getAreaData: function(arg) { //如果level改变,则需要重新加载整个页面的数据,否则只需加载底部区域数据 if(arg.level == this.level) { this.lowLevel = arg.lowLevel; loadData([2], this); } else { this.level = arg.level; this.lowLevel = arg.lowLevel; this.area = arg.area; this.areaTitle = arg.areaTitle; loadData([0, 1, 2], this); } EventBus.$emit('update-area-name', {areaName: this.areaTitle}); //存储请求所带的参数 reqList.push({ level: this.level, area: this.area, areaTitle: this.areaTitle, index: this.index, endDate: this.endDate, startDate: this.startDate, lowLevel: this.lowLevel, }) } }, mounted: function() { //初始化数据 initData(this); //获得顶部各tab的值 loadData([0, 1, 2], this); //参数组数表示请求的区域为上中下 //存储请求所带的参数 reqList.push({ level: this.level, area: this.area, areaTitle: this.areaTitle, index: this.index, endDate: this.endDate, startDate: this.startDate, lowLevel: this.lowLevel }); //设置监听器, 监听折线图日期变化 var vm = this; //监听后退按钮的操作 EventBus.$on("back-click", function(arg) { EventBus.$emit('update-statistics-time', {}); //更新统计时间 if(reqList.length == 1) { history.go(-1); } else { var preInfo = reqList.pop(); var info = reqList[reqList.length - 1]; vm.level = info.level; vm.area = info.area; vm.areaTitle = info.areaTitle; vm.lowLevel = info.lowLevel; vm.index = info.index; loadData([0, 1, 2], vm); EventBus.$emit('update-area-name', {areaName: vm.areaTitle}); } }); //监听页面刷新 EventBus.$on("refresh-click", function(arg) { EventBus.$emit('update-statistics-time', {}); //更新统计时间 loadData([0, 1, 2], vm); }); $("#main").removeClass("c-hide"); } }) function initData(vm) { //获得缓存中缓存的角色权限 var userRole = window.sessionStorage.getItem("selectedRole"); if(!userRole) { return false; } vm.userRole = JSON.parse(userRole); vm.level = vm.userRole.code == '350200' ? 4 : vm.userRole.code.length == 6 ? 3 : 2; vm.area = vm.userRole.code; vm.areaTitle = vm.userRole.name; var now = new Date(); if(now.getMonth() >= 6 || now.getFullYear()>=2023) { vm.chooseYear = now.getFullYear(); } else { vm.chooseYear = now.getFullYear() - 1; } vm.startDate = getStartDate(vm.chooseYear); vm.endDate = getEndDate(vm.chooseYear); //更新头部信息 EventBus.$emit('update-all-prompt-info', { areaName: vm.areaTitle, selectDate: "", dimensionVal: vm.analysisName }); } function getTopReqParams(index1, vm) { var url = "/statistics/index_all", data = { index: index1, level: vm.level, area: vm.area, startDate: vm.startDate, endDate: vm.endDate }; return { url: url, data: data }; } function getTopTagDatas(vm) { var reqs = [], indexs = ['2', '9', '10']; for(i = 0; i < indexs.length; i++) { var item = getTopReqParams(indexs[i], vm); reqs.push(httpRequest.get(item.url, { data: item.data })); } Promise.all(reqs).then(function(ress) { for(i = 0; i < ress.length; i++) { var res = ress[i]; if(res.status == 200) { for(key in res.data) { vm.topDatas[key] = res.data[key]; } } else { console.log(res.msg); } } }) } function initReqParams(vm) { reqParam = [{ url: "/statistics/interval_total", reqType: 'get', data: { index: vm.index, level: vm.level, area: vm.area, startDate: vm.startDate, endDate: vm.endDate, interval: vm.selectedDateType } }, { url: "/statistics/lowlevel_all", reqType: 'get', data: { sort: 1, date: vm.endDate, level: vm.level, index: vm.index, area: vm.area } }]; if(vm.lowLevel) { reqParam[1].data.lowLevel = vm.lowLevel; } return reqParam; } function loadData(loadArr, vm) { if(loadArr.indexOf(0) > -1) { getTopTagDatas(vm); } //获取其他请求的参数 var reqParams = initReqParams(vm), reqPromise = [], newArr = []; //记录非顶部请求的请求数组 for(i = 0; i < loadArr.length; i++) { if(loadArr[i] == 0) { // do nothing } else { var j = loadArr[i] - 1; var param = reqParams[j]; reqPromise.push(httpRequest.get(param.url, { data: param.data })); newArr.push(loadArr[i]); } } vm.isloading=true if(reqPromise.length > 0) { Promise.all(reqPromise).then(function(ress) { vm.isloading=false var res1 = [], res2 = []; if(ress.length==2){ res1 = ress[0] || [], res2 = ress[1] || []; } if(loadArr[0]==1){//点击日周月 res1 = ress[0] || []; } if(loadArr[0]==2){//点击区、社区 res2 = ress[0] || []; } if(res1 && res1.status == 200) { handleSecondPanelData(res1.data, vm); } if(res2) { if(res2.status == 200) { listHandle(res2.data, vm); } else { console.log(res2.msg); } } }) } } function handleSecondPanelData(data, vm) { var xDatas = [], yDatas = [], names = [], colors = ['#12b7f5'], labels = { '2': '退签人数新增趋势', '9': '待审核数新增趋势', '10': '改签人数新增趋势' }, index_names = { 'index_2': '退签人数', 'index_9': '待审核数', 'index_10': '改签人数' }; for(var p in data) { names.push(index_names[p]); var xData = _.map(data[p].data, function(o) { return o.range; }); var yData = _.map(data[p].data, function(o) { return o.amount; }); xDatas.push(xData); yDatas.push(yData); } EventBus.$emit("draw-line-chart", { panelName: labels[vm.index], quotaNames: names, xData: xDatas[0], yDatas: yDatas, colors: colors, }); } function listHandle(data, vm) { for(i in data) { var list = data[i]; var topArr = []; topArr = soreRank(getKeyValueArr(list, 'amount')); var arr = _.map(list, function(o, index) { var cols = [o.name]; cols.push(o.amount); return { rank: topArr[index], code: o.code, name: o.name, cols: cols } }); var headers = { '2': ["排名", "退签人数"], '9': ["排名", "待审核数"], '10': ["排名", "改签人数"] }; EventBus.$emit("render-area-data", { level: vm.level, area: vm.area, lowLevel: vm.lowLevel, headers: headers[vm.index], rows: arr }); } }