var reqList = []; //记录请求的参数和url,用于后退时使用 Vue.use(Vuedals.default); new Vue({ el: "#main", data: { appname: "签约进展", isback: true, isrefresh: true, isfilter: true, isopen: false, //请求页面所需参数 level: '', area: '', areaTitle: '', index: '3', selectedDateType: 1, //折线图坐标值1-日,2-周,3-月 endDate: '', startDate: '', lowLevel: '', lowCode: '', chooseYear: '', userRole: '', analysisType: "1", // 筛选维度的id, 1-按任务,2-按人口,3-高血压,4-糖尿病,5-65岁以上人群 analysisName:"按任务", signRateData:{ signRateText:"", signRate:"", signAmount:"", signRateAll:"", completeRateText:"", completeRate:"", completeAmount:"", completeRateAll:"" }, yearHtml:"", contentHtml:"" }, 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, endDate: this.endDate, startDate: this.startDate, lowLevel: this.lowLevel, lowCode:this.lowCode }) }, 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; 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, lowCode:this.lowCode, analysisType: this.analysisType, }) } }, 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, lowCode:this.lowCode, analysisType: this.analysisType }); //设置监听器, 监听折线图日期变化 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; vm.lowCode = info.lowCode; loadData([0, 1, 2], vm); } }); //监听页面刷新 EventBus.$on("refresh-click", function(arg) { EventBus.$emit('update-statistics-time', {});//更新统计时间 loadData([0, 1, 2], vm); }); //弹出筛选框 EventBus.$on('filter-click', function(arg) { //弹框显示筛选条件 Vuedals.Bus.$emit('new', { title: '条件筛选', onClose:function(data){ vm.analysisType = data.id; vm.lowCode = data.lowCode; vm.yearHtml = data.yearHtml; vm.contentHtml = data.contentHtml; vm.chooseYear = data.year; vm.startDate = getStartDate(vm.chooseYear); vm.endDate = getEndDate(vm.chooseYear); loadData([0, 1, 2], vm);//刷新数据 EventBus.$emit('update-statistics-year', {selectDate:data.year + "年"});//更新年份 EventBus.$emit('update-dimension-name', {dimensionVal:data.name});//更新维度名称 EventBus.$emit('update-statistics-time', {});//更新统计时间 }, component: 'sign-progress-filter', props: { yearHtml:vm.yearHtml, contentHtml:vm.contentHtml } }); }); } }) function initData(vm) { //获得缓存中缓存的角色权限 var userRole = window.localStorage.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) { 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:vm.chooseYear+"年",dimensionVal:vm.analysisName}); } function initReqParams(vm) { vm.index = 13; if(vm.lowCode) { vm.index = 17; } reqParam = [{ url: "/statistics/sign_info", reqType: 'get', data: { level: vm.level, area: vm.area, lowCode: vm.lowCode, year: vm.chooseYear, endDate: vm.endDate } }, { url: "/statistics/interval_total", reqType: 'get', data: { level: vm.level, area: vm.area, startDate: vm.startDate, endDate: vm.endDate, interval: vm.selectedDateType, index: vm.index, lowCode: vm.lowCode } }, { url: "/statistics/lowlevel_all", reqType: 'get', data: { sort: 1, date: vm.endDate, level: vm.level, index: vm.index, area: vm.area, lowCode: vm.lowCode } }]; if(vm.lowLevel) { reqParam[2].data.lowLevel = vm.lowLevel; } return reqParam; } function getTopReqParams(index1, vm) { var url = "statistics/interval_total", data = { index: index1, level: vm.level, area: vm.area, year: vm.chooseYear, endDate: vm.endDate, startDate: vm.startDate }; return { url: url, data: data }; } function getTopTagDatas(data,vm) { vm.signRateData.signRateText = data.signRate.rate.substring(0,data.signRate.rate.length-2) + "%" vm.signRateData.signRate = parseFloat(data.signRate.rate)/100; vm.signRateData.signAmount = data.signRate.sign; vm.signRateData.signRateAll = data.signRate.people; vm.signRateData.completeRateText = data.signTaskRate.rate.substring(0,data.signTaskRate.rate.length-2) + "%" vm.signRateData.completeRate = parseFloat(data.signTaskRate.rate)/100; vm.signRateData.completeAmount = data.signTaskRate.sign; vm.signRateData.completeRateAll = data.signTaskRate.people; var signArr = [{ name: '签约量', value: vm.signRateData.signAmount },{ name: '签约总量', value: vm.signRateData.signRateAll }]; var completeArr = [{ name: '完成量', value: vm.signRateData.completeAmount },{ name: '完成总量', value: vm.signRateData.completeRateAll }]; drawPieChart('signMain', signArr, ['#12b7f5', '#ebebf5']);//签约率 drawPieChart('completeMain', completeArr, ['#12b7f5', '#ebebf5']);//完成率 } function loadData(loadArr, vm) { //获取其他请求的参数 var reqParams = initReqParams(vm), reqPromise = [], newArr = []; //记录非顶部请求的请求数组 for(i = 0; i < loadArr.length; i++) { var j = loadArr[i]; var param = reqParams[j]; reqPromise.push(httpRequest.get(param.url, { data: param.data })); newArr.push(loadArr[i]); } if(reqPromise.length > 0) { Promise.all(reqPromise).then(function(ress) { var res1, res2, res3; for(var i = 0; i < loadArr.length; i++) { var j = loadArr[i] + 1; if(j == 1) { res1 = ress[i]; } if(j == 2) { res2 = ress[i]; } if(j == 3) { res3 = ress[i]; } } if(res1 && res1.status == 200) { getTopTagDatas(res1.data,vm); } if(res2 && res2.status == 200) { handleSecondPanelData(res2.data, vm); } if(res3) { if(res3.status == 200) { listHandle(res3.data, vm); } else { console.log(res3.msg); } } }) } } function handleSecondPanelData(data, vm) { var xDatas = [], yDatas = [], names = [], colors = ['#12b7f5'], index_names = { 'index_1': '总签约人数' }; 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: "签约量趋势", 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]; if(vm.analysisType=="2" && vm.level>2 && vm.lowLevel!=1){//按人口 cols.push(o.num); }else{ cols.push(o.amount); } if(vm.level>2 && vm.lowLevel!=1){ cols.push(o.signTaskNum); cols.push(parseFloat(o.rate).toFixed(2)+"%"); }else if(vm.chooseYear!="2016"){ cols.push(o.signRegulationNum); } return { rank: topArr[index], code: o.code, name: o.name, cols: cols } }); var activeTab = $(".area-tab-panel .area-tab.active span").html(); var headers = ["排名", (vm.analysisType=="2"?"人口数":"签约量"), "目标率","当前签约率"];//analysisType=2 为按人口 if(activeTab=="团队"){ headers = ["排名", (vm.analysisType=="2"?"人口数":"签约量"), "调控量"]; } EventBus.$emit("render-area-data", { level: vm.level, area: vm.area, lowLevel: vm.lowLevel, headers: headers, rows: arr }); } }