DataFront/components/data/DataTimesTop.vue

<script setup lang="ts">

const props = defineProps({
  fromWeb:String,
  limit:Number,
  hours:Number
})
interface TopHots{
  id:number,
  times:number,
  word:string,
  lastTime: string,
  fromWeb: {
    id: number,
    name: string,
    fromUrl: string,
    searchUrl: string
  }
}

const rawData = reactive<TopHots[]>([])
const loading = ref(true)

$fetch(`https://data.zziyu.cn/hot/top/${props.fromWeb}?limit=${props.limit}&hours=${props.hours}`)
    .then((dataRaw)=>{
      let data = dataRaw  as unknown as TopHots[]
      data.forEach(d=>{
        let newD= d;
        let aDate = new Date(Date.parse(d.lastTime))
        newD.lastTime=aDate.toLocaleString()
        rawData.push(newD)
      })
      loading.value = false
    })


const router = useRouter()
const gotoWeb = (row, column, cell, event)=>{
  // console.log(row.fromWeb.searchUrl+row.word)
  window.open(row.fromWeb.searchUrl+row.word,"_blank")
}
</script>

<template>
      <client-only>
        <el-table v-loading="loading" :data="rawData" style="min-height: 200px;width: 90%;max-width: 600px;margin: 10px;margin-bottom: 15px" :table-layout="'fixed'" @cell-click="" @cell-dblclick="gotoWeb">
          <el-table-column prop="word" :label="`${props.fromWeb} 持久热搜 ${props.hours}小时 Top${props.limit}`" width="180" />
          <el-table-column prop="lastTime" label="最后上榜" width="180" />
          <el-table-column prop="times" label="上榜次数" />
        </el-table>
      </client-only>
</template>

<style scoped>

</style>