big_data_ott/src/views/Ranking/ManuscriptDissemination.vue

<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 in tabs.btns"
          :key="cur.value"
          :class="cur.value == btnFocus ? 'btnFocus' : ''"
          @click="handleClick(cur)"
          >{{ cur.label }}</el-button
        >
      </el-row>
    </div>
    <div class="card-rank">
      <div>
        <h4>{{title}}日榜</h4>
        <el-table
          :data="dayData"
          header-row-class-name="card-tabs-header"
        >
          <el-table-column align="center" prop="name" :label="subTitle" />
          <el-table-column align="center" prop="cnt" label="传播量" />
        </el-table>
      </div>
      <div>
        <h4>{{title}}周榜</h4>
        <el-table
          :data="weekData"
          header-row-class-name="card-tabs-header"
        >
          <el-table-column align="center" prop="name" :label="subTitle" />
          <el-table-column align="center" prop="cnt" label="传播量" />
        </el-table>
      </div>
      <div>
        <h4>{{title}}月榜</h4>
        <el-table
          :data="monthData"
          header-row-class-name="card-tabs-header"
        >
          <el-table-column align="center" prop="name" :label="subTitle" />
          <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",
      title:"分中心",
      subTitle:"中心名称",
      tabs: {
        name: "稿件传播量排行榜",
        code: 1,
        btns: [
          {
            label: "分中心榜",
            value: "center",
            title:"中心名称"
          },
          {
            label: "人员榜",
            value: "user",
            title:"人员名称"
          },
          // {
          //   label: "中心内部榜",
          //   value: 2,
          //   title:"中心名称"
          // },
          {
            label: "部门内部人员榜",
            value: "depart",
            title:"部门名称"
          },
        ],
      },
      dayData: [],
      weekData: [],
      monthData: [],
    };
  },
  mounted() {
    this.setTableData();
  },
  methods: {
    handleClick(e) {
      this.title=e.label.substring(0,e.label.length-1);
      this.btnFocus = e.value;
      this.subTitle = e.title;
      this.setTableData();
    },
    setTableData() {
      const that = this;
      this.load = ElLoading.default.service();
      getArticlePv({ type: this.btnFocus })
        .then((res) => {
          const { day, week, month } = res;
          that.dayData = day;
          that.weekData = week;
          that.monthData = month;
          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 10px;
  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: 32%;
}
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>