调整报表人员横向滑动

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

@@ -8,7 +8,7 @@
             <el-radio-button label="1">显示工时</el-radio-button>
             </el-radio-group></div>
         </el-col>
-        <el-col :span="12" style="">
+        <el-col :span="14" style="">
             <el-date-picker v-show="user.timeType.fixMonthcost==0"
             v-model="dateRange" :editable="false" 
             format="yyyy-MM-dd" value-format="yyyy-MM-dd" 
@@ -35,13 +35,19 @@
                 <el-radio-button :label="namess" v-if="jichu.customDegreeActive == 1"></el-radio-button>
             </el-radio-group>
         </el-col>
-        <el-col :span="6">
+        <el-col :span="4">
             <el-button @click="showExportDialog">报表导出</el-button>
         </el-col>
         </el-row>
-        <div :style="'width:'+widthHtval+'px;position: relative; height:'+containerHeight+'px;'">
+        <!-- <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="container" :style="'height:'+containerHeight+'px;width:100%'"></div>
         </div>
+        <!-- <div>
+             <div id="container" :style="'height:'+containerHeight+'px;width:100%'"></div>
+        </div> -->
         <div style="position:fixed;top:170px;left:600px;" v-show="radio=='部门' && parentDeptId != null">
             <el-button @click="backToParentDept">返回上级</el-button>
         </div>
@@ -280,6 +286,24 @@
                     var _this = this;
                     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.hasReportUserList = res.data.userList;
                         var xList = [] , yList = [] , list = res.data.list, array = [] , series = [];
@@ -343,6 +367,11 @@
                             
                             var myChart = echarts.init(document.getElementById("container"));
                             totalHours = totalHours.toFixed(1);
+                            // 设置宽度
+                            myChart.resize({
+                                width: this.widthHtval
+                            })
+                            // 设置宽度
                             _this.myChart = myChart;
                             var option = {
                                 //总成本
@@ -350,7 +379,6 @@
                                     text: '工时成本总计' + totalMoneyCost.toFixed(2) + '元, 时长'+totalHours+'小时',
                                     left:'left',
                                 },
-                                
                                 // 工具箱
                                 legend: {
                                     x: 80,
@@ -361,7 +389,8 @@
                                 },
                                 grid : {
                                     top : 80,    //距离容器上边界40像素
-                                    bottom: 35   //距离容器下边界30像素
+                                    // bottom: 100,   //距离容器下边界30像素
+                                    bottom: 35,   //距离容器下边界30像素
                                 },
                                 toolbox: {
                                     show: true,
@@ -683,15 +712,37 @@
                         type: "error"
                     });
                 });
-            }
+            },
+            // 左右滚动
+            scrollFunction () {
+                this.domObj = document.getElementById('clearfix') // 通过id获取要设置的div
+                if (this.domObj.attachEvent) { // IE
+                this.domObj.attachEvent('onmousewheel', this.mouseScroll)
+                } else if (this.domObj.addEventListener) {
+                this.domObj.addEventListener('DOMMouseScroll', this.mouseScroll, false)
+                }
+                this.domObj.onmousewheel = this.domObj.onmousewheel = this.mouseScroll
+            },
+
+            mouseScroll(event) { // google 浏览器下
+                let detail = event.wheelDelta || event.detail
+                let moveForwardStep = -1
+                let moveBackStep = 1
+                let step = 0
+                step = detail > 0 ? moveForwardStep * 100 : moveBackStep * 100
+                event.preventDefault() // 阻止浏览器默认事件
+                this.domObj.scrollLeft = this.domObj.scrollLeft + step
+            },
         },
         created() {
         },
         mounted() {
             this.containerHeight = window.innerHeight - 200
+            // this.containerHeight = window.innerHeight - 130
             const that = this;
             window.onresize = function temp() {
-                this.containerHeight = window.innerHeight - 200
+                this.containerHeight = window.innerHeight - 130
+                // this.containerHeight = window.innerHeight - 200
             };
             if (this.user.timeType.fixMonthcost == 0) {
                 if (this.$route.query.startDate != null) {
@@ -724,6 +775,7 @@
             this.getMyProjectList();
             this.getUsers()
             this.jutishez()
+            this.scrollFunction()
         },
     };
 </script>