optimize.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349
  1. <style>
  2. .design .ant-list-item-content {
  3. display: flex;
  4. justify-content: space-around;
  5. }
  6. .design .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="design">
  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. 媒体任务:{{ dataCount.mediaTask }}元
  21. <a-row :gutter="24" style="margin-top:15px">
  22. <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
  23. <chart-card
  24. :loading="loading"
  25. title="总消耗(元)"
  26. :total="dataCount.totalCost + ''"
  27. style="border: 1px solid #e8e8e8;"
  28. >
  29. <a-tooltip title="指标说明" slot="action">
  30. <a-icon type="info-circle-o" />
  31. </a-tooltip>
  32. <template slot="footer"> </template>
  33. </chart-card>
  34. </a-col>
  35. <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
  36. <chart-card
  37. :loading="loading"
  38. title="季度任务(元)"
  39. :total="dataCount.personalTask + ''"
  40. style="border: 1px solid #e8e8e8;"
  41. >
  42. <a-tooltip title="指标说明" slot="action">
  43. <a-icon type="info-circle-o" />
  44. </a-tooltip>
  45. <template slot="footer"> </template>
  46. </chart-card>
  47. </a-col>
  48. <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
  49. <chart-card
  50. :loading="loading"
  51. title="提点比例"
  52. :total="dataCount.royaltyRatio ? dataCount.royaltyRatio : '0‰'"
  53. style="border: 1px solid #e8e8e8;"
  54. >
  55. <a-tooltip title="指标说明" slot="action">
  56. <a-icon type="info-circle-o" />
  57. </a-tooltip>
  58. <template slot="footer"> </template>
  59. </chart-card>
  60. </a-col>
  61. <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
  62. <chart-card
  63. :loading="loading"
  64. title="当前可获绩效"
  65. :total="dataCount.totalRoyalty + ''"
  66. style="border: 1px solid #e8e8e8;"
  67. >
  68. <a-tooltip title="指标说明" slot="action">
  69. <a-icon type="info-circle-o" />
  70. </a-tooltip>
  71. <template slot="footer"> </template>
  72. </chart-card>
  73. </a-col>
  74. </a-row>
  75. <a-table
  76. :columns="columns"
  77. :dataSource="dataList"
  78. bordered
  79. :loading="loading"
  80. size="middle"
  81. :pagination="false"
  82. >
  83. <span slot-scope="text" slot="videoUrl">
  84. <video class="video" :src="text" controls="controls" style="height:200px">
  85. 您的浏览器不支持 video 标签。
  86. </video>
  87. </span>
  88. <a-table slot="expandedRowRender" :columns="innerColumns" :dataSource="innerData" :pagination="false">
  89. </a-table>
  90. </a-table>
  91. <template class="ant-card-actions" slot="actions" v-if="dataList.length > 3">
  92. <div @click="getAll('visibleVideo')">查看更多</div>
  93. </template>
  94. </a-card>
  95. </a-col>
  96. </a-row>
  97. <a-row :gutter="24">
  98. <!-- <a-col :span="8">
  99. <a-card :loading="loading" :bordered="false" title="当前可获得绩效" :style="{ marginTop: '24px' }">
  100. <div style="height:250px;text-align:center;line-height:230px;font-size:80px">
  101. {{ dataCount.performance }}
  102. </div>
  103. </a-card>
  104. </a-col> -->
  105. <a-col :span="24">
  106. <a-card :loading="loading" :bordered="false" title="消耗排行" :style="{ marginTop: '24px' }">
  107. <div style="height:200px">
  108. <a-list itemLayout="horizontal" :dataSource="dataRanking">
  109. <a-list-item slot="renderItem" slot-scope="item, index">
  110. <a-list-item-meta style="width:50%">
  111. <div slot="description"></div>
  112. <a slot="title" style="font-size:16px"
  113. ><span style="display:inline-block;width:100px">{{ item.realName }}</span
  114. ><span style="margin-left:20px">总消耗:{{ item.totalCost }}</span></a
  115. >
  116. <a-avatar slot="avatar" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
  117. </a-list-item-meta>
  118. <div></div>
  119. <div style="text-align:center">
  120. <img
  121. v-if="index == 0"
  122. src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576727589&di=a65392c20b9187cab794c2d5c0bb836b&imgtype=jpg&er=1&src=http%3A%2F%2F58pic.ooopic.com%2F58pic%2F12%2F83%2F98%2F42R58PICEnd.jpg"
  123. alt=""
  124. style="height:40px;"
  125. />
  126. <img
  127. v-if="index == 1"
  128. src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576137652175&di=d648da94b779e32a96233faa7b6ae64b&imgtype=0&src=http%3A%2F%2Fwww.51pptmoban.com%2Fd%2Ffile%2F2017%2F05%2F31%2F14c7fdd5e99d7159b9fc21dbba2d5583.png"
  129. alt=""
  130. style="height:40px;"
  131. />
  132. <img
  133. v-if="index == 2"
  134. src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=748734891,2113250735&fm=26&gp=0.jpg"
  135. alt=""
  136. style="height:40px"
  137. />
  138. </div>
  139. </a-list-item>
  140. </a-list>
  141. </div>
  142. <template class="ant-card-actions" slot="actions">
  143. <div @click="getAll('visible')">查看更多</div>
  144. </template>
  145. </a-card>
  146. </a-col>
  147. </a-row>
  148. <a-modal title="人员排名" :visible="visible" @ok="handleOk('visible')" @cancel="handleCancel('visible')">
  149. <a-list itemLayout="horizontal" :dataSource="dataRanking">
  150. <a-list-item slot="renderItem" slot-scope="item, index">
  151. <a-list-item-meta style="width:50%">
  152. {{ item }}
  153. <div slot="description">总消耗:{{ item.totalCost }}</div>
  154. <a slot="title" href="https://vue.ant.design/">{{ item.realName }}</a>
  155. <a-avatar slot="avatar" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
  156. </a-list-item-meta>
  157. <div></div>
  158. </a-list-item>
  159. </a-list>
  160. </a-modal>
  161. <a-modal
  162. title="有效视频"
  163. :visible="visibleVideo"
  164. @ok="handleOk('visibleVideo')"
  165. @cancel="handleCancel('visibleVideo')"
  166. >
  167. <a-table :columns="columns" :dataSource="dataList" bordered :loading="loading" size="middle" :pagination="false">
  168. </a-table>
  169. </a-modal>
  170. </div>
  171. </template>
  172. <script>
  173. import ChartCard from '@/components/ChartCard'
  174. import ACol from 'ant-design-vue/es/grid/Col'
  175. import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
  176. import MiniArea from '@/components/chart/MiniArea'
  177. import MiniBar from '@/components/chart/MiniBar'
  178. import MiniProgress from '@/components/chart/MiniProgress'
  179. import RankList from '@/components/chart/RankList'
  180. import Bar from '@/components/chart/Bar'
  181. import LineChartMultid from '@/components/chart/LineChartMultid'
  182. import HeadInfo from '@/components/tools/HeadInfo.vue'
  183. import Trend from '@/components/Trend'
  184. import { getAction } from '@/api/manage'
  185. import { mapGetters } from 'vuex'
  186. const barData = []
  187. for (let i = 0; i < 12; i += 1) {
  188. barData.push({
  189. x: `${i + 1}月`,
  190. y: Math.floor(Math.random() * 1000) + 200
  191. })
  192. }
  193. const columns = [
  194. {
  195. title: '素材',
  196. dataIndex: 'videoUrl',
  197. key: 'videoUrl',
  198. align: 'center',
  199. scopedSlots: { customRender: 'videoUrl' },
  200. width: 200
  201. },
  202. {
  203. title: '素材跑量',
  204. dataIndex: 'videoCost',
  205. key: 'videoCost',
  206. align: 'center'
  207. },
  208. {
  209. title: '封面点击数',
  210. dataIndex: 'pageClickCount',
  211. key: 'pageClickCount',
  212. align: 'center'
  213. },
  214. {
  215. title: '封面曝光数',
  216. dataIndex: 'pageExposureCount',
  217. key: 'pageExposureCount',
  218. align: 'center'
  219. },
  220. {
  221. title: '行为数',
  222. dataIndex: 'behaviorCount',
  223. key: 'behaviorCount',
  224. align: 'center'
  225. }
  226. ]
  227. export default {
  228. name: 'design',
  229. components: {
  230. ATooltip,
  231. ACol,
  232. ChartCard,
  233. MiniArea,
  234. MiniBar,
  235. MiniProgress,
  236. RankList,
  237. Bar,
  238. Trend,
  239. LineChartMultid,
  240. HeadInfo
  241. },
  242. data: function() {
  243. return {
  244. title: '工作台',
  245. loginfo: {},
  246. barData,
  247. visitInfo: [],
  248. visitFields: ['ip', 'visit'],
  249. loading: false,
  250. rankList: [],
  251. tabListNoTitle: [
  252. {
  253. key: 'kuaishou',
  254. tab: '快手'
  255. },
  256. {
  257. key: 'toutiao',
  258. tab: '头条'
  259. }
  260. ],
  261. noTitleKey: 'kuaishou',
  262. dataCount: {
  263. effiVideoCount: 70, //有效数
  264. videoCount: 200, //素材总数
  265. effiRate: 40, //有效率
  266. performance: 20000, //当前绩效
  267. cost: 20000 // 总消耗
  268. },
  269. a: '',
  270. columns,
  271. dataList: [
  272. {
  273. key: 1,
  274. videoUrl:
  275. 'https://ctop-media.oss-cn-beijing.aliyuncs.com/video/2019-12-14/%E9%AB%98%E6%B8%85-1576318874426.mp4',
  276. videoCost: 34.56,
  277. pageClickCount: 1200,
  278. pageExposureCount: 3939,
  279. behaviorCount: 5000
  280. }
  281. ],
  282. innerColumns: [
  283. {
  284. title: '素材账户',
  285. dataIndex: 'videoAccount',
  286. key: 'videoAccount',
  287. align: 'center'
  288. },
  289. {
  290. title: '投放账户',
  291. dataIndex: 'servingAccount',
  292. key: 'servingAccount',
  293. align: 'center'
  294. },
  295. {
  296. title: '跑量',
  297. dataIndex: 'cost',
  298. key: 'cost',
  299. align: 'center'
  300. }
  301. ],
  302. innerData: [
  303. { key: 1, videoAccount: 'aabbcc', servingAccount: 'ttyyhh', cost: 34234.43 },
  304. { key: 2, videoAccount: 'aabbcc', servingAccount: 'ttyyhh', cost: 34234.43 }
  305. ],
  306. dataRanking: [],
  307. visible: false,
  308. visibleVideo: false
  309. }
  310. },
  311. methods: {
  312. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  313. getAll(item) {
  314. this[item] = true
  315. },
  316. handleOk(item) {
  317. this[item] = false
  318. },
  319. handleCancel(item) {
  320. console.log('Clicked cancel button')
  321. this[item] = false
  322. },
  323. onTabChange(key, type) {
  324. console.log(key, type)
  325. this[type] = key
  326. }
  327. },
  328. created() {
  329. getAction('/ctop/performanceOptimizer/detail', { mediaType: 2 }).then(res => {
  330. console.log(res)
  331. this.dataCount = res.userDetail
  332. })
  333. getAction('/ctop/performanceOptimizer/ranking/list').then(res => {
  334. console.log(res)
  335. if (res.success) {
  336. this.dataRanking.push(...res.data)
  337. }
  338. })
  339. // /ctop/materialInfo/report
  340. }
  341. }
  342. </script>