已发稿件数量排行榜，稿件传播量排行榜

src/api/index.js

@@ -1107,3 +1107,31 @@ export function getUserActivity(data) {
     data,
   });
 }
+
+
+/**
+ * 已发稿件数量排行榜
+ * @return {AxjxPromise}
+ */
+export function getArticleCnt(data) {
+  return ajax({
+    urlType: "rankApi",
+    url: "/article/articleCnt",
+    method: "GET",
+    data,
+  });
+}
+
+
+/**
+ * 稿件传播量排行榜
+ * @return {AxjxPromise}
+ */
+export function getArticlePv(data) {
+  return ajax({
+    urlType: "rankApi",
+    url: "/article/articlePv",
+    method: "GET",
+    data,
+  });
+}

src/config/index.js

@@ -3,7 +3,8 @@ let url = "http://172.16.101.20:8762/cxzx-kuyun",
   url2 = "http://172.16.101.20:8762/cxzx-program",
   kuyunApi = "http://172.16.101.20:8762/cxzx-fm",
   guijiApi = "http://topic.smcic.net",
-  leverAudience = "http://172.16.101.20:8762";
+  leverAudience = "http://172.16.101.20:8762",
+  rankApi = "http://10.30.162.15:8082";
 let base = "";
 // let isRelease = false; //是否是线上发布版本
 if (process.env.NODE_ENV !== "development") {
@@ -12,6 +13,7 @@ if (process.env.NODE_ENV !== "development") {
   url2 = base + "/cxzx-program";
   kuyunApi = base + "/cxzx-fm";
   leverAudience = base;
+  rankApi = base;
   //   isRelease = true;
 }
 
@@ -23,6 +25,7 @@ export default {
     leverAudience,
     kuyunApi,
     guijiApi,
+    rankApi,
     adAPI: "http://topic.smcic.net",
     timeout: 60000,
     // isRelease,

src/router/index.js

@@ -1,5 +1,6 @@
 import { createRouter, createWebHashHistory } from "vue-router";
 import countryRouter from "./country";
+import rankRouter from "./rank";
 const routes = [
   {
     path: "/",
@@ -199,7 +200,7 @@ const routes = [
     component: () =>
       import(/* webpackChunkName: "newMediaOverview" */ "../views/NMedia/ActivityUser.vue"),
   },
-
+  ...rankRouter,
   countryRouter, // 全国数据
 ];
 // 实时/单期 节目流入流出 共计2个  可以使用同一模块

src/router/rank.js

@@ -0,0 +1,18 @@
+const rankRouter = [
+    //   已发稿件排行
+    {
+        path: "/manuscriptIssued",
+        name: "manuscriptIssued",
+        component: () =>
+            import("../views/Ranking/ManuscriptIssued.vue"),
+    },
+    //   稿件传播量排行榜
+    {
+        path: "/ManuscriptDissemination",
+        name: "ManuscriptDissemination",
+        component: () =>
+            import("../views/Ranking/ManuscriptDissemination.vue"),
+    },
+];
+
+export default rankRouter;

src/views/Ranking/ManuscriptDissemination.vue

@@ -0,0 +1,169 @@
+<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-item>稿件传播量排行榜</el-breadcrumb-item>
+    </el-breadcrumb>
+    <div class="groupType">
+      <el-row class="mb-4">
+        <el-button
+          v-for="cur in tabs.btns"
+          :key="cur.value"
+          :type="cur.value == btnFocus ? 'primary' : ''"
+          @click="handleClick(cur)"
+          >{{ cur.label }}</el-button
+        >
+      </el-row>
+    </div>
+    <div class="card-rank">
+      <div>
+        <h4>分中心日榜</h4>
+        <el-table
+          :data="dayData"
+          header-row-class-name="card-tabs-header"
+          :height="tabHigh"
+        >
+          <el-table-column align="center" prop="name" label="关键词" />
+          <el-table-column align="center" prop="cnt" label="次数" />
+        </el-table>
+      </div>
+      <div>
+        <h4>分中心周榜</h4>
+        <el-table
+          :data="weekData"
+          header-row-class-name="card-tabs-header"
+          :height="tabHigh"
+        >
+          <el-table-column align="center" prop="name" label="关键词" />
+          <el-table-column align="center" prop="cnt" label="次数" />
+        </el-table>
+      </div>
+      <div>
+        <h4>分中心月榜</h4>
+        <el-table
+          :data="monthData"
+          header-row-class-name="card-tabs-header"
+          :height="tabHigh"
+        >
+          <el-table-column align="center" prop="name" label="关键词" />
+          <el-table-column align="center" prop="cnt" label="次数" />
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { getArticlePv } from "@/api/index";
+
+const ElLoading = require("element-plus/lib/el-loading/index");
+import "element-plus/lib/theme-chalk/el-loading.css";
+
+export default {
+  name: "ManuscriptDissemination",
+  data() {
+    return {
+      activeName: 1,
+      btnFocus: "center",
+      tabs: {
+        name: "稿件传播量排行榜",
+        code: 1,
+        btns: [
+          {
+            label: "分中心榜",
+            value: "center",
+          },
+          {
+            label: "人员榜",
+            value: "user",
+          },
+          {
+            label: "中心内部榜",
+            value: 2,
+          },
+          {
+            label: "部门内部人员榜",
+            value: 3,
+          },
+        ],
+      },
+      dayData: [],
+      weekData: [],
+      monthData: [],
+      tabHigh: 600,
+    };
+  },
+  mounted() {
+    this.setTableData();
+  },
+  methods: {
+    handleClick(e) {
+      this.btnFocus = e.value;
+      this.setTableData();
+    },
+    setTableData() {
+      const that = this;
+      if (!this.load) this.load = ElLoading.default.service();
+      getArticlePv({ type: this.btnFocus })
+        .then((res) => {
+          const { day, week, month } = res;
+          const len = month.length + 1;
+          that.dayData = day;
+          that.weekData = week;
+          that.monthData = month;
+          that.tabHigh = len > 15 ? 48 * len : 600;
+          that.load.close();
+        })
+        .catch((err) => {
+          that.dayData = [];
+          that.weekData = [];
+          that.monthData = [];
+          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;
+  border: 1px solid #dcdfe6;
+  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.card-rank > div {
+  width: 32%;
+}
+h4 {
+  text-align: left;
+  color: #e18116;
+  margin-bottom: 50px;
+  font-weight: bold;
+}
+.card-tabs-header th {
+  background: #f5f7fa !important;
+}
+</style>

src/views/Ranking/ManuscriptIssued.vue

@@ -0,0 +1,169 @@
+<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-item>已发稿件数量排行榜</el-breadcrumb-item>
+    </el-breadcrumb>
+    <div class="groupType">
+      <el-row class="mb-4">
+        <el-button
+          v-for="cur in tabs.btns"
+          :key="cur.value"
+          :type="cur.value == btnFocus ? 'primary' : ''"
+          @click="handleClick(cur)"
+          >{{ cur.label }}</el-button
+        >
+      </el-row>
+    </div>
+    <div class="card-rank">
+      <div>
+        <h4>分中心日榜</h4>
+        <el-table
+          :data="dayData"
+          header-row-class-name="card-tabs-header"
+          :height="tabHigh"
+        >
+          <el-table-column align="center" prop="name" label="关键词" />
+          <el-table-column align="center" prop="cnt" label="次数" />
+        </el-table>
+      </div>
+      <div>
+        <h4>分中心周榜</h4>
+        <el-table
+          :data="weekData"
+          header-row-class-name="card-tabs-header"
+          :height="tabHigh"
+        >
+          <el-table-column align="center" prop="name" label="关键词" />
+          <el-table-column align="center" prop="cnt" label="次数" />
+        </el-table>
+      </div>
+      <div>
+        <h4>分中心月榜</h4>
+        <el-table
+          :data="monthData"
+          header-row-class-name="card-tabs-header"
+          :height="tabHigh"
+        >
+          <el-table-column align="center" prop="name" label="关键词" />
+          <el-table-column align="center" prop="cnt" label="次数" />
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { getArticleCnt } from "@/api/index";
+
+const ElLoading = require("element-plus/lib/el-loading/index");
+import "element-plus/lib/theme-chalk/el-loading.css";
+
+export default {
+  name: "ManuscriptIssued",
+  data() {
+    return {
+      activeName: 1,
+      btnFocus: "center",
+      tabs: {
+        name: "已发稿件数量排行榜",
+        code: 1,
+        btns: [
+          {
+            label: "分中心榜",
+            value: "center",
+          },
+          {
+            label: "人员榜",
+            value: "user",
+          },
+          {
+            label: "中心内部榜",
+            value: 2,
+          },
+          {
+            label: "部门内部人员榜",
+            value: 3,
+          },
+        ],
+      },
+      dayData: [],
+      weekData: [],
+      monthData: [],
+      tabHigh: 600,
+    };
+  },
+  mounted() {
+    this.setTableData();
+  },
+  methods: {
+    handleClick(e) {
+      this.btnFocus = e.value;
+      this.setTableData();
+    },
+    setTableData() {
+      const that = this;
+      if (!this.load) this.load = ElLoading.default.service();
+      getArticleCnt({ type: this.btnFocus })
+        .then((res) => {
+          const { day, week, month } = res;
+          const len = month.length + 1;
+          that.dayData = day;
+          that.weekData = week;
+          that.monthData = month;
+          that.tabHigh = len > 15 ? 48 * len : 600;
+          that.load.close();
+        })
+        .catch((err) => {
+          that.dayData = [];
+          that.weekData = [];
+          that.monthData = [];
+          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;
+  border: 1px solid #dcdfe6;
+  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.card-rank > div {
+  width: 32%;
+}
+h4 {
+  text-align: left;
+  color: #e18116;
+  margin-bottom: 50px;
+  font-weight: bold;
+}
+.card-tabs-header th {
+  background: #f5f7fa !important;
+}
+</style>