projectDetail.vue 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208
  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="mediaId">
  16. {{ text == 1 ? '头条' : '快手' }}
  17. </span>
  18. <span slot="quarter" slot-scope="text, record">
  19. {{ record.year + '年第' + record.quarter + '季度' }}
  20. </span>
  21. <span slot="startDate" slot-scope="text, record">
  22. {{ record.startDate + '~' + record.endDate }}
  23. </span>
  24. <span slot="action" slot-scope="text, record">
  25. <a :disabled="record.cost == 0 || record.cost == null" @click="toDetail(record)">查看详情</a>
  26. </span>
  27. </a-table>
  28. </a-card>
  29. </a-col>
  30. </a-row>
  31. </div>
  32. </template>
  33. <script>
  34. import ChartCard from '@/components/ChartCard'
  35. import ACol from 'ant-design-vue/es/grid/Col'
  36. import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
  37. import MiniArea from '@/components/chart/MiniArea'
  38. import MiniBar from '@/components/chart/MiniBar'
  39. import MiniProgress from '@/components/chart/MiniProgress'
  40. import RankList from '@/components/chart/RankList'
  41. import Bar from '@/components/chart/Bar'
  42. import LineChartMultid from '@/components/chart/LineChartMultid'
  43. import HeadInfo from '@/components/tools/HeadInfo.vue'
  44. import Trend from '@/components/Trend'
  45. import { getAction, postAction } from '@/api/manage'
  46. import { mapGetters } from 'vuex'
  47. import qs from 'qs'
  48. const barData = []
  49. for (let i = 0; i < 12; i += 1) {
  50. barData.push({
  51. x: `${i + 1}月`,
  52. y: Math.floor(Math.random() * 1000) + 200
  53. })
  54. }
  55. const columns = [
  56. {
  57. title: '项目名称',
  58. dataIndex: 'projectName',
  59. key: 'projectName',
  60. align: 'center'
  61. },
  62. {
  63. title: '账户id',
  64. dataIndex: 'accountId',
  65. key: 'accountId',
  66. align: 'center'
  67. },
  68. {
  69. title: '账户运营',
  70. dataIndex: 'userName',
  71. key: 'userName',
  72. align: 'center'
  73. },
  74. {
  75. title: '广告主名称',
  76. dataIndex: 'advertiserName',
  77. key: 'advertiserName',
  78. align: 'center'
  79. },
  80. {
  81. title: '授权名称',
  82. dataIndex: 'authName',
  83. key: 'authName',
  84. align: 'center'
  85. },
  86. {
  87. title: '季度消耗',
  88. dataIndex: 'cost',
  89. key: 'cost',
  90. align: 'center'
  91. },
  92. {
  93. title: '媒体类型',
  94. dataIndex: 'mediaId',
  95. key: 'mediaId',
  96. align: 'center',
  97. scopedSlots: { customRender: 'mediaId' }
  98. },
  99. {
  100. title: '绩效年度',
  101. dataIndex: 'quarter',
  102. key: 'quarter',
  103. align: 'center',
  104. scopedSlots: { customRender: 'quarter' }
  105. },
  106. {
  107. title: '运营所属时间段',
  108. dataIndex: 'startDate',
  109. key: 'startDate',
  110. align: 'center',
  111. scopedSlots: { customRender: 'startDate' }
  112. },
  113. {
  114. title: '视频详情',
  115. dataIndex: 'action',
  116. key: 'action',
  117. align: 'center',
  118. scopedSlots: { customRender: 'action' }
  119. }
  120. ]
  121. export default {
  122. name: 'admin-info',
  123. components: {
  124. ATooltip,
  125. ACol
  126. },
  127. data: function() {
  128. return {
  129. title: '工作台',
  130. loginfo: {},
  131. barData,
  132. visitInfo: [],
  133. visitFields: ['ip', 'visit'],
  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. toDetail(item) {
  155. localStorage.setItem('videoAccountId', item.accountId)
  156. localStorage.setItem('videoAppType', item.mediaId)
  157. localStorage.setItem('videoYear', item.year)
  158. localStorage.setItem('videoQuarter', item.quarter)
  159. this.$router.replace({
  160. path: '/Statistics/projectVideo'
  161. })
  162. }
  163. },
  164. filters: {
  165. roleName: function(value) {
  166. var status = {
  167. clip: '剪辑',
  168. shot: '拍摄',
  169. plan: '策划',
  170. plane: '平面'
  171. }
  172. return status[value]
  173. }
  174. },
  175. created() {
  176. var userId = localStorage.getItem('projectStatisticsId')
  177. var appType = localStorage.getItem('projectAppType') == 'kuaishou' ? 2 : 1
  178. var type = localStorage.getItem('projectYear')
  179. var weekDate = localStorage.getItem('projectQuarter')
  180. postAction('/ctop/performance2/getQuarterAccountDetail', {
  181. year: type,
  182. quarter: weekDate,
  183. appType: appType,
  184. projectId: userId
  185. }).then(res => {
  186. if (res.success) {
  187. this.dataList = res.result.map((item, index) => {
  188. return {
  189. ...item,
  190. key: index
  191. }
  192. })
  193. } else {
  194. this.$message.error(res.message)
  195. }
  196. })
  197. }
  198. }
  199. </script>