|
@@ -1,11 +1,730 @@
|
|
<template>
|
|
<template>
|
|
<div class="keep-manage-content">
|
|
<div class="keep-manage-content">
|
|
- 这个是运营经理的页面
|
|
|
|
|
|
+ <a-spin :spinning="accountPageSpinning">
|
|
|
|
+ <a-row :gutter="24">
|
|
|
|
+ <a-col :sm="18" :md="18" :xl="18" class="keep-manage-col">
|
|
|
|
+ <a-card title="运营人员" class="card-content">
|
|
|
|
+ <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"
|
|
|
|
+ :ranges="dateRanges"
|
|
|
|
+ :disabled-date="disabledDate"
|
|
|
|
+ @change="setDataQuery"
|
|
|
|
+ />
|
|
|
|
+ </span>
|
|
|
|
+ <span class="title-checkout-select">
|
|
|
|
+ <a-select v-model="selectValue" @change="getQueryNewlyData">
|
|
|
|
+ <a-select-option value="charge">花费</a-select-option>
|
|
|
|
+ <a-select-option value="campaign">新上计划数</a-select-option>
|
|
|
|
+ <a-select-option value="unit">新上组数</a-select-option>
|
|
|
|
+ </a-select>
|
|
|
|
+ </span>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="accountIndexEchart" id="accountIndexEchart" ref="accountIndexEchart" :style="{ width: (clientWidth / 24) * 18 - 48 - 24 + 'px' }">
|
|
|
|
+ <a-empty />
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ </a-card>
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col :sm="6" :md="6" :xl="6" class="keep-manage-col">
|
|
|
|
+ <a-card class="card-content" v-if="personData">
|
|
|
|
+ <h2>
|
|
|
|
+ <span>你好!{{personData.realName||'-'}}</span>
|
|
|
|
+ <span class="no-person">NO.{{personData.rank||'-'}}</span>
|
|
|
|
+ </h2>
|
|
|
|
+ <div class="header-left-title">
|
|
|
|
+ <span>今日消耗:</span>
|
|
|
|
+ <span class="left-title-radio" v-if="personData && personData.grew >= 0">
|
|
|
|
+ <img class="title-radio-img" src="@/assets/up.png" alt="">
|
|
|
|
+ {{ personData.grew ? personData.grew + '%' : '-' }}
|
|
|
|
+ </span>
|
|
|
|
+ <!-- TODO 这个是下降的样式,后续优化 -->
|
|
|
|
+ <span class="left-title-radio-down" v-else-if="personData && personData.grew < 0">
|
|
|
|
+ <img class="title-radio-img" src="@/assets/down.png" alt="">
|
|
|
|
+ {{personData.grew ? personData.grew + '%':'-'}}
|
|
|
|
+ </span>
|
|
|
|
+ </div>
|
|
|
|
+ <h1><span v-if="personData">{{personData.charge | decimalsHandle}}</span><span v-else>-</span></h1>
|
|
|
|
+ <div class="header-left-title-else">
|
|
|
|
+ <span class="title-label">账户数:</span>
|
|
|
|
+ <span>
|
|
|
|
+ {{ personData.accouuntCount ? personData.accouuntCount : '-' }}
|
|
|
|
+ </span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="header-left-title-else">
|
|
|
|
+ <span class="title-label">本周消耗:</span>
|
|
|
|
+ <span>
|
|
|
|
+ {{ personData.weekCharge ? personData.weekCharge : '-' }}
|
|
|
|
+ </span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="header-left-title-else">
|
|
|
|
+ <span class="title-label">上周消耗:</span>
|
|
|
|
+ <span>
|
|
|
|
+ {{ personData.lweekCharge ? personData.lweekCharge : '-' }}
|
|
|
|
+ </span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="header-left-title-else">
|
|
|
|
+ <span class="title-label">周环比:</span>
|
|
|
|
+ <span>
|
|
|
|
+ {{ personData.weekGrew ? personData.weekGrew + '%':'-' }}
|
|
|
|
+ </span>
|
|
|
|
+ </div>
|
|
|
|
+ </a-card>
|
|
|
|
+ </a-col>
|
|
|
|
+ </a-row>
|
|
|
|
+ <a-row :gutter="24" class="between-row">
|
|
|
|
+ <a-col>
|
|
|
|
+ <a-card title="运营数据详情">
|
|
|
|
+ <a-table
|
|
|
|
+ size="middle"
|
|
|
|
+ :dataSource="echartsData"
|
|
|
|
+ bordered
|
|
|
|
+ id="outTable"
|
|
|
|
+ :pagination="echartsIpagination"
|
|
|
|
+ :loading="echartsLoading"
|
|
|
|
+ ref="accountTable"
|
|
|
|
+ >
|
|
|
|
+ <a-table-column key="realName" data-index="realName" title="运营人员" align="center"/>
|
|
|
|
+ <a-table-column key="accountCount" data-index="accountCount" title="账户数量" align="center"/>
|
|
|
|
+ <a-table-column key="charge" data-index="charge" title="花费" align="center"/>
|
|
|
|
+ <a-table-column key="weekCharge" data-index="weekCharge" align="center">
|
|
|
|
+ <span slot="title">本周花费
|
|
|
|
+ <a-tooltip>
|
|
|
|
+ <template slot="title">
|
|
|
|
+ 最近本周(周一到周日)广告账户花费
|
|
|
|
+ </template>
|
|
|
|
+ <a-icon type="question-circle" />
|
|
|
|
+ </a-tooltip>
|
|
|
|
+ </span>
|
|
|
|
+ </a-table-column>
|
|
|
|
+ <a-table-column key="grew" data-index="grew" align="center">
|
|
|
|
+ <span slot="title">花费环比
|
|
|
|
+ <a-tooltip>
|
|
|
|
+ <template slot="title">
|
|
|
|
+ 本周与上周的消耗环比
|
|
|
|
+ </template>
|
|
|
|
+ <a-icon type="question-circle" />
|
|
|
|
+ </a-tooltip>
|
|
|
|
+ </span>
|
|
|
|
+ </a-table-column>
|
|
|
|
+ <a-table-column key="effectiveCount" data-index="effectiveCount" title="有效素材数" align="center"/>
|
|
|
|
+ <a-table-column key="campaignCount" data-index="campaignCount" align="center">
|
|
|
|
+ <span slot="title">新上计划数
|
|
|
|
+ <a-tooltip>
|
|
|
|
+ <template slot="title">
|
|
|
|
+ 显示数据为昨日新建计划数
|
|
|
|
+ </template>
|
|
|
|
+ <a-icon type="question-circle" />
|
|
|
|
+ </a-tooltip>
|
|
|
|
+ </span>
|
|
|
|
+ </a-table-column>
|
|
|
|
+ <a-table-column key="unitCount" data-index="unitCount" align="center">
|
|
|
|
+ <span slot="title">新上组数
|
|
|
|
+ <a-tooltip>
|
|
|
|
+ <template slot="title">
|
|
|
|
+ 显示数据为昨日新建广告组数
|
|
|
|
+ </template>
|
|
|
|
+ <a-icon type="question-circle" />
|
|
|
|
+ </a-tooltip>
|
|
|
|
+ </span>
|
|
|
|
+ </a-table-column>
|
|
|
|
+ </a-table>
|
|
|
|
+ </a-card>
|
|
|
|
+ </a-col>
|
|
|
|
+ </a-row>
|
|
|
|
+ <a-card :title="typeValue === 'project' ? '项目列表' : '账户列表'">
|
|
|
|
+ <div class="keep-person-content" slot="extra">
|
|
|
|
+ <div class="person-content-title">
|
|
|
|
+ <div class="content-title-acount"></div>
|
|
|
|
+ <div class="content-title-checkout">
|
|
|
|
+ <span class="title-checkout-custom"><a @click="handleCustomClick">自定义列</a></span>
|
|
|
|
+ <span class="title-checkout-time">
|
|
|
|
+ <a-range-picker
|
|
|
|
+ v-model="dateValue"
|
|
|
|
+ :ranges="dateRanges"
|
|
|
|
+ :disabled-date="disabledDate"
|
|
|
|
+ @change="getPersonList()"
|
|
|
|
+ />
|
|
|
|
+ </span>
|
|
|
|
+ <span class="title-checkout-time">
|
|
|
|
+ <a-radio-group v-model="typeValue" @change="checkOutType">
|
|
|
|
+ <a-radio-button value="project">
|
|
|
|
+ 项目
|
|
|
|
+ </a-radio-button>
|
|
|
|
+ <a-radio-button value="account">
|
|
|
|
+ 账户
|
|
|
|
+ </a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </span>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <a-table
|
|
|
|
+ size="middle"
|
|
|
|
+ :columns="columns"
|
|
|
|
+ :dataSource="dataSource"
|
|
|
|
+ bordered
|
|
|
|
+ id="outTable"
|
|
|
|
+ :pagination="ipagination"
|
|
|
|
+ :scroll="{ x: scrollX }"
|
|
|
|
+ :loading="loading"
|
|
|
|
+ ref="accountTable"
|
|
|
|
+ @change="sort"
|
|
|
|
+ v-if="showChange"
|
|
|
|
+ >
|
|
|
|
+ <!-- style="word-break: break-all; font-size: 16px; font-weight: 600" -->
|
|
|
|
+ <a slot="projectName" slot-scope="text,records" @click="toAccount(records)">{{ text }}</a>
|
|
|
|
+ <a slot="authName" slot-scope="text,records" @click="toDetail(records)">{{ text }}</a>
|
|
|
|
+ <span slot="ctr" slot-scope="ctr">{{ ctr | toPercentage }}</span>
|
|
|
|
+ <span slot="cost" slot-scope="cost">{{ cost | decimalsHandle }}</span>
|
|
|
|
+ <span slot="clickMaterial" slot-scope="clickMaterial">{{ clickMaterial | formatCurrency }}</span>
|
|
|
|
+ <span slot="showMaterial" slot-scope="showMaterial">{{ showMaterial | formatCurrency }}</span>
|
|
|
|
+ <span slot="convertMaterial" slot-scope="convertMaterial">{{ convertMaterial | formatCurrency }}</span>
|
|
|
|
+ <span slot="play25FeedBreak" slot-scope="play25FeedBreak">{{ play25FeedBreak | formatCurrency }}</span>
|
|
|
|
+ <span slot="play50FeedBreak" slot-scope="play50FeedBreak">{{ play50FeedBreak | formatCurrency }}</span>
|
|
|
|
+ <span slot="play75FeedBreak" slot-scope="play75FeedBreak">{{ play75FeedBreak | formatCurrency }}</span>
|
|
|
|
+ <span slot="play100FeedBreak" slot-scope="play100FeedBreak">{{ play100FeedBreak | formatCurrency }}</span>
|
|
|
|
+ <span slot="nextDayOpen" slot-scope="nextDayOpen">{{ nextDayOpen | formatCurrency }}</span>
|
|
|
|
+ <span slot="downloadFinish" slot-scope="downloadFinish">{{ downloadFinish | formatCurrency }}</span>
|
|
|
|
+ <span slot="downloadStart" slot-scope="downloadStart">{{ downloadStart | formatCurrency }}</span>
|
|
|
|
+ <span slot="likeMaterial" slot-scope="likeMaterial">{{ likeMaterial | formatCurrency }}</span>
|
|
|
|
+ <span slot="shareMaterial" slot-scope="shareMaterial">{{ shareMaterial | formatCurrency }}</span>
|
|
|
|
+ <span slot="register" slot-scope="register">{{ register | formatCurrency }}</span>
|
|
|
|
+ <span slot="follow" slot-scope="follow">{{ follow | formatCurrency }}</span>
|
|
|
|
+ <span slot="formCount" slot-scope="formCount">{{ formCount | formatCurrency }}</span>
|
|
|
|
+ <span slot="formCountCost" slot-scope="formCountCost">{{ formCountCost | decimalsHandle }}</span>
|
|
|
|
+ <span slot="aClick" slot-scope="aClick">{{ aClick | formatCurrency }}</span>
|
|
|
|
+ <span slot="photoShow" slot-scope="photoShow">{{ photoShow | formatCurrency }}</span>
|
|
|
|
+ <span slot="photoClick" slot-scope="photoClick">{{ photoClick | formatCurrency }}</span>
|
|
|
|
+ <span slot="bClick" slot-scope="bClick">{{ bClick | formatCurrency }}</span>
|
|
|
|
+ <span slot="active" slot-scope="active">{{ active | formatCurrency }}</span>
|
|
|
|
+ <span slot="submit" slot-scope="submit">{{ submit | formatCurrency }}</span>
|
|
|
|
+ <span slot="nextDayOpen" slot-scope="nextDayOpen">{{ nextDayOpen | formatCurrency }}</span>
|
|
|
|
+ <span slot="eventCreditGrantLandingPage" slot-scope="eventCreditGrantLandingPage">{{
|
|
|
|
+ eventCreditGrantLandingPage | formatCurrency
|
|
|
|
+ }}</span>
|
|
|
|
+ <span slot="submitCost" slot-scope="submitCost">{{ submitCost | decimalsHandle }}</span>
|
|
|
|
+ <span slot="eventCreditGrantLandingPageCost" slot-scope="eventCreditGrantLandingPageCost">{{
|
|
|
|
+ eventCreditGrantLandingPageCost | decimalsHandle
|
|
|
|
+ }}</span>
|
|
|
|
+ <span slot="submitRate" slot-scope="submitRate">{{ submitRate | toPercentage }}</span>
|
|
|
|
+ <span slot="eventCreditGrantLandingPageRate" slot-scope="eventCreditGrantLandingPageRate">{{
|
|
|
|
+ eventCreditGrantLandingPageRate | toPercentage
|
|
|
|
+ }}</span>
|
|
|
|
+ <span slot="play25FeedBreakRate" slot-scope="play25FeedBreakRate">{{
|
|
|
|
+ play25FeedBreakRate | toPercentage
|
|
|
|
+ }}</span>
|
|
|
|
+ <span slot="playOverRate" slot-scope="playOverRate">{{ playOverRate | toPercentage }}</span>
|
|
|
|
+
|
|
|
|
+ <span slot="convertRate" slot-scope="convertRate">{{ convertRate | toPercentage }}</span>
|
|
|
|
+ <span slot="nextDayOpenRate" slot-scope="nextDayOpenRate">{{ nextDayOpenRate | toPercentage }}</span>
|
|
|
|
+ <span slot="ctr" slot-scope="ctr">{{ ctr | toPercentage }}</span>
|
|
|
|
+ <span slot="cpc" slot-scope="cpc">{{ cpc | decimalsHandle }}</span>
|
|
|
|
+ <span slot="cpm" slot-scope="cpm">{{ cpm | decimalsHandle }}</span>
|
|
|
|
+ <span slot="activeRate" slot-scope="activeRate">{{ activeRate | toPercentage }}</span>
|
|
|
|
+ <span slot="installFinishRate" slot-scope="installFinishRate">{{ installFinishRate | toPercentage }}</span>
|
|
|
|
+ <span slot="validPlayRate" slot-scope="validPlayRate">{{ validPlayRate | toPercentage }}</span>
|
|
|
|
+ <span slot="activePayCost" slot-scope="activePayCost">{{ activePayCost | decimalsHandle }}</span>
|
|
|
|
+ <span slot="nextDayOpenCost" slot-scope="nextDayOpenCost">{{ nextDayOpenCost | decimalsHandle }}</span>
|
|
|
|
+ <span slot="validPlayCost" slot-scope="validPlayCost">{{ validPlayCost | decimalsHandle }}</span>
|
|
|
|
+ <span slot="activeCost" slot-scope="activeCost">{{ activeCost | decimalsHandle }}</span>
|
|
|
|
+ <span slot="nextDayOpenCost" slot-scope="nextDayOpenCost">{{ nextDayOpenCost | decimalsHandle }}</span>
|
|
|
|
+ <span slot="gameAddictionCost" slot-scope="gameAddictionCost">{{
|
|
|
|
+ gameAddictionCost | decimalsHandle
|
|
|
|
+ }}</span>
|
|
|
|
+ <span slot="downloadFinishCost" slot-scope="downloadFinishCost">{{
|
|
|
|
+ downloadFinishCost | decimalsHandle
|
|
|
|
+ }}</span>
|
|
|
|
+ <span slot="downloadStartCost" slot-scope="downloadStartCost">{{
|
|
|
|
+ downloadStartCost | decimalsHandle
|
|
|
|
+ }}</span>
|
|
|
|
+ <span slot="installFinishCost" slot-scope="installFinishCost">{{
|
|
|
|
+ installFinishCost | decimalsHandle
|
|
|
|
+ }}</span>
|
|
|
|
+ <span slot="convertCost" slot-scope="convertCost">{{ convertCost | decimalsHandle }}</span>
|
|
|
|
+
|
|
|
|
+ <span slot="downloadStartRate" slot-scope="downloadStartRate">{{ downloadStartRate | toPercentage }}</span>
|
|
|
|
+ <span slot="downloadFinishRate" slot-scope="downloadFinishRate">{{
|
|
|
|
+ downloadFinishRate | toPercentage
|
|
|
|
+ }}</span>
|
|
|
|
+ <span slot="activeRate" slot-scope="activeRate">{{ activeRate | toPercentage }}</span>
|
|
|
|
+ <span slot="activeRegisterRate" slot-scope="activeRegisterRate">{{
|
|
|
|
+ activeRegisterRate | toPercentage
|
|
|
|
+ }}</span>
|
|
|
|
+ <span slot="gameAddictionRate" slot-scope="gameAddictionRate">{{ gameAddictionRate | toPercentage }}</span>
|
|
|
|
+ <span slot="nextDayOpenRate" slot-scope="nextDayOpenRate">{{ nextDayOpenRate | toPercentage }}</span>
|
|
|
|
+ </a-table>
|
|
|
|
+ </a-card>
|
|
|
|
+ </a-spin>
|
|
|
|
+ <customColumn
|
|
|
|
+ :visible="visible"
|
|
|
|
+ :listNum="listNum"
|
|
|
|
+ :fiexColumn="columnsFixd"
|
|
|
|
+ :mediaType="2"
|
|
|
|
+ @closeCustomColumn="closeCustomColumn"
|
|
|
|
+ @changeColumn="changeColumn"
|
|
|
|
+ />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
<script>
|
|
<script>
|
|
|
|
+import customColumn from '@/views/modules/Statistics/components/customColumn.vue'
|
|
|
|
+import keepPersonData from './keep-manage-data';
|
|
|
|
+import { mapGetters } from 'vuex';
|
|
|
|
+import moment from 'moment';
|
|
|
|
+// 引入基本模板
|
|
|
|
+var echarts = require('echarts');
|
|
|
|
+// 引入柱状图组件
|
|
|
|
+require('echarts/lib/chart/line');
|
|
|
|
+// 引入提示框和title组件
|
|
|
|
+require('echarts/lib/component/tooltip');
|
|
|
|
+require('echarts/lib/component/title');
|
|
|
|
+require('echarts/lib/component/graphic');
|
|
|
|
+require('echarts/lib/component/toolbox');
|
|
|
|
+require('echarts/lib/component/legend');
|
|
export default {
|
|
export default {
|
|
- name: 'keep-manage'
|
|
|
|
|
|
+ name: 'keep-manage',
|
|
|
|
+ components: {
|
|
|
|
+ customColumn
|
|
|
|
+ },
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ accountPageSpinning: false,
|
|
|
|
+ typeValue: 'project',
|
|
|
|
+ selectValue: 'charge',
|
|
|
|
+ loading: false,
|
|
|
|
+ totalAll: 100,
|
|
|
|
+ projectId: null,
|
|
|
|
+ dataSource: [],
|
|
|
|
+ showChange: true,
|
|
|
|
+ url: '/etl/reportAccountHourly/projectList',
|
|
|
|
+ listNum: [],
|
|
|
|
+ visible: false,
|
|
|
|
+ columns: [...keepPersonData.setNoDeleteProjectColumns() , ...keepPersonData.setDefaultColumns()],
|
|
|
|
+ echartsColumns: [...keepPersonData.setOperateField()],
|
|
|
|
+ echartsData: [],
|
|
|
|
+ columnsFixd: keepPersonData.setNoDeleteProjectColumns(),
|
|
|
|
+ scrollX: 1500,
|
|
|
|
+ personData: null,
|
|
|
|
+ dateEchart: [moment().subtract(7, 'days'), moment().subtract(1, 'days')],
|
|
|
|
+ dateValue: [moment().subtract(7, 'days'), moment().subtract(1, 'days')],
|
|
|
|
+ dateRanges: keepPersonData.setTimeRange(),
|
|
|
|
+ target: 'cost',
|
|
|
|
+ order: 'descend',
|
|
|
|
+ clientWidth: 0,
|
|
|
|
+ ipagination: {
|
|
|
|
+ current: 1,
|
|
|
|
+ pageSize: 10,
|
|
|
|
+ // pageSizeOptions: ['10', '20', '30'],
|
|
|
|
+ showTotal: (total, range) => {
|
|
|
|
+ return range[0] + '-' + range[1] + ' 共' + total + '条'
|
|
|
|
+ },
|
|
|
|
+ showQuickJumper: true,
|
|
|
|
+ // showSizeChanger: true,
|
|
|
|
+ // pageSizeOptions: ['10', '30', '50'],
|
|
|
|
+ total: 0,
|
|
|
|
+ onChange: (current, pageSize) => {
|
|
|
|
+ // 切换分页时的回调,
|
|
|
|
+ // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
|
|
|
|
+ this.ipagination.current = current
|
|
|
|
+ this.ipagination.pageSize = pageSize
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ echartsLoading: false,
|
|
|
|
+ echartsIpagination: {
|
|
|
|
+ current: 1,
|
|
|
|
+ pageSize: 5,
|
|
|
|
+ // pageSizeOptions: ['10', '20', '30'],
|
|
|
|
+ showTotal: (total, range) => {
|
|
|
|
+ return range[0] + '-' + range[1] + ' 共' + total + '条'
|
|
|
|
+ },
|
|
|
|
+ showQuickJumper: true,
|
|
|
|
+ // showSizeChanger: true,
|
|
|
|
+ // pageSizeOptions: ['10', '30', '50'],
|
|
|
|
+ total: 0,
|
|
|
|
+ onChange: (current, pageSize) => {
|
|
|
|
+ // 切换分页时的回调,
|
|
|
|
+ // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
|
|
|
|
+ this.echartsIpagination.current = current
|
|
|
|
+ this.echartsIpagination.pageSize = pageSize
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ ...mapGetters(["userInfo"]),
|
|
|
|
+
|
|
|
|
+ sort(pagination, filters, sorter, { currentDataSource }) {
|
|
|
|
+ // console.log(pagination, filters, sorter)
|
|
|
|
+ this.ipagination.current = pagination.current
|
|
|
|
+ this.ipagination.pageSize = pagination.pageSize
|
|
|
|
+ if (sorter.order) {
|
|
|
|
+ this.order = sorter.order ? sorter.order : 'descend'
|
|
|
|
+ this.target = sorter.columnKey
|
|
|
|
+ this.getPersonList({ target: sorter.columnKey, order: sorter.order ? sorter.order : 'descend' })
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ disabledDate(current) {
|
|
|
|
+ return current && current > moment().endOf('day')
|
|
|
|
+ },
|
|
|
|
+ handleDataPicker(date, dateString) {
|
|
|
|
+ console.log(date, dateString, '-------');
|
|
|
|
+ },
|
|
|
|
+ handleCustomClick () {
|
|
|
|
+ this.visible = true
|
|
|
|
+ this.listNum = [...this.columns]
|
|
|
|
+ },
|
|
|
|
+ onShowSizeChange(current, pageSize) {
|
|
|
|
+ console.log(current, pageSize, 'current, pageSize');
|
|
|
|
+ },
|
|
|
|
+ handleCauseSizeChange(current, pageSize) {
|
|
|
|
+ console.log(current, pageSize, 'size-size');
|
|
|
|
+ },
|
|
|
|
+ handleCancelClick(status) {
|
|
|
|
+ this.isCustomVisible = status;
|
|
|
|
+ },
|
|
|
|
+ //自定义列相关
|
|
|
|
+ closeCustomColumn() {
|
|
|
|
+ this.visible = false
|
|
|
|
+ },
|
|
|
|
+ changeColumn(val) {
|
|
|
|
+ this.columns = [...val]
|
|
|
|
+ if (this.columns.length > this.columnsFixd.length && this.columns.length < 8) {
|
|
|
|
+ this.columns.forEach((element, index) => {
|
|
|
|
+ if (index < this.columns.length - 1) {
|
|
|
|
+
|
|
|
|
+ element.width = 'auto'
|
|
|
|
+ element.fixed = false
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ this.scrollX = 0
|
|
|
|
+ }
|
|
|
|
+ else if (this.columns.length >= 8) {
|
|
|
|
+ this.columns.forEach((element, index) => {
|
|
|
|
+ if (index < this.columnsFixd.length) {
|
|
|
|
+ element.width = 150
|
|
|
|
+ element.fixed = 'left'
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ this.scrollX = 1000 + 150 * (this.columns.length - this.columnsFixd.length)
|
|
|
|
+ }
|
|
|
|
+ else {
|
|
|
|
+ this.scrollX = 0
|
|
|
|
+ this.columns.forEach((element) => {
|
|
|
|
+
|
|
|
|
+ element.width = 'auto'
|
|
|
|
+ element.fixed = false
|
|
|
|
+
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ let arr = JSON.stringify(this.columns)
|
|
|
|
+ this.postDataAction('/toutiao/videoReportDaily/saveOrUpdateColumnJson', {
|
|
|
|
+ json: arr,
|
|
|
|
+ columnType: this.typeValue === 'project' ? 15 : 16,
|
|
|
|
+ }).then((res) => {
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ showColumn() {
|
|
|
|
+ this.postDataAction('/toutiao/videoReportDaily/getColumnJson', {
|
|
|
|
+ columnType: this.typeValue === 'project' ? 15 : 16,
|
|
|
|
+ }).then((res) => {
|
|
|
|
+ // console.log(res)
|
|
|
|
+ if (res.success) {
|
|
|
|
+ // console.log(JSON.parse(res.result))
|
|
|
|
+ if (res.result) {
|
|
|
|
+ let columns = JSON.parse(res.result)
|
|
|
|
+ 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.columns = [...this.columnsFixd, ...columns]
|
|
|
|
+
|
|
|
|
+ // this.tableHandle()
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ // console.log(this.columns)
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ this.changeColumn(this.columns)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ //自定义列结束
|
|
|
|
+
|
|
|
|
+ //获取个人绩效
|
|
|
|
+ getPersonAchievements() {
|
|
|
|
+ let params = {};
|
|
|
|
+ params.userId = this.userInfo().id;
|
|
|
|
+ this.getAction('/etl/reportAccountHourly/personalAchievements', params).then(res => {
|
|
|
|
+ this.accountPageSpinning = false;
|
|
|
|
+ if(res.success) {
|
|
|
|
+ this.personData = res.result;
|
|
|
|
+ }
|
|
|
|
+ else {
|
|
|
|
+ this.$message.error(res.message);
|
|
|
|
+ }
|
|
|
|
+ }).catch(error => {
|
|
|
|
+ this.accountPageSpinning = false;
|
|
|
|
+ console.log(error, 'eeee');
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ //切换列表账户项目选项
|
|
|
|
+ checkOutType() {
|
|
|
|
+ this.showChange = false;
|
|
|
|
+ this.projectId = null;
|
|
|
|
+ if(this.typeValue === 'account') {
|
|
|
|
+ this.url = '/etl/reportAccountHourly/leaderAccountPageList';
|
|
|
|
+ this.columns = [...keepPersonData.setNoDeleteColumns() , ...keepPersonData.setDefaultColumns()];
|
|
|
|
+ this.columnsFixd = keepPersonData.setNoDeleteColumns();
|
|
|
|
+ }
|
|
|
|
+ else {
|
|
|
|
+ this.url = '/etl/reportAccountHourly/projectList';
|
|
|
|
+ this.columns = [...keepPersonData.setNoDeleteProjectColumns() , ...keepPersonData.setDefaultColumns()];
|
|
|
|
+ this.columnsFixd = keepPersonData.setNoDeleteProjectColumns();
|
|
|
|
+ }
|
|
|
|
+ this.showChange = true;
|
|
|
|
+ this.getPersonList();
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ //点击项目查看账户
|
|
|
|
+ toAccount(item) {
|
|
|
|
+ this.showChange = false;
|
|
|
|
+ this.projectId = item.projectId;
|
|
|
|
+ this.typeValue = 'account';
|
|
|
|
+ this.url = '/etl/reportAccountHourly/leaderAccountPageList';
|
|
|
|
+ this.columns = [...keepPersonData.setNoDeleteColumns() , ...keepPersonData.setDefaultColumns()];
|
|
|
|
+ this.columnsFixd = keepPersonData.setNoDeleteColumns();
|
|
|
|
+ this.showChange = true;
|
|
|
|
+ this.getPersonList();
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ //点击跳转盯盘详情页
|
|
|
|
+ toDetail(item) {
|
|
|
|
+ localStorage.setItem('stockWatchAccountId',item.accountId);
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
+ this.$router.push('/modules/stockWatch/accountPage');
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ //获取列表
|
|
|
|
+ getPersonList(data) {
|
|
|
|
+ this.loading = true;
|
|
|
|
+ let params = {};
|
|
|
|
+ params.userId = this.userInfo().id;
|
|
|
|
+ params.startTime = this.dateValue.length === 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null;
|
|
|
|
+ params.endTime = this.dateValue.length === 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null;
|
|
|
|
+ params.pageNo = this.ipagination.current;
|
|
|
|
+ params.pageSize = this.ipagination.pageSize;
|
|
|
|
+
|
|
|
|
+ if( this.typeValue === 'account' ) {
|
|
|
|
+ params.projectId = this.projectId
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ if (data) {
|
|
|
|
+ params.sortCode = data.target
|
|
|
|
+ if (data.order == 'descend') {
|
|
|
|
+ params.sortType = 'DESC'
|
|
|
|
+ }
|
|
|
|
+ else {
|
|
|
|
+ params.sortType = 'ASC'
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ else {
|
|
|
|
+ params.sortCode = this.target
|
|
|
|
+ params.sortType = this.order == 'descend' ? 'DESC' : 'ASC'
|
|
|
|
+ }
|
|
|
|
+ this.postDataAction(this.url,params).then(res => {
|
|
|
|
+ this.loading = false;
|
|
|
|
+ if(res.success) {
|
|
|
|
+ this.dataSource = res.result.list
|
|
|
|
+ this.ipagination.total = res.result.total
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ //获取运营人员详情列表
|
|
|
|
+ getOperatingStaffDataList() {
|
|
|
|
+ this.echartsLoading = true;
|
|
|
|
+ let params = {};
|
|
|
|
+ params.pageNo = this.echartsIpagination.current;
|
|
|
|
+ params.pageSize = this.echartsIpagination.pageSize;
|
|
|
|
+ params.userId = this.userInfo().id;
|
|
|
|
+ // echartsData
|
|
|
|
+ this.postDataAction('/etl/reportAccountHourly/operatingStaffDataList',params).then(res => {
|
|
|
|
+ this.echartsLoading = false;
|
|
|
|
+ if(res.success) {
|
|
|
|
+ this.echartsData = res.result.list
|
|
|
|
+ this.echartsIpagination.total = res.result.total
|
|
|
|
+ }
|
|
|
|
+ else {
|
|
|
|
+ this.$message.error(res.message)
|
|
|
|
+ }
|
|
|
|
+ }).catch(error => {
|
|
|
|
+ this.echartsLoading = false;
|
|
|
|
+ console.log(error)
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ //单日数据只查询花费判断
|
|
|
|
+ setDataQuery() {
|
|
|
|
+ if(this.dateEchart.length === 2
|
|
|
|
+ &&
|
|
|
|
+ moment(this.dateEchart[0]).format('YYYY-MM-DD') === moment(this.dateEchart[1]).format('YYYY-MM-DD')) {
|
|
|
|
+ this.$message.warning('单日数据只查询花费')
|
|
|
|
+ this.selectValue = 'charge'
|
|
|
|
+ }
|
|
|
|
+ this.getQueryNewlyData()
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ //趋势图数据接口
|
|
|
|
+ getQueryNewlyData() {
|
|
|
|
+ let params = {};
|
|
|
|
+ params.userId = this.userInfo().id;
|
|
|
|
+ params.parameterCode = this.selectValue;
|
|
|
|
+ params.startTime = this.dateEchart.length === 2 ? moment(this.dateEchart[0]).format('YYYY-MM-DD') : null;
|
|
|
|
+ params.endTime = this.dateEchart.length === 2 ? moment(this.dateEchart[1]).format('YYYY-MM-DD') : null;
|
|
|
|
+ this.postDataAction('/etl/reportAccountHourly/queryNewlyData',params).then(res => {
|
|
|
|
+ if(res.success){
|
|
|
|
+ this.initEchart('accountIndexEchart',this.initAccountIndexEchart(res.result))
|
|
|
|
+ }
|
|
|
|
+ }).catch(error => {
|
|
|
|
+ console.log(error)
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ //趋势图echarts配置
|
|
|
|
+ initAccountIndexEchart(data){
|
|
|
|
+ // let type='激活'
|
|
|
|
+ // console.log(res);(data)
|
|
|
|
+ let option = {
|
|
|
|
+ tooltip: {
|
|
|
|
+ trigger: 'axis',
|
|
|
|
+ },
|
|
|
|
+ grid:{
|
|
|
|
+ left:'5px',
|
|
|
|
+ top:0,
|
|
|
|
+ right:'5px',
|
|
|
|
+ bottom:0
|
|
|
|
+ },
|
|
|
|
+ xAxis:[
|
|
|
|
+ {
|
|
|
|
+ type: 'category',
|
|
|
|
+ show:false,
|
|
|
|
+ boundaryGap: false,
|
|
|
|
+ data: data.map(item => {
|
|
|
|
+ return item.time
|
|
|
|
+ }),
|
|
|
|
+ axisPointer: {
|
|
|
|
+ type: 'none'
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ ] ,
|
|
|
|
+ yAxis: {
|
|
|
|
+ type: 'value',
|
|
|
|
+ show:false,
|
|
|
|
+ },
|
|
|
|
+ series: [
|
|
|
|
+ {
|
|
|
|
+ name: this.selectValue === 'campaign'
|
|
|
|
+ ?'上新计划数':this.selectValue === 'unit'
|
|
|
|
+ ?'上新组数':'花费',
|
|
|
|
+ data: data.map(item => {
|
|
|
|
+ return item.value
|
|
|
|
+ }),
|
|
|
|
+ type: 'line',
|
|
|
|
+ smooth: true,
|
|
|
|
+ showSymbol: false,
|
|
|
|
+ symbol: 'circle',
|
|
|
|
+ lineStyle: {
|
|
|
|
+ color: '#2461F1',
|
|
|
|
+ width: 3,
|
|
|
|
+ },
|
|
|
|
+ itemStyle:{
|
|
|
|
+ color:'#2461F1',
|
|
|
|
+ borderWidth:2,
|
|
|
|
+ borderColor:'#fff'
|
|
|
|
+ },
|
|
|
|
+ areaStyle: {
|
|
|
|
+ color:{
|
|
|
|
+ type: 'linear',
|
|
|
|
+ x: 0,
|
|
|
|
+ y: 0,
|
|
|
|
+ x2: 0,
|
|
|
|
+ y2: 1,
|
|
|
|
+ colorStops: [{
|
|
|
|
+ offset: 0, color: '#2461F1' // 0% 处的颜色
|
|
|
|
+ }, {
|
|
|
|
+ offset: 1, color: 'white' // 100% 处的颜色
|
|
|
|
+ }],
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ ]
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ return option
|
|
|
|
+ },
|
|
|
|
+ //获取echart的值
|
|
|
|
+ initEchart(idName, optionName) {
|
|
|
|
+ let that = this;
|
|
|
|
+ const chart = this.$refs[idName]
|
|
|
|
+ // // console.log(res);(chart)
|
|
|
|
+ if (chart) {
|
|
|
|
+ const myChart = echarts.init(document.getElementById(idName))
|
|
|
|
+ // myChart.showLoading({
|
|
|
|
+ // text: "图表数据正在努力加载..."
|
|
|
|
+ // });
|
|
|
|
+ myChart.clear()
|
|
|
|
+ myChart.setOption(optionName)
|
|
|
|
+ window.addEventListener('resize', function() {
|
|
|
|
+ that.clientWidth = document.documentElement.clientWidth - 224
|
|
|
|
+ myChart.resize()
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ watch: {
|
|
|
|
+ 'ipagination.current':function(n,o) {
|
|
|
|
+ if(n !== o) {
|
|
|
|
+ this.getPersonList()
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ 'echartsIpagination.current':function(n,o) {
|
|
|
|
+ if(n !== o) {
|
|
|
|
+ this.getOperatingStaffDataList()
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ mounted() {
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
+ this.accountPageSpinning = true
|
|
|
|
+ this.clientWidth = document.documentElement.clientWidth - 224
|
|
|
|
+ this.showColumn();
|
|
|
|
+ this.getPersonAchievements();
|
|
|
|
+ this.getPersonList();
|
|
|
|
+ this.getQueryNewlyData();
|
|
|
|
+ this.getOperatingStaffDataList();
|
|
|
|
+
|
|
|
|
+ })
|
|
|
|
+ }
|
|
};
|
|
};
|
|
</script>
|
|
</script>
|
|
<style lang="less" scoped>
|
|
<style lang="less" scoped>
|