feat: 新增全站历史统计功能

Yi.Abp.Net8/module/bbs/Yi.Framework.Bbs.Application/Services/AccessLogService.cs

@@ -44,6 +44,21 @@ namespace Yi.Framework.Bbs.Application.Services
             }
         }
 
+
+
+
+        /// <summary>
+        /// 获取全部访问流量
+        /// </summary>
+        /// <returns></returns>
+        public async Task<List<AccessLogDto>> Get()
+        {
+            var entities = await _repository._DbQueryable.OrderBy(x => x.CreationTime).ToListAsync();
+            var output = entities.Adapt<List<AccessLogDto>>();
+            output?.ForEach(x => x.CreationTime = x.CreationTime.Date);
+            return output;
+        }
+
         /// <summary>
         /// 触发
         /// </summary>
@@ -106,5 +121,8 @@ namespace Yi.Framework.Bbs.Application.Services
 
             return result.ToArray();
         }
+
+
+
     }
 }

Yi.Abp.Net8/module/bbs/Yi.Framework.Bbs.Application/Services/Analyses/BbsUserAnalyseService.cs

@@ -93,5 +93,6 @@ namespace Yi.Framework.Bbs.Application.Services.Analyses
             }
         }
 
+
     }
 }

Yi.Bbs.Vue3/src/apis/accessApi.js

@@ -15,3 +15,10 @@ export function getWeek() {
     method: "get",
   });
 }
+// 获取全部数据
+export function getAccessList() {
+  return request({
+    url: "/access-log",
+    method: "get",
+  });
+}

Yi.Bbs.Vue3/src/components/InfoCard.vue

@@ -2,7 +2,12 @@
 import { ref } from "vue";
 
 const props = defineProps(["items", "header", "text", "hideDivider", "height"]);
+const emit = defineEmits(['onClickText'])
 const height = ref(props.height + "px");
+
+const onClickText=()=>{
+  emit('onClickText')
+}
 </script>
 
 <template>
@@ -10,7 +15,7 @@ const height = ref(props.height + "px");
     <template #header>
       <div class="card-header">
         <span>{{ props.header }}</span>
-        <el-link :underline="false" type="primary">{{ props.text }}</el-link>
+        <el-link :underline="false" type="primary" @click="onClickText">{{ props.text }}</el-link>
       </div>
     </template>
 

Yi.Bbs.Vue3/src/views/home/Index.vue

@@ -6,22 +6,11 @@
           <ScrollbarInfo />
         </div>
         <el-row class="left-div">
-          <el-col
+          <el-col :span="8" v-for="i in plateList" :key="i.id" class="plate" :style="{
-            :span="8"
+            'padding-left': i % 3 == 1 ? 0 : 0.2 + 'rem',
-            v-for="i in plateList"
+            'padding-right': i % 3 == 0 ? 0 : 0.2 + 'rem',
-            :key="i.id"
+          }">
-            class="plate"
+            <PlateCard :name="i.name" :introduction="i.introduction" :id="i.id" :isPublish="i.isDisableCreateDiscuss" />
-            :style="{
-              'padding-left': i % 3 == 1 ? 0 : 0.2 + 'rem',
-              'padding-right': i % 3 == 0 ? 0 : 0.2 + 'rem',
-            }"
-          >
-            <PlateCard
-              :name="i.name"
-              :introduction="i.introduction"
-              :id="i.id"
-              :isPublish="i.isDisableCreateDiscuss"
-            />
           </el-col>
           <template v-if="isDiscussFinished">
             <el-col :span="24" v-for="i in discussList" :key="i.id">
@@ -49,11 +38,7 @@
                 <div class="carousel-font" :style="{ color: item.color }">
                   {{ item.name }}
                 </div>
-                <el-image
+                <el-image style="width: 100%; height: 100%" :src="item.logo" fit="cover" />
-                  style="width: 100%; height: 100%"
-                  :src="item.logo"
-                  fit="cover"
-                />
               </el-carousel-item>
             </el-carousel>
           </el-col>
@@ -101,20 +86,22 @@
           </el-col>
 
           <el-col :span="24">
-            <InfoCard header="访问统计" class="VisitsLineChart" text="详情">
+            <InfoCard header="访问统计" class="VisitsLineChart" text="(New)全站历史统计" @onClickText="onClickAccessLog">
               <template #content>
                 <VisitsLineChart :option="statisOptions" class="statisChart" />
               </template>
             </InfoCard>
+
+            <el-dialog v-model="accessLogDialogVisible" title="全站历史统计" width="1200px" center>
+              <AccessLogChart :option="accessLogOptins" class="accessLogChart" />
+            </el-dialog>
           </el-col>
 
           <el-col :span="24">
-            <InfoCard header="简介" text="详情">
+            <InfoCard header="简介" text="">
               <template #content>
                 <div class="introduce">
-                  没有什么能够阻挡，人类对代码<span style="color: #1890ff"
+                  没有什么能够阻挡，人类对代码<span style="color: #1890ff">优雅</span>的追求
-                    >优雅</span
-                  >的追求
                 </div>
               </template>
             </InfoCard>
@@ -122,12 +109,7 @@
 
           <el-col :span="24">
             <template v-if="isPointFinished">
-              <InfoCard
+              <InfoCard :items="pointList" header="财富排行榜" text="关于钱钱" height="400">
-                :items="pointList"
-                header="财富排行榜"
-                text="关于钱钱"
-                height="400"
-              >
                 <template #item="temp">
                   <PointsRanking :pointsData="temp" />
                 </template>
@@ -135,19 +117,16 @@
             </template>
             <template v-else>
               <InfoCard header="本月排行" text="更多">
-                <template #content> <Skeleton /></template>
+                <template #content>
+                  <Skeleton />
+                </template>
               </InfoCard>
             </template>
           </el-col>
 
           <el-col :span="24">
             <template v-if="isFriendFinished">
-              <InfoCard
+              <InfoCard :items="friendList" header="推荐好友" text="更多" height="400">
-                :items="friendList"
-                header="推荐好友"
-                text="更多"
-                height="400"
-              >
                 <template #item="temp">
                   <RecommendFriend :friendData="temp" />
                 </template>
@@ -155,18 +134,15 @@
             </template>
             <template v-else>
               <InfoCard header="推荐好友" text="更多">
-                <template #content> <Skeleton /></template>
+                <template #content>
+                  <Skeleton />
+                </template>
               </InfoCard>
             </template>
           </el-col>
           <el-col :span="24">
             <template v-if="isThemeFinished">
-              <InfoCard
+              <InfoCard :items="themeList" header="推荐主题" text="更多" height="400">
-                :items="themeList"
-                header="推荐主题"
-                text="更多"
-                height="400"
-              >
                 <template #item="temp">
                   <ThemeData :themeData="temp" />
                 </template>
@@ -174,7 +150,9 @@
             </template>
             <template v-else>
               <InfoCard header="推荐主题" text="更多">
-                <template #content> <Skeleton /></template>
+                <template #content>
+                  <Skeleton />
+                </template>
               </InfoCard>
             </template>
           </el-col>
@@ -197,7 +175,8 @@ import PlateCard from "@/components/PlateCard.vue";
 import ScrollbarInfo from "@/components/ScrollbarInfo.vue";
 import BottomInfo from "@/components/BottomInfo.vue";
 import VisitsLineChart from "./components/VisitsLineChart/index.vue";
-import { access } from "@/apis/accessApi.js";
+import AccessLogChart from "./components/AccessLogChart/Index.vue"
+import { access, getAccessList } from "@/apis/accessApi.js";
 import { getList } from "@/apis/plateApi.js";
 import { getList as bannerGetList } from "@/apis/bannerApi.js";
 import { getHomeDiscuss } from "@/apis/discussApi.js";
@@ -215,10 +194,10 @@ import ThemeData from "./components/RecommendTheme/index.vue";
 import Skeleton from "@/components/Skeleton/index.vue";
 import useSocketStore from "@/stores/socket";
 
-
+const accessLogDialogVisible = ref(false)
 const router = useRouter();
 
-
+const accessAllList = ref([]);
 
 const plateList = ref([]);
 const discussList = ref([]);
@@ -294,6 +273,25 @@ const statisOptions = computed(() => {
     },
   };
 });
+//历史全部访问统计
+const accessLogOptins = computed(() => {
+  return {
+    xAxis: {
+      data: accessAllList.value?.map((item,index)=>{
+        return item.creationTime.slice(0, 10);
+
+      })
+    },
+    series: [
+      {
+        data: accessAllList.value?.map((item,index)=>{
+        return item.number;
+        })
+      }
+    ]
+  }
+});
+
 
 const handleToSign = () => {
   router.push("/activity/sign");
@@ -309,12 +307,19 @@ watch(
   { deep: true }
 );
 
+const onClickAccessLog = async () => {
+  accessLogDialogVisible.value = true;
+  const {data} = await getAccessList();
+
+  accessAllList.value = data;
+}
 
 </script>
 <style scoped lang="scss">
 .home-box {
   width: 1300px;
   height: 100%;
+
   .introduce {
     color: rgba(0, 0, 0, 0.45);
     font-size: small;
@@ -350,6 +355,7 @@ watch(
     display: block;
     margin-bottom: 0.5rem;
   }
+
   .analyse {
     display: flex;
     justify-content: space-between;
@@ -357,6 +363,7 @@ watch(
     width: 100%;
     height: 100px;
     margin-bottom: 10px;
+
     .item {
       width: 30%;
       height: 100%;
@@ -368,6 +375,7 @@ watch(
       border: 1px solid #409eff;
       border-radius: 5px;
       color: #409eff;
+
       .content {
         width: 100%;
         height: 100%;
@@ -385,6 +393,7 @@ watch(
           .name {
             font-size: 14px;
           }
+
           .count {
             font-size: 20px;
             font-weight: bold;
@@ -407,11 +416,13 @@ watch(
       }
     }
   }
+
   .signIn {
     display: flex;
     justify-content: space-between;
     align-items: center;
     color: #8a919f;
+
     &-btn {
       cursor: pointer;
       display: flex;
@@ -426,7 +437,7 @@ watch(
     }
   }
 
-  .VisitsLineChart >>> .el-card__body {
+  .VisitsLineChart>>>.el-card__body {
     padding: 0.5rem;
   }
 
@@ -434,5 +445,10 @@ watch(
     width: 100%;
     height: 300px;
   }
+
+  .accessLogChart {
+    width: 1100px;
+    height: 500px;
+  }
 }
 </style>

Yi.Bbs.Vue3/src/views/home/components/AccessLogChart/Index.vue

@@ -0,0 +1,31 @@
+<template>
+    <div class="v-chart" ref="statis"></div>
+  </template>
+  
+  <script setup name="AccessLogChart">
+  import { ref, defineEmits, defineProps, defineExpose } from "vue";
+  import useEcharts from "@/hooks/useEcharts";
+  import { accessLogEchartsConfig } from "../../hooks/accessLogEchartsConfig";
+  const props = defineProps({
+    option: {
+      type: Object,
+      default: () => {},
+    },
+  });
+  const emits = defineEmits([
+    "chart-click", // 点击chart
+  ]);
+  
+  let statis = ref(null);
+  const { resize } = useEcharts(statis, emits, props, accessLogEchartsConfig);
+  defineExpose({
+    resize,
+  });
+  </script>
+  <style scoped lang="scss">
+  .v-chart {
+    width: 100%;
+    height: 100%;
+  }
+  </style>
+  

Yi.Bbs.Vue3/src/views/home/hooks/accessLogEchartsConfig.js

@@ -0,0 +1,18 @@
+export const accessLogEchartsConfig = {
+  xAxis: {
+    type: 'category',
+    boundaryGap: false,
+    data: []
+  },
+  yAxis: {
+    type: 'value'
+  },
+  series: [
+    {
+      data: [],
+      type: 'line',
+      areaStyle: {}
+    }
+  ]
+};
+