From c4b49d08cef0805e17646eef03e1c1a62316c3b2 Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期六, 05 十一月 2022 10:41:52 +0800
Subject: [PATCH] 1.产能规划优化
---
src/lib/v-gantt-chart/lib/components/time-line/index.vue | 141 +++++++++++++++++++++++++---------------------
1 files changed, 77 insertions(+), 64 deletions(-)
diff --git a/src/lib/v-gantt-chart/lib/components/time-line/index.vue b/src/lib/v-gantt-chart/lib/components/time-line/index.vue
index 1715e11..1c069e1 100644
--- a/src/lib/v-gantt-chart/lib/components/time-line/index.vue
+++ b/src/lib/v-gantt-chart/lib/components/time-line/index.vue
@@ -1,20 +1,32 @@
<template>
- <div class="gantt-timeline"
- :style="{'margin-left':-cellWidth/2+'px'}">
- <div class="gantt-timeline-block"
- v-for="(day,index) in getDays" :style="{width:getTimeScales(day).length*cellWidth+'px'}"
- :key="index">
- <div class="gantt-timeline-day "
- :style="heightStyle">
- {{day.format("YYYY-MM-DD")}}
- {{getDayMy(day.format("YYYY-MM-DD"))}}
- </div>
- <div class="gantt-timeline-scale "
- :style="heightStyle">
- <div :style="cellWidthStyle"
- v-for="(hour,index) in getTimeScales(day)"
- :key="index">
- {{hour}}
+ <div
+ class="gantt-timeline"
+ :style="{'margin-left':-cellWidth/2+'px'}"
+ >
+ <div
+ v-for="(day,index) in getDays"
+ :key="index"
+ class="gantt-timeline-block"
+ :style="{width:getTimeScales(day).length*cellWidth+'px'}"
+ >
+ <div
+ class="gantt-timeline-day "
+ :style="heightStyle"
+ >
+ {{ day.format("YYYY-MM-DD") }}
+ {{ getDayMy(day.format("YYYY-MM-DD")) }}
+ </div>
+ <div
+ class="gantt-timeline-scale"
+ :style="heightStyle"
+ style="border-right: 1px solid #eee"
+ >
+ <div
+ v-for="(hour,index) in getTimeScales(day)"
+ :key="index"
+ :style="cellWidthStyle"
+ >
+ {{ hour }}
<!-- <span v-if="hour !='01' ">{{hour}}</span> -->
</div>
</div>
@@ -23,19 +35,19 @@
</template>
<script>
-import dayjs from "dayjs";
-import { getBeginTimeOfTimeLine } from "../../utils/timeLineUtils.js";
+import dayjs from 'dayjs'
+import { getBeginTimeOfTimeLine } from '../../utils/timeLineUtils.js'
-const START_DAY = Symbol();
-const MIDDLE_DAY = Symbol();
-const END_DAY = Symbol();
+const START_DAY = Symbol()
+const MIDDLE_DAY = Symbol()
+const END_DAY = Symbol()
function isSameDay(one, two) {
- return one.isSame(two, "day");
+ return one.isSame(two, 'day')
}
export default {
- name: "Timeline",
+ name: 'Timeline',
props: {
start: {
@@ -61,33 +73,33 @@
* @returns {[dayjs]} 璇ata涓墍鏈夐渶瑕佹覆鏌撶殑鏁版嵁
*/
getDays() {
- let temp = [];
- let { start, end } = this;
+ const temp = []
+ let { start, end } = this
- for (; !isSameDay(start, end); start = start.add(1, "day")) {
- temp.push(start);
+ for (; !isSameDay(start, end); start = start.add(1, 'day')) {
+ temp.push(start)
}
- temp.push(start);
+ temp.push(start)
- return temp;
+ return temp
},
cellWidthStyle() {
return {
width: `${this.cellWidth}px`
- };
+ }
},
heightStyle() {
return {
- height: this.titleHeight + "px",
- "line-height": this.titleHeight + "px",
- };
+ height: this.titleHeight + 'px',
+ 'line-height': this.titleHeight + 'px'
+ }
}
},
methods: {
// 绠楀嚭鏄熸湡
- getDayMy(day){
- let weekArray = new Array("鏄熸湡鏃�", "鏄熸湡涓�", "鏄熸湡浜�", "鏄熸湡涓�", "鏄熸湡鍥�", "鏄熸湡浜�", "鏄熸湡鍏�");
+ getDayMy(day) {
+ const weekArray = new Array('鏄熸湡鏃�', '鏄熸湡涓�', '鏄熸湡浜�', '鏄熸湡涓�', '鏄熸湡鍥�', '鏄熸湡浜�', '鏄熸湡鍏�')
return weekArray[new Date(day).getDay()]
},
/**
@@ -97,13 +109,13 @@
* @returns {[string]} 璇ata涓墍鏈夐渶瑕佹覆鏌撶殑鏁版嵁
*/
getTimeScales(date) {
- let { start, end } = this;
+ const { start, end } = this
if (isSameDay(date, start)) {
- return this.generateTimeScale(START_DAY);
+ return this.generateTimeScale(START_DAY)
} else if (isSameDay(date, end)) {
- return this.generateTimeScale(END_DAY);
+ return this.generateTimeScale(END_DAY)
} else {
- return this.generateTimeScale(MIDDLE_DAY);
+ return this.generateTimeScale(MIDDLE_DAY)
}
},
/**
@@ -113,49 +125,50 @@
* @returns {[string]} 璇ata涓墍鏈夐渶瑕佹覆鏌撶殑鏁版嵁
*/
generateTimeScale(type) {
- let totalblock = [];
- let { start, end, scale } = this;
- let a, b;
+ const totalblock = []
+ const { start, end, scale } = this
+ let a, b
switch (type) {
- case START_DAY: //鍜宻tart鍚屼竴澶�
- a = getBeginTimeOfTimeLine(start, scale);
- //start鍜宔nd鍚屼竴澶╃壒娈婂鐞�
+ case START_DAY: // 鍜宻tart鍚屼竴澶�
+ a = getBeginTimeOfTimeLine(start, scale)
+ // start鍜宔nd鍚屼竴澶╃壒娈婂鐞�
if (isSameDay(start, end)) {
- b = end;
+ b = end
} else {
- b = start.endOf("day");
+ b = start.endOf('day')
}
- break;
- case END_DAY: //鍜宔nd 鍚屼竴澶�
- a = end.startOf("day");
- b = end;
- break;
- case MIDDLE_DAY: //start鍜宔nd涓棿鐨勫ぉ
- a = start.startOf("day");
- b = start.endOf("day");
- break;
+ break
+ case END_DAY: // 鍜宔nd 鍚屼竴澶�
+ a = end.startOf('day')
+ b = end
+ break
+ case MIDDLE_DAY: // start鍜宔nd涓棿鐨勫ぉ
+ a = start.startOf('day')
+ b = start.endOf('day')
+ break
default:
- throw new TypeError("閿欒鐨勮绠楃被鍨�");
+ throw new TypeError('閿欒鐨勮绠楃被鍨�')
}
while (!a.isAfter(b)) {
if (scale >= 60) {
- totalblock.push(a.format("HH"));
+ totalblock.push(a.format('HH'))
} else {
- totalblock.push(a.format("HH:mm"));
+ totalblock.push(a.format('HH:mm'))
}
- a = a.add(scale, "minute");
+ a = a.add(scale, 'minute')
}
- return totalblock;
+ return totalblock
}
- },
-};
+ }
+}
</script>
<style lang="scss" scoped>
.gantt-timeline-day{
border-right: 1px solid #ebeef5;
border-bottom: 1px solid #ebeef5;
- background: rgb(245, 245, 245);
+ //background: rgb(245, 245, 245);
+ background: #fff;
color: #909399;
font-size: 14px;
}
--
Gitblit v1.9.3