数据中心

src/utils/defined.js

@@ -42,4 +42,9 @@ export const cutMoneyFiter = (amount) => {
         result = s;
     }
     return result;
+}
+export const formatNumber = (value) => {
+  if (!value) return '0';
+  const stringifiedValue = String(value);
+  return stringifiedValue.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 }

src/views/data_center/index.vue

@@ -6,7 +6,393 @@
         class="manage-root-contain-left"
         :activeMenuIndex="activeMenuIndex"
       ></nav-menu>
-      <div class="manage-root-contain-right personnel-manage-right"></div>
+      <div class="manage-root-contain-right personnel-manage-right">
+        <div class="top">
+          <span>数据中心</span>
+          <b>{{ queryTime }}</b>
+        </div>
+        <div class="day-stat-data" v-if="curDayStatData">
+          <div class="day-item" v-if="curDayStatData.person_count">
+            <div class="day-item-left">
+              <p>用户总数</p>
+              <span
+                >{{ curDayStatData.person_count.total_count | formatNumber
+                }}<b>人</b></span
+              >
+            </div>
+            <div class="day-item-center">
+              <p>较上周</p>
+              <span
+                :class="[
+                  curDayStatData.person_count.add_count_pre_week > 0
+                    ? 'add'
+                    : curDayStatData.person_count.add_count_pre_week === 0
+                    ? 'flat'
+                    : 'down',
+                ]"
+              >
+                <img
+                  :src="
+                    curDayStatData.person_count.add_count_pre_week > 0
+                      ? require('../../assets/caret-up.png')
+                      : curDayStatData.person_count.add_count_pre_week === 0
+                      ? require('../../assets/caret-flat.png')
+                      : require('../../assets/caret-down.png')
+                  "
+                />
+                <a>{{ curDayStatData.person_count.add_count_pre_week }}</a>
+              </span>
+            </div>
+            <div class="day-item-right">
+              <p>较上月</p>
+              <span
+                :class="[
+                  curDayStatData.person_count.add_count_pre_week > 0
+                    ? 'add'
+                    : curDayStatData.person_count.add_count_pre_week === 0
+                    ? 'flat'
+                    : 'down',
+                ]"
+              >
+                <img
+                  :src="
+                    curDayStatData.person_count.add_count_pre_month > 0
+                      ? require('../../assets/caret-up.png')
+                      : curDayStatData.person_count.add_count_pre_month === 0
+                      ? require('../../assets/caret-flat.png')
+                      : require('../../assets/caret-down.png')
+                  "
+                />
+                <a>{{ curDayStatData.person_count.add_count_pre_month }}</a>
+              </span>
+            </div>
+          </div>
+          <div class="day-item" v-if="curDayStatData.org_count">
+            <div class="day-item-left">
+              <p>机构总数</p>
+              <span
+                >{{ curDayStatData.org_count.total_count | formatNumber
+                }}<b>个</b></span
+              >
+            </div>
+            <div class="day-item-center">
+              <p>较上周</p>
+              <span
+                :class="[
+                  curDayStatData.org_count.add_count_pre_week > 0
+                    ? 'add'
+                    : curDayStatData.org_count.add_count_pre_week === 0
+                    ? 'flat'
+                    : 'down',
+                ]"
+              >
+                <img
+                  :src="
+                    curDayStatData.org_count.add_count_pre_week > 0
+                      ? require('../../assets/caret-up.png')
+                      : curDayStatData.org_count.add_count_pre_week === 0
+                      ? require('../../assets/caret-flat.png')
+                      : require('../../assets/caret-down.png')
+                  "
+                />
+                <a>{{ curDayStatData.org_count.add_count_pre_week }}</a>
+              </span>
+            </div>
+            <div class="day-item-right">
+              <p>较上月</p>
+              <span
+                :class="[
+                  curDayStatData.org_count.add_count_pre_week > 0
+                    ? 'add'
+                    : curDayStatData.org_count.add_count_pre_week === 0
+                    ? 'flat'
+                    : 'down',
+                ]"
+              >
+                <img
+                  :src="
+                    curDayStatData.org_count.add_count_pre_month > 0
+                      ? require('../../assets/caret-up.png')
+                      : curDayStatData.org_count.add_count_pre_month === 0
+                      ? require('../../assets/caret-flat.png')
+                      : require('../../assets/caret-down.png')
+                  "
+                />
+                <a>{{ curDayStatData.org_count.add_count_pre_month }}</a>
+              </span>
+            </div>
+          </div>
+          <div class="day-item" v-if="curDayStatData.course_play_person_count">
+            <div class="day-item-left">
+              <p>累计上课人数</p>
+              <span
+                >{{
+                  curDayStatData.course_play_person_count.total_count
+                    | formatNumber
+                }}<b>人</b></span
+              >
+            </div>
+            <div class="day-item-center">
+              <p>较上周</p>
+              <span
+                :class="[
+                  curDayStatData.course_play_person_count.add_count_pre_week > 0
+                    ? 'add'
+                    : curDayStatData.course_play_person_count
+                        .add_count_pre_week === 0
+                    ? 'flat'
+                    : 'down',
+                ]"
+              >
+                <img
+                  :src="
+                    curDayStatData.course_play_person_count.add_count_pre_week >
+                    0
+                      ? require('../../assets/caret-up.png')
+                      : curDayStatData.course_play_person_count
+                          .add_count_pre_week === 0
+                      ? require('../../assets/caret-flat.png')
+                      : require('../../assets/caret-down.png')
+                  "
+                />
+                <a>{{
+                  curDayStatData.course_play_person_count.add_count_pre_week
+                }}</a>
+              </span>
+            </div>
+            <div class="day-item-right">
+              <p>较上月</p>
+              <span
+                :class="[
+                  curDayStatData.course_play_person_count.add_count_pre_week > 0
+                    ? 'add'
+                    : curDayStatData.course_play_person_count
+                        .add_count_pre_week === 0
+                    ? 'flat'
+                    : 'down',
+                ]"
+              >
+                <img
+                  :src="
+                    curDayStatData.course_play_person_count
+                      .add_count_pre_month > 0
+                      ? require('../../assets/caret-up.png')
+                      : curDayStatData.course_play_person_count
+                          .add_count_pre_month === 0
+                      ? require('../../assets/caret-flat.png')
+                      : require('../../assets/caret-down.png')
+                  "
+                />
+                <a>{{
+                  curDayStatData.course_play_person_count.add_count_pre_month
+                }}</a>
+              </span>
+            </div>
+          </div>
+          <div class="day-item" v-if="curDayStatData.course_play_count">
+            <div class="day-item-left">
+              <p>累计上课人次</p>
+              <span
+                >{{ curDayStatData.course_play_count.total_count | formatNumber
+                }}<b>人次</b></span
+              >
+            </div>
+            <div class="day-item-center">
+              <p>较上周</p>
+              <span
+                :class="[
+                  curDayStatData.course_play_count.add_count_pre_week > 0
+                    ? 'add'
+                    : curDayStatData.course_play_count.add_count_pre_week === 0
+                    ? 'flat'
+                    : 'down',
+                ]"
+              >
+                <img
+                  :src="
+                    curDayStatData.course_play_count.add_count_pre_week > 0
+                      ? require('../../assets/caret-up.png')
+                      : curDayStatData.course_play_count.add_count_pre_week ===
+                        0
+                      ? require('../../assets/caret-flat.png')
+                      : require('../../assets/caret-down.png')
+                  "
+                />
+                <a>{{ curDayStatData.course_play_count.add_count_pre_week }}</a>
+              </span>
+            </div>
+            <div class="day-item-right">
+              <p>较上月</p>
+              <span
+                :class="[
+                  curDayStatData.course_play_count.add_count_pre_week > 0
+                    ? 'add'
+                    : curDayStatData.course_play_count.add_count_pre_week === 0
+                    ? 'flat'
+                    : 'down',
+                ]"
+              >
+                <img
+                  :src="
+                    curDayStatData.course_play_count.add_count_pre_month > 0
+                      ? require('../../assets/caret-up.png')
+                      : curDayStatData.course_play_count.add_count_pre_month ===
+                        0
+                      ? require('../../assets/caret-flat.png')
+                      : require('../../assets/caret-down.png')
+                  "
+                />
+                <a>{{
+                  curDayStatData.course_play_count.add_count_pre_month
+                }}</a>
+              </span>
+            </div>
+          </div>
+          <div class="day-item" v-if="curDayStatData.article_reading_duration">
+            <div class="day-item-left">
+              <p>平台总阅读时长</p>
+              <span
+                >{{
+                  Math.ceil(
+                    curDayStatData.article_reading_duration.total_duration /
+                      3600
+                  ) | formatNumber
+                }}<b>时</b></span
+              >
+            </div>
+            <div class="day-item-center">
+              <p>较上周</p>
+              <span
+                :class="[
+                  curDayStatData.article_reading_duration
+                    .add_duration_pre_week > 0
+                    ? 'add'
+                    : curDayStatData.article_reading_duration
+                        .add_duration_pre_week === 0
+                    ? 'flat'
+                    : 'down',
+                ]"
+              >
+                <img
+                  :src="
+                    curDayStatData.article_reading_duration
+                      .add_duration_pre_week > 0
+                      ? require('../../assets/caret-up.png')
+                      : curDayStatData.article_reading_duration
+                          .add_duration_pre_week === 0
+                      ? require('../../assets/caret-flat.png')
+                      : require('../../assets/caret-down.png')
+                  "
+                />
+                <a>{{
+                  curDayStatData.article_reading_duration.add_duration_pre_week
+                }}</a>
+              </span>
+            </div>
+            <div class="day-item-right">
+              <p>较上月</p>
+              <span
+                :class="[
+                  curDayStatData.article_reading_duration
+                    .add_duration_pre_month > 0
+                    ? 'add'
+                    : curDayStatData.article_reading_duration
+                        .add_duration_pre_month === 0
+                    ? 'flat'
+                    : 'down',
+                ]"
+              >
+                <img
+                  :src="
+                    curDayStatData.article_reading_duration
+                      .add_duration_pre_month > 0
+                      ? require('../../assets/caret-up.png')
+                      : curDayStatData.article_reading_duration
+                          .add_duration_pre_month === 0
+                      ? require('../../assets/caret-flat.png')
+                      : require('../../assets/caret-down.png')
+                  "
+                />
+                <a>{{
+                  curDayStatData.article_reading_duration.add_duration_pre_month
+                }}</a>
+              </span>
+            </div>
+          </div>
+          <div
+            class="day-item"
+            v-if="curDayStatData.article_reading_word_count"
+          >
+            <div class="day-item-left">
+              <p>平台总阅读词数</p>
+              <span
+                >{{
+                  curDayStatData.article_reading_word_count.total_count
+                    | formatNumber
+                }}<b>词</b></span
+              >
+            </div>
+            <div class="day-item-center">
+              <p>较上周</p>
+              <span
+                :class="[
+                  curDayStatData.article_reading_word_count.add_count_pre_week >
+                  0
+                    ? 'add'
+                    : curDayStatData.article_reading_word_count
+                        .add_count_pre_week === 0
+                    ? 'flat'
+                    : 'down',
+                ]"
+              >
+                <img
+                  :src="
+                    curDayStatData.article_reading_word_count
+                      .add_count_pre_week > 0
+                      ? require('../../assets/caret-up.png')
+                      : curDayStatData.article_reading_word_count
+                          .add_count_pre_week === 0
+                      ? require('../../assets/caret-flat.png')
+                      : require('../../assets/caret-down.png')
+                  "
+                />
+                <a>{{
+                  curDayStatData.article_reading_word_count.add_count_pre_week
+                }}</a>
+              </span>
+            </div>
+            <div class="day-item-right">
+              <p>较上月</p>
+              <span
+                :class="[
+                  curDayStatData.article_reading_word_count.add_count_pre_week >
+                  0
+                    ? 'add'
+                    : curDayStatData.article_reading_word_count
+                        .add_count_pre_week === 0
+                    ? 'flat'
+                    : 'down',
+                ]"
+              >
+                <img
+                  :src="
+                    curDayStatData.article_reading_word_count
+                      .add_count_pre_month > 0
+                      ? require('../../assets/caret-up.png')
+                      : curDayStatData.article_reading_word_count
+                          .add_count_pre_month === 0
+                      ? require('../../assets/caret-flat.png')
+                      : require('../../assets/caret-down.png')
+                  "
+                />
+                <a>{{
+                  curDayStatData.article_reading_word_count.add_count_pre_month
+                }}</a>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -17,16 +403,22 @@
 import Header from "../../components/Header.vue";
 import NavMenu from "../../components/NavMenu.vue";
 import { getLogin } from "@/api/ajax";
+import { formatNumber } from "@/utils/defined";
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: { Header, NavMenu },
   props: {},
+  filters: {
+    formatNumber,
+  },
   data() {
     //这里存放数据
     return {
       activeMenuIndex: "data_center",
       tableHeight: "", // 表格高度
       tableLoading: false,
+      queryTime: this.getCurrentDateTime(),
+      curDayStatData: null, // 当日统计数据
     };
   },
   //计算属性 类似于data概念
@@ -49,7 +441,11 @@ export default {
     getData() {
       // 得到当日统计数据
       let MethodName1 = "/ShopServer/Manager/DataStat/GetCurDayStatData";
-      getLogin(MethodName1, {}).then((res) => {});
+      getLogin(MethodName1, {}).then((res) => {
+        if (res.status === 1) {
+          this.curDayStatData = res;
+        }
+      });
       // 统计用户区域分布（购买物品的用户）
       let MethodName2 =
         "/ShopServer/Manager/DataStat/StatUserAreaDistribution_BuyGoods";
@@ -85,6 +481,19 @@ export default {
         "/ShopServer/Manager/DataStat/StatDailyAccCoursePlayCount";
       getLogin(MethodName8, data1).then((res) => {});
     },
+    // 获取时间
+    getCurrentDateTime() {
+      const now = new Date();
+      const year = now.getFullYear();
+      const month = this.padNumber(now.getMonth() + 1); // 月份是从0开始的
+      const day = this.padNumber(now.getDate());
+      const hours = this.padNumber(now.getHours());
+      const minutes = this.padNumber(now.getMinutes());
+      return `${year}-${month}-${day} ${hours}:${minutes}`;
+    },
+    padNumber(num) {
+      return num < 10 ? "0" + num : num;
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
@@ -111,4 +520,97 @@ export default {
 </script>
 <style lang="scss" scoped>
 /* @import url(); 引入css类 */
+.manage-root-contain-right {
+  padding-top: 24px;
+}
+.top {
+  border-radius: 6px;
+  background: #2460ff;
+  padding: 20px 24px;
+  display: flex;
+  justify-content: space-between;
+  color: #fff;
+  font-weight: 500;
+  align-items: center;
+  span {
+    font-size: 20px;
+    line-height: 28px; /* 140% */
+  }
+  b {
+    font-size: 12px;
+    line-height: 20px; /* 166.667% */
+  }
+}
+.day-stat-data {
+  display: flex;
+  gap: 16px;
+  margin-top: 24px;
+  flex-flow: wrap;
+  .day-item {
+    width: calc(50% - 8px);
+    border-radius: 6px;
+    background: #fff;
+    flex-shrink: 0;
+    display: flex;
+    justify-content: space-between;
+    padding: 16px 40px;
+    column-gap: 24px;
+    align-items: center;
+    p {
+      color: #4e5969;
+
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 20px;
+      margin: 0;
+    }
+    .day-item-left {
+      flex: 1;
+      p {
+        margin-bottom: 8px;
+      }
+      span {
+        color: #1d2129;
+        font-size: 22px;
+        font-weight: 700;
+        line-height: 24px;
+        b {
+          color: #4e5969;
+          font-size: 12px;
+          font-weight: 400;
+          line-height: 20px;
+          margin-left: 4px;
+        }
+      }
+    }
+    .day-item-center,
+    .day-item-right {
+      width: 80px;
+      text-align: right;
+      img {
+        width: 16px;
+        height: 16px;
+      }
+      a {
+        font-size: 16px;
+        font-weight: 600;
+        line-height: 22px;
+      }
+      span {
+        display: flex;
+        justify-content: end;
+        align-items: center;
+        &.up {
+          color: #fc4d42;
+        }
+        &.flat {
+          color: #165dff;
+        }
+        &.down {
+          color: #34b531;
+        }
+      }
+    }
+  }
+}
 </style>