HM21St_Page_Manager/src/views/data_center/index.vue

<template>
  <div class="manage-root organize-manage">
    <Header />
    <div class="manage-root-contain">
      <nav-menu
        class="manage-root-contain-left"
        :activeMenuIndex="activeMenuIndex"
      ></nav-menu>
      <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>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
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概念
  computed: {},
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    //计算table高度(动态设置table高度)
    getTableHeight() {
      let tableH = 420; //距离页面下方的高度
      let tableHeightDetil = window.innerHeight - tableH;
      if (tableHeightDetil <= 300) {
        this.tableHeight = 300;
      } else {
        this.tableHeight = window.innerHeight - tableH;
      }
    },
    // 获取数据
    getData() {
      // 得到当日统计数据
      let MethodName1 = "/ShopServer/Manager/DataStat/GetCurDayStatData";
      getLogin(MethodName1, {}).then((res) => {
        if (res.status === 1) {
          this.curDayStatData = res;
        }
      });
      // 统计用户区域分布（购买物品的用户）
      let MethodName2 =
        "/ShopServer/Manager/DataStat/StatUserAreaDistribution_BuyGoods";
      getLogin(MethodName2, {
        goods_type: -1,
      }).then((res) => {});
      // 统计每日人员数量
      let MethodName3 = "/ShopServer/Manager/DataStat/StatDailyPersonCount";
      let data1 = {
        province_id_list: ["01", "02"],
        city_id_list: ["0101", "0202"],
        begin_date: "2024-01-01",
        end_date: "2024-02-01",
      };
      getLogin(MethodName3, data1).then((res) => {});
      // 统计每日机构数量
      let MethodName4 = "/ShopServer/Manager/DataStat/StatDailyOrgCount";
      getLogin(MethodName4, data1).then((res) => {});
      // 统计每日累计上课人数
      let MethodName5 =
        "/ShopServer/Manager/DataStat/StatDailyAccCoursePlayPersonCount";
      getLogin(MethodName5, data1).then((res) => {});
      // 统计每日累计阅读时长
      let MethodName6 =
        "/ShopServer/Manager/DataStat/StatDailyAccArticleReadingDuration";
      getLogin(MethodName6, data1).then((res) => {});
      // 统计每日累计阅读词数
      let MethodName7 =
        "/ShopServer/Manager/DataStat/StatDailyAccArticleReadingWordCount";
      getLogin(MethodName7, data1).then((res) => {});
      // 统计每日累计上课人次
      let MethodName8 =
        "/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() {
    this.getTableHeight();
    this.getData();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
};
</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>