feat:对通首页在线人数分析模块

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

@@ -38,3 +38,16 @@ export function getRankingPoints(data) {
     data,
   });
 }
+
+/**
+ * 获取用户分析
+ * @param {*} data
+ * @returns
+ */
+export function getUserAnalyse(data) {
+  return request({
+    url: "/analyse/bbs-user",
+    method: "get",
+    data,
+  });
+}

Yi.Bbs.Vue3/src/assets/box/online_bg.svg

@@ -0,0 +1,2 @@
+<svg width="100%" height="100%" id="svg" viewBox="0 0 1440 390" xmlns="http://www.w3.org/2000/svg" class="transition duration-300 ease-in-out delay-150"><defs><linearGradient id="gradient" x1="52%" y1="0%" x2="48%" y2="100%"><stop offset="5%" stop-color="#0693e3"></stop><stop offset="95%" stop-color="#0693e3"></stop></linearGradient></defs><path d="M 0,400 L 0,100 C 80.95362418412918,103.28753005839917 161.90724836825837,106.57506011679834 224,114 C 286.09275163174163,121.42493988320166 329.3246307110958,132.9872895912058 390,125 C 450.6753692889042,117.0127104087942 528.7942287873583,89.47578151837855 594,89 C 659.2057712126417,88.52421848162145 711.4984541394712,115.10958433527998 789,108 C 866.5015458605288,100.89041566472002 969.2119546547576,60.08588114050154 1053,65 C 1136.7880453452424,69.91411885949846 1201.6537272414978,120.54689110271386 1263,134 C 1324.3462727585022,147.45310889728614 1382.173136379251,123.72655444864307 1440,100 L 1440,400 L 0,400 Z" stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="0.53" class="transition-all duration-300 ease-in-out delay-150 path-0"></path><defs><linearGradient id="gradient" x1="52%" y1="0%" x2="48%" y2="100%"><stop offset="5%" stop-color="#0693e3"></stop><stop offset="95%" stop-color="#0693e3"></stop></linearGradient></defs><path d="M 0,400 L 0,233 C 77.77464788732394,237.21916867055995 155.54929577464787,241.43833734111988 219,235 C 282.4507042253521,228.56166265888012 331.57746478873247,211.46581930608042 388,206 C 444.42253521126753,200.53418069391958 508.14084507042253,206.6983854345586 591,209 C 673.8591549295775,211.3016145654414 775.8591549295775,209.74063895568528 849,201 C 922.1408450704225,192.25936104431472 966.4225352112676,176.33905874270016 1035,195 C 1103.5774647887324,213.66094125729984 1196.450704225352,266.9031260735142 1268,279 C 1339.549295774648,291.0968739264858 1389.7746478873241,262.0484369632429 1440,233 L 1440,400 L 0,400 Z" stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="1" class="transition-all duration-300 ease-in-out delay-150 path-1" ></path>
+</svg>

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

@@ -56,6 +56,35 @@
               </el-carousel-item>
             </el-carousel>
           </el-col>
+          <div class="analyse">
+            <div class="item">
+              <div class="text">在线人数</div>
+              <div class="content">
+                <div class="name"></div>
+                <div class="content-box top">
+                  <div class="count">{{ userAnalyseInfo.onlineNumber }}</div>
+                </div>
+              </div>
+            </div>
+            <div class="item">
+              <div class="text">注册人数</div>
+              <div class="content">
+                <div class="content-box top">
+                  <div class="count">{{ userAnalyseInfo.registerNumber }}</div>
+                </div>
+              </div>
+            </div>
+            <div class="item">
+              <div class="text">昨日新增</div>
+              <div class="content">
+                <div class="content-box">
+                  <div class="count">
+                    {{ userAnalyseInfo.yesterdayNewUser }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
 
           <el-col :span="24">
             <InfoCard header="访问统计" class="VisitsLineChart" text="详情">
@@ -76,6 +105,7 @@
               </template>
             </InfoCard>
           </el-col>
+
           <el-col :span="24">
             <template v-if="isPointFinished">
               <InfoCard
@@ -161,6 +191,7 @@ import {
   getRecommendedTopic,
   getRecommendedFriend,
   getRankingPoints,
+  getUserAnalyse,
 } from "@/apis/analyseApi.js";
 import { getList as getAllDiscussList } from "@/apis/discussApi.js";
 import PointsRanking from "./components/PointsRanking/index.vue";
@@ -186,6 +217,7 @@ const themeList = ref([]);
 const isThemeFinished = ref([]);
 const allDiscussList = ref([]);
 const isAllDiscussFinished = ref(false);
+const userAnalyseInfo = ref({});
 
 const items = [{ user: "用户1" }, { user: "用户2" }, { user: "用户3" }];
 //主题查询参数
@@ -225,6 +257,8 @@ onMounted(async () => {
     });
   isAllDiscussFinished.value = allDiscussConfig.isFinish;
   allDiscussList.value = allDiscussData.items;
+  const { data: userAnalyseInfoData } = await getUserAnalyse();
+  userAnalyseInfo.value = userAnalyseInfoData;
   // 实时人数
   await signalR.init(`main`);
   nextTick(() => {
@@ -297,6 +331,65 @@ const statisOptions = computed(() => {
     display: block;
     margin-bottom: 0.5rem;
   }
+  .analyse {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    height: 100px;
+    margin-bottom: 10px;
+    .item {
+      width: 30%;
+      height: 100%;
+      position: relative;
+      background: url("@/assets/box/online_bg.svg") no-repeat;
+      background-color: #fff;
+      background-position: 0 30px;
+      background-size: 150% 100%;
+      border: 1px solid #409eff;
+      border-radius: 5px;
+      color: #409eff;
+      .content {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+
+        &-box {
+          width: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: flex-start;
+          justify-content: center;
+          margin-bottom: 10px;
+
+          .name {
+            font-size: 14px;
+          }
+          .count {
+            font-size: 20px;
+            font-weight: bold;
+          }
+        }
+      }
+
+      .text {
+        width: 60px;
+        position: absolute;
+        padding: 0 5px;
+        top: -10px;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 12px;
+        text-align: center;
+        border: 1px solid #d9ecff;
+        border-radius: 5px;
+        color: #409eff;
+        background-color: #ecf5ff;
+      }
+    }
+  }
+
   .VisitsLineChart >>> .el-card__body {
     padding: 0.5rem;
   }