JavaScript利用el-table实现绘制热度表

<div class="gray w-full h-100 mt-4 table" v-if="props.brandId">
          <el-table :data="brandHotList" :header-cell-style="{
            'font-weight': 'nORMal',
            'background-color': '#f7f8f9',
          }" :cell-style="{ padding: '5px 0' }" :row-style="{ height: 30 }" fit class="shoWorder">
            <el-table-column align="center" label="排名" width="55">
              <template #default="scope">
                <span class="index">{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" label="热门车系">
              <template #default="scope">
              <el-tooltip effect="dark" :content="scope.row.name || '--'" placement="top">
                <div class="lastName">{{ scope.row.name || '--'}}</div>
              </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column align="center" label="热度" min-width="200">
              <template #default="scope">
                <div class="lastDiv" :style="
                  scope.row.total >= 0
                    ? 'text-align:left'
                    : 'text-align:center'
                " style="white-space: nowrap">
                  <span v-if="scope.row.total > 0" :style="`width:${(scope.row.total / brandHotList[0].total) * 83 + 0.5
                  }%;background:#ff454e`" class="length"></span>
                  <span class="count">{{ scope.row.total }}</span>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>

<style>
.gray {
  background-color: #f7f8f9;
  border-radius: 8px;
}
.table {
  width: 100%;
  overflow: hidden;
  padding: 0 20px;
  .el-table {
    width: 100%;
    border: none;
    background-color: #f7f8f9;
    margin: 0;
    padding: 0;
    overflow: hidden;

    :deep(.el-table__empty-block) {
      background-color: #f7f8f9;
      margin-top: 105px;
    }

    :deep(.el-table__body) {
      td {
        border-bottom: none;
        font-size: 14px;
      }
    }

    ::before {
      height: 0;
    }
  }
  :deep(.index){
      font-family: DIN, DIN-Bold;
      font-weight: 700;
       color: #333333;
    }
  .length {
    display: inline-block;
    width: 80%;
    height: 12px;
    margin-right: 14px;
  }

  .lastDiv {
    display: block !important;
  }

  .count {
    white-space: nowrap;
    line-height: 12px;
  }

  .hot {
    display: flex;
    align-items: center;

    .num {
      margin-left: 5px;
      text-align: center;
    }
  }

  :deep(.groupName) {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -WEBkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  :deep(.el-table__header-wrapper) {
    margin-bottom: 12px;
    background-color: #f7f8f9;
  }

  :deep(th .cell) {
    font-size: 14px;
    font-weight: 400;
    color: #333;
  }

  :deep(.el-table th) {
    background-color: #f7f8f9 !important;
  }

  :deep(.el-table__row) {
    background-color: #f7f8f9;
  }
}
</style>

<template>
  <div class="hotelApply wl-gantt">
    <el-card>
      <el-table :data="tableData" border style="width: 100%" :class="dateTypeClass" row-key="id"
        :span-method="spanMethod" @cell-click="cellClick" :cell-style="cellStyle">
        <el-table-column prop="room" label="房间" align="center" width="140px" fixed="left" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="bedName" label="床位" align="center" width="120px" fixed="left"
          :show-overflow-tooltip="true">
        </el-table-column>
        <!-- mouth and day gantt -->
        <template v-if="self_date_type === 'monthAndDay'">
          <el-table-column :resizable="false" v-for="month in ganttTitleDate" :label="month.full_date" :key="month.id"
            align="center">
            <el-table-column class-name="wl-gantt-item" v-for="(day, dindex) in month.children" :resizable="false"
              :key="dindex" :label="day.name" width="60" align="center">
              <template v-slot="scope">
                <div :class="dayGanttType(scope.row, day.full_date)" @click="handleDay(scope.row)"></div>
                <div :class="realDayGanttType(scope.row, day.full_date)"></div>
                <!-- <div :class="selectedCell(scope.row)"></div> -->
              </template>
            </el-table-column>
          </el-table-column>
        </template>
      </el-table>
    </el-card>
    <!-- 右边抽屉 -->
    <el-drawer title="住房信息" :visible.sync="showDrawer" size='40%'>
      <div class="drawer_box">
        <el-form :model="drawerForm" :inline="true" label-width="100px">
          <el-form-item label="入住时间">
            <el-date-picker v-model="drawerForm.beginTime" type="date" placeholder="选择日期" value-format='yyyy-MM-dd'
              disabled>
            </el-date-picker>
          </el-form-item>
          <el-form-item label="退住时间">
            <el-date-picker v-model="drawerForm.endTime" type="date" placeholder="选择日期" value-format='yyyy-MM-dd'>
            </el-date-picker>
          </el-form-item>
        </el-form>
        <div style="text-align:center">
          <el-button type="primary" size="mini" @click="drawerConfirm"> 确定</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import dayjs from "dayjs" // 导入日期js
const uuidv4 = require("uuid/v4") // 导入uuid生成插件
import isBetween from "dayjs/plugin/isBetween"
import quarterOfYear from "dayjs/plugin/quarterOfYear"
dayjs.extend(quarterOfYear) //获取季度依赖
dayjs.extend(isBetween)
export default {
  name: "",
  data() {
    return {
      tableData: [
        {
          id: 1,
          room: "公寓101",
          bedName: "1号床",
          beginTime: "2021-08-03",
          endTime: "2021-08-4",
          liveList: [
            { beginTime: "2021-08-03", endTime: "2021-08-4" },
            { beginTime: "2021-08-06", endTime: "2021-08-8" },
          ],
        },
        {
          id: 2,
          room: "公寓101",
          bedName: "2号床",
          beginTime: "2021-08-04 00:00:00",
          endTime: "2021-08-5 00:00:00",
          liveList: [],
        },
        {
          id: 3,
          room: "公寓102",
          bedName: "1号床",
          beginTime: "2021-08-05 00:00:00",
          endTime: "2021-08-7 00:00:00",
          liveList: [],
        },
        {
          id: 4,
          room: "公寓102",
          bedName: "2号床",
          beginTime: "2021-08-01 00:00:00",
          endTime: "2021-08-3 00:00:00",
          liveList: [],
        },
        {
          id: 5,
          room: "公寓103",
          bedName: "1号床",
          beginTime: "2021-08-06 00:00:00",
          endTime: "2021-08-8 00:00:00",
          liveList: [],
        },
        {
          id: 6,
          room: "公寓103",
          bedName: "2号床",
          beginTime: "2021-08-7 00:00:00",
          endTime: "2021-08-9 00:00:00",
          liveList: [],
        },
      ],
      showDrawer: false, //抽屉
      drawerForm: {},
      // 甘特图
      self_start_date: "2021-08-01", // 项目开始时间
      self_end_date: "2021-09-30", // 项目结束时间
      self_start_date_day: "", //项目开始时间的日期
      self_start_date_month: "", //项目开始时间的月份
      self_start_date_year: "", //项目开始时间的年份
      self_date_type: "monthAndDay", // 自身日期类型
    }
  },
  created() {},
  mounted() {
    this.initTime() //初始化时间1
  },
  computed: {
    // 甘特图标题日期分配
    ganttTitleDate() {
      // 分解开始和结束日期
      let start_date_spilt = dayjs(this.self_start_date)
        .format("YYYY-M-D")
        .split("-")
      let end_date_spilt = dayjs(this.self_end_date)
        .format("YYYY-M-D")
        .split("-")
      let start_year = Number(start_date_spilt[0])
      let start_mouth = Number(start_date_spilt[1])
      let end_year = Number(end_date_spilt[0])
      let end_mouth = Number(end_date_spilt[1])
      console.log("日期类型", this.self_date_type)
      if (this.self_date_type === "monthAndDay") {
        return this.mouthAndDayTitleDate(
          start_year,
          start_mouth,
          end_year,
          end_mouth
        )
      }
    },
    // 树表配置项
    selfProps() {
      return {
        hasChildren: "hasChildren", // 字段来指定哪些行是包含子节点
        children: "children", // children字段来表示有子节点
        name: "name", // 任务名称字段
        id: "id", // id字段
        pid: "pid", // pid字段
        startDate: "beginTime", // 开始时间字段
        endDate: "endTime", // 结束时间字段
        realStartDate: "recordBeginTime", // 实际开始时间字段
        realEndDate: "recordEndTime", // 实际结束时间字段
        identityId: "identityId",
        parents: "parents",
        pre: "pre", // 前置任务字段【注意：如果使用recordParents，则pre值应是目标对象的identityId字段(可配置)】
        // ...this.props
      }
    },
    // 根据日期类型改样式
    dateTypeClass() {
      if (this.self_date_type === "monthAndDay") {
        return "month-and-day"
      }
      return ""
    },
  },
  components: {},
  methods: {
    // =====================表格事件==================
    // 单元格点击
    cellClick(row, column, cell, event) {
      // console.log(row, column, cell, event);
    },
    // 单元格样式
    cellStyle({ row, column, rowIndex, columnIndex }) {},
    // 预定者点击
    handleDay(row) {
      console.log(row)
      this.showDrawer = true
      this.drawerForm = Object.assign({}, row)
    },
    // 模态框确定
    drawerConfirm() {
      this.tableData.forEach((item) => {
        if (item.id == this.drawerForm.id) {
          this.$set(item, "beginTime", this.drawerForm.beginTime)
          this.$set(item, "endTime", this.drawerForm.endTime)
        }
      })
      this.showDrawer = false
    },
    // =====================甘特区域==================
    //维度展示形式
    changedateType(val) {
      console.log(val)
      this.getDataList()
    },
    reload() {
      this.isRouterAlive = false
      this.$nextTick(() => (this.isRouterAlive = true))
    },
    // 初始化时间
    initTime() {
      this.self_start_date_year = this.self_start_date.split("-")[0]
      this.self_start_date_month = this.self_start_date.split("-")[1]
      this.self_start_date_day = this.self_start_date.split("-")[2]
      this.self_start_date_day =
        this.self_start_date_day > 2
          ? this.self_start_date_day - 1
          : this.self_start_date_day
      console.log("开始-结束", this.self_start_date, this.self_end_date)
    },
    // 设置dateType
    setDataType(type) {
      this.self_date_type = type
    },
    
    dayGanttType(row, date, unit = "days") {
      // let start_date = row[this.selfProps.startDate]
      // let end_date = row[this.selfProps.endDate]
      let start_date = row[this.selfProps.startDate]
      let end_date = row[this.selfProps.endDate]
      // 若没有时间则不显示
      if (!start_date || !end_date) {
        return
      }
      let between = dayjs(date).isBetween(start_date, end_date, unit)
      if (between) {
        return "wl-item-on"
      }
      let start = dayjs(start_date).isSame(date, unit)
      let end = dayjs(end_date).isSame(date, unit)
      if (start && end) {
        return "wl-item-on wl-item-full"
      }
      if (start) {
        return "wl-item-on wl-item-start"
      }
      if (end) {
        return "wl-item-on wl-item-end"
      }
    },
    
    realDayGanttType(row, date, unit = "days") {
      let start_date = row[this.selfProps.realStartDate]
      let end_date = row[this.selfProps.realEndDate]
      // 若没有实际时间则不显示
      if (!start_date || !end_date) {
        return
      }
      let between = dayjs(date).isBetween(start_date, end_date, unit)
      if (between) {
        return "wl-real-on"
      }
      let start = dayjs(start_date).isSame(date, unit)
      let end = dayjs(end_date).isSame(date, unit)
      if (start && end) {
        return "wl-real-on wl-real-full"
      }
      if (start) {
        return "wl-real-on wl-real-start"
      }
      if (end) {
        return "wl-real-on wl-real-end"
      }
    },
    // 点击选中单元格
    selectedCell(row) {},
    // 以下是表格-日期-gantt生成函数----------------------------------------生成gantt表格-------------------------------------
    
    mouthAndDayTitleDate(start_year, start_mouth, end_year, end_mouth) {
      // 处理年份
      let year_diff = end_year - start_year
      // 只存在同年或前后年的情况
      if (year_diff === 0) {
        // 年间隔为同一年
        let isLeap = this.isLeap(start_year) // 是否闰年
        let mouths = this.generationMonths(
          start_year,
          start_mouth,
          end_mouth + 1,
          isLeap
        ) // 处理月份
        return mouths
      }
      // 处理开始月份
      let startIsLeap = this.isLeap(start_year)
      let start_mouths = this.generationMonths(
        start_year,
        start_mouth,
        13,
        startIsLeap
      )
      // 处理结束月份
      let endIsLeap = this.isLeap(end_year)
      let end_mouths = this.generationMonths(
        end_year,
        1,
        end_mouth + 1,
        endIsLeap
      )
      return start_mouths.concat(end_mouths)
    },
    
    generationMonths(
      year,
      start_num = 1,
      end_num = 13,
      isLeap = false,
      insert_days = true,
      week = false
    ) {
      let months = []
      if (insert_days) {
        // 需 日 的模式
        for (let i = start_num; i < end_num; i++) {
          // 需要 日 的模式
          let days = this.generationDays(year, i, isLeap, week)
          months.push({
            name: `${i}月`,
            date: i,
            full_date: `${year}-${i}`,
            children: days,
            id: uuidv4(),
          })
        }
        return months
      }
      for (let i = start_num; i < end_num; i++) {
        // 无需要 日 的模式
        months.push({
          name: `${i}月`,
          date: i,
          full_date: `${year}-${i}`,
          id: uuidv4(),
        })
      }
      return months
    },
    
    generationDays(year, month, isLeap = false, week = false) {
      let big_month = [1, 3, 5, 7, 8, 10, 12].includes(month)
      let small_month = [4, 6, 9, 11].includes(month)
      let dates_num = big_month ? 32 : small_month ? 31 : isLeap ? 30 : 29
      let days = []
      if (week) {
        let _day = 1 // 从周日开始
        let _start_day_inweek = this.timeInWeek(`${year}-${month}-1`)
        if (_start_day_inweek !== 0) {
          _day = 8 - _start_day_inweek
        }
        for (let i = _day; i < dates_num; i += 7) {
          days.push({
            date: i,
            name: `${i}日`,
            id: uuidv4(),
            full_date: `${year}-${month}-${i}`,
          })
        }
      } else {
        //第一个月
        if (
          year == this.self_start_date_year &&
          month == this.self_start_date_month
        ) {
          for (let i = this.self_start_date_day; i < dates_num; i++) {
            days.push({
              date: i,
              name: `${i}日`,
              id: uuidv4(),
              full_date: `${year}-${month}-${i}`,
            })
          }
          //非第一个月
        } else {
          for (let i = 1; i < dates_num; i++) {
            days.push({
              date: i,
              name: `${i}日`,
              id: uuidv4(),
              full_date: `${year}-${month}-${i}`,
            })
          }
        }
      }
      return days
    },
    
    isLeap(year) {
      return year % 4 == 0 && (year % 100 != 0 || year % 400 == 0)
    },
    // 以下是时间计算类函数 ------------------------------------------------------时间计算---------------------------------------
    
    timeFormat(date, format = "YYYY-MM-DD") {
      return date ? dayjs(date).format(format) : this.emptyCellText
    },
    
    timeInWeek(date) {
      return dayjs(date).day()
    },
    // 合并单元格
    spanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const key = "room"

        const list = this.tableData

        let len = list.filter((item) => row[key] === item[key]).length

        let firstIndex = -1
        for (let i = 0; i < this.tableData.length; i++) {
          const element = this.tableData[i]
          if (columnIndex === 0 && row[key] === element[key]) {
            firstIndex = i
            break
          }
        }
        if (rowIndex == firstIndex) {
          return {
            rowspan: len,
            colspan: 1,
          }
        }
        if (rowIndex > firstIndex && rowIndex < firstIndex + len) {
          return {
            rowspan: 0,
            colspan: 0,
          }
        }
      }
    },
  },
  watch: {},
}
</script>

<style lang="sCSS">
.hotelApply {
  padding-top: 10px;
  .legend-plan,
  .legend-real {
    display: inline-block;
    width: 40px;
    height: 6px;
    border-radius: 3px;
    background: #00cbed;
  }
  .legend-real {
    background: #fcc300;
  }
  .selected-cell {
    border: 1px solid #00cbed;
  }
  .drawer_box {
    padding: 20px;
  }
}
</style>
<style lang="scss">
.el-table >>> th.gutter {
  display: table-cell !important;
}

.el-table >>> colgroup.gutter {
  display: table-cell !important;
}
// 鼠标悬浮去除阴影
.el-table tbody tr:hover > td {
  background-color: #fff !important;
}
</style>
<style lang="scss">
$gantt_item: 18px;
$gantt_item_half: 4px;

.wl-gantt {
  .wl-gantt-header > th {
    text-align: center;
  }

  .h-full {
    height: 100%;
  }

  .wl-gantt-item {
    position: relative;
    transition: all 0.3s;
    > .cell {
      padding: 0;
    }
  }

  .u-full.el-input {
    width: 100%;
  }

  // 计划时间gantt开始
  .wl-item-on {
    position: absolute;
    top: 40%;
    left: 0;
    right: -1px;
    margin-top: -$gantt_item_half;
    height: $gantt_item;
    background: #00cbed;
    transition: all 0.4s;
    cursor: pointer;
  }

  .wl-item-start {
    left: 10%;
    &:after {
      position: absolute;
      top: 0;
      left: -5px;
      z-index: 1;
      content: "";
      width: 8px;
      height: 18px;
      border-radius: 50%;
      background: #00cbed;
    }
  }

  .wl-item-end {
    right: 10%;
    &:after {
      position: absolute;
      top: 0;
      right: -5px;
      z-index: 1;
      content: "";
      width: 8px;
      height: 18px;
      border-radius: 50%;
      background: #00cbed;
    }
  }

  .wl-item-full {
    left: 5px;
    right: 5px;
    &:before {
      position: absolute;
      top: 0;
      left: -5px;
      z-index: 1;
      content: "";
      width: 8px;
      height: 18px;
      border-radius: 50%;
      background: #00cbed;
    }
    &:after {
      position: absolute;
      top: 0;
      right: -5px;
      z-index: 1;
      content: "";
      width: 8px;
      height: 18px;
      border-radius: 50%;
      background: #00cbed;
    }
  }
  // 计划时间gantt结束

  // 实际时间gantt开始
  .wl-real-on {
    position: absolute;
    top: 75%;
    left: 0;
    right: -1px;
    margin-top: -$gantt_item_half;
    height: $gantt_item;
    background: #fcc300; //rgba(250, 167, 146, .6);
    transition: all 0.4s;
  }
  .wl-real-start {
    left: 50%;
    &:after {
      position: absolute;
      top: 0;
      left: -5px;
      z-index: 1;
      content: "";
      width: 8px;
      height: 18px;
      border-radius: 50%;
      background: #fcc300;
    }
  }

  .wl-real-end {
    right: 50%;
    &:after {
      position: absolute;
      top: 0;
      right: -5px;
      z-index: 1;
      content: "";
      width: 8px;
      height: 18px;
      border-radius: 50%;
      background: #fcc300;
    }
  }

  .wl-real-full {
    left: 5px;
    right: 5px;
    &:before {
      position: absolute;
      top: 0;
      left: -5px;
      z-index: 1;
      content: "";
      width: 8px;
      height: 18px;
      border-radius: 50%;
      background: #fcc300;
    }
    &:after {
      position: absolute;
      top: 0;
      right: -5px;
      z-index: 1;
      content: "";
      width: 8px;
      height: 18px;
      border-radius: 50%;
      background: #fcc300;
    }
  }
  // 实际时间gantt结束

  // 名称列
  .name-col {
    position: relative;
    &:hover .name-col-edit {
      display: inline-block;
    }

    .name-col-edit {
      display: none;
      position: absolute;
      right: 0;
    }

    .name-col-icon {
      padding: 6px 3px;
      cursor: pointer;
      font-size: 16px;
    }

    .task-remove {
      color: #f56c6c;
    }
    .task-add {
      color: #409eff;
    }
  }
}
//季度展示、月度展示、周展示
.year-and-quarter,
.year-and-month,
.year-and-week {
  .wl-item-start {
    left: 5%;
  }
  .wl-item-end {
    right: 5%;
  }
  .wl-item-full {
    left: 5%;
    right: 10%;
  }
  .wl-real-full {
    left: 10%;
    right: 5%;
  }
}
</style>