From 72fd6cbea51457ebf411ef12b9de161019d1803b Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期二, 27 十二月 2022 14:03:35 +0800
Subject: [PATCH] 1.点击按钮全屏切换2.新增采购订单菜单

---
 src/lib/v-gantt-chart/lib/components/time-line/index.vue |  175 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 175 insertions(+), 0 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
new file mode 100644
index 0000000..580ba14
--- /dev/null
+++ b/src/lib/v-gantt-chart/lib/components/time-line/index.vue
@@ -0,0 +1,175 @@
+<template>
+  <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>
+    </div>
+  </div>
+</template>
+
+<script>
+import dayjs from 'dayjs'
+import { getBeginTimeOfTimeLine } from '../../utils/timeLineUtils.js'
+
+const START_DAY = Symbol()
+const MIDDLE_DAY = Symbol()
+const END_DAY = Symbol()
+
+function isSameDay(one, two) {
+  return one.isSame(two, 'day')
+}
+
+export default {
+  name: 'Timeline',
+
+  props: {
+    start: {
+      type: dayjs
+    },
+    end: {
+      type: dayjs
+    },
+    cellWidth: {
+      type: Number
+    },
+    titleHeight: {
+      type: Number
+    },
+    scale: {
+      type: Number
+    }
+  },
+
+  computed: {
+    /**
+     * 澶╁垪琛�
+     * @returns {[dayjs]} 璇ata涓墍鏈夐渶瑕佹覆鏌撶殑鏁版嵁
+     */
+    getDays() {
+      const temp = []
+      let { start, end } = this
+
+      for (; !isSameDay(start, end); start = start.add(1, 'day')) {
+        temp.push(start)
+      }
+      temp.push(start)
+
+      return temp
+    },
+    cellWidthStyle() {
+      return {
+        width: `${this.cellWidth}px`
+      }
+    },
+    heightStyle() {
+      return {
+        height: this.titleHeight + 'px',
+        'line-height': this.titleHeight + 'px'
+      }
+    }
+  },
+
+  methods: {
+    // 绠楀嚭鏄熸湡
+    getDayMy(day) {
+      const weekArray = new Array('鏄熸湡鏃�', '鏄熸湡涓�', '鏄熸湡浜�', '鏄熸湡涓�', '鏄熸湡鍥�', '鏄熸湡浜�', '鏄熸湡鍏�')
+      return weekArray[new Date(day).getDay()]
+    },
+    /**
+     * 鑾峰彇鏃堕棿鍒诲害鏁扮粍
+     *
+     * @param {dayjs} date
+     * @returns {[string]} 璇ata涓墍鏈夐渶瑕佹覆鏌撶殑鏁版嵁
+     */
+    getTimeScales(date) {
+      const { start, end } = this
+      if (isSameDay(date, start)) {
+        return this.generateTimeScale(START_DAY)
+      } else if (isSameDay(date, end)) {
+        return this.generateTimeScale(END_DAY)
+      } else {
+        return this.generateTimeScale(MIDDLE_DAY)
+      }
+    },
+    /**
+     * 鐢熸垚鏃堕棿鍒诲害鏁扮粍
+     *
+     * @param {Symbol} type
+     * @returns {[string]} 璇ata涓墍鏈夐渶瑕佹覆鏌撶殑鏁版嵁
+     */
+    generateTimeScale(type) {
+      const totalblock = []
+      const { start, end, scale } = this
+      let a, b
+      switch (type) {
+        case START_DAY: // 鍜宻tart鍚屼竴澶�
+          a = getBeginTimeOfTimeLine(start, scale)
+          // start鍜宔nd鍚屼竴澶╃壒娈婂鐞�
+          if (isSameDay(start, end)) {
+            b = end
+          } else {
+            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
+        default:
+          throw new TypeError('閿欒鐨勮绠楃被鍨�')
+      }
+      while (!a.isAfter(b)) {
+        // if (scale >= 60) {
+        //   totalblock.push(a.format('HH'))
+        // } else {
+        totalblock.push(a.format('HH:mm'))
+        // }
+        a = a.add(scale, 'minute')
+      }
+      // console.log(1, 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: #fff;
+  color: #909399;
+  font-size: 14px;
+}
+</style>

--
Gitblit v1.9.3