|
|
@@ -58,7 +58,7 @@
|
|
|
<div id="container" :style="'height:'+containerHeight+'px;width:100%'"></div>
|
|
|
</div> -->
|
|
|
<div id="clearfix" :class="radio == $t('ren-yuan') ? 'ryuans' : ''" :style="'overflow-x: auto;width:100%;padding-bottom: 100px; position: relative; height:'+containerHeight+'px;'">
|
|
|
- <div id="container" :style="'height:'+containerHeight+'px;width:100%'"></div>
|
|
|
+ <div id="container" :style="'height:'+(containerHeight - 20)+'px;width:100%'"></div>
|
|
|
<div class="poss">
|
|
|
<el-pagination
|
|
|
@size-change="echartsSizeChange"
|
|
|
@@ -165,6 +165,7 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ allListData: [],
|
|
|
page: 1,
|
|
|
size: 50,
|
|
|
total: 0,
|
|
|
@@ -203,6 +204,14 @@
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
+ echartsCurrentChange(){
|
|
|
+ if(this.radio == this.$t('ren-yuan')){
|
|
|
+ this.gtff()
|
|
|
+ }else{
|
|
|
+ this.jieliu_echarts()
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
//Y轴点击改变显示的数据
|
|
|
onYAxisChange() {
|
|
|
localStorage.yAxisValue = this.yAxisValue;
|
|
|
@@ -380,6 +389,7 @@
|
|
|
},
|
|
|
// 人员筛选
|
|
|
personnel() {
|
|
|
+ this.page = 1
|
|
|
if(this.personnelValue) {
|
|
|
var arrlist = JSON.parse(JSON.stringify(this.personnelAll))
|
|
|
var arr = []
|
|
|
@@ -389,9 +399,11 @@
|
|
|
}
|
|
|
}
|
|
|
arrlist.list = arr
|
|
|
- this.gtff(arrlist)
|
|
|
+ this.allListData = arrlist
|
|
|
+ this.gtff()
|
|
|
} else {
|
|
|
- this.gtff(this.personnelAll)
|
|
|
+ this.allListData = this.personnelAll
|
|
|
+ this.gtff()
|
|
|
}
|
|
|
},
|
|
|
//获取人员成本统计列表
|
|
|
@@ -419,169 +431,11 @@
|
|
|
this.hasReportUserList = [];
|
|
|
if (res.code == "ok") {
|
|
|
//
|
|
|
- // var sss = []
|
|
|
- // var ddd = []
|
|
|
- // for(var i = 0; i < 120; i++) {
|
|
|
- // sss.push(res.data.list[0])
|
|
|
- // ddd.push(res.data.userList[0])
|
|
|
- // }
|
|
|
- // res.data.list = sss
|
|
|
- // res.data.userList = ddd
|
|
|
- for(var i in res.data.list) {
|
|
|
- if(i>20) {
|
|
|
- // this.widthHtval = +this.widthHtval + 2
|
|
|
- this.widthHtval = +this.widthHtval + 40
|
|
|
- } else {
|
|
|
- this.widthHtval = document.body.clientWidth - 230
|
|
|
- }
|
|
|
- }
|
|
|
+
|
|
|
//
|
|
|
this.personnelAll = res.data
|
|
|
- this.gtff(res.data)
|
|
|
- //工时总成本
|
|
|
- // this.hasReportUserList = res.data.userList;
|
|
|
- // var xList = [] yList = [] , list = res.data.list, array = [] , series = [];
|
|
|
- // var totalMoneyCost = res.data.totalCostMoney;
|
|
|
- // var totalHours = 0.0;
|
|
|
- // if (list.length > 0) {
|
|
|
- // var num = list.length==0?0:list[0].project.length;
|
|
|
- // for(var i in list) {
|
|
|
- // xList.push(list[i].name);
|
|
|
- // var pro = list[i].project;
|
|
|
- // for(var j in pro) {
|
|
|
- // if(array.indexOf(pro[j].project) == -1) {
|
|
|
- // array.push(pro[j].project)
|
|
|
- // }
|
|
|
- // }
|
|
|
- // }
|
|
|
-
|
|
|
- // for(var i in array) {
|
|
|
- // yList.push(array[i]);
|
|
|
- // var dataList = [];
|
|
|
- // for(var j in list) {
|
|
|
- // var project = list[j].project , num = 0;
|
|
|
- // if(project.length != 0) {
|
|
|
- // for(var k in project) {
|
|
|
- // if(project[k].project == array[i]) {
|
|
|
- // dataList.push({
|
|
|
- // "value": this.yAxisValue==0?project[k].money:project[k].time,
|
|
|
- // "cost": project[k].time,
|
|
|
- // "money":project[k].money
|
|
|
- // })
|
|
|
- // totalHours += parseFloat(project[k].time);
|
|
|
- // } else {
|
|
|
- // num++;
|
|
|
- // }
|
|
|
- // if(k == project.length-1 && num != project.length-1) {
|
|
|
- // dataList.push({
|
|
|
- // "value": 0,
|
|
|
- // "cost": 0,
|
|
|
- // "money":0,
|
|
|
- // })
|
|
|
- // }
|
|
|
- // }
|
|
|
- // } else {
|
|
|
- // dataList.push({
|
|
|
- // "value": 0,
|
|
|
- // "cost": 0,
|
|
|
- // "money":0,
|
|
|
- // })
|
|
|
- // }
|
|
|
- // }
|
|
|
- // series.push({
|
|
|
- // name: array[i],
|
|
|
- // type: 'bar',
|
|
|
- // stack:'1',
|
|
|
- // barMaxWidth: 30,
|
|
|
- // data: dataList,
|
|
|
- // })
|
|
|
- // }
|
|
|
- // }
|
|
|
-
|
|
|
-
|
|
|
- // var myChart = echarts.init(document.getElementById("container"));
|
|
|
- // totalHours = totalHours.toFixed(1);
|
|
|
- // // 设置宽度
|
|
|
- // myChart.resize({
|
|
|
- // width: this.widthHtval
|
|
|
- // })
|
|
|
- // // 设置宽度
|
|
|
- // _this.myChart = myChart;
|
|
|
- // var option = {
|
|
|
- // //总成本
|
|
|
- // title: {
|
|
|
- // text: '工时成本总计' + totalMoneyCost.toFixed(2) + '元, 时长'+totalHours+'小时',
|
|
|
- // left:'left',
|
|
|
- // },
|
|
|
- // // 工具箱
|
|
|
- // legend: {
|
|
|
- // x: 80,
|
|
|
- // y: 10,
|
|
|
- // data: yList,
|
|
|
- // show: true,
|
|
|
- // top:"5%",//与上方的距离 可百分比% 可像素px
|
|
|
- // },
|
|
|
- // grid : {
|
|
|
- // top : 80, //距离容器上边界40像素
|
|
|
- // // bottom: 100, //距离容器下边界30像素
|
|
|
- // bottom: 35, //距离容器下边界30像素
|
|
|
- // left: 150,
|
|
|
- // right: 150
|
|
|
- // },
|
|
|
- // toolbox: {
|
|
|
- // show: true,
|
|
|
- // feature:{
|
|
|
- // saveAsImage:{
|
|
|
- // show:true
|
|
|
- // },
|
|
|
- // restore:{
|
|
|
- // show:true
|
|
|
- // },
|
|
|
- // // dataView:{
|
|
|
- // // show:true
|
|
|
- // // },
|
|
|
- // // dataZoom:{
|
|
|
- // // show:true
|
|
|
- // // },
|
|
|
- // magicType:{
|
|
|
- // type:['line','bar']
|
|
|
- // }
|
|
|
- // }
|
|
|
- // },
|
|
|
- // tooltip:{
|
|
|
- // trigger:'axis',
|
|
|
- // formatter: function (params,ticket,callback) {
|
|
|
- // var totalTime = 0;
|
|
|
- // var totalCost = 0;
|
|
|
- // var res = "";
|
|
|
- // for(var i in params) {
|
|
|
- // if (params[i].data.value > 0) {
|
|
|
- // res += "<div style='margin-top:3px;font-size:12px;'><font color='#ddd'>项目名称：" + params[i].seriesName
|
|
|
- // + "</font><br/>工作成本 : " + params[i].data.money
|
|
|
- // + "元 <br/>工作时长"+" : " + params[i].data.cost + "小时</br></div>";
|
|
|
- // totalTime += Number(params[i].data.cost);
|
|
|
- // totalCost += Number(params[i].data.money);
|
|
|
- // }
|
|
|
- // }
|
|
|
- // res = res +'<br/>'+ params[0].name+ '<br/>总计: ' + totalTime.toFixed(1)+'小时 '+totalCost.toFixed(2) + "元<br/>";
|
|
|
- // return res;
|
|
|
- // }
|
|
|
- // },
|
|
|
- // xAxis: {
|
|
|
- // data: xList,
|
|
|
- // axisLabel: {
|
|
|
- // interval:0,rotate:20
|
|
|
- // }
|
|
|
- // },
|
|
|
- // yAxis: [{
|
|
|
- // type : 'value',
|
|
|
- // axisLabel: {
|
|
|
- // formatter:this.yAxisValue==0?'{value} (元)':'{value} (小时)'
|
|
|
- // }
|
|
|
- // }],
|
|
|
- // series: series,
|
|
|
- // };
|
|
|
- // myChart.setOption(option,{notMerge:true});
|
|
|
+ this.allListData = res.data
|
|
|
+ this.gtff()
|
|
|
} else {
|
|
|
this.$message({
|
|
|
message: res.msg,
|
|
|
@@ -598,12 +452,20 @@
|
|
|
});
|
|
|
},
|
|
|
// 共同方法
|
|
|
- gtff(data) {
|
|
|
+ gtff() {
|
|
|
+ let data = this.allListData
|
|
|
var _this = this;
|
|
|
this.hasReportUserList = data.userList;
|
|
|
- var xList = [] , yList = [] , list = data.list, array = [] , series = [];
|
|
|
+ var xList = [] , yList = [] , list = data.list.slice(0+50*(this.page-1),49+50*(this.page-1)), array = [] , series = [];
|
|
|
var totalMoneyCost = data.totalCostMoney;
|
|
|
var totalHours = 0.0;
|
|
|
+ for(var i in list) {
|
|
|
+ if(i>20) {
|
|
|
+ this.widthHtval = +this.widthHtval + 60
|
|
|
+ } else {
|
|
|
+ this.widthHtval = document.body.clientWidth - 230
|
|
|
+ }
|
|
|
+ }
|
|
|
if (list.length > 0) {
|
|
|
var num = list.length==0?0:list[0].project.length;
|
|
|
console.log('for 1');
|
|
|
@@ -840,7 +702,7 @@
|
|
|
// 脱离出来的方法
|
|
|
jieliu() {
|
|
|
sessionStorage.radio = this.radio;
|
|
|
- var _this = this;
|
|
|
+
|
|
|
var param = {};
|
|
|
if (this.dateRange != null) {
|
|
|
param = {
|
|
|
@@ -877,22 +739,28 @@
|
|
|
this.http.post(url, param,
|
|
|
res => {
|
|
|
if (res.code == "ok") {
|
|
|
- // 更具数据的长度去加每个柱子的间距
|
|
|
- for(var i in res.data.costList) {
|
|
|
- if(i>20) {
|
|
|
- this.widthHtval = +this.widthHtval + 40
|
|
|
- } else {
|
|
|
- this.widthHtval = document.body.clientWidth - 230
|
|
|
- }
|
|
|
- }
|
|
|
- // console.log(this.dayjs().add('0','day').format("YYYY-MM-DD HH:mm:ss"), '结束处理')
|
|
|
- // if(res.data.costList.length > 20) {
|
|
|
- // for(var i in res.data.costList) {
|
|
|
- // this.widthHtval = +this.widthHtval + 40
|
|
|
- // }
|
|
|
- // } else {
|
|
|
- // this.widthHtval = document.body.clientWidth - 230
|
|
|
- // }
|
|
|
+ this.allListData = res.data
|
|
|
+ this.page = 1
|
|
|
+
|
|
|
+ this.jieliu_echarts()
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ message: res.msg,
|
|
|
+ type: "error"
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ error => {
|
|
|
+ this.$message({
|
|
|
+ message: error,
|
|
|
+ type: "error"
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ jieliu_echarts(){
|
|
|
+ var _this = this;
|
|
|
+ // 更具数据的长度去加每个柱子的间距
|
|
|
+
|
|
|
|
|
|
var xList = []
|
|
|
var yList = []
|
|
|
@@ -900,8 +768,18 @@
|
|
|
var totalMoneyCost;
|
|
|
var totalHours = 0.0;
|
|
|
if(this.radio == this.$t('other.project') || this.radio == this.$t('projectclassification') || this.radio==this.$t('lable.department') || this.radio == this.$t('zhu-xiang-mu')) {
|
|
|
- list = res.data.costList
|
|
|
- totalMoneyCost = ((this.radio==this.$t('other.project') || this.radio == this.$t('projectclassification'))?res.data.totalMoneyCost:res.data.totalCostMoney);
|
|
|
+ // this.allListData = res.data.costList
|
|
|
+ this.total = this.allListData.costList.length
|
|
|
+ list = this.allListData.costList.slice(0+50*(this.page-1),49+50*(this.page-1))
|
|
|
+ for(var i in list) {
|
|
|
+ if(i>20) {
|
|
|
+ this.widthHtval = +this.widthHtval + 60
|
|
|
+ } else {
|
|
|
+ this.widthHtval = document.body.clientWidth - 230
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // list = res.data.costList
|
|
|
+ totalMoneyCost = ((this.radio==this.$t('other.project') || this.radio == this.$t('projectclassification'))?this.allListData.totalMoneyCost:this.allListData.totalCostMoney);
|
|
|
|
|
|
for(var i in list) {
|
|
|
if(this.radio==this.$t('other.project') || this.radio == this.$t('zhu-xiang-mu')) {
|
|
|
@@ -963,7 +841,10 @@
|
|
|
}
|
|
|
}
|
|
|
else if(this.theCustomListFlg) {
|
|
|
- list = res.data.list
|
|
|
+ // this.allListData = res.data.list
|
|
|
+ this.total = this.allListData.list.length
|
|
|
+ list = this.allListData.list.slice(0+50*(this.page-1),49+50*(this.page-1))
|
|
|
+ // list = res.data.list
|
|
|
|
|
|
for(var i in list) {
|
|
|
// console.log(list[i].name, list[i].costMoney, list[i].cost)
|
|
|
@@ -986,7 +867,10 @@
|
|
|
}
|
|
|
}
|
|
|
else {
|
|
|
- list = res.data
|
|
|
+ // list = res.data
|
|
|
+ // this.allListData = res.data
|
|
|
+ this.total = this.allListData.length
|
|
|
+ list = this.allListData.slice(0+50*(this.page-1),49+50*(this.page-1))
|
|
|
|
|
|
for(var i in list) {
|
|
|
// console.log(list[i].name, list[i].costMoney, list[i].cost)
|
|
|
@@ -1009,8 +893,7 @@
|
|
|
}
|
|
|
}
|
|
|
totalHours = totalHours.toFixed(1);
|
|
|
-
|
|
|
- var myChart = echarts.init(document.getElementById("container"));
|
|
|
+ var myChart = echarts.init(document.getElementById("container"));
|
|
|
myChart.resize({
|
|
|
width: this.widthHtval
|
|
|
})
|
|
|
@@ -1162,19 +1045,6 @@
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
- } else {
|
|
|
- this.$message({
|
|
|
- message: res.msg,
|
|
|
- type: "error"
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- error => {
|
|
|
- this.$message({
|
|
|
- message: error,
|
|
|
- type: "error"
|
|
|
- });
|
|
|
- });
|
|
|
},
|
|
|
|
|
|
// 左右滚动
|
|
|
@@ -1335,7 +1205,7 @@
|
|
|
}
|
|
|
.poss {
|
|
|
position: fixed;
|
|
|
- bottom: 4px;
|
|
|
+ bottom: -10px;
|
|
|
right: 1%;
|
|
|
box-sizing: border-box;
|
|
|
}
|
ggooalice