123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349 |
- <style>
- .design .ant-list-item-content {
- display: flex;
- justify-content: space-around;
- }
- .design .ant-table-middle tr.ant-table-expanded-row td > .ant-table-wrapper {
- margin: -12px -9px -13px;
- }
- </style>
- <template>
- <div class="design">
- <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')"
- >
- 媒体任务:{{ dataCount.mediaTask }}元
- <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.totalCost + ''"
- style="border: 1px solid #e8e8e8;"
- >
- <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.personalTask + ''"
- style="border: 1px solid #e8e8e8;"
- >
- <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.royaltyRatio ? dataCount.royaltyRatio : '0‰'"
- style="border: 1px solid #e8e8e8;"
- >
- <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.totalRoyalty + ''"
- style="border: 1px solid #e8e8e8;"
- >
- <a-tooltip title="指标说明" slot="action">
- <a-icon type="info-circle-o" />
- </a-tooltip>
- <template slot="footer"> </template>
- </chart-card>
- </a-col>
- </a-row>
- <a-table
- :columns="columns"
- :dataSource="dataList"
- bordered
- :loading="loading"
- size="middle"
- :pagination="false"
- >
- <span slot-scope="text" slot="videoUrl">
- <video class="video" :src="text" controls="controls" style="height:200px">
- 您的浏览器不支持 video 标签。
- </video>
- </span>
- <a-table slot="expandedRowRender" :columns="innerColumns" :dataSource="innerData" :pagination="false">
- </a-table>
- </a-table>
- <template class="ant-card-actions" slot="actions" v-if="dataList.length > 3">
- <div @click="getAll('visibleVideo')">查看更多</div>
- </template>
- </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">
- {{ dataCount.performance }}
- </div>
- </a-card>
- </a-col> -->
- <a-col :span="24">
- <a-card :loading="loading" :bordered="false" title="消耗排行" :style="{ marginTop: '24px' }">
- <div style="height:200px">
- <a-list itemLayout="horizontal" :dataSource="dataRanking">
- <a-list-item slot="renderItem" slot-scope="item, index">
- <a-list-item-meta style="width:50%">
- <div slot="description"></div>
- <a slot="title" style="font-size:16px"
- ><span style="display:inline-block;width:100px">{{ item.realName }}</span
- ><span style="margin-left:20px">总消耗:{{ item.totalCost }}</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="dataRanking">
- <a-list-item slot="renderItem" slot-scope="item, index">
- <a-list-item-meta style="width:50%">
- {{ item }}
- <div slot="description">总消耗:{{ item.totalCost }}</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></div>
- </a-list-item>
- </a-list>
- </a-modal>
- <a-modal
- title="有效视频"
- :visible="visibleVideo"
- @ok="handleOk('visibleVideo')"
- @cancel="handleCancel('visibleVideo')"
- >
- <a-table :columns="columns" :dataSource="dataList" bordered :loading="loading" size="middle" :pagination="false">
- </a-table>
- </a-modal>
- </div>
- </template>
- <script>
- import ChartCard from '@/components/ChartCard'
- import ACol from 'ant-design-vue/es/grid/Col'
- import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
- import MiniArea from '@/components/chart/MiniArea'
- import MiniBar from '@/components/chart/MiniBar'
- import MiniProgress from '@/components/chart/MiniProgress'
- import RankList from '@/components/chart/RankList'
- import Bar from '@/components/chart/Bar'
- import LineChartMultid from '@/components/chart/LineChartMultid'
- import HeadInfo from '@/components/tools/HeadInfo.vue'
- import Trend from '@/components/Trend'
- import { getAction } from '@/api/manage'
- import { mapGetters } from 'vuex'
- const barData = []
- for (let i = 0; i < 12; i += 1) {
- barData.push({
- x: `${i + 1}月`,
- y: Math.floor(Math.random() * 1000) + 200
- })
- }
- const columns = [
- {
- title: '素材',
- dataIndex: 'videoUrl',
- key: 'videoUrl',
- align: 'center',
- scopedSlots: { customRender: 'videoUrl' },
- width: 200
- },
- {
- title: '素材跑量',
- dataIndex: 'videoCost',
- key: 'videoCost',
- align: 'center'
- },
- {
- title: '封面点击数',
- dataIndex: 'pageClickCount',
- key: 'pageClickCount',
- align: 'center'
- },
- {
- title: '封面曝光数',
- dataIndex: 'pageExposureCount',
- key: 'pageExposureCount',
- align: 'center'
- },
- {
- title: '行为数',
- dataIndex: 'behaviorCount',
- key: 'behaviorCount',
- align: 'center'
- }
- ]
- export default {
- name: 'design',
- components: {
- ATooltip,
- ACol,
- ChartCard,
- MiniArea,
- MiniBar,
- MiniProgress,
- RankList,
- Bar,
- Trend,
- LineChartMultid,
- HeadInfo
- },
- data: function() {
- return {
- title: '工作台',
- loginfo: {},
- barData,
- visitInfo: [],
- visitFields: ['ip', 'visit'],
- loading: false,
- rankList: [],
- tabListNoTitle: [
- {
- key: 'kuaishou',
- tab: '快手'
- },
- {
- key: 'toutiao',
- tab: '头条'
- }
- ],
- noTitleKey: 'kuaishou',
- dataCount: {
- effiVideoCount: 70, //有效数
- videoCount: 200, //素材总数
- effiRate: 40, //有效率
- performance: 20000, //当前绩效
- cost: 20000 // 总消耗
- },
- 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',
- videoCost: 34.56,
- pageClickCount: 1200,
- pageExposureCount: 3939,
- behaviorCount: 5000
- }
- ],
- innerColumns: [
- {
- title: '素材账户',
- dataIndex: 'videoAccount',
- key: 'videoAccount',
- align: 'center'
- },
- {
- title: '投放账户',
- dataIndex: 'servingAccount',
- key: 'servingAccount',
- align: 'center'
- },
- {
- title: '跑量',
- dataIndex: 'cost',
- key: 'cost',
- align: 'center'
- }
- ],
- innerData: [
- { key: 1, videoAccount: 'aabbcc', servingAccount: 'ttyyhh', cost: 34234.43 },
- { key: 2, videoAccount: 'aabbcc', servingAccount: 'ttyyhh', cost: 34234.43 }
- ],
- dataRanking: [],
- visible: false,
- visibleVideo: false
- }
- },
- methods: {
- ...mapGetters(['nickname', 'avatar', 'userInfo']),
- getAll(item) {
- this[item] = true
- },
- handleOk(item) {
- this[item] = false
- },
- handleCancel(item) {
- console.log('Clicked cancel button')
- this[item] = false
- },
- onTabChange(key, type) {
- console.log(key, type)
- this[type] = key
- }
- },
- created() {
- getAction('/ctop/performanceOptimizer/detail', { mediaType: 2 }).then(res => {
- console.log(res)
- this.dataCount = res.userDetail
- })
- getAction('/ctop/performanceOptimizer/ranking/list').then(res => {
- console.log(res)
- if (res.success) {
- this.dataRanking.push(...res.data)
- }
- })
- // /ctop/materialInfo/report
- }
- }
- </script>
|