数据统计详细页初步

components/data/DataNewHot.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+const props = defineProps({
+  fromWeb:String,
+  limit:Number
+})
+interface NewHot{
+  id: number,
+  word:string
+}
+const nowHotLoading = ref(true)
+const tableData = reactive<NewHot[]>([])
+$fetch(`https://data.zziyu.cn/hot/new/${props.fromWeb}?limit=${props.limit}`).then(dataRaw=>{
+  let data=dataRaw as unknown as NewHot[]
+  data.map(d=>tableData.push(d))
+  nowHotLoading.value=false
+})
+
+
+</script>
+
+<template>
+    <el-table v-loading="nowHotLoading" :data="tableData" stripe style="width: 300px;">
+      <el-table-column prop="word" :label="`实时 ${props.fromWeb} 热搜 Top${props.limit}`" width="300px" />
+<!--      <el-table-column prop="name" label="Name" width="180" />-->
+<!--      <el-table-column prop="address" label="Address" />-->
+    </el-table>
+</template>
+
+<style scoped>
+
+</style>

components/data/DataTimesTop.vue

@@ -44,7 +44,7 @@ const gotoWeb = (row, column, cell, event)=>{
 <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+' 持久热搜'" width="180" />
+          <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>

pages/data/[WebName].vue

@@ -7,9 +7,14 @@ let {api} = await $fetch('/api/data/all')
 
 <template>
   <Title>热搜 {{route.params.WebName}} </Title>
-这是 {{route.params.WebName}} 数据展示
+  <div style="display: flex;align-content: center;justify-content: center;flex-direction: column;flex-wrap: wrap;flex-direction: row">
+    <DataNewHot :from-web="route.params.WebName as string" :limit="25" />
+    <DataTimesTop :fromWeb="route.params.WebName as string" :limit="50" :hours="1" />
+  </div>
 </template>
 
 <style scoped>
-
+  div *{
+    margin-right: 15px;
+  }
 </style>

pages/data/all.vue

@@ -12,7 +12,7 @@ $fetch("https://data.zziyu.cn/hot/webs").then((rawData)=>{
 
 <template>
   <Title>数据收集</Title>
-  <div v-loading="loading" style="min-height: 100px;display: flex;align-items: center;justify-content: center;flex-direction: column">
+  <div v-loading="loading" style="min-height: 100px;display: flex;align-items: center;justify-content: center;flex-direction: row;flex-wrap: wrap">
     <DataTimesTop v-for="(item,index) in getWebArr" :fromWeb="item" :limit="10" :hours="1" :key="index"></DataTimesTop>
   </div>
 </template>