allDetail.vue 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263
  1. <style></style>
  2. <template>
  3. <div class="admin-detail">
  4. <a-row :gutter="10" style="margin-top:10px">
  5. <a-col :span="24">
  6. <a-card style="width:100%;">
  7. <a-table
  8. :columns="columns"
  9. :dataSource="dataList"
  10. bordered
  11. :loading="loading"
  12. size="middle"
  13. :pagination="false"
  14. >
  15. <span slot-scope="text" slot="url">
  16. <video class="video" :src="text" controls="controls" style="height:200px">
  17. 您的浏览器不支持 video 标签。
  18. </video>
  19. </span>
  20. <span slot="videoRoleCode" slot-scope="text">
  21. {{ text | roleName }}
  22. </span>
  23. </a-table>
  24. </a-card>
  25. </a-col>
  26. </a-row>
  27. </div>
  28. </template>
  29. <script>
  30. import ChartCard from '@/components/ChartCard'
  31. import ACol from 'ant-design-vue/es/grid/Col'
  32. import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
  33. import MiniArea from '@/components/chart/MiniArea'
  34. import MiniBar from '@/components/chart/MiniBar'
  35. import MiniProgress from '@/components/chart/MiniProgress'
  36. import RankList from '@/components/chart/RankList'
  37. import Bar from '@/components/chart/Bar'
  38. import LineChartMultid from '@/components/chart/LineChartMultid'
  39. import HeadInfo from '@/components/tools/HeadInfo.vue'
  40. import Trend from '@/components/Trend'
  41. import { getAction, postAction } from '@/api/manage'
  42. import { mapGetters } from 'vuex'
  43. import qs from 'qs'
  44. const barData = []
  45. for (let i = 0; i < 12; i += 1) {
  46. barData.push({
  47. x: `${i + 1}月`,
  48. y: Math.floor(Math.random() * 1000) + 200
  49. })
  50. }
  51. const columns = [
  52. {
  53. title: '视频',
  54. dataIndex: 'url',
  55. key: 'url',
  56. align: 'center',
  57. scopedSlots: {
  58. customRender: 'url'
  59. },
  60. width: 200
  61. },
  62. {
  63. title: '素材名称',
  64. dataIndex: 'materialName',
  65. key: 'materialName',
  66. align: 'center'
  67. },
  68. {
  69. title: '本职角色',
  70. dataIndex: 'originRoleName',
  71. key: 'originRoleName',
  72. align: 'center'
  73. },
  74. {
  75. title: '担任角色',
  76. dataIndex: 'videoRoleCode',
  77. key: 'videoRoleCode',
  78. scopedSlots: {
  79. customRender: 'videoRoleCode'
  80. },
  81. align: 'center'
  82. },
  83. {
  84. title: '设计师',
  85. dataIndex: 'realname',
  86. key: 'realname',
  87. align: 'center'
  88. }
  89. ]
  90. // 账户名、项目名、优化师姓名、当季消耗、授权名称
  91. const columnsYou = [
  92. {
  93. title: '账户',
  94. dataIndex: 'advertiserName',
  95. key: 'advertiserName',
  96. align: 'center'
  97. },
  98. {
  99. title: '项目',
  100. dataIndex: 'projectName',
  101. key: 'projectName',
  102. align: 'center'
  103. },
  104. {
  105. title: '优化师',
  106. dataIndex: 'userName',
  107. key: 'userName',
  108. align: 'center'
  109. },
  110. {
  111. title: '当季消耗',
  112. dataIndex: 'totalCost',
  113. key: 'totalCost',
  114. align: 'center'
  115. },
  116. {
  117. title: '授权名称',
  118. dataIndex: 'authName',
  119. key: 'authName',
  120. align: 'center'
  121. }
  122. ]
  123. export default {
  124. name: 'admin-info',
  125. components: {
  126. ATooltip,
  127. ACol
  128. },
  129. data: function() {
  130. return {
  131. title: '工作台',
  132. loginfo: {},
  133. barData,
  134. visitInfo: [],
  135. visitFields: ['ip', 'visit'],
  136. loading: false,
  137. rankList: [],
  138. tabListNoTitle: [
  139. {
  140. key: 'kuaishou',
  141. tab: '快手'
  142. },
  143. {
  144. key: 'toutiao',
  145. tab: '头条'
  146. }
  147. ],
  148. noTitleKey: 'kuaishou',
  149. a: '',
  150. columns: columns,
  151. dataList: []
  152. }
  153. },
  154. methods: {
  155. ...mapGetters(['nickname', 'avatar', 'userInfo'])
  156. },
  157. filters: {
  158. roleName: function(value) {
  159. var status = {
  160. clip: '剪辑',
  161. shot: '拍摄',
  162. plan: '策划',
  163. plane: '平面'
  164. }
  165. return status[value]
  166. }
  167. },
  168. created() {
  169. var userId = localStorage.getItem('detailUserId')
  170. var appType = localStorage.getItem('appType') == 'kuaishou' ? 2 : 1
  171. var type = localStorage.getItem('roleData')
  172. var weekDate = localStorage.getItem('weekDate').split('~')
  173. var typeAll = localStorage.getItem('typeAll')
  174. if (typeAll == 'all') {
  175. this.columns = columns
  176. postAction('/ctop/performance2/getVideoList', {
  177. startDate: weekDate[0],
  178. endDate: weekDate[1],
  179. userId: userId,
  180. appType: appType
  181. }).then(res => {
  182. if (res.success) {
  183. this.dataList = res.result.map((item, index) => {
  184. return {
  185. ...item,
  186. key: index
  187. }
  188. })
  189. } else {
  190. this.$message.error(res.message)
  191. }
  192. })
  193. } else {
  194. if (type == 1) {
  195. this.columns = columns
  196. postAction('/ctop/performance2/getWeekEffiVideoList', {
  197. startDate: weekDate[0],
  198. endDate: weekDate[1],
  199. userId: userId,
  200. appType: appType
  201. }).then(res => {
  202. if (res.success) {
  203. this.dataList = res.result.map((item, index) => {
  204. return {
  205. ...item,
  206. key: index
  207. }
  208. })
  209. } else {
  210. this.$message.error(res.message)
  211. }
  212. })
  213. } else if (type == 2) {
  214. this.columns = columnsYou
  215. if (appType == 2) {
  216. postAction('/ctop/performance2/getKuaiShouYouhuaAccountsList', {
  217. startDate: weekDate[0],
  218. endDate: weekDate[1],
  219. userId: userId,
  220. appType: appType
  221. }).then(res => {
  222. if (res.success) {
  223. this.dataList = res.result.map((item, index) => {
  224. return {
  225. ...item,
  226. key: index
  227. }
  228. })
  229. } else {
  230. this.$message.error(res.message)
  231. }
  232. })
  233. } else {
  234. postAction('/ctop/performance2/getToutiaoYouhuaAccountsList', {
  235. startDate: weekDate[0],
  236. endDate: weekDate[1],
  237. userId: userId,
  238. appType: appType
  239. }).then(res => {
  240. if (res.success) {
  241. this.dataList = res.result.map((item, index) => {
  242. return {
  243. ...item,
  244. key: index
  245. }
  246. })
  247. } else {
  248. this.$message.error(res.message)
  249. }
  250. })
  251. }
  252. }
  253. }
  254. }
  255. }
  256. </script>