|
|
@@ -8,7 +8,7 @@
|
|
|
<el-radio-button label="1">显示工时</el-radio-button>
|
|
|
</el-radio-group></div>
|
|
|
</el-col>
|
|
|
- <el-col :span="14" style="">
|
|
|
+ <el-col :span="14" style="display: flex;flex-wrap: wrap;">
|
|
|
<el-date-picker v-show="user.timeType.fixMonthcost==0"
|
|
|
v-model="dateRange" :editable="false"
|
|
|
format="yyyy-MM-dd" value-format="yyyy-MM-dd"
|
|
|
@@ -34,6 +34,10 @@
|
|
|
<el-radio-button label="人员"></el-radio-button>
|
|
|
<el-radio-button :label="namess" v-if="jichu.customDegreeActive == 1"></el-radio-button>
|
|
|
</el-radio-group>
|
|
|
+
|
|
|
+ <el-select v-model="personnelValue" filterable clearable placeholder="请选择人员" style="margin-top: 10px;width: 350px" v-if="radio == '人员'" @change="personnel()">
|
|
|
+ <el-option v-for="item in hasReportUserList" :key="item.id" :label="item.name" :value="item.name"></el-option>
|
|
|
+ </el-select>
|
|
|
</el-col>
|
|
|
<el-col :span="4">
|
|
|
<el-button @click="showExportDialog">报表导出</el-button>
|
|
|
@@ -42,7 +46,7 @@
|
|
|
<!-- <div id="clearfix" :style="'width:'+widthHtval+'px;position: relative; height:'+containerHeight+'px;'">
|
|
|
<div id="container" :style="'height:'+containerHeight+'px;width:100%'"></div>
|
|
|
</div> -->
|
|
|
- <div id="clearfix" :style="'overflow-x: auto;width:100%;padding-bottom: 100px; position: relative; height:'+containerHeight+'px;'">
|
|
|
+ <div id="clearfix" :class="radio == '人员' ? '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>
|
|
|
<!-- <div>
|
|
|
@@ -110,6 +114,8 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ personnelValue: '',
|
|
|
+ personnelAll: [],
|
|
|
yAxisValue: localStorage.yAxisValue?localStorage.yAxisValue:0,
|
|
|
parentDeptStack:[],
|
|
|
parentDeptId:null,
|
|
|
@@ -273,6 +279,22 @@
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
+ // 人员筛选
|
|
|
+ personnel() {
|
|
|
+ if(this.personnelValue) {
|
|
|
+ var arrlist = JSON.parse(JSON.stringify(this.personnelAll))
|
|
|
+ var arr = []
|
|
|
+ for(var i in arrlist.list) {
|
|
|
+ if(arrlist.list[i].name == this.personnelValue) {
|
|
|
+ arr.push(arrlist.list[i])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ arrlist.list = arr
|
|
|
+ this.gtff(arrlist)
|
|
|
+ } else {
|
|
|
+ this.gtff(this.personnelAll)
|
|
|
+ }
|
|
|
+ },
|
|
|
//获取人员成本统计列表
|
|
|
getUserCostList() {
|
|
|
this.listLoading = true;
|
|
|
@@ -304,150 +326,152 @@
|
|
|
}
|
|
|
}
|
|
|
//
|
|
|
+ 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)
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ // 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,
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
+ // 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});
|
|
|
+ // 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});
|
|
|
} else {
|
|
|
this.$message({
|
|
|
message: res.msg,
|
|
|
@@ -463,6 +487,152 @@
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
+ // 共同方法
|
|
|
+ gtff(data) {
|
|
|
+ var _this = this;
|
|
|
+ this.hasReportUserList = data.userList;
|
|
|
+ var xList = [] , yList = [] , list = data.list, array = [] , series = [];
|
|
|
+ var totalMoneyCost = 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});
|
|
|
+ },
|
|
|
yanjiu() {
|
|
|
console.log('触发')
|
|
|
},
|
|
|
@@ -790,6 +960,9 @@
|
|
|
// width: 100% !important;
|
|
|
margin-top: 60px;
|
|
|
}
|
|
|
+ .ryuans {
|
|
|
+ top: -50px;
|
|
|
+ }
|
|
|
</style>
|
|
|
|
|
|
<style lang="scss">
|
Lijy