adAdmin/src/views/AdvertisingSpaceDatePage.vue

<!-- 推广位甘特图 -->
<template>
  <el-form :inline="true">
    <el-form-item label="时间">
      <el-date-picker
        v-model="from.datas"
        type="daterange"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
        range-separator="-"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
      />
    </el-form-item>
    <el-form-item label="站点">
      <el-select
        filterable
        clearable
        v-model="from.mediaId"
        placeholder="站点"
        style="width: 200px"
      >
        <el-option
          v-for="item in SiteList"
          :key="item.mediaId"
          :label="item.mediaName"
          :value="item.mediaId"
        />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="getDataList" :loading="loading">搜索</el-button>
    </el-form-item>
  </el-form>
  <el-empty v-show="!dataList || !dataList.length" description="暂无数据" />
  <div class="row" v-show="dataList && dataList.length">
    <div class="col">广告位</div>
    <div
      class="col"
      :style="'width: calc((100% - 100px)/' + dayCha + ')'"
      v-for="v in tableHeader"
      :key="v"
      v-text="v"
    ></div>
  </div>
  <div class="row" v-show="dataList && dataList.length" v-for="item in dataList" :key="item.name">
    <div class="col" style="" v-text="item.name"></div>
    <div
      class="col"
      :style="
        'width: calc((100% - 100px)/' +
        dayCha +
        ');background-color: ' +
        (v ? '#409eff' : '#ffffff00')
      "
      v-for="v in item.datesList"
      :key="v"
    >
      <el-tooltip v-if="v" effect="dark" :content="v" placement="top-start">
        <div style="width: 100%; height: 100%"></div>
      </el-tooltip>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { AsSpaceItem, CreativesList, AsSpaceList } from '@/types/AsSpace'
import type { Pages } from '@/types/Tool'
import type { SiteList } from '@/types/Site'
import { getAsSpaceList, getSiteList } from '@/api/index'
import { formatDateSite } from '@/tool/index'

const SiteList = ref<SiteList>([])
getSiteList().then((res) => {
  SiteList.value.push(...res.data)
})

const time = new Date().getTime()
const loading = ref(false)
const from = ref<Pages>({
  pageNum: 1,
  pageSize: 999999,
  datas: [formatDateSite(time - 30 * 86400000, 'Y-M-D'), formatDateSite(time, 'Y-M-D')],
})
const dataList = ref<AsSpaceList[]>()
const firstDay = ref<Date>()

const changeDate = (date: string[][]): string[] => {
  if (!firstDay.value) return []
  const list: string[] = new Array(dayCha.value)
  const e = dayCha.value || 0
  for (let i = 0; i < e; i++) {
    const li: string[] = []
    const D = firstDay.value.getTime() + 86400000 * i
    for (let p = 0; p < date.length; p++) {
      const v = date[p]
      const s = new Date(v[0] + ' 00:00:00').getTime()
      const e = new Date(v[1] + ' 23:59:59').getTime()
      if (D >= s && D <= e) {
        li.push(v[2])
      }
    }
    list[i] = li.join('、')
  }
  return list
}

const getDataList = () => {
  const t = setTimeout(() => {
    clearTimeout(t)
    loading.value = true
  }, 500)
  if (!from.value.datas || !from.value.datas.length) return
  getAsSpaceList({
    pageNum: 1,
    pageSize: 999999,
    keyword: null,
    status: 10,
    mediaId: from.value.mediaId,
    startDate: from.value.datas[0],
    endDate: from.value.datas[1],
  })
    .then(({ data: { records } }) => {
      if (!from.value.datas || !from.value.datas.length) return
      firstDay.value = new Date(from.value.datas[0] + ' 00:00:00')
      dayCha.value = DateDifference(from.value.datas[0], from.value.datas[1])
      dataList.value = records.map((item: AsSpaceItem) => {
        const dates = item.creativesList.map((v: CreativesList) => {
          return [v.startDate, v.endDate, v.creativeName]
        })
        const datesList: string[] = changeDate(dates)
        return {
          name: item.slotName,
          dates,
          datesList,
        }
      })
      renderTableHeader()
      clearTimeout(t)
      loading.value = false
    })
    .catch(() => {
      clearTimeout(t)
      loading.value = false
    })
}

const DateDifference = (start: string, end: string) => {
  console.log(start, end)
  const startDate = new Date(start + ' 00:00:00')
  const endDate = new Date(end + ' 00:00:00')
  return Math.ceil((endDate.getTime() - startDate.getTime()) / 86400000) + 1
}

const dayCha = ref<number>()
if (from.value.datas && from.value.datas.length)
  dayCha.value = DateDifference(from.value.datas[0], from.value.datas[1])
const tableHeader = ref<string[]>([])
const renderTableHeader = () => {
  if (!firstDay.value) return
  const TH: string[] = []
  const e = dayCha.value || 0
  for (let i = 0; i < e; i++) {
    const date = new Date(firstDay.value.getTime() + 86400000 * i)
    TH.push(date.getDate().toString())
  }
  tableHeader.value = TH
}

getDataList()
</script>

<style scoped>
.row {
  /* 禁止换行 */
  white-space: nowrap;
  border: 1px solid var(--el-border-color);
  border-right: none;
  font-size: 0;
}
.row:not(:last-child) {
  border-bottom: none;
}
.col {
  display: inline-block;
  height: 1.7em;
  line-height: 1.7em;
  overflow: hidden;
  border-right: 1px solid var(--el-border-color);
  font-size: 14px;
  width: 100px;
  text-align: center;
}
</style>