|
@@ -0,0 +1,297 @@
|
|
|
+<style>
|
|
|
+.design .ant-list-item-content {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<template>
|
|
|
+ <div class="design">
|
|
|
+ <a-row :gutter="24" style="margin-top:15px">
|
|
|
+ <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
|
|
|
+ <chart-card :loading="loading" title="有效数" :total="dataCount.waitAudit + ''">
|
|
|
+ <a-tooltip title="指标说明" slot="action">
|
|
|
+ <a-icon type="info-circle-o" />
|
|
|
+ </a-tooltip>
|
|
|
+ <div>
|
|
|
+ <trend flag="up" style="margin-right: 16px;">
|
|
|
+ <span slot="term">周同比</span>
|
|
|
+ 12%
|
|
|
+ </trend>
|
|
|
+ <trend flag="down">
|
|
|
+ <span slot="term">日同比</span>
|
|
|
+ 11%
|
|
|
+ </trend>
|
|
|
+ </div>
|
|
|
+ <template slot="footer"> </template>
|
|
|
+ </chart-card>
|
|
|
+ </a-col>
|
|
|
+ <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
|
|
|
+ <chart-card :loading="loading" title="素材总数" :total="dataCount.passAudit + ''">
|
|
|
+ <a-tooltip title="指标说明" slot="action">
|
|
|
+ <a-icon type="info-circle-o" />
|
|
|
+ </a-tooltip>
|
|
|
+ <div>
|
|
|
+ <trend flag="up" style="margin-right: 16px;">
|
|
|
+ <span slot="term">周同比</span>
|
|
|
+ 12%
|
|
|
+ </trend>
|
|
|
+ <trend flag="down">
|
|
|
+ <span slot="term">日同比</span>
|
|
|
+ 11%
|
|
|
+ </trend>
|
|
|
+ </div>
|
|
|
+ <template slot="footer"> </template>
|
|
|
+ </chart-card>
|
|
|
+ </a-col>
|
|
|
+ <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
|
|
|
+ <chart-card
|
|
|
+ :loading="loading"
|
|
|
+ title="有效率"
|
|
|
+ :total="
|
|
|
+ dataCount.refuseAudit + dataCount.passAudit > 0
|
|
|
+ ? ((dataCount.passAudit / (dataCount.refuseAudit + dataCount.passAudit)) * 100).toFixed(2) + '%'
|
|
|
+ : '0%'
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <a-tooltip title="指标说明" slot="action">
|
|
|
+ <a-icon type="info-circle-o" />
|
|
|
+ </a-tooltip>
|
|
|
+ <div>
|
|
|
+ <trend flag="up" style="margin-right: 16px;">
|
|
|
+ <span slot="term">周同比</span>
|
|
|
+ 12%
|
|
|
+ </trend>
|
|
|
+ <trend flag="down">
|
|
|
+ <span slot="term">日同比</span>
|
|
|
+ 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%;">
|
|
|
+ <a-table
|
|
|
+ :columns="columns"
|
|
|
+ :dataSource="dataList"
|
|
|
+ bordered
|
|
|
+ :loading="loading"
|
|
|
+ size="middle"
|
|
|
+ :pagination="false"
|
|
|
+ >
|
|
|
+ </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">
|
|
|
+ 100
|
|
|
+ </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%">
|
|
|
+ <div slot="description">
|
|
|
+ 有效率
|
|
|
+ </div>
|
|
|
+ <a slot="title" href="https://vue.ant.design/">{{ item.title }}</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="data">
|
|
|
+ <a-list-item slot="renderItem" slot-scope="item, index">
|
|
|
+ <a-list-item-meta style="width:50%">
|
|
|
+ <div slot="description">
|
|
|
+ 有效率1%
|
|
|
+ </div>
|
|
|
+ <a slot="title" href="https://vue.ant.design/">{{ item.title }}</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' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '素材跑量',
|
|
|
+ dataIndex: 'reviewDetail',
|
|
|
+ key: 'reviewDetail',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '投放平台',
|
|
|
+ dataIndex: 'reviewDetail',
|
|
|
+ key: 'reviewDetail',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '投放账户',
|
|
|
+ dataIndex: 'reviewDetail',
|
|
|
+ key: 'reviewDetail',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '封面点击数',
|
|
|
+ dataIndex: 'reviewDetail',
|
|
|
+ key: 'reviewDetail',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '广告语',
|
|
|
+ dataIndex: 'description',
|
|
|
+ key: 'description',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: { customRender: 'description' }
|
|
|
+ }
|
|
|
+]
|
|
|
+
|
|
|
+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: [],
|
|
|
+ dataCount: {},
|
|
|
+ a: '',
|
|
|
+ columns,
|
|
|
+ dataList: [],
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ title: '人员1'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '人员2'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '人员3'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ getAction('/ctop/materialInfo/report', { userId: this.userInfo().id }).then(res => {
|
|
|
+ this.dataCount = res
|
|
|
+ })
|
|
|
+ // /ctop/materialInfo/report
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|