adminInfo.vue 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
  1. <style>
  2. .admin-info .ant-list-item-content {
  3. display: flex;
  4. justify-content: space-around;
  5. }
  6. .admin-info .ant-table-middle tr.ant-table-expanded-row td > .ant-table-wrapper {
  7. margin: -12px -9px -13px;
  8. }
  9. </style>
  10. <template>
  11. <div class="admin-info">
  12. <a-row :gutter="10" style="margin-top:10px">
  13. <a-col :span="24">
  14. <a-card
  15. style="width:100%;"
  16. :tabList="tabListNoTitle"
  17. :activeTabKey="noTitleKey"
  18. @tabChange="key => onTabChange(key, 'noTitleKey')"
  19. >
  20. 角色选择:
  21. <a-select
  22. style="width:300px;margin-bottom:30px"
  23. placeholder="请选择角色类型"
  24. v-model="type"
  25. @change="getData"
  26. >
  27. <a-select-option :value="1">设计</a-select-option>
  28. <a-select-option :value="2">优化</a-select-option>
  29. </a-select>
  30. <a-button type="primary" style="margin-left:10px" @click="addUser">搜索</a-button>
  31. <a-table :columns="columns" :dataSource="dataList" bordered :loading="loading" size="middle">
  32. <span slot-scope="text" slot="videoUrl">
  33. <video class="video" :src="text" controls="controls" style="height:200px">
  34. 您的浏览器不支持 video 标签。
  35. </video>
  36. </span>
  37. <span slot="action" slot-scope="text, record">
  38. <a :disabled="record.effiVideoCount == 0" @click="toDetail(record)">查看详情</a>
  39. </span>
  40. </a-table>
  41. </a-card>
  42. </a-col>
  43. </a-row>
  44. </div>
  45. </template>
  46. <script>
  47. import ACol from 'ant-design-vue/es/grid/Col'
  48. import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
  49. import { getAction, postAction } from '@/api/manage'
  50. import { mapGetters } from 'vuex'
  51. import qs from 'qs'
  52. const columns = [
  53. {
  54. title: '姓名',
  55. dataIndex: 'realname',
  56. key: 'realname',
  57. align: 'center',
  58. width: 200
  59. },
  60. {
  61. title: '角色',
  62. dataIndex: 'roleName',
  63. key: 'roleName',
  64. align: 'center'
  65. },
  66. {
  67. title: '有效视频数量',
  68. dataIndex: 'effiVideoCount',
  69. key: 'effiVideoCount',
  70. align: 'center'
  71. },
  72. {
  73. title: '总视频数量',
  74. dataIndex: 'videoCount',
  75. key: 'videoCount',
  76. align: 'center'
  77. },
  78. // {
  79. // title: '消耗',
  80. // dataIndex: 'cost',
  81. // key: 'cost',
  82. // align: 'center'
  83. // },
  84. {
  85. title: '操作',
  86. dataIndex: 'action',
  87. key: 'action',
  88. align: 'center',
  89. scopedSlots: {
  90. customRender: 'action'
  91. }
  92. }
  93. ]
  94. const columnsYou = [
  95. {
  96. title: '姓名',
  97. dataIndex: 'realname',
  98. key: 'realname',
  99. align: 'center',
  100. width: 200
  101. },
  102. {
  103. title: '角色',
  104. dataIndex: 'roleName',
  105. key: 'roleName',
  106. align: 'center'
  107. },
  108. {
  109. title: '总消耗',
  110. dataIndex: 'cost',
  111. key: 'effiVideoCount',
  112. align: 'center'
  113. },
  114. {
  115. title: '操作',
  116. dataIndex: 'action',
  117. key: 'action',
  118. align: 'center',
  119. scopedSlots: {
  120. customRender: 'action'
  121. }
  122. }
  123. ]
  124. export default {
  125. name: 'admin-info',
  126. components: {
  127. ATooltip,
  128. ACol
  129. },
  130. data: function() {
  131. return {
  132. type: 1,
  133. title: '工作台',
  134. loading: false,
  135. rankList: [],
  136. tabListNoTitle: [
  137. {
  138. key: 'kuaishou',
  139. tab: '快手'
  140. },
  141. {
  142. key: 'toutiao',
  143. tab: '头条'
  144. }
  145. ],
  146. noTitleKey: 'kuaishou',
  147. a: '',
  148. columns: columns,
  149. dataList: []
  150. }
  151. },
  152. methods: {
  153. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  154. addUser() {
  155. this.loading = true
  156. if (this.noTitleKey == 'kuaishou') {
  157. if (this.type == 1) {
  158. this.columns = columns
  159. this.getKuaishouList()
  160. } else if (this.type == 2) {
  161. this.columns = columnsYou
  162. this.getKuaishouYouHuaList()
  163. }
  164. } else if (this.noTitleKey == 'toutiao') {
  165. if (this.type == 1) {
  166. this.columns = columns
  167. this.getToutiaoList()
  168. } else if (this.type == 2) {
  169. this.columns = columnsYou
  170. this.getToutiaoYouHuaList()
  171. }
  172. }
  173. },
  174. getData(data) {
  175. this.dataList = []
  176. this.loading = false
  177. },
  178. onTabChange(key, type) {
  179. console.log(key, type)
  180. this.type = 1
  181. this.columns = columns
  182. this[type] = key
  183. this.dataList = []
  184. this.loading = false
  185. // if (key == 'kuaishou') {
  186. // this.getKuaishouList()
  187. // } else if (key == 'toutiao') {
  188. // this.getToutiaoList()
  189. // }
  190. },
  191. toDetail(item) {
  192. localStorage.setItem('detailUserId', item.userId)
  193. localStorage.setItem('appType', this.noTitleKey)
  194. localStorage.setItem('roleData', this.type)
  195. this.$router.replace({
  196. path: '/achievements/adminDetail'
  197. })
  198. },
  199. getKuaishouList() {
  200. postAction('/ctop/performance2/kuaishouPerformanceInfoNow', '').then(res => {
  201. console.log(res)
  202. if (res.success) {
  203. this.loading = false
  204. this.dataList = res.result.map((item, index) => {
  205. return {
  206. ...item,
  207. key: index
  208. }
  209. })
  210. } else {
  211. this.loading = false
  212. this.$message.error(res.message)
  213. }
  214. })
  215. },
  216. getToutiaoList() {
  217. postAction('/ctop/performance2/toutiaoPerformanceInfoNow', '').then(res => {
  218. console.log(res)
  219. if (res.success) {
  220. this.loading = false
  221. this.dataList = res.result.map((item, index) => {
  222. return {
  223. ...item,
  224. key: index
  225. }
  226. })
  227. } else {
  228. this.loading = false
  229. this.$message.error(res.message)
  230. }
  231. })
  232. },
  233. getKuaishouYouHuaList() {
  234. postAction('/ctop/performance2/kuaishouYouhuaPerformanceInfoNow', '').then(res => {
  235. console.log(res)
  236. if (res.success) {
  237. this.loading = false
  238. this.dataList = res.result.map((item, index) => {
  239. return {
  240. ...item,
  241. key: index
  242. }
  243. })
  244. } else {
  245. this.loading = false
  246. this.$message.error(res.message)
  247. }
  248. })
  249. },
  250. getToutiaoYouHuaList() {
  251. postAction('/ctop/performance2/toutiaoYouhuaPerformanceInfoNow', '').then(res => {
  252. console.log(res)
  253. if (res.success) {
  254. this.loading = false
  255. this.dataList = res.result.map((item, index) => {
  256. return {
  257. ...item,
  258. key: index
  259. }
  260. })
  261. } else {
  262. this.loading = false
  263. this.$message.error(res.message)
  264. }
  265. })
  266. }
  267. },
  268. created() {
  269. // this.getKuaishouList()
  270. }
  271. }
  272. </script>