提交

src/router/portrait.js

@@ -14,6 +14,10 @@ export default {
       {
         path: "appReport",
         component: () => import(/* webpackChunkName: "portrait" */ "../views/AppReport/App.vue"),
+      },
+      {
+        path: "examine",
+        component: () => import(/* webpackChunkName: "portrait" */ "../views/Examine/App.vue"),
       }
     ],
   }

src/views/Examine/App.vue

@@ -0,0 +1,197 @@
+<template>
+  <div class="SingleDay">
+    <el-breadcrumb>
+      <el-breadcrumb-item>新媒体</el-breadcrumb-item>
+      <el-breadcrumb-item>起点中心客户端考核数据</el-breadcrumb-item>
+    </el-breadcrumb>
+    <br />
+    <el-card class="box-card">
+      <el-row :gutter="10">
+        <el-col :span="12">
+          <el-form label-width="auto">
+            <el-form-item label="周期">
+              <span v-text="form.range"></span>
+            </el-form-item>
+            <el-form-item label="客户端日活数">
+              <span v-text="form.raw_client_online_user"></span>
+            </el-form-item>
+            <el-form-item label="端外H5日活数">
+              <span v-text="form.raw_web_online_user"></span>
+            </el-form-item>
+            <el-form-item label="客户端日人均使用时长(毫秒)">
+              <span v-text="form.raw_client_avg_duration"></span>
+            </el-form-item>
+          </el-form>
+        </el-col>
+        <el-col :span="12">
+          <el-form label-width="auto">
+            <el-form-item label="">
+              <span class="tip">
+              </span>
+            </el-form-item>
+            <el-form-item label="">
+              <span class="tip">
+                客户端日活数=当月客户端日活数之和/当月天数
+              </span>
+            </el-form-item>
+            <el-form-item label="">
+              <span class="tip">
+                端外H5日活数=当月端外H5日活数之和/当月天数
+              </span>
+            </el-form-item>
+            <el-form-item label="">
+              <span class="tip">
+                客户端日人均使用时长=当月客户端日人均使用时长之和/当月天数
+              </span>
+            </el-form-item>
+          </el-form>
+        </el-col>
+      </el-row>
+    </el-card>
+    <br />
+    <el-card class="box-card">
+      <el-table :data="tableData" style="width: 100%">
+        <el-table-column prop="range" label="上报周期" width="200" />
+        <el-table-column
+          prop="raw_client_online_user"
+          label="客户端活跃用户数"
+        />
+        <el-table-column prop="raw_web_online_user" label="端外H5日活数" />
+        <el-table-column
+          prop="raw_client_avg_duration"
+          label="客户端日人均使用时长(毫秒)"
+        />
+      </el-table>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { getHistory } from '@/api/index';
+
+// import { ElMessage } from 'element-plus';
+import 'element-plus/lib/theme-chalk/el-message.css';
+export default {
+  name: 'Report',
+  data() {
+    return {
+      tableData: [],
+      form: {
+        raw_client_online_user: 0,
+        raw_web_online_user: 0,
+        raw_client_avg_duration: 0
+      }
+    };
+  },
+  mounted() {
+    const dataBase = {
+      app: '起点新闻',
+      lib: '1'
+    };
+    const initData = [];
+    const initData1 = [];
+
+    const li = this.getMonthlyDateRanges('2025-01-01');
+    for (let i = 0; i < li.length - 1; i++) {
+      initData.push({
+        ...li[i],
+        ...dataBase
+      });
+      initData1.push({
+        ...li[i],
+        ...dataBase,
+        lib: '2'
+      });
+    }
+    const end = new Array(initData.length).fill({});
+    let status = 0;
+    Promise.all(initData.map(v => getHistory(v))).then(list => {
+      for (let i = 0; i < list.length; i++) {
+        const v = list[i];
+        end[i].raw_client_online_user = v.total.avgUser.value;
+        let durationUserAll = 0;
+        for (let o = 0; o < (v.list || []).length; o++) {
+          const val = (v.list || [])[o];
+          durationUserAll += val.durationUser;
+        }
+        end[i].raw_client_avg_duration = (
+          (durationUserAll / v.list.length) *
+          1000
+        ).toFixed(0);
+
+        end[i] = {
+          ...end[i],
+          range: initData[i].start + ':' + initData[i].end
+        };
+      }
+      ++status >= 2 && this.getend(end);
+    });
+    Promise.all(initData1.map(v => getHistory(v))).then(list => {
+      for (let i = 0; i < list.length; i++) {
+        const v = list[i];
+        end[i].raw_web_online_user = v.total.avgUser.value;
+      }
+      ++status >= 2 && this.getend(end);
+    });
+  },
+  computed: {},
+  methods: {
+    getend(end) {
+      const item = end.pop()
+      this.form = {
+        range: item.range, 
+        raw_client_online_user: item.raw_client_online_user,
+        raw_web_online_user: item.raw_web_online_user,
+        raw_client_avg_duration: item.raw_client_avg_duration
+      }
+      this.tableData = end;
+    },
+
+    getMonthlyDateRanges(startDate) {
+      const currentDate = new Date(startDate);
+      const today = new Date();
+      const ranges = [];
+
+      // 初始化到起始日期的当月第一天
+      currentDate.setDate(1);
+
+      while (currentDate <= today) {
+        const monthStart = new Date(currentDate);
+        const monthEnd = new Date(currentDate);
+
+        // 计算月末（下个月的第0天即当前月最后一天）
+        monthEnd.setMonth(monthEnd.getMonth() + 1, 0);
+
+        ranges.push({
+          start: this.formatDate(monthStart),
+          end: this.formatDate(monthEnd)
+        });
+
+        // 跳转到下个月的第一天
+        currentDate.setMonth(currentDate.getMonth() + 1);
+      }
+
+      return ranges;
+    },
+
+    // 日期格式化辅助函数
+    formatDate(date) {
+      return date.toISOString().split('T')[0]; // 输出YYYY-MM-DD格式
+    }
+  },
+  components: {}
+};
+</script>
+
+<style>
+.SingleDay {
+  margin: 10px 15px;
+}
+.SingleDay .nowrap .cell {
+  white-space: nowrap;
+}
+.tip {
+  margin-left: 1em;
+  color: #999;
+}
+</style>