|
|
@ -0,0 +1,379 @@
|
|
|
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: '',
|
|
|
analysisName: "所有居民",
|
|
|
renewRange: {
|
|
|
renewRangeText: "",
|
|
|
renewRange: "",
|
|
|
renewAmount: "",
|
|
|
renewRateAll: ""
|
|
|
},
|
|
|
switchRange: {
|
|
|
switchRangeText: "",
|
|
|
switchRange: "",
|
|
|
switchAmount: "",
|
|
|
switchRateAll: ""
|
|
|
},
|
|
|
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,
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
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,
|
|
|
});
|
|
|
|
|
|
//设置监听器， 监听折线图日期变化
|
|
|
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.lowCode = data.lowCode;
|
|
|
vm.contentHtml = data.contentHtml;
|
|
|
vm.startDate = getStartDate(vm.chooseYear);
|
|
|
vm.endDate = getEndDate(vm.chooseYear);
|
|
|
|
|
|
loadData([0, 1, 2], vm); //刷新数据
|
|
|
EventBus.$emit('update-dimension-name', {
|
|
|
dimensionVal: data.name
|
|
|
}); //更新维度名称
|
|
|
EventBus.$emit('update-statistics-time', {}); //更新统计时间
|
|
|
},
|
|
|
component: 'renew-progress-filter',
|
|
|
props: {
|
|
|
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: "",
|
|
|
dimensionVal: vm.analysisName
|
|
|
});
|
|
|
}
|
|
|
|
|
|
function initReqParams(vm) {
|
|
|
var topIndex = {
|
|
|
"4": "29",
|
|
|
"3": "44",
|
|
|
"2": "43"
|
|
|
}, //顶部区域对应的level ： index
|
|
|
bottomIndex = {
|
|
|
"4": "44",
|
|
|
"3": "43",
|
|
|
"2": "42"
|
|
|
}; //与选中的当前底部区域tab的值有关 areaType
|
|
|
|
|
|
if(vm.lowCode && vm.lowCode != "0") {
|
|
|
var topIndex = {
|
|
|
"4": "51",
|
|
|
"3": "54",
|
|
|
"2": "53"
|
|
|
}, //顶部区域对应的level ： index
|
|
|
bottomIndex = {
|
|
|
"4": "54",
|
|
|
"3": "53",
|
|
|
"2": "52"
|
|
|
}; //与选中的当前底部区域tab的值有关 areaType
|
|
|
}
|
|
|
var areaType = vm.lowLevel==2 ? "3" : vm.lowLevel==1?"2":vm.level;
|
|
|
var index = topIndex[vm.level],
|
|
|
bIndex = bottomIndex[areaType];
|
|
|
reqParam = [{
|
|
|
url: "/statistics/getRenewPercentAndChangePercent",
|
|
|
reqType: 'get',
|
|
|
data: {
|
|
|
level: vm.level,
|
|
|
code: vm.area,
|
|
|
year: vm.chooseYear,
|
|
|
index: index,
|
|
|
lowCode: vm.lowCode
|
|
|
}
|
|
|
}, {
|
|
|
url: "/statistics/interval_total",
|
|
|
reqType: 'get',
|
|
|
data: {
|
|
|
level: vm.level,
|
|
|
area: vm.area,
|
|
|
startDate: vm.startDate,
|
|
|
endDate: vm.endDate,
|
|
|
interval: vm.selectedDateType,
|
|
|
index: index,
|
|
|
lowCode: vm.lowCode
|
|
|
}
|
|
|
}, {
|
|
|
url: "/statistics/lowlevel_all_sign_renew",
|
|
|
reqType: 'post',
|
|
|
data: {
|
|
|
sort: 1,
|
|
|
date: vm.endDate,
|
|
|
level: vm.level,
|
|
|
index: bIndex,
|
|
|
area: vm.area,
|
|
|
lowCode: vm.lowCode
|
|
|
}
|
|
|
}];
|
|
|
if(vm.lowLevel) {
|
|
|
reqParam[2].data.lowLevel = vm.lowLevel;
|
|
|
}
|
|
|
|
|
|
return reqParam;
|
|
|
}
|
|
|
|
|
|
function getTopTagDatas(data, vm) {
|
|
|
vm.renewRange.renewRangeText = data.renewRange;
|
|
|
vm.renewRange.renewRange = parseFloat(data.renewRange) / 100;
|
|
|
vm.renewRange.renewAmount = data.thisYearRenew;
|
|
|
vm.renewRange.renewRateAll = data.yesterYearSign;
|
|
|
|
|
|
vm.switchRange.switchRangeText = data.switchRange;
|
|
|
vm.switchRange.switchRange = parseFloat(data.switchRange) / 100;
|
|
|
vm.switchRange.switchAmount = data.thisYearSwithch;
|
|
|
vm.switchRange.switchRateAll = data.thisYearRenew;
|
|
|
var renewArr = [{
|
|
|
name: '续签量',
|
|
|
value: vm.renewRange.renewAmount
|
|
|
}, {
|
|
|
name: '续签总量',
|
|
|
value: vm.renewRange.renewRateAll
|
|
|
}];
|
|
|
|
|
|
var switchArr = [{
|
|
|
name: '转签量',
|
|
|
value: vm.switchRange.switchAmount
|
|
|
}, {
|
|
|
name: '转签总量',
|
|
|
value: vm.switchRange.switchRateAll
|
|
|
}];
|
|
|
drawPieChart('renewMain', renewArr, ['#12b7f5', '#ebebf5']); //续签率
|
|
|
drawPieChart('switchMain', switchArr, ['#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'];
|
|
|
for(var p in data) {
|
|
|
names.push("总续签人数");
|
|
|
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, 'renewNum'));
|
|
|
var arr = _.map(list, function(o, index) {
|
|
|
var cols = [o.name];
|
|
|
cols.push(o.rate);
|
|
|
cols.push(o.renewNum);
|
|
|
cols.push(o.signNum);
|
|
|
return {
|
|
|
rank: topArr[index],
|
|
|
code: o.code,
|
|
|
name: o.name,
|
|
|
cols: cols
|
|
|
}
|
|
|
});
|
|
|
var headers = ["排名", "续签率", "续签量", "去年签约量"];
|
|
|
|
|
|
EventBus.$emit("render-area-data", {
|
|
|
level: vm.level,
|
|
|
area: vm.area,
|
|
|
lowLevel: vm.lowLevel,
|
|
|
headers: headers,
|
|
|
rows: arr
|
|
|
});
|
|
|
}
|
|
|
}
|
linehang