工时管家后台——成本统计修改

fhKeeper/formulahousekeeper/timesheet/src/routes.js

@@ -68,8 +68,8 @@ let routes = [
         iconCls: 'fa fa-briefcase',
         children: [
             { path: '/list', component: list, name: '项目列表' },
-            { path: '/list/:id/:name', component: proDetail, name: '项目详情', hidden: true },
             { path: '/cost', component: cost, name: '成本统计' },
+            { path: '/cost/:id/:name', component: proDetail, name: '项目详情', hidden: true },
         ]
     },
     //团队管理

fhKeeper/formulahousekeeper/timesheet/src/views/project/cost.vue

@@ -21,7 +21,10 @@
                         var xList = [],yList = [] , list = res.data;
                         for(var i in list) {
                             xList.push(list[i].project);
-                            yList.push(list[i].cost);
+                            yList.push({
+                                value: list[i].cost,
+                                "id": list[i].id,
+                            });
                         }
 
                         var myChart = echarts.init(document.getElementById("container"));
@@ -65,10 +68,14 @@
                             series: [{
                                 name: '工作时长（h）',
                                 type: 'bar',
+                                barMaxWidth: 30,
                                 data: yList,
                             }]
                         };
                         myChart.setOption(option);
+                        myChart.on('click', function(params) {
+                            _this.$router.push("/cost/" + params.data.id + "/" + params.name);
+                        });
                     } else {
                         this.$message({
                             message: res.msg,

fhKeeper/formulahousekeeper/timesheet/src/views/project/detail.vue

@@ -14,14 +14,14 @@
         </el-col>
 
         <!--列表-->
-        <el-table :data="list" highlight-current-row v-loading="listLoading" :height="tableHeight" style="width: 100%;">
+        <!-- <el-table :data="list" highlight-current-row v-loading="listLoading" :height="tableHeight" style="width: 100%;">
             <el-table-column type="index" width="60"></el-table-column>
             <el-table-column prop="name" label="人员名称" sortable></el-table-column>
             <el-table-column prop="cost" label="分配时长(h)" sortable></el-table-column>
-        </el-table>
+        </el-table> -->
 
         <!--工具条-->
-        <el-col :span="24" class="toolbar">
+        <!-- <el-col :span="24" class="toolbar">
             <el-pagination
                 @size-change="handleSizeChange"
                 @current-change="handleCurrentChange"
@@ -31,7 +31,9 @@
                 :total="total"
                 style="float:right;"
             ></el-pagination>
-        </el-col>
+        </el-col> -->
+
+        <div id="container" :style="'height:' + tableHeight + 'px'"></div> 
     </section>
 </template>
 
@@ -47,11 +49,8 @@
                 user: JSON.parse(sessionStorage.getItem("user")),
 
                 tableHeight: 0,
-                listLoading: false,
-                total: 0,
-                page: 1,
-                size: 20,
-                list: [],
+                
+                echart: null,
             };
         },
         methods: {
@@ -60,17 +59,6 @@
                 this.$router.go(-1);
             },
 
-            //分页
-            handleCurrentChange(val) {
-                this.page = val;
-                this.getList();
-            },
-
-            handleSizeChange(val) {
-                this.size = val;
-                this.getList();
-            },
-
             //获取项目列表
             getList() {
                 this.listLoading = true;
@@ -79,9 +67,56 @@
                 },
                 res => {
                     this.listLoading = false;
+                    var _this = this;
                     if (res.code == "ok") {
-                        this.list = res.data//.records;
-                        this.total = res.data.total;
+                        var xList = [],yList = [] , list = res.data;
+                        for(var i in list) {
+                            xList.push(list[i].name);
+                            yList.push(list[i].cost);
+                        }
+
+                        var myChart = echarts.init(document.getElementById("container"));
+                        _this.myChart = myChart;
+                        var option = {
+                            // 工具箱
+                            toolbox: {
+                                show: true,
+                                feature:{
+                                    saveAsImage:{
+                                        show:true
+                                    },
+                                    restore:{
+                                        show:true
+                                    },
+                                    dataView:{
+                                        show:true
+                                    },
+                                    dataZoom:{
+                                        show:true
+                                    },
+                                    magicType:{
+                                        type:['line','bar']
+                                    }
+                                }
+                            },
+                            tooltip:{
+                                trigger:'axis'
+                            },
+                            xAxis: {
+                                data: xList,
+                                axisLabel: {
+                                    interval:0,rotate:40
+                                }
+                            },
+                            yAxis: {},
+                            series: [{
+                                name: '工作时长（h）',
+                                type: 'bar',
+                                barMaxWidth: 30,
+                                data: yList,
+                            }]
+                        };
+                        myChart.setOption(option);
                     } else {
                         this.$message({
                         message: res.msg,
@@ -100,14 +135,18 @@
         },
         created() {
             let height = window.innerHeight;
-            this.tableHeight = height - 195;
+            this.tableHeight = height - 145;
             const that = this;
             window.onresize = function temp() {
-                that.tableHeight = window.innerHeight - 195;
+                that.tableHeight = window.innerHeight - 145;
             };
         },
         mounted() {
             this.getList();
+            var _this = this;
+            window.addEventListener("resize", function() {
+                _this.myChart.resize();
+            });
         }
     };
 </script>
@@ -136,6 +175,11 @@
             font-size: 18px;
         }
     }
+
+    #container {
+        float: left;
+        width: 100%;
+    }
 </style>
 
 <style lang="scss">

fhKeeper/formulahousekeeper/timesheet/src/views/project/list.vue

@@ -15,7 +15,7 @@
             <el-table-column prop="projectName" label="项目名称" sortable></el-table-column>
             <el-table-column label="操作" width="220">
                 <template slot-scope="scope">
-                    <el-button size="small" type="primary" @click="detail(scope.$index)">详情</el-button>
+                    <!-- <el-button size="small" type="primary" @click="detail(scope.$index)">详情</el-button> -->
                     <el-button size="small" type="primary" @click="handleAdd(scope.$index)">编辑</el-button>
                     <el-button size="small" type="danger" @click="deletePro(scope.$index)">删除</el-button>
                 </template>