optimize.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377
  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.totalMediaTask }}元 -->
  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.totalPersonalCost + ''"
  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.totalPersonalTask + ''"
  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. @expand="expand"
  83. >
  84. <span slot-scope="text" slot="videoUrl">
  85. <video class="video" :src="text" controls="controls" style="height:200px">
  86. 您的浏览器不支持 video 标签。
  87. </video>
  88. </span>
  89. <a-table
  90. slot="expandedRowRender"
  91. slot-scope="record"
  92. :columns="innerColumns"
  93. :dataSource="record.innerData"
  94. :loading="record.showDetail"
  95. size="middle"
  96. >
  97. </a-table>
  98. </a-table>
  99. <template class="ant-card-actions" slot="actions" v-if="dataList.length > 3">
  100. <div @click="getAll('visibleVideo')">查看更多</div>
  101. </template>
  102. </a-card>
  103. </a-col>
  104. </a-row>
  105. <a-row :gutter="24">
  106. <!-- <a-col :span="8">
  107. <a-card :loading="loading" :bordered="false" title="当前可获得绩效" :style="{ marginTop: '24px' }">
  108. <div style="height:250px;text-align:center;line-height:230px;font-size:80px">
  109. {{ dataCount.performance }}
  110. </div>
  111. </a-card>
  112. </a-col> -->
  113. <a-col :span="24">
  114. <a-card :loading="loading" :bordered="false" title="消耗排行" :style="{ marginTop: '24px' }">
  115. <div style="height:200px">
  116. <a-list itemLayout="horizontal" :dataSource="dataRanking">
  117. <a-list-item slot="renderItem" slot-scope="item, index">
  118. <a-list-item-meta style="width:50%">
  119. <div slot="description"></div>
  120. <a slot="title" style="font-size:16px"
  121. ><span style="display:inline-block;width:100px">{{ item.realName }}</span
  122. ><span style="margin-left:20px">总消耗:{{ item.totalCost }}元</span></a
  123. >
  124. <a-avatar slot="avatar" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
  125. </a-list-item-meta>
  126. <div></div>
  127. <div style="text-align:center">
  128. <img
  129. v-if="index == 0"
  130. 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"
  131. alt=""
  132. style="height:40px;"
  133. />
  134. <img
  135. v-if="index == 1"
  136. 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"
  137. alt=""
  138. style="height:40px;"
  139. />
  140. <img
  141. v-if="index == 2"
  142. src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=748734891,2113250735&fm=26&gp=0.jpg"
  143. alt=""
  144. style="height:40px"
  145. />
  146. </div>
  147. </a-list-item>
  148. </a-list>
  149. </div>
  150. <!-- <template class="ant-card-actions" slot="actions">
  151. <div @click="getAll('visible')">查看更多</div>
  152. </template> -->
  153. </a-card>
  154. </a-col>
  155. </a-row>
  156. <a-modal title="人员排名" :visible="visible" @ok="handleOk('visible')" @cancel="handleCancel('visible')">
  157. <a-list itemLayout="horizontal" :dataSource="dataRanking">
  158. <a-list-item slot="renderItem" slot-scope="item">
  159. <a-list-item-meta style="width:50%">
  160. {{ item }}
  161. <div slot="description">总消耗:{{ item.totalCost }}元</div>
  162. <a slot="title" href="https://vue.ant.design/">{{ item.realName }}</a>
  163. <a-avatar slot="avatar" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
  164. </a-list-item-meta>
  165. <div></div>
  166. </a-list-item>
  167. </a-list>
  168. </a-modal>
  169. <a-modal
  170. title="账户跑量"
  171. :visible="visibleVideo"
  172. @ok="handleOk('visibleVideo')"
  173. @cancel="handleCancel('visibleVideo')"
  174. >
  175. <a-table :columns="columns" :dataSource="dataList" bordered :loading="loading" size="middle" :pagination="false">
  176. </a-table>
  177. </a-modal>
  178. </div>
  179. </template>
  180. <script>
  181. import ChartCard from '@/components/ChartCard'
  182. import ACol from 'ant-design-vue/es/grid/Col'
  183. import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
  184. import MiniArea from '@/components/chart/MiniArea'
  185. import MiniBar from '@/components/chart/MiniBar'
  186. import MiniProgress from '@/components/chart/MiniProgress'
  187. import RankList from '@/components/chart/RankList'
  188. import Bar from '@/components/chart/Bar'
  189. import LineChartMultid from '@/components/chart/LineChartMultid'
  190. import HeadInfo from '@/components/tools/HeadInfo.vue'
  191. import Trend from '@/components/Trend'
  192. import { getAction } from '@/api/manage'
  193. import { mapGetters } from 'vuex'
  194. import qs from 'qs'
  195. const barData = []
  196. for (let i = 0; i < 12; i += 1) {
  197. barData.push({
  198. x: `${i + 1}月`,
  199. y: Math.floor(Math.random() * 1000) + 200
  200. })
  201. }
  202. const columns = [
  203. {
  204. title: '项目',
  205. dataIndex: 'projectName',
  206. key: 'projectName',
  207. align: 'center',
  208. scopedSlots: { customRender: 'projectName' },
  209. width: 200
  210. },
  211. {
  212. title: '年份',
  213. dataIndex: 'year',
  214. key: 'year',
  215. align: 'center'
  216. },
  217. {
  218. title: '季度',
  219. dataIndex: 'quarter',
  220. key: 'quarter',
  221. align: 'center'
  222. },
  223. {
  224. title: '总消耗(元)',
  225. dataIndex: 'totalCost',
  226. key: 'totalCost',
  227. align: 'center'
  228. }
  229. ]
  230. export default {
  231. name: 'design',
  232. components: {
  233. ATooltip,
  234. ACol,
  235. ChartCard,
  236. MiniArea,
  237. MiniBar,
  238. MiniProgress,
  239. RankList,
  240. Bar,
  241. Trend,
  242. LineChartMultid,
  243. HeadInfo
  244. },
  245. data: function() {
  246. return {
  247. title: '工作台',
  248. loginfo: {},
  249. barData,
  250. visitInfo: [],
  251. visitFields: ['ip', 'visit'],
  252. loading: false,
  253. childrenLoading: false,
  254. rankList: [],
  255. tabListNoTitle: [
  256. {
  257. key: 'kuaishou',
  258. tab: '快手'
  259. }
  260. // {
  261. // key: 'toutiao',
  262. // tab: '头条'
  263. // }
  264. ],
  265. noTitleKey: 'kuaishou',
  266. dataCount: {
  267. personalTask: 0,
  268. royaltyRatio: null,
  269. mediaTask: 0,
  270. totalCost: 0,
  271. totalRoyalty: 0
  272. },
  273. a: '',
  274. columns,
  275. dataList: [],
  276. dataListTop: [],
  277. innerColumns: [
  278. {
  279. title: '素材账户',
  280. dataIndex: 'accountName',
  281. key: 'accountName',
  282. align: 'center'
  283. },
  284. {
  285. title: '总消耗(元)',
  286. dataIndex: 'totalCost',
  287. key: 'totalCost',
  288. align: 'center'
  289. }
  290. ],
  291. // innerData: [
  292. // { key: 1, videoAccount: 'aabbcc', servingAccount: 'ttyyhh', cost: 34234.43 },
  293. // { key: 2, videoAccount: 'aabbcc', servingAccount: 'ttyyhh', cost: 34234.43 }
  294. // ],
  295. dataRanking: [],
  296. visible: false,
  297. visibleVideo: false
  298. }
  299. },
  300. methods: {
  301. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  302. getAll(item) {
  303. this[item] = true
  304. },
  305. handleOk(item) {
  306. this[item] = false
  307. },
  308. handleCancel(item) {
  309. console.log('Clicked cancel button')
  310. this[item] = false
  311. },
  312. onTabChange(key, type) {
  313. console.log(key, type)
  314. this[type] = key
  315. },
  316. expand(expanded, record) {
  317. var param = {}
  318. param.appType = 2
  319. param.projectId = record.projectId
  320. record.showDetail = true
  321. if (expanded) {
  322. getAction('/ctop/performance/account/list', param).then(res => {
  323. if (res.success) {
  324. record.innerData = res.data.map((item, index) => {
  325. return {
  326. ...item,
  327. key: index
  328. }
  329. })
  330. record.showDetail = false
  331. }
  332. if (res.code === 510) {
  333. this.$message.warning(res.message)
  334. }
  335. record.showDetail = false
  336. })
  337. } else {
  338. record.innerData = []
  339. }
  340. }
  341. },
  342. created() {
  343. getAction('/ctop/performanceOptimizer/detail', { mediaType: 2 }).then(res => {
  344. console.log(res)
  345. if (res.success) {
  346. this.dataCount = res.userDetail
  347. }
  348. })
  349. getAction('/ctop/performanceOptimizer/ranking/list').then(res => {
  350. console.log(res)
  351. if (res.success) {
  352. this.dataRanking.push(...res.data)
  353. }
  354. })
  355. getAction('/ctop/performance/project/list', { appType: 2 }).then(res => {
  356. if (res.success) {
  357. this.dataList = res.data.map(item => {
  358. return {
  359. ...item,
  360. innerData: [],
  361. showDetail: false
  362. }
  363. })
  364. }
  365. })
  366. // /ctop/materialInfo/report
  367. }
  368. }
  369. </script>