fix: 修复站点数据展示

src/components/cards/SiteCard.vue

@@ -168,7 +168,7 @@ onMounted(() => {
           <span @click.stop="openSitePage">{{ cardProps.site?.url }}</span>
         </VCardSubtitle>
       </VCardItem>
-      <VCardText class="py-2" style="block-size: 36px">
+      <VCardText class="py-1">
         <VTooltip v-if="cardProps.site?.limit_interval" text="流控">
           <template #activator="{ props }">
             <VIcon color="primary" class="me-2" v-bind="props" icon="mdi-speedometer" />

src/components/dialog/SiteUserDataDialog.vue

@@ -5,7 +5,6 @@ import { useDisplay, useTheme } from 'vuetify'
 import { VAvatar, VCardText, VIcon } from 'vuetify/lib/components/index.mjs'
 import { formatFileSize } from '@/@core/utils/formatters'
 import VueApexCharts from 'vue3-apexcharts'
-import { hexToRgb } from '@/@layouts/utils'
 
 // 显示器宽度
 const display = useDisplay()
@@ -24,10 +23,6 @@ const currentTheme = controlledComputed(
   () => vuetifyTheme.name.value,
   () => vuetifyTheme.current.value.colors,
 )
-const variableTheme = controlledComputed(
-  () => vuetifyTheme.name.value,
-  () => vuetifyTheme.current.value.variables,
-)
 
 // 站点数据列表
 const siteDatas = ref<SiteUserData[]>([])
@@ -36,7 +31,7 @@ const siteDatas = ref<SiteUserData[]>([])
 const siteData = computed(() => siteDatas.value[0])
 
 // 站点数据列表中的上传量、下载量数据生成图形使用的数据
-const series = computed(() => {
+const historySeries = computed(() => {
   return [
     {
       name: '上传量',
@@ -50,98 +45,153 @@ const series = computed(() => {
 })
 
 // 图形选项
-const chartOptions = controlledComputed(
-  () => vuetifyTheme.name.value,
-  () => {
-    return {
-      chart: {
-        parentHeightOffset: 0,
-        toolbar: { show: false },
-        animations: { enabled: true },
-        dataLabels: {
-          enabled: true,
-        },
-      },
-      tooltip: {
+const historyChartOptions = computed(() => {
+  return {
+    chart: {
+      type: 'area',
+      parentHeightOffset: 0,
+      toolbar: { show: false },
+      animations: { enabled: true },
+      dataLabels: {
         enabled: true,
-        tooltip: {
-          x: {
-            format: 'dd/MM/yy HH:mm',
-          },
+      },
+      zoom: {
+        autoScaleYaxis: true,
+      },
+    },
+    tooltip: {
+      enabled: true,
+      tooltip: {
+        x: {
+          format: 'dd MMM yyyy',
         },
       },
-      grid: {
-        borderColor: `rgba(${hexToRgb(String(variableTheme.value['border-color']))},${
-          variableTheme.value['border-opacity']
-        })`,
-        strokeDashArray: 6,
-        xaxis: {
-          lines: { show: true },
-        },
-        yaxis: {
-          title: {
-            text: 'GB',
-          },
-          lines: { show: true },
-        },
-        padding: {
-          top: -10,
-          left: -7,
-          right: 5,
-          bottom: 5,
-        },
-      },
-      stroke: {
-        width: 3,
-        lineCap: 'butt',
-        curve: 'smooth',
-      },
-      colors: [currentTheme.value.success, currentTheme.value.warning],
-      markers: {
-        size: 6,
-        offsetY: 4,
-        offsetX: -2,
-        strokeWidth: 3,
-        colors: ['transparent'],
-        strokeColors: 'transparent',
-        discrete: [
-          {
-            size: 5.5,
-            seriesIndex: 0,
-            strokeColor: currentTheme.value.primary,
-            fillColor: currentTheme.value.surface,
-          },
-        ],
-        hover: { size: 7 },
-      },
+    },
+    grid: {
       xaxis: {
-        type: 'datetime',
-        categories: siteDatas.value.map(item => `${item.updated_day}T${item.updated_time}.000Z`),
-        labels: {
-          show: true,
-        },
+        lines: { show: false },
       },
       yaxis: {
         title: {
           text: 'GB',
         },
-        labels: {
-          formatter: function (val: number) {
-            return val.toLocaleString()
-          },
+        lines: { show: true },
+      },
+    },
+    stroke: {
+      width: 3,
+      lineCap: 'butt',
+      curve: 'smooth',
+    },
+    colors: [currentTheme.value.success, currentTheme.value.warning],
+    markers: {
+      size: 0,
+      style: 'hollow',
+    },
+    xaxis: {
+      type: 'category',
+      categories: siteDatas.value.map(item => item.updated_day),
+      labels: {
+        show: true,
+        formatter: function (val: string) {
+          return new Date(val).toLocaleDateString('zh-CN')
         },
       },
-    }
-  },
-)
+    },
+    yaxis: {
+      title: {
+        text: 'GB',
+      },
+      labels: {
+        formatter: function (val: number) {
+          return val.toLocaleString()
+        },
+      },
+    },
+    fill: {
+      type: 'gradient',
+      gradient: {
+        shadeIntensity: 1,
+        opacityFrom: 0.5,
+        opacityTo: 0.7,
+        stops: [0, 100],
+      },
+    },
+  }
+})
+
+// 做种分布列，seeding_info的格式为[[x, y], [x, y], ...]，x为做种数，y为做种体积，做种体积需要转换为GB
+const seedingSeries = computed(() => {
+  return [
+    {
+      name: '体积',
+      data: siteData.value?.seeding_info?.map(item => [item[0] ?? 0, Math.round((item[1] ?? 0) / 1024 / 1024 / 1024)]),
+    },
+  ]
+})
+
+// 做种分布图形选项
+const seedingChartOptions = computed(() => {
+  return {
+    chart: {
+      type: 'scatter',
+      parentHeightOffset: 0,
+      toolbar: { show: false },
+      animations: { enabled: true },
+      zoom: {
+        autoScaleYaxis: true,
+      },
+    },
+    tooltip: {
+      enabled: true,
+      x: {
+        formatter: function (val: number) {
+          return '数量：' + val.toLocaleString()
+        },
+      },
+    },
+    grid: {
+      xaxis: {
+        lines: { show: true },
+      },
+      yaxis: {
+        lines: { show: true },
+      },
+    },
+    colors: [currentTheme.value.primary],
+    xaxis: {
+      type: 'numeric',
+      labels: {
+        show: true,
+        formatter: function (val: number) {
+          return Math.round(val).toLocaleString()
+        },
+      },
+      title: {
+        text: '数量',
+      },
+      tickAmount: 10,
+    },
+    yaxis: {
+      title: {
+        text: 'GB',
+      },
+      labels: {
+        formatter: function (val: number) {
+          return val.toLocaleString() + ' GB'
+        },
+      },
+    },
+  }
+})
 
 // 根据传入属性，计算列表数据中第一条与第二条的差值，如果没有第二条则差值为全部
 const diffData: { [key: string]: any } = computed(() => {
   if (siteDatas.value.length < 2) {
     return siteData.value
   }
-  const first = siteDatas.value[0]
-  const second = siteDatas.value[1]
+  const first = siteDatas.value[siteDatas.value.length - 1]
+  const second = siteDatas.value[siteDatas.value.length - 2]
   return {
     bonus: (first.bonus ?? 0) - (second.bonus ?? 0),
     ratio: (first.ratio ?? 0) - (second.ratio ?? 0),
@@ -158,9 +208,9 @@ function getDiffString(diff: number | undefined, format: boolean = true) {
     return '0'
   }
   if (format) {
-    return diff > 0 ? `+${diff.toLocaleString()}` : diff.toLocaleString()
+    return diff >= 0 ? `+${diff.toLocaleString()}` : diff.toLocaleString()
   }
-  return diff > 0 ? `+${diff}` : diff
+  return diff >= 0 ? `+${diff}` : diff
 }
 
 // 根据差值的正负，返回不同的样式
@@ -180,7 +230,7 @@ async function fetchSiteUserData() {
     const result: { [key: string]: any } = await api.get(`site/userdata/${props.site?.id}`)
     if (result.success) {
       siteDatas.value = result.data.sort((a: { updated_day: any }, b: { updated_day: any }) =>
-        (b.updated_day || '').localeCompare(a.updated_day || ''),
+        (a.updated_day || '').localeCompare(b.updated_day || ''),
       )
     }
   } catch (error) {
@@ -200,13 +250,13 @@ onBeforeMount(async () => {
       <VCardText>
         <VRow class="match-height">
           <!-- 用户信息 -->
-          <VCol cols="6" md="3">
+          <VCol cols="12" md="3">
             <VCard>
               <VCardText class="d-flex align-center">
                 <div class="d-flex justify-space-between" style="inline-size: 100%">
                   <div class="d-flex flex-column gap-y-1">
-                    <span class="text-base text-high-emphasis">用户等级</span>
-                    <h5 class="text-h5 d-flex align-center gap-2">
+                    <span class="text-base">用户等级</span>
+                    <h5 class="text-h5 d-flex align-center gap-2 text-wrap">
                       {{ siteData?.user_level || '无' }}
                     </h5>
                   </div>
@@ -218,13 +268,13 @@ onBeforeMount(async () => {
             </VCard>
           </VCol>
           <!-- 积分 -->
-          <VCol cols="6" md="3">
+          <VCol cols="12" md="3">
             <VCard>
               <VCardText class="d-flex align-center">
                 <div class="d-flex justify-space-between" style="inline-size: 100%">
                   <div class="d-flex flex-column gap-y-1">
-                    <span class="text-base text-high-emphasis">积分</span>
-                    <h5 class="text-h5 d-flex align-center gap-2">
+                    <span class="text-base">积分</span>
+                    <h5 class="text-h5 d-flex align-center gap-2 text-wrap">
                       {{ siteData?.bonus?.toLocaleString() }}
                       <span class="text-base font-weight-regular" :class="getDiffClass(diffData?.bonus)">
                         ({{ getDiffString(diffData?.bonus) }})
@@ -239,13 +289,13 @@ onBeforeMount(async () => {
             </VCard>
           </VCol>
           <!-- 分享率 -->
-          <VCol cols="6" md="3">
+          <VCol cols="12" md="3">
             <VCard>
               <VCardText class="d-flex align-center">
                 <div class="d-flex justify-space-between" style="inline-size: 100%">
                   <div class="d-flex flex-column gap-y-1">
-                    <span class="text-base text-high-emphasis">分享率</span>
-                    <h5 class="text-h5 d-flex align-center gap-2">
+                    <span class="text-base">分享率</span>
+                    <h5 class="text-h5 d-flex align-center gap-2 text-wrap">
                       {{ siteData?.ratio }}
                       <span class="text-base font-weight-regular" :class="getDiffClass(diffData?.ratio)">
                         ({{ getDiffString(diffData?.ratio) }})
@@ -260,13 +310,13 @@ onBeforeMount(async () => {
             </VCard>
           </VCol>
           <!-- 总上传量 -->
-          <VCol cols="6" md="3">
+          <VCol cols="12" md="3">
             <VCard>
               <VCardText class="d-flex align-center">
                 <div class="d-flex justify-space-between" style="inline-size: 100%">
                   <div class="d-flex flex-column gap-y-1">
-                    <span class="text-base text-high-emphasis">总上传量</span>
-                    <h5 class="text-h5 d-flex align-center gap-2">
+                    <span class="text-base">总上传量</span>
+                    <h5 class="text-h5 d-flex align-center gap-2 text-wrap">
                       {{ formatFileSize(siteData?.upload || 0) }}
                       <span class="text-base font-weight-regular" :class="getDiffClass(diffData?.upload)">
                         ({{ formatFileSize(diffData?.upload || 0, 2, true) }})
@@ -281,13 +331,13 @@ onBeforeMount(async () => {
             </VCard>
           </VCol>
           <!-- 总下载量 -->
-          <VCol cols="6" md="3">
+          <VCol cols="12" md="3">
             <VCard>
               <VCardText class="d-flex align-center">
                 <div class="d-flex justify-space-between" style="inline-size: 100%">
                   <div class="d-flex flex-column gap-y-1">
-                    <span class="text-base text-high-emphasis">总下载量</span>
-                    <h5 class="text-h5 d-flex align-center gap-2">
+                    <span class="text-base">总下载量</span>
+                    <h5 class="text-h5 d-flex align-center gap-2 text-wrap">
                       {{ formatFileSize(siteData?.download || 0) }}
                       <span class="text-base font-weight-regular" :class="getDiffClass(diffData?.download)">
                         ({{ formatFileSize(diffData?.download || 0, 2, true) }})
@@ -302,13 +352,13 @@ onBeforeMount(async () => {
             </VCard>
           </VCol>
           <!-- 总做种数 -->
-          <VCol cols="6" md="3">
+          <VCol cols="12" md="3">
             <VCard>
               <VCardText class="d-flex align-center">
                 <div class="d-flex justify-space-between" style="inline-size: 100%">
                   <div class="d-flex flex-column gap-y-1">
-                    <span class="text-base text-high-emphasis">总做种数</span>
-                    <h5 class="text-h5 d-flex align-center gap-2">
+                    <span class="text-base">总做种数</span>
+                    <h5 class="text-h5 d-flex align-center gap-2 text-wrap">
                       {{ siteData?.seeding?.toLocaleString() }}
                       <span class="text-base font-weight-regular" :class="getDiffClass(diffData?.seeding)">
                         ({{ getDiffString(diffData?.seeding) }})
@@ -323,13 +373,13 @@ onBeforeMount(async () => {
             </VCard>
           </VCol>
           <!-- 总做种体积 -->
-          <VCol cols="6" md="3">
+          <VCol cols="12" md="3">
             <VCard>
               <VCardText class="d-flex align-center">
                 <div class="d-flex justify-space-between" style="inline-size: 100%">
                   <div class="d-flex flex-column gap-y-1">
-                    <span class="text-base text-high-emphasis">总做种体积</span>
-                    <h5 class="text-h5 d-flex align-center gap-2">
+                    <span class="text-base">总做种体积</span>
+                    <h5 class="text-h5 d-flex align-center gap-2 text-wrap">
                       {{ formatFileSize(siteData?.seeding_size || 0) }}
                       <span class="text-base font-weight-regular" :class="getDiffClass(diffData?.seeding_size)">
                         ({{ formatFileSize(diffData?.seeding_size || 0, 2, true) }})
@@ -344,13 +394,13 @@ onBeforeMount(async () => {
             </VCard>
           </VCol>
           <!-- 加入时间 -->
-          <VCol cols="6" md="3">
+          <VCol cols="12" md="3">
             <VCard>
               <VCardText class="d-flex align-center">
                 <div class="d-flex justify-space-between" style="inline-size: 100%">
                   <div class="d-flex flex-column gap-y-1">
-                    <span class="text-base text-high-emphasis">加入时间</span>
-                    <h5 class="text-h5 d-flex align-center gap-2">
+                    <span class="text-base">加入时间</span>
+                    <h5 class="text-h5 d-flex align-center gap-2 text-wrap">
                       {{ siteData?.join_at?.split(' ')[0] }}
                     </h5>
                   </div>
@@ -364,9 +414,18 @@ onBeforeMount(async () => {
         </VRow>
         <VRow>
           <VCol>
-            <VCard title="历史数据">
+            <VCard title="历史流量">
               <VCardText>
-                <VueApexCharts type="line" :options="chartOptions" :series="series" :height="300" />
+                <VueApexCharts type="line" :options="historyChartOptions" :series="historySeries" :height="300" />
+              </VCardText>
+            </VCard>
+          </VCol>
+        </VRow>
+        <VRow>
+          <VCol>
+            <VCard title="做种分布">
+              <VCardText>
+                <VueApexCharts type="scatter" :options="seedingChartOptions" :series="seedingSeries" :height="300" />
               </VCardText>
             </VCard>
           </VCol>