loulijun2021
2023-02-14 b46bc2dba51a3885a68e4c58316b41a31ea16bb2
src/components/Test/index.vue
@@ -6,9 +6,11 @@
    <div
      slot="reference"
      class="plan"
      :style="{'margin-top':0.1*cellHeight+'px',}"
      :style="{'marginTop':0.1*cellHeight+'px'}"
      @click="onClick"
    >
      <!--      ,background: backgroundPercent-->
      <!-- <div class="runTime">
        <span>S:{{startToString}}</span>
        <span>E:{{endToString}}</span>
@@ -78,6 +80,7 @@
<script>
import dayjs from 'dayjs'
import { handleDatetime2 } from '@/utils/global'
const NOW_PLAN = '#D5F8EA'
const FUTHER_PLAN = '#BFF2FE'
@@ -99,28 +102,45 @@
  data() {
    return {
      dayjs: dayjs
    }
  },
  computed: {
    statusColor() {
      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'){
      //   return H_SCHEDULE
      // }else if(item.type == 'schedule'){
      //   return SCHEDULEING
    backgroundPercent() {
      // console.log(JSON.stringify(this.item), 9)
      // this.item.forEach(item => {
      //
      // })
      // `linear-gradient(to right,rgba(5, 185, 100, 0.1) 0%,rgba(5, 185, 100, 0.1) 4.99%,rgba(167, 167, 167, 0.3) 5%,rgba(167, 167, 167, 0.3) `+ percentCenter +`%,rgba(5, 185, 100, 0.1)  `+(percentCenter+0.01)+`%,rgba(5, 185, 100, 0.1) 100%)`}
      // const molecule = (new Date(handleDatetime2(new Date())).getTime() - new Date(this.item.start).getTime()) / 1000 // 分子
      // const denominator = (new Date(this.item.end).getTime() - new Date(this.item.start).getTime()) / 1000 // 分母
      // let percentCenter = ((molecule * 1 / denominator * 1) * 100).toFixed(2) * 1
      // if (percentCenter < 0) {
      //   percentCenter = 0
      // }
      // if (start.isBefore(currentTime) && end.isAfter(currentTime)) {
      //   return NOW_PLAN; // NOW
      // } else if (end.isBefore(currentTime)) {
      //   return PAST_PLAN; // PAST
      // } else {
      //   return FUTHER_PLAN; // Future
      // }
      // return percentCenter
      return `linear-gradient(to right,rgba(167, 167, 167, 0.3) 0%,rgba(167, 167, 167, 0.3) 50%,rgba(5, 185, 100, 0.1)  51%,rgba(5, 185, 100, 0.1) 100%)`
    },
    // statusColor() {
    // 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'){
    //   return H_SCHEDULE
    // }else if(item.type == 'schedule'){
    //   return SCHEDULEING
    // }
    // if (start.isBefore(currentTime) && end.isAfter(currentTime)) {
    //   return NOW_PLAN; // NOW
    // } else if (end.isBefore(currentTime)) {
    //   return PAST_PLAN; // PAST
    // } else {
    //   return FUTHER_PLAN; // Future
    // }
    // },
    startToString() {
      return dayjs(this.item.start).format('HH:mm')
    },
@@ -128,6 +148,7 @@
      return dayjs(this.item.end).format('HH:mm')
    }
  },
  methods: {
    onClick() {
      this.updateTimeLines(this.item.start, this.item.end)
@@ -143,7 +164,10 @@
  position: relative;
  z-index: 0;
  // background:rgba(171, 245, 240 , 0.6);
  background: rgba(5, 185, 100, 0.1);
  //background: linear-gradient(to right, rgba(167, 167, 167, 0.3) 0%,rgba(167, 167, 167, 0.3) 20%,rgba(5, 185, 100, 0.1) 21%,rgba(5, 185, 100, 0.1) 100%);
  text-align: center;
  border-radius: 5px;