From f7fee5bde65b069a1ae24bbe973acb825adc5b80 Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期五, 09 九月 2022 09:30:34 +0800
Subject: [PATCH] 1.工单表格高度调整
---
src/views/scgl/gd.vue | 4
src/components/v-gantt-chart/lib/gantt.vue | 474 +++++++++++++++++++++++++++++++---------------------------
2 files changed, 257 insertions(+), 221 deletions(-)
diff --git a/src/components/v-gantt-chart/lib/gantt.vue b/src/components/v-gantt-chart/lib/gantt.vue
index 7334293..17a5425 100644
--- a/src/components/v-gantt-chart/lib/gantt.vue
+++ b/src/components/v-gantt-chart/lib/gantt.vue
@@ -1,38 +1,55 @@
<template>
- <div class="gantt-chart"
- @wheel="wheelHandle">
- <div class="gantt-container"
- :style="{height:`calc(100% - ${scrollXBarHeight}px)`,width:`calc(100% - ${scrollYBarWidth}px)`}">
- <!-- <div class="gantt-container"> -->
- <div v-show="!hideHeader"
- class="gantt-header"
- :style="{width:`calc(100% + ${scrollYBarWidth}px)`}">
- <div class="gantt-header-title"
- :style="{'line-height':titleHeight+'px',height:titleHeight+'px','width':titleWidth+'px'}">
+ <div
+ class="gantt-chart"
+ @wheel="wheelHandle"
+ >
+ <div
+ class="gantt-container"
+ :style="{height:`calc(100% - ${scrollXBarHeight}px)`,width:`calc(100% - ${scrollYBarWidth}px)`}"
+ >
+ <!-- <div class="gantt-container"> -->
+ <div
+ v-show="!hideHeader"
+ class="gantt-header"
+ :style="{width:`calc(100% + ${scrollYBarWidth}px)`}"
+ >
+ <div
+ class="gantt-header-title"
+ :style="{'line-height':titleHeight+'px',height:titleHeight+'px','width':titleWidth+'px'}"
+ >
<slot name="title">welcome v-gantt-chart</slot>
</div>
- <div ref="headerTimeline"
- class="gantt-header-timeline">
- <div class="gantt-timeline-wrapper"
- :style="{width:(totalWidth+scrollYBarWidth)+'px'}">
- <timeline :start="start"
- :end="end"
- :cellWidth="cellWidth"
- :titleHeight="titleHeight"
- :scale="scale">
- </timeline>
+ <div
+ ref="headerTimeline"
+ class="gantt-header-timeline"
+ >
+ <div
+ class="gantt-timeline-wrapper"
+ :style="{width:(totalWidth+scrollYBarWidth)+'px'}"
+ >
+ <timeline
+ :start="start"
+ :end="end"
+ :cell-width="cellWidth"
+ :title-height="titleHeight"
+ :scale="scale"
+ />
</div>
</div>
</div>
- <div class="gantt-body"
- :style="{height:`calc(100% - ${actualHeaderHeight}px)`}">
- <!-- <div class="gantt-body" style="height:500px"> -->
+ <div
+ class="gantt-body"
+ :style="{height:`calc(100% - ${actualHeaderHeight}px)`}"
+ >
+ <!-- <div class="gantt-body" style="height:500px"> -->
<div class="gantt-table">
- <div ref="marklineArea"
- :style="{marginLeft:(titleWidth+50)+'px'}"
- class="gantt-markline-area">
+ <div
+ ref="marklineArea"
+ :style="{marginLeft:(titleWidth+50)+'px'}"
+ class="gantt-markline-area"
+ >
<!-- <CurrentTime v-if="showCurrentTime"
:getPositonOffset="getPositonOffset" /> -->
<!-- <mark-line v-for="(times,index) in timeLines"
@@ -41,109 +58,125 @@
:getPositonOffset="getPositonOffset"
:color="times.color"></mark-line> -->
</div>
- <div ref="leftbarWrapper"
- class="gantt-leftbar-wrapper"
- :style="{'width':(titleWidth)+'px',height:`calc(100% + ${scrollXBarHeight}px)`}">
- <LeftBar :datas="datas"
- :dataKey="dataKey"
- :scrollTop="scrollTop"
- :heightOfRenderAera="heightOfRenderAera"
- :widthOfRenderAera="widthOfRenderAera"
- :cellHeight="cellHeight"
- :style="{height:(totalHeight+scrollXBarHeight)+'px'}">
+ <div
+ ref="leftbarWrapper"
+ class="gantt-leftbar-wrapper"
+ :style="{'width':(titleWidth)+'px',height:`calc(100% + ${scrollXBarHeight}px)`}"
+ >
+ <LeftBar
+ :datas="datas"
+ :data-key="dataKey"
+ :scroll-top="scrollTop"
+ :height-of-render-aera="heightOfRenderAera"
+ :width-of-render-aera="widthOfRenderAera"
+ :cell-height="cellHeight"
+ :style="{height:(totalHeight+scrollXBarHeight)+'px'}"
+ >
<template slot-scope="{data}">
- <slot name="left"
- :data="data">
- </slot>
+ <slot
+ name="left"
+ :data="data"
+ />
</template>
</LeftBar>
</div>
- <div ref="blocksWrapper"
- class="gantt-blocks-wrapper">
- <blocks :scrollTop="scrollTop"
- :scrollLeft="scrollLeft"
- :heightOfRenderAera="heightOfRenderAera"
- :widthOfRenderAera="widthOfRenderAera"
- :arrayKeys="arrayKeys"
- :itemKey="itemKey"
- :dataKey="dataKey"
- :datas="datas"
- :cellWidth="cellWidth"
- :cellHeight="cellHeight"
- :scale="scale"
- :getPositonOffset="getPositonOffset"
- :getWidthAbout2Times="getWidthAbout2Times"
- :customGenerateBlocks="customGenerateBlocks"
- :startTimeOfRenderArea="startTimeOfRenderArea"
- :endTimeOfRenderArea="endTimeOfRenderArea"
- :style="{width:totalWidth+'px'}">
-
- <!-- <template slot-scope="{data,item}">
+ <div
+ ref="blocksWrapper"
+ class="gantt-blocks-wrapper"
+ >
+ <blocks
+ :scroll-top="scrollTop"
+ :scroll-left="scrollLeft"
+ :height-of-render-aera="heightOfRenderAera"
+ :width-of-render-aera="widthOfRenderAera"
+ :array-keys="arrayKeys"
+ :item-key="itemKey"
+ :data-key="dataKey"
+ :datas="datas"
+ :cell-width="cellWidth"
+ :cell-height="cellHeight"
+ :scale="scale"
+ :get-positon-offset="getPositonOffset"
+ :get-width-about2times="getWidthAbout2Times"
+ :custom-generate-blocks="customGenerateBlocks"
+ :start-time-of-render-area="startTimeOfRenderArea"
+ :end-time-of-render-area="endTimeOfRenderArea"
+ :style="{width:totalWidth+'px'}"
+ >
+
+ <!-- <template slot-scope="{data,item}">
<slot name="block"
:data="data"
:item="item">
</slot>
</template> -->
- <template
- slot-scope="{data,item,getPositonOffset,getWidthAbout2Times,isInRenderingTimeRange}">
- <slot name="block"
- :data="data"
- :item="item"
- :getPositonOffset="getPositonOffset"
- :getWidthAbout2Times="getWidthAbout2Times"
- :isInRenderingTimeRange="isInRenderingTimeRange"
- :startTimeOfRenderArea="startTimeOfRenderArea"
- :endTimeOfRenderArea="endTimeOfRenderArea"></slot>
+ <template
+ slot-scope="{data,item,getPositonOffset,getWidthAbout2Times,isInRenderingTimeRange}"
+ >
+ <slot
+ name="block"
+ :data="data"
+ :item="item"
+ :getPositonOffset="getPositonOffset"
+ :getWidthAbout2Times="getWidthAbout2Times"
+ :isInRenderingTimeRange="isInRenderingTimeRange"
+ :startTimeOfRenderArea="startTimeOfRenderArea"
+ :endTimeOfRenderArea="endTimeOfRenderArea"
+ />
</template>
-
+
</blocks>
</div>
</div>
</div>
</div>
- <div ref="scrollYBar"
- class="gantt-scroll-y"
- :style="{width:`${scrollYBarWidth}px`,
- height:`calc(100% - ${actualHeaderHeight}px`,marginTop:`${actualHeaderHeight}px`}"
- @scroll="syncScrollY">
- <div :style="{height:totalHeight+'px'}"></div>
+ <div
+ ref="scrollYBar"
+ class="gantt-scroll-y"
+ :style="{width:`${scrollYBarWidth}px`,
+ height:`calc(100% - ${actualHeaderHeight}px`,marginTop:`${actualHeaderHeight}px`}"
+ @scroll="syncScrollY"
+ >
+ <div :style="{height:totalHeight+'px'}" />
</div>
- <div ref="scrollXBar"
- class="gantt-scroll-x"
- :style="{height:`${scrollXBarHeight}px`,
- width:`calc(100% - ${titleWidth}px )`,marginLeft:titleWidth+'px'}"
- @scroll="syncScrollX">
- <div :style="{width:totalWidth+'px'}"></div>
+ <div
+ ref="scrollXBar"
+ class="gantt-scroll-x"
+ :style="{height:`${scrollXBarHeight}px`,
+ width:`calc(100% - ${titleWidth}px )`,marginLeft:titleWidth+'px'}"
+ @scroll="syncScrollX"
+ >
+ <div :style="{width:totalWidth+'px'}" />
</div>
</div>
</template>
<script>
-import dayjs from "dayjs";
-import ResizeObserver from "resize-observer-polyfill";
+import dayjs from 'dayjs'
+import ResizeObserver from 'resize-observer-polyfill'
import {
scaleList,
getBeginTimeOfTimeLine,
calcScalesAbout2Times
-} from "./utils/timeLineUtils.js";
-import { isDef, warn } from "./utils/tool.js";
+} from './utils/timeLineUtils.js'
+import { isDef, warn } from './utils/tool.js'
import {
getPositonOffset as _getPositonOffset,
getWidthAbout2Times as _getWidthAbout2Times
-} from "./utils/gtUtils.js";
-import throttle from "./utils/throttle.js";
-import Timeline from "./components/time-line/index.vue";
-import CurrentTime from "./components/mark-line/current-time.vue";
-import LeftBar from "./components/left-bar/index.vue";
-import Blocks from "./components/blocks/index.vue";
-import MarkLine from "./components/mark-line/index.vue";
+} from './utils/gtUtils.js'
+import throttle from './utils/throttle.js'
+import Timeline from './components/time-line/index.vue'
+import CurrentTime from './components/mark-line/current-time.vue'
+import LeftBar from './components/left-bar/index.vue'
+import Blocks from './components/blocks/index.vue'
+import MarkLine from './components/mark-line/index.vue'
export default {
- name: "Gantt",
+ name: 'Gantt',
components: { Timeline, LeftBar, Blocks, MarkLine, CurrentTime },
@@ -151,17 +184,17 @@
startTime: {
default: () => dayjs(),
validator(date) {
- let ok = dayjs(date).isValid();
- if (!ok) warn(`闈炴硶鐨勫紑濮嬫椂闂� ${date}`);
- return ok;
+ const ok = dayjs(date).isValid()
+ if (!ok) warn(`闈炴硶鐨勫紑濮嬫椂闂� ${date}`)
+ return ok
}
},
endTime: {
default: () => dayjs(),
validator(date) {
- let ok = dayjs(date).isValid();
- if (!ok) warn(`闈炴硶鐨勭粨鏉熸椂闂� ${date}`);
- return ok;
+ const ok = dayjs(date).isValid()
+ if (!ok) warn(`闈炴硶鐨勭粨鏉熸椂闂� ${date}`)
+ return ok
}
},
cellWidth: {
@@ -184,7 +217,7 @@
type: Number,
default: 60,
validator(value) {
- return scaleList.includes(value);
+ return scaleList.includes(value)
}
},
datas: {
@@ -212,18 +245,18 @@
},
scrollToTime: {
validator(date) {
- return dayjs(date).isValid();
+ return dayjs(date).isValid()
}
},
scrollToPostion: {
validator(obj) {
- let validX = isDef(obj.x) ? !Number.isNaN(obj.x) : true;
- let validY = isDef(obj.y) ? !Number.isNaN(obj.y) : true;
+ const validX = isDef(obj.x) ? !Number.isNaN(obj.x) : true
+ const validY = isDef(obj.y) ? !Number.isNaN(obj.y) : true
if (!validX && !validY) {
- warn("scrollToPostion x鎴杫 鏈夊�间负闈濶umber绫诲瀷");
- return false;
+ warn('scrollToPostion x鎴杫 鏈夊�间负闈濶umber绫诲瀷')
+ return false
}
- return true;
+ return true
}
},
hideHeader: {
@@ -246,7 +279,7 @@
data() {
return {
- //缂撳瓨鑺傜偣
+ // 缂撳瓨鑺傜偣
selector: {
gantt_leftbar: {},
gantt_table: {},
@@ -257,91 +290,91 @@
},
scrollTop: 0,
scrollLeft: 0,
- //block 鍖哄煙闇�瑕佹覆鏌撶殑鑼冨洿
- //鍏堟覆鏌撳嚭绌烘鏋讹紝鍦╩ounted鍚庡啀寰楀埌鐪熷疄鐨勬覆鏌撹寖鍥达紝鐒跺悗鍦ㄦ牴鎹寖鍥存覆鏌撴暟鎹紝姣斾箣鍓嶈缃竴涓粯璁ら珮搴﹀搴︼紝棰濆鐨勬覆鏌撴氮璐规洿灏戜簡
+ // block 鍖哄煙闇�瑕佹覆鏌撶殑鑼冨洿
+ // 鍏堟覆鏌撳嚭绌烘鏋讹紝鍦╩ounted鍚庡啀寰楀埌鐪熷疄鐨勬覆鏌撹寖鍥达紝鐒跺悗鍦ㄦ牴鎹寖鍥存覆鏌撴暟鎹紝姣斾箣鍓嶈缃竴涓粯璁ら珮搴﹀搴︼紝棰濆鐨勬覆鏌撴氮璐规洿灏戜簡
heightOfRenderAera: 0,
widthOfRenderAera: 0,
startTimeOfRenderArea: null,
endTimeOfRenderArea: null,
scrollBarWitdh: 17
- };
+ }
},
computed: {
start() {
- return dayjs(this.startTime);
+ return dayjs(this.startTime)
},
end() {
- let { start, widthOfRenderAera, scale, cellWidth } = this;
- let end = dayjs(this.endTime);
- let totalWidth = calcScalesAbout2Times(start, end, scale) * cellWidth;
+ const { start, widthOfRenderAera, scale, cellWidth } = this
+ let end = dayjs(this.endTime)
+ const totalWidth = calcScalesAbout2Times(start, end, scale) * cellWidth
if (start.isAfter(end) || totalWidth <= widthOfRenderAera) {
- end = start.add((widthOfRenderAera / cellWidth) * scale, "minute");
+ end = start.add((widthOfRenderAera / cellWidth) * scale, 'minute')
}
- return end;
+ return end
},
totalWidth() {
- let { cellWidth, totalScales } = this;
- return cellWidth * totalScales;
+ const { cellWidth, totalScales } = this
+ return cellWidth * totalScales
},
totalScales() {
- let { start, end, scale } = this;
- return calcScalesAbout2Times(start, end, scale);
+ const { start, end, scale } = this
+ return calcScalesAbout2Times(start, end, scale)
},
totalHeight() {
- let { datas, cellHeight } = this;
- return datas.length * cellHeight;
+ const { datas, cellHeight } = this
+ return datas.length * cellHeight
},
beginTimeOfTimeLine() {
- let value = getBeginTimeOfTimeLine(this.start, this.scale);
- return value;
+ const value = getBeginTimeOfTimeLine(this.start, this.scale)
+ return value
},
beginTimeOfTimeLineToString() {
- return this.beginTimeOfTimeLine.toString();
+ return this.beginTimeOfTimeLine.toString()
},
avialableScrollLeft() {
// 涓嶅噺杩欎釜1锛屾粴鍔ㄥ埌鏃堕棿杞村敖澶村悗缁х画婊氬姩浼氭參鎱㈢殑婧㈠嚭
- let { totalWidth, widthOfRenderAera } = this;
- return totalWidth - widthOfRenderAera - 1;
+ const { totalWidth, widthOfRenderAera } = this
+ return totalWidth - widthOfRenderAera - 1
},
avialableScrollTop() {
- let { totalHeight, heightOfRenderAera } = this;
- return totalHeight - heightOfRenderAera - 1;
+ const { totalHeight, heightOfRenderAera } = this
+ return totalHeight - heightOfRenderAera - 1
},
scrollXBarHeight() {
- return this.hideXScrollBar ? 0 : this.scrollBarWitdh;
+ return this.hideXScrollBar ? 0 : this.scrollBarWitdh
},
scrollYBarWidth() {
- return this.hideYScrollBar ? 0 : this.scrollBarWitdh;
+ return this.hideYScrollBar ? 0 : this.scrollBarWitdh
},
actualHeaderHeight() {
- return this.hideHeader ? 0 : this.titleHeight;
+ return this.hideHeader ? 0 : this.titleHeight
}
},
watch: {
scrollLeft() {
- this.getTimeRange();
+ this.getTimeRange()
},
widthOfRenderAera() {
- this.getTimeRange();
+ this.getTimeRange()
},
cellWidth() {
- this.getTimeRange();
+ this.getTimeRange()
},
scrollToTime: {
handler(newV) {
if (!newV) {
- return;
+ return
}
- let { start, end } = this;
- let time = dayjs(newV);
+ const { start, end } = this
+ const time = dayjs(newV)
if (!(time.isAfter(start) && time.isBefore(end))) {
- warn(`褰撳墠婊氬姩鑷�${newV}涓嶅湪${start}鍜�${end}鐨勮寖鍥翠箣鍐卄);
- return;
+ warn(`褰撳墠婊氬姩鑷�${newV}涓嶅湪${start}鍜�${end}鐨勮寖鍥翠箣鍐卄)
+ return
}
- let offset = this.getPositonOffset(newV);
+ const offset = this.getPositonOffset(newV)
// immediate 浼氶�犳垚dom 杩樻病鏈夋寕杞芥椂灏辫繘琛屾搷浣滐紝鏁呴渶瑕佸欢杩熸墽琛�
this.$nextTick(() =>
this.syncScrollX(
@@ -352,42 +385,42 @@
},
true
)
- );
+ )
},
immediate: true
},
scrollToPostion: {
handler(newV) {
if (!newV) {
- return;
+ return
}
- let x = Number.isNaN(newV.x) ? undefined : newV.x;
- let y = Number.isNaN(newV.y) ? undefined : newV.y;
+ const x = Number.isNaN(newV.x) ? undefined : newV.x
+ const y = Number.isNaN(newV.y) ? undefined : newV.y
this.$nextTick(() => {
if (isDef(x) && x !== this.scrollLeft) {
- this.syncScrollX({ target: { scrollLeft: x } }, true);
+ this.syncScrollX({ target: { scrollLeft: x }}, true)
}
if (isDef(y) && y !== this.scrollTop) {
- this.syncScrollY({ target: { scrollTop: y } }, true);
+ this.syncScrollY({ target: { scrollTop: y }}, true)
}
- });
+ })
},
immediate: true
}
},
mounted() {
- this.getSelector();
+ this.getSelector()
// 璁＄畻鍑嗙‘鐨勬覆鏌撳尯鍩熻寖鍥�
const observeContainer = throttle(entries => {
entries.forEach(entry => {
- const cr = entry.contentRect;
- this.heightOfRenderAera = cr.height;
- this.widthOfRenderAera = cr.width;
- });
- });
- const observer = new ResizeObserver(observeContainer);
- observer.observe(this.$refs.blocksWrapper);
+ const cr = entry.contentRect
+ this.heightOfRenderAera = cr.height
+ this.widthOfRenderAera = cr.width
+ })
+ })
+ const observer = new ResizeObserver(observeContainer)
+ observer.observe(this.$refs.blocksWrapper)
},
methods: {
@@ -397,62 +430,62 @@
*/
getTimeRange() {
if (this.heightOfRenderAera === 0) {
- return;
+ return
}
- let {
+ const {
beginTimeOfTimeLine,
scrollLeft,
cellWidth,
scale,
widthOfRenderAera
- } = this;
+ } = this
this.startTimeOfRenderArea = beginTimeOfTimeLine
- .add((scrollLeft / cellWidth) * scale, "minute")
+ .add((scrollLeft / cellWidth) * scale, 'minute')
.toDate()
- .getTime();
+ .getTime()
this.endTimeOfRenderArea = beginTimeOfTimeLine
- .add(((scrollLeft + widthOfRenderAera) / cellWidth) * scale, "minute")
+ .add(((scrollLeft + widthOfRenderAera) / cellWidth) * scale, 'minute')
.toDate()
- .getTime();
+ .getTime()
},
getWidthAbout2Times(start, end) {
- let options = {
+ const options = {
scale: this.scale,
cellWidth: this.cellWidth
- };
- return _getWidthAbout2Times(start, end, options);
+ }
+ return _getWidthAbout2Times(start, end, options)
},
/**
* 涓烘椂闂寸嚎璁＄畻鍋忕Щ
*/
getPositonOffset(date) {
- let options = {
+ const options = {
scale: this.scale,
cellWidth: this.cellWidth
- };
+ }
- return _getPositonOffset(date, this.beginTimeOfTimeLineToString, options);
+ return _getPositonOffset(date, this.beginTimeOfTimeLineToString, options)
},
- //缂撳瓨鑺傜偣
+ // 缂撳瓨鑺傜偣
getSelector() {
- this.selector.gantt_leftbar = this.$refs.leftbarWrapper;
- this.selector.gantt_table = this.$refs.blocksWrapper;
- this.selector.gantt_scroll_y = this.$refs.scrollYBar;
- this.selector.gantt_timeline = this.$refs.headerTimeline;
- this.selector.gantt_scroll_x = this.$refs.scrollXBar;
- this.selector.gantt_markArea = this.$refs.marklineArea;
+ this.selector.gantt_leftbar = this.$refs.leftbarWrapper
+ this.selector.gantt_table = this.$refs.blocksWrapper
+ this.selector.gantt_scroll_y = this.$refs.scrollYBar
+ this.selector.gantt_timeline = this.$refs.headerTimeline
+ this.selector.gantt_scroll_x = this.$refs.scrollXBar
+ this.selector.gantt_markArea = this.$refs.marklineArea
},
wheelHandle(event) {
- let { deltaX, deltaY } = event;
+ const { deltaX, deltaY } = event
this.$nextTick(() => {
- let {
+ const {
scrollTop,
scrollLeft,
avialableScrollLeft,
avialableScrollTop
- } = this;
+ } = this
if (deltaY !== 0) {
if (
@@ -460,19 +493,19 @@
scrollTop !== avialableScrollTop
) {
this.syncScrollY(
- { target: { scrollTop: avialableScrollTop } },
+ { target: { scrollTop: avialableScrollTop }},
true
- );
+ )
} else if (
scrollTop + deltaY < 0 &&
- scrollTop !== 0 /*婊氬姩涓�0闄愬埗*/
+ scrollTop !== 0 /* 婊氬姩涓�0闄愬埗*/
) {
- this.syncScrollY({ target: { scrollTop: 0 } }, true);
+ this.syncScrollY({ target: { scrollTop: 0 }}, true)
} else {
this.syncScrollY(
- { target: { scrollTop: scrollTop + deltaY } },
+ { target: { scrollTop: scrollTop + deltaY }},
true
- );
+ )
}
}
if (deltaX !== 0) {
@@ -481,70 +514,73 @@
scrollLeft !== avialableScrollLeft
) {
this.syncScrollX(
- { target: { scrollLeft: avialableScrollLeft } },
+ { target: { scrollLeft: avialableScrollLeft }},
true
- );
+ )
} else if (
scrollLeft + deltaX < 0 &&
- scrollLeft !== 0 /*婊氬姩涓�0闄愬埗*/
+ scrollLeft !== 0 /* 婊氬姩涓�0闄愬埗*/
) {
- this.syncScrollX({ target: { scrollLeft: 0 } }, true);
+ this.syncScrollX({ target: { scrollLeft: 0 }}, true)
} else {
this.syncScrollX(
- { target: { scrollLeft: scrollLeft + deltaX } },
+ { target: { scrollLeft: scrollLeft + deltaX }},
true
- );
+ )
}
}
- });
+ })
},
- //鍚屾fixleft鍜宐lock鐨勬粴鍔�
+ // 鍚屾fixleft鍜宐lock鐨勬粴鍔�
syncScrollY(event, fake = false) {
- let { gantt_leftbar, gantt_table, gantt_scroll_y } = this.selector;
- let topValue = event.target.scrollTop;
+ const { gantt_leftbar, gantt_table, gantt_scroll_y } = this.selector
+ const topValue = event.target.scrollTop
if (fake) {
- //浼氳Е鍙戜竴娆＄湡鐨勬粴鍔ㄤ簨浠秂vent, 鍚庨潰鐨勪唬鐮佷細鍦ㄧ浜屼釜浜嬩欢涓墽琛�
- gantt_scroll_y.scrollTop = topValue;
- return;
+ // 浼氳Е鍙戜竴娆＄湡鐨勬粴鍔ㄤ簨浠秂vent, 鍚庨潰鐨勪唬鐮佷細鍦ㄧ浜屼釜浜嬩欢涓墽琛�
+ gantt_scroll_y.scrollTop = topValue
+ return
}
- gantt_leftbar.scrollTop = topValue;
- gantt_table.scrollTop = topValue;
- this.scrollTop = topValue;
- this.$emit("scrollTop", topValue);
+ gantt_leftbar.scrollTop = topValue
+ gantt_table.scrollTop = topValue
+ this.scrollTop = topValue
+ this.$emit('scrollTop', topValue)
},
syncScrollX(event, fake = false) {
- let {
+ const {
gantt_table,
gantt_timeline,
gantt_markArea,
gantt_scroll_x
- } = this.selector;
- let leftValue = event.target.scrollLeft;
+ } = this.selector
+ const leftValue = event.target.scrollLeft
if (fake) {
- //浼氳Е鍙戜竴娆＄湡鐨勬粴鍔ㄤ簨浠秂vent, 鍚庨潰鐨勪唬鐮佷細鍦ㄧ浜屼釜浜嬩欢涓墽琛�
- gantt_scroll_x.scrollLeft = leftValue;
- return;
+ // 浼氳Е鍙戜竴娆＄湡鐨勬粴鍔ㄤ簨浠秂vent, 鍚庨潰鐨勪唬鐮佷細鍦ㄧ浜屼釜浜嬩欢涓墽琛�
+ gantt_scroll_x.scrollLeft = leftValue
+ return
}
- gantt_table.scrollLeft = leftValue;
- gantt_timeline.scrollLeft = leftValue;
- gantt_markArea.style.left = "-" + leftValue + "px";
- this.scrollLeft = leftValue;
- this.$emit("scrollLeft", leftValue);
+ gantt_table.scrollLeft = leftValue
+ gantt_timeline.scrollLeft = leftValue
+ gantt_markArea.style.left = '-' + leftValue + 'px'
+ this.scrollLeft = leftValue
+ this.$emit('scrollLeft', leftValue)
}
}
-};
+}
</script>
<style lang="scss">
@import "./gantt.scss";
-.gantt-leftbar-wrapper{
+
+.gantt-leftbar-wrapper {
// overflow-y: scroll;
// overflow: visible;
}
-.gantt-body{
+
+.gantt-body {
// overflow-y: scroll;
}
-.gantt-leftbar{
+
+.gantt-leftbar {
// overflow-y: scroll;
}
</style>
diff --git a/src/views/scgl/gd.vue b/src/views/scgl/gd.vue
index aabe2ac..b1b5a48 100644
--- a/src/views/scgl/gd.vue
+++ b/src/views/scgl/gd.vue
@@ -349,7 +349,7 @@
<el-table
:data="tableDataDetail"
border
- height="161px"
+ height="210px"
:row-class-name="tableRowClassName"
highlight-current-row
:header-cell-style="this.$headerCellStyle"
@@ -1990,7 +1990,7 @@
this.$nextTick(() => {
this.mainHeight = window.innerHeight - 85
// this.tableHeight = this.mainHeight - 250
- this.tableHeight = this.mainHeight - 420
+ this.tableHeight = this.mainHeight - 470
if (window.innerHeight < 769) {
this.tableHeight = this.tableHeight - 20
}
--
Gitblit v1.9.3