调整财务核算报表

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

@@ -220,7 +220,11 @@
                 <el-link type="primary" :underline="false" @click="showNoProjectUsers">查看无项目数据</el-link>
             </el-form-item> -->
         </el-form>
-        <div id="container" style="height:300px"></div>
+        <!-- 图表 -->
+        <!-- <div id="container" :style="'height:300px;width:'+ widthHtval+'px;'"></div> -->
+        <div id="clearfix" :style="'overflow-x: auto;width:100%;padding-bottom: 100px; position: relative; height:300px;'">
+             <div id="container" :style="'height: 300px;width:100%;'"></div>
+        </div>
         <!--新增界面-->
         <el-dialog :title="title" v-if="addFormVisible" :visible.sync="addFormVisible" :close-on-click-modal="false" customClass="customWidth" width="600px">
             <el-form ref="form1" :model="addForm" :rules="rules" label-width="100px">
@@ -507,6 +511,7 @@ import { error } from 'dingtalk-jsapi';
                 importingData: false,
                 importResultMsg:null,
                 showImportResult:false,
+                widthHtval: document.body.clientWidth - 230,
             };
         },
         methods: {
@@ -921,6 +926,25 @@ import { error } from 'dingtalk-jsapi';
                 this.http.post('/finance/getTimeCost', {yearMonth: this.date, assignNoProUser: this.assignNoProUser},
                 res => {
                     if (res.code == "ok") {
+                        // 待会删除
+                        var lll = res.data.costList
+                        var arrLists = []
+                        for(var i = 0; i < 50; i++) {
+                            arrLists.push(lll[1])
+                        }
+                        res.data.costList = arrLists
+                        // 待会删除
+
+                        for(var i in res.data.costList) {
+                            if(i>20) {
+                                this.widthHtval = +this.widthHtval + 40
+                            } else {
+                                this.widthHtval = document.body.clientWidth - 230
+                            }
+                        }
+
+                        console.log(res.data, '图表数据', this.widthHtval)
+
                         var xList = [], yList = [], list = res.data.costList, 
                         
                         totalMoneyCost = res.data.totalMoneyCost;
@@ -943,6 +967,10 @@ import { error } from 'dingtalk-jsapi';
                         }
 
                         var myChart = echarts.init(document.getElementById("container"));
+                        // 设置图表
+                        myChart.resize({
+                            width: this.widthHtval
+                        })
                         _this.myChart = myChart;
                         var option = {
                             title: {
@@ -951,6 +979,13 @@ import { error } from 'dingtalk-jsapi';
                                     :'成本总计 ' + totalMoneyCost + '元',
                                 left:'left',
                             },
+                            grid : {
+                                top : 40,    //距离容器上边界40像素
+                                // bottom: 100,   //距离容器下边界30像素
+                                bottom: 40,   //距离容器下边界30像素
+                                left: 100,
+                                right: 100
+                            },
                             // 工具箱
                             toolbox: {
                                 show: true,
@@ -1389,6 +1424,26 @@ import { error } from 'dingtalk-jsapi';
                     });
                 }
             },
+            // 左右滚动
+            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() {
@@ -1410,6 +1465,7 @@ import { error } from 'dingtalk-jsapi';
             this.addreviewer();
             this.arrter()
             this.getMonths()
+            this.scrollFunction()
         },
         updated() {
             this.$nextTick(() => {