1.节拍工价 编辑行功能优化

loulijun2021

2023-01-05 6bd005efa5bb1b9aa0bbb312378d57440c29366c

 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]} 该data中所有需要渲染的数据
     */
    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]} 该data中所有需要渲染的数据
     */
    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]} 该data中所有需要渲染的数据
     */
    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: //和start同一天
          a = getBeginTimeOfTimeLine(start, scale);
          //start和end同一天特殊处理
        case START_DAY: // 和start同一天
          a = getBeginTimeOfTimeLine(start, scale)
          // start和end同一天特殊处理
          if (isSameDay(start, end)) {
            b = end;
            b = end
          } else {
            b = start.endOf("day");
            b = start.endOf('day')
          }
          break;
        case END_DAY: //和end 同一天
          a = end.startOf("day");
          b = end;
          break;
        case MIDDLE_DAY: //start和end中间的天
          a = start.startOf("day");
          b = start.endOf("day");
          break;
          break
        case END_DAY: // 和end 同一天
          a = end.startOf('day')
          b = end
          break
        case MIDDLE_DAY: // start和end中间的天
          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"));
        } else {
          totalblock.push(a.format("HH:mm"));
        }
        a = a.add(scale, "minute");
        // if (scale >= 60) {
        //   totalblock.push(a.format('HH'))
        // } else {
        totalblock.push(a.format('HH:mm'))
        // }
        a = a.add(scale, 'minute')
      }

      return totalblock;
      // 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: rgb(245, 245, 245);
  background: #fff;
  color: #909399;
  font-size: 14px;
}