From 6de7c4258f16fe101dcc9e127fbce053fbea5fd0 Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期六, 24 九月 2022 13:29:09 +0800
Subject: [PATCH] 1.研究甘特图，之前调试出来好的甘特图样式没展现出来，现在已将样式调出来
---
src/lib/v-gantt-chart/lib/utils/gtUtils.js | 0
src/lib/v-gantt-chart/lib/components/dynamic-render.js | 0
src/lib/v-gantt-chart/package.json | 0
src/lib/v-gantt-chart/test/timeblock.test.js | 0
src/lib/v-gantt-chart/lib/utils/timeLineUtils.js | 0
src/lib/v-gantt-chart/lib/gantt.scss | 0
src/lib/v-gantt-chart/lib/utils/throttle.js | 0
src/components/Test/index.vue | 30 +-
src/lib/v-gantt-chart/index.js | 0
src/lib/v-gantt-chart/lib/index.js | 0
src/lib/v-gantt-chart/lib/components/blocks/index.vue | 0
src/lib/v-gantt-chart/lib/utils/tool.js | 0
src/lib/v-gantt-chart/.gitignore | 0
src/permission.js | 2
src/lib/v-gantt-chart/lib/components/mark-line/current-time.vue | 0
src/lib/v-gantt-chart/lib/gantt.vue | 550 ++++++++++++++++++++++++++++++++++++++++++
src/lib/v-gantt-chart/.babelrc | 0
src/lib/v-gantt-chart/webpack.config.js | 0
src/lib/v-gantt-chart/README.md | 0
src/router/index.js | 16 +
src/lib/v-gantt-chart/lib/utils/debounce.js | 0
src/lib/v-gantt-chart/test/gtUtils.test.js | 66 ++--
/dev/null | 56 ----
src/lib/v-gantt-chart/lib/components/time-line/index.vue | 0
src/main.js | 2
src/lib/v-gantt-chart/lib/assets/block.png | 0
src/lib/v-gantt-chart/lib/components/left-bar/index.vue | 0
src/views/gantt_back/gantt_back.vue | 20 -
src/lib/v-gantt-chart/LICENSE | 0
src/lib/v-gantt-chart/lib/components/mark-line/index.vue | 0
30 files changed, 623 insertions(+), 119 deletions(-)
diff --git a/src/components/Test/index.vue b/src/components/Test/index.vue
index bb93374..a81e769 100644
--- a/src/components/Test/index.vue
+++ b/src/components/Test/index.vue
@@ -1,20 +1,23 @@
<template>
- <el-popover placement="bottom"
- trigger="hover">
- <div slot="reference"
- class="plan"
- :style="{'margin-top':0.1*cellHeight+'px',}"
- @click="onClick"
-
+ <el-popover
+ placement="bottom"
+ trigger="hover"
+ >
+ <div
+ slot="reference"
+ class="plan"
+ :style="{'margin-top':0.1*cellHeight+'px',}"
+ @click="onClick"
>
<!-- <div class="runTime">
<span>S:{{startToString}}</span>
<span>E:{{endToString}}</span>
</div> -->
<div
- :class="{'hw':true,'SCHEDULEING' : item.type == 'schedule','H_SCHEDULE':item.type=='h_schedule','BM_SCHEDULE':item.type=='bm_schedule'}">
- <span v-show='item.type == "schedule"'>{{ item.number }}</span>
- <span v-show='item.type == "h_schedule"'>{{ item.number }}</span>
+ :class="{'hw':true,'SCHEDULEING' : item.type == 'schedule','H_SCHEDULE':item.type=='h_schedule','BM_SCHEDULE':item.type=='bm_schedule'}"
+ >
+ <span v-show="item.type == "schedule"">{{ item.number }}</span>
+ <span v-show="item.type == "h_schedule"">{{ item.number }}</span>
</div>
<!-- <div class="passenger"></div> -->
@@ -100,9 +103,9 @@
},
computed: {
statusColor() {
- let { item, currentTime } = this
- let start = dayjs(item.start)
- let end = dayjs(item.end)
+ const { item, currentTime } = this
+ const start = dayjs(item.start)
+ const end = dayjs(item.end)
// if(item.type == 'capacity'){
// return CAPACITY
// }else if(item.type == 'h_schedule'){
@@ -143,7 +146,6 @@
background: rgba(5, 185, 100, 0.1);
text-align: center;
border-radius: 5px;
-
}
diff --git a/src/components/v-gantt-chart/lib/gantt.vue b/src/components/v-gantt-chart/lib/gantt.vue
deleted file mode 100644
index 17a5425..0000000
--- a/src/components/v-gantt-chart/lib/gantt.vue
+++ /dev/null
@@ -1,586 +0,0 @@
-<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'}"
- >
- <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"
- :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-table">
- <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"
- :key="index"
- :markLineTime="times.time"
- :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"
- :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"
- />
- </template>
- </LeftBar>
- </div>
- <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"
- />
- </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="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 {
- scaleList,
- getBeginTimeOfTimeLine,
- calcScalesAbout2Times
-} 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'
-
-export default {
- name: 'Gantt',
-
- components: { Timeline, LeftBar, Blocks, MarkLine, CurrentTime },
-
- props: {
- startTime: {
- default: () => dayjs(),
- validator(date) {
- const ok = dayjs(date).isValid()
- if (!ok) warn(`闈炴硶鐨勫紑濮嬫椂闂� ${date}`)
- return ok
- }
- },
- endTime: {
- default: () => dayjs(),
- validator(date) {
- const ok = dayjs(date).isValid()
- if (!ok) warn(`闈炴硶鐨勭粨鏉熸椂闂� ${date}`)
- return ok
- }
- },
- cellWidth: {
- type: Number,
- default: 50
- },
- cellHeight: {
- type: Number,
- default: 20
- },
- titleHeight: {
- type: Number,
- default: 40
- },
- titleWidth: {
- type: Number,
- default: 200
- },
- scale: {
- type: Number,
- default: 60,
- validator(value) {
- return scaleList.includes(value)
- }
- },
- datas: {
- type: Array,
- default: () => []
- },
- dataKey: {
- type: String,
- default: undefined
- },
- itemKey: {
- type: String,
- default: undefined
- },
- arrayKeys: {
- type: Array,
- default: () => []
- },
- showCurrentTime: {
- type: Boolean,
- default: false
- },
- timeLines: {
- type: Array
- },
- scrollToTime: {
- validator(date) {
- return dayjs(date).isValid()
- }
- },
- scrollToPostion: {
- validator(obj) {
- 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
- }
- return true
- }
- },
- hideHeader: {
- type: Boolean,
- default: false
- },
- hideXScrollBar: {
- type: Boolean,
- default: false
- },
- hideYScrollBar: {
- type: Boolean,
- default: false
- },
- customGenerateBlocks: {
- type: Boolean,
- default: false
- }
- },
-
- data() {
- return {
- // 缂撳瓨鑺傜偣
- selector: {
- gantt_leftbar: {},
- gantt_table: {},
- gantt_scroll_y: {},
- gantt_timeline: {},
- gantt_scroll_x: {},
- gantt_markArea: {}
- },
- scrollTop: 0,
- scrollLeft: 0,
- // block 鍖哄煙闇�瑕佹覆鏌撶殑鑼冨洿
- // 鍏堟覆鏌撳嚭绌烘鏋讹紝鍦╩ounted鍚庡啀寰楀埌鐪熷疄鐨勬覆鏌撹寖鍥达紝鐒跺悗鍦ㄦ牴鎹寖鍥存覆鏌撴暟鎹紝姣斾箣鍓嶈缃竴涓粯璁ら珮搴﹀搴︼紝棰濆鐨勬覆鏌撴氮璐规洿灏戜簡
- heightOfRenderAera: 0,
- widthOfRenderAera: 0,
- startTimeOfRenderArea: null,
- endTimeOfRenderArea: null,
- scrollBarWitdh: 17
- }
- },
-
- computed: {
- start() {
- return dayjs(this.startTime)
- },
- end() {
- 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')
- }
- return end
- },
- totalWidth() {
- const { cellWidth, totalScales } = this
- return cellWidth * totalScales
- },
- totalScales() {
- const { start, end, scale } = this
- return calcScalesAbout2Times(start, end, scale)
- },
- totalHeight() {
- const { datas, cellHeight } = this
- return datas.length * cellHeight
- },
- beginTimeOfTimeLine() {
- const value = getBeginTimeOfTimeLine(this.start, this.scale)
- return value
- },
- beginTimeOfTimeLineToString() {
- return this.beginTimeOfTimeLine.toString()
- },
- avialableScrollLeft() {
- // 涓嶅噺杩欎釜1锛屾粴鍔ㄥ埌鏃堕棿杞村敖澶村悗缁х画婊氬姩浼氭參鎱㈢殑婧㈠嚭
- const { totalWidth, widthOfRenderAera } = this
- return totalWidth - widthOfRenderAera - 1
- },
- avialableScrollTop() {
- const { totalHeight, heightOfRenderAera } = this
- return totalHeight - heightOfRenderAera - 1
- },
- scrollXBarHeight() {
- return this.hideXScrollBar ? 0 : this.scrollBarWitdh
- },
- scrollYBarWidth() {
- return this.hideYScrollBar ? 0 : this.scrollBarWitdh
- },
- actualHeaderHeight() {
- return this.hideHeader ? 0 : this.titleHeight
- }
- },
-
- watch: {
- scrollLeft() {
- this.getTimeRange()
- },
- widthOfRenderAera() {
- this.getTimeRange()
- },
- cellWidth() {
- this.getTimeRange()
- },
- scrollToTime: {
- handler(newV) {
- if (!newV) {
- return
- }
- const { start, end } = this
- const time = dayjs(newV)
- if (!(time.isAfter(start) && time.isBefore(end))) {
- warn(`褰撳墠婊氬姩鑷�${newV}涓嶅湪${start}鍜�${end}鐨勮寖鍥翠箣鍐卄)
- return
- }
-
- const offset = this.getPositonOffset(newV)
- // immediate 浼氶�犳垚dom 杩樻病鏈夋寕杞芥椂灏辫繘琛屾搷浣滐紝鏁呴渶瑕佸欢杩熸墽琛�
- this.$nextTick(() =>
- this.syncScrollX(
- {
- target: {
- scrollLeft: offset
- }
- },
- true
- )
- )
- },
- immediate: true
- },
- scrollToPostion: {
- handler(newV) {
- if (!newV) {
- return
- }
- 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)
- }
- if (isDef(y) && y !== this.scrollTop) {
- this.syncScrollY({ target: { scrollTop: y }}, true)
- }
- })
- },
- immediate: true
- }
- },
-
- mounted() {
- 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)
- },
-
- methods: {
- /**
- * 璁＄畻闇�瑕佹覆鏌撶殑鏃堕棿鑼冨洿
- *
- */
- getTimeRange() {
- if (this.heightOfRenderAera === 0) {
- return
- }
-
- const {
- beginTimeOfTimeLine,
- scrollLeft,
- cellWidth,
- scale,
- widthOfRenderAera
- } = this
-
- this.startTimeOfRenderArea = beginTimeOfTimeLine
- .add((scrollLeft / cellWidth) * scale, 'minute')
- .toDate()
- .getTime()
- this.endTimeOfRenderArea = beginTimeOfTimeLine
- .add(((scrollLeft + widthOfRenderAera) / cellWidth) * scale, 'minute')
- .toDate()
- .getTime()
- },
- getWidthAbout2Times(start, end) {
- const options = {
- scale: this.scale,
- cellWidth: this.cellWidth
- }
- return _getWidthAbout2Times(start, end, options)
- },
- /**
- * 涓烘椂闂寸嚎璁＄畻鍋忕Щ
- */
- getPositonOffset(date) {
- const options = {
- scale: this.scale,
- cellWidth: this.cellWidth
- }
-
- 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
- },
- wheelHandle(event) {
- const { deltaX, deltaY } = event
- this.$nextTick(() => {
- const {
- scrollTop,
- scrollLeft,
- avialableScrollLeft,
- avialableScrollTop
- } = this
-
- if (deltaY !== 0) {
- if (
- scrollTop + deltaY >= avialableScrollTop &&
- scrollTop !== avialableScrollTop
- ) {
- this.syncScrollY(
- { target: { scrollTop: avialableScrollTop }},
- true
- )
- } else if (
- scrollTop + deltaY < 0 &&
- scrollTop !== 0 /* 婊氬姩涓�0闄愬埗*/
- ) {
- this.syncScrollY({ target: { scrollTop: 0 }}, true)
- } else {
- this.syncScrollY(
- { target: { scrollTop: scrollTop + deltaY }},
- true
- )
- }
- }
- if (deltaX !== 0) {
- if (
- scrollLeft + deltaX >= avialableScrollLeft &&
- scrollLeft !== avialableScrollLeft
- ) {
- this.syncScrollX(
- { target: { scrollLeft: avialableScrollLeft }},
- true
- )
- } else if (
- scrollLeft + deltaX < 0 &&
- scrollLeft !== 0 /* 婊氬姩涓�0闄愬埗*/
- ) {
- this.syncScrollX({ target: { scrollLeft: 0 }}, true)
- } else {
- this.syncScrollX(
- { target: { scrollLeft: scrollLeft + deltaX }},
- true
- )
- }
- }
- })
- },
- // 鍚屾fixleft鍜宐lock鐨勬粴鍔�
- syncScrollY(event, fake = false) {
- const { gantt_leftbar, gantt_table, gantt_scroll_y } = this.selector
- const topValue = event.target.scrollTop
- if (fake) {
- // 浼氳Е鍙戜竴娆＄湡鐨勬粴鍔ㄤ簨浠秂vent, 鍚庨潰鐨勪唬鐮佷細鍦ㄧ浜屼釜浜嬩欢涓墽琛�
- gantt_scroll_y.scrollTop = topValue
- return
- }
- gantt_leftbar.scrollTop = topValue
- gantt_table.scrollTop = topValue
- this.scrollTop = topValue
- this.$emit('scrollTop', topValue)
- },
- syncScrollX(event, fake = false) {
- const {
- gantt_table,
- gantt_timeline,
- gantt_markArea,
- gantt_scroll_x
- } = this.selector
- const leftValue = event.target.scrollLeft
- if (fake) {
- // 浼氳Е鍙戜竴娆＄湡鐨勬粴鍔ㄤ簨浠秂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)
- }
- }
-}
-</script>
-
-<style lang="scss">
-@import "./gantt.scss";
-
-.gantt-leftbar-wrapper {
- // overflow-y: scroll;
- // overflow: visible;
-}
-
-.gantt-body {
- // overflow-y: scroll;
-}
-
-.gantt-leftbar {
- // overflow-y: scroll;
-}
-</style>
diff --git a/src/components/v-gantt-chart/.babelrc b/src/lib/v-gantt-chart/.babelrc
similarity index 100%
rename from src/components/v-gantt-chart/.babelrc
rename to src/lib/v-gantt-chart/.babelrc
diff --git a/src/components/v-gantt-chart/.gitignore b/src/lib/v-gantt-chart/.gitignore
similarity index 100%
rename from src/components/v-gantt-chart/.gitignore
rename to src/lib/v-gantt-chart/.gitignore
diff --git a/src/components/v-gantt-chart/LICENSE b/src/lib/v-gantt-chart/LICENSE
similarity index 100%
rename from src/components/v-gantt-chart/LICENSE
rename to src/lib/v-gantt-chart/LICENSE
diff --git a/src/components/v-gantt-chart/README.md b/src/lib/v-gantt-chart/README.md
similarity index 100%
rename from src/components/v-gantt-chart/README.md
rename to src/lib/v-gantt-chart/README.md
diff --git a/src/components/v-gantt-chart/index.js b/src/lib/v-gantt-chart/index.js
similarity index 100%
rename from src/components/v-gantt-chart/index.js
rename to src/lib/v-gantt-chart/index.js
diff --git a/src/components/v-gantt-chart/lib/assets/block.png b/src/lib/v-gantt-chart/lib/assets/block.png
similarity index 100%
rename from src/components/v-gantt-chart/lib/assets/block.png
rename to src/lib/v-gantt-chart/lib/assets/block.png
Binary files differ
diff --git a/src/components/v-gantt-chart/lib/components/blocks/index.vue b/src/lib/v-gantt-chart/lib/components/blocks/index.vue
similarity index 100%
rename from src/components/v-gantt-chart/lib/components/blocks/index.vue
rename to src/lib/v-gantt-chart/lib/components/blocks/index.vue
diff --git a/src/components/v-gantt-chart/lib/components/dynamic-render.js b/src/lib/v-gantt-chart/lib/components/dynamic-render.js
similarity index 100%
rename from src/components/v-gantt-chart/lib/components/dynamic-render.js
rename to src/lib/v-gantt-chart/lib/components/dynamic-render.js
diff --git a/src/components/v-gantt-chart/lib/components/left-bar/index.vue b/src/lib/v-gantt-chart/lib/components/left-bar/index.vue
similarity index 100%
rename from src/components/v-gantt-chart/lib/components/left-bar/index.vue
rename to src/lib/v-gantt-chart/lib/components/left-bar/index.vue
diff --git a/src/components/v-gantt-chart/lib/components/mark-line/current-time.vue b/src/lib/v-gantt-chart/lib/components/mark-line/current-time.vue
similarity index 100%
rename from src/components/v-gantt-chart/lib/components/mark-line/current-time.vue
rename to src/lib/v-gantt-chart/lib/components/mark-line/current-time.vue
diff --git a/src/components/v-gantt-chart/lib/components/mark-line/index.vue b/src/lib/v-gantt-chart/lib/components/mark-line/index.vue
similarity index 100%
rename from src/components/v-gantt-chart/lib/components/mark-line/index.vue
rename to src/lib/v-gantt-chart/lib/components/mark-line/index.vue
diff --git a/src/components/v-gantt-chart/lib/components/time-line/index.vue b/src/lib/v-gantt-chart/lib/components/time-line/index.vue
similarity index 100%
rename from src/components/v-gantt-chart/lib/components/time-line/index.vue
rename to src/lib/v-gantt-chart/lib/components/time-line/index.vue
diff --git a/src/components/v-gantt-chart/lib/gantt.scss b/src/lib/v-gantt-chart/lib/gantt.scss
similarity index 100%
rename from src/components/v-gantt-chart/lib/gantt.scss
rename to src/lib/v-gantt-chart/lib/gantt.scss
diff --git a/src/lib/v-gantt-chart/lib/gantt.vue b/src/lib/v-gantt-chart/lib/gantt.vue
new file mode 100644
index 0000000..7334293
--- /dev/null
+++ b/src/lib/v-gantt-chart/lib/gantt.vue
@@ -0,0 +1,550 @@
+<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'}">
+ <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>
+ </div>
+ </div>
+
+ <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">
+ <!-- <CurrentTime v-if="showCurrentTime"
+ :getPositonOffset="getPositonOffset" /> -->
+ <!-- <mark-line v-for="(times,index) in timeLines"
+ :key="index"
+ :markLineTime="times.time"
+ :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'}">
+ <template slot-scope="{data}">
+ <slot name="left"
+ :data="data">
+ </slot>
+ </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}">
+ <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>
+
+ </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>
+
+ <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>
+
+ </div>
+</template>
+
+<script>
+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";
+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";
+
+export default {
+ name: "Gantt",
+
+ components: { Timeline, LeftBar, Blocks, MarkLine, CurrentTime },
+
+ props: {
+ startTime: {
+ default: () => dayjs(),
+ validator(date) {
+ let 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;
+ }
+ },
+ cellWidth: {
+ type: Number,
+ default: 50
+ },
+ cellHeight: {
+ type: Number,
+ default: 20
+ },
+ titleHeight: {
+ type: Number,
+ default: 40
+ },
+ titleWidth: {
+ type: Number,
+ default: 200
+ },
+ scale: {
+ type: Number,
+ default: 60,
+ validator(value) {
+ return scaleList.includes(value);
+ }
+ },
+ datas: {
+ type: Array,
+ default: () => []
+ },
+ dataKey: {
+ type: String,
+ default: undefined
+ },
+ itemKey: {
+ type: String,
+ default: undefined
+ },
+ arrayKeys: {
+ type: Array,
+ default: () => []
+ },
+ showCurrentTime: {
+ type: Boolean,
+ default: false
+ },
+ timeLines: {
+ type: Array
+ },
+ scrollToTime: {
+ validator(date) {
+ 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;
+ if (!validX && !validY) {
+ warn("scrollToPostion x鎴杫 鏈夊�间负闈濶umber绫诲瀷");
+ return false;
+ }
+ return true;
+ }
+ },
+ hideHeader: {
+ type: Boolean,
+ default: false
+ },
+ hideXScrollBar: {
+ type: Boolean,
+ default: false
+ },
+ hideYScrollBar: {
+ type: Boolean,
+ default: false
+ },
+ customGenerateBlocks: {
+ type: Boolean,
+ default: false
+ }
+ },
+
+ data() {
+ return {
+ //缂撳瓨鑺傜偣
+ selector: {
+ gantt_leftbar: {},
+ gantt_table: {},
+ gantt_scroll_y: {},
+ gantt_timeline: {},
+ gantt_scroll_x: {},
+ gantt_markArea: {}
+ },
+ scrollTop: 0,
+ scrollLeft: 0,
+ //block 鍖哄煙闇�瑕佹覆鏌撶殑鑼冨洿
+ //鍏堟覆鏌撳嚭绌烘鏋讹紝鍦╩ounted鍚庡啀寰楀埌鐪熷疄鐨勬覆鏌撹寖鍥达紝鐒跺悗鍦ㄦ牴鎹寖鍥存覆鏌撴暟鎹紝姣斾箣鍓嶈缃竴涓粯璁ら珮搴﹀搴︼紝棰濆鐨勬覆鏌撴氮璐规洿灏戜簡
+ heightOfRenderAera: 0,
+ widthOfRenderAera: 0,
+ startTimeOfRenderArea: null,
+ endTimeOfRenderArea: null,
+ scrollBarWitdh: 17
+ };
+ },
+
+ computed: {
+ start() {
+ return dayjs(this.startTime);
+ },
+ end() {
+ let { start, widthOfRenderAera, scale, cellWidth } = this;
+ let end = dayjs(this.endTime);
+ let totalWidth = calcScalesAbout2Times(start, end, scale) * cellWidth;
+ if (start.isAfter(end) || totalWidth <= widthOfRenderAera) {
+ end = start.add((widthOfRenderAera / cellWidth) * scale, "minute");
+ }
+ return end;
+ },
+ totalWidth() {
+ let { cellWidth, totalScales } = this;
+ return cellWidth * totalScales;
+ },
+ totalScales() {
+ let { start, end, scale } = this;
+ return calcScalesAbout2Times(start, end, scale);
+ },
+ totalHeight() {
+ let { datas, cellHeight } = this;
+ return datas.length * cellHeight;
+ },
+ beginTimeOfTimeLine() {
+ let value = getBeginTimeOfTimeLine(this.start, this.scale);
+ return value;
+ },
+ beginTimeOfTimeLineToString() {
+ return this.beginTimeOfTimeLine.toString();
+ },
+ avialableScrollLeft() {
+ // 涓嶅噺杩欎釜1锛屾粴鍔ㄥ埌鏃堕棿杞村敖澶村悗缁х画婊氬姩浼氭參鎱㈢殑婧㈠嚭
+ let { totalWidth, widthOfRenderAera } = this;
+ return totalWidth - widthOfRenderAera - 1;
+ },
+ avialableScrollTop() {
+ let { totalHeight, heightOfRenderAera } = this;
+ return totalHeight - heightOfRenderAera - 1;
+ },
+ scrollXBarHeight() {
+ return this.hideXScrollBar ? 0 : this.scrollBarWitdh;
+ },
+ scrollYBarWidth() {
+ return this.hideYScrollBar ? 0 : this.scrollBarWitdh;
+ },
+ actualHeaderHeight() {
+ return this.hideHeader ? 0 : this.titleHeight;
+ }
+ },
+
+ watch: {
+ scrollLeft() {
+ this.getTimeRange();
+ },
+ widthOfRenderAera() {
+ this.getTimeRange();
+ },
+ cellWidth() {
+ this.getTimeRange();
+ },
+ scrollToTime: {
+ handler(newV) {
+ if (!newV) {
+ return;
+ }
+ let { start, end } = this;
+ let time = dayjs(newV);
+ if (!(time.isAfter(start) && time.isBefore(end))) {
+ warn(`褰撳墠婊氬姩鑷�${newV}涓嶅湪${start}鍜�${end}鐨勮寖鍥翠箣鍐卄);
+ return;
+ }
+
+ let offset = this.getPositonOffset(newV);
+ // immediate 浼氶�犳垚dom 杩樻病鏈夋寕杞芥椂灏辫繘琛屾搷浣滐紝鏁呴渶瑕佸欢杩熸墽琛�
+ this.$nextTick(() =>
+ this.syncScrollX(
+ {
+ target: {
+ scrollLeft: offset
+ }
+ },
+ true
+ )
+ );
+ },
+ immediate: true
+ },
+ scrollToPostion: {
+ handler(newV) {
+ if (!newV) {
+ return;
+ }
+ let x = Number.isNaN(newV.x) ? undefined : newV.x;
+ let y = Number.isNaN(newV.y) ? undefined : newV.y;
+ this.$nextTick(() => {
+ if (isDef(x) && x !== this.scrollLeft) {
+ this.syncScrollX({ target: { scrollLeft: x } }, true);
+ }
+ if (isDef(y) && y !== this.scrollTop) {
+ this.syncScrollY({ target: { scrollTop: y } }, true);
+ }
+ });
+ },
+ immediate: true
+ }
+ },
+
+ mounted() {
+ 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);
+ },
+
+ methods: {
+ /**
+ * 璁＄畻闇�瑕佹覆鏌撶殑鏃堕棿鑼冨洿
+ *
+ */
+ getTimeRange() {
+ if (this.heightOfRenderAera === 0) {
+ return;
+ }
+
+ let {
+ beginTimeOfTimeLine,
+ scrollLeft,
+ cellWidth,
+ scale,
+ widthOfRenderAera
+ } = this;
+
+ this.startTimeOfRenderArea = beginTimeOfTimeLine
+ .add((scrollLeft / cellWidth) * scale, "minute")
+ .toDate()
+ .getTime();
+ this.endTimeOfRenderArea = beginTimeOfTimeLine
+ .add(((scrollLeft + widthOfRenderAera) / cellWidth) * scale, "minute")
+ .toDate()
+ .getTime();
+ },
+ getWidthAbout2Times(start, end) {
+ let options = {
+ scale: this.scale,
+ cellWidth: this.cellWidth
+ };
+ return _getWidthAbout2Times(start, end, options);
+ },
+ /**
+ * 涓烘椂闂寸嚎璁＄畻鍋忕Щ
+ */
+ getPositonOffset(date) {
+ let options = {
+ scale: this.scale,
+ cellWidth: this.cellWidth
+ };
+
+ 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;
+ },
+ wheelHandle(event) {
+ let { deltaX, deltaY } = event;
+ this.$nextTick(() => {
+ let {
+ scrollTop,
+ scrollLeft,
+ avialableScrollLeft,
+ avialableScrollTop
+ } = this;
+
+ if (deltaY !== 0) {
+ if (
+ scrollTop + deltaY >= avialableScrollTop &&
+ scrollTop !== avialableScrollTop
+ ) {
+ this.syncScrollY(
+ { target: { scrollTop: avialableScrollTop } },
+ true
+ );
+ } else if (
+ scrollTop + deltaY < 0 &&
+ scrollTop !== 0 /*婊氬姩涓�0闄愬埗*/
+ ) {
+ this.syncScrollY({ target: { scrollTop: 0 } }, true);
+ } else {
+ this.syncScrollY(
+ { target: { scrollTop: scrollTop + deltaY } },
+ true
+ );
+ }
+ }
+ if (deltaX !== 0) {
+ if (
+ scrollLeft + deltaX >= avialableScrollLeft &&
+ scrollLeft !== avialableScrollLeft
+ ) {
+ this.syncScrollX(
+ { target: { scrollLeft: avialableScrollLeft } },
+ true
+ );
+ } else if (
+ scrollLeft + deltaX < 0 &&
+ scrollLeft !== 0 /*婊氬姩涓�0闄愬埗*/
+ ) {
+ this.syncScrollX({ target: { scrollLeft: 0 } }, true);
+ } else {
+ this.syncScrollX(
+ { target: { scrollLeft: scrollLeft + deltaX } },
+ true
+ );
+ }
+ }
+ });
+ },
+ //鍚屾fixleft鍜宐lock鐨勬粴鍔�
+ syncScrollY(event, fake = false) {
+ let { gantt_leftbar, gantt_table, gantt_scroll_y } = this.selector;
+ let topValue = event.target.scrollTop;
+ if (fake) {
+ //浼氳Е鍙戜竴娆＄湡鐨勬粴鍔ㄤ簨浠秂vent, 鍚庨潰鐨勪唬鐮佷細鍦ㄧ浜屼釜浜嬩欢涓墽琛�
+ gantt_scroll_y.scrollTop = topValue;
+ return;
+ }
+ gantt_leftbar.scrollTop = topValue;
+ gantt_table.scrollTop = topValue;
+ this.scrollTop = topValue;
+ this.$emit("scrollTop", topValue);
+ },
+ syncScrollX(event, fake = false) {
+ let {
+ gantt_table,
+ gantt_timeline,
+ gantt_markArea,
+ gantt_scroll_x
+ } = this.selector;
+ let leftValue = event.target.scrollLeft;
+ if (fake) {
+ //浼氳Е鍙戜竴娆＄湡鐨勬粴鍔ㄤ簨浠秂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);
+ }
+ }
+};
+</script>
+
+<style lang="scss">
+@import "./gantt.scss";
+.gantt-leftbar-wrapper{
+ // overflow-y: scroll;
+ // overflow: visible;
+}
+.gantt-body{
+ // overflow-y: scroll;
+}
+.gantt-leftbar{
+ // overflow-y: scroll;
+}
+</style>
diff --git a/src/components/v-gantt-chart/lib/index.js b/src/lib/v-gantt-chart/lib/index.js
similarity index 100%
rename from src/components/v-gantt-chart/lib/index.js
rename to src/lib/v-gantt-chart/lib/index.js
diff --git a/src/components/v-gantt-chart/lib/utils/debounce.js b/src/lib/v-gantt-chart/lib/utils/debounce.js
similarity index 100%
rename from src/components/v-gantt-chart/lib/utils/debounce.js
rename to src/lib/v-gantt-chart/lib/utils/debounce.js
diff --git a/src/components/v-gantt-chart/lib/utils/gtUtils.js b/src/lib/v-gantt-chart/lib/utils/gtUtils.js
similarity index 100%
rename from src/components/v-gantt-chart/lib/utils/gtUtils.js
rename to src/lib/v-gantt-chart/lib/utils/gtUtils.js
diff --git a/src/components/v-gantt-chart/lib/utils/throttle.js b/src/lib/v-gantt-chart/lib/utils/throttle.js
similarity index 100%
rename from src/components/v-gantt-chart/lib/utils/throttle.js
rename to src/lib/v-gantt-chart/lib/utils/throttle.js
diff --git a/src/components/v-gantt-chart/lib/utils/timeLineUtils.js b/src/lib/v-gantt-chart/lib/utils/timeLineUtils.js
similarity index 100%
rename from src/components/v-gantt-chart/lib/utils/timeLineUtils.js
rename to src/lib/v-gantt-chart/lib/utils/timeLineUtils.js
diff --git a/src/components/v-gantt-chart/lib/utils/tool.js b/src/lib/v-gantt-chart/lib/utils/tool.js
similarity index 100%
rename from src/components/v-gantt-chart/lib/utils/tool.js
rename to src/lib/v-gantt-chart/lib/utils/tool.js
diff --git a/src/components/v-gantt-chart/package.json b/src/lib/v-gantt-chart/package.json
similarity index 100%
rename from src/components/v-gantt-chart/package.json
rename to src/lib/v-gantt-chart/package.json
diff --git a/src/components/v-gantt-chart/test/gtUtils.test.js b/src/lib/v-gantt-chart/test/gtUtils.test.js
similarity index 75%
rename from src/components/v-gantt-chart/test/gtUtils.test.js
rename to src/lib/v-gantt-chart/test/gtUtils.test.js
index d1e80ce..0a1af6f 100644
--- a/src/components/v-gantt-chart/test/gtUtils.test.js
+++ b/src/lib/v-gantt-chart/test/gtUtils.test.js
@@ -1,103 +1,101 @@
-var expect = require('chai').expect;
+var expect = require('chai').expect
var func = require('../lib/utils/gtUtils')
import dayjs from 'dayjs'
describe('娴嬭瘯gtUtils.js', function() {
-
describe('娴嬭瘯getWidthAbout2Times鍑芥暟', function() {
it('鐩稿悓鏃堕棿 璁＄畻缁撴灉涓�0', function() {
expect(func.getWidthAbout2Times(dayjs(
- '2018-10-10 10:00:00'), dayjs(
+ '2018-10-10 10:00:00'), dayjs(
'2018-10-10 10:00:00'), {
- scale: 60,
- cellWidth: 60
- }))
- .to.be.equal(0);
- });
+ scale: 60,
+ cellWidth: 60
+ }))
+ .to.be.equal(0)
+ })
it('鏁版嵁娴嬭瘯1', function() {
expect(func.getWidthAbout2Times(dayjs(
'2018-10-10 10:00:00'), dayjs(
- '2018-10-10 11:00:00'), {
+ '2018-10-10 11:00:00'), {
scale: 60,
cellWidth: 60
})).to.equal(60)
- });
+ })
it('鏁版嵁娴嬭瘯2', function() {
expect(func.getWidthAbout2Times(dayjs(
'2018-10-10 00:00:00'), dayjs(
- '2018-10-10 01:10:00'), {
+ '2018-10-10 01:10:00'), {
scale: 1,
cellWidth: 1
})).to.equal(70)
- });
+ })
it('鏁版嵁娴嬭瘯3', function() {
expect(func.getWidthAbout2Times(dayjs(
'2018-10-11 10:00:00'), dayjs(
- '2018-10-11 00:00:00'), {
+ '2018-10-11 00:00:00'), {
scale: 10,
cellWidth: 10
})).to.equal(-600)
- });
+ })
it('鏁版嵁娴嬭瘯4', function() {
expect(func.getWidthAbout2Times(dayjs(
'2018-10-10 00:00:00'), dayjs(
- '2018-10-10 10:00:00'), {
+ '2018-10-10 10:00:00'), {
scale: 10,
cellWidth: 60
})).to.equal(3600)
- });
- });
+ })
+ })
describe('娴嬭瘯getPositonOffset鍑芥暟', function() {
it('鐩稿悓鏃堕棿 璁＄畻缁撴灉涓�0', function() {
expect(func.getPositonOffset(dayjs(
- '2018-10-10 10:00:00'), dayjs(
+ '2018-10-10 10:00:00'), dayjs(
'2018-10-10 10:00:00'), {
- scale: 60,
- cellWidth: 60
- }))
- .to.be.equal(0);
- });
+ scale: 60,
+ cellWidth: 60
+ }))
+ .to.be.equal(0)
+ })
it('鏁版嵁娴嬭瘯1', function() {
expect(func.getPositonOffset(dayjs(
'2018-10-10 10:00:00'), dayjs(
- '2018-10-10 11:00:00'), {
+ '2018-10-10 11:00:00'), {
scale: 60,
cellWidth: 60
})).to.equal(-60)
- });
+ })
it('鏁版嵁娴嬭瘯2', function() {
expect(func.getPositonOffset(dayjs(
'2018-10-10 00:00:00'), dayjs(
- '2018-10-10 01:10:00'), {
+ '2018-10-10 01:10:00'), {
scale: 60,
cellWidth: 60
})).to.equal(-70)
- });
+ })
it('鏁版嵁娴嬭瘯3', function() {
expect(func.getPositonOffset(dayjs(
'2018-10-11 10:00:00'), dayjs(
- '2018-10-11 00:00:00'), {
+ '2018-10-11 00:00:00'), {
scale: 60,
cellWidth: 60
})).to.equal(+600)
- });
+ })
it('鏁版嵁娴嬭瘯4', function() {
expect(func.getPositonOffset(dayjs(
'2018-10-10 00:00:00'), dayjs(
- '2018-10-10 10:00:00'), {
+ '2018-10-10 10:00:00'), {
scale: 60,
cellWidth: 60
})).to.equal(-600)
- });
- });
-
-});
\ No newline at end of file
+ })
+ })
+})
diff --git a/src/components/v-gantt-chart/test/timeblock.test.js b/src/lib/v-gantt-chart/test/timeblock.test.js
similarity index 100%
rename from src/components/v-gantt-chart/test/timeblock.test.js
rename to src/lib/v-gantt-chart/test/timeblock.test.js
diff --git a/src/components/v-gantt-chart/webpack.config.js b/src/lib/v-gantt-chart/webpack.config.js
similarity index 100%
rename from src/components/v-gantt-chart/webpack.config.js
rename to src/lib/v-gantt-chart/webpack.config.js
diff --git a/src/main.js b/src/main.js
index 775cad9..099145e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -60,7 +60,7 @@
import clearTabIndex from './utils/clearTabIndex.js' // 鍒犻櫎el-tooltip tabindex
clearTabIndex.install(Vue)
-import vGanttChart from './components/v-gantt-chart/index' // 寮曠敤淇敼杩囩殑gantt
+import vGanttChart from './lib/v-gantt-chart/index' // 寮曠敤淇敼杩囩殑gantt
Vue.use(vGanttChart)
new Vue({
diff --git a/src/permission.js b/src/permission.js
index 68e68a5..fd74217 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -8,7 +8,7 @@
NProgress.configure({ showSpinner: false }) // NProgress Configuration
-const whiteList = ['/login', '/zhkb', '/ckgl', '/cgdd', '/bzcj', '/dccj', '/zpcj'] // no redirect whitelist
+const whiteList = ['/login', '/zhkb', '/ckgl', '/cgdd', '/bzcj', '/dccj', '/zpcj', '/back'] // no redirect whitelist
router.beforeEach(async(to, from, next) => {
// start progress bar
diff --git a/src/router/index.js b/src/router/index.js
index 3773548..11b18f9 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -101,6 +101,22 @@
// { path: '*', redirect: '/404', hidden: true }
]
export const asyncRoutes = [
+ // {
+ // path: '/gtt',
+ // component: Layout,
+ // redirect: '/gtt/back',
+ // name: '鍩虹璁剧疆',
+ // code: '1001',
+ // meta: { code: '1001', title: '鍩虹璁剧疆', icon: 'tree' },
+ // alwaysShow: true, // 褰揷hildren鍙湁涓�涓椂锛屼篃鏄剧ず鐖惰彍鍗�
+ // children: [{
+ // path: 'back',
+ // name: 'YYQDCancel',
+ // code: '1011',
+ // component: () => import('@/views/gantt_back/gantt_back'),
+ // meta: { code: '1011', title: '鐢ㄦ埛娓呭崟', icon: '', keepAlive: true }
+ // }]
+ // },
{
path: '/jcsz',
component: Layout,
diff --git a/src/views/gantt_back/gantt_back.vue b/src/views/gantt_back/gantt_back.vue
index d9a8dec..59ccad7 100644
--- a/src/views/gantt_back/gantt_back.vue
+++ b/src/views/gantt_back/gantt_back.vue
@@ -3,7 +3,6 @@
<el-tabs style="margin: 30px">
<el-row style="margin-bottom:20px">
-
<el-col :span="7" :offset="1">
<span class="t_size" style="margin-left:7px">鎺掔▼鏃ユ湡</span>
<el-date-picker
@@ -102,7 +101,6 @@
:datas="bm_data"
@scrollLeft="scrollLeftA"
>
- <!-- <template v-slot:block="{data,item}"> -->
<template slot="block" slot-scope="{data,item}">
<Test
:data="data"
@@ -133,7 +131,6 @@
</template>
<template slot="title">
<span class="tc">宸ヤ綅鍒楄〃</span>
-
<el-checkbox v-model="all_status" class="box_style" @change="changeLift()" />
<input v-model.number="cellWidth" type="range" min="20" max="100" class="box_styles">
</template>
@@ -144,11 +141,7 @@
<script>
import Test from '@/components/Test'
-// import PaginationView from '@/components/PaginationView'
-// import TestLeft from '@/components/TestLeft'
-// import { mockDatas } from './index1.js'
import dayjs from 'dayjs'
-// import automaticScheduling from '@/api/automaticScheduling'
const scaleList = `30,60,240,360`.split(',').map(n => parseInt(n))
const timeList = `0,30,60,120,240,480`.split(',').map(n => parseInt(n))
@@ -280,7 +273,7 @@
},
'rows': [
{
- 'YearDate': '2022-09-01',
+ 'YearDate': '2022-09-24',
'children': [
{
'AdvaDevicNumber': 'LKFDL_SC-PC029',
@@ -296,7 +289,7 @@
]
},
{
- 'YearDate': '2022-09-02',
+ 'YearDate': '2022-09-25',
'children': [
{
'AdvaDevicNumber': 'LKFDL_SC-PC029',
@@ -312,7 +305,7 @@
]
},
{
- 'YearDate': '2022-09-03',
+ 'YearDate': '2022-09-26',
'children': [
{
'AdvaDevicNumber': 'LKFDL_SC-PC029',
@@ -328,7 +321,7 @@
]
},
{
- 'YearDate': '2022-09-04',
+ 'YearDate': '2022-09-27',
'children': [
{
'AdvaDevicNumber': 'LKFDL_SC-PC029',
@@ -344,7 +337,7 @@
]
},
{
- 'YearDate': '2022-09-05',
+ 'YearDate': '2022-09-28',
'children': [
{
'AdvaDevicNumber': 'LKFDL_SC-PC029',
@@ -360,7 +353,7 @@
]
},
{
- 'YearDate': '2022-09-06',
+ 'YearDate': '2022-09-29',
'children': [
{
'AdvaDevicNumber': 'LKFDL_SC-PC029',
@@ -970,6 +963,7 @@
this.dataTransition()
this.change_num(this.bm_data)
}
+ this.$forceUpdate()
},
// 鎵嬪姩杩囨护鎵�鏈夋椂闂村凡鎺掔▼
time_nitalize() {
diff --git a/src/views/gantt_back/index1_back.js b/src/views/gantt_back/index1_back.js
deleted file mode 100644
index cc5b774..0000000
--- a/src/views/gantt_back/index1_back.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import dayjs from 'dayjs'
-import Mock from 'mockjs'
-const colorList = ['(252, 105, 100)', '(247, 167, 71)', '(116, 202, 90)', '(83, 186, 241)', '(208, 142, 2231)']
-const nameList = '甯屾湜鍙�,椋炵考鍙�,鍏夋槑鍙�,绐ユ帰鍙�,鍔涚鍙�,璀﹀畼鍙�,闂數娴佹槦鍙�,鍗氬＋鍙�,闇归洺鐏鍙�,鐙欏嚮鎵嬪彿,甯屾湜涔嬪厜鍙�,鍗楁捣蹇嶈�呭彿,鐏�烢3鍙�,灞辩鍙�,瀹夊叏鍗＋鍙�,閾侀敜鍙�,瀵挎槦鍙�,鏄熸槦鍙�,缃楁浖鏂崱,娆叉湜鍙�,闇归洺闆风數鍙�,娑堥槻鍙�,娆ф床涔嬫槦鍙�'.split(',')
-
-const typeList = '馃殔,馃殘,馃殑'.split(',')
-
-const Random = Mock.Random
-var template = {
- 'id': () => 'JHR' + Random.natural(100, 999) + Random.character('upper') + Random.character('upper'),
- 'name': () => Random.pick(nameList),
- 'type': () => Random.pick(typeList),
- 'colorPair': () => {
- const a = 'rgb' + Random.pick(colorList)
- return {
- dark: a.replace(')', ',0.8)'),
- light: a.replace(')', ',0.1)')
- }
- },
- 'speed': () => Random.natural(0, 200),
- 'gtArray': () => {
- const temp = []
- let i = 0
- const j = Random.natural(1, 9)
- let tempStart = dayjs().subtract(12, 'hour')
- let tempEnd = dayjs().subtract(12, 'hour')
-
- while (i < j) {
- tempStart = tempEnd.add(Random.natural(1, 5), 'hour')
- tempEnd = tempStart.add(Random.natural(1, 5), 'hour')
- temp.push({
- 'id': 'D' + Random.natural(1000, 9999),
- 'passenger': Random.natural(10, 200),
- 'start': tempStart.toString(),
- 'end': tempEnd.toString()
- })
-
- i++
- }
- return temp
- }
-
-}
-
-function mockDatas(nums) {
- const datas = []
- for (let i = 0,
- j = Random.natural(nums, nums); i < j; i++) {
- datas.push(Mock.mock(template))
- }
- return datas
-}
-
-export {
- mockDatas
-}
--
Gitblit v1.9.3