design.vue 12 KB

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