LiveStreamingUser.vue 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  1. <template>
  2. <div class="manuscriptIssued">
  3. <el-loading></el-loading>
  4. <el-breadcrumb separator-class="el-icon-arrow-right">
  5. <el-breadcrumb-item>全媒体平台</el-breadcrumb-item>
  6. <el-breadcrumb-item>直播在线用户数排行榜</el-breadcrumb-item>
  7. </el-breadcrumb>
  8. <div class="groupType">
  9. <el-row class="mb-4">
  10. <el-button
  11. v-for="cur in tabs.btns"
  12. :key="cur.value"
  13. :class="cur.value == btnFocus ? 'btnFocus' : ''"
  14. @click="handleClick(cur)"
  15. >{{ cur.label }}</el-button
  16. >
  17. </el-row>
  18. </div>
  19. <div class="card-rank">
  20. <div>
  21. <h4>日榜</h4>
  22. <el-table :data="dayData" header-row-class-name="card-tabs-header">
  23. <el-table-column align="center" prop="name" :label="subTitle" />
  24. <el-table-column align="center" prop="cnt" label="用户数" />
  25. </el-table>
  26. </div>
  27. <div>
  28. <h4>周榜</h4>
  29. <el-table :data="weekData" header-row-class-name="card-tabs-header">
  30. <el-table-column align="center" prop="name" :label="subTitle" />
  31. <el-table-column align="center" prop="cnt" label="用户数" />
  32. </el-table>
  33. </div>
  34. <div>
  35. <h4>月榜</h4>
  36. <el-table :data="monthData" header-row-class-name="card-tabs-header">
  37. <el-table-column align="center" prop="name" :label="subTitle" />
  38. <el-table-column align="center" prop="cnt" label="用户数" />
  39. </el-table>
  40. </div>
  41. </div>
  42. </div>
  43. </template>
  44. <script>
  45. import { getLiveCnt } from "@/api/index";
  46. const ElLoading = require("element-plus/lib/el-loading/index");
  47. import "element-plus/lib/theme-chalk/el-loading.css";
  48. export default {
  49. name: "ManuscriptIssued",
  50. data() {
  51. return {
  52. activeName: 1,
  53. btnFocus: "center",
  54. title: "中心",
  55. subTitle: "中心名称",
  56. tabs: {
  57. name: "直播热度排行榜",
  58. code: 1,
  59. btns: [
  60. {
  61. label: "中心榜",
  62. value: "center",
  63. title: "中心名称",
  64. },
  65. {
  66. label: "人员榜",
  67. value: "user",
  68. title: "人员名称",
  69. },
  70. // {
  71. // label: "中心内部榜",
  72. // value: 2,
  73. // title:"中心名称"
  74. // },
  75. {
  76. label: "部门内部人员榜",
  77. value: "depart",
  78. title: "部门名称",
  79. },
  80. ],
  81. },
  82. dayData: [],
  83. weekData: [],
  84. monthData: [],
  85. };
  86. },
  87. mounted() {
  88. this.setTableData();
  89. },
  90. methods: {
  91. handleClick(e) {
  92. this.title = e.label.substring(0, e.label.length - 1);
  93. this.btnFocus = e.value;
  94. this.subTitle = e.title;
  95. this.setTableData();
  96. },
  97. setTableData() {
  98. const that = this;
  99. this.load = ElLoading.default.service();
  100. getLiveCnt({ type: this.btnFocus,target:"cnt" })
  101. .then((res) => {
  102. const { day, week, month } = res;
  103. that.dayData = day;
  104. that.weekData = week;
  105. that.monthData = month;
  106. that.load.close();
  107. })
  108. .catch((err) => {
  109. that.dayData = [];
  110. that.weekData = [];
  111. that.monthData = [];
  112. console.log("catch", err);
  113. });
  114. },
  115. },
  116. };
  117. </script>
  118. <style>
  119. .manuscriptIssued {
  120. margin: 10px;
  121. }
  122. .card-tabs,
  123. .el-tabs__header {
  124. padding: 0 100px;
  125. }
  126. .groupType {
  127. padding: 15px 10px;
  128. box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.12);
  129. }
  130. .card-rank {
  131. padding: 10px 15px;
  132. box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  133. display: flex;
  134. align-items: flex-start;
  135. justify-content: space-between;
  136. }
  137. .card-rank > div {
  138. width: 32%;
  139. }
  140. h4 {
  141. text-align: left;
  142. color: #e18116;
  143. margin-bottom: 50px;
  144. font-weight: bold;
  145. }
  146. .card-tabs-header th {
  147. background: #f5f7fa !important;
  148. }
  149. .btnFocus {
  150. color: #fff !important;
  151. border-color: #409eff !important;
  152. background-color: #409eff !important;
  153. }
  154. </style>