1.根据N+X轻量化验收标准 重新更改菜单模块

loulijun2021

2023-04-20 472357e95f678368e3521d85cdceed6402394b8e

 src/lib/v-gantt-chart/lib/components/time-line/index.vue

@@ -1,20 +1,38 @@
<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,ind) in getTimeScales(day)"
          :key="ind"
          :style="cellWidthStyle"


        >
<!--          style="border-right: 1px solid #eee;"-->
          {{ hour }}
          <!-- <span v-if="hour !='01' ">{{hour}}</span> -->
        </div>
      </div>
@@ -23,19 +41,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 +79,38 @@
     * @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`
      };
        width: `${this.cellWidth}px`,

        // width: `${this.cellWidth/2}px`,


        // marginLeft:`${this.cellWidth/2}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 +120,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 +136,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;
.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;
}