123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377 |
- <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.totalMediaTask }}元 -->
- <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.totalPersonalCost + ''"
- 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.totalPersonalTask + ''"
- 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"
- @expand="expand"
- >
- <span slot-scope="text" slot="videoUrl">
- <video class="video" :src="text" controls="controls" style="height:200px">
- 您的浏览器不支持 video 标签。
- </video>
- </span>
- <a-table
- slot="expandedRowRender"
- slot-scope="record"
- :columns="innerColumns"
- :dataSource="record.innerData"
- :loading="record.showDetail"
- size="middle"
- >
- </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">
- <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'
- import qs from 'qs'
- 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: 'projectName',
- key: 'projectName',
- align: 'center',
- scopedSlots: { customRender: 'projectName' },
- width: 200
- },
- {
- title: '年份',
- dataIndex: 'year',
- key: 'year',
- align: 'center'
- },
- {
- title: '季度',
- dataIndex: 'quarter',
- key: 'quarter',
- align: 'center'
- },
- {
- title: '总消耗(元)',
- dataIndex: 'totalCost',
- key: 'totalCost',
- 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,
- childrenLoading: false,
- rankList: [],
- tabListNoTitle: [
- {
- key: 'kuaishou',
- tab: '快手'
- }
- // {
- // key: 'toutiao',
- // tab: '头条'
- // }
- ],
- noTitleKey: 'kuaishou',
- dataCount: {
- personalTask: 0,
- royaltyRatio: null,
- mediaTask: 0,
- totalCost: 0,
- totalRoyalty: 0
- },
- a: '',
- columns,
- dataList: [],
- dataListTop: [],
- innerColumns: [
- {
- title: '素材账户',
- dataIndex: 'accountName',
- key: 'accountName',
- align: 'center'
- },
- {
- title: '总消耗(元)',
- dataIndex: 'totalCost',
- key: 'totalCost',
- 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
- },
- expand(expanded, record) {
- var param = {}
- param.appType = 2
- param.projectId = record.projectId
- record.showDetail = true
- if (expanded) {
- getAction('/ctop/performance/account/list', param).then(res => {
- if (res.success) {
- record.innerData = res.data.map((item, index) => {
- return {
- ...item,
- key: index
- }
- })
- record.showDetail = false
- }
- if (res.code === 510) {
- this.$message.warning(res.message)
- }
- record.showDetail = false
- })
- } else {
- record.innerData = []
- }
- }
- },
- created() {
- getAction('/ctop/performanceOptimizer/detail', { mediaType: 2 }).then(res => {
- console.log(res)
- if (res.success) {
- this.dataCount = res.userDetail
- }
- })
- getAction('/ctop/performanceOptimizer/ranking/list').then(res => {
- console.log(res)
- if (res.success) {
- this.dataRanking.push(...res.data)
- }
- })
- getAction('/ctop/performance/project/list', { appType: 2 }).then(res => {
- if (res.success) {
- this.dataList = res.data.map(item => {
- return {
- ...item,
- innerData: [],
- showDetail: false
- }
- })
- }
- })
- // /ctop/materialInfo/report
- }
- }
- </script>
|