Merge remote-tracking branch 'origin/starv_master'

src/api/index.js

@@ -1229,3 +1229,16 @@ export function getCategoryCnt(data) {
     data,
   });
 }
+
+/**
+ * 素材贡献量排行榜分类数据
+ * @return {AxjxPromise}
+ */
+export function getCategoryType(data) {
+  return ajax({
+    urlType: "rankApi",
+    url: "/article/categoryType",
+    method: "GET",
+    data,
+  });
+}

src/router/rank.js

@@ -41,6 +41,13 @@ const rankRouter = [
         component: () =>
             import(/* webpackChunkName: "MaterialContribution" */ "../views/Ranking/MaterialContribution.vue"),
     },
+    //   用户停留排行
+    {
+        path: "/userStayRanking",
+        name: "userStayRanking",
+        component: () =>
+            import(/* webpackChunkName: "UserStayRanking" */ "../views/Ranking/UserStayRanking.vue"),
+    }
 ];
 
 export default rankRouter;

src/views/Ranking/UserStayRanking.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="manuscriptIssued">
+    <el-loading></el-loading>
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+      <el-breadcrumb-item>全媒体平台</el-breadcrumb-item>
+      <el-breadcrumb-item>用户停留排行</el-breadcrumb-item>
+    </el-breadcrumb>
+    <div class="groupType">
+      <el-row class="mb-4">
+        <el-button
+          v-for="(cur, ind) in tabs.btns"
+          :key="ind"
+          :class="cur == btnFocus ? 'btnFocus' : ''"
+          @click="handleClick(cur)"
+          >{{ cur }}</el-button
+        >
+      </el-row>
+    </div>
+    <div class="card-rank">
+      <div>
+        <el-table :data="tableData" header-row-class-name="card-tabs-header">
+          <el-table-column align="center" prop="title" label="文章" />
+          <el-table-column align="center" prop="duration" label="时长/秒" />
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { getCategoryCnt, getCategoryType } from "@/api/index";
+
+const ElLoading = require("element-plus/lib/el-loading/index");
+import "element-plus/lib/theme-chalk/el-loading.css";
+
+export default {
+  name: "userStayRanking",
+  data() {
+    return {
+      activeName: 1,
+      btnFocus: "",
+      tabs: {
+        name: "用户停留排行",
+        btns: [],
+      },
+      tableData: [],
+      typeData: [],
+    };
+  },
+  mounted() {
+    this.setFansCntTypeData();
+  },
+  methods: {
+    handleClick(e) {
+      this.btnFocus = e;
+      this.setTableData();
+    },
+    setTableData() {
+      const that = this;
+      this.tableData = [];
+      this.curPage = 0;
+      this.load = ElLoading.default.service();
+      getCategoryCnt({ type: this.btnFocus })
+        .then((res) => {
+          that.total = res.length;
+          that.tableData = res;
+          that.load.close();
+        })
+        .catch((err) => {
+          that.tableData = [];
+          console.log("catch", err);
+        });
+    },
+    setFansCntTypeData() {
+      const that = this;
+      getCategoryType()
+        .then((res) => {
+          const [item] = res;
+          that.btnFocus = item;
+          that.tabs.btns = res;
+          that.setTableData();
+        })
+        .catch((err) => {
+          that.tabs.btns = [];
+          console.log("catch", err);
+        });
+    },
+  },
+};
+</script>
+<style>
+.manuscriptIssued {
+  margin: 10px;
+}
+.card-tabs,
+.el-tabs__header {
+  padding: 0 100px;
+}
+.groupType {
+  padding: 15px 0;
+  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.12);
+}
+.card-rank {
+  padding: 10px 15px;
+  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+.card-rank div {
+  width: 100%;
+}
+h4 {
+  text-align: left;
+  color: #e18116;
+  margin-bottom: 50px;
+  font-weight: bold;
+}
+.card-tabs-header th {
+  background: #f5f7fa !important;
+}
+.btnFocus {
+  color:#FFF !important;
+  border-color:#409eff !important;
+  background-color:#409eff !important;
+}
+</style>