|
|
@@ -0,0 +1,286 @@
|
|
|
+<template>
|
|
|
+ <section>
|
|
|
+ <!--工具条-->
|
|
|
+ <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
|
|
|
+ <el-form :inline="true">
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="text" @click="backToList" icon="el-icon-back" class="back">返回</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item class="divLine"></el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <span class="workName">{{detailName}}</span>
|
|
|
+ <el-cascader v-model="departmentId" placeholder="请选择部门" style="width: 70%;margin-left:10px;" @change="getList"
|
|
|
+ :options="option" :props="{ checkStrictly: true }" :show-all-levels="false"></el-cascader>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item style="float:right;">
|
|
|
+ <span style="font-size:18px;">部门成本：<span style="color:#20a0ff;">{{cost}}元</span></span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <div id="container" :style="'height:' + tableHeight + 'px'"></div>
|
|
|
+ </section>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import util from "../../common/js/util";
|
|
|
+
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ detailId: this.$route.params.id,
|
|
|
+ detailName: this.$route.params.name,
|
|
|
+
|
|
|
+ user: JSON.parse(sessionStorage.getItem("user")),
|
|
|
+
|
|
|
+ cost: 0,
|
|
|
+
|
|
|
+ tableHeight: 0,
|
|
|
+
|
|
|
+ echart: null,
|
|
|
+
|
|
|
+ option: [],
|
|
|
+ departmentId: [].concat(parseInt(this.$route.params.id)),
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //返回
|
|
|
+ backToList() {
|
|
|
+ this.$router.go(-1);
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取部门列表
|
|
|
+ getDepartment() {
|
|
|
+ this.http.post( this.port.manage.depList, {},
|
|
|
+ res => {
|
|
|
+ if (res.code == "ok") {
|
|
|
+ var list = res.data , array = [];
|
|
|
+ for(var i in list) {
|
|
|
+ if(list[i].id == this.detailId) {
|
|
|
+ array.push(list[i])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.option = this.changeArr(array);
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ message: res.msg,
|
|
|
+ type: "error"
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ error => {
|
|
|
+ this.$message({
|
|
|
+ message: error,
|
|
|
+ type: "error"
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 修改数组
|
|
|
+ changeArr(arr) {
|
|
|
+ for (var i = 0; i < arr.length; i++) {
|
|
|
+ if(arr[i].id != -1 && arr[i].id != 0) {
|
|
|
+ if (arr[i].children != null && arr[i].children.length>0) {
|
|
|
+ arr[i].children = this.changeArr(arr[i].children);
|
|
|
+ }
|
|
|
+ arr[i].id && (arr[i].value = arr[i].id);
|
|
|
+ delete arr[i].id;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ for(var i in arr) {
|
|
|
+ if(arr[i].id == -1 || arr[i].id == 0) {
|
|
|
+ arr.splice(i,1)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return arr;
|
|
|
+ },
|
|
|
+
|
|
|
+ //获取项目列表
|
|
|
+ getList() {
|
|
|
+ this.listLoading = true;
|
|
|
+ this.http.post(this.port.project.userCost, {
|
|
|
+ departmentId: this.departmentId[this.departmentId.length-1],
|
|
|
+ },
|
|
|
+ res => {
|
|
|
+ this.listLoading = false;
|
|
|
+ var _this = this;
|
|
|
+ if (res.code == "ok") {
|
|
|
+ var xList = [] , yList = [] , list = res.data , array = [] , series = [];
|
|
|
+ this.cost = res.data.totalMoneyCost;
|
|
|
+ var num = 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].time,
|
|
|
+ "cost": project[k].money,
|
|
|
+ })
|
|
|
+ } 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 = {
|
|
|
+ // 工具箱
|
|
|
+ legend: {
|
|
|
+ x: 80,
|
|
|
+ y: 10,
|
|
|
+ data: yList
|
|
|
+ },
|
|
|
+ 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 res = params[0].name + "<br/>";
|
|
|
+ for(var i in params) {
|
|
|
+ res += "项目名称：" + params[i].seriesName
|
|
|
+ + "<br/>工作时长（h）" + params[i].data.value
|
|
|
+ + "h <br/>工作成本（元）"+" : " + params[i].data.cost + "元</br></br>";
|
|
|
+ }
|
|
|
+ return res;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ data: xList,
|
|
|
+ axisLabel: {
|
|
|
+ interval:0,rotate:20
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: [{
|
|
|
+ type : 'value',
|
|
|
+ axisLabel: {
|
|
|
+ formatter:'{value} (h)'
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ series: series,
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ message: res.msg,
|
|
|
+ type: "error"
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ error => {
|
|
|
+ this.listLoading = false;
|
|
|
+ this.$message({
|
|
|
+ message: error,
|
|
|
+ type: "error"
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ let height = window.innerHeight;
|
|
|
+ this.tableHeight = height - 145;
|
|
|
+ const that = this;
|
|
|
+ window.onresize = function temp() {
|
|
|
+ that.tableHeight = window.innerHeight - 145;
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getDepartment();
|
|
|
+ this.getList();
|
|
|
+ var _this = this;
|
|
|
+ window.addEventListener("resize", function() {
|
|
|
+ _this.myChart.resize();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .toolbar {
|
|
|
+ .el-form-item {
|
|
|
+ font-size: 14px;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ .back {
|
|
|
+ font-size: 16px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .divLine {
|
|
|
+ width: 2px;
|
|
|
+ background: #c3c3c3;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .workName {
|
|
|
+ color: #333;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ .workHours {
|
|
|
+ color: #20a0ff;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ #container {
|
|
|
+ float: left;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+</style>
|
