|
|
@@ -1,796 +0,0 @@
|
|
|
-<template>
|
|
|
- <section>
|
|
|
- <el-col :span="24" style="padding-bottom: 0px;text-align:center;margin-top:10px;position: fixed;top: 60px;left: 160px;z-index: 999;">
|
|
|
- <el-date-picker v-show="user.timeType.fixMonthcost==0"
|
|
|
- v-model="dateRange" :editable="false"
|
|
|
- format="yyyy-MM-dd" value-format="yyyy-MM-dd"
|
|
|
- @change="getEchart"
|
|
|
- :clearable="true"
|
|
|
- range-separator="至"
|
|
|
- type="daterange"
|
|
|
- start-placeholder="开始日期"
|
|
|
- end-placeholder="结束日期"
|
|
|
- ></el-date-picker>
|
|
|
-
|
|
|
- <el-date-picker v-show="user.timeType.fixMonthcost==1"
|
|
|
- v-model="dateRange" :editable="false"
|
|
|
- format="yyyy-MM" value-format="yyyy-MM"
|
|
|
- @change="getEchart"
|
|
|
- :clearable="false"
|
|
|
- type="month"
|
|
|
- ></el-date-picker>
|
|
|
-
|
|
|
- <el-radio-group v-model="radio" @change="getEchart" style="margin-left:10px;">
|
|
|
- <el-radio-button label="项目"></el-radio-button>
|
|
|
- <el-radio-button label="部门"></el-radio-button>
|
|
|
- <el-radio-button label="人员"></el-radio-button>
|
|
|
- <el-radio-button :label="namess" v-if="jichu.customDegreeActive == 1"></el-radio-button>
|
|
|
- </el-radio-group>
|
|
|
- </el-col>
|
|
|
- <!-- <div :style="'width:'+widthHtval+'rem;position: relative;'"> -->
|
|
|
- <div :style="'width:'+widthHtval+'px;position: relative; height:'+containerHeight+'px;'">
|
|
|
- <div id="container" :style="'height:'+containerHeight+'px;width:100%'"></div>
|
|
|
- </div>
|
|
|
- <div style="position:fixed;top:120px;right:150px;"><el-button @click="showExportDialog">报表导出</el-button></div>
|
|
|
-
|
|
|
- <!--导出报表条件选择 -->
|
|
|
- <el-dialog title="工时报表导出" v-if="exportDialog" :visible.sync="exportDialog" :close-on-click-modal="false" customClass="customWidth" width="500px">
|
|
|
- <el-form ref="form3" :model="exportParam" >
|
|
|
- <el-form-item prop="projectId" label="选择项目" v-if="radio != '人员'">
|
|
|
- <el-select v-model="exportParam.projectId" placeholder="全部项目" clearable style="width:350px;" filterable="true">
|
|
|
- <el-option v-for="item in projectList" :key="item.id" :label="item.projectName" :value="item.id"></el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item prop="userIds" label="选择人员" v-if="radio == '人员'">
|
|
|
- <el-select v-model="exportParam.userIds" placeholder="全部人员" multiple="true" clearable style="width:350px;" filterable="true">
|
|
|
- <el-option v-for="item in hasReportUserList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item prop="projectId" :label="user.timeType.fixMonthcost==0?'日期范围':'选择月份'">
|
|
|
- <el-date-picker v-show="user.timeType.fixMonthcost==0"
|
|
|
- v-model="exportParam.dateRange" :editable="false"
|
|
|
- format="yyyy-MM-dd" value-format="yyyy-MM-dd"
|
|
|
- :clearable="false"
|
|
|
- range-separator="至"
|
|
|
- type="daterange"
|
|
|
- start-placeholder="开始日期"
|
|
|
- end-placeholder="结束日期"
|
|
|
- ></el-date-picker>
|
|
|
-
|
|
|
-
|
|
|
- <el-date-picker v-show="user.timeType.fixMonthcost==1"
|
|
|
- v-model="dateRange" :editable="false"
|
|
|
- format="yyyy-MM" value-format="yyyy-MM"
|
|
|
- @change="getEchart"
|
|
|
- :clearable="true"
|
|
|
- type="month"
|
|
|
- ></el-date-picker>
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item label="选择人员" v-if="radio == '项目' || radio == '部门'">
|
|
|
- <el-select v-model="exportParam.userId" placeholder="请选择人员" style="width: 350px" filterable="true">
|
|
|
- <span v-for="(item, index) in users" :key="index">
|
|
|
- <el-option :label="item.name" :value="item.id"></el-option>
|
|
|
- </span>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- <div slot="footer" class="dialog-footer">
|
|
|
- <el-button type="primary" @click="exportProjectData" style="width:100%;" >导出</el-button>
|
|
|
- </div>
|
|
|
- </el-dialog>
|
|
|
- </section>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- import util from "../../common/js/util";
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- hasReportUserList:[],
|
|
|
- projectList:[],
|
|
|
- exportParam:{projectId:null,dateRange:[],userId: null},
|
|
|
- exportDialog:false,
|
|
|
- dateRange:[],
|
|
|
- user: JSON.parse(sessionStorage.getItem("user")),
|
|
|
- radio: sessionStorage.radio!=null?sessionStorage.radio:'项目',
|
|
|
- containerHeight: 0,
|
|
|
- myChart: null,
|
|
|
- params: null,
|
|
|
- widthHtval: document.body.clientWidth - 230,
|
|
|
- users: [],
|
|
|
- jichu: [],
|
|
|
- namess: '',
|
|
|
- timers: null, // 点击的时间
|
|
|
- zhishin: 0
|
|
|
- };
|
|
|
- },
|
|
|
- methods: {
|
|
|
- jutishez() {
|
|
|
- this.http.post('/time-type/getCompanyTimeSetting', {
|
|
|
- companyId: this.user.companyId,
|
|
|
- },
|
|
|
- res => {
|
|
|
- if (res.code == "ok") {
|
|
|
- this.jichu = res.data
|
|
|
- if(res.data.customDegreeActive == 1) {
|
|
|
- this.namess = res.data.customDegreeName
|
|
|
- }
|
|
|
- } else {
|
|
|
- this.$message({
|
|
|
- message: res.msg,
|
|
|
- type: "error"
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- error => {
|
|
|
- this.$message({
|
|
|
- message: error,
|
|
|
- type: "error"
|
|
|
- });
|
|
|
- });
|
|
|
- },
|
|
|
- getUsers() {
|
|
|
- console.log(this.port.manage.list)
|
|
|
- this.http.post(this.port.manage.list, {
|
|
|
- departmentId: -1,
|
|
|
- pageIndex: 1,
|
|
|
- pageSize: 99999
|
|
|
- },
|
|
|
- res => {
|
|
|
- if (res.code == "ok") {
|
|
|
- this.users = res.data.records;
|
|
|
- } else {
|
|
|
- this.$message({
|
|
|
- message: res.msg,
|
|
|
- type: "error"
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- error => {
|
|
|
- this.$message({
|
|
|
- message: error,
|
|
|
- type: "error"
|
|
|
- });
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- showExportDialog() {
|
|
|
- this.exportDialog = true;
|
|
|
- this.exportParam.dateRange = this.dateRange;
|
|
|
- if (this.radio == '人员') {
|
|
|
- // this.exportParam.userIds = [];
|
|
|
- }
|
|
|
- },
|
|
|
- //获取我的项目列表
|
|
|
- getMyProjectList() {
|
|
|
- this.http.post('/project/getProjectList', {
|
|
|
- },
|
|
|
- res => {
|
|
|
- if (res.code == "ok") {
|
|
|
- this.projectList = res.data;
|
|
|
- } else {
|
|
|
- this.$message({
|
|
|
- message: res.msg,
|
|
|
- type: "error"
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- error => {
|
|
|
- this.$message({
|
|
|
- message: error,
|
|
|
- type: "error"
|
|
|
- });
|
|
|
- });
|
|
|
- },
|
|
|
- exportProjectData() {
|
|
|
- var param = {};
|
|
|
- if (this.exportParam.dateRange != null) {
|
|
|
- param = {startDate:this.exportParam.dateRange[0], endDate: this.exportParam.dateRange[1]};
|
|
|
- }
|
|
|
- var url = "/project/exportTimeCost";
|
|
|
- var fileName = '项目工时成本统计.xls';
|
|
|
- if (this.radio == '人员' ) {
|
|
|
- console.log(this.exportParam.userIds);
|
|
|
- fileName = '人员工时成本统计.xls';
|
|
|
- url = '/department/exportUserStatistic';
|
|
|
- if (this.exportParam.userIds != null && this.exportParam.userIds.length > 0) {
|
|
|
- var ids = '';
|
|
|
- this.exportParam.userIds.forEach(u=>{
|
|
|
- ids += u+',';
|
|
|
- })
|
|
|
- param.userIds = ids;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- if (this.exportParam.projectId != null) {
|
|
|
- param.projectId = this.exportParam.projectId;
|
|
|
- }
|
|
|
- if (this.exportParam.userId != null) {
|
|
|
- if(this.radio == '项目' || this.radio == '部门' || this.radio == '人员'){
|
|
|
- param.userId = this.exportParam.userId;
|
|
|
- }
|
|
|
- }
|
|
|
- this.http.post(url, param,
|
|
|
- res => {
|
|
|
- this.listLoading = false;
|
|
|
- if (res.code == "ok") {
|
|
|
- this.exportDialog = false;
|
|
|
- var aTag = document.createElement('a');
|
|
|
- aTag.download = fileName;
|
|
|
- aTag.href = res.data;
|
|
|
- aTag.click();
|
|
|
- } else {
|
|
|
- this.$message({
|
|
|
- message: res.msg,
|
|
|
- type: "error"
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- error => {
|
|
|
- this.listLoading = false;
|
|
|
- this.$message({
|
|
|
- message: error,
|
|
|
- type: "error"
|
|
|
- });
|
|
|
- });
|
|
|
- },
|
|
|
- //获取人员成本统计列表
|
|
|
- getUserCostList() {
|
|
|
- this.listLoading = true;
|
|
|
- this.http.post(this.port.project.userCost, {
|
|
|
- startDate:this.user.timeType.fixMonthcost==0?this.dateRange[0]:this.dateRange,
|
|
|
- endDate: this.user.timeType.fixMonthcost==0?this.dateRange[1]:this.dateRange
|
|
|
- },
|
|
|
- res => {
|
|
|
- this.listLoading = false;
|
|
|
- var _this = this;
|
|
|
- this.hasReportUserList = [];
|
|
|
- if (res.code == "ok") {
|
|
|
- //工时总成本
|
|
|
- this.hasReportUserList = res.data.userList;
|
|
|
- var xList = [] , yList = [] , list = res.data.list, array = [] , series = [];
|
|
|
- var totalMoneyCost = res.data.totalCostMoney;
|
|
|
- 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": project[k].money,
|
|
|
- "cost": project[k].time,
|
|
|
- })
|
|
|
- } else {
|
|
|
- num++;
|
|
|
- }
|
|
|
- if(k == project.length-1 && num != project.length-1) {
|
|
|
- dataList.push({
|
|
|
- "value": 0,
|
|
|
- "cost": 0,
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- } else {
|
|
|
- dataList.push({
|
|
|
- "value": 0,
|
|
|
- "cost": 0,
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- series.push({
|
|
|
- name: array[i],
|
|
|
- type: 'bar',
|
|
|
- stack:'1',
|
|
|
- barMaxWidth: 30,
|
|
|
- data: dataList,
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- var myChart = echarts.init(document.getElementById("container"));
|
|
|
- _this.myChart = myChart;
|
|
|
- var option = {
|
|
|
- //总成本
|
|
|
- title: {
|
|
|
- text: '工时成本总计' + totalMoneyCost.toFixed(2) + '元',
|
|
|
- left:'left',
|
|
|
- },
|
|
|
-
|
|
|
- // 工具箱
|
|
|
- legend: {
|
|
|
- x: 80,
|
|
|
- y: 10,
|
|
|
- data: yList,
|
|
|
- show: true,
|
|
|
- top:"5%",//与上方的距离 可百分比% 可像素px
|
|
|
- },
|
|
|
- grid : {
|
|
|
- top : 80, //距离容器上边界40像素
|
|
|
- bottom: 35 //距离容器下边界30像素
|
|
|
- },
|
|
|
- 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.value
|
|
|
- + "元 <br/>工作时长"+" : " + params[i].data.cost + "小时</br></div>";
|
|
|
- totalTime += Number(params[i].data.cost);
|
|
|
- totalCost += Number(params[i].data.value);
|
|
|
- }
|
|
|
- }
|
|
|
- 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:'{value} (元)'
|
|
|
- }
|
|
|
- }],
|
|
|
- series: series,
|
|
|
- };
|
|
|
- myChart.setOption(option,{notMerge:true});
|
|
|
- } else {
|
|
|
- this.$message({
|
|
|
- message: res.msg,
|
|
|
- type: "error"
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- error => {
|
|
|
- this.listLoading = false;
|
|
|
- this.$message({
|
|
|
- message: error,
|
|
|
- type: "error"
|
|
|
- });
|
|
|
- });
|
|
|
- },
|
|
|
- yanjiu() {
|
|
|
- console.log('触发')
|
|
|
- },
|
|
|
- getEchart(){
|
|
|
- var that = this
|
|
|
- that.timers = setTimeout(()=>{
|
|
|
- clearTimeout(that.timers)
|
|
|
- console.log(that.timers)
|
|
|
- that.jieliu()
|
|
|
- },800);
|
|
|
- // this.jieliu()
|
|
|
- },
|
|
|
- // 脱离出来的方法
|
|
|
- jieliu() {
|
|
|
- console.log('触发了')
|
|
|
- sessionStorage.radio = this.radio;
|
|
|
- var _this = this;
|
|
|
- var param = {};
|
|
|
- if (this.dateRange != null) {
|
|
|
- param = {startDate:this.user.timeType.fixMonthcost==0?this.dateRange[0]:this.dateRange,
|
|
|
- endDate: this.user.timeType.fixMonthcost==0?this.dateRange[1]:this.dateRange};
|
|
|
- console.log(param);
|
|
|
- }
|
|
|
- var url = '';
|
|
|
- if (this.radio=='项目') {
|
|
|
- url = this.port.project.listCost;
|
|
|
- } else if (this.radio=='部门') {
|
|
|
- url = this.port.project.depCost;
|
|
|
- } else if (this.radio=='人员') {
|
|
|
- this.getUserCostList();
|
|
|
- return;
|
|
|
- } else if (this.radio == this.namess) {
|
|
|
- url = '/project/getDegreeCost'
|
|
|
- }
|
|
|
- this.http.post(url, param,
|
|
|
- res => {
|
|
|
- if (res.code == "ok") {
|
|
|
- // 测试写的
|
|
|
- // var shujuy = res.data.costList
|
|
|
- // var arrsa = []
|
|
|
- // for(var i=0; i<30; i++) {
|
|
|
- // arrsa.push(shujuy[0])
|
|
|
- // }
|
|
|
- // console.log(arrsa)
|
|
|
- // res.data.costList = arrsa
|
|
|
- for(var i in res.data.costList) {
|
|
|
- if(i>20) {
|
|
|
- // this.widthHtval = +this.widthHtval + 2
|
|
|
- this.widthHtval = +this.widthHtval + 40
|
|
|
- } else {
|
|
|
- this.widthHtval = document.body.clientWidth - 230
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 测试写的
|
|
|
- var xList = []
|
|
|
- var yList = []
|
|
|
- var list
|
|
|
- var totalMoneyCost
|
|
|
- if(this.radio == '项目' || this.radio == '人员' || this.radio=='部门') {
|
|
|
- list = res.data.costList
|
|
|
- totalMoneyCost = ((this.radio=='项目' || this.radio=='人员')?res.data.totalMoneyCost:res.data.totalCostMoney);
|
|
|
- for(var i in list) {
|
|
|
- if(this.radio=='项目' || this.radio == '人员') {
|
|
|
- xList.push(this.radio=='项目'?list[i].project:list[i].name);
|
|
|
- yList.push({
|
|
|
- "value": list[i].costMoney.toFixed(2) || list[i].costMoney,
|
|
|
- "id": list[i].id || i,
|
|
|
- "cost": list[i].cost
|
|
|
- });
|
|
|
- } else {
|
|
|
- xList.push(list[i].departmentName);
|
|
|
- yList.push({
|
|
|
- "value": list[i].costMoney.toFixed(2) || list[i].costMoney,
|
|
|
- "id": list[i].departmentId,
|
|
|
- "cost": list[i].costTime
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
- } else {
|
|
|
- list = res.data
|
|
|
- var totalMoneyCost = 1
|
|
|
- for(var i in list) {
|
|
|
- console.log(list[i].name, list[i].costMoney, list[i].cost)
|
|
|
- xList.push(list[i].name);
|
|
|
- yList.push({
|
|
|
- "value": list[i].costMoney,
|
|
|
- "id": list[i].id || i,
|
|
|
- "cost": list[i].cost
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
- // var xList = [], yList = [], list = res.data.costList,
|
|
|
- // totalMoneyCost = ((this.radio=='项目' || this.radio=='人员')?res.data.totalMoneyCost:res.data.totalCostMoney);
|
|
|
- // for(var i in list) {
|
|
|
- // if(this.radio=='项目' || this.radio == '人员') {
|
|
|
- // xList.push(this.radio=='项目'?list[i].project:list[i].name);
|
|
|
- // yList.push({
|
|
|
- // "value": list[i].costMoney.toFixed(2),
|
|
|
- // "id": list[i].id || i,
|
|
|
- // "cost": list[i].cost
|
|
|
- // });
|
|
|
- // }
|
|
|
- // // else if(this.radio=='研究'){
|
|
|
- // // xList.push(list[i].name)
|
|
|
- // // yList.push({
|
|
|
- // // "value": list[i].costMoney.toFixed(2),
|
|
|
- // // // "id": list[i].id,
|
|
|
- // // "id": i,
|
|
|
- // // "cost": list[i].cost
|
|
|
- // // })
|
|
|
- // // }
|
|
|
- // else {
|
|
|
- // xList.push(list[i].departmentName);
|
|
|
- // yList.push({
|
|
|
- // "value": list[i].costMoney.toFixed(2),
|
|
|
- // "id": list[i].departmentId,
|
|
|
- // "cost": list[i].costTime
|
|
|
- // });
|
|
|
- // }
|
|
|
- // }
|
|
|
-
|
|
|
- var myChart = echarts.init(document.getElementById("container"));
|
|
|
- myChart.resize({
|
|
|
- width: this.widthHtval
|
|
|
- })
|
|
|
- _this.myChart = myChart;
|
|
|
- // console.log(totalMoneyCost.toFixed(2), '看看', totalMoneyCost)
|
|
|
- // var chengbentongji = totalMoneyCost.toFixed(2) || totalMoneyCost
|
|
|
- if(totalMoneyCost) {
|
|
|
- this.zhishin = totalMoneyCost.toFixed(2)
|
|
|
- }
|
|
|
- if(this.radio == '项目' || this.radio == '人员' || this.radio=='部门') {
|
|
|
- var option = {
|
|
|
- title: {
|
|
|
- text: '工时成本总计' + this.zhishin + '元',
|
|
|
- left:'left',
|
|
|
- },
|
|
|
- // 工具箱
|
|
|
- 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 res = params[0].name + "<br/>工作成本"+" : " + params[0].data.value
|
|
|
- + "元 <br/>工作时长"+" : " + params[0].data.cost + "小时";
|
|
|
- _this.params = params;
|
|
|
- return res;
|
|
|
- }
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- data: xList,
|
|
|
- axisLabel: {
|
|
|
- interval:0,rotate:20
|
|
|
- }
|
|
|
- },
|
|
|
- yAxis: [{
|
|
|
- type : 'value',
|
|
|
- axisLabel: {
|
|
|
- formatter:'{value} (元)'
|
|
|
- }
|
|
|
- }],
|
|
|
- series: [{
|
|
|
- name: '工作成本（元）',
|
|
|
- type: 'bar',
|
|
|
- barMaxWidth: 30,
|
|
|
- data: yList,
|
|
|
- }]
|
|
|
- };
|
|
|
- } else {
|
|
|
- var option = {
|
|
|
- title: {
|
|
|
- text: '',
|
|
|
- left:'left',
|
|
|
- },
|
|
|
- // 工具箱
|
|
|
- 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 res = params[0].name + "<br/>工作成本"+" : " + params[0].data.value
|
|
|
- + "元 <br/>工作时长"+" : " + params[0].data.cost + "小时";
|
|
|
- _this.params = params;
|
|
|
- return res;
|
|
|
- }
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- data: xList,
|
|
|
- axisLabel: {
|
|
|
- interval:0,rotate:20
|
|
|
- }
|
|
|
- },
|
|
|
- yAxis: [{
|
|
|
- type : 'value',
|
|
|
- axisLabel: {
|
|
|
- formatter:'{value} (元)'
|
|
|
- }
|
|
|
- }],
|
|
|
- series: [{
|
|
|
- name: '工作成本（元）',
|
|
|
- type: 'bar',
|
|
|
- barMaxWidth: 30,
|
|
|
- data: yList,
|
|
|
- }]
|
|
|
- };
|
|
|
- }
|
|
|
- // var option = {
|
|
|
- // title: {
|
|
|
- // text: '工时成本总计' + totalMoneyCost.toFixed(2) + '元',
|
|
|
- // left:'left',
|
|
|
- // },
|
|
|
- // // 工具箱
|
|
|
- // 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 res = params[0].name + "<br/>工作成本"+" : " + params[0].data.value
|
|
|
- // + "元 <br/>工作时长"+" : " + params[0].data.cost + "小时";
|
|
|
- // _this.params = params;
|
|
|
- // return res;
|
|
|
- // }
|
|
|
- // },
|
|
|
- // xAxis: {
|
|
|
- // data: xList,
|
|
|
- // axisLabel: {
|
|
|
- // interval:0,rotate:20
|
|
|
- // }
|
|
|
- // },
|
|
|
- // yAxis: [{
|
|
|
- // type : 'value',
|
|
|
- // axisLabel: {
|
|
|
- // formatter:'{value} (元)'
|
|
|
- // }
|
|
|
- // }],
|
|
|
- // series: [{
|
|
|
- // name: '工作成本（元）',
|
|
|
- // type: 'bar',
|
|
|
- // barMaxWidth: 30,
|
|
|
- // data: yList,
|
|
|
- // }]
|
|
|
- // };
|
|
|
- myChart.setOption(option,{notMerge: true});
|
|
|
- myChart.getZr().on('click', params => {
|
|
|
- const pointInPixel = [params.offsetX, params.offsetY];
|
|
|
- if (myChart.containPixel('grid', pointInPixel)) {
|
|
|
- console.log(_this.params)
|
|
|
- if(_this.radio=='项目') {
|
|
|
- if (_this.dateRange != null) {
|
|
|
- if (this.user.timeType.fixMonthcost == 0) {
|
|
|
- _this.$router.push("/cost/" + _this.params[0].data.id + "/" + _this.params[0].name
|
|
|
- +"?startDate="+_this.dateRange[0]+"&endDate="+_this.dateRange[1]);
|
|
|
- } else {
|
|
|
- _this.$router.push("/cost/" + _this.params[0].data.id + "/" + _this.params[0].name
|
|
|
- +"?startDate="+_this.dateRange+"&endDate="+_this.dateRange);
|
|
|
- }
|
|
|
- } else {
|
|
|
- _this.$router.push("/cost/" + _this.params[0].data.id + "/" + _this.params[0].name);
|
|
|
- }
|
|
|
- } else if (_this.radio=='部门') {
|
|
|
- if (_this.dateRange != null) {
|
|
|
- _this.$router.push("/costDep/" + _this.params[0].data.id + "/" + _this.params[0].name
|
|
|
- +"?startDate="+_this.dateRange[0]+"&endDate="+_this.dateRange[1]);
|
|
|
- } else {
|
|
|
- _this.$router.push("/costDep/" + _this.params[0].data.id + "/" + _this.params[0].name);
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- } else {
|
|
|
- this.$message({
|
|
|
- message: res.msg,
|
|
|
- type: "error"
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- error => {
|
|
|
- this.$message({
|
|
|
- message: error,
|
|
|
- type: "error"
|
|
|
- });
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.containerHeight = window.innerHeight - 140
|
|
|
- const that = this;
|
|
|
- window.onresize = function temp() {
|
|
|
- this.containerHeight = window.innerHeight - 100
|
|
|
- };
|
|
|
- if (this.user.timeType.fixMonthcost == 0) {
|
|
|
- if (this.$route.query.startDate != null) {
|
|
|
- this.dateRange = [this.$route.query.startDate, this.$route.query.endDate];
|
|
|
- } else {
|
|
|
- //默认查看本月
|
|
|
- var now = new Date();
|
|
|
- var t = util.formatDate.format(now, 'yyyy-MM-dd');
|
|
|
- var startStr = util.formatDate.format(new Date(), 'yyyy-MM') + "-01";
|
|
|
- this.dateRange = [startStr,t];
|
|
|
- }
|
|
|
- this.exportParam.dateRange = this.dateRange;
|
|
|
- } else if (this.user.timeType.fixMonthcost == 1) {
|
|
|
- if (this.$route.query.startDate != null) {
|
|
|
- this.dateRange = this.$route.query.startDate;
|
|
|
- } else {
|
|
|
- //默认查看本月
|
|
|
- var startStr = util.formatDate.format(new Date(), 'yyyy-MM');
|
|
|
- this.dateRange = startStr;
|
|
|
- }
|
|
|
- this.exportParam.dateRange = this.dateRange;
|
|
|
- }
|
|
|
- this.radio = '项目'
|
|
|
- this.getEchart();
|
|
|
- var _this = this;
|
|
|
- window.addEventListener("resize", function() {
|
|
|
- _this.myChart.resize();
|
|
|
- });
|
|
|
-
|
|
|
- this.getMyProjectList();
|
|
|
- this.getUsers()
|
|
|
- this.jutishez()
|
|
|
- },
|
|
|
- };
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
- #container {
|
|
|
- // display: inline-block;
|
|
|
- display: block;
|
|
|
- position: absolute;
|
|
|
- // width: 100% !important;
|
|
|
- margin-top: 60px;
|
|
|
- }
|
|
|
-</style>
|
|
|
-
|
|
|
-<style lang="scss">
|
|
|
-</style>
|
Lijy