|
|
@ -0,0 +1,311 @@
|
|
|
var reqList = [];
|
|
|
new Vue({
|
|
|
el: "#main",
|
|
|
data: {
|
|
|
appname: "咨询分析",
|
|
|
isback: true,
|
|
|
isrefresh: true,
|
|
|
isfilter: true,
|
|
|
isopen: true,
|
|
|
//页面请求参数
|
|
|
level: '',
|
|
|
area: '',
|
|
|
areaTitle: '',
|
|
|
lowLevel: '',
|
|
|
chooseYear: '',
|
|
|
endDate: '',
|
|
|
topDatas: {
|
|
|
total: 0,
|
|
|
noRelyCount: 0,
|
|
|
noRelyRate: 0,
|
|
|
relyRate: 0
|
|
|
}
|
|
|
},
|
|
|
components: {
|
|
|
vuedals: Vuedals.Component
|
|
|
},
|
|
|
methods:{
|
|
|
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,
|
|
|
lowLevel: this.lowLevel,
|
|
|
endDate: this.endDate
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
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){
|
|
|
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.$on("refresh-click", function(arg){
|
|
|
loadData([0,1,2], vm);
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
|
|
|
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;
|
|
|
EventBus.$emit('update-area-name', {areaName: vm.areaTitle});
|
|
|
|
|
|
var now = new Date();
|
|
|
if(now.getMonth() >= 6){
|
|
|
vm.chooseYear = now.getFullYear();
|
|
|
}else{
|
|
|
vm.chooseYear = now.getFullYear() - 1;
|
|
|
}
|
|
|
vm.endDate = getEndDate(vm.chooseYear);
|
|
|
}
|
|
|
|
|
|
function initReqParams(vm){
|
|
|
var param = [{
|
|
|
url: "/statistics/Consulting_Title",
|
|
|
data: {level: vm.level, area: vm.area, year: vm.chooseYear}
|
|
|
},{
|
|
|
url: "/statistics/getCoutListByTime",
|
|
|
data: {level: vm.level, area: vm.area, year: vm.chooseYear}
|
|
|
},{
|
|
|
url: "/statistics/Consulting_StatList",
|
|
|
data: {level: vm.level, area: vm.area, year: vm.chooseYear, sort: 1, date: vm.endDate, lowlevel: vm.lowLevel}
|
|
|
}];
|
|
|
|
|
|
return param;
|
|
|
}
|
|
|
|
|
|
function loadData(loadArr, vm){
|
|
|
//获取其他请求的参数
|
|
|
var reqParams = initReqParams(vm),
|
|
|
reqPromise = [];
|
|
|
|
|
|
for(i=0; i< loadArr.length; i++){
|
|
|
var j = loadArr[i];
|
|
|
var param = reqParams[j];
|
|
|
reqPromise.push(httpRequest.get(param.url, {data: param.data}));
|
|
|
}
|
|
|
|
|
|
if(reqPromise.length > 0){
|
|
|
Promise.all(reqPromise).then(function(ress){
|
|
|
var res1, res2, res2;
|
|
|
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){
|
|
|
if(res1.status == 200){
|
|
|
handleTopPanelData(res1.data, vm);
|
|
|
}else{
|
|
|
console.log(res1.msg);
|
|
|
}
|
|
|
}
|
|
|
if(res2){
|
|
|
if(res2.status == 200){
|
|
|
handleSecondPanelData(res2.data, vm);
|
|
|
}else{
|
|
|
console.log(res2.msg);
|
|
|
}
|
|
|
|
|
|
}
|
|
|
if(res3){
|
|
|
if(res3.status == 200){
|
|
|
listHandle(res3.data, vm);
|
|
|
}else{
|
|
|
console.log(res3.msg);
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function handleTopPanelData(data, vm){
|
|
|
var obj = data.result[0];
|
|
|
console.log(obj);
|
|
|
vm.topDatas = {
|
|
|
total: obj.total,
|
|
|
noRelyCount: obj.noRelyCount,
|
|
|
noRelyRate: obj.noRelyRate,
|
|
|
relyRate: obj.relyRate
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function handleSecondPanelData(data, vm){
|
|
|
var list = data.resultList,
|
|
|
xData = [],
|
|
|
yData = [];
|
|
|
for(i=0; i<list.length; i++){
|
|
|
var item = list[i];
|
|
|
xData.push(item.name + "时");
|
|
|
yData.push(item.num);
|
|
|
}
|
|
|
drawBarChart(xData, yData);
|
|
|
}
|
|
|
|
|
|
function listHandle(data, vm){
|
|
|
var list = data.resultList;
|
|
|
var topArr = soreRank(getKeyValueArr(list, 'relyDoubleRate'));
|
|
|
var arr = _.map(list, function(o, index){
|
|
|
var cols = [o.name, o.total, o.noRelyCount, o.noRelyRate];
|
|
|
return {
|
|
|
rank: topArr[index],
|
|
|
code: o.code,
|
|
|
name: o.name,
|
|
|
cols: cols
|
|
|
}
|
|
|
});
|
|
|
|
|
|
EventBus.$emit("render-area-data",{
|
|
|
level: vm.level,
|
|
|
area: vm.area,
|
|
|
lowLevel: vm.lowLevel,
|
|
|
headers: ["排名", "咨询数", "未回复数", "未回复率"],
|
|
|
rows: arr
|
|
|
});
|
|
|
}
|
|
|
|
|
|
function drawBarChart(xData, yData) {
|
|
|
var myChart = echarts.init(document.getElementById('barChart'));
|
|
|
var options = {
|
|
|
calculable: true,
|
|
|
tooltip: {
|
|
|
trigger: 'item',
|
|
|
// formatter: '{a}<br />{b} : {c}次'
|
|
|
},
|
|
|
toolbox: {
|
|
|
dataZoom: true,
|
|
|
show: true,
|
|
|
orient: 'vertical',
|
|
|
x: 'right',
|
|
|
y: 'center'
|
|
|
},
|
|
|
grid: {
|
|
|
left: '20px',
|
|
|
right: '20px',
|
|
|
bottom: '20px',
|
|
|
top: '20px',
|
|
|
containLabel: true
|
|
|
},
|
|
|
xAxis: [{
|
|
|
type: 'category',
|
|
|
axisLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
color: '#dcdcdc',
|
|
|
width: 1
|
|
|
}
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
color: '#666'
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: false
|
|
|
},
|
|
|
data: xData
|
|
|
}],
|
|
|
yAxis: [{
|
|
|
type: 'value',
|
|
|
axisLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
color: '#dcdcdc',
|
|
|
width: 1
|
|
|
}
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
color: '#666'
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: false
|
|
|
},
|
|
|
}],
|
|
|
series: [{
|
|
|
name: '回复次数',
|
|
|
type: 'bar',
|
|
|
barWidth: 40,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: function(params) {
|
|
|
var colorList = ['#12B7F5', '#FB5DAB', '#CD67FD', '#FFC800', '#61EB41'];
|
|
|
return colorList[params.dataIndex]
|
|
|
},
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: 'top',
|
|
|
formatter: function(params) {
|
|
|
return params.value;
|
|
|
}
|
|
|
},
|
|
|
barBorderRadius: 0
|
|
|
}
|
|
|
},
|
|
|
data: yData
|
|
|
}]
|
|
|
};
|
|
|
myChart.clear();
|
|
|
myChart.setOption(options);
|
|
|
}
|
