|
@@ -0,0 +1,401 @@
|
|
|
|
+<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="clearData">
|
|
|
|
+ <a-select-option :value="1">设计</a-select-option>
|
|
|
|
+ <a-select-option :value="2">优化</a-select-option>
|
|
|
|
+ </a-select>
|
|
|
|
+ 时段选择:
|
|
|
|
+ <a-month-picker placeholder="选择月份" :disabledDate="disabledDate" @change="getTimeData" v-model="mouth" />
|
|
|
|
+ <a-select style="width:300px;margin-bottom:30px" placeholder="选择时段" v-model="dateRange">
|
|
|
|
+ <a-select-option :value="item" v-for="(item,index) of options" :key="index">{{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">
|
|
|
|
+ <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 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 moment from 'moment';
|
|
|
|
+
|
|
|
|
+ import {
|
|
|
|
+ getAction,
|
|
|
|
+ postAction
|
|
|
|
+ } 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: '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'
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ ]
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ Date.prototype.format = function (fmt) {
|
|
|
|
+ var o = {
|
|
|
|
+ "M+": this.getMonth() + 1, //月份
|
|
|
|
+ "d+": this.getDate(), //日
|
|
|
|
+ "h+": this.getHours(), //小时
|
|
|
|
+ "m+": this.getMinutes(), //分
|
|
|
|
+ "s+": this.getSeconds(), //秒
|
|
|
|
+ "q+": Math.floor((this.getMonth() + 3) / 3), //季度
|
|
|
|
+ "S": this.getMilliseconds() //毫秒
|
|
|
|
+ };
|
|
|
|
+ if (/(y+)/.test(fmt)) {
|
|
|
|
+ fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
|
|
|
|
+ }
|
|
|
|
+ for (var k in o) {
|
|
|
|
+ if (new RegExp("(" + k + ")").test(fmt)) {
|
|
|
|
+ fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ return fmt;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ function allWeeks(now_month) {
|
|
|
|
+ let week_array = [];
|
|
|
|
+ let today = new Date(Date.parse(now_month));
|
|
|
|
+ let year = today.getFullYear();
|
|
|
|
+ let month = today.getMonth();
|
|
|
|
+ let i = 0;
|
|
|
|
+
|
|
|
|
+ let start = new Date(year, month, 1); // 得到当月第一天
|
|
|
|
+ let end = new Date(year, month + 1, 0); // 得到当月最后一天
|
|
|
|
+ let start_day = start.getDay(); // 当月第一天是周几
|
|
|
|
+ console.log(start.format("yyyy-MM-dd"), end.format("yyyy-MM-dd")); // 每月的起始日期
|
|
|
|
+ switch (start_day) {
|
|
|
|
+ case 0:
|
|
|
|
+ i = 0 - 1;
|
|
|
|
+ break;
|
|
|
|
+ case 1:
|
|
|
|
+ i = 0 - 2;
|
|
|
|
+ break;
|
|
|
|
+ case 2:
|
|
|
|
+ i = 0 - 3;
|
|
|
|
+ break;
|
|
|
|
+ case 3:
|
|
|
|
+ i = 0 - 4;
|
|
|
|
+ break;
|
|
|
|
+ case 4:
|
|
|
|
+ i = 0 - 5;
|
|
|
|
+ break;
|
|
|
|
+ case 5:
|
|
|
|
+ i = 1;
|
|
|
|
+ break;
|
|
|
|
+ case 6:
|
|
|
|
+ i = 0;
|
|
|
|
+ break;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ while (new Date(year, month, i + 6) <= end) {
|
|
|
|
+
|
|
|
|
+ week_array.push([new Date(year, month, i).format("yyyy-MM-dd"),
|
|
|
|
+ new Date(year, month, i + 6).format("yyyy-MM-dd")
|
|
|
|
+ ])
|
|
|
|
+ i += 7;
|
|
|
|
+ }
|
|
|
|
+ return week_array;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ 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,
|
|
|
|
+ mouth: null,
|
|
|
|
+ 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');
|
|
|
|
+ },
|
|
|
|
+ ...mapGetters(['nickname', 'avatar', 'userInfo']),
|
|
|
|
+ clearData() {
|
|
|
|
+ this.dataList = []
|
|
|
|
+ },
|
|
|
|
+ getTimeData(data) {
|
|
|
|
+ this.dateRange = ""
|
|
|
|
+ this.options = []
|
|
|
|
+ this.dataList = []
|
|
|
|
+ if (data) {
|
|
|
|
+ var getDate = new Date(data).format("yyyy-MM")
|
|
|
|
+ this.timeData(getDate)
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ timeData(data) {
|
|
|
|
+ var options = allWeeks(data)
|
|
|
|
+ console.log(options)
|
|
|
|
+ this.options = []
|
|
|
|
+ for (let i = 0; i < options.length; i++) {
|
|
|
|
+ this.options.push(options[i][0] + '~' + options[i][1])
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ 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()
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ onTabChange(key, type) {
|
|
|
|
+ console.log(key, type)
|
|
|
|
+ this.type = 1
|
|
|
|
+ this.dateRange = null
|
|
|
|
+ this.mouth = null
|
|
|
|
+ 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 = {}
|
|
|
|
+ var dateRange = this.dateRange.split('~')
|
|
|
|
+ params.startDate = dateRange[0]
|
|
|
|
+ params.endDate = dateRange[1]
|
|
|
|
+ postAction('/ctop/performance2/kuaishouWeekReport', 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 = {}
|
|
|
|
+ var dateRange = this.dateRange.split('~')
|
|
|
|
+ params.startDate = dateRange[0]
|
|
|
|
+ params.endDate = dateRange[1]
|
|
|
|
+ postAction('/ctop/performance2/toutiaoWeekReport', 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 = {}
|
|
|
|
+ var dateRange = this.dateRange.split('~')
|
|
|
|
+ params.startDate = dateRange[0]
|
|
|
|
+ params.endDate = dateRange[1]
|
|
|
|
+ postAction('/ctop/performance2/kuaishouYouhuaWeekReport', 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 = {}
|
|
|
|
+ var dateRange = this.dateRange.split('~')
|
|
|
|
+ params.startDate = dateRange[0]
|
|
|
|
+ params.endDate = dateRange[1]
|
|
|
|
+ postAction('/ctop/performance2/toutiaoYouhuaWeekReport', 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()
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+</script>
|