|
@@ -1,71 +1,105 @@
|
|
|
+<style lang="less" scoped>
|
|
|
+ @import "../keep-manage/keep-manage.less";
|
|
|
+ .group-keep-ul li{
|
|
|
+ margin-bottom: 15px;
|
|
|
+ font-size: 16px;
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
<template>
|
|
|
<div>
|
|
|
<a-row :gutter="24" style="margin-bottom: 20px;">
|
|
|
<a-col :sm="18" :md="18" :xl="18" class="keep-manage-col">
|
|
|
<a-card class="card-content echarts-card">
|
|
|
<div slot="title">
|
|
|
- 数据总览 更新时间:{{updateAccountEchart||'-'}}
|
|
|
+ <span style="font-weight: bolder;">数据总览</span>
|
|
|
</div>
|
|
|
<div class="person-content-title" slot="extra">
|
|
|
|
|
|
<div class="content-title-acount"></div>
|
|
|
<div class="content-title-checkout">
|
|
|
<span class="title-checkout-time">
|
|
|
- <a-range-picker v-model="dateEchart" :range="dateRanges" />
|
|
|
+ <a-range-picker v-model="dateEchart" :range="dateRanges" @change="dateRangesChange"/>
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
- <div id="accountIndexEchart" ref="accountIndexEchart"
|
|
|
+ <div v-if="yestadyNum == 1" id="accountIndexEchartDay" ref="accountIndexEchartDay"
|
|
|
+ style="width: 90%;height: 315px;margin: 0 auto;">
|
|
|
+ <a-empty />
|
|
|
+ </div>
|
|
|
+ <div v-else id="accountIndexEchart" ref="accountIndexEchart"
|
|
|
style="width: 90%;height: 315px;margin: 0 auto;">
|
|
|
<a-empty />
|
|
|
</div>
|
|
|
|
|
|
+
|
|
|
+
|
|
|
</a-card>
|
|
|
</a-col>
|
|
|
|
|
|
<a-col :sm="6" :md="6" :xl="6" class="keep-manage-col">
|
|
|
- <a-card title="运营个人数据" class="card-content">
|
|
|
- <div style="width: 100%;height: 315px;">
|
|
|
+ <a-card class="card-content">
|
|
|
+ <div slot="title">
|
|
|
+ <span style="font-weight: bolder;">运营个人数据</span><span>({{userName}})</span>
|
|
|
+ </div>
|
|
|
+ <div style="width: 100%;height: 315px;margin-left: 50px;">
|
|
|
<ul class="group-keep-ul">
|
|
|
<li>
|
|
|
- 今日消耗: <span style="font-weight: bold;">21,233.958</span>
|
|
|
+ 今日消耗: <span style="font-weight: bold;">{{todayCost | formatNum}}</span>
|
|
|
</li>
|
|
|
<li>
|
|
|
- <span style="margin-left:20%;" v-if="personData < 0">
|
|
|
- <img style=" width: 25px;height: 25px;" class="title-radio-img" src="@/assets/up.png" alt="">
|
|
|
- <span style="color: green;">10%</span>
|
|
|
+ <span style="margin-left:20%;" v-if="todayCompare.indexOf('-') == 0">
|
|
|
+ <img style=" width: 25px;height: 25px;" class="title-radio-img"
|
|
|
+ src="@/assets/greendown.png" alt="">
|
|
|
+ <span style="color: green;">{{todayCompare}}</span>
|
|
|
+
|
|
|
</span>
|
|
|
- <span style="margin-left:20%;" v-else-if="personData>= 0">
|
|
|
- <img style=" width: 25px;height: 25px;" class="title-radio-img" src="@/assets/down.png" alt="">
|
|
|
- <span style="color: red;">10%</span>
|
|
|
+ <span style="margin-left:20%;" v-else-if="todayCompare.indexOf('-') == -1">
|
|
|
+ <img style=" width: 25px;height: 25px;" class="title-radio-img"
|
|
|
+ src="@/assets/upred.png" alt="">
|
|
|
+ <span style="color: red;">{{todayCompare}}</span>
|
|
|
</span>
|
|
|
+ <a-tooltip placement="top">
|
|
|
+ <template slot="title">
|
|
|
+ <span>截止此时今日消耗与昨日同时刻消耗的对比</span>
|
|
|
+ </template>
|
|
|
+ <a-icon style="margin-left: 10px;" type="question-circle" />
|
|
|
+ </a-tooltip>
|
|
|
</li>
|
|
|
<li>
|
|
|
- 消耗:118,2335.112
|
|
|
+ <span style="margin-left: 28px;">消耗: </span>{{timeCost | formatNum}}
|
|
|
</li>
|
|
|
<li>
|
|
|
- <span>环比:</span>
|
|
|
- <span style="margin-left: 10%;" v-if="personData < 0">
|
|
|
- <img style=" width: 25px;height: 25px;" class="title-radio-img" src="@/assets/up.png" alt="">
|
|
|
- <span style="color: green;">10%</span>
|
|
|
+ <span style="margin-left: 28px;">环比:</span>
|
|
|
+ <span v-if="timeCompare.indexOf('-') == 0">
|
|
|
+ <img style=" width: 25px;height: 25px;" class="title-radio-img"
|
|
|
+ src="@/assets/greendown.png" alt="">
|
|
|
+ <span style="color: green;">{{timeCompare}}</span>
|
|
|
+
|
|
|
</span>
|
|
|
- <span style="margin-left: 10%;" v-else-if="personData>= 0">
|
|
|
- <img style=" width: 25px;height: 25px;" class="title-radio-img" src="@/assets/down.png" alt="">
|
|
|
- <span style="color: red;">10%</span>
|
|
|
+ <span v-else-if="timeCompare.indexOf('-') == -1">
|
|
|
+ <img style=" width: 25px;height: 25px;" class="title-radio-img"
|
|
|
+ src="@/assets/upred.png" alt="">
|
|
|
+ <span style="color: red;">{{timeCompare}}</span>
|
|
|
</span>
|
|
|
+ <a-tooltip placement="top">
|
|
|
+ <template slot="title">
|
|
|
+ <span>所选时间段内的消耗与相邻的同长度的时间段对比</span>
|
|
|
+ </template>
|
|
|
+ <a-icon style="margin-left: 10px;" type="question-circle" />
|
|
|
+ </a-tooltip>
|
|
|
</li>
|
|
|
<li>
|
|
|
- 月消耗:12,520.525
|
|
|
+ <span style="margin-left: 15px;">月消耗: </span>{{monthCost | formatNum}}
|
|
|
</li>
|
|
|
<li>
|
|
|
- 月激励:12,520.525
|
|
|
+ <span style="margin-left: -16px;">月激励消耗: </span>{{directCharged | formatNum}}
|
|
|
</li>
|
|
|
<li>
|
|
|
- 月框返:12,520.525
|
|
|
+ <span style="margin-left: -16px;">月框返消耗: </span>{{contractCharged | formatNum}}
|
|
|
</li>
|
|
|
<li>
|
|
|
- 团队内排名:1/86
|
|
|
+ <span style="margin-left: -16px;">团队内排名: {{userIdRank}}/{{userRankTotalNum}}</span>
|
|
|
</li>
|
|
|
</ul>
|
|
|
|
|
@@ -77,12 +111,15 @@
|
|
|
|
|
|
<a-row :gutter="24">
|
|
|
<a-col>
|
|
|
- <a-card title="项目列表" >
|
|
|
+ <a-card >
|
|
|
+ <div slot="title">
|
|
|
+ <span style="font-weight: bolder;">{{titleName}}</span>
|
|
|
+ </div>
|
|
|
<div class="person-content-title" slot="extra">
|
|
|
<div class="content-title-acount"></div>
|
|
|
<div class="content-title-checkout">
|
|
|
<span style="margin-right: 20px;">
|
|
|
- <a-button type="link">
|
|
|
+ <a-button type="link" @click="customColumn">
|
|
|
自定义列
|
|
|
</a-button>
|
|
|
</span>
|
|
@@ -90,10 +127,11 @@
|
|
|
<a-range-picker
|
|
|
v-model="dateMiddleProject"
|
|
|
:ranges="dateRanges"
|
|
|
+ @change="dateMiddleProjectChange"
|
|
|
/>
|
|
|
</span>
|
|
|
<span>
|
|
|
- <a-radio-group v-model="projectAccount" >
|
|
|
+ <a-radio-group v-model="projectAccount" @change="projectAccountChange">
|
|
|
<a-radio-button value="a">
|
|
|
项目
|
|
|
</a-radio-button>
|
|
@@ -114,17 +152,32 @@
|
|
|
:pagination="echartsIpaginationProject"
|
|
|
:loading="echartsLoading"
|
|
|
ref="accountTable"
|
|
|
- ></a-table>
|
|
|
+ :scroll="{ x: scrollX }"
|
|
|
+ @change="sort"
|
|
|
+ >
|
|
|
+ <span slot="leave" slot-scope="leave">{{leave | removalPercentage}}</span>
|
|
|
+ <a slot="projectName" slot-scope="text,record" @click="projectNameClick(record)">{{ text }}</a>
|
|
|
+ <a slot="accountName" slot-scope="text,record" @click="accountNameClick(record)">{{ text }}</a>
|
|
|
+ </a-table>
|
|
|
|
|
|
</a-card>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
+ <customColumnProject
|
|
|
+ :visible="visible"
|
|
|
+ :listNum="listNum"
|
|
|
+ :fiexColumn="columnsFixd"
|
|
|
+ :mediaType="2"
|
|
|
+ @closeCustomColumn="closeCustomColumn"
|
|
|
+ @changeColumn="changeColumn"
|
|
|
+ />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
|
|
|
<script>
|
|
|
- import keepPersonData from '../keep-manage/keep-manage-data.js';
|
|
|
+ import keepPersonData from './new-keep-data.js';
|
|
|
+ import customColumnProject from './customColumnProject.vue'
|
|
|
import moment from 'moment';
|
|
|
// 引入基本模板
|
|
|
var echarts = require('echarts');
|
|
@@ -136,20 +189,36 @@
|
|
|
require('echarts/lib/component/graphic');
|
|
|
require('echarts/lib/component/toolbox');
|
|
|
require('echarts/lib/component/legend');
|
|
|
+ import { mapGetters } from 'vuex'
|
|
|
export default{
|
|
|
+ components:{customColumnProject},
|
|
|
data() {
|
|
|
return {
|
|
|
+ visible:false,
|
|
|
updateAccountEchart:'2021-12-22 8:00:00',
|
|
|
dateEchart:[moment(), moment()],
|
|
|
+ scrollX:1500,
|
|
|
dateRanges: keepPersonData.setTimeRange(),
|
|
|
personData:0,
|
|
|
+ columnsFixd:keepPersonData.setNoDeleteColumns(),
|
|
|
+ listNum:[],
|
|
|
dateMiddleProject:[moment(), moment()],
|
|
|
echartsDataProject:[],
|
|
|
+ queryUserId:'',
|
|
|
echartsLoading: false,
|
|
|
projectAccount:'a',
|
|
|
+ target: 'cost',
|
|
|
+ order: 'descend',
|
|
|
+ compare:'',
|
|
|
+ todayList:[],
|
|
|
+ yesterdayList:[],
|
|
|
+ timeData:[],
|
|
|
+ lengthData:[],
|
|
|
+ yestadyNum:1,
|
|
|
+ titleName:'项目列表',
|
|
|
echartsIpaginationProject:{
|
|
|
current: 1,
|
|
|
- pageSize: 5,
|
|
|
+ pageSize: 10,
|
|
|
// pageSizeOptions: ['10', '20', '30'],
|
|
|
showTotal: (total, range) => {
|
|
|
return range[0] + '-' + range[1] + ' 共' + total + '条'
|
|
@@ -169,62 +238,567 @@
|
|
|
{
|
|
|
title: '项目名称',
|
|
|
align: "center",
|
|
|
- dataIndex: ''
|
|
|
+ dataIndex: 'projectName',
|
|
|
+ scopedSlots: { customRender: 'projectName' },
|
|
|
},{
|
|
|
title: '账户数量',
|
|
|
align: "center",
|
|
|
- dataIndex: ''
|
|
|
+ dataIndex: 'accountNum'
|
|
|
},{
|
|
|
- title: '运营人员',
|
|
|
+ title: '运营人员数量',
|
|
|
align: "center",
|
|
|
- dataIndex: ''
|
|
|
+ dataIndex: 'userNum'
|
|
|
},{
|
|
|
- title: '花费',
|
|
|
+ title: '消耗(元)',
|
|
|
align: "center",
|
|
|
- dataIndex: '',
|
|
|
- sorter: true,
|
|
|
+ dataIndex: 'totalCost',
|
|
|
+ sorter: (a, b) => a.totalCost - b.totalCost,
|
|
|
},{
|
|
|
title: '花费环比',
|
|
|
align: "center",
|
|
|
- dataIndex: ''
|
|
|
+ dataIndex: 'rate'
|
|
|
},{
|
|
|
title: '花费同比',
|
|
|
align: "center",
|
|
|
- dataIndex: ''
|
|
|
+ dataIndex: 'equallyRate'
|
|
|
},{
|
|
|
title: '上新素材数',
|
|
|
align: "center",
|
|
|
- dataIndex: ''
|
|
|
+ dataIndex: 'newVideoNum'
|
|
|
},{
|
|
|
title: '有效素材数',
|
|
|
align: "center",
|
|
|
- dataIndex: ''
|
|
|
+ dataIndex: 'newEffectNum'
|
|
|
},{
|
|
|
title: '爆款素材数',
|
|
|
align: "center",
|
|
|
- dataIndex: ''
|
|
|
+ dataIndex: 'newHotNum'
|
|
|
},{
|
|
|
title: '激活数',
|
|
|
align: "center",
|
|
|
- dataIndex: ''
|
|
|
+ dataIndex: 'activation'
|
|
|
},{
|
|
|
title: '激活单价',
|
|
|
align: "center",
|
|
|
- dataIndex: ''
|
|
|
+ dataIndex: 'activationPrice'
|
|
|
},{
|
|
|
title: '行为数',
|
|
|
align: "center",
|
|
|
- dataIndex: ''
|
|
|
+ dataIndex: 'keyActionCost'
|
|
|
},
|
|
|
- ]
|
|
|
+ ],
|
|
|
+ todayCost:'',
|
|
|
+ timeCost:'',
|
|
|
+ todayCompare:'',
|
|
|
+ timeCompare:'',
|
|
|
+ directCharged:'',
|
|
|
+ contractCharged:'',
|
|
|
+ userRankTotalNum:'',
|
|
|
+ userIdRank:'',
|
|
|
+ monthCost:'',
|
|
|
+ userName:'',
|
|
|
}
|
|
|
},
|
|
|
+ filters:{
|
|
|
+ formatNum: function (value) {
|
|
|
+ if (!value) {
|
|
|
+ return '暂无数据'
|
|
|
+ } else if (value == '暂无数据') {
|
|
|
+ return '暂无数据'
|
|
|
+ }
|
|
|
+ return Number(value).toFixed(3).toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");
|
|
|
+ },
|
|
|
+ },
|
|
|
mounted() {
|
|
|
+ if (sessionStorage.getItem('personalUserId')) {
|
|
|
+ this.queryUserId = sessionStorage.getItem('personalUserId')
|
|
|
+ }
|
|
|
+ this.showColumn()
|
|
|
this.getQueryNewlyData();
|
|
|
+ this.personalData();
|
|
|
+ this.getItemList();
|
|
|
+
|
|
|
},
|
|
|
methods: {
|
|
|
+ ...mapGetters([ 'userInfo']),
|
|
|
+ // 个人数据
|
|
|
+ personalData(){
|
|
|
+ let params = {
|
|
|
+ mediaType:2,
|
|
|
+ userId:'',
|
|
|
+ startTime: this.dateEchart[0].format('YYYY-MM-DD'),
|
|
|
+ endTime: this.dateEchart[1].format('YYYY-MM-DD'),
|
|
|
+ }
|
|
|
+ if (this.queryUserId) {
|
|
|
+ params.userId = this.queryUserId
|
|
|
+ }else{
|
|
|
+ params.userId = this.userInfo().id
|
|
|
+ }
|
|
|
+ this.getAction(process.env.VUE_APP_BASE_STARE_URL+'/kuaiShouOpreate/kuaiShouMaterialStareController/kuaiShouOperateDateTotalPersonal',params).then(res=>{
|
|
|
+ if (res.code == 0) {
|
|
|
+ // 今日消耗
|
|
|
+ console.log(res.result.todayCost);
|
|
|
+ if (res.result.todayCost) {
|
|
|
+ this.todayCost = res.result.todayCost
|
|
|
+ }else{
|
|
|
+ this.todayCost = '暂无数据'
|
|
|
+ }
|
|
|
+ // 今日环比
|
|
|
+ if (res.result.todayCompare) {
|
|
|
+ this.todayCompare = res.result.todayCompare;
|
|
|
+ }else{
|
|
|
+ this.todayCompare = '暂无数据'
|
|
|
+ }
|
|
|
+ // 时间段环比
|
|
|
+ if(res.result.timeCompare){
|
|
|
+ this.timeCompare = res.result.timeCompare;
|
|
|
+ }else{
|
|
|
+ this.timeCompare = '暂无数据'
|
|
|
+ }
|
|
|
+ // 框返
|
|
|
+ if (res.result.contractCharged) {
|
|
|
+ this.contractCharged = res.result.contractCharged
|
|
|
+ }else{
|
|
|
+ this.contractCharged = '暂无数据'
|
|
|
+ }
|
|
|
+ // 月激励
|
|
|
+ if (res.result.directCharged) {
|
|
|
+ this.directCharged = res.result.directCharged
|
|
|
+ }else{
|
|
|
+ this.directCharged = '暂无数据'
|
|
|
+ }
|
|
|
+ // 时间段消耗
|
|
|
+ if(res.result.timeCost){
|
|
|
+ this.timeCost = res.result.timeCost
|
|
|
+ }else{
|
|
|
+ this.timeCost = '暂无数据'
|
|
|
+ }
|
|
|
+ // 排名总数
|
|
|
+ if(res.result.userRankTotalNum){
|
|
|
+ this.userRankTotalNum = res.result.userRankTotalNum
|
|
|
+ }else{
|
|
|
+ this.userRankTotalNum = '暂无数据'
|
|
|
+ }
|
|
|
+ // 排名
|
|
|
+ if(res.result.userIdRank){
|
|
|
+ this.userIdRank = res.result.userIdRank;
|
|
|
+ }else{
|
|
|
+ this.userIdRank = '暂无数据'
|
|
|
+ }
|
|
|
+ if(res.result.monthCost){
|
|
|
+ this.monthCost = res.result.monthCost
|
|
|
+ }else{
|
|
|
+ this.monthCost = '暂无数据'
|
|
|
+ }
|
|
|
+ if(res.result.userName){
|
|
|
+ this.userName = res.result.userName
|
|
|
+ }else{
|
|
|
+ this.userName = '暂无数据'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 项目列表
|
|
|
+ getItemList(){
|
|
|
+ this.echartsLoading = true;
|
|
|
+ let params = {
|
|
|
+ startTime: this.dateMiddleProject[0].format('YYYY-MM-DD'),
|
|
|
+ endTime: this.dateMiddleProject[1].format('YYYY-MM-DD'),
|
|
|
+ userId:'',
|
|
|
+ pageNum:this.echartsIpaginationProject.current,
|
|
|
+ pageSize:this.echartsIpaginationProject.pageSize,
|
|
|
+ }
|
|
|
+ if (this.queryUserId) {
|
|
|
+ params.userId = this.queryUserId
|
|
|
+ }else{
|
|
|
+ params.userId = this.userInfo().id
|
|
|
+ }
|
|
|
+ this.getAction(process.env.VUE_APP_BASE_STARE_URL+'/kuaiShouOpreate/kuaiShouMaterialStareController/getKuaiShouOperateProjectInfo',params).then(res=>{
|
|
|
+ if (res.code == 0) {
|
|
|
+ this.echartsDataProject = res.result.list;
|
|
|
+ this.echartsIpaginationProject.total = res.result.total;
|
|
|
+ this.echartsLoading = false;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getAccountData(){
|
|
|
+ let params = {
|
|
|
+ startTime: this.dateMiddleProject[0].format('YYYY-MM-DD'),
|
|
|
+ endTime: this.dateMiddleProject[1].format('YYYY-MM-DD'),
|
|
|
+ userId:'',
|
|
|
+ pageNum:this.echartsIpaginationProject.current,
|
|
|
+ pageSize:this.echartsIpaginationProject.pageSize,
|
|
|
+ projectId:this.projectId
|
|
|
+ }
|
|
|
+ if (this.queryUserId) {
|
|
|
+ params.userId = this.queryUserId
|
|
|
+ }else{
|
|
|
+ params.userId = this.userInfo().id
|
|
|
+ }
|
|
|
+ this.getAction(process.env.VUE_APP_BASE_STARE_URL+'/kuaiShouOpreate/kuaiShouMaterialStareController/getKuaiShouOperateAccountInfo',params).then(res=>{
|
|
|
+ if (res.code == 0) {
|
|
|
+ this.echartsDataProject = res.result.list;
|
|
|
+ this.echartsIpaginationProject.total = res.result.total;
|
|
|
+ this.echartsLoading = false;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ projectNameClick(row){
|
|
|
+ this.titleName = '账户列表'
|
|
|
+ this.echartsLoading = true;
|
|
|
+ this.columnsFixd = keepPersonData.setNoActionProjectColumns();
|
|
|
+ this.listNum = keepPersonData.setNoActionProjectColumns();
|
|
|
+ this.columnsProject=[
|
|
|
+ {
|
|
|
+ title: '账户名称',
|
|
|
+ align: "center",
|
|
|
+ dataIndex: 'accountName',
|
|
|
+ scopedSlots: { customRender: 'accountName' },
|
|
|
+ },{
|
|
|
+ title: '账户ID',
|
|
|
+ dataIndex: 'accountId',
|
|
|
+ scopedSlots: { customRender: 'accountId' },
|
|
|
+ align: 'center',
|
|
|
+ }, {
|
|
|
+ title: '运营人员名称',
|
|
|
+ align: "center",
|
|
|
+ dataIndex: 'userName'
|
|
|
+ },{
|
|
|
+ title: '预算',
|
|
|
+ dataIndex: 'warningAmount',
|
|
|
+ scopedSlots: { customRender: 'warningAmount' },
|
|
|
+ align: 'center',
|
|
|
+ },{
|
|
|
+ title: '余额',
|
|
|
+ dataIndex: 'balance',
|
|
|
+ scopedSlots: { customRender: 'balance' },
|
|
|
+ align: 'center',
|
|
|
+ }, {
|
|
|
+ title: '消耗(元)',
|
|
|
+ align: "center",
|
|
|
+ dataIndex: 'totalCost'
|
|
|
+ }, {
|
|
|
+ title: '花费环比',
|
|
|
+ align: "center",
|
|
|
+ dataIndex: 'yearOnYear',
|
|
|
+ }, {
|
|
|
+ title: '花费同比',
|
|
|
+ align: "center",
|
|
|
+ dataIndex: 'equallyRate',
|
|
|
+ },
|
|
|
+
|
|
|
+ ],
|
|
|
+ this.projectId = row.projectId;
|
|
|
+ this.echartsIpaginationProject.current = 1;
|
|
|
+ this.getAccountData();
|
|
|
+ this.projectAccount = 'b';
|
|
|
+ this.showColumn();
|
|
|
+ },
|
|
|
+ accountNameClick(row){
|
|
|
+ // this.$router.push({path:'/modules/stockWatch/modules/new-keepManage/account-newkeepManage',query:{accountId:row.accountId}})
|
|
|
+ },
|
|
|
+ sort(pagination, filters, sorter, { currentDataSource }){
|
|
|
+ this.echartsLoading = true;
|
|
|
+
|
|
|
+ // console.log(pagination, filters, sorter)
|
|
|
+ this.echartsIpaginationProject.current=pagination.current
|
|
|
+ this.echartsIpaginationProject.pageSize=pagination.pageSize
|
|
|
+ if (this.projectAccount == 'a') {
|
|
|
+ // if (sorter.order) {
|
|
|
+ // this.order = sorter.order ? sorter.order : 'descend'
|
|
|
+ // this.target = sorter.columnKey
|
|
|
+ // this.getItemList({ target: sorter.columnKey, order: sorter.order ? sorter.order : 'descend' })
|
|
|
+ // }
|
|
|
+ this.getItemList();
|
|
|
+ console.log(sorter);
|
|
|
+ }else{
|
|
|
+ this.getAccountData();
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ dateMiddleProjectChange(){
|
|
|
+ this.echartsLoading = true;
|
|
|
+ this.echartsIpaginationProject.current = 1;
|
|
|
+ if (this.projectAccount == 'a') {
|
|
|
+ this.getItemList()
|
|
|
+ }else{
|
|
|
+ this.getAccountData();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ projectAccountChange(ent){
|
|
|
+ this.echartsLoading = true;
|
|
|
+ if (ent.target.value == 'a') {
|
|
|
+ this.titleName = '项目列表'
|
|
|
+ this.columnsFixd = keepPersonData.setNoDeleteColumns();
|
|
|
+ this.listNum = keepPersonData.setNoDeleteColumns();
|
|
|
+ this.projectId = '';
|
|
|
+ this.columnsProject = [
|
|
|
+ {
|
|
|
+ title: '项目名称',
|
|
|
+ align: "center",
|
|
|
+ dataIndex: 'projectName',
|
|
|
+ scopedSlots: { customRender: 'projectName' },
|
|
|
+ }, {
|
|
|
+ title: '账户数量',
|
|
|
+ align: "center",
|
|
|
+ dataIndex: 'accountNum'
|
|
|
+ }, {
|
|
|
+ title: '运营人员数量',
|
|
|
+ align: "center",
|
|
|
+ dataIndex: 'userNum',
|
|
|
+ }, {
|
|
|
+ title: '消耗(元)',
|
|
|
+ align: "center",
|
|
|
+ dataIndex: 'totalCost'
|
|
|
+ }, {
|
|
|
+ title: '花费环比',
|
|
|
+ align: "center",
|
|
|
+ dataIndex: 'yearOnYear',
|
|
|
+ }, {
|
|
|
+ title: '花费同比',
|
|
|
+ align: "center",
|
|
|
+ dataIndex: 'equallyRate',
|
|
|
+ }, {
|
|
|
+ title: '上新素材数',
|
|
|
+ align: "center",
|
|
|
+ dataIndex: 'newVideoNum',
|
|
|
+ },{
|
|
|
+ title: '爆款素材数',
|
|
|
+ align: "center",
|
|
|
+ dataIndex: 'newHotNum',
|
|
|
+ },{
|
|
|
+ title: '有效素材数',
|
|
|
+ align: "center",
|
|
|
+ dataIndex: 'newEffectNum',
|
|
|
+ },{
|
|
|
+ title: '激活数',
|
|
|
+ align: "center",
|
|
|
+ dataIndex: 'activation',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '激活单价',
|
|
|
+ align: "center",
|
|
|
+ dataIndex: 'activationPrice',
|
|
|
+ },{
|
|
|
+ title: '行为数',
|
|
|
+ align: "center",
|
|
|
+ dataIndex: 'keyActionCost'
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ this.echartsIpaginationProject.current = 1;
|
|
|
+ this.getItemList()
|
|
|
+ }else{
|
|
|
+ this.titleName = '账户列表';
|
|
|
+ this.columnsFixd = keepPersonData.setNoActionProjectColumns();
|
|
|
+ this.listNum = keepPersonData.setNoActionProjectColumns();
|
|
|
+ console.log(this.columnsFixd);
|
|
|
+ this.columnsProject=[
|
|
|
+ {
|
|
|
+ title: '账户名称',
|
|
|
+ align: "center",
|
|
|
+ dataIndex: 'accountName',
|
|
|
+ scopedSlots: { customRender: 'accountName' },
|
|
|
+ }, {
|
|
|
+ title: '运营人员名称',
|
|
|
+ align: "center",
|
|
|
+ dataIndex: 'userName'
|
|
|
+ },{
|
|
|
+ title: '预算',
|
|
|
+ dataIndex: 'warningAmount',
|
|
|
+ scopedSlots: { customRender: 'warningAmount' },
|
|
|
+ align: 'center',
|
|
|
+ },{
|
|
|
+ title: '余额',
|
|
|
+ dataIndex: 'balance',
|
|
|
+ scopedSlots: { customRender: 'balance' },
|
|
|
+ align: 'center',
|
|
|
+ }, {
|
|
|
+ title: '消耗(元)',
|
|
|
+ align: "center",
|
|
|
+ dataIndex: 'totalCost'
|
|
|
+ }, {
|
|
|
+ title: '花费环比',
|
|
|
+ align: "center",
|
|
|
+ dataIndex: 'yearOnYear',
|
|
|
+ }, {
|
|
|
+ title: '花费同比',
|
|
|
+ align: "center",
|
|
|
+ dataIndex: 'equallyRate',
|
|
|
+ },
|
|
|
+
|
|
|
+ ],
|
|
|
+ this.echartsIpaginationProject.current = 1;
|
|
|
+ this.getAccountData();
|
|
|
+ }
|
|
|
+ this.showColumn();
|
|
|
+ },
|
|
|
+ // 自定义列
|
|
|
+ customColumn(){
|
|
|
+ this.visible = true;
|
|
|
+ this.listNum = [...this.columnsProject]
|
|
|
+ },
|
|
|
+ //自定义列相关
|
|
|
+ closeCustomColumn() {
|
|
|
+ this.visible = false
|
|
|
+ },
|
|
|
+ showColumn() {
|
|
|
+ this.postDataAction('/toutiao/videoReportDaily/getColumnJson', {
|
|
|
+ columnType: this.projectAccount === 'a' ? 104 : 105,
|
|
|
+ }).then((res) => {
|
|
|
+ // console.log(res)
|
|
|
+ if (res.success) {
|
|
|
+ // console.log(JSON.parse(res.result))
|
|
|
+ if (res.result) {
|
|
|
+ let columns = JSON.parse(res.result)
|
|
|
+ console.log(columns);
|
|
|
+ if (columns.length) {
|
|
|
+ if (columns.length >= this.columnsFixd.length) {
|
|
|
+ columns.map((item, index) => {
|
|
|
+ if (index > this.columnsFixd.length - 1) {
|
|
|
+ item.sorter = function (a, b) {}
|
|
|
+ }
|
|
|
+ })
|
|
|
+ columns = columns.slice(this.columnsFixd.length)
|
|
|
+ this.columnsProject = [...this.columnsFixd, ...columns]
|
|
|
+ }
|
|
|
+
|
|
|
+ // console.log(this.columns)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ this.changeColumn(this.columnsProject)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ changeColumn(val) {
|
|
|
+ this.columnsProject = [...val]
|
|
|
+ if (this.columnsProject.length > this.columnsFixd.length && this.columnsProject.length < 8) {
|
|
|
+ this.columnsProject.forEach((element, index) => {
|
|
|
+ if (index < this.columnsProject.length - 1) {
|
|
|
+
|
|
|
+ element.width = 'auto'
|
|
|
+ element.fixed = false
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ this.scrollX = 0
|
|
|
+ }
|
|
|
+ else if (this.columnsProject.length > 8) {
|
|
|
+ this.columnsProject.forEach((element, index) => {
|
|
|
+ if (index < this.columnsFixd.length) {
|
|
|
+ if (element.dataIndex == 'accountNum') {
|
|
|
+ element.width = 100
|
|
|
+ element.fixed = 'left'
|
|
|
+ } else if (element.dataIndex == 'userNum') {
|
|
|
+ element.width = 100
|
|
|
+ element.fixed = 'left'
|
|
|
+ } else if (element.dataIndex == 'yearOnYear') {
|
|
|
+ element.width = 100
|
|
|
+ element.fixed = 'left'
|
|
|
+ } else if (element.dataIndex == 'equallyRate') {
|
|
|
+ element.width = 100
|
|
|
+ element.fixed = 'left'
|
|
|
+ } else {
|
|
|
+ element.width = 150
|
|
|
+ element.fixed = 'left'
|
|
|
+ }
|
|
|
+
|
|
|
+ }else if (this.columnsProject.length == this.columnsFixd.length) {
|
|
|
+ this.columnsProject.forEach((element, index) => {
|
|
|
+ element.width = 'auto';
|
|
|
+ element.fixed = false;
|
|
|
+ })
|
|
|
+ this.scrollX = false
|
|
|
+ }else{
|
|
|
+ element.width = 'auto';
|
|
|
+ element.fixed = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ this.scrollX = 1000 + 150 * (this.columnsProject.length - this.columnsFixd.length)
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ this.scrollX = 0
|
|
|
+ this.columnsProject.forEach((element) => {
|
|
|
+
|
|
|
+ element.width = 'auto'
|
|
|
+ element.fixed = false
|
|
|
+
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ let arr = JSON.stringify(this.columnsProject)
|
|
|
+ this.postDataAction('/toutiao/videoReportDaily/saveOrUpdateColumnJson', {
|
|
|
+ json: arr,
|
|
|
+ columnType: this.projectAccount === 'a' ? 104 : 105,
|
|
|
+ }).then((res) => {
|
|
|
+ // console.log(res)
|
|
|
+ })
|
|
|
+ },
|
|
|
getQueryNewlyData(){
|
|
|
- this.initEchart('accountIndexEchart',this.initAccountIndexEchart())
|
|
|
+ let params = {
|
|
|
+ startTime: this.dateEchart[0].format('YYYY-MM-DD'),
|
|
|
+ endTime: this.dateEchart[1].format('YYYY-MM-DD'),
|
|
|
+ mediaType:2,
|
|
|
+ userId:''
|
|
|
+ }
|
|
|
+ if (this.queryUserId) {
|
|
|
+ params.userId = this.queryUserId
|
|
|
+ }else{
|
|
|
+ params.userId = this.userInfo().id
|
|
|
+ }
|
|
|
+ this.getAction(process.env.VUE_APP_BASE_STARE_URL+'/kuaiShouOpreate/kuaiShouMaterialStareController/kuaiShousumDataPersonal',params).then(res=>{
|
|
|
+ if (res.code == 0) {
|
|
|
+ if (res.message == '查询运营个人-时报-汇总。') {
|
|
|
+
|
|
|
+ this.todayList = res.result.todayList.map((item) => {
|
|
|
+ return item.totalCost
|
|
|
+ })
|
|
|
+ this.yesterdayList = res.result.yesterdayList.map((item) => {
|
|
|
+ return item.totalCost
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ this.timeData = res.result.yesterdayList.map((itemdate) => {
|
|
|
+ return itemdate.hour
|
|
|
+ })
|
|
|
+ this.lengthData = ['今天', '昨天'];
|
|
|
+ this.initEchart('accountIndexEchartDay', this.initAccountIndexEchartDay(this.todayList, this.yesterdayList, this.timeData,this.lengthData))
|
|
|
+ }else if(res.message == '查询运营个人-日报-汇总成功。'){
|
|
|
+
|
|
|
+ this.todayList = res.result.map((item) => {
|
|
|
+ return item.totalCost
|
|
|
+ })
|
|
|
+ this.timeData = res.result.map((itemdate) => {
|
|
|
+ return itemdate.dateTime
|
|
|
+ })
|
|
|
+ this.yesterdayList = [];
|
|
|
+ this.lengthData = ['消耗汇总'];
|
|
|
+
|
|
|
+ let series = {
|
|
|
+ name: '消耗汇总',
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ symbol: 'circle',
|
|
|
+ data: this.todayList
|
|
|
+ };
|
|
|
+ this.initEchart('accountIndexEchart', this.initAccountIndexEchart(this.todayList, this.yesterdayList, this.timeData,this.lengthData,series))
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // this.initEchart('accountIndexEchart',this.initAccountIndexEchart())
|
|
|
+ },
|
|
|
+ dateRangesChange(e){
|
|
|
+ if (this.dateEchart[0].format('YYYY-MM-DD') ==this.dateEchart[1].format('YYYY-MM-DD')) {
|
|
|
+ this.yestadyNum = 1
|
|
|
+ }else{
|
|
|
+ this.yestadyNum = 2
|
|
|
+ }
|
|
|
+ this.getQueryNewlyData();
|
|
|
+ this.personalData();
|
|
|
},
|
|
|
//获取echart的值
|
|
|
initEchart(idName, optionName) {
|
|
@@ -246,7 +820,7 @@
|
|
|
}
|
|
|
},
|
|
|
//趋势图echarts配置
|
|
|
- initAccountIndexEchart() {
|
|
|
+ initAccountIndexEchart(todayList,yesterdayList, timeData,lengthData,series) {
|
|
|
// this.clientWidth = document.documentElement.clientWidth - 224
|
|
|
// var myChart = echarts.init(document.getElementById('accountIndexEchart'))
|
|
|
let option = {
|
|
@@ -255,7 +829,7 @@
|
|
|
trigger: 'axis'
|
|
|
},
|
|
|
legend: {
|
|
|
- data: ['today','yesterday']
|
|
|
+ data: lengthData
|
|
|
},
|
|
|
grid: {
|
|
|
left: '3%',
|
|
@@ -272,56 +846,78 @@
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
boundaryGap: false,
|
|
|
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
|
|
+ data: timeData
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'value'
|
|
|
},
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: 'today',
|
|
|
- type: 'line',
|
|
|
- smooth: true,
|
|
|
- symbol: 'circle',
|
|
|
- data: [120, 132, 101, 134, 90, 230, 210],
|
|
|
- lineStyle: {
|
|
|
- color: '#00BFFF',
|
|
|
- width: 2,
|
|
|
- },
|
|
|
- itemStyle:{
|
|
|
- color:'#00BFFF',
|
|
|
- borderWidth:2,
|
|
|
- borderColor:'#00BFFF'
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'yesterday',
|
|
|
- type: 'line',
|
|
|
- smooth: true,
|
|
|
- symbol: 'circle',
|
|
|
- data: [220, 182, 191, 234, 290, 330, 310],
|
|
|
- lineStyle: {
|
|
|
- color: '#00FF7F',
|
|
|
- width: 2,
|
|
|
- },
|
|
|
- itemStyle:{
|
|
|
- color:'#00FF7F',
|
|
|
- borderWidth:2,
|
|
|
- borderColor:'#00FF00'
|
|
|
- },
|
|
|
- },
|
|
|
-
|
|
|
- ]
|
|
|
+ series:series
|
|
|
};
|
|
|
return option
|
|
|
},
|
|
|
+ initAccountIndexEchartDay(todayList,yesterdayList, timeData,lengthData){
|
|
|
+ let option = {
|
|
|
+
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: lengthData
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true
|
|
|
+
|
|
|
+ },
|
|
|
+ // toolbox: {
|
|
|
+ // feature: {
|
|
|
+ // saveAsImage: {}
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ data: timeData
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ series:[{
|
|
|
+ name: '今天',
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ symbol: 'circle',
|
|
|
+ data: todayList,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#00BFFF',
|
|
|
+ width: 2,
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ color: '#00BFFF',
|
|
|
+ borderWidth: 2,
|
|
|
+ borderColor: '#00BFFF'
|
|
|
+ },
|
|
|
+ },{
|
|
|
+ name: '昨天',
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ symbol: 'circle',
|
|
|
+ data: yesterdayList,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#00FF7F',
|
|
|
+ width: 2,
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ color: '#00FF7F',
|
|
|
+ borderWidth: 2,
|
|
|
+ borderColor: '#00FF00'
|
|
|
+ },
|
|
|
+ }]
|
|
|
+ };
|
|
|
+ return option
|
|
|
+ },
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
-<style lang="less" scoped>
|
|
|
- @import "../keep-manage/keep-manage.less";
|
|
|
- .group-keep-ul li{
|
|
|
- margin-bottom: 15px;
|
|
|
- font-size: 16px;
|
|
|
-}
|
|
|
-</style>
|