adminDetail.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  1. <style>
  2. </style>
  3. <template>
  4. <div class="admin-detail">
  5. <a-row :gutter="10" style="margin-top:10px">
  6. <a-col :span="24">
  7. <a-card style="width:100%;">
  8. <a-table :columns="columns" :dataSource="dataList" bordered :loading="loading" size="middle"
  9. :pagination="false">
  10. <span slot-scope="text" slot="url">
  11. <video class="video" :src="text" controls="controls" style="height:200px">
  12. 您的浏览器不支持 video 标签。
  13. </video>
  14. </span>
  15. </a-table>
  16. </a-card>
  17. </a-col>
  18. </a-row>
  19. </div>
  20. </template>
  21. <script>
  22. import ChartCard from '@/components/ChartCard'
  23. import ACol from 'ant-design-vue/es/grid/Col'
  24. import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
  25. import MiniArea from '@/components/chart/MiniArea'
  26. import MiniBar from '@/components/chart/MiniBar'
  27. import MiniProgress from '@/components/chart/MiniProgress'
  28. import RankList from '@/components/chart/RankList'
  29. import Bar from '@/components/chart/Bar'
  30. import LineChartMultid from '@/components/chart/LineChartMultid'
  31. import HeadInfo from '@/components/tools/HeadInfo.vue'
  32. import Trend from '@/components/Trend'
  33. import {
  34. getAction,
  35. postAction
  36. } from '@/api/manage'
  37. import {
  38. mapGetters
  39. } from 'vuex'
  40. import qs from 'qs'
  41. const barData = []
  42. for (let i = 0; i < 12; i += 1) {
  43. barData.push({
  44. x: `${i + 1}月`,
  45. y: Math.floor(Math.random() * 1000) + 200
  46. })
  47. }
  48. const columns = [{
  49. title: '视频',
  50. dataIndex: 'url',
  51. key: 'url',
  52. align: 'center',
  53. scopedSlots: {
  54. customRender: 'url'
  55. },
  56. width: 200
  57. },
  58. {
  59. title: '素材名称',
  60. dataIndex: 'materialName',
  61. key: 'materialName',
  62. align: 'center'
  63. },
  64. {
  65. title: '水印素材名称',
  66. dataIndex: 'watermarkMaterialName',
  67. key: 'watermarkMaterialName',
  68. align: 'center'
  69. },
  70. {
  71. title: 'md5',
  72. dataIndex: 'code',
  73. key: 'code',
  74. align: 'center'
  75. },
  76. ]
  77. export default {
  78. name: 'admin-info',
  79. components: {
  80. ATooltip,
  81. ACol,
  82. },
  83. data: function () {
  84. return {
  85. title: '工作台',
  86. loginfo: {},
  87. barData,
  88. visitInfo: [],
  89. visitFields: ['ip', 'visit'],
  90. loading: false,
  91. rankList: [],
  92. tabListNoTitle: [{
  93. key: 'kuaishou',
  94. tab: '快手'
  95. },
  96. {
  97. key: 'toutiao',
  98. tab: '头条'
  99. }
  100. ],
  101. noTitleKey: 'kuaishou',
  102. a: '',
  103. columns,
  104. dataList: [],
  105. }
  106. },
  107. methods: {
  108. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  109. },
  110. created() {
  111. var userId = localStorage.getItem('detailUserId')
  112. var appType = localStorage.getItem('appType') == 'kuaishou' ? 2 : 1
  113. postAction('/ctop/performance2/getEffiVideoList', {
  114. "year": 2019,
  115. "quarter": 4,
  116. "userId": userId,
  117. "appType": appType
  118. }).then(res => {
  119. if (res.success) {
  120. this.dataList = res.result.map((item, index) => {
  121. return {
  122. ...item,
  123. key: index,
  124. }
  125. })
  126. } else {
  127. this.$message.error(res.message)
  128. }
  129. })
  130. }
  131. }
  132. </script>