123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280 |
- <style>
- .admin-info .ant-list-item-content {
- display: flex;
- justify-content: space-around;
- }
- .admin-info .ant-table-middle tr.ant-table-expanded-row td > .ant-table-wrapper {
- margin: -12px -9px -13px;
- }
- </style>
- <template>
- <div class="admin-info">
- <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-select
- style="width:300px;margin-bottom:30px"
- placeholder="请选择角色类型"
- v-model="type"
- @change="getData"
- >
- <a-select-option :value="1">设计</a-select-option>
- <a-select-option :value="2">优化</a-select-option>
- </a-select>
- <a-button type="primary" style="margin-left:10px" @click="addUser">搜索</a-button>
- <a-table :columns="columns" :dataSource="dataList" bordered :loading="loading" size="middle">
- <span slot-scope="text" slot="videoUrl">
- <video class="video" :src="text" controls="controls" style="height:200px">
- 您的浏览器不支持 video 标签。
- </video>
- </span>
- <span slot="action" slot-scope="text, record">
- <a :disabled="record.effiVideoCount == 0" @click="toDetail(record)">查看详情</a>
- </span>
- </a-table>
- </a-card>
- </a-col>
- </a-row>
- </div>
- </template>
- <script>
- import ACol from 'ant-design-vue/es/grid/Col'
- import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
- import { getAction, postAction } from '@/api/manage'
- import { mapGetters } from 'vuex'
- import qs from 'qs'
- const columns = [
- {
- title: '姓名',
- dataIndex: 'realname',
- key: 'realname',
- align: 'center',
- width: 200
- },
- {
- title: '角色',
- dataIndex: 'roleName',
- key: 'roleName',
- align: 'center'
- },
- {
- title: '有效视频数量',
- dataIndex: 'effiVideoCount',
- key: 'effiVideoCount',
- align: 'center'
- },
- {
- title: '总视频数量',
- dataIndex: 'videoCount',
- key: 'videoCount',
- align: 'center'
- },
- // {
- // title: '消耗',
- // dataIndex: 'cost',
- // key: 'cost',
- // align: 'center'
- // },
- {
- title: '操作',
- dataIndex: 'action',
- key: 'action',
- align: 'center',
- scopedSlots: {
- customRender: 'action'
- }
- }
- ]
- const columnsYou = [
- {
- title: '姓名',
- dataIndex: 'realname',
- key: 'realname',
- align: 'center',
- width: 200
- },
- {
- title: '角色',
- dataIndex: 'roleName',
- key: 'roleName',
- align: 'center'
- },
- {
- title: '总消耗',
- dataIndex: 'cost',
- key: 'effiVideoCount',
- align: 'center'
- },
- {
- title: '操作',
- dataIndex: 'action',
- key: 'action',
- align: 'center',
- scopedSlots: {
- customRender: 'action'
- }
- }
- ]
- export default {
- name: 'admin-info',
- components: {
- ATooltip,
- ACol
- },
- data: function() {
- return {
- type: 1,
- title: '工作台',
- loading: false,
- rankList: [],
- tabListNoTitle: [
- {
- key: 'kuaishou',
- tab: '快手'
- },
- {
- key: 'toutiao',
- tab: '头条'
- }
- ],
- noTitleKey: 'kuaishou',
- a: '',
- columns: columns,
- dataList: []
- }
- },
- methods: {
- ...mapGetters(['nickname', 'avatar', 'userInfo']),
- addUser() {
- this.loading = true
- if (this.noTitleKey == 'kuaishou') {
- if (this.type == 1) {
- this.columns = columns
- this.getKuaishouList()
- } else if (this.type == 2) {
- this.columns = columnsYou
- this.getKuaishouYouHuaList()
- }
- } else if (this.noTitleKey == 'toutiao') {
- if (this.type == 1) {
- this.columns = columns
- this.getToutiaoList()
- } else if (this.type == 2) {
- this.columns = columnsYou
- this.getToutiaoYouHuaList()
- }
- }
- },
- getData(data) {
- this.dataList = []
- this.loading = false
- },
- onTabChange(key, type) {
- console.log(key, type)
- this.type = 1
- this.columns = columns
- this[type] = key
- this.dataList = []
- this.loading = false
- // if (key == 'kuaishou') {
- // this.getKuaishouList()
- // } else if (key == 'toutiao') {
- // this.getToutiaoList()
- // }
- },
- toDetail(item) {
- localStorage.setItem('detailUserId', item.userId)
- localStorage.setItem('appType', this.noTitleKey)
- localStorage.setItem('roleData', this.type)
- this.$router.replace({
- path: '/achievements/adminDetail'
- })
- },
- getKuaishouList() {
- postAction('/ctop/performance2/kuaishouPerformanceInfoNow', '').then(res => {
- console.log(res)
- if (res.success) {
- this.loading = false
- this.dataList = res.result.map((item, index) => {
- return {
- ...item,
- key: index
- }
- })
- } else {
- this.loading = false
- this.$message.error(res.message)
- }
- })
- },
- getToutiaoList() {
- postAction('/ctop/performance2/toutiaoPerformanceInfoNow', '').then(res => {
- console.log(res)
- if (res.success) {
- this.loading = false
- this.dataList = res.result.map((item, index) => {
- return {
- ...item,
- key: index
- }
- })
- } else {
- this.loading = false
- this.$message.error(res.message)
- }
- })
- },
- getKuaishouYouHuaList() {
- postAction('/ctop/performance2/kuaishouYouhuaPerformanceInfoNow', '').then(res => {
- console.log(res)
- if (res.success) {
- this.loading = false
- this.dataList = res.result.map((item, index) => {
- return {
- ...item,
- key: index
- }
- })
- } else {
- this.loading = false
- this.$message.error(res.message)
- }
- })
- },
- getToutiaoYouHuaList() {
- postAction('/ctop/performance2/toutiaoYouhuaPerformanceInfoNow', '').then(res => {
- console.log(res)
- if (res.success) {
- this.loading = false
- this.dataList = res.result.map((item, index) => {
- return {
- ...item,
- key: index
- }
- })
- } else {
- this.loading = false
- this.$message.error(res.message)
- }
- })
- }
- },
- created() {
- // this.getKuaishouList()
- }
- }
- </script>
|