projectVideo.vue 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230
  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. <h3 style="margin:20px 0">当前账户总消耗为:{{ sumAll }}</h3>
  8. <a-table
  9. :columns="columns"
  10. :dataSource="dataList"
  11. bordered
  12. :loading="loading"
  13. size="middle"
  14. :pagination="true"
  15. >
  16. <span slot-scope="text" slot="creativeUrl">
  17. <video class="video" :src="text" controls="controls" style="height:200px" v-if="text">
  18. 您的浏览器不支持 video 标签。
  19. </video>
  20. <div v-else>
  21. 暂无视频
  22. </div>
  23. </span>
  24. <span slot="shot" slot-scope="text">{{ text ? text : '-' }}</span>
  25. <span slot="plan" slot-scope="text">{{ text ? text : '-' }}</span>
  26. <span slot="plane" slot-scope="text">{{ text ? text : '-' }}</span>
  27. <span slot="clip" slot-scope="text">{{ text ? text : '-' }}</span>
  28. </a-table>
  29. </a-card>
  30. </a-col>
  31. </a-row>
  32. </div>
  33. </template>
  34. <script>
  35. import ChartCard from '@/components/ChartCard'
  36. import ACol from 'ant-design-vue/es/grid/Col'
  37. import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
  38. import MiniArea from '@/components/chart/MiniArea'
  39. import MiniBar from '@/components/chart/MiniBar'
  40. import MiniProgress from '@/components/chart/MiniProgress'
  41. import RankList from '@/components/chart/RankList'
  42. import Bar from '@/components/chart/Bar'
  43. import LineChartMultid from '@/components/chart/LineChartMultid'
  44. import HeadInfo from '@/components/tools/HeadInfo.vue'
  45. import Trend from '@/components/Trend'
  46. import { getAction, postAction } from '@/api/manage'
  47. import { mapGetters } from 'vuex'
  48. import qs from 'qs'
  49. const barData = []
  50. for (let i = 0; i < 12; i += 1) {
  51. barData.push({
  52. x: `${i + 1}月`,
  53. y: Math.floor(Math.random() * 1000) + 200
  54. })
  55. }
  56. const columns = [
  57. {
  58. title: '视频',
  59. dataIndex: 'creativeUrl',
  60. key: 'creativeUrl',
  61. align: 'center',
  62. scopedSlots: {
  63. customRender: 'creativeUrl'
  64. },
  65. width: 200
  66. },
  67. {
  68. title: '账户消耗',
  69. dataIndex: 'charge',
  70. key: 'charge',
  71. align: 'center',
  72. scopedSlots: {
  73. customRender: 'charge'
  74. }
  75. },
  76. {
  77. title: '拍摄',
  78. dataIndex: 'shot',
  79. key: 'shot',
  80. align: 'center',
  81. scopedSlots: {
  82. customRender: 'shot'
  83. }
  84. },
  85. {
  86. title: '编导',
  87. dataIndex: 'plan',
  88. key: 'plan',
  89. align: 'center',
  90. scopedSlots: {
  91. customRender: 'plan'
  92. }
  93. },
  94. {
  95. title: '平面',
  96. dataIndex: 'plane',
  97. key: 'plane',
  98. align: 'center',
  99. scopedSlots: {
  100. customRender: 'plane'
  101. }
  102. },
  103. {
  104. title: '剪辑',
  105. dataIndex: 'clip',
  106. key: 'clip',
  107. align: 'center',
  108. scopedSlots: {
  109. customRender: 'clip'
  110. }
  111. }
  112. ]
  113. function sum(arr) {
  114. var len = arr.length
  115. if (len == 0) {
  116. return 0
  117. } else if (len == 1) {
  118. return arr[0]
  119. } else {
  120. return arr[0] + sum(arr.slice(1))
  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. sumAll: null
  153. }
  154. },
  155. methods: {
  156. ...mapGetters(['nickname', 'avatar', 'userInfo'])
  157. },
  158. filters: {
  159. roleName: function(value) {
  160. var status = {
  161. clip: '剪辑',
  162. shot: '拍摄',
  163. plan: '策划',
  164. plane: '平面'
  165. }
  166. return status[value]
  167. }
  168. },
  169. created() {
  170. var userId = localStorage.getItem('videoAccountId')
  171. var appType = localStorage.getItem('videoAppType')
  172. // == 'kuaishou' ? 2 : 1
  173. var type = localStorage.getItem('videoYear')
  174. var weekDate = localStorage.getItem('videoQuarter')
  175. if (appType == '2') {
  176. // /ctop/performance2/getKuaishouQuarterVideoInfoByAccountId
  177. postAction('/ctop/performance2/getKuaishouQuarterVideoInfoByAccountId', {
  178. year: type,
  179. quarter: weekDate,
  180. accountId: userId
  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. var sumAll = this.dataList.map(item => {
  190. return item.charge
  191. })
  192. this.sumAll = sum(sumAll)
  193. } else {
  194. this.$message.error(res.message)
  195. }
  196. })
  197. } else {
  198. postAction('/ctop/performance2/getToutiaoQuarterVideoInfoByAccountId', {
  199. year: type,
  200. quarter: weekDate,
  201. accountId: userId
  202. }).then(res => {
  203. if (res.success) {
  204. this.dataList = res.result.map((item, index) => {
  205. return {
  206. ...item,
  207. key: index
  208. }
  209. })
  210. var sumAll = this.dataList.map(item => {
  211. return item.charge
  212. })
  213. this.sumAll = sum(sumAll)
  214. } else {
  215. this.$message.error(res.message)
  216. }
  217. })
  218. }
  219. }
  220. }
  221. </script>