|
@@ -9,37 +9,57 @@
|
|
|
</style>
|
|
|
<template>
|
|
|
<div class="design">
|
|
|
- <a-row :gutter="24" style="margin-top:15px">
|
|
|
- <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
|
|
|
- <chart-card :loading="loading" title="有效数" :total="dataCount.effiVideoCount + ''">
|
|
|
- <a-tooltip title="两周视频跑量超过5000的素材数" slot="action">
|
|
|
- <a-icon type="info-circle-o" />
|
|
|
- </a-tooltip>
|
|
|
- <template slot="footer"> </template>
|
|
|
- </chart-card>
|
|
|
- </a-col>
|
|
|
- <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
|
|
|
- <chart-card :loading="loading" title="素材总数" :total="dataCount.videoCount + ''">
|
|
|
- <a-tooltip title="当前季度到目前为止的上传视频总数量" slot="action">
|
|
|
- <a-icon type="info-circle-o" />
|
|
|
- </a-tooltip>
|
|
|
- <template slot="footer"> </template>
|
|
|
- </chart-card>
|
|
|
- </a-col>
|
|
|
- <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
|
|
|
- <chart-card :loading="loading" title="有效率" :total="dataCount.effiRate ? dataCount.effiRate + '%' : '0%'">
|
|
|
- <a-tooltip title="当前季度到目前为止的有效率" slot="action">
|
|
|
- <a-icon type="info-circle-o" />
|
|
|
- </a-tooltip>
|
|
|
- <template slot="footer"> </template>
|
|
|
- </chart-card>
|
|
|
- </a-col>
|
|
|
- <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
|
|
|
- <chart-card :loading="loading" title="总消耗" :total="dataCount.cost + ''">
|
|
|
- <a-tooltip title="所有素材当前季度的总消耗" slot="action">
|
|
|
- <a-icon type="info-circle-o" />
|
|
|
- </a-tooltip>
|
|
|
- <!-- <div>
|
|
|
+ <a-row :gutter="10" style="margin-top:10px">
|
|
|
+ <a-col :span="24">
|
|
|
+ <a-card
|
|
|
+ style="width:100%;"
|
|
|
+ :tabList="tabListNoTitle"
|
|
|
+ :activeTabKey="noTitleKey"
|
|
|
+ @tabChange="key => onTabChange(key, 'noTitleKey')"
|
|
|
+ >
|
|
|
+ <a-row :gutter="24" style="margin-top:15px">
|
|
|
+ <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
|
|
|
+ <chart-card
|
|
|
+ :loading="loading"
|
|
|
+ title="上季度有效数"
|
|
|
+ :total="dataCount.effiVideoCount + ''"
|
|
|
+ style="border: 1px solid #e8e8e8;"
|
|
|
+ >
|
|
|
+ <template slot="footer"> </template>
|
|
|
+ </chart-card>
|
|
|
+ </a-col>
|
|
|
+ <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
|
|
|
+ <chart-card
|
|
|
+ :loading="loading"
|
|
|
+ title="上季度素材总数"
|
|
|
+ :total="dataCount.videoCount + ''"
|
|
|
+ style="border: 1px solid #e8e8e8;"
|
|
|
+ >
|
|
|
+ <template slot="footer"> </template>
|
|
|
+ </chart-card>
|
|
|
+ </a-col>
|
|
|
+ <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
|
|
|
+ <chart-card
|
|
|
+ :loading="loading"
|
|
|
+ title="上季度有效率"
|
|
|
+ :total="
|
|
|
+ dataCount.effiVideoCount && dataCount.videoCount
|
|
|
+ ? (dataCount.effiVideoCount / dataCount.videoCount).toFixed(4) * 100 + '%'
|
|
|
+ : '0%'
|
|
|
+ "
|
|
|
+ style="border: 1px solid #e8e8e8;"
|
|
|
+ >
|
|
|
+ <template slot="footer"> </template>
|
|
|
+ </chart-card>
|
|
|
+ </a-col>
|
|
|
+ <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
|
|
|
+ <chart-card
|
|
|
+ :loading="loading"
|
|
|
+ title="上季度绩效"
|
|
|
+ :total="dataCount.performance ? dataCount.performance.toFixed(2) + '' : '0'"
|
|
|
+ style="border: 1px solid #e8e8e8;"
|
|
|
+ >
|
|
|
+ <!-- <div>
|
|
|
<trend flag="up" style="margin-right: 16px;">
|
|
|
<span slot="term">周同比</span>
|
|
|
12%
|
|
@@ -49,19 +69,10 @@
|
|
|
11%
|
|
|
</trend>
|
|
|
</div> -->
|
|
|
- <template slot="footer"> </template>
|
|
|
- </chart-card>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
-
|
|
|
- <a-row :gutter="10" style="margin-top:10px">
|
|
|
- <a-col :span="24">
|
|
|
- <a-card
|
|
|
- style="width:100%;"
|
|
|
- :tabList="tabListNoTitle"
|
|
|
- :activeTabKey="noTitleKey"
|
|
|
- @tabChange="key => onTabChange(key, 'noTitleKey')"
|
|
|
- >
|
|
|
+ <template slot="footer"> </template>
|
|
|
+ </chart-card>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
<a-table
|
|
|
:columns="columns"
|
|
|
:dataSource="dataList"
|
|
@@ -92,68 +103,6 @@
|
|
|
</a-card>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
- <a-row :gutter="24">
|
|
|
- <a-col :span="8">
|
|
|
- <a-card :loading="loading" :bordered="false" title="当前可获得绩效" :style="{ marginTop: '24px' }">
|
|
|
- <div style="height:250px;text-align:center;line-height:230px;font-size:80px">
|
|
|
- {{ performance.toFixed(2) }}
|
|
|
- </div>
|
|
|
- </a-card>
|
|
|
- </a-col>
|
|
|
- <a-col :span="16">
|
|
|
- <a-card :loading="loading" :bordered="false" title="有效率排行" :style="{ marginTop: '24px' }">
|
|
|
- <div style="height:200px">
|
|
|
- <a-list itemLayout="horizontal" :dataSource="data">
|
|
|
- <a-list-item slot="renderItem" slot-scope="item, index">
|
|
|
- <a-list-item-meta style="width:50%">
|
|
|
- <a slot="title" style="font-size:16px">
|
|
|
- <span style="display:inline-block;width:80px">{{ item.realname }}</span
|
|
|
- ><span style="margin-left:20px">有效率:{{ item.effiRate + '%' }}</span>
|
|
|
- </a>
|
|
|
- <a-avatar slot="avatar" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
|
|
|
- </a-list-item-meta>
|
|
|
- <div></div>
|
|
|
- <div style="text-align:center">
|
|
|
- <img
|
|
|
- v-if="index == 0"
|
|
|
- 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"
|
|
|
- alt=""
|
|
|
- style="height:40px;"
|
|
|
- />
|
|
|
- <img
|
|
|
- v-if="index == 1"
|
|
|
- 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"
|
|
|
- alt=""
|
|
|
- style="height:40px;"
|
|
|
- />
|
|
|
- <img
|
|
|
- v-if="index == 2"
|
|
|
- src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=748734891,2113250735&fm=26&gp=0.jpg"
|
|
|
- alt=""
|
|
|
- style="height:40px"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </a-list-item>
|
|
|
- </a-list>
|
|
|
- </div>
|
|
|
- <template class="ant-card-actions" slot="actions">
|
|
|
- <div @click="getAll('visible')">查看更多</div>
|
|
|
- </template>
|
|
|
- </a-card>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- <a-modal title="人员排名" :visible="visible" @ok="handleOk('visible')" @cancel="handleCancel('visible')">
|
|
|
- <a-list itemLayout="horizontal" :dataSource="dataTop" :loading="loadingList">
|
|
|
- <a-list-item slot="renderItem" slot-scope="item, index">
|
|
|
- <a-list-item-meta style="width:50%">
|
|
|
- <div slot="description">有效率{{ item.effiRate }}%</div>
|
|
|
- <a slot="title" href="https://vue.ant.design/">{{ item.realname }}</a>
|
|
|
- <a-avatar slot="avatar" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
|
|
|
- </a-list-item-meta>
|
|
|
- <div style="text-align:center;width:100%;font-size:16px">{{ index + 1 }}</div>
|
|
|
- </a-list-item>
|
|
|
- </a-list>
|
|
|
- </a-modal>
|
|
|
<a-modal
|
|
|
title="有效视频"
|
|
|
:visible="visibleVideo"
|
|
@@ -263,11 +212,11 @@ export default {
|
|
|
{
|
|
|
key: 'kuaishou',
|
|
|
tab: '快手'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'toutiao',
|
|
|
+ tab: '头条'
|
|
|
}
|
|
|
- // {
|
|
|
- // key: 'toutiao',
|
|
|
- // tab: '头条'
|
|
|
- // }
|
|
|
],
|
|
|
noTitleKey: 'kuaishou',
|
|
|
dataCount: {
|
|
@@ -279,17 +228,7 @@ export default {
|
|
|
},
|
|
|
a: '',
|
|
|
columns,
|
|
|
- dataList: [
|
|
|
- {
|
|
|
- key: 1,
|
|
|
- videoUrl:
|
|
|
- 'https://ctop-media.oss-cn-beijing.aliyuncs.com/video/2019-12-14/%E9%AB%98%E6%B8%85-1576318874426.mp4',
|
|
|
- materialExposureCount: 34.56,
|
|
|
- pageClickCount: 1200,
|
|
|
- pageExposureCount: 3939,
|
|
|
- behaviorCount: 5000
|
|
|
- }
|
|
|
- ],
|
|
|
+ dataList: [],
|
|
|
innerColumns: [
|
|
|
{
|
|
|
title: '素材账户',
|
|
@@ -301,7 +240,8 @@ export default {
|
|
|
title: '跑量',
|
|
|
dataIndex: 'totalCost',
|
|
|
key: 'totalCost',
|
|
|
- align: 'center'
|
|
|
+ align: 'center',
|
|
|
+ width: 400
|
|
|
}
|
|
|
],
|
|
|
innerData: [],
|
|
@@ -334,6 +274,17 @@ export default {
|
|
|
onTabChange(key, type) {
|
|
|
console.log(key, type)
|
|
|
this[type] = key
|
|
|
+ if (key == 'kuaishou') {
|
|
|
+ this.getToutiaoList()
|
|
|
+ } else if (key == 'toutiao') {
|
|
|
+ this.dataCount = {
|
|
|
+ effiVideoCount: 0, //有效数
|
|
|
+ videoCount: 0, //素材总数
|
|
|
+ effiRate: 0, //有效率
|
|
|
+ performance: 0 // 总消耗
|
|
|
+ }
|
|
|
+ this.dataList = []
|
|
|
+ }
|
|
|
},
|
|
|
expand(expanded, record) {
|
|
|
var params = qs.stringify({
|
|
@@ -371,31 +322,28 @@ export default {
|
|
|
this.loadingList = false
|
|
|
}
|
|
|
})
|
|
|
+ },
|
|
|
+ getToutiaoList() {
|
|
|
+ postAction('/ctop/performance2/kuaishouDesignerLastQuarterPerformanceInfo').then(res => {
|
|
|
+ console.log(res)
|
|
|
+ if (res.success) {
|
|
|
+ this.dataCount = res.result
|
|
|
+ this.dataList = res.result.materialInfoList.map((item, index) => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ key: index,
|
|
|
+ innerData: [],
|
|
|
+ showDetail: false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.message)
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
- postAction('/ctop/performance2/getPerformanceInfo').then(res => {
|
|
|
- console.log(res)
|
|
|
- if (res.success) {
|
|
|
- this.dataCount = res.result
|
|
|
- } else {
|
|
|
- this.$message.error(res.message)
|
|
|
- }
|
|
|
- })
|
|
|
- postAction('/ctop/performance2/materialInfoList', { pageSize: 3 }).then(res => {
|
|
|
- console.log(res)
|
|
|
- if (res.success) {
|
|
|
- this.dataList = res.result.designMaterialInfoList.map((item, index) => {
|
|
|
- return {
|
|
|
- ...item,
|
|
|
- key: index,
|
|
|
- innerData: [],
|
|
|
- showDetail: false
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- this.getTopMany(3, 'data')
|
|
|
+ this.getToutiaoList()
|
|
|
}
|
|
|
}
|
|
|
</script>
|