|
@@ -1,30 +1,39 @@
|
|
|
<style>
|
|
|
- .admin-info .ant-list-item-content {
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- }
|
|
|
+.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;
|
|
|
- }
|
|
|
+.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-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="clearData">
|
|
|
+ <a-select
|
|
|
+ style="width:300px;margin-bottom:30px"
|
|
|
+ placeholder="请选择角色类型"
|
|
|
+ v-model="type"
|
|
|
+ @change="clearData"
|
|
|
+ >
|
|
|
<a-select-option :value="1">设计</a-select-option>
|
|
|
<a-select-option :value="2">优化</a-select-option>
|
|
|
</a-select>
|
|
|
季度选择:
|
|
|
<a-select style="width:100px;margin-bottom:30px" placeholder="选择年" v-model="year">
|
|
|
- <a-select-option :value="item" v-for="item of options" :key="item">{{item}}</a-select-option>
|
|
|
+ <a-select-option :value="item" v-for="item of options" :key="item">{{ item }}</a-select-option>
|
|
|
</a-select>
|
|
|
<a-select style="width:100px;margin-bottom:30px" placeholder="选择季度" v-model="dateRange">
|
|
|
- <a-select-option :value="item" v-for="item of 4" :key="item">{{item}}</a-select-option>
|
|
|
+ <a-select-option :value="item" v-for="item of 4" :key="item">{{ item }}</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">
|
|
@@ -44,284 +53,287 @@
|
|
|
</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 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 Trend from '@/components/Trend'
|
|
|
|
|
|
- import moment from 'moment';
|
|
|
+import moment from 'moment'
|
|
|
|
|
|
- import {
|
|
|
- getAction,
|
|
|
- postAction
|
|
|
- } from '@/api/manage'
|
|
|
- import {
|
|
|
- mapGetters
|
|
|
- } from 'vuex'
|
|
|
+import { getAction, postAction } from '@/api/manage'
|
|
|
+import { mapGetters } from 'vuex'
|
|
|
|
|
|
- import qs from 'qs'
|
|
|
+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 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: '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: 'cost',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '绩效',
|
|
|
+ dataIndex: 'effiRate',
|
|
|
+ key: 'effiRate',
|
|
|
+ align: 'center'
|
|
|
}
|
|
|
+ // {
|
|
|
+ // title: '操作',
|
|
|
+ // dataIndex: 'action',
|
|
|
+ // key: 'action',
|
|
|
+ // align: 'center',
|
|
|
+ // scopedSlots: {
|
|
|
+ // customRender: 'action'
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+]
|
|
|
|
|
|
- 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'
|
|
|
+export default {
|
|
|
+ name: 'admin-info',
|
|
|
+ components: {
|
|
|
+ ATooltip,
|
|
|
+ ACol
|
|
|
+ },
|
|
|
+
|
|
|
+ data: function() {
|
|
|
+ return {
|
|
|
+ type: 1,
|
|
|
+ title: '工作台',
|
|
|
+ loginfo: {},
|
|
|
+ barData,
|
|
|
+ visitInfo: [],
|
|
|
+ visitFields: ['ip', 'visit'],
|
|
|
+ loading: false,
|
|
|
+ rankList: [],
|
|
|
+ options: [],
|
|
|
+ dateRange: null,
|
|
|
+ year: new Date().getFullYear(),
|
|
|
+ tabListNoTitle: [
|
|
|
+ {
|
|
|
+ key: 'kuaishou',
|
|
|
+ tab: '快手'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'toutiao',
|
|
|
+ tab: '头条'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ noTitleKey: 'kuaishou',
|
|
|
+ a: '',
|
|
|
+ columns: columns,
|
|
|
+ dataList: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ disabledDate(current) {
|
|
|
+ // Can not select days before today and today
|
|
|
+ return current && current > moment().endOf('day')
|
|
|
},
|
|
|
- // {
|
|
|
- // title: '操作',
|
|
|
- // dataIndex: 'action',
|
|
|
- // key: 'action',
|
|
|
- // align: 'center',
|
|
|
- // scopedSlots: {
|
|
|
- // customRender: 'action'
|
|
|
- // },
|
|
|
- // },
|
|
|
- ]
|
|
|
- const columnsYou = [{
|
|
|
- title: '姓名',
|
|
|
- dataIndex: 'realname',
|
|
|
- key: 'realname',
|
|
|
- align: 'center',
|
|
|
- width: 200
|
|
|
+ ...mapGetters(['nickname', 'avatar', 'userInfo']),
|
|
|
+ clearData() {
|
|
|
+ this.dataList = []
|
|
|
},
|
|
|
- {
|
|
|
- title: '角色',
|
|
|
- dataIndex: 'roleName',
|
|
|
- key: 'roleName',
|
|
|
- align: 'center'
|
|
|
+ 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()
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
- {
|
|
|
- title: '总消耗',
|
|
|
- dataIndex: 'cost',
|
|
|
- key: 'cost',
|
|
|
- align: 'center'
|
|
|
+ onTabChange(key, type) {
|
|
|
+ console.log(key, type)
|
|
|
+ this.type = 1
|
|
|
+ this.dateRange = null
|
|
|
+ this.year = '2020'
|
|
|
+ this.options = []
|
|
|
+ this.dataList = []
|
|
|
+ this.columns = columns
|
|
|
+ this[type] = key
|
|
|
},
|
|
|
- {
|
|
|
- title: '绩效',
|
|
|
- dataIndex: 'effiRate',
|
|
|
- key: 'effiRate',
|
|
|
- align: 'center'
|
|
|
+ toDetail(item) {
|
|
|
+ localStorage.setItem('detailUserId', item.userId)
|
|
|
+ localStorage.setItem('appType', this.noTitleKey)
|
|
|
+ localStorage.setItem('roleData', this.type)
|
|
|
+ localStorage.setItem('weekDate', this.dateRange)
|
|
|
+ this.$router.replace({
|
|
|
+ path: '/Statistics/allDetail'
|
|
|
+ })
|
|
|
},
|
|
|
- // {
|
|
|
- // title: '操作',
|
|
|
- // dataIndex: 'action',
|
|
|
- // key: 'action',
|
|
|
- // align: 'center',
|
|
|
- // scopedSlots: {
|
|
|
- // customRender: 'action'
|
|
|
- // },
|
|
|
- // },
|
|
|
- ]
|
|
|
-
|
|
|
-
|
|
|
- export default {
|
|
|
- name: 'admin-info',
|
|
|
- components: {
|
|
|
- ATooltip,
|
|
|
- ACol,
|
|
|
+ getKuaishouList() {
|
|
|
+ var params = {}
|
|
|
+ params.year = this.year
|
|
|
+ params.quarter = this.dateRange
|
|
|
+ postAction('/ctop/performance2/kuaishouQuarterReport', params).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)
|
|
|
+ }
|
|
|
+ })
|
|
|
},
|
|
|
|
|
|
- data: function () {
|
|
|
- return {
|
|
|
- type: 1,
|
|
|
- title: '工作台',
|
|
|
- loginfo: {},
|
|
|
- barData,
|
|
|
- visitInfo: [],
|
|
|
- visitFields: ['ip', 'visit'],
|
|
|
- loading: false,
|
|
|
- rankList: [],
|
|
|
- options: [],
|
|
|
- dateRange: null,
|
|
|
- year: new Date().getFullYear(),
|
|
|
- tabListNoTitle: [{
|
|
|
- key: 'kuaishou',
|
|
|
- tab: '快手'
|
|
|
- },
|
|
|
- {
|
|
|
- key: 'toutiao',
|
|
|
- tab: '头条'
|
|
|
- }
|
|
|
- ],
|
|
|
- noTitleKey: 'kuaishou',
|
|
|
- a: '',
|
|
|
- columns: columns,
|
|
|
- dataList: [],
|
|
|
- }
|
|
|
+ getToutiaoList() {
|
|
|
+ var params = {}
|
|
|
+ params.year = this.year
|
|
|
+ params.quarter = this.dateRange
|
|
|
+ postAction('/ctop/performance2/toutiaoQuarterReport', params).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)
|
|
|
+ }
|
|
|
+ })
|
|
|
},
|
|
|
- methods: {
|
|
|
- disabledDate(current) {
|
|
|
- // Can not select days before today and today
|
|
|
- return current && current > moment().endOf('day');
|
|
|
- },
|
|
|
- ...mapGetters(['nickname', 'avatar', 'userInfo']),
|
|
|
- clearData() {
|
|
|
- this.dataList = []
|
|
|
- },
|
|
|
- addUser() {
|
|
|
- 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()
|
|
|
-
|
|
|
- }
|
|
|
+ getKuaishouYouHuaList() {
|
|
|
+ var params = {}
|
|
|
+ params.year = this.year
|
|
|
+ params.quarter = this.dateRange
|
|
|
+ postAction('/ctop/performance2/kuaishouYouhuaQuarterReport', params).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)
|
|
|
}
|
|
|
- },
|
|
|
- onTabChange(key, type) {
|
|
|
- console.log(key, type)
|
|
|
- this.type = 1
|
|
|
- this.dateRange = null
|
|
|
- this.year = '2020'
|
|
|
- this.options = []
|
|
|
- this.dataList = []
|
|
|
- this.columns = columns
|
|
|
- this[type] = key
|
|
|
-
|
|
|
- },
|
|
|
- toDetail(item) {
|
|
|
- localStorage.setItem('detailUserId', item.userId)
|
|
|
- localStorage.setItem('appType', this.noTitleKey)
|
|
|
- localStorage.setItem('roleData', this.type)
|
|
|
- localStorage.setItem('weekDate', this.dateRange)
|
|
|
- this.$router.replace({
|
|
|
- path: '/Statistics/allDetail'
|
|
|
- })
|
|
|
- },
|
|
|
- getKuaishouList() {
|
|
|
- var params = {}
|
|
|
- params.year = this.year
|
|
|
- params.quarter = this.dateRange
|
|
|
- postAction('/ctop/performance2/kuaishouQuarterReport', params).then(res => {
|
|
|
- console.log(res)
|
|
|
- if (res.success) {
|
|
|
- this.dataList = res.result.map((item, index) => {
|
|
|
- return {
|
|
|
- ...item,
|
|
|
- key: index,
|
|
|
- }
|
|
|
- })
|
|
|
- } else {
|
|
|
- this.$message.error(res.message)
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- getToutiaoList() {
|
|
|
- var params = {}
|
|
|
- params.year = this.year
|
|
|
- params.quarter = this.dateRange
|
|
|
- postAction('/ctop/performance2/toutiaoQuarterReport', params).then(res => {
|
|
|
- console.log(res)
|
|
|
- if (res.success) {
|
|
|
- this.dataList = res.result.map((item, index) => {
|
|
|
- return {
|
|
|
- ...item,
|
|
|
- key: index,
|
|
|
- }
|
|
|
- })
|
|
|
- } else {
|
|
|
- this.$message.error(res.message)
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- getKuaishouYouHuaList() {
|
|
|
- var params = {}
|
|
|
- params.year = this.year
|
|
|
- params.quarter = this.dateRange
|
|
|
- postAction('/ctop/performance2/kuaishouYouhuaQuarterReport', params).then(res => {
|
|
|
- console.log(res)
|
|
|
- if (res.success) {
|
|
|
- this.dataList = res.result.map((item, index) => {
|
|
|
- return {
|
|
|
- ...item,
|
|
|
- key: index,
|
|
|
- }
|
|
|
- })
|
|
|
- } else {
|
|
|
- this.$message.error(res.message)
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- getToutiaoYouHuaList() {
|
|
|
- var params = {}
|
|
|
- params.year = this.year
|
|
|
- params.quarter = this.dateRange
|
|
|
- postAction('/ctop/performance2/toutiaoYouhuaQuarterReport', params).then(res => {
|
|
|
- console.log(res)
|
|
|
- if (res.success) {
|
|
|
- this.dataList = res.result.map((item, index) => {
|
|
|
- return {
|
|
|
- ...item,
|
|
|
- key: index,
|
|
|
- }
|
|
|
- })
|
|
|
- } else {
|
|
|
- this.$message.error(res.message)
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
+ })
|
|
|
},
|
|
|
- created() {
|
|
|
- // this.getKuaishouList()
|
|
|
- var myDate = new Date();
|
|
|
- var startYear = myDate.getFullYear() - 5; //起始年份
|
|
|
- var endYear = myDate.getFullYear() + 5; //结束年份
|
|
|
- for (var i = startYear; i <= endYear; i++) {
|
|
|
- this.options.push(i);
|
|
|
- }
|
|
|
+ getToutiaoYouHuaList() {
|
|
|
+ var params = {}
|
|
|
+ params.year = this.year
|
|
|
+ params.quarter = this.dateRange
|
|
|
+ postAction('/ctop/performance2/toutiaoYouhuaQuarterReport', params).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()
|
|
|
+ var myDate = new Date()
|
|
|
+ var startYear = myDate.getFullYear() - 5 //起始年份
|
|
|
+ var endYear = myDate.getFullYear() + 5 //结束年份
|
|
|
+ for (var i = startYear; i <= endYear; i++) {
|
|
|
+ this.options.push(i)
|
|
|
}
|
|
|
}
|
|
|
-</script>
|
|
|
+}
|
|
|
+</script>
|